Merge pull request #246 from DevanshuNEU/feat/dependency-graph-overhaul

feat: dependency graph overhaul -- WebGL rendering + DSM matrix view

Author: DevanshuNEU

frontend/bun.lock

@@ -24,22 +24,25 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@react-sigma/core": "^5.0.6",
     "@supabase/supabase-js": "^2.39.0",
     "@tanstack/react-query": "^5.90.12",
-    "@types/dagre": "^0.7.53",
     "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "dagre": "^0.8.5",
     "framer-motion": "^12.29.0",
+    "graphology": "^0.26.0",
+    "graphology-communities-louvain": "^2.0.2",
+    "graphology-layout-forceatlas2": "^0.10.1",
+    "graphology-types": "^0.24.8",
     "lucide-react": "^0.554.0",
     "next-themes": "^0.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^7.12.0",
     "react-syntax-highlighter": "^16.1.0",
-    "reactflow": "^11.11.4",
+    "sigma": "^3.0.2",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7"

frontend/package.json

@@ -0,0 +1,25 @@
+// Graph controls: zoom in, zoom out, fit to screen
+// Positioned bottom-left of the graph canvas
+
+import { useSigma, useCamera } from '@react-sigma/core'
+import { ZoomIn, ZoomOut, Maximize2 } 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 { zoomIn, zoomOut, reset } = useCamera({ duration: 300, factor: 1.5 })
+
+  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={() => reset()} className={BTN} title="Fit to screen">
+        <Maximize2 className="w-4 h-4" />
+      </button>
+    </div>
+  )
+}