fix(model-usage): keep the daily tooltip inside the chart, and scope a day from the date range - #427
Merged
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Yuyz0112
approved these changes
Sep 19, 2026
…a day from the date range
The daily chart rendered one line and one tooltip row per API key. A workspace
with 15+ keys on a day grew the tooltip to twice the 240px chart, so it covered
the plot and spilled out of the card.
Chart
- Draw the eight biggest API keys and fold the rest into a single "Other N API
keys" series, so the tooltip is bounded at nine rows (~183px) instead of
growing with the workspace.
- Tooltip rows are one line each ("name · description"); the previous two-line
row doubled the tooltip height.
- Drop the old `focusDate` state: clicking a day now narrows the date range to
that day, so the chart, both summary cards and the detail table share one
scope, and the date control is both the state and the way back.
- A single day switches the chart to a distribution across API keys (or models
when one key is selected): prompt/completion stack in two steps of the series
hue, the tail folds into "Other N (total)", and the header offers the range
back — the preset the reader came from, or their own custom window. The
chart-type toggle stays for the trend view, and picking an API key still
switches to its model mix.
- Long user-written key names/descriptions truncate in the axis, legend,
tooltip and tables instead of stretching the layout.
Tables
- The by-key, by-model and per-record tables page instead of rendering every
row: 50+ keys on one day had made the page thousands of pixels tall. The two
breakdown cards page at 10, the per-record table at 50, and paging resets on
scope changes only — never on the 60s usage poll.
- `PaginationControls` gains `showPageSize` for callers that own the page size,
and the date control shows a single day as one date instead of a range.
Aggregation lives in `pages/model-usage/lib/usage-series.ts` with unit tests;
the chart moves to `pages/model-usage/components/UsageChart.tsx`.
Patch coverage on the usage-page rework sat at 74%, with the chart tooltips, the legend/axis callbacks, the filter controls and `PaginationControls`'s page-size branch never executed. - `UsageChart.test.tsx` renders both tooltips directly: contributor ordering with "other" pinned last, a series recharts reports without a dataKey, a missing value, a category with and without a description, and the inactive state. `shortLabel` is checked on both sides of its length cutoff. - The page test fakes recharts with the smallest objects that still call back into the page, so the day-click handler, the legend toggle (including the empty-key guard), the axis formatters and the chart-type switch are exercised through the page rather than mocked out. It also covers the three `EndpointTypeBadge` states, the model-name filter, the endpoint-type filter and a workspace row with no display name, description, model or endpoint. - `PaginationControls.test.tsx` covers first/previous/next/last and the rows-per-page control, plus the hidden variant the usage cards use. The reworked files now report 100% of statements, functions and lines, and 83% of branches, when the four focused test files run.
The tracker keeps a content-hash ledger of every tracked file, and the previous commit staged `src/` only, so the updated `.i18n-tracker.lock` was left behind and CI read the file as un-reviewed. No source change.
…or states The remaining patch coverage gaps were state combinations the page fakes never reached: - a single day scoped to one key, which titles the chart by model; - the first load, when the chart shows its loader and the tables are empty; - a window with no usage at all, which every panel and table has to render; - a failed usage request, which surfaces above the tables. The usage hook is now stubbed through a reassignable state object so each case can render the page in the state it is about.
Keep #423's reviewed hashes for ai-traces/list.tsx and ApiKeyLabel.tsx, which this branch does not touch, and record the merged model-usage list.tsx.
Yuyz0112
force-pushed
the
fix/model-usage-chart-tooltip-and-day-scope
branch
from
September 19, 2026 09:54
303da62 to
3d18c12
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The daily chart rendered one line and one tooltip row per API key. A workspace with 15+ keys on a day grew the tooltip to roughly twice the 240px chart, so it covered the plot and spilled out of the card. This rework folds the chart series, moves the day breakdown out of the tooltip, and stops the tables from rendering every row.
Supersedes #417 (top-8 truncation inside the tooltip) — same goal, different lever: #417 trims the tooltip list, this folds the series so the tooltip cannot grow at all. Please close #417 rather than landing both.
What changes
Chart
focusDatestate is gone. Chart, both summary cards and the detail table share one scope, and the date control is both the state and the way back (the chart header also offers "Back to ..." — the preset the reader came from, or their own custom window).Tables
PaginationControlsgainsshowPageSizefor callers that own the page size, andDateRangePickershows a single day as one date.Structure — aggregation lives in
pages/model-usage/lib/usage-series.ts(unit tested); the chart moves topages/model-usage/components/UsageChart.tsx; the page keeps the data, filters and tables.Verification
yarn typecheck,yarn lint,yarn dep-check,knip,node tools/i18n-tracker.cjs,node tools/check-i18n-keys.cjsall pass (the pre-commit hook runs the same set).yarn test: 1891 passed, 2 failed. Both failures areTimestamp.render.test.tsx(fixed-date/timezone expectations) and fail identically onmainat 2dcdde8 — unrelated to this change.Notes for review
SERIES_COLORS; withTOP_K = 8plus "other" nothing repeats. The style guide only defines five--nt-chart-series-*tokens, so whether this page should adopt them (and with which extended set) is a separate decision — flagging rather than deciding it here.pages/model-usage/list.tsx. This branch is based onmain, so whichever merges second needs a small rebase.