feat: scaffold dependency graph overhaul with sigma.js + graphology

- Remove reactflow, dagre, @types/dagre
- Install sigma, graphology, graphology-layout-forceatlas2, graphology-communities-louvain, @react-sigma/core
- Create new DependencyGraph structure: GraphView/, MatrixView/, types.ts
- Build useGraphData hook (API -> graphology Graph + ForceAtlas2 + Louvain)
- Build useMatrixData hook (API -> adjacency matrix + cycle detection)
- Rewrite index.tsx with Graph/Matrix tab switcher + StatsBar
- Wire existing ImpactPanel + useImpactAnalysis (unchanged)
- Placeholder GraphView and MatrixView components (to be implemented)

Closes OPE-41, OPE-42, OPE-43, OPE-44

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,17 @@
+// Sigma.js WebGL graph rendering view
+// TODO: OPE-45 -- full implementation with hover/click interactions
+
+import type { DependencyApiResponse } from '../types'
+
+interface GraphViewProps {
+  data: DependencyApiResponse
+  onSelectFile?: (filePath: string) => void
+}
+
+export function GraphView({ data, onSelectFile }: GraphViewProps) {
+  return (
+    <div className="flex items-center justify-center h-[600px] text-muted-foreground">
+      GraphView placeholder -- {data.nodes?.length || 0} nodes ready for Sigma.js rendering
+    </div>
+  )
+}

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

@@ -0,0 +1,123 @@
+// Transforms API dependency response into a graphology Graph instance
+// with ForceAtlas2 layout positions and Louvain community colors
+
+import { useMemo } from 'react'
+import Graph from 'graphology'
+import forceAtlas2 from 'graphology-layout-forceatlas2'
+import louvain from 'graphology-communities-louvain'
+import type { DependencyApiResponse } from '../types'
+
+// Community color palette -- distinct, accessible on dark backgrounds
+const COMMUNITY_COLORS = [
+  '#6366f1', // indigo
+  '#22c55e', // green
+  '#f59e0b', // amber
+  '#ec4899', // pink
+  '#06b6d4', // cyan
+  '#f97316', // orange
+  '#8b5cf6', // violet
+  '#14b8a6', // teal
+  '#ef4444', // red
+  '#84cc16', // lime
+]
+
+function getDirectory(filePath: string): string {
+  const parts = filePath.split('/')
+  return parts.length > 1 ? parts.slice(0, -1).join('/') : '.'
+}
+
+function getRiskLevel(dependentCount: number): 'low' | 'med' | 'high' {
+  if (dependentCount >= 4) return 'high'
+  if (dependentCount >= 1) return 'med'
+  return 'low'
+}
+
+export function useGraphData(apiData: DependencyApiResponse | undefined) {
+  return useMemo(() => {
+    if (!apiData?.nodes?.length) return null
+
+    const graph = new Graph({ type: 'directed' })
+
+    // Build in-degree map to know dependents count per node
+    const inDegree: Record<string, number> = {}
+    for (const edge of apiData.edges) {
+      inDegree[edge.target] = (inDegree[edge.target] || 0) + 1
+    }
+
+    // Add nodes
+    for (const node of apiData.nodes) {
+      const dependents = inDegree[node.id] || 0
+      const imports = node.import_count ?? node.imports ?? 0
+
+      graph.addNode(node.id, {
+        label: node.label || node.id.split('/').pop() || node.id,
+        size: Math.max(4, Math.min(20, 4 + dependents * 2)),
+        directory: getDirectory(node.id),
+        imports,
+        dependents,
+        riskLevel: getRiskLevel(dependents),
+        language: node.language || 'unknown',
+        // x/y will be set by ForceAtlas2
+        x: Math.random() * 100,
+        y: Math.random() * 100,
+      })
+    }
+
+    // Add edges (skip if source or target missing)
+    for (const edge of apiData.edges) {
+      if (graph.hasNode(edge.source) && graph.hasNode(edge.target)) {
+        // Avoid duplicate edges
+        if (!graph.hasEdge(edge.source, edge.target)) {
+          graph.addEdge(edge.source, edge.target, {
+            weight: 1,
+            type: 'arrow',
+          })
+        }
+      }
+    }
+
+    // Run Louvain community detection for cluster coloring
+    try {
+      const communities = louvain(graph)
+      const communityIds = [...new Set(Object.values(communities))]
+
+      graph.forEachNode((node) => {
+        const communityIndex = communityIds.indexOf(communities[node])
+        graph.setNodeAttribute(
+          node,
+          'color',
+          COMMUNITY_COLORS[communityIndex % COMMUNITY_COLORS.length]
+        )
+        graph.setNodeAttribute(node, 'community', communities[node])
+      })
+    } catch {
+      // Louvain can fail on disconnected graphs -- fall back to directory-based coloring
+      const directories = [...new Set(graph.mapNodes((_, attrs) => attrs.directory))]
+      graph.forEachNode((node, attrs) => {
+        const dirIndex = directories.indexOf(attrs.directory)
+        graph.setNodeAttribute(
+          node,
+          'color',
+          COMMUNITY_COLORS[dirIndex % COMMUNITY_COLORS.length]
+        )
+      })
+    }
+
+    // Run ForceAtlas2 for layout positions
+    // Use synchronous version with fixed iterations for deterministic layout
+    forceAtlas2.assign(graph, {
+      iterations: 300,
+      settings: {
+        gravity: 1,
+        scalingRatio: 10,
+        barnesHutOptimize: graph.order > 100,
+        barnesHutTheta: 0.5,
+        slowDown: 5,
+        strongGravityMode: false,
+        adjustSizes: true,
+      },
+    })
+
+    return graph
+  }, [apiData])
+}

