feat(replay): foreground line labels, stable anchors, and fixed axes (#434)

* fix(scatter): keep line labels in the foreground

Inference performance scatter charts create line labels inside the
rooflines layer, which renders before the dot groups so roofline paths
stay behind the points. That left the labels painted under the scatter
points and overlay marks. Add a trailing custom layer that re-raises
every `.line-label` to the end of the zoomGroup after all layers render
(and on zoom), so they always read as foreground — mirroring GPUGraph,
whose line-label layer already renders last.

`.raise()` only changes z-order; label placement and the existing
de-overlap (hide-on-collision for interactivity, vertical nudge for
TTFT/E2EL) are untouched, so labels still never overlap one another.
Selects overlay line labels (`overlay-*`) too, so unofficial-run
overlays get the same treatment.

Adds an E2E assertion that visible labels follow the dot groups in DOM
order.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(replay): pin line labels to a stable anchor during replay

In "Replay over time", line labels were re-placed every frame by the
greedy placement algorithm, so they teleported between candidate
positions (and the TTFT/E2EL vertical nudge reshuffled them) as the
rooflines animated — visually noisy.

Give each label a positional "affinity": add an opt-in `pinLineLabels`
prop (set by ReplayPanel, like `transitionDuration`/`niceAxes`). When
pinned, each label remembers a data-space x anchor the first time its
series is seen and, on every later frame, resolves that anchor to the
nearest current point on the line — so the label tracks the same spot as
the line moves instead of hopping. The TTFT/E2EL de-overlap nudge is
skipped while pinned so endpoint labels stay glued to their (smoothly
moving) endpoints. Anchors are pruned when a series disappears.

The static (non-pinned) chart is unchanged: the default branch of the
shared placeLabel helper keeps the exact greedy-place + hide-on-collision
behavior, preserving the no-overlap guarantee. Works for both official
and overlay (`?unofficialrun=`) line labels.

Extracts pointNearestX into its own module with unit tests.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(replay): fixed axes across the run, with a toggle

By default the replay axes now stay fixed to the whole run's extent (for
the active hardware) instead of refitting to each frame, so you can watch
the frontier expand toward a constant coordinate space over time. A
"Fixed axes" switch in the replay controls flips back to per-frame
(dynamic) axes that hug the current frontier.

- buildReplayTimeline: add computeFullRunDomain(timeline, hwFilter) —
  the bounding box across every step for the filtered configs.
- ScatterGraph: add optional xExtentOverride/yExtentOverride; when set,
  the axis domain is based on them (normal padding + log/zero-baseline
  handling still applied) instead of the current points. Undefined for
  every non-replay caller, so the static chart is unchanged.
- ReplayPanel: compute the full-run extent for the active hardware and
  pass it when "Fixed axes" is on (default); pass undefined when off.

Unit tests cover computeFullRunDomain (spans all steps, respects the hw
filter).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(inference): keep line labels foregrounded and pinned without the identity zoom replay

* test(inference): cover line-label foreground after zoom and replay foreground + fixed-axes toggle

* test(inference): drop flaky zoom-reset cleanup from foreground-after-zoom spec

* test(inference): make fixed-axes E2E robust to which axis grows (compare x|y pair, assert fixed stays constant)

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: adibarra <93070681+adibarra@users.noreply.github.com>

Author: 3 people

packages/app/cypress/e2e/inference-replay.cy.ts

@@ -7,6 +7,28 @@ const openReplayDialog = () => {
   cy.get('[data-testid="export-mp4-button"]').first().click();
 };
 
