fix: legend positioning, smooth 60fps animations, improved Tests button UX

Author: DevanshuNEU

frontend/src/components/DependencyGraph/DirectoryNode.tsx

@@ -45,8 +45,10 @@ function DirectoryNodeComponent({ data }: NodeProps<DirectoryNodeData>) {
 
       <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',
+          'px-3 py-2.5 rounded-lg border-2 min-w-[180px]',
+          'transition-all duration-200 ease-out',
+          'hover:scale-[1.02] hover:shadow-md active:scale-[0.98]',
+          'cursor-pointer select-none',
           stateStyle
         )}
       >
@@ -59,7 +61,7 @@ function DirectoryNodeComponent({ data }: NodeProps<DirectoryNodeData>) {
             {data.label}/
           </span>
           <ChevronRight className={cn(
-            'w-3.5 h-3.5 text-zinc-400 transition-transform',
+            'w-3.5 h-3.5 text-zinc-400 transition-transform duration-200 ease-out',
             data.isExpanded && 'rotate-90'
           )} />
         </div>

frontend/src/components/DependencyGraph/GraphToolbar.tsx

@@ -63,10 +63,11 @@ function GraphToolbarComponent({
         </Button>
 
         <Button
-          variant="secondary"
+          variant={showTests ? 'secondary' : 'outline'}
           size="sm"
           onClick={onToggleTests}
-          className={cn('h-8', !showTests && 'opacity-60')}
+          className={cn('h-8', !showTests && 'opacity-70 line-through')}
+          title={showTests ? 'Click to hide test files' : 'Click to show test files'}
         >
           {showTests ? <Eye className="w-3.5 h-3.5 mr-1.5" /> : <EyeOff className="w-3.5 h-3.5 mr-1.5" />}
           Tests

frontend/src/components/DependencyGraph/index.tsx

@@ -133,7 +133,15 @@ function DependencyGraphInner({ repoId, apiUrl, apiKey }: DependencyGraphProps)
     if (!showTests) {
       nodeIds = nodeIds.filter((id: string) => {
         const fileName = id.split('/').pop() || ''
-        return !fileName.includes('.test.') && !fileName.includes('_test.') && !fileName.includes('.spec.')
+        const pathLower = id.toLowerCase()
+        // Filter out test files by filename pattern OR by being in tests/ directory
+        const isTestFile = fileName.includes('.test.') || 
+                          fileName.includes('_test.') || 
+                          fileName.includes('.spec.') ||
+                          fileName.startsWith('test_') ||
+                          pathLower.includes('/tests/') ||
+                          pathLower.startsWith('tests/')
+        return !isTestFile
       })
     }
 
@@ -445,7 +453,7 @@ function DependencyGraphInner({ repoId, apiUrl, apiKey }: DependencyGraphProps)
       />
 
       <div className="flex overflow-hidden" style={{ height: '600px' }}>
-        <div style={{ flex: 1, height: '600px' }}>
+        <div className="relative" style={{ flex: 1, height: '600px' }}>
           <ReactFlow
             nodes={nodes}
             edges={edges}
@@ -458,6 +466,17 @@ function DependencyGraphInner({ repoId, apiUrl, apiKey }: DependencyGraphProps)
             minZoom={0.1}
             maxZoom={2}
             defaultEdgeOptions={{ type: 'smoothstep' }}
+            proOptions={{ hideAttribution: true }}
+            panOnScroll
+            selectionOnDrag
+            panOnDrag={[1, 2]}
+            zoomOnScroll
+            zoomOnPinch
+            zoomOnDoubleClick
+            nodesDraggable={false}
+            nodesConnectable={false}
+            elementsSelectable
+            snapToGrid={false}
           >
             <Background color={isDark ? '#27272a' : '#d4d4d8'} gap={20} size={1} />
             <Controls 
@@ -466,8 +485,8 @@ function DependencyGraphInner({ repoId, apiUrl, apiKey }: DependencyGraphProps)
             />
           </ReactFlow>
 
-          {/* Legend */}
-          <Card className="absolute bottom-4 left-4 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm">
+          {/* Legend - positioned bottom-right to avoid Controls overlap */}
+          <Card className="absolute bottom-4 right-4 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm z-10 min-w-[180px]">
             <CardContent className="px-4 py-3 text-xs">
               <div className="font-medium text-zinc-700 dark:text-zinc-300 mb-2">Legend</div>
               <div className="space-y-1.5">

frontend/src/index.css

@@ -508,3 +508,47 @@ html {
   .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
   .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
 }
+
+/* ReactFlow smooth animations - 60fps optimized */
+.react-flow {
+  --rf-node-transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.react-flow__node {
+  transition: transform 0.15s ease-out, opacity 0.15s ease-out, filter 0.15s ease-out;
+  will-change: transform;
+}
+
+.react-flow__node:hover {
+  filter: brightness(1.05);
+}
+
+.react-flow__edge path {
+  transition: stroke 0.15s ease-out, stroke-width 0.15s ease-out, opacity 0.15s ease-out;
+}
+
+.react-flow__viewport {
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+}
+
+.react-flow__pane {
+  cursor: grab;
+}
+
+.react-flow__pane:active {
+  cursor: grabbing;
+}
+
+/* Smooth zoom controls */
+.react-flow__controls {
+  transition: opacity 0.2s ease-out;
+}
+
+.react-flow__controls button {
+  transition: background-color 0.15s ease-out, transform 0.1s ease-out;
+}
+
+.react-flow__controls button:active {
+  transform: scale(0.95);
+}