fix: search and click now pin nodes, hover doesn't clear pinned state

Three bugs fixed:

1. Search blanking graph: search now sets pinnedNode which persists.
   Reducers use activeNode = hoveredNode || pinnedNode so the pinned
   highlight stays visible even when mouse moves away.

2. Click not persisting: clicking a node now pins it AND opens impact
   panel. The highlight stays until user clicks empty stage or closes
   the panel.

3. Search + hover fighting: hover takes visual priority (for exploring)
   but pinned state persists underneath. When hover ends, pinned node
   highlight comes back.

Also: search zoom uses setTimeout(50ms) so reducer applies before
camera animates -- prevents blank frame during transition.

Author: DevanshuNEU

frontend/src/components/DependencyGraph/GraphView/SearchBar.tsx

@@ -1,5 +1,5 @@
 // Search bar for finding and focusing nodes in the graph
-// Uses shared highlight state from parent -- doesn't touch reducers directly
+// Sets pinnedNode in parent -- doesn't manage reducers
 
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { Search, X } from 'lucide-react'
@@ -16,7 +16,6 @@ export function SearchBar({ onFocusNode }: SearchBarProps) {
   const [isOpen, setIsOpen] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
 
-  // fuzzy match against all node labels and full paths
   useEffect(() => {
     if (!query.trim()) {
       setResults([])
@@ -29,8 +28,7 @@ export function SearchBar({ onFocusNode }: SearchBarProps) {
 
     graph.forEachNode((node, attrs) => {
       const label = (attrs.label as string) || ''
-      const fullPath = node.toLowerCase()
-      if (fullPath.includes(q) || label.toLowerCase().includes(q)) {
+      if (node.toLowerCase().includes(q) || label.toLowerCase().includes(q)) {
         matches.push({ id: node, label })
       }
     })
@@ -48,15 +46,18 @@ export function SearchBar({ onFocusNode }: SearchBarProps) {
     const graph = sigma.getGraph()
     if (!graph.hasNode(nodeId)) return
 
-    // tell parent to highlight this node (drives shared reducers)
+    // pin this node (parent handles highlight via reducers)
     onFocusNode(nodeId)
 
-    // zoom to the node using graph coordinates (not display coords)
+    // zoom camera to node using graph coordinates
     const attrs = graph.getNodeAttributes(nodeId)
-    sigma.getCamera().animate(
-      { x: attrs.x as number, y: attrs.y as number, ratio: 0.15 },
-      { duration: 400 }
-    )
+    // small delay so the reducer applies before camera moves
+    setTimeout(() => {
+      sigma.getCamera().animate(
+        { x: attrs.x as number, y: attrs.y as number, ratio: 0.2 },
+        { duration: 500 }
+      )
+    }, 50)
 
     setQuery('')
     setResults([])
@@ -71,10 +72,8 @@ export function SearchBar({ onFocusNode }: SearchBarProps) {
     sigma.getCamera().animatedReset({ duration: 300 })
   }, [sigma, onFocusNode])
 
-  // keyboard: / to open, Escape to clear
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
-      // don't capture if user is typing in another input
       const target = e.target as HTMLElement
       if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return
 

frontend/src/components/DependencyGraph/GraphView/index.tsx

@@ -1,7 +1,8 @@
 // Sigma.js WebGL graph view
-// Single source of truth for highlight state shared between search and hover
+// Highlight state: "pinned" (from click/search) vs "hovered" (from mouseover)
+// Pinned persists until user clicks stage or closes panel. Hover is transient.
 
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect } from 'react'
 import {
   SigmaContainer,
   useSigma,
@@ -60,19 +61,27 @@ function LoadAndDisplay({ graph }: { graph: Graph }) {
   return null
 }
 
-// Single component that owns all highlight state
-// Both hover and search funnel into "highlightedNode"
-function InteractionsAndHighlight({
+// Builds the neighbor set for a given node, used by the reducer
+function getNeighborSet(sigma: ReturnType<typeof useSigma>, nodeId: string): Set<string> | null {
+  const graph = sigma.getGraph()
+  if (!graph.hasNode(nodeId)) return null
+  const neighbors = new Set(graph.neighbors(nodeId))
+  neighbors.add(nodeId)
+  return neighbors
+}
+
+function Interactions({
   onSelectFile,
-  highlightedNode,
-  setHighlightedNode,
+  pinnedNode,
+  setPinnedNode,
 }: {
   onSelectFile?: (filePath: string) => void
-  highlightedNode: string | null
-  setHighlightedNode: (node: string | null) => void
+  pinnedNode: string | null
+  setPinnedNode: (node: string | null) => void
 }) {
   const sigma = useSigma()
   const registerEvents = useRegisterEvents()
+  const [hoveredNode, setHoveredNode] = useState<string | null>(null)
   const [tooltip, setTooltip] = useState<{
     nodeId: string
     position: { x: number; y: number }
@@ -81,68 +90,79 @@ function InteractionsAndHighlight({
   useEffect(() => {
     registerEvents({
       enterNode: ({ node, event }) => {
-        setHighlightedNode(node)
+        setHoveredNode(node)
         setTooltip({ nodeId: node, position: { x: event.x, y: event.y } })
         const el = sigma.getContainer()
         if (el) el.style.cursor = 'pointer'
       },
       leaveNode: () => {
-        setHighlightedNode(null)
+        setHoveredNode(null)
         setTooltip(null)
         const el = sigma.getContainer()
         if (el) el.style.cursor = 'default'
       },
-      clickNode: ({ node }) => onSelectFile?.(node),
+      clickNode: ({ node }) => {
+        // pin this node and open impact panel
+        setPinnedNode(node)
+        onSelectFile?.(node)
+      },
       doubleClickNode: ({ node }) => {
-        // use graph coords (node attributes), not display coords
         const graph = sigma.getGraph()
         if (!graph.hasNode(node)) return
         const attrs = graph.getNodeAttributes(node)
         sigma.getCamera().animate(
-          { x: attrs.x, y: attrs.y, ratio: 0.12 },
+          { x: attrs.x as number, y: attrs.y as number, ratio: 0.12 },
           { duration: 400 }
         )
       },
-      // click on empty stage clears highlight
       clickStage: () => {
-        setHighlightedNode(null)
+        // clear pinned state when clicking empty space
+        setPinnedNode(null)
+        onSelectFile?.(undefined as any)
       },
     })
-  }, [registerEvents, sigma, onSelectFile, setHighlightedNode])
+  }, [registerEvents, sigma, onSelectFile, setPinnedNode])
+
+  // the active node is: hovered takes priority for visual, but pinned persists
+  const activeNode = hoveredNode || pinnedNode
 
-  // single reducer driven by highlightedNode -- works for both hover and search
   useEffect(() => {
-    const graph = sigma.getGraph()
+    if (!activeNode) {
+      sigma.setSetting('nodeReducer', null)
+      sigma.setSetting('edgeReducer', null)
+      return
+    }
 
-    if (highlightedNode && graph.hasNode(highlightedNode)) {
-      const neighbors = new Set(graph.neighbors(highlightedNode))
-      neighbors.add(highlightedNode)
-
-      sigma.setSetting('nodeReducer', (node, data) => {
-        if (neighbors.has(node)) {
-          return {
-            ...data,
-            zIndex: 1,
-            label: data.label,
-            borderSize: node === highlightedNode ? 3 : 1,
-            borderColor: node === highlightedNode ? '#ffffff' : 'rgba(255,255,255,0.15)',
-          }
-        }
-        return { ...data, color: 'rgba(31, 41, 55, 0.25)', label: '', zIndex: 0, borderSize: 0 }
-      })
-      sigma.setSetting('edgeReducer', (edge, data) => {
-        const src = graph.source(edge)
-        const tgt = graph.target(edge)
-        if (neighbors.has(src) && neighbors.has(tgt)) {
-          return { ...data, color: 'rgba(99, 102, 241, 0.5)', size: 1.5 }
-        }
-        return { ...data, hidden: true }
-      })
-    } else {
+    const neighbors = getNeighborSet(sigma, activeNode)
+    if (!neighbors) {
       sigma.setSetting('nodeReducer', null)
       sigma.setSetting('edgeReducer', null)
+      return
     }
-  }, [highlightedNode, sigma])
+
+    sigma.setSetting('nodeReducer', (node, data) => {
+      if (neighbors.has(node)) {
+        return {
+          ...data,
+          zIndex: 1,
+          label: data.label,
+          borderSize: node === activeNode ? 3 : 1,
+          borderColor: node === activeNode ? '#ffffff' : 'rgba(255,255,255,0.15)',
+        }
+      }
+      return { ...data, color: 'rgba(31, 41, 55, 0.25)', label: '', zIndex: 0, borderSize: 0 }
+    })
+
+    sigma.setSetting('edgeReducer', (edge, data) => {
+      const graph = sigma.getGraph()
+      const src = graph.source(edge)
+      const tgt = graph.target(edge)
+      if (neighbors.has(src) && neighbors.has(tgt)) {
+        return { ...data, color: 'rgba(99, 102, 241, 0.5)', size: 1.5 }
+      }
+      return { ...data, hidden: true }
+    })
+  }, [activeNode, sigma])
 
   const tooltipData = (() => {
     if (!tooltip) return null
@@ -165,8 +185,7 @@ function InteractionsAndHighlight({
 
 export function GraphView({ data, onSelectFile }: GraphViewProps) {
   const graph = useGraphData(data)
-  // shared highlight state -- search and hover both write to this
-  const [highlightedNode, setHighlightedNode] = useState<string | null>(null)
+  const [pinnedNode, setPinnedNode] = useState<string | null>(null)
 
   if (!graph || graph.order === 0) {
     return (
@@ -183,12 +202,17 @@ export function GraphView({ data, onSelectFile }: GraphViewProps) {
         settings={SIGMA_SETTINGS}
       >
         <LoadAndDisplay graph={graph} />
-        <InteractionsAndHighlight
+        <Interactions
           onSelectFile={onSelectFile}
-          highlightedNode={highlightedNode}
-          setHighlightedNode={setHighlightedNode}
+          pinnedNode={pinnedNode}
+          setPinnedNode={setPinnedNode}
+        />
+        <SearchBar
+          onFocusNode={(nodeId) => {
+            setPinnedNode(nodeId)
+            if (nodeId) onSelectFile?.(nodeId)
+          }}
         />
-        <SearchBar onFocusNode={setHighlightedNode} />
         <GraphControls />
       </SigmaContainer>