force directed actually working

.gitignore

@@ -24,4 +24,6 @@ dist-ssr
 *.sw?
 
 .env
-tmp
+tmp
+
+qwen3-final-results.json

src/components/force-directed-graph.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import ForceGraph2D from "react-force-graph-2d";
+import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from "react-force-graph-2d";
 import { Run } from "./reasoning-trace";
-
+import * as d3 from "d3";
 // This is a placeholder component for the force-directed graph
 // In a real implementation, you would use a library like D3.js or react-force-graph
 
@@ -13,19 +13,20 @@ interface ForceDirectedGraphProps {
 }
 
 export default function ForceDirectedGraph({runs, runId }: ForceDirectedGraphProps) {
-    const [graphData, setGraphData] = useState<{nodes: {id: string}[], links: {source: string, target: string}[]}>({nodes: [], links: []});
-    const [dimensions, setDimensions] = useState({ width: 300, height: 300 });
+    const [graphData, setGraphData] = useState<{nodes: {id: string, color?: string}[], links: {source: string, target: string, color?: string}[]}>({nodes: [], links: []});
+    const [dimensions, setDimensions] = useState({ width: 800, height: 800 });
     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);
     useEffect(() => {
 
-        const newGraphData: {nodes: {id: string}[], links: {source: string, target: string}[]} = {nodes: [], links: []};
+        const newGraphData: {nodes: {id: string, color?: string}[], links: {source: string, target: string, color?: string}[]} = {nodes: [], links: []};
         const nodesSet: Set<string> = new Set();
         const mainNodeSet: Set<string> = new Set();
 
         if(runs) {
-            runs.forEach((run) => {
+            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);
@@ -42,13 +43,17 @@ export default function ForceDirectedGraph({runs, runId }: ForceDirectedGraphPro
                         nodesSet.add(nextStep.article);
                     }
 
-                    newGraphData.links.push({source: step.article, target: nextStep.article});
+                    newGraphData.links.push({
+                        source: step.article, 
+                        target: nextStep.article,
+                        color: isSelectedRun ? '#ff6b6b' : 'gray'
+                    });
                 }
 
                 const mainNodes = Array.from(mainNodeSet);
-                const radius = 200; // Radius of the circle
-                const centerX = 400; // Center X coordinate
-                const centerY = 300; // Center Y coordinate
+                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;
@@ -56,50 +61,84 @@ export default function ForceDirectedGraph({runs, runId }: ForceDirectedGraphPro
                         id,
                         fx: centerX + radius * Math.cos(angle),
                         fy: centerY + radius * Math.sin(angle),
-                        color: "red"
+                        color: isSelectedRun && (id === run.start_article || id === run.destination_article) ? '#ff6b6b' : 'red'
                     };
                 });
-                newGraphData.nodes.push(...Array.from(nodesSet).map((id) => ({id})));
+                newGraphData.nodes.push(...Array.from(nodesSet).map((id) => ({
+                    id,
+                    color: isSelectedRun && run.steps.some(step => step.article === id) ? '#ff6b6b' : 'gray'
+                })));
             });
 
             setGraphData(newGraphData);
         }
