fix(graph): pre-compute layout to eliminate warping on render

Run D3 force simulation to completion before displaying nodes,
preventing animation and warping when toggling filters or opening
graph. Nodes now appear in stable positions immediately.

- Initialize nodes with random positions near center
- Run 300 simulation ticks before rendering
- Set positions statically after computation
- Only animate during drag interactions

Author: brickfrog

src/components/Graph.astro

@@ -326,6 +326,12 @@ const { currentSlug } = Astro.props;
     // Create zoom container
     const g = svg.append('g').attr('class', 'zoom-container');
 
+    // Initialize random positions
+    data.nodes.forEach((node: any) => {
+      node.x = width / 2 + (Math.random() - 0.5) * 100;
+      node.y = height / 2 + (Math.random() - 0.5) * 100;
+    });
+
     // Create force simulation
     const simulation = d3
       .forceSimulation(data.nodes as any)
@@ -335,7 +341,11 @@ const { currentSlug } = Astro.props;
       )
       .force('charge', d3.forceManyBody().strength(GRAPH.CHARGE_STRENGTH))
       .force('center', d3.forceCenter(width / 2, height / 2))
-      .force('collision', d3.forceCollide().radius(GRAPH.COLLISION_RADIUS));
+      .force('collision', d3.forceCollide().radius(GRAPH.COLLISION_RADIUS))
+      .stop();
+
+    // Run simulation to stable state before rendering
+    for (let i = 0; i < 300; ++i) simulation.tick();
 
     // Create links
     const link = g
@@ -384,7 +394,19 @@ const { currentSlug } = Astro.props;
 
     node.append('title').text((d: any) => d.title);
 
-    // Update positions on simulation tick
+    // Set initial positions (simulation already ran to completion)
+    link
+      .attr('x1', (d: any) => d.source.x)
+      .attr('y1', (d: any) => d.source.y)
+      .attr('x2', (d: any) => d.target.x)
+      .attr('y2', (d: any) => d.target.y);
+
+    node.attr('transform', (d: any) => `translate(${d.x},${d.y})`);
+
+    // Drag functions for nodes
+    let currentTransform = d3.zoomIdentity;
+
+    // Only update positions when simulation is active (during drag)
     simulation.on('tick', () => {
       link
         .attr('x1', (d: any) => d.source.x)
@@ -395,9 +417,6 @@ const { currentSlug } = Astro.props;
       node.attr('transform', (d: any) => `translate(${d.x},${d.y})`);
     });
 
-    // Drag functions for nodes
-    let currentTransform = d3.zoomIdentity;
-
     function dragstarted(event: any) {
       if (!event.active) simulation.alphaTarget(0.3).restart();
       event.subject.fx = event.subject.x;