Update modular_graph_and_candidates.py

modular_graph_and_candidates.py

@@ -1269,11 +1269,27 @@ function dragEnd(e, d) {
 // Initialize
 updateVisibility();
 
-// Auto-fit timeline view with better zoom for horizontal spread
+// Auto-fit timeline view - slightly zoomed out, centered on llama cluster
 setTimeout(() => {
-  if (timeScale && timeExtent[0] && timeExtent[1]) {
+if (timeScale && timeExtent[0] && timeExtent[1]) {
+  // Find llama node position
+  const llamaNode = timeline.nodes.find(n => n.id === 'llama');
+
+  if (llamaNode && llamaNode.timestamp > 0) {
+    // Center on llama's chronological position with slight zoom out
+    const llamaX = timeScale(new Date(llamaNode.timestamp * 1000));
+    const scale = 0.3; // Slightly zoomed out (was calculating much higher values)
+    const translateX = W / 2 - llamaX * scale;
+    const translateY = H / 2 - (H / 2 - 100) * scale; // Center vertically on content area
+
+    svg.transition()
+      .duration(2000)
+      .call(zoomBehavior.transform,
+        d3.zoomIdentity.translate(translateX, translateY).scale(scale));
+  } else {
+    // Fallback: gentle zoom out on full timeline
     const timeWidth = timeScale.range()[1] - timeScale.range()[0];
-    const scale = Math.min((W * 0.9) / timeWidth, 1);
+    const scale = 0.25; // Fixed gentle zoom instead of calculated tight fit
     const translateX = (W - timeWidth * scale) / 2;
     const translateY = 0;
 
@@ -1282,6 +1298,7 @@ setTimeout(() => {
       .call(zoomBehavior.transform,
         d3.zoomIdentity.translate(translateX, translateY).scale(scale));
   }
+}
 }, 1500);
 """