From 39ff7d4b209ec6ede8ff3970d0dca6c689fde27c Mon Sep 17 00:00:00 2001
From: Aleksandar Petrov <8142643+aleks-p@users.noreply.github.com>
Date: Thu, 4 Dec 2025 09:15:44 -0400
Subject: [PATCH] Add cursor modes

---
 .../components/ExploreMapCanvas.tsx           | 22 ++++-
 .../components/ExploreMapFloatingToolbar.tsx  | 85 ++++++++++++++++++-
 .../features/explore-map/state/crdtSlice.ts   | 10 +++
 .../features/explore-map/state/selectors.ts   |  7 ++
 .../app/features/explore-map/state/types.ts   |  4 +
 5 files changed, 121 insertions(+), 7 deletions(-)

diff --git a/public/app/features/explore-map/components/ExploreMapCanvas.tsx b/public/app/features/explore-map/components/ExploreMapCanvas.tsx
index 1660a8ca0cf..98790292b1a 100644
--- a/public/app/features/explore-map/components/ExploreMapCanvas.tsx
+++ b/public/app/features/explore-map/components/ExploreMapCanvas.tsx
@@ -10,7 +10,7 @@ import { useTransformContext } from '../context/TransformContext';
 import { useCursorSync } from '../hooks/useCursorSync';
 import { useCursorViewportTracking } from '../hooks/useCursorViewportTracking';
 import { selectPanel as selectPanelCRDT, updateViewport as updateViewportCRDT, selectMultiplePanels as selectMultiplePanelsCRDT } from '../state/crdtSlice';
-import { selectPanels, selectFrames, selectViewport, selectCursors, selectSelectedPanelIds, selectMapUid, selectPostItNotes } from '../state/selectors';
+import { selectPanels, selectFrames, selectViewport, selectCursors, selectSelectedPanelIds, selectMapUid, selectPostItNotes, selectCursorMode } from '../state/selectors';
 
 import { EdgeCursorIndicator } from './EdgeCursorIndicator';
 import { ExploreMapComment } from './ExploreMapComment';
