You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
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-PRBarMini-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
TreemapMinimust 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
apps/ui/src/components/metagraphed/charts/treemap-mini.tsx(or whereverTreemapMiniis implemented — confirm exact path).Acceptance criteria
TreemapMinicomponent appears in the diffNon-goals
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.