-
Notifications
You must be signed in to change notification settings - Fork 12
Description
From PR #142 review comment:
The nodes get so big they hide the block root of the rest of the chain:
(plus they look like a 🐍 )
We should move to using a semi-transparent background for each node, with a more opaque color "filling up" the node as the weight reaches 100%
File: crates/net/rpc/static/fork_choice.html
Problem
Nodes with high weight grow so large they obscure neighboring block roots, making the tree hard to read.
Proposed design
Use fixed-size nodes with a two-circle "fill gauge" approach:
- Outer circle — transparent fill, visible border. Always the same size regardless of weight.
- Inner circle — opaque fill, clipped from the bottom up based on weight percentage:
- 0% weight → inner circle fully hidden (empty node)
- 50% weight → only the bottom half of the inner circle is visible
- 100% weight → the full inner circle is visible (completely filled)
This is similar to a "liquid filling a glass" effect — the opaque color rises from the bottom as weight increases.
Reference sketch
The sketch below shows three scenarios (0%, ~50%, ~100% weight). Each node is a fixed-size circle; the hatched area represents the opaque fill rising from the bottom:
0% weight 50% weight 100% weight
┌───────┐ ┌───────┐ ┌───────┐
│ ╭─╮ │ │ ╭─╮ │ │ ╭─╮ │
│ │ │ │ │ ├─┤ │ │ │█│ │
│ ╰─╯ │ │ │█│ │ │ │█│ │
└───────┘ │ ╰─╯ │ │ ╰─╯ │
(empty) └───────┘ └───────┘
(half full) (completely full)
This keeps the layout consistent and readable regardless of weight distribution.
