Update modular_graph_and_candidates.py

modular_graph_and_candidates.py

@@ -960,6 +960,14 @@ const zoomBehavior = d3.zoom()
   .on('zoom', handleZoom);
 svg.call(zoomBehavior);
 
+svg.on("click", function(event) {
+  if (event.target.tagName === "svg") {
+    node.style("opacity", 1);
+    link.style("opacity", 1);
+    g.selectAll(".node-label").style("opacity", 1);
+  }
+});
+
 const g = svg.append('g');
 
 // Time scale for chronological positioning with much wider spread
@@ -1036,6 +1044,16 @@ const link = g.selectAll('path.link')
   .attr('fill', 'none')
   .attr('stroke-width', d => d.cand ? 2.5 : 1.5);
 
+const linkedByIndex = {};
+timeline.links.forEach(d => {
+  linkedByIndex[`${d.source.id},${d.target.id}`] = true;
+  linkedByIndex[`${d.target.id},${d.source.id}`] = true;
+});
+
+function isConnected(a, b) {
+  return linkedByIndex[`${a.id},${b.id}`] || a.id === b.id;
+}
+
 // Nodes with improved positioning strategy
 const node = g.selectAll('g.node')
   .data(timeline.nodes)
@@ -1043,6 +1061,16 @@ const node = g.selectAll('g.node')
   .attr('class', d => `node ${d.cls}`)
   .call(d3.drag().on('start', dragStart).on('drag', dragged).on('end', dragEnd));
 
+node.on("click", function(event, d) {
+  // Stop click from bubbling up to svg
+  event.stopPropagation();
+
+  node.style("opacity", o => isConnected(d, o) ? 1 : 0.1);
+  link.style("opacity", o => (o.source.id === d.id || o.target.id === d.id) ? 1 : 0.1);
+  g.selectAll(".node-label")
+    .style("opacity", o => isConnected(d, o) ? 1 : 0.1);
+});
+
 const baseSel = node.filter(d => d.cls === 'base');
 baseSel.append('circle').attr('r', 20).attr('fill', '#ffbe0b');
 node.filter(d => d.cls !== 'base').append('circle').attr('r', 18);
@@ -1069,10 +1097,10 @@ timeline.nodes.forEach((d, i) => {
 // Enhanced force simulation for optimal horizontal chronological layout
 const sim = d3.forceSimulation(timeline.nodes)
   .force('link', d3.forceLink(timeline.links).id(d => d.id)
-    .distance(d => d.cand ? 100 : 200)
+    .distance(d => d.cand ? 200 : 300)
     .strength(d => d.cand ? 0.1 : 0.3))
-  .force('charge', d3.forceManyBody().strength(-300))
-  .force('collide', d3.forceCollide(d => 45).strength(0.8));
+  .force('charge', d3.forceManyBody().strength(-800))
+  .force('collide', d3.forceCollide(d => 70).strength(1))
 
 // Very strong chronological X positioning for proper horizontal spread
 if (timeScale) {