-    }, [runs]);
-
-    // useEffect(() => {
-    //     if (!containerRef.current) return;
-    //     const observer = new window.ResizeObserver(entries => {
-    //         for (const entry of entries) {
-    //             const { width, height } = entry.contentRect;
-    //             setDimensions({ width, height });
-    //         }
-    //     });
-    //     observer.observe(containerRef.current);
-    //     // Set initial size
-    //     setDimensions({
-    //         width: containerRef.current.offsetWidth,
-    //         height: containerRef.current.offsetHeight
-    //     });
-    //     return () => observer.disconnect();
-    // }, []);
-
-    // if (!runId) {
-    //     return (
-    //         <div className="w-full h-full flex items-center justify-center text-muted-foreground">
-    //             Select a run to view the path graph
-    //         </div>
-    //     );
-    // }
+    }, [runs, runId]);
+
+    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.centerAt(400, 400);
+          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));
+
+        }
+    }, [graphRef]);
+
 
     return (
         <div className="w-full h-full flex items-center justify-center">
             <div ref={containerRef} className="w-full h-full">
                 <ForceGraph2D
+                    ref={graphRef}
                     graphData={graphData}
                     nodeLabel="id"
                     linkLabel="id"
                     nodeColor="color"
-                    linkColor="gray"
+                    linkColor="color"
+                    nodeCanvasObject={(node, ctx, globalScale) => {
+                        const label = node.id;
+                        const fontSize = 12/globalScale;
+                        ctx.font = `${fontSize}px Sans-Serif`;
+                        const textWidth = ctx.measureText(label).width;
+                        const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2);
+
+                        // Draw node circle
+                        ctx.beginPath();
+                        ctx.arc(node.x!, node.y!, 5, 0, 2 * Math.PI);
+                        ctx.fillStyle = node.color || 'gray';
+                        ctx.fill();
+
+                        if(node.color === "red") {
+                            // Draw label background
+                            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+                        ctx.fillRect(
+                            node.x! - bckgDimensions[0] / 2,
+                            node.y! + 8,
+                            bckgDimensions[0],
+                            bckgDimensions[1]
+                        );
+
+                        // Draw label text
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'middle';
+                        ctx.fillStyle = 'black';
+                        ctx.fillText(
+                            label,
+                            node.x!,
+                                node.y! + 8 + fontSize / 2
+                            );
+                        }
+                    }}
                     width={dimensions.width}
                     height={dimensions.height}
                 />

src/components/viewer-tab.tsx

@@ -3,9 +3,9 @@
 import * as hub from "@huggingface/hub";
 import type { RepoDesignation } from "@huggingface/hub";
 
-// import mockResults from "../../qwen3-final-results.json";
+import mockResults from "../../qwen3-final-results.json"
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import {
   Select,
   SelectContent,
@@ -26,15 +26,6 @@ type Run = {
   hops: number;
 };
 
-// Sample data - would be fetched from HuggingFace dataset in a real implementation
-const sampleRuns = [
-  { id: 1, start: "Pokemon", end: "Canada", hops: 16 },
-  { id: 2, start: "Pokemon", end: "Canada", hops: 16 },
-  { id: 3, start: "Pokemon", end: "Canada", hops: 16 },
-  { id: 4, start: "Pokemon", end: "Canada", hops: 16 },
-  // Add more sample runs as needed
-];
-
 const datasets = [
   { id: "dataset1", name: "Eureka-Lab/PHYBench" },
   { id: "dataset2", name: "Eureka-Lab/PHYBench-LLM" },
@@ -48,8 +39,8 @@ export default function ViewerTab() {
 
   const fetchDataset = async () => {
     console.log("Fetching dataset...");
-    // console.log(Object.keys(mockResults));
-    // setRuns(mockResults.runs.slice(0, 10));
+    console.log(Object.keys(mockResults));
+    setRuns(mockResults.runs.slice(0, 1000));
 
     return;
     setLoading(true);
@@ -85,6 +76,10 @@ export default function ViewerTab() {
     setSelectedRun(runId);
   };
 
+  const filterRuns = useMemo(() => {
+    return runs.filter(run => run.result === "win");
+  }, [runs]);
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
       <div className="md:col-span-3">
@@ -118,16 +113,16 @@ export default function ViewerTab() {
       </div>
 
       <div className="md:col-span-5">
-        <Card className="w-full h-[600px] flex items-center justify-center">
-          <ForceDirectedGraph runs={runs} runId={selectedRun} />
+        <Card className="h-[800px] w-[800px] flex items-center justify-center p-0 m-0">
+          <ForceDirectedGraph runs={filterRuns} runId={selectedRun} />
         </Card>
       </div>
 
-      <div className="md:col-span-4">
+      {/* <div className="md:col-span-4">
         <Card className="w-full h-[600px] p-4">
           <ReasoningTrace run={runs[selectedRun]} />
         </Card>
-      </div>
+      </div> */}
     </div>
   );
 }