Skip to content

TreemapMini's tail-tile labels overlap into illegible text under realistic (skewed) stake distributions #3937

Description

@JSONbored

Context

The new stake-dominance treemap (TreemapMini, introduced in #3918) squarifies tiles by proportional area. When one validator dominates a subnet's stake — the common case across Bittensor subnets, not an edge case — the tail validators' tiles get squashed to near-zero height. Confirmed in the PR's own screenshots: on mobile (375px), one tile's "#226" label and its "119.4k τ" value render stacked directly on top of each other, fully overlapping into illegible text; an adjacent tile shows only a bare "#" with no value text at all; the smallest tile in the sample data isn't legibly rendered at any of the three tested viewports. Confirmed as newly introduced — the pre-PR BarMini-only view didn't exhibit this. At desktop width the two smallest tiles are reduced to unreadable slivers with no label or value shown either.

Requirement

TreemapMini must remain legible for every tile, including the smallest ones in a skewed distribution — either by enforcing a minimum tile size below which the label/value moves outside the tile (e.g. to a tooltip-on-hover/tap, or an adjacent legend), or by collapsing very-small tiles into a single "+N more" grouped tile rather than rendering each as an individually-squashed, illegible rectangle.

Deliverable

  • File to change: apps/ui/src/components/metagraphed/charts/treemap-mini.tsx (or wherever TreemapMini is implemented — confirm exact path).
  • What "done" looks like concretely: given a realistic skewed distribution (one dominant validator, several small ones), every tile either shows fully legible text or, below a defined minimum-tile-size threshold, doesn't attempt to render inline text at all (moving that information to hover/tap or a grouped overflow tile instead).

Acceptance criteria

  • The TreemapMini component appears in the diff
  • Using the same (or an equivalently skewed) stake distribution as the PR's own screenshots, no tile shows overlapping/stacked text, and no tile shows a truncated label with no value
  • Verified at mobile (375px), tablet (768px), and desktop (1280px), both themes
  • A reasonable minimum legible tile size is established and tiles below it get a fallback treatment (hover/tap detail, or grouping) instead of squashed inline text
  • Includes a before/after screenshot table at mobile, tablet, and desktop, both themes, per the repo's UI-PR requirement
  • Since the fallback for small tiles likely involves a hover or tap-revealed detail, include a short screen recording (GIF/MP4) demonstrating that interaction — a static screenshot can't show a hover-revealed tooltip

Non-goals

  • Don't change the underlying stake-dominance data or its computation.
  • Don't remove the treemap in favor of reverting to BarMini — the treemap concept itself is fine, this is a legibility fix for its tail-tile rendering.

Size

Size: M — keep this PR small (aim for ≤10 files / ≤1000 LOC).

Part of #2542.

Metadata

Metadata

Assignees

No one assigned

    Labels

    gittensor:bugGittensor-scored bug fix or unsolicited PR — scores a 0.05x multiplier.

    Projects

    Status
    In progress

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions