fix(chart): Top N ranking respects higher_is_better, matching ledger

src/components/benchmark-body.tsx

@@ -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(() => {
  let l1 = 0;
  let l2 = 0;
  for (const r of benchmark.results) {
@@ -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(() => {
  if (!hasLayerSplit) return benchmark;
  return {
  ...benchmark,
@@ -215,7 +215,7 @@
  // they always saw.
  const allowedViews = viewsForBenchmark(viewBenchmark);
  const defaultView = defaultViewFor(viewBenchmark);
  const [view, setView, viewMounted] = useViewPreference(
  viewBenchmark.slug,
  defaultView,
  allowedViews,
@@ -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());
  const toggleExclude = (slug: string) =>
  setExcluded((prev) => {
  const next = new Set(prev);
@@ -242,22 +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");
 
  // 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);
  // 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);
  const topNControl = useMemo(() => ({ topN, setTopN }), [topN]);
  const activePanel =
  benchmark.metricPanels?.find((p) => p.id === activePanelId) ?? null;
  const chartRegionOptions: ChainOption[] = useMemo(
  () => [
  { value: "all", label: "All" },
  ...chartRegions.map((r) => ({ value: r, label: REGION_DISPLAY[r] ?? r })),
@@ -430,6 +430,7 @@
  seriesOverride30d={activePanel?.seriesByProvider30d}
  metricLabelOverride={activePanel?.label}
  unitOverride={activePanel?.unit}
+ higherIsBetterOverride={activePanel?.higherIsBetter}
  />
  {activePanel?.description && (
  <p className="mt-3 text-[12px] text-ink-muted max-w-2xl">

src/components/time-series-chart.tsx

@@ -38,6 +38,12 @@ type Props = {
  seriesOverride30d?: Record<string, number[]>;
  metricLabelOverride?: string;
  unitOverride?: Benchmark["unit"];
+ /** Direction override for ranking when a metric panel is active. Bench
+ * level higher_is_better doesn't apply to companion metrics with
+ * inverse semantics (effective fee bps lower is better, time since
+ * last fill lower is better). When set, the chart's Top N selector
+ * picks the BEST N rather than the BIGGEST N. */
+ higherIsBetterOverride?: boolean;
  topNControl?: { topN: number | null; setTopN: (n: number | null) => void };
  disableTopN?: boolean;
 };
@@ -93,6 +99,7 @@ export function TimeSeriesChart({
  seriesOverride30d,
  metricLabelOverride,
  unitOverride,
+ higherIsBetterOverride,
  onResetExcluded,
  topNControl,
  disableTopN,
@@ -178,9 +185,19 @@ export function TimeSeriesChart({
  }))
  .filter((l) => l.values.length > 0);
 
- built.sort((a, b) => mean(b.values.slice(-6)) - mean(a.values.slice(-6)));
+ // Respect higher_is_better when ranking lines. For a panel like
+ // effective fee bps where lower means better, the Top N selector
+ // should surface the BEST N (smallest values), matching the ledger
+ // table below which sorts the same way. Without this the chart and
+ // ledger would disagree on what Top 5 means.
+ const higherIsBetter = higherIsBetterOverride ?? benchmark.higherIsBetter;
+ built.sort((a, b) => {
+ const av = mean(a.values.slice(-6));
+ const bv = mean(b.values.slice(-6));
+ return higherIsBetter ? bv - av : av - bv;
+ });
  return built;
- }, [benchmark, range, region, colors, excluded, seriesOverride, seriesOverride7d, seriesOverride30d]);
+ }, [benchmark, range, region, colors, excluded, seriesOverride, seriesOverride7d, seriesOverride30d, higherIsBetterOverride]);
 
  // Top-N selector — sized off the post-filter line count via the
  // shared `useTopN` hook so the option set agrees across every