+const setReplayScrubber = (v: number) =>
+  cy.get('[data-testid="replay-scrubber"]').then(($el) => {
+    const el = $el[0] as HTMLInputElement;
+    const setter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), 'value')!.set!;
+    setter.call(el, String(v));
+    el.dispatchEvent(new Event('input', { bubbles: true }));
+    el.dispatchEvent(new Event('change', { bubbles: true }));
+  });
+
+// Combined "<last-x-tick>|<last-y-tick>" signature so a change in EITHER axis is
+// detected. The run can grow in x, y, or both between frames, so asserting on
+// the y-axis alone would falsely fail when only x expands.
+const replayAxisExtent = () =>
+  cy.get('[data-testid="replay-panel-chart-0"] svg').then(($svg) => {
+    const svg = $svg[0];
+    const lastTick = (sel: string) => {
+      const els = [...svg.querySelectorAll(sel)];
+      return els.length > 0 ? (els.at(-1)!.textContent ?? '').trim() : '';
+    };
+    return `${lastTick('g.x-axis text')}|${lastTick('g.y-axis text')}`;
+  });
+
 describe('Inference Replay', () => {
   before(() => {
     cy.window().then((win) => {
@@ -125,6 +147,75 @@ describe('Inference Replay', () => {
     });
   });
 
+  it('renders line labels in the foreground during replay', () => {
+    cy.get('body').then(($body) => {
+      if ($body.find('[data-testid="replay-panel-chart-0"]').length === 0) return;
+      // Enable line labels inside the replay panel (scoped — the parent chart
+      // renders the same control behind the dialog).
+      cy.get('[data-testid="replay-panel-chart-0"]').within(() => {
+        cy.get('[data-testid="scatter-line-labels"]').then(($el) => {
+          if ($el.attr('data-state') !== 'checked') cy.wrap($el).click();
+        });
+      });
+      cy.get('[data-testid="replay-panel-chart-0"] svg g.line-label', { timeout: 6000 }).should(
+        'have.length.greaterThan',
+        0,
+      );
+      // The shared-renderer foreground raise must apply to the replay chart too.
+      cy.get('[data-testid="replay-panel-chart-0"] svg').then(($svg) => {
+        const svg = $svg[0];
+        const dots = svg.querySelectorAll('.dot-group');
+        const labels = svg.querySelectorAll('g.line-label');
+        if (dots.length === 0 || labels.length === 0) return;
+        const lastDot = dots.item(dots.length - 1)!;
+        const firstLabel = labels.item(0)!;
+        expect(
+          lastDot.compareDocumentPosition(firstLabel) & Node.DOCUMENT_POSITION_FOLLOWING,
+          'replay line label follows the scatter points (foreground)',
+        ).to.be.greaterThan(0);
+      });
+    });
+  });
+
+  it('Fixed axes stay constant across frames; toggling off refits per frame', () => {
+    cy.get('body').then(($body) => {
+      if ($body.find('[data-testid="replay-scrubber"]').length === 0) {
+        cy.log('Replay history fixture has < 2 dates; skipping fixed-axes check');
+        return;
+      }
+      // Fixed axes is the default — the extent is the whole-run box, so the first
+      // and last frame share the same axes (this is the feature's core invariant,
+      // independent of which axis the frontier grows along).
+      cy.get('[data-testid="replay-fixed-axes"]').should('have.attr', 'data-state', 'checked');
+      setReplayScrubber(0);
+      cy.wait(300);
+      replayAxisExtent().then((fixedAtStart) => {
+        setReplayScrubber(1_000_000); // clamps to the scrubber max → last frame
+        cy.wait(300);
+        replayAxisExtent().then((fixedAtEnd) => {
+          expect(fixedAtEnd, 'fixed axes are identical at the first and last frame').to.equal(
+            fixedAtStart,
+          );
+
+          // Turn fixed axes off → the first frame refits to just that frame's
+          // (smaller) frontier, so the extent differs from the whole-run box in
+          // at least one axis (compared as an x|y pair, not y alone).
+          cy.get('[data-testid="replay-fixed-axes"]').click();
+          setReplayScrubber(0);
+          cy.wait(300);
+          replayAxisExtent().then((dynamicAtStart) => {
+            expect(
+              dynamicAtStart,
+              'per-frame axes at the first frame differ from the whole-run fixed extent',
+            ).not.to.equal(fixedAtStart);
+          });
+          // Restore the default.
+          cy.get('[data-testid="replay-fixed-axes"]').click();
+        });
+      });
+    });
+  });
+
   it('closes the modal', () => {
     cy.get('body').then(($body) => {
       if ($body.find('[data-testid="replay-panel-chart-0"]').length === 0) return;

packages/app/cypress/e2e/line-labels.cy.ts

@@ -39,6 +39,75 @@ describe('Line Labels Toggle', () => {
     );
   });
 
+  it('line labels render in the foreground, after the scatter points', () => {
+    // Labels were toggled on in the test above and remain on here.
+    cy.get('[data-testid="scatter-graph"] svg g.line-label').should('have.length.greaterThan', 0);
+
+    cy.get('[data-testid="scatter-graph"] svg').then(($svg) => {
+      const svg = $svg[0];
+      const dots = svg.querySelectorAll('.dot-group');
+      const labels = svg.querySelectorAll('g.line-label');
+      expect(dots.length, 'scatter dot groups exist').to.be.greaterThan(0);
+      expect(labels.length, 'line labels exist').to.be.greaterThan(0);
+
+      // Every label must paint after every dot group. Comparing the *last* dot
+      // group against the *first* label is sufficient: if the earliest label
+      // follows the latest dot in document order, all labels are in front.
+      const lastDot = dots.item(dots.length - 1)!;
+      const firstLabel = labels.item(0)!;
+      const relation = lastDot.compareDocumentPosition(firstLabel);
+      expect(
+        relation & Node.DOCUMENT_POSITION_FOLLOWING,
+        'line label follows the scatter points in DOM order (foreground)',
+      ).to.be.greaterThan(0);
+    });
+  });
+
+  it('line labels stay in the foreground after zooming', () => {
+    // Regression guard: the foreground raise must run on every render (in the
+    // shared renderer), not rely on a zoom-transform replay re-firing onZoom.
+    // Ensure labels are on (a previous test may have left them on).
+    cy.get('#scatter-line-labels').then(($el) => {
+      if ($el.attr('data-state') !== 'checked') cy.wrap($el).click();
+    });
+    cy.get('[data-testid="scatter-graph"] svg g.line-label').should('have.length.greaterThan', 0);
+
+    // The chart requires Shift for wheel zoom (so bare scroll doesn't hijack
+    // the page). Dispatch a few shift+wheel events over the plot to zoom in.
+    cy.get('[data-testid="scatter-graph"] svg').then(($svg) => {
+      const svg = $svg[0];
+      const r = svg.getBoundingClientRect();
+      for (let i = 0; i < 3; i++) {
+        svg.dispatchEvent(
+          new WheelEvent('wheel', {
+            deltaY: -240,
+            clientX: r.x + r.width / 2,
+            clientY: r.y + 150,
+            shiftKey: true,
+            bubbles: true,
+            cancelable: true,
+          }),
+        );
+      }
+    });
+    cy.wait(300);
+
+    cy.get('[data-testid="scatter-graph"] svg').then(($svg) => {
+      const svg = $svg[0];
+      const dots = svg.querySelectorAll('.dot-group');
+      const labels = svg.querySelectorAll('g.line-label');
+      expect(labels.length, 'line labels still exist after zoom').to.be.greaterThan(0);
+      const lastDot = dots.item(dots.length - 1)!;
+      const firstLabel = labels.item(0)!;
+      expect(
+        lastDot.compareDocumentPosition(firstLabel) & Node.DOCUMENT_POSITION_FOLLOWING,
+        'line label still follows the scatter points after zoom (foreground)',
+      ).to.be.greaterThan(0);
+    });
+    // No zoom reset needed: the next test toggles labels off (zoom-agnostic) and
+    // the later tests re-visit the page fresh.
+  });
+
   it('toggling Line Labels off removes label elements', () => {
     cy.get('#scatter-line-labels').click();
     cy.get('#scatter-line-labels').should('have.attr', 'data-state', 'unchecked');

packages/app/src/components/inference/replay/ReplayPanel.tsx

@@ -10,6 +10,8 @@ import { useInference } from '@/components/inference/InferenceContext';
 import ScatterGraph from '@/components/inference/ui/ScatterGraph';
 import type { ChartDefinition } from '@/components/inference/types';
 import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import {
   Select,
   SelectContent,
@@ -21,7 +23,7 @@ import { useBenchmarkHistory } from '@/hooks/api/use-benchmark-history';
 import { track } from '@/lib/analytics';
 import { cn } from '@/lib/utils';
 
-import { buildReplayTimeline } from './buildReplayTimeline';
+import { buildReplayTimeline, computeFullRunDomain } from './buildReplayTimeline';
 import type { Mp4ExportError, Mp4ExportStage } from './exportMp4';
 import { buildFrameData, dateAtFraction, shouldCommitFraction, spanMs } from './replayFrameData';
 import { useReducedMotion } from './useReducedMotion';
@@ -63,7 +65,7 @@ export default function ReplayPanel({
   xLabel,
 }: ReplayPanelProps) {
   const inference = useInference();
-  const { selectedModel, selectedSequence } = inference;
+  const { selectedModel, selectedSequence, activeHwTypes } = inference;
 
   const { isl = 0, osl = 0 } = sequenceToIslOsl(selectedSequence) ?? {};
   const history = useBenchmarkHistory(selectedModel, isl, osl);
@@ -90,6 +92,15 @@ export default function ReplayPanel({
     inference.selectedPrecisions,
   ]);
 
+  // Fixed axes for the whole run: take the extent across every step (not just
+  // the current frame) for the active hardware, so the axes stay put and the
+  // frontier visibly expands toward them over time instead of the chart
+  // refitting each frame. Recomputed when the legend's hw filter changes.
+  const fixedExtent = useMemo(
+    () => (timeline ? computeFullRunDomain(timeline, (hw) => activeHwTypes.has(hw)) : null),
+    [timeline, activeHwTypes],
+  );
+
   // Track the SVG's position inside our relative wrapper so the date overlay
   // can anchor its bottom-right to the chart plot's top-right (the wrapper
   // also contains the legend, so we can't anchor to the wrapper edge).
@@ -161,6 +172,10 @@ export default function ReplayPanel({
   const [fraction, setFraction] = useState(0);
   const [playing, setPlaying] = useState(false);
   const [speed, setSpeed] = useState(1);
+  // Fixed axes (default) freeze the coordinate space to the whole run so the
+  // frontier visibly expands over time; turning this off lets the axes refit to
+  // each frame's points.
+  const [fixedAxes, setFixedAxes] = useState(true);
   const [isExporting, setIsExporting] = useState(false);
   const [exportProgress, setExportProgress] = useState<number | null>(null);
   const [exportError, setExportError] = useState<string | null>(null);
@@ -496,6 +511,9 @@ export default function ReplayPanel({
           chartDefinition={chartDefinition}
           transitionDuration={0}
           niceAxes={false}
+          pinLineLabels
+          xExtentOverride={fixedAxes ? fixedExtent?.x : undefined}
+          yExtentOverride={fixedAxes ? fixedExtent?.y : undefined}
         />
         <div
           className="absolute -translate-y-full pointer-events-none text-2xl font-bold tabular-nums opacity-85 leading-none pb-1"
@@ -564,6 +582,24 @@ export default function ReplayPanel({
             ))}
           </SelectContent>
         </Select>
+        <div className="flex items-center gap-2">
+          <Switch
+            id="replay-fixed-axes"
+            data-testid="replay-fixed-axes"
+            checked={fixedAxes}
+            onCheckedChange={(checked) => {
+              setFixedAxes(checked);
+              track('inference_replay_fixed_axes_toggled', { enabled: checked });
+            }}
+          />
+          <Label
+            htmlFor="replay-fixed-axes"
+            className="text-xs text-muted-foreground hover:text-foreground cursor-pointer whitespace-nowrap"
+            title="Keep the axes fixed across the whole run so you can see the frontier improve over time, or let them refit to each frame."
+          >
+            Fixed axes
+          </Label>
+        </div>
         <Button
           size="sm"
           variant="default"

packages/app/src/components/inference/replay/__tests__/buildReplayTimeline.test.ts

@@ -3,7 +3,11 @@ import { describe, expect, it } from 'vitest';
 import type { BenchmarkRow } from '@/lib/api';
 import type { ChartDefinition } from '@/components/inference/types';
 
-import { buildReplayTimeline, computeStepDomain } from '../buildReplayTimeline';
+import {
+  buildReplayTimeline,
+  computeFullRunDomain,
+  computeStepDomain,
+} from '../buildReplayTimeline';
 
 const ALL_HW = () => true;
 
@@ -153,6 +157,51 @@ describe('buildReplayTimeline', () => {
     expect(mi355xOnly.x[1]).toBeLessThan(50); // padded around 5
   });
 
+  it('computeFullRunDomain spans every step, not just one frame', () => {
+    const rows = [
+      baseRow({ date: '2025-01-01', metrics: { tput_per_gpu: 100, median_intvty: 10 }, conc: 8 }),
+      baseRow({ date: '2025-02-01', metrics: { tput_per_gpu: 200, median_intvty: 20 }, conc: 8 }),
+      baseRow({
+        date: '2025-02-01',
+        metrics: { tput_per_gpu: 5000, median_intvty: 200 },
+        conc: 16,
+      }),
+    ];
+    const t = buildReplayTimeline(rows, interactivityChartDef, 'y_tpPerGpu', null, ['fp4']);
+    const full = computeFullRunDomain(t, ALL_HW);
+    // The fixed extent reaches the run's largest observation (step 1's conc=16
+    // config) even though it isn't present at step 0 — that's what keeps the
+    // axes constant while the early frontier sits small in the corner.
+    expect(full.x[1]).toBeGreaterThanOrEqual(200);
+    expect(full.y[1]).toBeGreaterThanOrEqual(5000);
+    // And it never undershoots the per-step boxes.
+    const d0 = computeStepDomain(t, 0, ALL_HW);
+    expect(full.x[1]).toBeGreaterThanOrEqual(d0.x[1]);
+    expect(full.y[1]).toBeGreaterThanOrEqual(d0.y[1]);
+  });
+
+  it('computeFullRunDomain respects the hw filter', () => {
+    const rows = [
+      baseRow({
+        hardware: 'mi355x',
+        framework: 'sglang',
+        date: '2025-01-01',
+        metrics: { tput_per_gpu: 50, median_intvty: 5 },
+      }),
+      baseRow({
+        hardware: 'b200',
+        framework: 'trt',
+        date: '2025-02-01',
+        metrics: { tput_per_gpu: 5000, median_intvty: 400 },
+      }),
+    ];
+    const t = buildReplayTimeline(rows, interactivityChartDef, 'y_tpPerGpu', null, ['fp4']);
+    const everything = computeFullRunDomain(t, ALL_HW);
+    const mi355xOnly = computeFullRunDomain(t, (hw) => hw.startsWith('mi355x'));
+    expect(everything.x[1]).toBeGreaterThanOrEqual(400);
+    expect(mi355xOnly.x[1]).toBeLessThan(50); // padded around 5, ignores b200
+  });
+
   it('separates configs that differ in concurrency or tp', () => {
     const rows = [
       baseRow({ conc: 32 }),

packages/app/src/components/inference/replay/buildReplayTimeline.ts

@@ -56,6 +56,31 @@ export function computeStepDomain(
   return { x: safeDomain(xMin, xMax), y: safeDomain(yMin, yMax) };
 }
 
+// Bounding box across ALL steps for configs passing `hwFilter`. Unlike
+// computeStepDomain (one step), this is the fixed extent used for the entire
+// replay so the axes stay constant and the frontier visibly marches toward them
+// over time instead of the axes refitting to each frame.
+export function computeFullRunDomain(
+  timeline: ReplayTimeline,
+  hwFilter: (hwKey: string) => boolean,
+): StepDomain {
+  let xMin = Infinity;
+  let xMax = -Infinity;
+  let yMin = Infinity;
+  let yMax = -Infinity;
+  for (const c of timeline.configs) {
+    if (!hwFilter(c.hwKey)) continue;
+    for (const v of c.stepValues) {
+      if (!v.visible) continue;
+      if (v.x < xMin) xMin = v.x;
+      if (v.x > xMax) xMax = v.x;
+      if (v.y < yMin) yMin = v.y;
+      if (v.y > yMax) yMax = v.y;
+    }
+  }
+  return { x: safeDomain(xMin, xMax), y: safeDomain(yMin, yMax) };
+}
+
 const buildPointConfigId = (point: InferenceData): string => {
   let key = `${point.hwKey}|${point.precision}|${point.tp}|${point.conc}|${point.decode_ep ?? 0}|${point.prefill_tp ?? 0}|${point.prefill_ep ?? 0}`;
   if (point.disagg) key += `|disagg|${point.num_prefill_gpu ?? 0}|${point.num_decode_gpu ?? 0}`;

packages/app/src/components/inference/types.ts

@@ -481,6 +481,24 @@ export interface ScatterGraphProps {
    * playback).
    */
   niceAxes?: boolean;
+  /**
+   * Pin each line label to a stable anchor along its roofline so it tracks the
+   * line smoothly instead of re-running the per-frame greedy placement (which
+   * makes labels teleport between candidate positions as the lines animate).
+   * Defaults to false. The replay panel passes true so labels keep a positional
+   * "affinity" across frames. Trades the static chart's per-frame de-overlap for
+   * positional stability — appropriate while the chart is animating.
+   */
+  pinLineLabels?: boolean;
+  /**
+   * Fixed x/y data extents `[min, max]` to base the axes on, instead of fitting
+   * to the currently rendered points. The normal domain padding (and log /
+   * zero-baseline handling) is still applied on top. Replay passes the whole
+   * run's extent so the axes stay constant across the animation and you can see
+   * the frontier expand toward them over time.
+   */
+  xExtentOverride?: [number, number];
+  yExtentOverride?: [number, number];
   /**
    * Stable run numbering (entry string `date~rRunId` → 1-based number) shared with
    * the comparison changelog so legend labels match it exactly. Numbers index ALL