insomni-plot 0.1.0-alpha.0

package/src/grammar/interactions/series-readout.test.ts

@@ -0,0 +1,668 @@
+import {
+  createFrame,
+  createInvalidator,
+  rgba,
+  type Color,
+  type Frame,
+  type InteractionManager,
+  type InteractionNode,
+  type InteractionNodeSpec,
+  type PointerInfo,
+} from "insomni";
+import { describe, expect, test } from "vite-plus/test";
+
+import type { CompiledHitTest, ScaleBundle } from "../geoms/types.ts";
+import { themeDefault } from "../theme.ts";
+import type { GrammarHitLayer, HitEventContext, HitLayerSubscriber } from "./hit-layer.ts";
+import { createSeriesReadout, __test__ } from "./series-readout.ts";
+
+const { collectLayerGroups, resolveGroupKey, overrideGroupPick, snapshotEqual } = __test__;
+
+interface Row {
+  t: number;
+  v: number;
+  series?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Fake manager — records added nodes, returns handles whose destroy() flips a
+// flag so tests can assert teardown. Only the surface used by the readout
+// (add / onChange / destroy) is implemented.
+// ---------------------------------------------------------------------------
+
+interface CapturedNode {
+  spec: InteractionNodeSpec;
+  destroyed: boolean;
+}
+
+function fakeManager(): { manager: InteractionManager; nodes: CapturedNode[] } {
+  const nodes: CapturedNode[] = [];
+  const manager = {
+    element: {} as HTMLElement,
+    add(spec: InteractionNodeSpec): InteractionNode {
+      const captured: CapturedNode = { spec, destroyed: false };
+      nodes.push(captured);
+      return {
+        id: Symbol("node"),
+        update(patch) {
+          captured.spec = { ...captured.spec, ...patch };
+        },
+        destroy() {
+          captured.destroyed = true;
+        },
+      };
+    },
+    addPointCloud() {
+      throw new Error("not used");
+    },
+    onBackgroundTap() {
+      return () => {};
+    },
+    onContextMenuRequest() {
+      return () => {};
+    },
+    onDoubleTap() {
+      return () => {};
+    },
+    onChange() {
+      return () => {};
+    },
+    destroy() {},
+  } as unknown as InteractionManager;
+  return { manager, nodes };
+}
+
+const noMods = { shift: false, ctrl: false, meta: false, alt: false };
+function pointer(x: number, y: number): PointerInfo {
+  return {
+    pointerId: 1,
+    type: "mouse",
+    x,
+    y,
+    localX: x,
+    localY: y,
+    buttons: 0,
+    mods: noMods,
+    stopPropagation: () => {},
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Hit-test fixture builders
+// ---------------------------------------------------------------------------
+
+function singleSeriesHit(data: readonly Row[], xs: number[], label?: string): CompiledHitTest<Row> {
+  const positions = new Float32Array(xs.length * 2);
+  for (let i = 0; i < xs.length; i++) {
+    positions[i * 2] = xs[i]!;
+    positions[i * 2 + 1] = 50;
+  }
+  return {
+    geomKind: "line",
+    label,
+    positions,
+    dataIndex: Int32Array.from(xs.map((_, i) => i)),
+    pickRadius: 5,
+    channels: {
+      x: { kind: "column", column: "t", fn: (d) => d.t },
+      y: { kind: "column", column: "v", fn: (d) => d.v },
+    },
+    data,
+  };
+}
+
+function multiSeriesHit(data: readonly Row[]): CompiledHitTest<Row> {
+  const positions = new Float32Array(data.length * 2);
+  for (let i = 0; i < data.length; i++) {
+    positions[i * 2] = data[i]!.t;
+    positions[i * 2 + 1] = 50;
+  }
+  return {
+    geomKind: "line",
+    positions,
+    dataIndex: Int32Array.from(data.map((_, i) => i)),
+    pickRadius: 5,
+    channels: {
+      x: { kind: "column", column: "t", fn: (d) => d.t },
+      y: { kind: "column", column: "v", fn: (d) => d.v },
+      color: { kind: "accessor", fn: (d) => d.series ?? "default" },
+    },
+    data,
+  };
+}
+
+const plotFrame: Frame = createFrame({ x: 0, y: 0, width: 200, height: 100 });
+
+function bareDeps(manager: InteractionManager, scales: ScaleBundle | null = null) {
+  return {
+    manager,
+    bounds: () => plotFrame,
+    scales: () => scales,
+    theme: () => themeDefault,
+    invalidator: createInvalidator(),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// collectLayerGroups — pure snap logic, no manager / DOM
+// ---------------------------------------------------------------------------
+
+describe("collectLayerGroups (nearest-x)", () => {
+  test("single-series layer collapses to one group", () => {
+    const data: Row[] = [
+      { t: 10, v: 1 },
+      { t: 20, v: 2 },
+      { t: 30, v: 3 },
+    ];
+    const hit = singleSeriesHit(data, [10, 20, 30], "weight");
+    const out: Parameters<typeof __test__.collectLayerGroups>[4] = [];
+    collectLayerGroups(hit, 0, 22, "nearest-x", out);
+    expect(out).toHaveLength(1);
+    expect(out[0]!.label).toBe("weight");
+    expect(out[0]!.index).toBe(1); // closest to x=22 is positions[2]=20
+    expect(out[0]!.yValue).toBe(2);
+  });
+
+  test("multi-series layer groups by color accessor and snaps within each", () => {
+    const data: Row[] = [
+      { t: 10, v: 1, series: "a" },
+      { t: 10, v: 5, series: "b" },
+      { t: 20, v: 2, series: "a" },
+      { t: 20, v: 6, series: "b" },
+      { t: 30, v: 3, series: "a" },
+      { t: 30, v: 7, series: "b" },
+    ];
+    const hit = multiSeriesHit(data);
+    const out: Parameters<typeof __test__.collectLayerGroups>[4] = [];
+    collectLayerGroups(hit, 0, 21, "nearest-x", out);
+    expect(out).toHaveLength(2);
+    const byLabel = new Map(out.map((g) => [g.label, g]));
+    expect(byLabel.get("a")!.yValue).toBe(2);
+    expect(byLabel.get("b")!.yValue).toBe(6);
+  });
+
+  test("hover mode requires cursor inside pickRadius", () => {
+    const data: Row[] = [
+      { t: 10, v: 1 },
+      { t: 50, v: 2 },
+    ];
+    const hit = singleSeriesHit(data, [10, 50]);
+    // cursor at 30, pickRadius 5 → both hits are too far (distances 20 / 20).
+    const out1: Parameters<typeof __test__.collectLayerGroups>[4] = [];
+    collectLayerGroups(hit, 0, 30, "hover", out1);
+    expect(out1).toHaveLength(0);
+    // cursor at 12 → first hit within radius (distance 2).
+    const out2: Parameters<typeof __test__.collectLayerGroups>[4] = [];
+    collectLayerGroups(hit, 0, 12, "hover", out2);
+    expect(out2).toHaveLength(1);
+    expect(out2[0]!.yValue).toBe(1);
+  });
+
+  test("layers without x/y channel are skipped", () => {
+    const hit: CompiledHitTest<Row> = {
+      geomKind: "rule",
+      positions: Float32Array.from([10, 50]),
+      dataIndex: Int32Array.from([0]),
+      pickRadius: 5,
+      channels: {},
+      data: [{ t: 10, v: 1 }],
+    };
+    const out: Parameters<typeof __test__.collectLayerGroups>[4] = [];
+    collectLayerGroups(hit, 0, 10, "nearest-x", out);
+    expect(out).toHaveLength(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// snapshotEqual — value compare so renderer doesn't churn
+// ---------------------------------------------------------------------------
+
+describe("snapshotEqual", () => {
+  test("identical row sequences compare equal", () => {
+    const a = {
+      x: "2026-01-01",
+      xValue: 1,
+      rows: [{ label: "weight", value: "80", active: true, color: rgba(1, 0, 0, 1) }],
+    };
+    const b = {
+      x: "2026-01-01",
+      xValue: 999, // intentionally different — xValue isn't part of equality
+      rows: [{ label: "weight", value: "80", active: true, color: rgba(1, 0, 0, 1) }],
+    };
+    expect(snapshotEqual(a, b)).toBe(true);
+  });
+
+  test("differing row count compares unequal", () => {
+    const a = { x: "1", xValue: 1, rows: [{ label: "a", value: "1", active: true }] };
+    const b = {
+      x: "1",
+      xValue: 1,
+      rows: [
+        { label: "a", value: "1", active: true },
+        { label: "b", value: "2", active: false },
+      ],
+    };
+    expect(snapshotEqual(a, b)).toBe(false);
+  });
+
+  test("null vs snapshot compares unequal", () => {
+    const a = { x: "1", xValue: 1, rows: [{ label: "a", value: "1", active: true }] };
+    expect(snapshotEqual(null, a)).toBe(false);
+    expect(snapshotEqual(a, null)).toBe(false);
+    expect(snapshotEqual(null, null)).toBe(true);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// End-to-end (headless) — pointer node + syncHits drive snapshots
+// ---------------------------------------------------------------------------
+
+describe("createSeriesReadout (headless)", () => {
+  test("pointer-move emits snapshot with one row per series", () => {
+    const { manager, nodes } = fakeManager();
+    const readout = createSeriesReadout(bareDeps(manager), {});
+    const data: Row[] = [
+      { t: 10, v: 1, series: "a" },
+      { t: 10, v: 5, series: "b" },
+      { t: 30, v: 3, series: "a" },
+      { t: 30, v: 7, series: "b" },
+    ];
+    readout.syncHits([multiSeriesHit(data)]);
+
+    // The pointer node is the only `add` call.
+    expect(nodes).toHaveLength(1);
+    const spec = nodes[0]!.spec;
+    spec.onHoverEnter?.(pointer(12, 50));
+
+    const snap = readout.peek()!;
+    expect(snap.rows).toHaveLength(2);
+    const byLabel = new Map(snap.rows.map((r) => [r.label, r]));
+    expect(byLabel.get("a")!.value).toBe("1"); // nearest x is 10 (dist 2)
+    expect(byLabel.get("b")!.value).toBe("5");
+    // The "active" flag goes to the closest row — but in this case both series
+    // have a hit at x=10 (dist 2), so the first one wins by iteration order.
+    const active = snap.rows.filter((r) => r.active);
+    expect(active).toHaveLength(1);
+  });
+
+  test("subscribe fires current snapshot + subsequent updates", () => {
+    const { manager, nodes } = fakeManager();
+    const readout = createSeriesReadout(bareDeps(manager), {});
+    const data: Row[] = [{ t: 10, v: 1 }];
+    readout.syncHits([singleSeriesHit(data, [10], "weight")]);
+
+    const events: (string | null)[] = [];
+    readout.subscribe((snap) => events.push(snap === null ? null : snap.x));
+    // Initial null fires.
+    expect(events).toEqual([null]);
+
+    const spec = nodes[0]!.spec;
+    spec.onHoverEnter?.(pointer(10, 50));
+    expect(events.length).toBeGreaterThanOrEqual(2);
+    expect(events.at(-1)).not.toBeNull();
+
+    spec.onHoverLeave?.(pointer(-1, -1));
+    expect(events.at(-1)).toBeNull();
+  });
+
+  test("custom format hooks apply to title + values", () => {
+    const { manager, nodes } = fakeManager();
+    const readout = createSeriesReadout(bareDeps(manager), {
+      format: {
+        x: (v) => `t=${String(v)}`,
+        y: (v) => `${String(v)} kg`,
+      },
+    });
+    readout.syncHits([singleSeriesHit([{ t: 5, v: 99 }], [5], "weight")]);
+    nodes[0]!.spec.onHoverEnter?.(pointer(5, 50));
+    const snap = readout.peek()!;
+    expect(snap.x).toBe("t=5");
+    expect(snap.rows[0]!.value).toBe("99 kg");
+  });
+
+  test("color resolves through the color scale for multi-series layers", () => {
+    const colorMap = new Map<unknown, Color>([
+      ["a", rgba(1, 0, 0, 1)],
+      ["b", rgba(0, 1, 0, 1)],
+    ]);
+    // Only `color` is read by the readout, so we leave x/y stubbed via cast.
+    const scales = {
+      color: {
+        kind: "color",
+        type: "categorical",
+        dataType: "string",
+        fn: (v: unknown) => colorMap.get(v) ?? rgba(0, 0, 0, 1),
+        domain: ["a", "b"],
+      },
+    } as unknown as ScaleBundle;
+    const { manager, nodes } = fakeManager();
+    const readout = createSeriesReadout(bareDeps(manager, scales), {});
+    const data: Row[] = [
+      { t: 10, v: 1, series: "a" },
+      { t: 10, v: 5, series: "b" },
+    ];
+    readout.syncHits([multiSeriesHit(data)]);
+    nodes[0]!.spec.onHoverEnter?.(pointer(10, 50));
+    const snap = readout.peek()!;
+    const byLabel = new Map(snap.rows.map((r) => [r.label, r]));
+    expect(byLabel.get("a")!.color).toEqual(rgba(1, 0, 0, 1));
+    expect(byLabel.get("b")!.color).toEqual(rgba(0, 1, 0, 1));
+  });
+
+  test("dispose tears down the pointer node and silences subscribers", () => {
+    const { manager, nodes } = fakeManager();
+    const readout = createSeriesReadout(bareDeps(manager), {});
+    let fired = 0;
+    readout.subscribe(() => fired++);
+    fired = 0; // reset after the initial-state emit
+    readout.dispose();
+    expect(nodes[0]!.destroyed).toBe(true);
+    // Post-dispose, syncHits + pointer events shouldn't fan out.
+    readout.syncHits([singleSeriesHit([{ t: 1, v: 1 }], [1])]);
+    nodes[0]!.spec.onHoverEnter?.(pointer(1, 50));
+    expect(fired).toBe(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// resolveGroupKey / overrideGroupPick — helpers used by hit-layer sync
+// ---------------------------------------------------------------------------
+
+describe("resolveGroupKey", () => {
+  test("returns seriesKey when the compiled hit publishes one", () => {
+    const data: Row[] = [{ t: 10, v: 1 }];
+    const hit: CompiledHitTest<Row> = {
+      geomKind: "bar",
+      positions: Float32Array.from([10, 50]),
+      dataIndex: Int32Array.from([0]),
+      seriesKey: ["alpha"],
+      pickRadius: 5,
+      channels: {
+        x: { kind: "column", column: "t", fn: (d) => d.t },
+        y: { kind: "column", column: "v", fn: (d) => d.v },
+      },
+      data,
+    };
+    expect(resolveGroupKey(hit, 0)).toEqual({ key: "alpha", label: "alpha", raw: "alpha" });
+  });
+
+  test("falls back to color accessor when no seriesKey is published", () => {
+    const data: Row[] = [{ t: 10, v: 1, series: "b" }];
+    const hit = multiSeriesHit(data);
+    expect(resolveGroupKey(hit, 0)).toEqual({ key: "b", label: "b", raw: "b" });
+  });
+
+  test("uses the layer label as the default key when there is no series channel", () => {
+    const hit = singleSeriesHit([{ t: 10, v: 1 }], [10], "weight");
+    expect(resolveGroupKey(hit, 0)).toEqual({
+      key: "__default__",
+      label: "weight",
+      raw: undefined,
+    });
+  });
+
+  test("returns null when x or y channels are missing", () => {
+    const hit: CompiledHitTest<Row> = {
+      geomKind: "rule",
+      positions: Float32Array.from([10, 50]),
+      dataIndex: Int32Array.from([0]),
+      pickRadius: 5,
+      channels: {},
+      data: [{ t: 10, v: 1 }],
+    };
+    expect(resolveGroupKey(hit, 0)).toBeNull();
+  });
+});
+
+describe("overrideGroupPick", () => {
+  test("rewrites the targeted group's index/xValue/yValue and zeroes its distance", () => {
+    const data: Row[] = [
+      { t: 10, v: 1 },
+      { t: 20, v: 2 },
+      { t: 30, v: 3 },
+    ];
+    const hit = singleSeriesHit(data, [10, 20, 30], "weight");
+    const out: Parameters<typeof __test__.collectLayerGroups>[4] = [];
+    // Pretend the user is at x=18 — nearest-x picks index 1 (t=20).
+    collectLayerGroups(hit, 0, 18, "nearest-x", out);
+    expect(out[0]!.index).toBe(1);
+    // Dispatch override to the third hit (t=30, v=3).
+    overrideGroupPick(out, "0::__default__", hit, 2);
+    expect(out[0]!.index).toBe(2);
+    expect(out[0]!.xValue).toBe(30);
+    expect(out[0]!.yValue).toBe(3);
+    expect(out[0]!.dist).toBe(0);
+  });
+
+  test("no-op when the group id is not in the collected set", () => {
+    const data: Row[] = [{ t: 10, v: 1 }];
+    const hit = singleSeriesHit(data, [10], "weight");
+    const out: Parameters<typeof __test__.collectLayerGroups>[4] = [];
+    collectLayerGroups(hit, 0, 10, "nearest-x", out);
+    const before = { ...out[0]! };
+    overrideGroupPick(out, "9::nope", hit, 0);
+    expect(out[0]!.index).toBe(before.index);
+    expect(out[0]!.xValue).toBe(before.xValue);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Hit-layer sync — active dispatch drives active row + title xValue
+// ---------------------------------------------------------------------------
+
+function fakeHitLayer(): {
+  hitLayer: GrammarHitLayer;
+  dispatch: {
+    enter(layerIdx: number, ctx: HitEventContext): void;
+    leave(ctx: HitEventContext): void;
+  };
+} {
+  const subs = new Set<HitLayerSubscriber>();
+  const stateSubs = new Set<(s: import("./hit-layer.ts").HitLayerState) => void>();
+  let active: import("./hit-layer.ts").HitLayerActive | null = null;
+  const hitLayer: GrammarHitLayer = {
+    sync() {},
+    subscribe(sub) {
+      subs.add(sub);
+      return () => subs.delete(sub);
+    },
+    pickAt() {
+      return null;
+    },
+    state() {
+      return { active };
+    },
+    subscribeState(fn) {
+      stateSubs.add(fn);
+      return () => stateSubs.delete(fn);
+    },
+    dispose() {
+      subs.clear();
+      stateSubs.clear();
+    },
+  };
+  const fireState = () => {
+    const s = { active };
+    for (const fn of stateSubs) fn(s);
+  };
+  return {
+    hitLayer,
+    dispatch: {
+      enter(layerIdx, ctx) {
+        active = {
+          layerIdx,
+          hitIndex: ctx.hitIndex,
+          compiled: ctx.compiled,
+          hit: ctx.hit,
+        };
+        for (const s of subs) s.onHoverEnter?.(ctx);
+        fireState();
+      },
+      leave(ctx) {
+        active = null;
+        for (const s of subs) s.onHoverLeave?.(ctx);
+        fireState();
+      },
+    },
+  };
+}
+
+function hitContext<T>(
+  compiled: CompiledHitTest<T>,
+  hitIndex: number,
+  pointerX: number,
+): HitEventContext {
+  const px = compiled.positions[hitIndex * 2]!;
+  const py = compiled.positions[hitIndex * 2 + 1]!;
+  return {
+    hit: {
+      geomKind: compiled.geomKind,
+      dataIndex: compiled.dataIndex[hitIndex] ?? hitIndex,
+      seriesKey: compiled.seriesKey?.[hitIndex],
+      data: compiled.data,
+      x: px,
+      y: py,
+    },
+    compiled: compiled as CompiledHitTest<unknown>,
+    hitIndex,
+    pointer: pointer(pointerX, py),
+  };
+}
+
+describe("createSeriesReadout (hit-layer sync)", () => {
+  test("dispatched hit overrides the matching group and becomes the active row", () => {
+    const { manager } = fakeManager();
+    const { hitLayer, dispatch } = fakeHitLayer();
+    const readout = createSeriesReadout({ ...bareDeps(manager), hitLayer }, {});
+
+    // Two layers: a rolling-style line at x=10/20/30 and a points layer with
+    // two series ("a" / "b") at x=10/20/30. The points layer's z-order would
+    // win in the real hit-layer when the cursor is on a point.
+    const linePoints: Row[] = [
+      { t: 10, v: 4 },
+      { t: 20, v: 5 },
+      { t: 30, v: 6 },
+    ];
+    const lineHit = singleSeriesHit(linePoints, [10, 20, 30], "rolling mean");
+    const pointData: Row[] = [
+      { t: 10, v: 1, series: "a" },
+      { t: 10, v: 5, series: "b" },
+      { t: 20, v: 2, series: "a" },
+      { t: 20, v: 6, series: "b" },
+      { t: 30, v: 3, series: "a" },
+      { t: 30, v: 7, series: "b" },
+    ];
+    const pointHit = multiSeriesHit(pointData);
+    readout.syncHits([lineHit, pointHit]);
+
+    // Dispatch as if the hit-layer just landed on the "b"-series point at
+    // x=20 (pointData index 3, v=6). Cursor x is 19 — slightly off, but
+    // the override snaps the readout to the dispatched datum.
+    dispatch.enter(1, hitContext(pointHit, 3, 19));
+
+    const snap = readout.peek()!;
+    expect(snap.xValue).toBe(20);
+    const byLabel = new Map(snap.rows.map((r) => [r.label, r]));
+    // Active row = the dispatched series.
+    expect(byLabel.get("b")!.active).toBe(true);
+    expect(byLabel.get("b")!.value).toBe("6");
+    // Non-active rows still resolve per-series nearest-x at the dispatched x.
+    expect(byLabel.get("a")!.active).toBe(false);
+    expect(byLabel.get("a")!.value).toBe("2");
+    expect(byLabel.get("rolling mean")!.active).toBe(false);
+    expect(byLabel.get("rolling mean")!.value).toBe("5");
+  });
+
+  test("hit-layer leave restores nearest-x ranking for the active row", () => {
+    const { manager } = fakeManager();
+    const { hitLayer, dispatch } = fakeHitLayer();
+    const readout = createSeriesReadout({ ...bareDeps(manager), hitLayer }, {});
+
+    const lineHit = singleSeriesHit(
+      [
+        { t: 10, v: 4 },
+        { t: 20, v: 5 },
+      ],
+      [10, 20],
+      "rolling mean",
+    );
+    const pointData: Row[] = [
+      { t: 10, v: 1, series: "a" },
+      { t: 20, v: 2, series: "a" },
+    ];
+    const pointHit = multiSeriesHit(pointData);
+    readout.syncHits([lineHit, pointHit]);
+
+    // While hovered, "a" is active.
+    dispatch.enter(1, hitContext(pointHit, 1, 19));
+    expect(readout.peek()!.rows.find((r) => r.active)!.label).toBe("a");
+
+    // After leave, cursorX is the same; with no active hit, nearest-x ranking
+    // takes over. Both rows have the same |dist| (cursor is exactly on x=20
+    // for line, and ~1px from x=20 for points), so the line group — added
+    // first — wins the tie via iteration order.
+    dispatch.leave(hitContext(pointHit, 1, 19));
+    const snap = readout.peek()!;
+    expect(snap.rows.find((r) => r.active)!.label).toBe("rolling mean");
+  });
+
+  test("active row survives a chart re-sync (no stale-compiled fallback)", () => {
+    // This guards the regression where the readout cached the dispatched
+    // `compiled` ref. After a sync that swaps compiled refs (typical of any
+    // pipeline re-run during hover), `indexOf` would return -1 and the
+    // active group silently fell back to nearest-x — which the dense rolling
+    // curve always wins, so the user saw "rolling mean" highlighted even
+    // when the tooltip was on a real point.
+    const { manager } = fakeManager();
+    const { hitLayer, dispatch } = fakeHitLayer();
+    const readout = createSeriesReadout({ ...bareDeps(manager), hitLayer }, {});
+
+    // Same data array, but two different compiled hit objects — mimics the
+    // hit-layer's fast-path `setPoints` updating `slot.hit` in place. The
+    // hit-layer keeps `primary.slot` stable across this swap, so `state()`
+    // returns the NEW compiled even though the readout's `activeHits` is
+    // still on the OLD one for a beat.
+    const pointData: Row[] = [
+      { t: 10, v: 1, series: "a" },
+      { t: 20, v: 2, series: "a" },
+      { t: 10, v: 5, series: "b" },
+      { t: 20, v: 6, series: "b" },
+    ];
+    const oldPointHit = multiSeriesHit(pointData);
+    const oldLineHit = singleSeriesHit(
+      [
+        { t: 10, v: 4 },
+        { t: 20, v: 5 },
+      ],
+      [10, 20],
+      "rolling mean",
+    );
+    readout.syncHits([oldLineHit, oldPointHit]);
+    // Dispatch hits the "b"-series point at x=20.
+    dispatch.enter(1, hitContext(oldPointHit, 3, 20));
+    expect(readout.peek()!.rows.find((r) => r.active)!.label).toBe("b");
+
+    // Simulate a pipeline re-run: new compiled, same data identity, same
+    // layout. The fake hit-layer's `state().active.compiled` now reports
+    // the new compiled because the test updates it through dispatch. To
+    // mimic real behavior (active survives sync), we rewrite `state()` by
+    // re-dispatching enter against the new compiled BEFORE the readout sees
+    // the new hits — the order the real pipeline uses (hitLayer.sync first,
+    // then attached consumers).
+    const newPointHit = multiSeriesHit(pointData);
+    const newLineHit = singleSeriesHit(
+      [
+        { t: 10, v: 4 },
+        { t: 20, v: 5 },
+      ],
+      [10, 20],
+      "rolling mean",
+    );
+    dispatch.enter(1, hitContext(newPointHit, 3, 20));
+    readout.syncHits([newLineHit, newPointHit]);
+
+    // Still locked to "b" after the sync — no stale-compiled fallback to
+    // rolling mean.
+    expect(readout.peek()!.rows.find((r) => r.active)!.label).toBe("b");
+  });
+});