Skip to content

distribution: redesign as percentile whisker with landmark axis#197

Merged
Flotapponnier merged 1 commit into
devfrom
feat/distribution-whisker-redesign
May 29, 2026
Merged

distribution: redesign as percentile whisker with landmark axis#197
Flotapponnier merged 1 commit into
devfrom
feat/distribution-whisker-redesign

Conversation

@Flotapponnier

Copy link
Copy Markdown
Collaborator

Full rewrite of the distribution chart to address the "I click and other things appear/disappear, I can't read this" feedback.

What changed

  1. Whisker shape per row — one continuous shape replaces the old 3-marker + band + median-guide combo: connector → p50 dot → thick p50→p90 bar → thinner p90→p99 tail → p99 wall. Silhouette encodes the spread story in one eye-jump; tooltip combines all three numbers in a single Hint.

  2. Landmark axis above the rows — X axis snaps to power-of-10 decades formatted via `fmtUnit` (e.g. `100ms · 1s · 10s · 1min · 10min · 1h`). Tick labels live in a header rail above the rows and faint gridlines repeat per row, so the reader can decode any whisker's position back to a real value without hovering.

  3. No more "shifting world" on exclude — toggling a provider rarely changes the visible landmarks (the floor / ceiling only move when data crosses a decade boundary). When they do move, the transition runs through the shared `useAnimatedDomain` hook (450 ms ease-out, 20 % significance threshold — same easing as the time-series chart's Y-axis re-zoom).

  4. Excluded rows dim in place — the row keeps its grid slot and its rank #N. No reflow, no rank renumbering. Click anywhere on the row to re-include. A "Reset · N excluded" button appears in the header when any provider is hidden.

  5. Stable rank column — `drop journal framing #1..#N` on the left, derived from the unchanging sort order. Lets the reader anchor on a row even when the row is dimmed.

Refactor

  • Extracted `useAnimatedDomain` from `time-series-chart.tsx` to `src/hooks/use-animated-domain.ts` so both charts share the same easing.
  • `time-series-chart.tsx` now imports the hook (no behavior change).
  • New helper `pickLandmarks(min, max, unit)` picks power-of-10 decade ticks. Works for every unit OCB uses (`ms`, `s`, `slots`, `count`, `bps`, `pct`, `usd`) via `fmtUnit` formatting — no per-unit lookup table.

Removed

  • The old 50 % median guide (was a pixel midpoint, meaningless on log scale).
  • The footer `min … max` text (replaced by labelled ticks above).
  • The 3-icon `` (replaced by a single whisker-shape legend that mirrors what the eye actually sees).

@Flotapponnier
Flotapponnier merged commit 53f79f1 into dev May 29, 2026
@Flotapponnier
Flotapponnier deleted the feat/distribution-whisker-redesign branch June 9, 2026 21:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant