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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions