Timeseries: Change mouse cursors to indicate active x-axis and y-axis zoom interactions (#113465)

* feat(panel-zoom): change mouse cursor when zooming x-axis or y-axis

* test(panel-zoom): browser test mouse cursor change interactions

* fix(mouse-cursor-styles): no need for important

packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx

@@ -340,6 +340,30 @@ export const TooltipPlugin2 = ({
         );
       }
 
+      // add zoom-in cursor during drag-to-zoom interaction
+      if (queryZoom != null || clientZoom) {
+        u.over.addEventListener(
+          'mousedown',
+          (e) => {
+            if (!maybeZoomAction(e)) {
+              return;
+            }
+
+            if (e.button === 0) {
+              u.over.classList.add('zoom-drag');
+
+              let onUp = () => {
+                u.over.classList.remove('zoom-drag');
+                document.removeEventListener('mouseup', onUp, true);
+              };
+
+              document.addEventListener('mouseup', onUp, true);
+            }
+          },
+          true
+        );
+      }
+
       // this handles pinning, 0-width range selection, and one-click
       u.over.addEventListener('click', (e) => {
         if (e.target === u.over) {

packages/grafana-ui/src/themes/GlobalStyles/uPlot.ts

@@ -12,6 +12,10 @@ export function getUplotStyles(theme: GrafanaTheme2) {
       background: 'rgba(120, 120, 130, 0.2)',
     },
 
+    '.u-over.zoom-drag': {
+      cursor: 'zoom-in',
+    },
+
     '.u-hz .u-cursor-x, .u-vt .u-cursor-y': {
       borderRight: '1px dashed rgba(120, 120, 130, 0.5)',
     },