gloomberb 0.10.0 → 0.10.2

package/src/components/chart/composite/composite-chart.test.tsx

@@ -4,6 +4,7 @@ import {
   createElement,
   forwardRef,
   useMemo,
+  useState,
   type ForwardedRef,
   type ReactNode,
 } from "react";
@@ -24,6 +25,10 @@ import {
   type KeyEventLike,
 } from "../../../react/input";
 import { CompositeChart } from "./composite-chart";
+import {
+  resolveCompositeMinimumSpanMs,
+  zoomCompositeViewport,
+} from "./interactions";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 let chartShortcut: ((event: KeyEventLike) => void) | null = null;
@@ -154,6 +159,42 @@ function series(id: string, panelId: string, axis: ResolvedSeries["axis"], unit:
   };
 }
 
+function twoSessionCandles(): ResolvedSeries {
+  const points = [
+    ...Array.from({ length: 7 }, (_, index) => (
+      Date.UTC(2025, 0, 2, 17, index * 30)
+    )),
+    ...Array.from({ length: 8 }, (_, index) => (
+      Date.UTC(2025, 0, 3, 13, 30 + index * 30)
+    )),
+  ].map((timestamp, index) => {
+    const date = new Date(timestamp);
+    const value = 100 + index * 0.1;
+    return {
+      date,
+      observedAt: date,
+      value,
+      open: value,
+      high: value + 1,
+      low: value - 1,
+      close: value,
+      volume: 100,
+    };
+  });
+  return {
+    ...series("price", "main", "left", "USD", []),
+    nativeFrequency: "intraday",
+    dataShape: "ohlc",
+    style: "candles",
+    timeBasis: {
+      kind: "market",
+      timeZone: "America/New_York",
+      cadenceMs: 30 * 60_000,
+    },
+    points,
+  };
+}
+
 describe("CompositeChart", () => {
   test("lays out mixed panels with one shared legend and time axis", async () => {
     testSetup = await testRender(
@@ -180,8 +221,8 @@ describe("CompositeChart", () => {
     expect(frame).toContain("ACME Price");
     expect(frame).toContain("OTHER Revenue");
     expect(frame).toContain("$103");
-    expect(frame.match(/2025-01-01/g)).toHaveLength(1);
-    expect(frame.match(/2025-01-03/g)).toHaveLength(1);
+    expect(frame.match(/Jan 1/g)).toHaveLength(1);
+    expect(frame.match(/Jan 3/g)).toHaveLength(1);
   });
 
   test("keeps legend items compact and anchors an accessory to the right edge", async () => {
@@ -244,6 +285,42 @@ describe("CompositeChart", () => {
     expect(testSetup.captureCharFrame()).toContain("OTHER Revenue");
   });
 
+  test("uses buffered market anchors so closed sessions do not create chart holes", async () => {
+    const candles = twoSessionCandles();
+    const currentSession = {
+      ...candles,
+      points: candles.points.filter((point) => point.date.getUTCDate() === 3),
+    };
+    testSetup = await testRender(
+      <CompositeChart
+        width={72}
+        height={12}
+        series={[candles]}
+        legendSeries={[currentSession]}
+        panels={[{ id: "main" }]}
+        viewport={{
+          start: new Date("2025-01-02T17:00:00.000Z"),
+          end: new Date("2025-01-03T17:00:00.000Z"),
+        }}
+        showLegend={false}
+      />,
+      { width: 74, height: 14 },
+    );
+    await act(async () => testSetup!.renderOnce());
+
+    const bodyColumns = [...new Set(testSetup.captureCharFrame()
+      .split("\n")
+      .flatMap((line) => [...line].flatMap((cell, index) => cell === "█" ? [index] : [])))]
+      .sort((left, right) => left - right);
+    const largestGap = bodyColumns.slice(1).reduce(
+      (largest, column, index) => Math.max(largest, column - bodyColumns[index]!),
+      0,
+    );
+
+    expect(bodyColumns.length).toBeGreaterThan(10);
+    expect(largestGap).toBeLessThan(10);
+  });
+
   test("shows an explicit legend toggle action on hover", async () => {
     const toggled: string[] = [];
     testSetup = await testRender(
@@ -443,6 +520,7 @@ describe("CompositeChart", () => {
 
   test("zooms with plus and resets the interaction viewport with zero", async () => {
     const viewportChanges: Array<{ start: string; end: string } | null> = [];
+    const viewportInteractions: string[] = [];
     testSetup = await testRender(
       <InputHostProvider host={chartInputHost}>
         <CompositeChart
@@ -455,20 +533,20 @@ describe("CompositeChart", () => {
             start: new Date("2025-01-01T00:00:00.000Z"),
             end: new Date("2025-01-09T00:00:00.000Z"),
           }}
-          onViewportChange={(next) => viewportChanges.push(next
-            ? { start: next.start.toISOString(), end: next.end.toISOString() }
-            : null)}
+          onViewportChange={(next, interaction) => {
+            viewportInteractions.push(interaction);
+            viewportChanges.push(next
+              ? { start: next.start.toISOString(), end: next.end.toISOString() }
+              : null);
+          }}
         />
       </InputHostProvider>,
       { width: 62, height: 14 },
     );
 
     await act(async () => testSetup!.renderOnce());
-    expect(testSetup.captureCharFrame()).toContain("2025-01-01");
-    expect(viewportChanges).toEqual([{
-      start: "2025-01-01T00:00:00.000Z",
-      end: "2025-01-09T00:00:00.000Z",
-    }]);
+    expect(testSetup.captureCharFrame()).toContain("Jan 1");
+    expect(viewportChanges).toEqual([]);
 
     const zoomIn = keyEvent("=");
     zoomIn.sequence = "+";
@@ -477,16 +555,322 @@ describe("CompositeChart", () => {
     await act(async () => testSetup!.renderOnce());
 
     expect(zoomIn.defaultPrevented).toBe(true);
-    expect(testSetup.captureCharFrame()).not.toContain("2025-01-01");
+    expect(testSetup.captureCharFrame()).not.toContain("Jan 1");
     expect(viewportChanges.at(-1)?.start).not.toBe("2025-01-01T00:00:00.000Z");
+    expect(viewportInteractions.at(-1)).toBe("zoom");
 
     await act(async () => chartShortcut?.(keyEvent("0")));
     await act(async () => testSetup!.renderOnce());
-    expect(testSetup.captureCharFrame()).toContain("2025-01-01");
-    expect(viewportChanges.at(-1)).toEqual({
+    expect(testSetup.captureCharFrame()).toContain("Jan 1");
+    expect(viewportChanges.at(-1)).toBeNull();
+    expect(viewportInteractions.at(-1)).toBe("reset");
+  });
+
+  test("clears the interaction when zoom returns to the authored viewport", async () => {
+    const viewportChanges: Array<{ start: string; end: string } | null> = [];
+    testSetup = await testRender(
+      <InputHostProvider host={chartInputHost}>
+        <CompositeChart
+          width={60}
+          height={12}
+          focused
+          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
+          panels={[{ id: "main" }]}
+          viewport={{
+            start: new Date("2025-01-01T00:00:00.000Z"),
+            end: new Date("2025-01-09T00:00:00.000Z"),
+          }}
+          onViewportChange={(next) => viewportChanges.push(next
+            ? { start: next.start.toISOString(), end: next.end.toISOString() }
+            : null)}
+        />
+      </InputHostProvider>,
+      { width: 62, height: 14 },
+    );
+
+    await act(async () => testSetup!.renderOnce());
+    const zoomIn = keyEvent("=");
+    zoomIn.sequence = "+";
+    zoomIn.shift = true;
+    await act(async () => chartShortcut?.(zoomIn));
+    await act(async () => testSetup!.renderOnce());
+    expect(viewportChanges.at(-1)).not.toBeNull();
+
+    await act(async () => chartShortcut?.(keyEvent("-")));
+    await act(async () => testSetup!.renderOnce());
+
+    expect(viewportChanges.at(-1)).toBeNull();
+  });
+
+  test("preserves a zoomed viewport when adaptive data refreshes its buffer", async () => {
+    const viewportChanges: Array<{ start: string; end: string } | null> = [];
+    let replacePoints: ((points: TimeSeriesPoint[]) => void) | null = null;
+    const initialPoints = series(
+      "price",
+      "main",
+      "left",
+      "USD",
+      [100, 101, 102, 103, 104, 105, 106, 107, 108],
+    ).points;
+    function Harness() {
+      const [points, setPoints] = useState(initialPoints);
+      replacePoints = setPoints;
+      return (
+        <InputHostProvider host={chartInputHost}>
+          <CompositeChart
+            width={60}
+            height={12}
+            focused
+            series={[{
+              ...series("price", "main", "left", "USD", []),
+              points,
+            }]}
+            panels={[{ id: "main" }]}
+            viewport={{
+              start: new Date("2025-01-01T00:00:00.000Z"),
+              end: new Date("2025-01-09T00:00:00.000Z"),
+            }}
+            onViewportChange={(next) => viewportChanges.push(next
+              ? { start: next.start.toISOString(), end: next.end.toISOString() }
+              : null)}
+          />
+        </InputHostProvider>
+      );
+    }
+
+    testSetup = await testRender(
+      <Harness />,
+      { width: 62, height: 14 },
+    );
+    await act(async () => testSetup!.renderOnce());
+
+    for (let index = 0; index < 2; index += 1) {
+      const zoomIn = keyEvent("=");
+      zoomIn.sequence = "+";
+      zoomIn.shift = true;
+      await act(async () => chartShortcut?.(zoomIn));
+      await act(async () => testSetup!.renderOnce());
+    }
+    const zoomedViewport = viewportChanges.at(-1);
+    expect(zoomedViewport?.start).not.toBe("2025-01-01T00:00:00.000Z");
+    const changeCount = viewportChanges.length;
+
+    await act(async () => replacePoints?.(initialPoints.slice(2)));
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(viewportChanges).toHaveLength(changeCount);
+    expect(viewportChanges.at(-1)).toEqual(zoomedViewport);
+  });
+
+  test("keeps a panned viewport when backfill moves beyond the authored range", async () => {
+    const viewportChanges: Array<{ start: string; end: string } | null> = [];
+    const viewportInteractions: string[] = [];
+    let replacePoints: ((points: TimeSeriesPoint[]) => void) | null = null;
+    const initialPoints = series(
+      "price",
+      "main",
+      "left",
+      "USD",
+      [100, 101, 102, 103, 104, 105, 106, 107, 108],
+    ).points;
+    const olderPoints = Array.from({ length: 11 }, (_, index) => {
+      const date = new Date(
+        Date.UTC(2024, 11, 25 + index) - (index === 10 ? 60_000 : 0),
+      );
+      return { date, observedAt: date, value: 90 + index };
+    });
+    function Harness() {
+      const [points, setPoints] = useState(initialPoints);
+      replacePoints = setPoints;
+      return (
+        <InputHostProvider host={chartInputHost}>
+          <CompositeChart
+            width={60}
+            height={12}
+            focused
+            series={[{
+              ...series("price", "main", "left", "USD", []),
+              points,
+            }]}
+            panels={[{ id: "main" }]}
+            viewport={{
+              start: new Date("2025-01-06T00:00:00.000Z"),
+              end: new Date("2025-01-09T00:00:00.000Z"),
+            }}
+            onViewportChange={(next, interaction) => {
+              viewportInteractions.push(interaction);
+              viewportChanges.push(next
+                ? { start: next.start.toISOString(), end: next.end.toISOString() }
+                : null);
+            }}
+          />
+        </InputHostProvider>
+      );
+    }
+
+    testSetup = await testRender(<Harness />, { width: 62, height: 14 });
+    await act(async () => testSetup!.renderOnce());
+    for (let index = 0; index < 120; index += 1) {
+      const panOlder = keyEvent("left");
+      panOlder.shift = true;
+      await act(async () => chartShortcut?.(panOlder));
+      await act(async () => testSetup!.renderOnce());
+    }
+    const pannedViewport = viewportChanges.at(-1);
+    expect(pannedViewport).toEqual({
       start: "2025-01-01T00:00:00.000Z",
-      end: "2025-01-09T00:00:00.000Z",
+      end: "2025-01-04T00:00:00.000Z",
     });
+
+    await act(async () => replacePoints?.(olderPoints));
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(viewportChanges.at(-1)).toEqual({
+      start: "2024-12-31T23:59:00.000Z",
+      end: "2025-01-03T23:59:00.000Z",
+    });
+    expect(viewportInteractions.at(-1)).toBe("sync");
+    expect(testSetup.captureCharFrame()).not.toContain("No chart data");
+    expect(testSetup.captureCharFrame()).not.toContain("Jan 9");
+  });
+
+  test("keeps the latest pan through delayed adaptive viewport and series echoes", async () => {
+    const viewportChanges: Array<{ start: string; end: string } | null> = [];
+    let publishViewport: ((
+      next: { start: string; end: string },
+      showSecondary?: boolean,
+    ) => void) | null = null;
+    let publishExternalViewport: (() => void) | null = null;
+    function Harness() {
+      const [viewport, setViewport] = useState({
+        start: new Date("2025-01-05T00:00:00.000Z"),
+        end: new Date("2025-01-09T00:00:00.000Z"),
+      });
+      const [showSecondary, setShowSecondary] = useState(false);
+      const [viewportResetKey, setViewportResetKey] = useState("price:1D:auto");
+      publishViewport = (next, nextShowSecondary = showSecondary) => {
+        setViewport({
+          start: new Date(next.start),
+          end: new Date(next.end),
+        });
+        setShowSecondary(nextShowSecondary);
+      };
+      publishExternalViewport = () => {
+        setViewport({
+          start: new Date("2025-01-01T00:00:00.000Z"),
+          end: new Date("2025-01-09T00:00:00.000Z"),
+        });
+        setViewportResetKey("price:1W:auto");
+      };
+      return (
+        <CompositeChart
+          width={60}
+          height={12}
+          interactive
+          series={[
+            series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108]),
+            series("secondary", "main", "left", "USD", showSecondary ? [90, 91, 92] : []),
+          ]}
+          panels={[{ id: "main" }]}
+          viewport={viewport}
+          viewportResetKey={viewportResetKey}
+          onViewportChange={(next) => {
+            viewportChanges.push(next
+              ? { start: next.start.toISOString(), end: next.end.toISOString() }
+              : null);
+          }}
+        />
+      );
+    }
+
+    testSetup = await testRender(
+      <CaptureChartSurfaceProvider>
+        <Harness />
+      </CaptureChartSurfaceProvider>,
+      { width: 62, height: 14 },
+    );
+    await act(async () => testSetup!.renderOnce());
+
+    for (let index = 0; index < 10; index += 1) {
+      await act(async () => {
+        capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
+          scroll: { direction: "up", delta: 1 },
+        }));
+      });
+      await act(async () => {
+        await testSetup!.renderOnce();
+        await testSetup!.renderOnce();
+      });
+    }
+    const firstPan = viewportChanges[0]!;
+    const latestPan = viewportChanges.at(-1)!;
+    expect(firstPan).not.toBeNull();
+    expect(latestPan).not.toBeNull();
+    expect(latestPan).not.toEqual(firstPan);
+
+    await act(async () => publishViewport!(firstPan, true));
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+    expect(viewportChanges).not.toContain(null);
+    expect(viewportChanges.at(-1)).toEqual(latestPan);
+
+    await act(async () => publishViewport!(latestPan));
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+    expect(viewportChanges).not.toContain(null);
+    expect(viewportChanges.at(-1)).toEqual(latestPan);
+
+    for (let index = 0; index < 32; index += 1) {
+      await act(async () => {
+        capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
+          scroll: { direction: "up", delta: 100 },
+        }));
+      });
+      await act(async () => {
+        await testSetup!.renderOnce();
+        await testSetup!.renderOnce();
+      });
+    }
+    const boundaryViewport = viewportChanges.at(-1)!;
+    expect(boundaryViewport).not.toBeNull();
+
+    await act(async () => publishViewport!(boundaryViewport));
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+    const boundaryChangeCount = viewportChanges.length;
+
+    await act(async () => {
+      capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
+        scroll: { direction: "up", delta: 100 },
+      }));
+    });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+    expect(viewportChanges).toHaveLength(boundaryChangeCount);
+    expect(viewportChanges).not.toContain(null);
+
+    await act(async () => publishExternalViewport!());
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+    expect(viewportChanges.at(-1)).toBeNull();
   });
 
   test("activates and navigates a buffered viewport from the first mouse gesture", async () => {
@@ -515,7 +899,7 @@ describe("CompositeChart", () => {
     );
 
     await act(async () => testSetup!.renderOnce());
-    expect(testSetup.captureCharFrame()).toContain("2025-01-05");
+    expect(testSetup.captureCharFrame()).toContain("Jan 5");
 
     await act(async () => {
       capturedSurfaceProps!.onMouseDown(pointerEvent(10, 3));
@@ -526,7 +910,7 @@ describe("CompositeChart", () => {
 
     expect(activations).toBe(1);
     expect(cursorChanges.length).toBeGreaterThan(0);
-    expect(testSetup.captureCharFrame()).toContain("2025-01-03");
+    expect(testSetup.captureCharFrame()).toContain("Jan 3");
   });
 
   test("maps the pointer crosshair level through both axes and labels its date", async () => {
@@ -584,7 +968,7 @@ describe("CompositeChart", () => {
     );
 
     await act(async () => testSetup!.renderOnce());
-    expect(testSetup.captureCharFrame()).toContain("2025-01-09");
+    expect(testSetup.captureCharFrame()).toContain("Jan 9");
 
     await act(async () => {
       capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
@@ -594,7 +978,220 @@ describe("CompositeChart", () => {
     });
     await act(async () => testSetup!.renderOnce());
 
-    expect(testSetup.captureCharFrame()).not.toContain("2025-01-09");
+    expect(testSetup.captureCharFrame()).not.toContain("Jan 9");
+  });
+
+  test("uses a supplied market timeline to keep control-wheel zoom under the pointer", async () => {
+    const anchor = twoSessionCandles();
+    const display = {
+      ...anchor,
+      id: "secondary",
+      label: "Secondary",
+      timeBasis: undefined,
+    };
+    const viewport = {
+      start: new Date(anchor.points[0]!.date.getTime()),
+      end: new Date(anchor.points.at(-1)!.date.getTime()),
+    };
+    const viewportChanges: Array<{ start: string; end: string } | null> = [];
+    testSetup = await testRender(
+      <CaptureChartSurfaceProvider>
+        <CompositeChart
+          width={60}
+          height={12}
+          interactive
+          series={[display]}
+          timelineSeries={[anchor]}
+          panels={[{ id: "main" }]}
+          viewport={viewport}
+          onViewportChange={(next) => viewportChanges.push(next
+            ? { start: next.start.toISOString(), end: next.end.toISOString() }
+            : null)}
+        />
+      </CaptureChartSurfaceProvider>,
+      { width: 62, height: 14 },
+    );
+
+    await act(async () => testSetup!.renderOnce());
+    const pointerX = 35;
+    const plotWidth = capturedSurfaceNode!.width as number;
+    const minimumSpan = resolveCompositeMinimumSpanMs([display], viewport);
+    const expected = zoomCompositeViewport(
+      viewport,
+      viewport,
+      1 + 4 * 0.04,
+      pointerX / Math.max(plotWidth - 1, 1),
+      minimumSpan,
+      [anchor],
+    );
+
+    await act(async () => {
+      capturedSurfaceProps!.onMouseScroll(pointerEvent(pointerX, 3, {
+        ctrl: true,
+        scroll: { direction: "up", delta: 4 },
+      }));
+    });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(viewportChanges.at(-1)).toEqual({
+      start: expected.start.toISOString(),
+      end: expected.end.toISOString(),
+    });
+  });
+
+  test("clears a drag interaction when the pointer returns to the authored viewport", async () => {
+    const viewportChanges: Array<{ start: string; end: string } | null> = [];
+    const interactions: string[] = [];
+    testSetup = await testRender(
+      <CaptureChartSurfaceProvider>
+        <CompositeChart
+          width={60}
+          height={12}
+          interactive
+          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
+          panels={[{ id: "main" }]}
+          viewport={{
+            start: new Date("2025-01-05T00:00:00.000Z"),
+            end: new Date("2025-01-09T00:00:00.000Z"),
+          }}
+          onViewportChange={(next, interaction) => {
+            interactions.push(interaction);
+            viewportChanges.push(next
+              ? { start: next.start.toISOString(), end: next.end.toISOString() }
+              : null);
+          }}
+        />
+      </CaptureChartSurfaceProvider>,
+      { width: 62, height: 14 },
+    );
+
+    await act(async () => testSetup!.renderOnce());
+    await act(async () => {
+      capturedSurfaceProps!.onMouseDown(pointerEvent(20, 3));
+      capturedSurfaceProps!.onMouseDrag(pointerEvent(30, 3));
+    });
+    await act(async () => testSetup!.renderOnce());
+    expect(viewportChanges.at(-1)).not.toBeNull();
+
+    await act(async () => {
+      capturedSurfaceProps!.onMouseDrag(pointerEvent(20, 3));
+      capturedSurfaceProps!.onMouseUp(pointerEvent(20, 3));
+    });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(viewportChanges.at(-1)).toBeNull();
+    expect(interactions.at(-1)).toBe("pan");
+  });
+
+  test("always treats horizontal control-wheel movement as a pan", async () => {
+    const interactions: string[] = [];
+    testSetup = await testRender(
+      <CaptureChartSurfaceProvider>
+        <CompositeChart
+          width={60}
+          height={12}
+          interactive
+          series={[twoSessionCandles()]}
+          panels={[{ id: "main" }]}
+          viewport={{
+            start: new Date("2025-01-03T13:30:00.000Z"),
+            end: new Date("2025-01-03T17:00:00.000Z"),
+          }}
+          onViewportChange={(_next, interaction) => interactions.push(interaction)}
+        />
+      </CaptureChartSurfaceProvider>,
+      { width: 62, height: 14 },
+    );
+
+    await act(async () => testSetup!.renderOnce());
+    await act(async () => {
+      capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
+        ctrl: true,
+        scroll: { direction: "left", delta: 4 },
+      }));
+    });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(interactions.at(-1)).toBe("pan");
+  });
+
+  test("keeps the date axis and mouse recovery when refreshed data misses the zoomed window", async () => {
+    let replacePoints: ((points: TimeSeriesPoint[]) => void) | null = null;
+    function Harness() {
+      const [points, setPoints] = useState(
+        series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108]).points,
+      );
+      replacePoints = setPoints;
+      return (
+        <CompositeChart
+          width={60}
+          height={12}
+          interactive
+          series={[{
+            ...series("price", "main", "left", "USD", []),
+            points,
+          }]}
+          panels={[{ id: "main" }]}
+          viewport={{
+            start: new Date("2025-01-01T00:00:00.000Z"),
+            end: new Date("2025-01-09T00:00:00.000Z"),
+          }}
+        />
+      );
+    }
+
+    testSetup = await testRender(
+      <CaptureChartSurfaceProvider>
+        <Harness />
+      </CaptureChartSurfaceProvider>,
+      { width: 62, height: 14 },
+    );
+    await act(async () => testSetup!.renderOnce());
+
+    for (let index = 0; index < 8; index += 1) {
+      await act(async () => {
+        capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
+          ctrl: true,
+          scroll: { direction: "up", delta: 8 },
+        }));
+      });
+      await act(async () => testSetup!.renderOnce());
+    }
+
+    await act(async () => {
+      replacePoints?.([
+        point("2025-01-01", 100),
+        point("2025-01-09", 108),
+      ]);
+    });
+    await act(async () => testSetup!.renderOnce());
+
+    const emptyFrame = testSetup.captureCharFrame();
+    expect(emptyFrame).toContain("No chart data");
+    expect(emptyFrame).toContain("Jan ");
+    expect(typeof capturedSurfaceProps!.onMouseScroll).toBe("function");
+
+    await act(async () => {
+      capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
+        ctrl: true,
+        scroll: { direction: "down", delta: 4 },
+      }));
+    });
+    await act(async () => testSetup!.renderOnce());
+
+    const recoveredFrame = testSetup.captureCharFrame();
+    expect(recoveredFrame).not.toContain("No chart data");
+    expect(recoveredFrame).toContain("2025-01-01");
+    expect(recoveredFrame).toContain("Jan 9");
   });
 
   test("shows useful UTC times for an intraday shared cursor and time axis", async () => {