@@ -46,6 +46,7 @@ export function ExploreMapCanvas() {
   const cursors = useSelector((state) => selectCursors(state.exploreMapCRDT));
   const selectedPanelIds = useSelector((state) => selectSelectedPanelIds(state.exploreMapCRDT));
   const mapUid = useSelector((state) => selectMapUid(state.exploreMapCRDT));
+  const cursorMode = useSelector((state) => selectCursorMode(state.exploreMapCRDT));
 
   // Initialize cursor sync
   const { updatePosition, updatePositionImmediate } = useCursorSync({
@@ -131,6 +132,11 @@ export function ExploreMapCanvas() {
 
   const handleCanvasMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
+      // Don't allow selection in hand mode (panning mode)
+      if (cursorMode === 'hand') {
+        return;
+      }
+
       // Only start selection if clicking directly on canvas (not on panels)
       if (e.target !== e.currentTarget) {
         return;
@@ -166,7 +172,7 @@ export function ExploreMapCanvas() {
       });
       setIsSelecting(true);
     },
-    [contextTransformRef, viewport]
+    [contextTransformRef, viewport, cursorMode]
   );
 
   const handleCanvasMouseMove = useCallback(
@@ -325,7 +331,7 @@ export function ExploreMapCanvas() {
         panning={{
           disabled: false,
           excluded: ['panel-drag-handle', 'react-rnd'],
-          allowLeftClickPan: false,
+          allowLeftClickPan: cursorMode === 'hand',
           allowRightClickPan: false,
           allowMiddleClickPan: true,
         }}
@@ -333,7 +339,10 @@ export function ExploreMapCanvas() {
         doubleClick={{ disabled: true }}
         wheel={{ step: 0.1 }}
       >
-        <TransformComponent wrapperClass={styles.transformWrapper} contentClass={styles.transformContent}>
+        <TransformComponent
+          wrapperClass={`${styles.transformWrapper} ${cursorMode === 'hand' ? styles.handCursor : styles.pointerCursor}`}
+          contentClass={styles.transformContent}
+        >
           <div
             ref={canvasRef}
             className={styles.canvas}
@@ -403,6 +412,11 @@ const getStyles = (theme: GrafanaTheme2) => {
     transformWrapper: css({
       width: '100%',
       height: '100%',
+    }),
+    pointerCursor: css({
+      cursor: 'default',
+    }),
+    handCursor: css({
       cursor: 'grab',
       '&:active': {
         cursor: 'grabbing',
diff --git a/public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx b/public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx
index 01ec529dc1e..5015b844ea1 100644
--- a/public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx
+++ b/public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx
@@ -13,9 +13,8 @@ import prometheusLogoSvg from 'app/plugins/datasource/prometheus/img/prometheus_
 import tempoLogoSvg from 'app/plugins/datasource/tempo/img/tempo_logo.svg';
 import { useDispatch, useSelector } from 'app/types/store';
 
-import { addPanel, addFrame, addPostItNote } from '../state/crdtSlice';
-import { selectPanels, selectMapUid, selectViewport, selectSelectedPanelIds } from '../state/selectors';
-import { selectPanels, selectMapUid } from '../state/selectors';
+import { addPanel, addFrame, addPostItNote, setCursorMode } from '../state/crdtSlice';
+import { selectPanels, selectMapUid, selectViewport, selectSelectedPanelIds, selectCursorMode } from '../state/selectors';
 
 import { AddPanelAction } from './AssistantComponents';
 
@@ -33,6 +32,7 @@ export function ExploreMapFloatingToolbar() {
   const mapUid = useSelector((state) => selectMapUid(state.exploreMapCRDT));
   const viewport = useSelector((state) => selectViewport(state.exploreMapCRDT));
   const selectedPanelIds = useSelector((state) => selectSelectedPanelIds(state.exploreMapCRDT));
+  const cursorMode = useSelector((state) => selectCursorMode(state.exploreMapCRDT));
 
   const handleAddPanel = useCallback(() => {
     dispatch(
@@ -171,6 +171,14 @@ export function ExploreMapFloatingToolbar() {
     setIsOpen(false);
   }, [dispatch, currentUsername]);
 
+  const handleSetPointerMode = useCallback(() => {
+    dispatch(setCursorMode({ mode: 'pointer' }));
+  }, [dispatch]);
+
+  const handleSetHandMode = useCallback(() => {
+    dispatch(setCursorMode({ mode: 'hand' }));
+  }, [dispatch]);
+
   // Build context for assistant
   const canvasContext = useMemo(() => {
     const panelsArray = Object.values(panels);
@@ -310,6 +318,38 @@ CRITICAL:
 
   return (
     <div className={styles.floatingToolbar}>
+      <div className={styles.cursorModeGroup}>
+        <button
+          className={`${styles.cursorModeButton} ${cursorMode === 'pointer' ? styles.cursorModeButtonActive : ''}`}
+          onClick={handleSetPointerMode}
+          title="Pointer mode (V)"
+          aria-label="Pointer mode"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className={styles.cursorIcon}>
+            <path
+              d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+        <button
+          className={`${styles.cursorModeButton} ${cursorMode === 'hand' ? styles.cursorModeButtonActive : ''}`}
+          onClick={handleSetHandMode}
+          title="Hand mode (H)"
+          aria-label="Hand mode"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className={styles.cursorIcon}>
+            <path
+              d="M11.5 8.5V4a1.5 1.5 0 0 0-3 0v6.5m3-2V5a1.5 1.5 0 0 1 3 0v5m0-2.5V5a1.5 1.5 0 0 1 3 0v7m0-2.5V7a1.5 1.5 0 0 1 3 0v8.5c0 2.5-2 4.5-4.5 4.5h-2.5C11 20 9 18.5 9 16v-3.5"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      </div>
+      <div className={styles.toolbarDivider} />
       <ButtonGroup>
         <Button icon="plus" onClick={handleAddPanel} variant="primary">
           <Trans i18nKey="explore-map.toolbar.add-panel">Add panel</Trans>
@@ -368,6 +408,45 @@ const getStyles = (theme: GrafanaTheme2) => {
       boxShadow: theme.shadows.z3,
       zIndex: 1000,
     }),
+    cursorModeGroup: css({
+      display: 'flex',
+      gap: '2px',
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: theme.shape.radius.default,
+      padding: '2px',
+    }),
+    cursorModeButton: css({
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '40px',
+      height: '40px',
+      border: 'none',
+      borderRadius: theme.shape.radius.default,
+      backgroundColor: 'transparent',
+      color: theme.colors.text.secondary,
+      cursor: 'pointer',
+      transition: 'all 0.2s ease',
+      '&:hover': {
+        backgroundColor: theme.colors.action.hover,
+        color: theme.colors.text.primary,
+      },
+    }),
+    cursorModeButtonActive: css({
+      backgroundColor: theme.colors.background.primary,
+      color: theme.colors.text.primary,
+      boxShadow: theme.shadows.z1,
+    }),
+    cursorIcon: css({
+      width: '20px',
+      height: '20px',
+    }),
+    toolbarDivider: css({
+      width: '1px',
+      height: '32px',
+      backgroundColor: theme.colors.border.weak,
+      margin: `0 ${theme.spacing(1)}`,
+    }),
   };
 };
 
diff --git a/public/app/features/explore-map/state/crdtSlice.ts b/public/app/features/explore-map/state/crdtSlice.ts
index 5a7a781cc58..a88a1bd2500 100644
--- a/public/app/features/explore-map/state/crdtSlice.ts
+++ b/public/app/features/explore-map/state/crdtSlice.ts
@@ -41,6 +41,7 @@ export interface ExploreMapCRDTState {
     viewport: CanvasViewport;
     selectedPanelIds: string[];
     cursors: Record<string, UserCursor>;
+    cursorMode: 'pointer' | 'hand';
     isOnline: boolean;
     isSyncing: boolean;
     activeDrag?: {
@@ -80,6 +81,7 @@ export function createInitialCRDTState(mapUid?: string): ExploreMapCRDTState {
       viewport: initialViewport,
       selectedPanelIds: [],
       cursors: {},
+      cursorMode: 'pointer',
       isOnline: false,
       isSyncing: false,
       activeDrag: undefined,
@@ -1102,6 +1104,13 @@ const crdtSlice = createSlice({
       delete state.local.cursors[action.payload.sessionId];
     },
 
+    /**
+     * Set cursor mode (pointer or hand)
+     */
+    setCursorMode: (state, action: PayloadAction<{ mode: 'pointer' | 'hand' }>) => {
+      state.local.cursorMode = action.payload.mode;
+    },
+
     /**
      * Set online status
      */
@@ -1194,6 +1203,7 @@ export const {
   selectMultiplePanels,
   updateCursor,
   removeCursor,
+  setCursorMode,
   setOnlineStatus,
   setSyncingStatus,
   setActiveDrag,
diff --git a/public/app/features/explore-map/state/selectors.ts b/public/app/features/explore-map/state/selectors.ts
index 8b986c868e6..ba2a935abcf 100644
--- a/public/app/features/explore-map/state/selectors.ts
+++ b/public/app/features/explore-map/state/selectors.ts
@@ -294,6 +294,13 @@ export const selectCursors = (state: ExploreMapCRDTState) => {
   return state.local.cursors;
 };
 
+/**
+ * Select cursor mode
+ */
+export const selectCursorMode = (state: ExploreMapCRDTState) => {
+  return state.local.cursorMode;
+};
+
 /**
  * Select online status
  */
diff --git a/public/app/features/explore-map/state/types.ts b/public/app/features/explore-map/state/types.ts
index f0c76cd4ab8..cbd5e276a75 100644
--- a/public/app/features/explore-map/state/types.ts
+++ b/public/app/features/explore-map/state/types.ts
@@ -76,6 +76,8 @@ export interface UserCursor {
   selectedPanelIds: string[];
 }
 
+export type CursorMode = 'pointer' | 'hand';
+
 export interface ExploreMapState {
   uid?: string;
   title?: string;
@@ -85,6 +87,7 @@ export interface ExploreMapState {
   selectedPanelIds: string[];
   nextZIndex: number;
   cursors: Record<string, UserCursor>;
+  cursorMode: CursorMode;
   crdtState?: any; // Raw CRDT state JSON for proper sync
 }
 
@@ -105,4 +108,5 @@ export const initialExploreMapState: ExploreMapState = {
   selectedPanelIds: [],
   nextZIndex: 1,
   cursors: {},
+  cursorMode: 'pointer',
 };