Merge branch 'main' of https://huggingface.co/spaces/Molbap/transformers-modular-refactor

modular_graph_and_candidates.py

@@ -837,7 +837,7 @@ svg{ width:100vw; height:100vh; }
   pointer-events:none;
   text-anchor:middle;
   font-weight:600;
-  font-size:30px;
+  font-size:50px;
   paint-order:stroke fill;
   stroke:var(--outline);
   stroke-width:3px;
@@ -894,14 +894,14 @@ svg{ width:100vw; height:100vh; }
 
 .timeline-label {
   fill: var(--muted);
-  font-size: 50px;
+  font-size: 40px;
   font-weight: 600;
   text-anchor: middle;
 }
 
 .timeline-month-label {
   fill: var(--muted);
-  font-size: 40px;
+  font-size: 35px;
   font-weight: 400;
   text-anchor: middle;
   opacity: 0.7;
@@ -926,7 +926,7 @@ svg{ width:100vw; height:100vh; }
   position:fixed; top:20px; left:20px;
   background:rgba(255,255,255,.95);
   padding:20px 26px; border-radius:12px; border:1.5px solid #e0e0e0;
-  font-size:17px; box-shadow:0 4px 16px rgba(0,0,0,.12);
+  font-size:24px; box-shadow:0 4px 16px rgba(0,0,0,.12);
   z-index: 100;
   backdrop-filter: blur(8px);
   max-width: 280px;
@@ -962,19 +962,31 @@ document.getElementById('toggleRed').addEventListener('change', updateVisibility
 const timeline = __TIMELINE_DATA__;
 const W = innerWidth, H = innerHeight;
 
+// Create SVG with zoom behavior
+const svg = d3.select('#timeline-svg');
+const g = svg.append('g');
+
 // Enhanced timeline configuration for maximum horizontal spread
 const MARGIN = { top: 60, right: 200, bottom: 120, left: 200 };
 const CONTENT_HEIGHT = H - MARGIN.top - MARGIN.bottom;
 const VERTICAL_LANES = 4; // Number of horizontal lanes for better organization
 
-// Create SVG with zoom behavior
-const svg = d3.select('#timeline-svg');
+
+
 const zoomBehavior = d3.zoom()
   .scaleExtent([0.1, 8])
   .on('zoom', handleZoom);
 svg.call(zoomBehavior);
 
-const g = svg.append('g');
+svg.on("click", function(event) {
+  if (event.target.tagName === "svg") {
+    node.select("circle").style("opacity", 1);
+    link.style("opacity", 1);
+    g.selectAll(".node-label").style("opacity", 1);
+  }
+});
+
+
 
 // Time scale for chronological positioning with much wider spread
 const timeExtent = d3.extent(timeline.nodes.filter(d => d.timestamp > 0), d => d.timestamp);
@@ -1066,6 +1078,23 @@ 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 => {
+  const s = typeof d.source === 'object' ? d.source.id : d.source;
+  const t = typeof d.target === 'object' ? d.target.id : d.target;
+  linkedByIndex[`${s},${t}`] = true;
+  linkedByIndex[`${t},${s}`] = true;
+});
+
+function isConnected(a, b) {
+  return linkedByIndex[`${a.id},${b.id}`] || a.id === b.id;
+}
+
+
+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)
@@ -1073,6 +1102,14 @@ 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) {
+  event.stopPropagation();
+  node.select("circle").style("opacity", o => isConnected(d, o) ? 1 : 0.1);
+  g.selectAll(".node-label").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);
+});
+
+
 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);
@@ -1099,10 +1136,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) {