Skip to content

Fork choice viz: redesign node weight display to avoid hiding block roots #150

@MegaRedHand

Description

@MegaRedHand

From PR #142 review comment:

The nodes get so big they hide the block root of the rest of the chain:

big nodes hide 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:

  1. Outer circle — transparent fill, visible border. Always the same size regardless of weight.
  2. 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.

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions