feat: add search, controls, fix UX issues in dependency graph

DevanshuNEU · DevanshuNEU · commit fbcf7ad09fae · 2026-02-17T23:26:11.000-05:00
- Add SearchBar: type to find files, fuzzy match, zoom-to-focus on select
  Keyboard shortcut: / to open, Escape to clear
- Add GraphControls: zoom in/out, fit-to-screen, center buttons
- Fix ImpactPanel positioning: now overlays as right sidebar on graph
- Filter orphan nodes (0 connections) to reduce visual noise
- Tune ForceAtlas2: lower gravity, higher scaling for spread-out layout
  linLogMode + outboundAttractionDistribution for better clustering
- Increase iterations to 400 for more settled layout
- hideEdgesOnMove for better pan/zoom performance
diff --git a/frontend/src/components/DependencyGraph/GraphView/GraphControls.tsx b/frontend/src/components/DependencyGraph/GraphView/GraphControls.tsx
@@ -0,0 +1,39 @@
+// Graph controls: zoom in, zoom out, fit-to-screen, center
+// Positioned bottom-left of the graph canvas
+
+import { useCallback } from 'react'
+import { useSigma, useCamera } from '@react-sigma/core'
+import { ZoomIn, ZoomOut, Maximize2, LocateFixed } from 'lucide-react'
+
+const BTN = 'p-1.5 bg-zinc-900/80 backdrop-blur-sm border border-zinc-700 rounded-md text-zinc-400 hover:text-zinc-200 hover:border-zinc-600 transition-colors'
+
+export function GraphControls() {
+  const sigma = useSigma()
+  const { zoomIn, zoomOut, reset } = useCamera({ duration: 300, factor: 1.5 })
+
+  const fitToScreen = useCallback(() => {
+    reset()
+  }, [reset])
+
+  const centerGraph = useCallback(() => {
+    // zoom to fit all nodes with some padding
+    sigma.getCamera().animatedReset({ duration: 300 })
+  }, [sigma])
+
+  return (
+    <div className="absolute bottom-4 left-4 z-10 flex flex-col gap-1">
+      <button onClick={() => zoomIn()} className={BTN} title="Zoom in">
+        <ZoomIn className="w-4 h-4" />
+      </button>
+      <button onClick={() => zoomOut()} className={BTN} title="Zoom out">
+        <ZoomOut className="w-4 h-4" />
+      </button>
+      <button onClick={fitToScreen} className={BTN} title="Fit to screen">
+        <Maximize2 className="w-4 h-4" />
+      </button>
+      <button onClick={centerGraph} className={BTN} title="Center graph">
+        <LocateFixed className="w-4 h-4" />
+      </button>
+    </div>
+  )
+}
diff --git a/frontend/src/components/DependencyGraph/GraphView/SearchBar.tsx b/frontend/src/components/DependencyGraph/GraphView/SearchBar.tsx
@@ -0,0 +1,168 @@
+// Search bar for finding and focusing nodes in the graph
+// Floats top-left of the graph canvas
+
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { Search, X } from 'lucide-react'
+import { useSigma } from '@react-sigma/core'
+
+export function SearchBar() {
+  const sigma = useSigma()
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<{ id: string; label: string }[]>([])
+  const [isOpen, setIsOpen] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // fuzzy match against all node labels and full paths
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults([])
+      return
+    }
+
+    const graph = sigma.getGraph()
+    const q = query.toLowerCase()
+    const matches: { id: string; label: string }[] = []
+
+    graph.forEachNode((node, attrs) => {
+      const label = (attrs.label as string) || ''
+      const fullPath = node.toLowerCase()
+      if (fullPath.includes(q) || label.toLowerCase().includes(q)) {
+        matches.push({ id: node, label })
+      }
+    })
+
+    // sort: exact filename matches first, then by path
+    matches.sort((a, b) => {
+      const aExact = a.label.toLowerCase().startsWith(q) ? 0 : 1
+      const bExact = b.label.toLowerCase().startsWith(q) ? 0 : 1
+      return aExact - bExact || a.id.localeCompare(b.id)
+    })
+
+    setResults(matches.slice(0, 8))
+  }, [query, sigma])
+
+  const focusNode = useCallback((nodeId: string) => {
+    const graph = sigma.getGraph()
+    if (!graph.hasNode(nodeId)) return
+
+    // highlight this node and neighbors
+    const neighbors = new Set(graph.neighbors(nodeId))
+    neighbors.add(nodeId)
+
+    sigma.setSetting('nodeReducer', (node, data) => {
+      if (neighbors.has(node)) {
+        return {
+          ...data,
+          zIndex: 1,
+          label: data.label,
+          borderSize: node === nodeId ? 3 : 1,
+          borderColor: node === nodeId ? '#ffffff' : 'rgba(255,255,255,0.2)',
+        }
+      }
+      return { ...data, color: 'rgba(31, 41, 55, 0.3)', 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.6)', size: 1.5 }
+      }
+      return { ...data, hidden: true }
+    })
+
+    // zoom to the node
+    const pos = sigma.getNodeDisplayData(nodeId)
+    if (pos) {
+      sigma.getCamera().animate(
+        { x: pos.x, y: pos.y, ratio: 0.15 },
+        { duration: 400 }
+      )
+    }
+
+    setQuery('')
+    setResults([])
+    setIsOpen(false)
+  }, [sigma])
+
+  const clearSearch = useCallback(() => {
+    setQuery('')
+    setResults([])
+    setIsOpen(false)
+    // reset reducers
+    sigma.setSetting('nodeReducer', null)
+    sigma.setSetting('edgeReducer', null)
+    sigma.getCamera().animatedReset({ duration: 300 })
+  }, [sigma])
+
+  // keyboard shortcut: / or cmd+f to focus search
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === '/' && !isOpen) {
+        e.preventDefault()
+        setIsOpen(true)
+        setTimeout(() => inputRef.current?.focus(), 50)
+      }
+      if (e.key === 'Escape' && isOpen) {
+        clearSearch()
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [isOpen, clearSearch])
+
+  return (
+    <div className="absolute top-3 left-3 z-10">
+      {!isOpen ? (
+        <button
+          onClick={() => {
+            setIsOpen(true)
+            setTimeout(() => inputRef.current?.focus(), 50)
+          }}
+          className="flex items-center gap-2 px-3 py-1.5 bg-zinc-900/80 backdrop-blur-sm border border-zinc-700 rounded-lg text-xs text-zinc-400 hover:text-zinc-200 hover:border-zinc-600 transition-colors"
+        >
+          <Search className="w-3.5 h-3.5" />
+          <span>Find file...</span>
+          <kbd className="ml-2 px-1.5 py-0.5 bg-zinc-800 rounded text-[10px] text-zinc-500">/</kbd>
+        </button>
+      ) : (
+        <div className="w-64">
+          <div className="flex items-center gap-2 px-3 py-1.5 bg-zinc-900/95 backdrop-blur-sm border border-zinc-600 rounded-lg">
+            <Search className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
+            <input
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search files..."
+              className="flex-1 bg-transparent text-sm text-zinc-200 outline-none placeholder:text-zinc-500"
+            />
+            <button onClick={clearSearch} className="text-zinc-500 hover:text-zinc-300">
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+
+          {results.length > 0 && (
+            <div className="mt-1 bg-zinc-900/95 backdrop-blur-sm border border-zinc-700 rounded-lg overflow-hidden">
+              {results.map((r) => (
+                <button
+                  key={r.id}
+                  onClick={() => focusNode(r.id)}
+                  className="w-full text-left px-3 py-2 hover:bg-zinc-800 transition-colors border-b border-zinc-800 last:border-0"
+                >
+                  <div className="text-xs text-zinc-200 font-medium">{r.label}</div>
+                  <div className="text-[10px] text-zinc-500 truncate">{r.id}</div>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {query && results.length === 0 && (
+            <div className="mt-1 bg-zinc-900/95 border border-zinc-700 rounded-lg px-3 py-2 text-xs text-zinc-500">
+              No files found
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/DependencyGraph/GraphView/index.tsx b/frontend/src/components/DependencyGraph/GraphView/index.tsx
@@ -1,6 +1,5 @@
 // Sigma.js WebGL graph view
-// Renders the dependency graph using WebGL for performance
-// Layout + clustering computed in useGraphData, rendering handled by Sigma
+// Renders dependency graph with search, controls, hover/click interactions
 
 import { useState, useEffect } from 'react'
 import {
@@ -13,6 +12,8 @@ import '@react-sigma/core/lib/style.css'
 
 import { useGraphData } from './useGraphData'
 import { NodeTooltip } from './NodeTooltip'
+import { SearchBar } from './SearchBar'
+import { GraphControls } from './GraphControls'
 import type { DependencyApiResponse } from '../types'
 import type Graph from 'graphology'
 
@@ -21,10 +22,10 @@ interface GraphViewProps {
   onSelectFile?: (filePath: string) => void
 }
 
-// dark theme -- bg matches zinc-950, edges nearly invisible until hover
+// dark bg, subtle edges, only important labels visible
 const SIGMA_SETTINGS = {
   defaultNodeColor: '#6366f1',
-  defaultEdgeColor: 'rgba(75, 85, 99, 0.15)',
+  defaultEdgeColor: 'rgba(75, 85, 99, 0.12)',
   defaultEdgeType: 'arrow' as const,
   edgeReducer: null as any,
   nodeReducer: null as any,
@@ -33,34 +34,35 @@ const SIGMA_SETTINGS = {
   labelSize: 11,
   labelWeight: '500',
   labelColor: { color: '#d1d5db' },
-  // only show labels for large (important) nodes at default zoom
-  labelRenderedSizeThreshold: 14,
-  labelDensity: 0.15,
+  labelRenderedSizeThreshold: 12,
+  labelDensity: 0.12,
   zIndex: true,
   minCameraRatio: 0.03,
   maxCameraRatio: 3,
-  stagePadding: 40,
-  // subtle node borders
+  stagePadding: 30,
   defaultNodeBorderSize: 1,
-  defaultNodeBorderColor: 'rgba(255, 255, 255, 0.08)',
+  defaultNodeBorderColor: 'rgba(255, 255, 255, 0.06)',
+  // performance: skip edges when zoomed out
+  hideEdgesOnMove: true,
 }
 
-// Loads graph into Sigma and fits camera
 function LoadAndDisplay({ graph }: { graph: Graph }) {
   const loadGraph = useLoadGraph()
   const sigma = useSigma()
 
   useEffect(() => {
     loadGraph(graph)
+    // let sigma calculate bounds, then fit the camera with padding
     requestAnimationFrame(() => {
-      sigma.getCamera().animatedReset({ duration: 300 })
+      requestAnimationFrame(() => {
+        sigma.getCamera().animatedReset({ duration: 400 })
+      })
     })
   }, [graph, loadGraph, sigma])
 
   return null
 }
 
-// Handles hover/click interactions and drives node/edge reducers
 function Interactions({ onSelectFile }: { onSelectFile?: (filePath: string) => void }) {
   const sigma = useSigma()
   const registerEvents = useRegisterEvents()
@@ -89,7 +91,7 @@ function Interactions({ onSelectFile }: { onSelectFile?: (filePath: string) => v
         const pos = sigma.getNodeDisplayData(node)
         if (pos) {
           sigma.getCamera().animate(
-            { x: pos.x, y: pos.y, ratio: 0.15 },
+            { x: pos.x, y: pos.y, ratio: 0.12 },
             { duration: 400 }
           )
         }
@@ -110,28 +112,18 @@ function Interactions({ onSelectFile }: { onSelectFile?: (filePath: string) => v
           return {
             ...data,
             zIndex: 1,
-            // show label on hover for all neighbors
             label: data.label,
-            // slight glow effect via larger border
             borderSize: node === hoveredNode ? 3 : 1,
-            borderColor: node === hoveredNode ? '#ffffff' : 'rgba(255,255,255,0.2)',
+            borderColor: node === hoveredNode ? '#ffffff' : 'rgba(255,255,255,0.15)',
           }
         }
-        // fade non-neighbors hard
-        return {
-          ...data,
-          color: 'rgba(31, 41, 55, 0.3)',
-          label: '',
-          zIndex: 0,
-          borderSize: 0,
-        }
+        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.6)', size: 1.5 }
+          return { ...data, color: 'rgba(99, 102, 241, 0.5)', size: 1.5 }
         }
         return { ...data, hidden: true }
       })
@@ -179,9 +171,11 @@ export function GraphView({ data, onSelectFile }: GraphViewProps) {
       >
         <LoadAndDisplay graph={graph} />
         <Interactions onSelectFile={onSelectFile} />
+        <SearchBar />
+        <GraphControls />
       </SigmaContainer>
 
-      {/* legend - glass card style */}
+      {/* legend */}
       <div className="absolute bottom-4 right-4 bg-zinc-900/80 backdrop-blur-sm border border-zinc-800 rounded-lg px-3 py-2.5 text-[11px]">
         <div className="text-zinc-400 font-medium mb-1.5">Legend</div>
         <div className="space-y-0.5 text-zinc-500">
diff --git a/frontend/src/components/DependencyGraph/GraphView/useGraphData.ts b/frontend/src/components/DependencyGraph/GraphView/useGraphData.ts
@@ -38,16 +38,22 @@ export function useGraphData(apiData: DependencyApiResponse | undefined) {
 
     const graph = new Graph({ type: 'directed' })
 
-    // Build in-degree map to know dependents count per node
+    // Build in-degree and out-degree maps
     const inDegree: Record<string, number> = {}
+    const outDegree: Record<string, number> = {}
     for (const edge of apiData.edges) {
       inDegree[edge.target] = (inDegree[edge.target] || 0) + 1
+      outDegree[edge.source] = (outDegree[edge.source] || 0) + 1
     }
 
-    // Add nodes
+    // Add nodes -- skip orphans (0 connections) to reduce noise
     for (const node of apiData.nodes) {
       const dependents = inDegree[node.id] || 0
       const imports = node.import_count ?? node.imports ?? 0
+      const totalConnections = dependents + (outDegree[node.id] || 0)
+
+      // filter out isolated nodes (no edges at all) -- they clutter the graph
+      if (totalConnections === 0) continue
 
       graph.addNode(node.id, {
         label: node.label || node.id.split('/').pop() || node.id,
@@ -105,18 +111,19 @@ export function useGraphData(apiData: DependencyApiResponse | undefined) {
       })
     }
 
-    // Run ForceAtlas2 for layout positions
-    // Use synchronous version with fixed iterations for deterministic layout
+    // ForceAtlas2 for layout -- tuned for readability over compactness
     forceAtlas2.assign(graph, {
-      iterations: 300,
+      iterations: 400,
       settings: {
-        gravity: 1,
-        scalingRatio: 10,
-        barnesHutOptimize: graph.order > 100,
+        gravity: 0.5,
+        scalingRatio: 20,
+        barnesHutOptimize: graph.order > 50,
         barnesHutTheta: 0.5,
-        slowDown: 5,
+        slowDown: 3,
         strongGravityMode: false,
         adjustSizes: true,
+        linLogMode: true,
+        outboundAttractionDistribution: true,
       },
     })
 
diff --git a/frontend/src/components/DependencyGraph/index.tsx b/frontend/src/components/DependencyGraph/index.tsx
