cheff kiss

src/components/force-directed-graph.tsx

@@ -23,105 +23,225 @@ interface ForceDirectedGraphProps {
   runs: Run[];
 }
 
+// Extended node and link types that include run metadata
+interface GraphNode extends NodeObject {
+  id: string;
+  type?: 'fixed' | 'fluid';
+  radius?: number;
+  baseOpacity?: number;
+  runIds: number[]; // Array of run indices this node is part of
+  isMainNode?: boolean; // Whether this is a start/destination node
+  fx?: number;
+  fy?: number;
+}
+
+interface GraphLink extends LinkObject {
+  source: string | GraphNode;
+  target: string | GraphNode;
+  runIds: number[]; // Array of run indices this link is part of
+}
+
 export default function ForceDirectedGraph({runs, runId }: ForceDirectedGraphProps) {
-    const [graphData, setGraphData] = useState<{nodes: {id: string, color?: string, type?: string, radius?: number, baseOpacity?: number}[], links: {source: string, target: string, color?: string}[]}>({nodes: [], links: []});
-    const [dimensions, setDimensions] = useState({ width: 800, height: 800 });
+    const [graphData, setGraphData] = useState<{nodes: GraphNode[], links: GraphLink[]}>({nodes: [], links: []});
     const containerRef = useRef<HTMLDivElement>(null);
-    const graphRef = useRef<ForceGraphMethods<NodeObject<{ id: string; color?: string; }>, LinkObject<{ id: string; color?: string; }, { source: string; target: string; color?: string; }>>>(null);
+    const graphRef = useRef<ForceGraphMethods<GraphNode, GraphLink>>(null);
    
+    // Build graph data ONLY when runs change, not when runId changes
     useEffect(() => {
-        const newGraphData: {nodes: {id: string, color?: string, type?: string, radius?: number, baseOpacity?: number}[], links: {source: string, target: string, color?: string}[]} = {nodes: [], links: []};
-        const nodesSet: Set<string> = new Set();
+        const newGraphData: {nodes: GraphNode[], links: GraphLink[]} = {nodes: [], links: []};
+        const nodesMap = new Map<string, GraphNode>();
+        const linksMap = new Map<string, GraphLink>();
+        const nodeDegrees: Map<string, number> = new Map();
         const mainNodeSet: Set<string> = new Set();
+        
+        // First identify all main nodes (start and destination)
+        runs.forEach((run) => {
+            mainNodeSet.add(run.start_article);
+            mainNodeSet.add(run.destination_article);
+        });
 
-        if(runs) {
-            // Create a map to track node degrees (number of connections)
-            const nodeDegrees: Map<string, number> = new Map();
-            
-            runs.forEach((run, runIndex) => {
-                // add in src and dst to nodes
-                const isSelectedRun = runId === runIndex;
-
-                mainNodeSet.add(run.start_article);
-                mainNodeSet.add(run.destination_article);
-
-                for(let i = 0; i < run.steps.length - 1; i++) {
-                    const step = run.steps[i];
-                    const nextStep = run.steps[i + 1];
-
-                    if(!mainNodeSet.has(step.article)) {
-                        nodesSet.add(step.article);
+        // Process all runs to build data with metadata
+        runs.forEach((run, runIndex) => {
+            for(let i = 0; i < run.steps.length - 1; i++) {
+                const step = run.steps[i];
+                const nextStep = run.steps[i + 1];
+                
+                // Update or create source node
+                if (!nodesMap.has(step.article)) {
+                    const isMainNode = mainNodeSet.has(step.article);
+                    nodesMap.set(step.article, {
+                        id: step.article,
+                        type: isMainNode ? 'fixed' : 'fluid',
+                        radius: isMainNode ? 7 : 5,
+                        runIds: [runIndex],
+                        isMainNode
+                    });
+                } else {
+                    const node = nodesMap.get(step.article)!;
+                    if (!node.runIds.includes(runIndex)) {
+                        node.runIds.push(runIndex);
                     }
-
-                    if(!mainNodeSet.has(nextStep.article)) {
-                        nodesSet.add(nextStep.article);
+                }
+                
+                // Update or create target node
+                if (!nodesMap.has(nextStep.article)) {
+                    const isMainNode = mainNodeSet.has(nextStep.article);
+                    nodesMap.set(nextStep.article, {
+                        id: nextStep.article, 
+                        type: isMainNode ? 'fixed' : 'fluid',
+                        radius: isMainNode ? 7 : 5,
+                        runIds: [runIndex],
+                        isMainNode
+                    });
+                } else {
+                    const node = nodesMap.get(nextStep.article)!;
+                    if (!node.runIds.includes(runIndex)) {
+                        node.runIds.push(runIndex);
                     }
-
-                    // Increment degree count for both nodes
-                    nodeDegrees.set(step.article, (nodeDegrees.get(step.article) || 0) + 1);
-                    nodeDegrees.set(nextStep.article, (nodeDegrees.get(nextStep.article) || 0) + 1);
-
-                    newGraphData.links.push({
-                        source: step.article, 
+                }
+                
+                // Update degrees for sizing/opacity calculations
+                nodeDegrees.set(step.article, (nodeDegrees.get(step.article) || 0) + 1);
+                nodeDegrees.set(nextStep.article, (nodeDegrees.get(nextStep.article) || 0) + 1);
+                
+                // Create or update link
+                const linkId = `${step.article}->${nextStep.article}`;
+                if (!linksMap.has(linkId)) {
+                    linksMap.set(linkId, {
+                        source: step.article,
                         target: nextStep.article,
-                        color: isSelectedRun ? STYLES.highlightColor : STYLES.linkColor
+                        runIds: [runIndex],
+                        id: linkId
                     });
+                } else {
+                    const link = linksMap.get(linkId)!;
+                    if (!link.runIds.includes(runIndex)) {
+                        link.runIds.push(runIndex);
+                    }
                 }
+            }
+        });
+        
+        // Position main nodes in a circle
+        const mainNodes = Array.from(mainNodeSet);
+        const radius = 400; // Radius of the circle
+        const centerX = 0; // Center X coordinate
+        const centerY = 0; // Center Y coordinate
+        
+        mainNodes.forEach((nodeId, index) => {
+            const angle = (index * 2 * Math.PI) / mainNodes.length;
+            const node = nodesMap.get(nodeId);
+            if (node) {
+                node.fx = centerX + radius * Math.cos(angle);
+                node.fy = centerY + radius * Math.sin(angle);
+            }
+        });
+        
+        // Create opacity scale based on node degrees
+        const maxDegree = Math.max(...Array.from(nodeDegrees.values()));
+        const opacityScale = d3.scaleLinear()
+            .domain([1, Math.max(1, maxDegree)])
+            .range([STYLES.minNodeOpacity, 1.0])
+            .clamp(true);
+            
+        // Set base opacity for all nodes
+        nodesMap.forEach(node => {
+            node.baseOpacity = node.type === 'fixed' ? 
+                1.0 : opacityScale(nodeDegrees.get(node.id) || 1);
+        });
+        
+        // Convert maps to arrays for the graph
+        newGraphData.nodes = Array.from(nodesMap.values());
+        const links = Array.from(linksMap.values());
 
-                const mainNodes = Array.from(mainNodeSet);
-                const radius = 400; // Radius of the circle
-                const centerX = 0; // Center X coordinate
-                const centerY = 0; // Center Y coordinate
-
-                newGraphData.nodes = mainNodes.map((id, index) => {
-                    const angle = (index * 2 * Math.PI) / mainNodes.length;
-                    return {
-                        id,
-                        fx: centerX + radius * Math.cos(angle),
-                        fy: centerY + radius * Math.sin(angle),
-                        type: 'fixed',
-                        radius: 7, // Larger radius for fixed nodes
-                        color: isSelectedRun && (id === run.start_article || id === run.destination_article) ? STYLES.highlightColor : STYLES.fixedNodeColor,
-                        baseOpacity: 1.0 // Fixed nodes are always fully visible
-                    };
-                });
-                
-                // Create opacity scale based on node degrees
-                const maxDegree = Math.max(...Array.from(nodeDegrees.values()));
-                const opacityScale = d3.scaleLinear()
-                    .domain([1, Math.max(1, maxDegree)])
-                    .range([STYLES.minNodeOpacity, 1.0])
-                    .clamp(true);
-
-                newGraphData.nodes.push(...Array.from(nodesSet).map((id) => ({
-                    id,
-                    type: 'fluid',
-                    radius: 5, // Smaller radius for fluid nodes
-                    color: isSelectedRun && run.steps.some(step => step.article === id) ? STYLES.highlightColor : STYLES.fluidNodeColor,
-                    baseOpacity: opacityScale(nodeDegrees.get(id) || 1)
-                })));
-            });
-
-            setGraphData(newGraphData);
+        // Convert string IDs to actual node objects in links
+        newGraphData.links = links.map(link => {
+            const sourceNode = nodesMap.get(link.source as string);
+            const targetNode = nodesMap.get(link.target as string);
+            
+            // Only create links when both nodes exist
+            if (sourceNode && targetNode) {
+                return {
+                    ...link,
+                    source: sourceNode,
+                    target: targetNode
+                };
+            }
+            // Skip this link if nodes don't exist
+            return null;
+        }).filter(Boolean) as GraphLink[];
+        
+        setGraphData(newGraphData);
+    }, [runs]); // Only depends on runs, not runId
+
+    // Set up the force simulation
+    useEffect(() => {
+        if (graphRef.current && graphData.nodes.length > 0) {
+            const radialForceStrength = 0.7;
+            const radialTargetRadius = 40;
+            const linkDistance = 35;
+            const chargeStrength = -100;
+            const COLLISION_PADDING = 3;
+
+            // Initialize force simulation
+            graphRef.current.d3Force("link", d3.forceLink(graphData.links).id((d: any) => d.id).distance(linkDistance).strength(0.9));
+            graphRef.current.d3Force("charge", d3.forceManyBody().strength(chargeStrength));
+            graphRef.current.d3Force("radial", d3.forceRadial(radialTargetRadius, 0, 0).strength(radialForceStrength));
+            graphRef.current.d3Force("collide", d3.forceCollide().radius((d: any) => (d.radius || 5) + COLLISION_PADDING));
+            graphRef.current.d3Force("center", d3.forceCenter(0, 0));
+            
+            // Give the simulation a bit of time to stabilize, then zoom to fit
+            setTimeout(() => {
+                if (graphRef.current) {
+                    graphRef.current.zoomToFit(400);
+                }
+            }, 500);
         }
-    }, [runs, runId]);
+    }, [graphData, graphRef.current]);
 
+    // Full page resize handler
     useEffect(() => {
-        if (graphRef.current) {
-          const radialForceStrength = 0.7;
-          const radialTargetRadius = 40; // Increased radius to allow more space
-          const linkDistance = 35; // Keep links relatively short
-          const chargeStrength = -100; // Increase repulsion more
-          const COLLISION_PADDING = 3;
-
-          graphRef.current.zoomToFit();
-
-          graphRef.current.d3Force("link", d3.forceLink(graphData.links).id((d) => d.id).distance(linkDistance).strength(0.9));
-          graphRef.current.d3Force("charge", d3.forceManyBody().strength(chargeStrength));
-          graphRef.current.d3Force("radial", d3.forceRadial(radialTargetRadius, 0, 0).strength(radialForceStrength));
-          graphRef.current.d3Force("collide", d3.forceCollide().radius((d) => d.radius + COLLISION_PADDING));
+        const handleResize = () => {
+            if (graphRef.current) {
+                graphRef.current.zoomToFit(400);
+            }
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    // Helper function to determine node color based on current runId
+    const getNodeColor = (node: GraphNode) => {
+        if (runId !== null && node.runIds.includes(runId)) {
+            // If the node is part of the selected run
+            if (node.isMainNode) {
+                // Main nodes (start/destination) of the selected run get highlight color
+                const run = runs[runId];
+                if (node.id === run.start_article || node.id === run.destination_article) {
+                    return STYLES.highlightColor;
+                }
+            }
+            // Regular nodes in the selected run get highlight color
+            return STYLES.highlightColor;
         }
-    }, [graphRef]);
+        
+        // Nodes not in the selected run get their default colors
+        return node.type === 'fixed' ? STYLES.fixedNodeColor : STYLES.fluidNodeColor;
+    };
+
+    // Helper function to determine link color based on current runId
+    const getLinkColor = (link: GraphLink) => {
+        return runId !== null && link.runIds.includes(runId) ? 
+            STYLES.highlightColor : STYLES.linkColor;
+    };
+
+    // Helper function to determine if a node is in the current run
+    const isNodeInCurrentRun = (node: GraphNode) => {
+        // Handle case where node might be a string ID
+        if (typeof node === 'string') return false;
+        return runId !== null && node.runIds && node.runIds.includes(runId);
+    };
 
     return (
         <div className="w-full h-full flex items-center justify-center">
@@ -131,12 +251,19 @@ export default function ForceDirectedGraph({runs, runId }: ForceDirectedGraphPro
                     graphData={graphData}
                     nodeLabel="id"
                     linkLabel="id"
-                    nodeColor="color"
-                    linkColor="color"
-                    linkWidth={link => link.source.id === runId || link.target.id === runId ? 2.5 : 1}
-                    linkOpacity={0.6}
+                    nodeColor={getNodeColor}
+                    linkColor={getLinkColor}
+                    linkWidth={link => {
+                        const source = typeof link.source === 'object' ? link.source : null;
+                        const target = typeof link.target === 'object' ? link.target : null;
+                        return (source && isNodeInCurrentRun(source)) || (target && isNodeInCurrentRun(target)) ? 2.5 : 1;
+                    }}
                     nodeRelSize={1}
-                    linkDirectionalParticles={link => link.source.id === runId || link.target.id === runId ? 4 : 0}
+                    linkDirectionalParticles={link => {
+                        const source = typeof link.source === 'object' ? link.source : null;
+                        const target = typeof link.target === 'object' ? link.target : null;
+                        return (source && isNodeInCurrentRun(source)) || (target && isNodeInCurrentRun(target)) ? 4 : 0;
+                    }}
                     linkDirectionalParticleWidth={2}
                     nodeCanvasObject={(node, ctx, globalScale) => {
                       const label = node.id;
@@ -156,11 +283,10 @@ export default function ForceDirectedGraph({runs, runId }: ForceDirectedGraphPro
                           : STYLES.minNodeOpacity;
 
                       // Draw node circle with appropriate styling
-                      const radius =
-                        node.radius || (node.type === "fixed" ? 7 : 5);
+                      const radius = node.radius || (node.type === "fixed" ? 7 : 5);
                       ctx.beginPath();
                       ctx.arc(node.x!, node.y!, radius, 0, 2 * Math.PI);
-                      ctx.fillStyle = node.color || STYLES.fluidNodeColor;
+                      ctx.fillStyle = getNodeColor(node);
                       ctx.fill();
 
                       // Add white stroke around nodes
@@ -198,8 +324,8 @@ export default function ForceDirectedGraph({runs, runId }: ForceDirectedGraphPro
                         );
                       }
                     }}
-                    width={dimensions.width}
-                    height={dimensions.height}
+                    width={containerRef.current?.clientWidth || 800}
+                    height={containerRef.current?.clientHeight || 800}
                 />
             </div>
         </div>