Ensure time conductor mode is set when synchronizing time range (#7731)

* Use setMode API to set the time span as well as the bounds instead of the old bounds time API.

* Add test for synchronized time conductor via plots

* Fix linting issue

e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js

@@ -25,7 +25,11 @@
  *
  */
 
-import { createDomainObjectWithDefaults, getCanvasPixels } from '../../../../appActions.js';
+import {
+  createDomainObjectWithDefaults,
+  getCanvasPixels,
+  setRealTimeMode
+} from '../../../../appActions.js';
 import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Plot Rendering', () => {
@@ -50,6 +54,34 @@ test.describe('Plot Rendering', () => {
       createMineFolderRequests.push(req);
     });
     expect(createMineFolderRequests.length).toEqual(0);
+    await page.getByLabel('Plot Canvas').hover();
+  });
+
+  test('Time conductor synchronizes with plot time range when that plot control is clicked', async ({
+    page
+  }) => {
+    // Navigate to Sine Wave Generator
+    await page.goto(sineWaveGeneratorObject.url);
+    // Switch to real-time mode
+    await setRealTimeMode(page);
+
+    // hover over plot for plot controls
+    await page.getByLabel('Plot Canvas').hover();
+    // click on pause control
+    await page.getByTitle('Pause incoming real-time data').click();
+
+    // expect plot to be paused
+    await expect(page.getByTitle('Resume displaying real-time data')).toBeVisible();
+
+    // hover over plot for plot controls
+    await page.getByLabel('Plot Canvas').hover();
+    // click on synchronize with time conductor
+    await page.getByTitle('Synchronize Time Conductor').click();
+
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+
+    //confirm that you're now in fixed mode with the correct range
+    await expect(page.getByLabel('Time Conductor Mode')).toHaveText('Fixed Timespan');
   });
 
   test.fixme('Plot is rendered when infinity values exist', async ({ page }) => {

src/plugins/plot/MctPlot.vue

@@ -180,6 +180,7 @@ import _ from 'lodash';
 import { useEventBus } from 'utils/useEventBus';
 import { toRaw } from 'vue';
 
+import { MODES } from '../../api/time/constants';
 import TagEditorClassNames from '../inspectorViews/annotations/tags/TagEditorClassNames.js';
 import XAxis from './axis/XAxis.vue';
 import YAxis from './axis/YAxis.vue';
@@ -1896,7 +1897,7 @@ export default {
 
     synchronizeTimeConductor() {
       const range = this.config.xAxis.get('displayRange');
-      this.timeContext.bounds({
+      this.timeContext.setMode(MODES.fixed, {
         start: range.min,
         end: range.max
       });