From 6217d26fd7baa8717ba161732129a8fc95c2cb0f Mon Sep 17 00:00:00 2001
From: conache <C.conache@gmail.com>
Date: Wed, 29 Apr 2026 20:15:16 +0300
Subject: [PATCH 1/4] Improve node fill display

---
 crates/net/rpc/static/fork_choice.html | 122 +++++++++++++++++++------
 1 file changed, 93 insertions(+), 29 deletions(-)

diff --git a/crates/net/rpc/static/fork_choice.html b/crates/net/rpc/static/fork_choice.html
index 43d11a1a..de0a2690 100644
--- a/crates/net/rpc/static/fork_choice.html
+++ b/crates/net/rpc/static/fork_choice.html
@@ -72,11 +72,23 @@
       stroke-width: 1.5;
     }
 
-    .node-circle {
+    .node-outer {
+      fill: none;
       stroke-width: 2;
       cursor: pointer;
     }
 
+    .node-inner {
+      stroke: none;
+      pointer-events: none;
+    }
+
+    .node-hit {
+      fill: transparent;
+      stroke: none;
+      cursor: pointer;
+    }
+
     .node-label {
       fill: #ccc;
       font-size: 10px;
@@ -149,10 +161,11 @@
 
   <script>
     const POLL_INTERVAL = 2000;
-    const MARGIN = { top: 40, right: 60, bottom: 40, left: 80 };
-    const SLOT_HEIGHT = 50;
-    const MIN_RADIUS = 8;
-    const MAX_RADIUS = 30;
+    const MARGIN = { top: 40, right: 60, bottom: 140, left: 80 };
+    const SLOT_HEIGHT = 120;
+    const MAX_SLOT_HEIGHT = 200;
+    const NODE_RADIUS = 16;
+    const INNER_RADIUS = NODE_RADIUS - 3;
     const TRANSITION_DURATION = 500;
 
     const COLORS = {
@@ -193,15 +206,13 @@
       return COLORS.default;
     }
 
-    function nodeStroke(node, data) {
-      const color = nodeColor(node, data);
-      return d3.color(color).darker(0.5).toString();
+    function weightRatio(node, validatorCount) {
+      if (!validatorCount) return 0;
+      return Math.max(0, Math.min(1, node.weight / validatorCount));
     }
 
-    function nodeRadius(node, validatorCount) {
-      if (!validatorCount || validatorCount === 0) return MIN_RADIUS;
-      const ratio = node.weight / validatorCount;
-      return MIN_RADIUS + ratio * (MAX_RADIUS - MIN_RADIUS);
+    function clipId(root) {
+      return `fill-clip-${root.replace(/^0x/, "")}`;
     }
 
     function isGenesisParent(parentRoot) {
@@ -269,7 +280,13 @@
       const maxSlot = d3.max(allDescendants, d => d.data.slot);
       const slotRange = maxSlot - minSlot || 1;
 
-      const totalHeight = Math.max(slotRange * SLOT_HEIGHT, 200);
+      // Stretch toward the viewport when the chain is short, but cap each slot
+      // at MAX_SLOT_HEIGHT so consecutive nodes never drift too far apart.
+      // Long chains use natural SLOT_HEIGHT spacing and scroll.
+      const containerHeight = Math.max(container.clientHeight - MARGIN.top - MARGIN.bottom, 200);
+      const naturalHeight = slotRange * SLOT_HEIGHT;
+      const cappedStretch = slotRange * MAX_SLOT_HEIGHT;
+      const totalHeight = Math.max(naturalHeight, Math.min(containerHeight, cappedStretch));
 
       allDescendants.forEach(d => {
         d.y = MARGIN.top + ((d.data.slot - minSlot) / slotRange) * totalHeight;
@@ -291,8 +308,7 @@
         x: d.x,
         y: d.y,
         _color: nodeColor(d.data, data),
-        _stroke: nodeStroke(d.data, data),
-        _radius: nodeRadius(d.data, data.validator_count)
+        _ratio: weightRatio(d.data, data.validator_count)
       }));
 
       const links = [];
@@ -317,18 +333,27 @@
       return { nodes: flatNodes, links, width: svgWidth, height: svgHeight, slots };
     }
 
-    function showTooltip(event, d) {
-      tooltip.innerHTML =
-        `<span class="tt-label">root:</span> ${truncateRoot(d.root)}<br>` +
+    // Root of the currently-hovered node, so render() can refresh the tooltip
+    // contents on each poll without requiring the user to move the mouse.
+    let hoveredRoot = null;
+
+    function tooltipHtml(d) {
+      return `<span class="tt-label">root:</span> ${truncateRoot(d.root)}<br>` +
         `<span class="tt-label">slot:</span> ${d.slot}<br>` +
         `<span class="tt-label">proposer:</span> ${d.proposer_index}<br>` +
         `<span class="tt-label">weight:</span> ${d.weight}`;
+    }
+
+    function showTooltip(event, d) {
+      hoveredRoot = d.root;
+      tooltip.innerHTML = tooltipHtml(d);
       tooltip.style.opacity = 1;
       tooltip.style.left = (event.clientX + 14) + "px";
       tooltip.style.top = (event.clientY - 14) + "px";
     }
 
     function hideTooltip() {
+      hoveredRoot = null;
       tooltip.style.opacity = 0;
     }
 
@@ -391,15 +416,19 @@
       const linksEnter = links.enter()
         .append("line")
         .attr("class", "link")
+        .attr("x1", d => d.source.x)
+        .attr("y1", d => d.source.y + NODE_RADIUS)
+        .attr("x2", d => d.source.x)
+        .attr("y2", d => d.source.y + NODE_RADIUS)
         .attr("opacity", 0);
 
       links.merge(linksEnter)
         .transition()
         .duration(TRANSITION_DURATION)
         .attr("x1", d => d.source.x)
-        .attr("y1", d => d.source.y)
+        .attr("y1", d => d.source.y + NODE_RADIUS)
         .attr("x2", d => d.target.x)
-        .attr("y2", d => d.target.y)
+        .attr("y2", d => d.target.y - NODE_RADIUS)
         .attr("opacity", 1);
 
       // Nodes
@@ -418,15 +447,35 @@
         .attr("transform", d => `translate(${d.x},${d.y})`)
         .attr("opacity", 0);
 
+      nodeEnter.append("clipPath")
+        .attr("class", "fill-clip")
+        .attr("id", d => clipId(d.root))
+        .append("rect")
+        .attr("class", "fill-rect")
+        .attr("x", -NODE_RADIUS)
+        .attr("width", NODE_RADIUS * 2)
+        .attr("y", d => NODE_RADIUS - d._ratio * NODE_RADIUS * 2)
+        .attr("height", d => d._ratio * NODE_RADIUS * 2);
+
       nodeEnter.append("circle")
-        .attr("class", "node-circle")
-        .attr("r", d => d._radius)
+        .attr("class", "node-inner")
+        .attr("r", INNER_RADIUS)
         .attr("fill", d => d._color)
-        .attr("stroke", d => d._stroke);
+        .attr("clip-path", d => `url(#${clipId(d.root)})`);
+
+      nodeEnter.append("circle")
+        .attr("class", "node-outer")
+        .attr("r", NODE_RADIUS)
+        .attr("stroke", d => d._color);
+
+      // Invisible hit target so hover works regardless of fill level.
+      nodeEnter.append("circle")
+        .attr("class", "node-hit")
+        .attr("r", NODE_RADIUS);
 
       nodeEnter.append("text")
         .attr("class", "node-label")
-        .attr("dy", d => d._radius + 14)
+        .attr("dy", NODE_RADIUS + 14)
         .text(d => truncateRoot(d.root));
 
       const nodeMerged = nodeEnter.merge(nodeGroups);
@@ -442,17 +491,32 @@
         .attr("transform", d => `translate(${d.x},${d.y})`)
         .attr("opacity", 1);
 
-      nodeMerged.select("circle")
+      nodeMerged.select(".fill-rect")
         .transition()
         .duration(TRANSITION_DURATION)
-        .attr("r", d => d._radius)
-        .attr("fill", d => d._color)
-        .attr("stroke", d => d._stroke);
+        .attr("y", d => NODE_RADIUS - d._ratio * NODE_RADIUS * 2)
+        .attr("height", d => d._ratio * NODE_RADIUS * 2);
+
+      // Color animates as a block transitions between roles (head → justified → finalized).
+      nodeMerged.select(".node-inner")
+        .transition()
+        .duration(TRANSITION_DURATION)
+        .attr("fill", d => d._color);
+
+      nodeMerged.select(".node-outer")
+        .transition()
+        .duration(TRANSITION_DURATION)
+        .attr("stroke", d => d._color);
 
       nodeMerged.select("text")
-        .attr("dy", d => d._radius + 14)
         .text(d => truncateRoot(d.root));
 
+      // Keep the tooltip live while the user holds the mouse still over a node.
+      if (hoveredRoot) {
+        const hovered = layout.nodes.find(n => n.root === hoveredRoot);
+        if (hovered) tooltip.innerHTML = tooltipHtml(hovered);
+      }
+
       // Auto-scroll to head node
       const headNode = layout.nodes.find(n => n.root === data.head);
       if (headNode) {

From 2c55caad357640e272fff48105a750034d24ee5d Mon Sep 17 00:00:00 2001
From: conache <C.conache@gmail.com>
Date: Wed, 29 Apr 2026 22:31:07 +0300
Subject: [PATCH 2/4] Tweak transition delays

---
 crates/net/rpc/static/fork_choice.html | 57 ++++++++++++++------------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/crates/net/rpc/static/fork_choice.html b/crates/net/rpc/static/fork_choice.html
index de0a2690..c8ab4bbf 100644
--- a/crates/net/rpc/static/fork_choice.html
+++ b/crates/net/rpc/static/fork_choice.html
@@ -89,6 +89,12 @@
       cursor: pointer;
     }
 
+    .fill-mask {
+      fill: #1a1a2e;
+      stroke: none;
+      pointer-events: none;
+    }
+
     .node-label {
       fill: #ccc;
       font-size: 10px;
@@ -211,10 +217,6 @@
       return Math.max(0, Math.min(1, node.weight / validatorCount));
     }
 
-    function clipId(root) {
-      return `fill-clip-${root.replace(/^0x/, "")}`;
-    }
-
     function isGenesisParent(parentRoot) {
       if (!parentRoot) return true;
       return /^0x0+$/.test(parentRoot);
@@ -337,16 +339,17 @@
     // contents on each poll without requiring the user to move the mouse.
     let hoveredRoot = null;
 
-    function tooltipHtml(d) {
+    function tooltipHtml(d, total) {
+      const pct = total ? parseFloat(((d.weight / total) * 100).toFixed(2)) : 0;
       return `<span class="tt-label">root:</span> ${truncateRoot(d.root)}<br>` +
         `<span class="tt-label">slot:</span> ${d.slot}<br>` +
         `<span class="tt-label">proposer:</span> ${d.proposer_index}<br>` +
-        `<span class="tt-label">weight:</span> ${d.weight}`;
+        `<span class="tt-label">weight:</span> ${d.weight}/${total} (${pct}%)`;
     }
 
     function showTooltip(event, d) {
       hoveredRoot = d.root;
-      tooltip.innerHTML = tooltipHtml(d);
+      tooltip.innerHTML = tooltipHtml(d, currentData?.validator_count);
       tooltip.style.opacity = 1;
       tooltip.style.left = (event.clientX + 14) + "px";
       tooltip.style.top = (event.clientY - 14) + "px";
@@ -447,21 +450,21 @@
         .attr("transform", d => `translate(${d.x},${d.y})`)
         .attr("opacity", 0);
 
-      nodeEnter.append("clipPath")
-        .attr("class", "fill-clip")
-        .attr("id", d => clipId(d.root))
-        .append("rect")
-        .attr("class", "fill-rect")
-        .attr("x", -NODE_RADIUS)
-        .attr("width", NODE_RADIUS * 2)
-        .attr("y", d => NODE_RADIUS - d._ratio * NODE_RADIUS * 2)
-        .attr("height", d => d._ratio * NODE_RADIUS * 2);
-
+      // Inner disc rendered fully; the fill-mask above it paints the upper
+      // (1-ratio) portion in the page background color, so only the bottom
+      // ratio is visible. This avoids the clipPath-based approach, whose
+      // attribute interpolation isn't reliably re-rendered per frame.
       nodeEnter.append("circle")
         .attr("class", "node-inner")
         .attr("r", INNER_RADIUS)
-        .attr("fill", d => d._color)
-        .attr("clip-path", d => `url(#${clipId(d.root)})`);
+        .attr("fill", d => d._color);
+
+      nodeEnter.append("rect")
+        .attr("class", "fill-mask")
+        .attr("x", -INNER_RADIUS)
+        .attr("width", INNER_RADIUS * 2)
+        .attr("y", -INNER_RADIUS)
+        .attr("height", d => (1 - d._ratio) * INNER_RADIUS * 2);
 
       nodeEnter.append("circle")
         .attr("class", "node-outer")
@@ -491,21 +494,23 @@
         .attr("transform", d => `translate(${d.x},${d.y})`)
         .attr("opacity", 1);
 
-      nodeMerged.select(".fill-rect")
+      // Sequential: fill animates over the full TRANSITION_DURATION, then
+      // a quick 100ms color flip after the fill is fully settled.
+      nodeMerged.select(".fill-mask")
         .transition()
         .duration(TRANSITION_DURATION)
-        .attr("y", d => NODE_RADIUS - d._ratio * NODE_RADIUS * 2)
-        .attr("height", d => d._ratio * NODE_RADIUS * 2);
+        .attr("height", d => (1 - d._ratio) * INNER_RADIUS * 2);
 
-      // Color animates as a block transitions between roles (head → justified → finalized).
       nodeMerged.select(".node-inner")
         .transition()
-        .duration(TRANSITION_DURATION)
+        .delay(TRANSITION_DURATION)
+        .duration(100)
         .attr("fill", d => d._color);
 
       nodeMerged.select(".node-outer")
         .transition()
-        .duration(TRANSITION_DURATION)
+        .delay(TRANSITION_DURATION)
+        .duration(100)
         .attr("stroke", d => d._color);
 
       nodeMerged.select("text")
@@ -514,7 +519,7 @@
       // Keep the tooltip live while the user holds the mouse still over a node.
       if (hoveredRoot) {
         const hovered = layout.nodes.find(n => n.root === hoveredRoot);
-        if (hovered) tooltip.innerHTML = tooltipHtml(hovered);
+        if (hovered) tooltip.innerHTML = tooltipHtml(hovered, data.validator_count);
       }
 
       // Auto-scroll to head node

From 4aa5659f3a3258a9db93627c2dd9ad2008e9e368 Mon Sep 17 00:00:00 2001
From: conache <C.conache@gmail.com>
Date: Wed, 29 Apr 2026 22:36:29 +0300
Subject: [PATCH 3/4] Cleanup comments

---
 crates/net/rpc/static/fork_choice.html | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/crates/net/rpc/static/fork_choice.html b/crates/net/rpc/static/fork_choice.html
index c8ab4bbf..71ba90d3 100644
--- a/crates/net/rpc/static/fork_choice.html
+++ b/crates/net/rpc/static/fork_choice.html
@@ -282,9 +282,8 @@
       const maxSlot = d3.max(allDescendants, d => d.data.slot);
       const slotRange = maxSlot - minSlot || 1;
 
-      // Stretch toward the viewport when the chain is short, but cap each slot
-      // at MAX_SLOT_HEIGHT so consecutive nodes never drift too far apart.
-      // Long chains use natural SLOT_HEIGHT spacing and scroll.
+      // Stretch toward the viewport for short chains (capped at MAX_SLOT_HEIGHT
+      // per slot); fall back to natural SLOT_HEIGHT for long chains (scrollable).
       const containerHeight = Math.max(container.clientHeight - MARGIN.top - MARGIN.bottom, 200);
       const naturalHeight = slotRange * SLOT_HEIGHT;
       const cappedStretch = slotRange * MAX_SLOT_HEIGHT;
@@ -335,8 +334,8 @@
       return { nodes: flatNodes, links, width: svgWidth, height: svgHeight, slots };
     }
 
-    // Root of the currently-hovered node, so render() can refresh the tooltip
-    // contents on each poll without requiring the user to move the mouse.
+    // Tracked so render() can refresh the tooltip on each poll without
+    // requiring the user to move the mouse.
     let hoveredRoot = null;
 
     function tooltipHtml(d, total) {
@@ -450,10 +449,6 @@
         .attr("transform", d => `translate(${d.x},${d.y})`)
         .attr("opacity", 0);
 
-      // Inner disc rendered fully; the fill-mask above it paints the upper
-      // (1-ratio) portion in the page background color, so only the bottom
-      // ratio is visible. This avoids the clipPath-based approach, whose
-      // attribute interpolation isn't reliably re-rendered per frame.
       nodeEnter.append("circle")
         .attr("class", "node-inner")
         .attr("r", INNER_RADIUS)
@@ -494,8 +489,7 @@
         .attr("transform", d => `translate(${d.x},${d.y})`)
         .attr("opacity", 1);
 
-      // Sequential: fill animates over the full TRANSITION_DURATION, then
-      // a quick 100ms color flip after the fill is fully settled.
+      // Fill animates first, then color flips once the fill has settled.
       nodeMerged.select(".fill-mask")
         .transition()
         .duration(TRANSITION_DURATION)

From a0ae033bbafbf80d09200b083c860273016f70ef Mon Sep 17 00:00:00 2001
From: conache <C.conache@gmail.com>
Date: Wed, 29 Apr 2026 23:17:10 +0300
Subject: [PATCH 4/4] fix: guard tooltip weight against undefined
 validator_count

---
 crates/net/rpc/static/fork_choice.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/net/rpc/static/fork_choice.html b/crates/net/rpc/static/fork_choice.html
index 71ba90d3..5a49d966 100644
--- a/crates/net/rpc/static/fork_choice.html
+++ b/crates/net/rpc/static/fork_choice.html
@@ -343,7 +343,7 @@
       return `<span class="tt-label">root:</span> ${truncateRoot(d.root)}<br>` +
         `<span class="tt-label">slot:</span> ${d.slot}<br>` +
         `<span class="tt-label">proposer:</span> ${d.proposer_index}<br>` +
-        `<span class="tt-label">weight:</span> ${d.weight}/${total} (${pct}%)`;
+        `<span class="tt-label">weight:</span> ${d.weight}${total != null ? `/${total} (${pct}%)` : ''}`;
     }
 
     function showTooltip(event, d) {