fix(forkchoice): redesign viz node weight display (#328)

## Motivation

Closes #150 .

In the original fork choice viz, node size scaled with `weight`, so a
high-weight block could grow large enough to obscure neighboring block
roots. This PR replaces it with fixed-size nodes whose inner circle
fills from the bottom proportional to `weight / validator_count`.

## Description

Every node renders at the same size; the visible inner fill is the
weight ratio. The fill animates first, then the role color (head,
safe-target, justified, finalized) flips after the fill settles. The
tooltip's `weight` line now reads `count/total (pct%)`.

## How to Use

### 1. Start a local devnet

```
make run-devnet
```

Or start a node manually:

```
cargo run --release -- \
  --custom-network-config-dir ./config \
  --node-key ./keys/node.key \
  --node-id 0 \
  --metrics-port 5054
```

### 2. Open the visualization

Navigate to `http://localhost:5054/lean/v0/fork_choice/ui` in your
browser.

The page will start polling automatically and render the fork tree as
blocks are produced.

### What to look for

- **Block at the head**: empty orange ring (no attestations yet).
- **Recent canonical blocks**: partially filled rings, getting fuller as
attestations arrive.
- **Justified / finalized blocks**: full discs in blue / green.
- **Forks (when they happen)**: competing branches show visibly lower
fill than the canonical chain.

## Screenshots

### Live local devnet

<img width="667" height="798" alt="Screenshot 2026-04-29 at 22 41 18"
src="https://github.com/user-attachments/assets/52e578bd-8ef1-4d8e-b01b-934fe6a7a4f4"
/>


### Forked tree (mocked data)

<img width="733" height="1120" alt="Screenshot 2026-04-29 at 19 59 14"
src="https://github.com/user-attachments/assets/977e9f28-a3cd-42c5-8050-a28313b343f0"
/>


## Test plan

- [x] Verified locally with a single run — 4 validators, watching head →
safe-target → justified → finalized transitions.
- [x] `make fmt`, `make lint`, `make test` — no regressions.

---------

Co-authored-by: Pablo Deymonnaz <pdeymon@fi.uba.ar>

Author: conache

crates/net/rpc/static/fork_choice.html

@@ -72,11 +72,29 @@
       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;
+    }
+
+    .fill-mask {
+      fill: #1a1a2e;
+      stroke: none;
+      pointer-events: none;
+    }
+
     .node-label {
       fill: #ccc;
       font-size: 10px;
@@ -149,10 +167,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 +212,9 @@
       return COLORS.default;
     }
 
-    function nodeStroke(node, data) {
-      const color = nodeColor(node, data);
-      return d3.color(color).darker(0.5).toString();
-    }
-
-    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 weightRatio(node, validatorCount) {
+      if (!validatorCount) return 0;
+      return Math.max(0, Math.min(1, node.weight / validatorCount));
     }
 
     function isGenesisParent(parentRoot) {
@@ -269,7 +282,12 @@
       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 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;
+      const totalHeight = Math.max(naturalHeight, Math.min(containerHeight, cappedStretch));
 
       allDescendants.forEach(d => {
         d.y = MARGIN.top + ((d.data.slot - minSlot) / slotRange) * totalHeight;
@@ -291,8 +309,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 +334,28 @@
       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>` +
+    // 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) {
+      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 != null ? `/${total} (${pct}%)` : ''}`;
+    }
+
+    function showTooltip(event, d) {
+      hoveredRoot = d.root;
+      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";
     }
 
     function hideTooltip() {
+      hoveredRoot = null;
       tooltip.style.opacity = 0;
     }
 
@@ -391,15 +418,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
@@ -419,14 +450,30 @@
         .attr("opacity", 0);
 
       nodeEnter.append("circle")
-        .attr("class", "node-circle")
-        .attr("r", d => d._radius)
-        .attr("fill", d => d._color)
-        .attr("stroke", d => d._stroke);
+        .attr("class", "node-inner")
+        .attr("r", INNER_RADIUS)
+        .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")
+        .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 +489,33 @@
         .attr("transform", d => `translate(${d.x},${d.y})`)
         .attr("opacity", 1);
 
-      nodeMerged.select("circle")
+      // Fill animates first, then color flips once the fill has settled.
+      nodeMerged.select(".fill-mask")
         .transition()
         .duration(TRANSITION_DURATION)
-        .attr("r", d => d._radius)
-        .attr("fill", d => d._color)
-        .attr("stroke", d => d._stroke);
+        .attr("height", d => (1 - d._ratio) * INNER_RADIUS * 2);
+
+      nodeMerged.select(".node-inner")
+        .transition()
+        .delay(TRANSITION_DURATION)
+        .duration(100)
+        .attr("fill", d => d._color);
+
+      nodeMerged.select(".node-outer")
+        .transition()
+        .delay(TRANSITION_DURATION)
+        .duration(100)
+        .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, data.validator_count);
+      }
+
       // Auto-scroll to head node
       const headNode = layout.nodes.find(n => n.root === data.head);
       if (headNode) {