Don't disallow mouse events when in compact mode for plots

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

@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2025, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+ * This test suite is dedicated to testing the rendering and interaction of plots.
+ *
+ */
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Plot Controls in compact mode', () => {
+  let timeStrip;
+
+  test.beforeEach(async ({ page }) => {
+    // Open a browser, navigate to the main page, and wait until all networkevents to resolve
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    timeStrip = await createDomainObjectWithDefaults(page, {
+      type: 'Time Strip'
+    });
+
+    // Create an overlay plot with a sine wave generator
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: timeStrip.uuid
+    });
+    await page.goto(`${timeStrip.url}`);
+  });
+
+  test('Plots show cursor guides', async ({ page }) => {
+    // hover over plot for plot controls
+    await page.getByLabel('Plot Canvas').hover();
+    // click on cursor guides control
+    await page.getByTitle('Toggle cursor guides').click();
+    await page.getByLabel('Plot Canvas').hover();
+    await expect(page.getByLabel('Vertical cursor guide')).toBeVisible();
+    await expect(page.getByLabel('Horizontal cursor guide')).toBeVisible();
+  });
+});

src/plugins/plot/MctPlot.vue

@@ -164,11 +164,13 @@
           <div
             v-show="cursorGuide"
             ref="cursorGuideVertical"
+            aria-label="Vertical cursor guide"
             class="c-cursor-guide--v js-cursor-guide--v"
           ></div>
           <div
             v-show="cursorGuide"
             ref="cursorGuideHorizontal"
+            aria-label="Horizontal cursor guide"
             class="c-cursor-guide--h js-cursor-guide--h"
           ></div>
         </div>
@@ -854,13 +856,11 @@
 
       this.canvas = this.$refs.chartContainer.querySelectorAll('canvas')[1];
 
-      if (!this.options.compact) {
-        this.listenTo(this.canvas, 'mousemove', this.trackMousePosition, this);
-        this.listenTo(this.canvas, 'mouseleave', this.untrackMousePosition, this);
-        this.listenTo(this.canvas, 'mousedown', this.onMouseDown, this);
-        this.listenTo(this.canvas, 'click', this.selectNearbyAnnotations, this);
-        this.listenTo(this.canvas, 'wheel', this.wheelZoom, this);
-      }
+      this.listenTo(this.canvas, 'mousemove', this.trackMousePosition, this);
+      this.listenTo(this.canvas, 'mouseleave', this.untrackMousePosition, this);
+      this.listenTo(this.canvas, 'mousedown', this.onMouseDown, this);
+      this.listenTo(this.canvas, 'click', this.selectNearbyAnnotations, this);
+      this.listenTo(this.canvas, 'wheel', this.wheelZoom, this);
     },
 
     marqueeAnnotations(annotationsToSelect) {
@@ -1115,19 +1115,21 @@
       this.listenTo(window, 'mouseup', this.onMouseUp, this);
       this.listenTo(window, 'mousemove', this.trackMousePosition, this);
 
-      // track frozen state on mouseDown to be read on mouseUp
-      const isFrozen =
-        this.config.xAxis.get('frozen') === true && this.config.yAxis.get('frozen') === true;
-      this.isFrozenOnMouseDown = isFrozen;
+      if (!this.options.compact) {
+        // track frozen state on mouseDown to be read on mouseUp
+        const isFrozen =
+          this.config.xAxis.get('frozen') === true && this.config.yAxis.get('frozen') === true;
+        this.isFrozenOnMouseDown = isFrozen;
 
-      if (event.altKey && !event.shiftKey) {
-        return this.startPan(event);
-      } else if (event.altKey && event.shiftKey) {
-        this.freeze();
+        if (event.altKey && !event.shiftKey) {
+          return this.startPan(event);
+        } else if (event.altKey && event.shiftKey) {
+          this.freeze();
 
-        return this.startMarquee(event, true);
-      } else {
-        return this.startMarquee(event, false);
+          return this.startMarquee(event, true);
+        } else {
+          return this.startMarquee(event, false);
+        }
       }
     },
 
@@ -1158,11 +1160,15 @@
     },
 
     isMouseClick() {
-      if (!this.marquee) {
+      // We may not have a marquee if we've disabled pan/zoom, but we still need to know if it's a mouse click for highlights and lock points.
+      if (!this.marquee && !this.positionOverPlot) {
         return false;
       }
 
-      const { start, end } = this.marquee;
+      const { start, end } = this.marquee ?? {
+        start: this.positionOverPlot,
+        end: this.positionOverPlot
+      };
       const someYPositionOverPlot = start.y.some((y) => y);
 
       return start.x === end.x && someYPositionOverPlot;

src/plugins/plot/PlotView.vue

@@ -162,14 +162,6 @@ export default {
       }
     }
   },
-  watch: {
-    gridLines(newGridLines) {
-      this.gridLines = newGridLines;
-    },
-    cursorGuide(newCursorGuide) {
-      this.cursorGuide = newCursorGuide;
-    }
-  },
   created() {
     eventHelpers.extend(this);
     this.imageExporter = new ImageExporter(this.openmct);