Skip to content

fix(bench-body): restore topNControl + ledger topN wiring (dropped in #281)#282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Flotapponnier merged 1 commit into from
Jun 3, 2026
Merged

fix(bench-body): restore topNControl + ledger topN wiring (dropped in #281) #282

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion src/components/benchmark-body.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -182,7 +182,7 @@
// L1/L2 layer counts. When both > 0 the bench mixes L1 and L2 chains
// and we render a top-level Layer toggle that filters the entire page
// (chart + summary + ledger) to one layer at a time. Default is L1.
const layerCounts = useMemo(() => {

Check failure on line 185 in src/components/benchmark-body.tsx

View workflow job for this annotation

GitHub Actions/ check

React Hook "useMemo" is called conditionally. React Hooks must be called in the exact same order in every component render
let l1 = 0;
let l2 = 0;
for (const r of benchmark.results) {
Expand All@@ -197,7 +197,7 @@
// hasLayerSplit is false the original benchmark is returned untouched
// so non-layer benches keep their existing behavior. The chart, the
// summary stats and the ledger all read from `viewBenchmark`.
const viewBenchmark = useMemo(() => {

Check failure on line 200 in src/components/benchmark-body.tsx

View workflow job for this annotation

GitHub Actions/ check

React Hook "useMemo" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
if (!hasLayerSplit) return benchmark;
return {
...benchmark,
Expand All@@ -215,7 +215,7 @@
// they always saw.
const allowedViews = viewsForBenchmark(viewBenchmark);
const defaultView = defaultViewFor(viewBenchmark);
const [view, setView, viewMounted] = useViewPreference(

Check failure on line 218 in src/components/benchmark-body.tsx

View workflow job for this annotation

GitHub Actions/ check

React Hook "useViewPreference" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
viewBenchmark.slug,
defaultView,
allowedViews,
Expand All@@ -226,7 +226,7 @@
// hidden when they switch to distribution or donut - the model is
// "this is the field of providers the reader chose to focus on",
// not "what each view chose to drop". Resets on bench navigation.
const [excluded, setExcluded] = useState<Set<string>>(() => new Set());

Check failure on line 229 in src/components/benchmark-body.tsx

View workflow job for this annotation

GitHub Actions/ check

React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
const toggleExclude = (slug: string) =>
setExcluded((prev) => {
const next = new Set(prev);
Expand All@@ -242,16 +242,22 @@
// being split between the dimension row and the chart toolbar.
const chartRegions = chartOnlyRegions(benchmark);
const showChartRegionRow = regionOptions.length === 0 && chartRegions.length > 1;
const [chartRegion, setChartRegion] = useState<string>("all");

Check failure on line 245 in src/components/benchmark-body.tsx

View workflow job for this annotation

GitHub Actions/ check

React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

// Active companion-metric panel. null = main spec metric (default chart
// data, default unit, default header). When a panel id is set, the chart
// pulls its per-provider series from panel.seriesByProvider, swaps the
// header label to panel.label, and the Y-axis unit to panel.unit.
const [activePanelId, setActivePanelId] = useState<string | null>(null);

Check failure on line 251 in src/components/benchmark-body.tsx

View workflow job for this annotation

GitHub Actions/ check

React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
// Single Top-N value shared across every chart view AND the ledger
// so a reader who picks "Top 5" sees the same 5 providers in every
// surface. Each chart still computes its own option set off its own
// post-filter cohort, but the active value is parent-controlled.
const [topN, setTopN] = useState<number | null>(null);

Check failure on line 256 in src/components/benchmark-body.tsx

View workflow job for this annotation

GitHub Actions/ check

React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
const topNControl = useMemo(() => ({ topN, setTopN }), [topN]);

Check failure on line 257 in src/components/benchmark-body.tsx

View workflow job for this annotation

GitHub Actions/ check

React Hook "useMemo" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
const activePanel =
benchmark.metricPanels?.find((p) => p.id === activePanelId) ?? null;
const chartRegionOptions: ChainOption[] = useMemo(

Check failure on line 260 in src/components/benchmark-body.tsx

View workflow job for this annotation

GitHub Actions/ check

React Hook "useMemo" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
() => [
{ value: "all", label: "All" },
...chartRegions.map((r) => ({ value: r, label: REGION_DISPLAY[r] ?? r })),
Expand DownExpand Up@@ -369,6 +375,7 @@
onToggleExclude={toggleExclude}
onResetExcluded={resetExcluded}
disableTopN={hasLayerSplit}
topNControl={topNControl}
headerActions={<ViewSwitcher allowed={allowedViews} value={view} onChange={setView} />}
/>
)}
Expand All@@ -379,6 +386,7 @@
onToggleExclude={toggleExclude}
onResetExcluded={resetExcluded}
disableTopN={hasLayerSplit}
topNControl={topNControl}
headerActions={<ViewSwitcher allowed={allowedViews} value={view} onChange={setView} />}
/>
)}
Expand All@@ -388,6 +396,7 @@
excluded={excluded}
onToggleExclude={toggleExclude}
disableTopN={hasLayerSplit}
topNControl={topNControl}
headerActions={<ViewSwitcher allowed={allowedViews} value={view} onChange={setView} />}
/>
)}
Expand All@@ -414,6 +423,7 @@
onToggleExclude={toggleExclude}
onResetExcluded={resetExcluded}
disableTopN={hasLayerSplit}
topNControl={topNControl}
headerActions={<ViewSwitcher allowed={allowedViews} value={view} onChange={setView} />}
seriesOverride={activePanel?.seriesByProvider}
metricLabelOverride={activePanel?.label}
Expand All@@ -437,7 +447,7 @@
? `Product ledger · sorted by ${activePanel.label}`
: "Product ledger · sorted by p50"}
</p>
<LedgerTable benchmark={viewBenchmark} activePanel={activePanel} />
<LedgerTable benchmark={viewBenchmark} activePanel={activePanel} topN={topN} />
</div>

{viewBenchmark.unit !== "count" &&
Expand Down
Loading