Add cross-file component import edges

frontend/src/components/Visualization/RepositoryGraph.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
 import * as d3 from 'd3';
 import { RepositoryData, File } from '../../types/schema';
 
 interface RepositoryGraphProps {
   data: RepositoryData;
@@ -32,7 +32,7 @@
   type: string;
 }
 
 const RepositoryGraph = forwardRef<RepositoryGraphHandle, RepositoryGraphProps>(
   ({ data, onSelectFile, selectedFile }, ref) => {
     const svgRef = useRef<SVGSVGElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -163,8 +163,8 @@
         .data(links)
         .enter()
         .append('line')
-        .attr('stroke', '#95a5a6')
-        .attr('stroke-opacity', 0.4)
+        .attr('stroke', d => getLinkColor(d))
+        .attr('stroke-opacity', 0.6)
         .attr('stroke-width', d => getLinkWidth(d));
 
       // Create nodes
@@ -179,7 +179,7 @@
         .attr('stroke', '#fff')
         .attr('stroke-width', 1.5)
         .style('cursor', 'pointer')
         .on('mouseover', function (event, d) {
           d3.select(this).attr('stroke-width', 3);
         })
         .on('mouseout', function (event, d) {
@@ -295,15 +295,34 @@
     const getLinkWidth = (link: Link) => {
       switch (link.type) {
         case 'import':
-        case 'call':
+        case 'imports_component':
           return 2;
+        case 'call':
+        case 'calls':
+          return 2.5;
         case 'contains':
           return 1;
         default:
           return 1.5;
       }
     };
 
+    const getLinkColor = (link: Link) => {
+      switch (link.type) {
+        case 'import':
+          return '#3498db'; // Blue color for file-level imports
+        case 'imports_component':
+          return '#9b59b6'; // Purple color for component-level imports
+        case 'call':
+        case 'calls':
+          return '#e74c3c'; // Red color for function calls
+        case 'contains':
+          return '#95a5a6'; // Gray color for containment relationships
+        default:
+          return '#95a5a6'; // Default gray color
+      }
+    };
+
     const getNodeColor = (node: Node, colors: Record<string, string>) => {
       // Directories have a different color
       if (node.type === 'directory') {
@@ -333,20 +352,37 @@
         }
       });
 
+      // Get relation types used in the data
+      const usedRelationTypes = new Set<string>();
+      data.relationships.forEach(rel => {
+        usedRelationTypes.add(rel.type);
+      });
+
+      // Create legend group
       const legendGroup = svg.append('g').attr('transform', `translate(20, 20)`);
 
+      // Title for node types
+      legendGroup
+        .append('text')
+        .attr('x', 0)
+        .attr('y', 0)
+        .text('Node Types')
+        .style('font-size', '14px')
+        .style('font-weight', 'bold')
+        .style('fill', '#333');
+
       // Add directory type
       legendGroup
         .append('circle')
         .attr('cx', 10)
-        .attr('cy', 10)
+        .attr('cy', 20)
         .attr('r', 6)
         .attr('fill', '#7f8c8d');
 
       legendGroup
         .append('text')
         .attr('x', 20)
-        .attr('y', 14)
+        .attr('y', 24)
         .text('Directory')
         .style('font-size', '12px')
         .style('fill', '#333');
@@ -358,14 +394,14 @@
           legendGroup
             .append('circle')
             .attr('cx', 10 + Math.floor(index / 10) * 100)
-            .attr('cy', 10 + (index % 10) * 20)
+            .attr('cy', 20 + (index % 10) * 20)
             .attr('r', 6)
             .attr('fill', colors[ext]);
 
           legendGroup
             .append('text')
             .attr('x', 20 + Math.floor(index / 10) * 100)
-            .attr('y', 14 + (index % 10) * 20)
+            .attr('y', 24 + (index % 10) * 20)
             .text(`.${ext}`)
             .style('font-size', '12px')
             .style('fill', '#333');
@@ -378,17 +414,64 @@
       legendGroup
         .append('circle')
         .attr('cx', 10 + Math.floor(index / 10) * 100)
-        .attr('cy', 10 + (index % 10) * 20)
+        .attr('cy', 20 + (index % 10) * 20)
         .attr('r', 6)
         .attr('fill', '#aaaaaa');
 
       legendGroup
         .append('text')
         .attr('x', 20 + Math.floor(index / 10) * 100)
-        .attr('y', 14 + (index % 10) * 20)
+        .attr('y', 24 + (index % 10) * 20)
         .text('Other')
         .style('font-size', '12px')
         .style('fill', '#333');
+
+      // Find maximum Y position used by node type legend
+      const nodeTypeHeight = 24 + Math.min(index + 1, 10) * 20;
+
+      // Title for relationship types with some spacing
+      legendGroup
+        .append('text')
+        .attr('x', 0)
+        .attr('y', nodeTypeHeight + 30)
+        .text('Relationship Types')
+        .style('font-size', '14px')
+        .style('font-weight', 'bold')
+        .style('fill', '#333');
+
+      // Link legend entries
+      const relationshipTypes = [
+        { type: 'contains', color: '#95a5a6', label: 'Contains' },
+        { type: 'import', color: '#3498db', label: 'File Import' },
+        { type: 'imports_component', color: '#9b59b6', label: 'Component Import' },
+        { type: 'call', color: '#e74c3c', label: 'Function Call' },
+      ];
+
+      // Only show relationship types that are present in the data
+      const filteredRelationships = relationshipTypes.filter(
+        rel => usedRelationTypes.has(rel.type) || rel.type === 'imports_component'
+      );
+
+      // Add relationship legend
+      filteredRelationships.forEach((rel, i) => {
+        // Draw a small line instead of a circle for links
+        legendGroup
+          .append('line')
+          .attr('x1', 0)
+          .attr('y1', nodeTypeHeight + 50 + i * 20)
+          .attr('x2', 20)
+          .attr('y2', nodeTypeHeight + 50 + i * 20)
+          .attr('stroke', rel.color)
+          .attr('stroke-width', rel.type === 'contains' ? 1 : 2);
+
+        legendGroup
+          .append('text')
+          .attr('x', 30)
+          .attr('y', nodeTypeHeight + 54 + i * 20)
+          .text(rel.label)
+          .style('font-size', '12px')
+          .style('fill', '#333');
+      });
     };
 
     return (

pyproject.toml

@@ -23,6 +23,7 @@ classifiers = [
 ]
 dependencies = [
     "pathspec>=0.11.0",
+    "astroid>=2.15.0",
 ]
 
 [project.optional-dependencies]