feat(dependency-graph): add directory clustering with expand/collapse

Author: DevanshuNEU

frontend/src/components/DependencyGraph/DirectoryNode.tsx

@@ -0,0 +1,97 @@
+import { memo } from 'react'
+import { Handle, Position } from 'reactflow'
+import type { NodeProps } from 'reactflow'
+import { Folder, FolderOpen, ChevronRight } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import type { RiskLevel } from './hooks/useImpactAnalysis'
+
+export interface DirectoryNodeData {
+  label: string
+  fullPath: string
+  fileCount: number
+  totalDependents: number
+  maxRisk: RiskLevel
+  isExpanded: boolean
+  state: 'default' | 'selected' | 'direct' | 'transitive' | 'dimmed'
+}
+
+const STATE_STYLES: Record<DirectoryNodeData['state'], string> = {
+  default: 'border-zinc-300 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800/90',
+  selected: 'border-indigo-500 bg-indigo-50 dark:bg-indigo-950 ring-2 ring-indigo-500/50 shadow-lg shadow-indigo-500/20',
+  direct: 'border-rose-500 bg-rose-50 dark:bg-rose-950 ring-1 ring-rose-500/30',
+  transitive: 'border-amber-500 bg-amber-50 dark:bg-amber-950 ring-1 ring-amber-500/30',
+  dimmed: 'border-zinc-200 bg-zinc-100/50 opacity-40 dark:border-zinc-800 dark:bg-zinc-900/50',
+}
+
+const RISK_STYLES: Record<RiskLevel, string> = {
+  low: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400',
+  medium: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-500/10 dark:text-yellow-400',
+  high: 'bg-orange-100 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400',
+  critical: 'bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400',
+}
+
+function DirectoryNodeComponent({ data }: NodeProps<DirectoryNodeData>) {
+  const stateStyle = STATE_STYLES[data.state]
+  const FolderIcon = data.isExpanded ? FolderOpen : Folder
+
+  return (
+    <>
+      <Handle 
+        type="target" 
+        position={Position.Left} 
+        className="!bg-zinc-400 dark:!bg-zinc-600 !w-2 !h-2 !border-0" 
+      />
+      
+      <div
+        className={cn(
+          'px-3 py-2.5 rounded-lg border-2 transition-all duration-200 min-w-[180px]',
+          'hover:scale-[1.02] hover:shadow-md cursor-pointer',
+          stateStyle
+        )}
+      >
+        <div className="flex items-center gap-2 mb-1">
+          <FolderIcon className="w-4 h-4 text-amber-500 dark:text-amber-400 flex-shrink-0" />
+          <span 
+            className="font-semibold text-sm text-zinc-800 dark:text-zinc-100 truncate flex-1" 
+            title={data.fullPath}
+          >
+            {data.label}/
+          </span>
+          <ChevronRight className={cn(
+            'w-3.5 h-3.5 text-zinc-400 transition-transform',
+            data.isExpanded && 'rotate-90'
+          )} />
+        </div>
+
+        <div className="flex items-center gap-3 text-[11px] text-zinc-500 dark:text-zinc-400">
+          <span className="font-medium">
+            {data.fileCount} file{data.fileCount !== 1 ? 's' : ''}
+          </span>
+          <span>•</span>
+          <span className={cn(
+            'font-medium',
+            data.totalDependents >= 30 ? 'text-rose-600 dark:text-rose-400' : 
+            data.totalDependents >= 10 ? 'text-amber-600 dark:text-amber-400' : 
+            'text-zinc-500 dark:text-zinc-400'
+          )}>
+            {data.totalDependents} deps
+          </span>
+          {data.maxRisk !== 'low' && (
+            <Badge variant="secondary" className={cn('text-[10px] px-1.5 py-0 h-5 ml-auto', RISK_STYLES[data.maxRisk])}>
+              {data.maxRisk === 'critical' ? 'Crit' : data.maxRisk === 'high' ? 'High' : 'Med'}
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      <Handle 
+        type="source" 
+        position={Position.Right} 
+        className="!bg-zinc-400 dark:!bg-zinc-600 !w-2 !h-2 !border-0" 
+      />
+    </>
+  )
+}
+
+export const DirectoryNode = memo(DirectoryNodeComponent)

frontend/src/components/DependencyGraph/GraphToolbar.tsx

@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import { RotateCcw, Maximize2, Filter, Eye, EyeOff } from 'lucide-react'
+import { RotateCcw, Maximize2, Filter, Eye, EyeOff, FolderTree } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 
@@ -8,8 +8,10 @@ interface GraphToolbarProps {
   visibleFiles: number
   showAll: boolean
   showTests: boolean
+  clusterByDir: boolean
   onToggleShowAll: () => void
   onToggleTests: () => void
+  onToggleCluster: () => void
   onResetView: () => void
   onFullscreen?: () => void
 }
@@ -19,8 +21,10 @@ function GraphToolbarComponent({
   visibleFiles,
   showAll,
   showTests,
+  clusterByDir,
   onToggleShowAll,
   onToggleTests,
+  onToggleCluster,
   onResetView,
   onFullscreen,
 }: GraphToolbarProps) {
@@ -37,6 +41,17 @@ function GraphToolbarComponent({
       </div>
 
       <div className="flex items-center gap-2">
+        <Button
+          variant={clusterByDir ? 'default' : 'secondary'}
+          size="sm"
+          onClick={onToggleCluster}
+          className="h-8"
+          title="Group files by directory"
+        >
+          <FolderTree className="w-3.5 h-3.5 mr-1.5" />
+          Cluster
+        </Button>
+
         <Button
           variant={showAll ? 'default' : 'secondary'}
           size="sm"

frontend/src/components/DependencyGraph/hooks/useDirectoryClustering.ts

@@ -0,0 +1,114 @@
+import { useMemo, useCallback } from 'react'
+
+export interface DirectoryCluster {
+  path: string
+  name: string
+  files: string[]
+  childDirs: string[]
+  totalFiles: number
+  totalDependents: number
+  maxRisk: 'low' | 'medium' | 'high' | 'critical'
+  isExpanded: boolean
+}
+
+interface ClusteringResult {
+  clusters: Map<string, DirectoryCluster>
+  rootDirs: string[]
+  getClusterForFile: (fileId: string) => string
+  toggleCluster: (dirPath: string) => void
+}
+
+// Extract directory path from file path
+function getDirectoryPath(filePath: string): string {
+  const parts = filePath.split('/')
+  parts.pop()
+  return parts.join('/') || '/'
+}
+
+// Get parent directory
+function getParentDir(dirPath: string): string | null {
+  if (dirPath === '/' || dirPath === '') return null
+  const parts = dirPath.split('/')
+  parts.pop()
+  return parts.join('/') || '/'
+}
+
+// Calculate max risk from an array of risks
+function getMaxRisk(risks: Array<'low' | 'medium' | 'high' | 'critical'>): 'low' | 'medium' | 'high' | 'critical' {
+  const priority = { critical: 4, high: 3, medium: 2, low: 1 }
+  return risks.reduce((max, risk) => priority[risk] > priority[max] ? risk : max, 'low' as const)
+}
+
+export function useDirectoryClustering(
+  nodes: Array<{ id: string; riskLevel: 'low' | 'medium' | 'high' | 'critical'; dependentCount: number }>,
+  expandedDirs: Set<string>,
+  onToggleDir: (dirPath: string) => void
+): ClusteringResult {
+  
+  const clusters = useMemo(() => {
+    const clusterMap = new Map<string, DirectoryCluster>()
+    
+    // Group files by directory
+    const dirFiles = new Map<string, string[]>()
+    nodes.forEach(node => {
+      const dirPath = getDirectoryPath(node.id)
+      if (!dirFiles.has(dirPath)) {
+        dirFiles.set(dirPath, [])
+      }
+      dirFiles.get(dirPath)!.push(node.id)
+    })
+
+    // Create clusters for each directory
+    dirFiles.forEach((files, dirPath) => {
+      const dirName = dirPath.split('/').pop() || dirPath
+      const nodeData = files.map(f => nodes.find(n => n.id === f)!).filter(Boolean)
+      
+      clusterMap.set(dirPath, {
+        path: dirPath,
+        name: dirName,
+        files,
+        childDirs: [],
+        totalFiles: files.length,
+        totalDependents: nodeData.reduce((sum, n) => sum + n.dependentCount, 0),
+        maxRisk: getMaxRisk(nodeData.map(n => n.riskLevel)),
+        isExpanded: expandedDirs.has(dirPath),
+      })
+    })
+
+    // Build directory hierarchy
+    clusterMap.forEach((cluster, dirPath) => {
+      const parentPath = getParentDir(dirPath)
+      if (parentPath && clusterMap.has(parentPath)) {
+        clusterMap.get(parentPath)!.childDirs.push(dirPath)
+      }
+    })
+
+    return clusterMap
+  }, [nodes, expandedDirs])
+
+  const rootDirs = useMemo(() => {
+    const roots: string[] = []
+    clusters.forEach((cluster, dirPath) => {
+      const parentPath = getParentDir(dirPath)
+      if (!parentPath || !clusters.has(parentPath)) {
+        roots.push(dirPath)
+      }
+    })
+    return roots.sort()
+  }, [clusters])
+
+  const getClusterForFile = useCallback((fileId: string): string => {
+    return getDirectoryPath(fileId)
+  }, [])
+
+  const toggleCluster = useCallback((dirPath: string) => {
+    onToggleDir(dirPath)
+  }, [onToggleDir])
+
+  return {
+    clusters,
+    rootDirs,
+    getClusterForFile,
+    toggleCluster,
+  }
+}