fix(dependency-graph): limit zoom out for large graphs, remove debug logs

Author: DevanshuNEU

frontend/Dockerfile

@@ -1,5 +1,5 @@
-# Frontend Dockerfile - Multi-stage build
-FROM node:20-alpine AS builder
+# Frontend Dockerfile - Multi-stage build with Bun
+FROM oven/bun:1 AS builder
 
 WORKDIR /app
 
@@ -14,16 +14,16 @@ ENV VITE_SUPABASE_URL=$VITE_SUPABASE_URL
 ENV VITE_SUPABASE_ANON_KEY=$VITE_SUPABASE_ANON_KEY
 
 # Copy package files
-COPY package*.json ./
+COPY package.json bun.lock* ./
 
 # Install dependencies
-RUN npm ci
+RUN bun install --frozen-lockfile || bun install
 
 # Copy source code
 COPY . .
 
 # Build for production
-RUN npm run build
+RUN bun run build
 
 # Production image - nginx
 FROM nginx:alpine

frontend/src/components/DependencyGraph/index.tsx

@@ -112,7 +112,7 @@ function DependencyGraphInner({ repoId, apiUrl, apiKey }: DependencyGraphProps)
   const visibleNodeIds = useMemo(() => {
     if (!rawGraphData || !impact.isReady) return new Set<string>()
 
-    let nodeIds = rawGraphData.nodes.map((n: any) => n.id)
+    let nodeIds: string[] = rawGraphData.nodes.map((n: any) => n.id)
 
     // Filter out tests if disabled
     if (!showTests) {
@@ -129,7 +129,7 @@ function DependencyGraphInner({ repoId, apiUrl, apiKey }: DependencyGraphProps)
     }
 
     return new Set(nodeIds)
-  }, [rawGraphData, impact, showAll, showTests])
+  }, [rawGraphData, impact.isReady, impact.fileMetrics, showAll, showTests])
 
   // Get impact result for selected node
   const selectedImpact = useMemo((): ImpactResult | null => {
@@ -210,12 +210,14 @@ function DependencyGraphInner({ repoId, apiUrl, apiKey }: DependencyGraphProps)
     const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(flowNodes, flowEdges)
     setNodes(layoutedNodes)
     setEdges(layoutedEdges)
-  }, [rawGraphData, impact, visibleNodeIds, selectedNodeId, selectedImpact, hoveredFileId])
+  }, [rawGraphData, impact.isReady, visibleNodeIds, selectedNodeId, selectedImpact, hoveredFileId])
 
   // Fit view when nodes change significantly
   useEffect(() => {
     if (nodes.length > 0) {
-      setTimeout(() => fitView({ padding: 0.2, duration: 300 }), 100)
+      // Don't zoom out too much for large graphs
+      const minZoom = nodes.length > 20 ? 0.5 : 0.3
+      setTimeout(() => fitView({ padding: 0.2, duration: 300, minZoom }), 100)
     }
   }, [showAll, showTests])
 
@@ -239,8 +241,9 @@ function DependencyGraphInner({ repoId, apiUrl, apiKey }: DependencyGraphProps)
 
   const handleResetView = useCallback(() => {
     setSelectedNodeId(null)
-    fitView({ padding: 0.2, duration: 300 })
-  }, [fitView])
+    const minZoom = nodes.length > 20 ? 0.5 : 0.3
+    fitView({ padding: 0.2, duration: 300, minZoom })
+  }, [fitView, nodes.length])
 
   if (isLoading) {
     return <DependencyGraphSkeleton />
@@ -286,9 +289,9 @@ function DependencyGraphInner({ repoId, apiUrl, apiKey }: DependencyGraphProps)
       />
 
       {/* Graph + Panel */}
-      <div className="flex-1 flex overflow-hidden min-h-[500px]">
+      <div className="flex overflow-hidden" style={{ height: '600px' }}>
         {/* Graph Canvas */}
-        <div className="flex-1 relative h-full">
+        <div style={{ flex: 1, height: '600px' }}>
           <ReactFlow
             nodes={nodes}
             edges={edges}