chore: alex - always select preceding node during debug

This commit is contained in:
Alex Spencer
2025-12-04 13:55:51 -08:00
parent fcebfc952d
commit badacad658
2 changed files with 32 additions and 7 deletions
@@ -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);
}
}}
>
@@ -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(() => {