From badacad6580acaca8ea172e86b83dc47c3f0e2f4 Mon Sep 17 00:00:00 2001
From: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
Date: Thu, 4 Dec 2025 13:55:51 -0800
Subject: [PATCH] chore: alex - always select preceding node during debug

---
 .../PanelDataPane/QueryTransformList.tsx      | 29 +++++++++++++++----
 .../panel-edit/PanelDataPane/useDebugMode.ts  | 10 +++++--
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
index dacbf155f60..778684be3c5 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
@@ -74,6 +74,17 @@ export const QueryTransformList = memo(
     const [collapsed, setCollapsed] = useState({ queries: false, transforms: false });
 
     // Debug mode via custom hook
+    const handleDebugPositionChange = useCallback(
+      (newPosition: number) => {
+        // Select the card directly above the debug line (last enabled card)
+        const cardToSelect = allItems[newPosition - 1];
+        if (cardToSelect) {
+          onSelect(cardToSelect.id);
+        }
+      },
+      [allItems, onSelect]
+    );
+
     const {
       debugPosition,
       setDebugPosition,
@@ -83,7 +94,7 @@ export const QueryTransformList = memo(
       isDraggingDebugLine,
       isItemHiddenByDebug,
       toggleDebugMode,
-    } = useDebugMode(allItems);
+    } = useDebugMode(allItems, handleDebugPositionChange);
 
     // Store original states for restoration
     const originalStatesRef = useRef<Map<string, boolean>>(new Map());
@@ -534,10 +545,14 @@ export const QueryTransformList = memo(
                                               onKeyDown={(e) => {
                                                 if (e.key === 'ArrowUp') {
                                                   e.preventDefault();
-                                                  setDebugPosition(Math.max(1, debugPosition - 1));
+                                                  const newPos = Math.max(1, debugPosition - 1);
+                                                  setDebugPosition(newPos);
+                                                  handleDebugPositionChange(newPos);
                                                 } else if (e.key === 'ArrowDown') {
                                                   e.preventDefault();
-                                                  setDebugPosition(Math.min(allItems.length, debugPosition + 1));
+                                                  const newPos = Math.min(allItems.length, debugPosition + 1);
+                                                  setDebugPosition(newPos);
+                                                  handleDebugPositionChange(newPos);
                                                 }
                                               }}
                                             >
@@ -686,10 +701,14 @@ export const QueryTransformList = memo(
                                               onKeyDown={(e) => {
                                                 if (e.key === 'ArrowUp') {
                                                   e.preventDefault();
-                                                  setDebugPosition(Math.max(1, debugPosition - 1));
+                                                  const newPos = Math.max(1, debugPosition - 1);
+                                                  setDebugPosition(newPos);
+                                                  handleDebugPositionChange(newPos);
                                                 } else if (e.key === 'ArrowDown') {
                                                   e.preventDefault();
-                                                  setDebugPosition(Math.min(allItems.length, debugPosition + 1));
+                                                  const newPos = Math.min(allItems.length, debugPosition + 1);
+                                                  setDebugPosition(newPos);
+                                                  handleDebugPositionChange(newPos);
                                                 }
                                               }}
                                             >
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/useDebugMode.ts b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/useDebugMode.ts
index 90a838187de..4e9d2116f48 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/useDebugMode.ts
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/useDebugMode.ts
@@ -27,7 +27,10 @@ export interface UseDebugModeResult {
   isItemHiddenByDebug: (itemId: string) => boolean | null;
 }
 
-export function useDebugMode(allItems: QueryTransformItem[]): UseDebugModeResult {
+export function useDebugMode(
+  allItems: QueryTransformItem[],
+  onPositionChange?: (newPosition: number) => void
+): UseDebugModeResult {
   const [isDebugMode, setIsDebugMode] = useState(false);
   const [debugPosition, setDebugPosition] = useState(allItems.length);
   const [isDraggingDebugLine, setIsDraggingDebugLine] = useState(false);
@@ -96,7 +99,10 @@ export function useDebugMode(allItems: QueryTransformItem[]): UseDebugModeResult
 
     setDebugPosition(newPosition);
     setDragOffset(0);
-  }, [dragOffset, dragStartPosition, allItems.length]);
+
+    // Notify parent of position change so it can select the appropriate card
+    onPositionChange?.(newPosition);
+  }, [dragOffset, dragStartPosition, allItems.length, onPositionChange]);
 
   // Add global mouse event listeners for dragging
   useEffect(() => {