frontend/src/components/DependencyGraph/GraphView/useGraphData.ts

@@ -0,0 +1,17 @@
+// Dependency Structure Matrix (DSM) view
+// TODO: OPE-46 -- full implementation with cycle detection + directory grouping
+
+import type { DependencyApiResponse } from '../types'
+
+interface MatrixViewProps {
+  data: DependencyApiResponse
+  onSelectFile?: (filePath: string) => void
+}
+
+export function MatrixView({ data, onSelectFile }: MatrixViewProps) {
+  return (
+    <div className="flex items-center justify-center h-[600px] text-muted-foreground">
+      MatrixView placeholder -- {data.nodes?.length || 0} files ready for DSM rendering
+    </div>
+  )
+}

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

@@ -0,0 +1,94 @@
+// Transforms API dependency response into a 2D adjacency matrix
+// for the Dependency Structure Matrix (DSM) view
+
+import { useMemo } from 'react'
+import type { DependencyApiResponse, MatrixData } from '../types'
+
+function getDirectory(filePath: string): string {
+  const parts = filePath.split('/')
+  return parts.length > 1 ? parts.slice(0, -1).join('/') : '.'
+}
+
+function getShortLabel(filePath: string): string {
+  return filePath.split('/').pop() || filePath
+}
+
+export function useMatrixData(apiData: DependencyApiResponse | undefined): MatrixData | null {
+  return useMemo(() => {
+    if (!apiData?.nodes?.length) return null
+
+    // Sort files by directory so same-directory files are adjacent
+    const sortedFiles = [...apiData.nodes]
+      .map((n) => n.id)
+      .sort((a, b) => {
+        const dirA = getDirectory(a)
+        const dirB = getDirectory(b)
+        if (dirA !== dirB) return dirA.localeCompare(dirB)
+        return a.localeCompare(b)
+      })
+
+    // Build index lookup: file path -> matrix index
+    const indexMap = new Map<string, number>()
+    sortedFiles.forEach((file, idx) => {
+      indexMap.set(file, idx)
+    })
+
+    const size = sortedFiles.length
+
+    // Build adjacency matrix
+    // matrix[row][col] = number of imports from row -> col
+    const matrix: number[][] = Array.from({ length: size }, () =>
+      new Array(size).fill(0)
+    )
+
+    for (const edge of apiData.edges) {
+      const sourceIdx = indexMap.get(edge.source)
+      const targetIdx = indexMap.get(edge.target)
+      if (sourceIdx !== undefined && targetIdx !== undefined) {
+        matrix[sourceIdx][targetIdx] += 1
+      }
+    }
+
+    // Detect circular dependencies: both directions have imports
+    const cycles: [number, number][] = []
+    for (let i = 0; i < size; i++) {
+      for (let j = i + 1; j < size; j++) {
+        if (matrix[i][j] > 0 && matrix[j][i] > 0) {
+          cycles.push([i, j])
+        }
+      }
+    }
+
+    // Build directory grouping and find separator positions
+    const directories = new Map<string, number[]>()
+    const directorySeparators: number[] = []
+    let prevDir = ''
+
+    sortedFiles.forEach((file, idx) => {
+      const dir = getDirectory(file)
+      if (!directories.has(dir)) {
+        directories.set(dir, [])
+      }
+      directories.get(dir)!.push(idx)
+
+      if (dir !== prevDir && idx > 0) {
+        directorySeparators.push(idx)
+      }
+      prevDir = dir
+    })
+
+    const totalDeps = apiData.edges.length
+    const totalCycles = cycles.length
+
+    return {
+      labels: sortedFiles,
+      shortLabels: sortedFiles.map(getShortLabel),
+      matrix,
+      directories,
+      directorySeparators,
+      cycles,
+      totalDeps,
+      totalCycles,
+    }
+  }, [apiData])
+}