gloomberb 0.10.4 → 0.11.0

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

@@ -12,11 +12,14 @@ import {
   type ScrollBoxRenderable,
 } from "../../../ui";
 import { useShortcut } from "../../../react/input";
+import { useOptionalPaneInstanceId, usePaneSettingValue } from "../../../state/app/context";
 import { colors as themeColors, hoverBg } from "../../../theme/colors";
 import { formatPercentRaw } from "../../../utils/format";
 import { isPlainKey } from "../../../utils/keyboard";
 import { truncateWithEllipsis } from "../../../utils/text-wrap";
 import type { ResolvedSeries } from "../../../time-series/types";
+import { downsampleCompositeChartScene } from "./downsample";
+import { reuseResolvedSeriesList } from "./panel-series";
 import {
   consumeChartMouseEvent,
   getGlobalMouseX,
@@ -24,6 +27,7 @@ import {
   type ChartMouseEvent,
 } from "../core/pointer";
 import type { NativeChartBitmap } from "../native/chart-rasterizer";
+import { useShowChartTextFallback } from "../native/use-chart-text-fallback";
 import {
   useStaticChartBitmapSize,
   type StaticChartBitmapSize,
@@ -611,6 +615,7 @@ interface CompositePanelSurfaceProps {
   onZoomViewport: (zoomFactor: number, anchorRatio: number) => void;
   onSetViewport: (range: CompositeViewportRange) => void;
   onToolSpanChange: (span: ChartToolSpan | null) => void;
+  showTextFallback: boolean;
 }
 
 function CompositePanelSurface({
@@ -637,6 +642,7 @@ function CompositePanelSurface({
   onZoomViewport,
   onSetViewport,
   onToolSpanChange,
+  showTextFallback,
 }: CompositePanelSurfaceProps) {
   const isDesktopWeb = useUiHost().kind === "desktop-web";
   const { cellHeightPx = 18, cellWidthPx = 8 } = useUiCapabilities();
@@ -787,10 +793,10 @@ function CompositePanelSurface({
     toolReadout?.direction,
   ]);
   const textLines = useMemo(
-    () => isDesktopWeb
+    () => isDesktopWeb || !showTextFallback
       ? []
       : renderCompositePanelText(panel, plotWidth, scene.cursorXRatio, activeCursorYRatio),
-    [activeCursorYRatio, isDesktopWeb, panel, plotWidth, scene.cursorXRatio],
+    [activeCursorYRatio, isDesktopWeb, panel, plotWidth, scene.cursorXRatio, showTextFallback],
   );
   const leftAxisLabels = useMemo(
     () => axisLabelRows(
@@ -1364,6 +1370,52 @@ function CompositeLegend({
   );
 }
 
+const CHART_DRAWINGS_SETTING_KEY = "chartDrawings";
+const NO_DRAWINGS: readonly ChartDrawing[] = [];
+/** Coalesces a drag into one write instead of one per pointer move. */
+const DRAWING_PERSIST_DELAY_MS = 400;
+
+/**
+ * Drawings are anchored to data, so they outlive the mounted chart: they ride
+ * along with the pane settings that already carry the chart spec. Only mounted
+ * inside a pane, so a standalone chart still renders without app state.
+ */
+function ChartDrawingStore({
+  paneInstanceId,
+  drawings,
+  onRestore,
+}: {
+  paneInstanceId: string;
+  drawings: readonly ChartDrawing[];
+  onRestore: (drawings: readonly ChartDrawing[]) => void;
+}) {
+  const [stored, setStored] = usePaneSettingValue<readonly ChartDrawing[]>(
+    CHART_DRAWINGS_SETTING_KEY,
+    NO_DRAWINGS,
+    paneInstanceId,
+  );
+  const restoredRef = useRef<readonly ChartDrawing[] | null>(null);
+  if (restoredRef.current === null) {
+    restoredRef.current = Array.isArray(stored) ? stored : NO_DRAWINGS;
+  }
+
+  useEffect(() => {
+    const restored = restoredRef.current;
+    if (restored && restored.length > 0) onRestore(restored);
+    // Restoring once on mount: later writes must not scroll back in time.
+  }, []);
+
+  useEffect(() => {
+    const restored = restoredRef.current ?? NO_DRAWINGS;
+    if (drawings === restored) return;
+    if (drawings.length === 0 && restored.length === 0) return;
+    const timer = setTimeout(() => setStored(drawings), DRAWING_PERSIST_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [drawings, setStored]);
+
+  return null;
+}
+
 export function CompositeChart({
   series,
   legendSeries,
@@ -1392,15 +1444,15 @@ export function CompositeChart({
   onToggleSeries,
   isSeriesToggleable,
 }: CompositeChartProps) {
-  const { cellWidthPx = 8 } = useUiCapabilities();
+  const { cellWidthPx = 8, pixelRatio = 1 } = useUiCapabilities();
   const isDesktopWeb = useUiHost().kind === "desktop-web";
+  const showTextFallback = useShowChartTextFallback();
   const [internalCursorDate, setInternalCursorDate] = useState<Date | null>(null);
   const [legendKeyboardIndex, setLegendKeyboardIndex] = useState<number | null>(null);
   const [toolSpan, setToolSpan] = useState<ChartToolSpan | null>(null);
   const [armedTool, setArmedTool] = useState<ChartToolKind | null>(null);
-  // ponytail: drawings live with the mounted chart. Persisting them belongs with
-  // pane settings, which is a separate plumbing job.
-  const [drawings, setDrawings] = useState<readonly ChartDrawing[]>([]);
+  const paneInstanceId = useOptionalPaneInstanceId();
+  const [drawings, setDrawings] = useState<readonly ChartDrawing[]>(NO_DRAWINGS);
   const [selectedDrawingId, setSelectedDrawingId] = useState<string | null>(null);
   const [drawColor, setDrawColor] = useState<string>(CHART_DRAWING_COLORS[0]);
   const addDrawing = useCallback((drawing: ChartDrawing) => {
@@ -1433,7 +1485,10 @@ export function CompositeChart({
   const resolvedCursorDate = cursorDate === undefined ? internalCursorDate : cursorDate;
   const totalWidth = Math.max(1, Math.floor(width));
   const totalHeight = Math.max(1, Math.floor(height));
-  const visibleSeries = useMemo(() => series.filter((entry) => entry.points.length > 0), [series]);
+  const seriesIdentityRef = useRef<ResolvedSeries[]>([]);
+  const stableSeries = reuseResolvedSeriesList(seriesIdentityRef.current, series);
+  seriesIdentityRef.current = stableSeries;
+  const visibleSeries = useMemo(() => stableSeries.filter((entry) => entry.points.length > 0), [stableSeries]);
   const marketTimelineSeries = useMemo(() => {
     const supplied = timelineSeries?.filter((entry) => entry.points.length > 0) ?? [];
     return supplied.some((entry) => entry.timeBasis?.kind === "market")
@@ -1629,6 +1684,11 @@ export function CompositeChart({
     : 0;
   const timeAxisRows = showTimeAxis ? 1 : 0;
   const panelCount = new Set(visibleSeries.map((entry) => entry.panelId)).size;
+  const lastTickKey = visibleSeries.map((entry) => {
+    const last = entry.points.at(-1);
+    if (!last) return entry.id;
+    return `${entry.id}:${last.date.getTime()}:${last.close ?? ""}:${last.value ?? ""}:${entry.latestChangePercent ?? ""}`;
+  }).join("|");
   const plotHeight = Math.max(panelCount, totalHeight - legendRows - timeAxisRows);
   const resolvedColors = useMemo<CompositeChartColors>(() => ({
     background: colors?.background ?? themeColors.bg,
@@ -1638,12 +1698,16 @@ export function CompositeChart({
     textDim: colors?.textDim ?? themeColors.textDim,
     negative: colors?.negative ?? themeColors.negative,
   }), [colors]);
-  const projectedScene = useMemo(() => buildCompositeChartScene(visibleSeries, panels, {
-    width: 1,
-    height: Math.max(panelCount, 1),
-    viewport: effectiveViewport ?? undefined,
-    timelineSeries: marketTimelineSeries,
-  }), [effectiveViewport, marketTimelineSeries, panelCount, panels, visibleSeries]);
+  const projectedScene = useMemo(() => {
+    // lastTickKey busts this memo when a live tick mutates series identity in place.
+    void lastTickKey;
+    return buildCompositeChartScene(visibleSeries, panels, {
+      width: 1,
+      height: Math.max(panelCount, 1),
+      viewport: effectiveViewport ?? undefined,
+      timelineSeries: marketTimelineSeries,
+    });
+  }, [effectiveViewport, lastTickKey, marketTimelineSeries, panelCount, panels, visibleSeries]);
   // Gutters follow the axes the scene actually built. Reading the series list
   // instead drops a gutter the moment its series has no observation in view,
   // which is exactly what a zoom does, taking the axis labels with it.
@@ -1673,6 +1737,10 @@ export function CompositeChart({
   const horizontalReserved = leftAxisWidth + rightAxisWidth
     + axisGap * ((leftAxisWidth ? 1 : 0) + (rightAxisWidth ? 1 : 0));
   const plotWidth = Math.max(1, totalWidth - horizontalReserved);
+  const downsampleWidth = Math.max(
+    1,
+    Math.round(plotWidth * cellWidthPx * Math.max(1, pixelRatio)),
+  );
   const layoutPanels = useMemo<CompositePanelScene[] | null>(() => {
     if (!projectedScene) return null;
     const panelSpecById = new Map(panels.map((panel) => [panel.id, panel] as const));
@@ -1690,13 +1758,14 @@ export function CompositeChart({
   }, [panels, plotHeight, projectedScene]);
   const baseScene = useMemo<CompositeChartScene | null>(() => {
     if (!projectedScene || !layoutPanels) return null;
-    return {
+    const laidOut: CompositeChartScene = {
       ...projectedScene,
       width: plotWidth,
       height: layoutPanels.reduce((sum, panel) => sum + panel.height, 0),
       panels: layoutPanels,
     };
-  }, [layoutPanels, plotWidth, projectedScene]);
+    return downsampleCompositeChartScene(laidOut, downsampleWidth);
+  }, [downsampleWidth, layoutPanels, plotWidth, projectedScene]);
   const resolvedCursorTimestamp = resolvedCursorDate?.getTime() ?? null;
   const normalizedCursorTimestamp = resolvedCursorTimestamp !== null && Number.isFinite(resolvedCursorTimestamp)
     ? resolvedCursorTimestamp
@@ -1988,6 +2057,13 @@ export function CompositeChart({
           }}
         />
       ) : null}
+      {paneInstanceId ? (
+        <ChartDrawingStore
+          paneInstanceId={paneInstanceId}
+          drawings={drawings}
+          onRestore={setDrawings}
+        />
+      ) : null}
       {scene.panels.map((panel) => (
         <CompositePanelSurface
           key={panel.id}
@@ -2014,6 +2090,7 @@ export function CompositeChart({
           onZoomViewport={zoomViewport}
           onSetViewport={setViewportRange}
           onToolSpanChange={setToolSpan}
+          showTextFallback={showTextFallback}
         />
       ))}
       {timeAxisLayout ? (

package/src/components/chart/composite/downsample.test.ts

@@ -0,0 +1,136 @@
+import { describe, expect, test } from "bun:test";
+import type { ResolvedSeries, TimeSeriesPoint } from "../../../time-series/types";
+import {
+  downsampleCompositeChartScene,
+  downsampleLttb,
+  downsampleOhlcProjectedPoints,
+} from "./downsample";
+import { buildCompositeChartScene } from "./scene";
+
+function point(date: string, value: number): TimeSeriesPoint {
+  const observedAt = new Date(`${date}T00:00:00.000Z`);
+  return { date: observedAt, observedAt, value };
+}
+
+function ohlcPoint(
+  date: Date,
+  open: number,
+  high: number,
+  low: number,
+  close: number,
+): TimeSeriesPoint {
+  return {
+    date,
+    observedAt: date,
+    value: close,
+    open,
+    high,
+    low,
+    close,
+    volume: 1,
+  };
+}
+
+function series(
+  overrides: Partial<ResolvedSeries> & Pick<ResolvedSeries, "id" | "points">,
+): ResolvedSeries {
+  return {
+    id: overrides.id,
+    label: overrides.label ?? overrides.id,
+    color: overrides.color ?? "#00ff66",
+    unit: overrides.unit ?? "USD",
+    unitGroup: overrides.unitGroup ?? "currency",
+    nativeFrequency: overrides.nativeFrequency ?? "daily",
+    dataShape: overrides.dataShape ?? "scalar",
+    style: overrides.style ?? "line",
+    transform: overrides.transform ?? "raw",
+    axis: overrides.axis ?? "left",
+    panelId: overrides.panelId ?? "main",
+    interpolation: overrides.interpolation ?? "none",
+    timestampMode: overrides.timestampMode,
+    timeBasis: overrides.timeBasis,
+    points: overrides.points,
+    warning: overrides.warning,
+  };
+}
+
+function denseLineSeries(count: number): ResolvedSeries {
+  const start = Date.parse("2024-01-01T00:00:00.000Z");
+  return series({
+    id: "price",
+    points: Array.from({ length: count }, (_, index) => {
+      const date = new Date(start + index * 86_400_000);
+      const value = 100 + Math.sin(index / 8) * 20 + (index % 37 === 0 ? 40 : 0);
+      return { date, observedAt: date, value };
+    }),
+  });
+}
+
+describe("composite downsample", () => {
+  test("caps line series to the pixel width and keeps the shared date list", () => {
+    const scene = buildCompositeChartScene(
+      [denseLineSeries(400)],
+      [{ id: "main" }],
+      { width: 80, height: 12 },
+    );
+    expect(scene).not.toBeNull();
+    expect(scene!.panels[0]!.series[0]!.points.length).toBe(400);
+
+    const downsampled = downsampleCompositeChartScene(scene!, 64);
+    expect(downsampled.dates).toBe(scene!.dates);
+    expect(downsampled.dateRatios).toBe(scene!.dateRatios);
+    expect(downsampled.dates).toHaveLength(400);
+    expect(downsampled.panels[0]!.series[0]!.points.length).toBeLessThanOrEqual(64);
+    expect(downsampled.panels[0]!.series[0]!.points.length).toBeGreaterThan(2);
+  });
+
+  test("LTTB never exceeds the requested point budget", () => {
+    const scene = buildCompositeChartScene(
+      [denseLineSeries(250)],
+      [{ id: "main" }],
+      { width: 120, height: 10 },
+    )!;
+    const points = scene.panels[0]!.series[0]!.points;
+    expect(downsampleLttb(points, 40)).toHaveLength(40);
+    expect(downsampleLttb(points, points.length)).toBe(points);
+  });
+
+  test("OHLC buckets preserve the viewport high and low", () => {
+    const start = Date.parse("2024-01-01T00:00:00.000Z");
+    const candles = series({
+      id: "ohlc",
+      dataShape: "ohlcv",
+      style: "candles",
+      points: Array.from({ length: 180 }, (_, index) => {
+        const date = new Date(start + index * 86_400_000);
+        const close = 50 + index;
+        const high = index === 41 ? 900 : close + 1;
+        const low = index === 117 ? 2 : close - 1;
+        return ohlcPoint(date, close - 0.5, high, low, close);
+      }),
+    });
+    const scene = buildCompositeChartScene(
+      [candles],
+      [{ id: "main" }],
+      { width: 80, height: 12 },
+    )!;
+    const source = scene.panels[0]!.series[0]!.points;
+    const buckets = downsampleOhlcProjectedPoints(source, 40);
+    expect(buckets.length).toBeLessThanOrEqual(40);
+    expect(Math.max(...buckets.map((entry) => entry.point.high ?? entry.value))).toBe(900);
+    expect(Math.min(...buckets.map((entry) => entry.point.low ?? entry.value))).toBe(2);
+  });
+
+  test("does not downsample when the series already fits the budget", () => {
+    const scene = buildCompositeChartScene(
+      [series({
+        id: "short",
+        points: [point("2025-01-01", 10), point("2025-01-02", 12), point("2025-01-03", 11)],
+      })],
+      [{ id: "main" }],
+      { width: 80, height: 8 },
+    )!;
+    const downsampled = downsampleCompositeChartScene(scene, 64);
+    expect(downsampled.panels[0]!.series[0]!.points).toBe(scene.panels[0]!.series[0]!.points);
+  });
+});

package/src/components/chart/composite/downsample.ts

@@ -0,0 +1,208 @@
+import { isOhlcSeriesStyle } from "../../../time-series/spec";
+import type { TimeSeriesPoint } from "../../../time-series/types";
+import type {
+  CompositeChartScene,
+  CompositePanelScene,
+  CompositeProjectedPoint,
+  CompositeProjectedSeries,
+} from "./types";
+
+function finiteNumber(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+function splitConnectedSegments(
+  points: readonly CompositeProjectedPoint[],
+): CompositeProjectedPoint[][] {
+  const segments: CompositeProjectedPoint[][] = [];
+  let current: CompositeProjectedPoint[] = [];
+  for (const point of points) {
+    if (point.breakBefore && current.length > 0) {
+      segments.push(current);
+      current = [];
+    }
+    current.push(point);
+  }
+  if (current.length > 0) segments.push(current);
+  return segments;
+}
+
+/**
+ * Largest-Triangle-Three-Buckets. Keeps the first and last samples and one
+ * representative from each interior bucket so a line still fits the pixel
+ * budget without flattening extrema.
+ */
+export function downsampleLttb(
+  points: readonly CompositeProjectedPoint[],
+  threshold: number,
+): CompositeProjectedPoint[] {
+  const count = points.length;
+  const budget = Math.max(Math.floor(threshold), 1);
+  if (count <= budget) return points as CompositeProjectedPoint[];
+  if (budget === 1) return [points[0]!];
+  if (budget === 2) return [points[0]!, points[count - 1]!];
+
+  const sampled: CompositeProjectedPoint[] = [points[0]!];
+  const bucketSize = (count - 2) / (budget - 2);
+  let previousIndex = 0;
+
+  for (let bucketIndex = 0; bucketIndex < budget - 2; bucketIndex += 1) {
+    const nextStart = Math.floor((bucketIndex + 1) * bucketSize) + 1;
+    const nextEnd = Math.min(Math.floor((bucketIndex + 2) * bucketSize) + 1, count);
+    let avgX = 0;
+    let avgY = 0;
+    const avgCount = Math.max(nextEnd - nextStart, 1);
+    for (let index = nextStart; index < nextEnd; index += 1) {
+      avgX += points[index]!.xRatio;
+      avgY += points[index]!.yRatio;
+    }
+    avgX /= avgCount;
+    avgY /= avgCount;
+
+    const currentStart = Math.floor(bucketIndex * bucketSize) + 1;
+    const currentEnd = Math.floor((bucketIndex + 1) * bucketSize) + 1;
+    const previous = points[previousIndex]!;
+    const prevX = previous.xRatio;
+    const prevY = previous.yRatio;
+    let maxArea = -1;
+    let maxIndex = currentStart;
+    for (let index = currentStart; index < currentEnd; index += 1) {
+      const point = points[index]!;
+      const area = Math.abs(
+        (prevX - avgX) * (point.yRatio - prevY) - (prevX - point.xRatio) * (avgY - prevY),
+      );
+      if (area > maxArea) {
+        maxArea = area;
+        maxIndex = index;
+      }
+    }
+    sampled.push(points[maxIndex]!);
+    previousIndex = maxIndex;
+  }
+
+  sampled.push(points[count - 1]!);
+  return sampled;
+}
+
+function downsampleLineProjectedPoints(
+  points: readonly CompositeProjectedPoint[],
+  pixelWidth: number,
+): CompositeProjectedPoint[] {
+  if (points.length <= pixelWidth) return points as CompositeProjectedPoint[];
+  const segments = splitConnectedSegments(points);
+  if (segments.length === 1) return downsampleLttb(points, pixelWidth);
+
+  const sampled: CompositeProjectedPoint[] = [];
+  for (const segment of segments) {
+    const budget = Math.max(2, Math.floor(pixelWidth * (segment.length / points.length)));
+    const next = downsampleLttb(segment, Math.min(budget, segment.length));
+    if (sampled.length > 0 && next[0] && !next[0].breakBefore) {
+      sampled.push({ ...next[0], breakBefore: true }, ...next.slice(1));
+      continue;
+    }
+    sampled.push(...next);
+  }
+  return sampled.length <= pixelWidth ? sampled : downsampleLttb(sampled, pixelWidth);
+}
+
+function sourceValue(point: CompositeProjectedPoint, key: "open" | "high" | "low" | "close"): number {
+  const candidate = point.point[key];
+  return finiteNumber(candidate) ? candidate : point.value;
+}
+
+function aggregateOhlcProjectedBucket(
+  bucket: readonly CompositeProjectedPoint[],
+): CompositeProjectedPoint {
+  const first = bucket[0]!;
+  const last = bucket[bucket.length - 1]!;
+  let high = sourceValue(first, "high");
+  let low = sourceValue(first, "low");
+  let volume = finiteNumber(first.point.volume) ? first.point.volume : 0;
+  let breakBefore = first.breakBefore;
+
+  for (let index = 1; index < bucket.length; index += 1) {
+    const point = bucket[index]!;
+    high = Math.max(high, sourceValue(point, "high"));
+    low = Math.min(low, sourceValue(point, "low"));
+    if (finiteNumber(point.point.volume)) volume += point.point.volume;
+    if (point.breakBefore) breakBefore = true;
+  }
+
+  const open = sourceValue(first, "open");
+  const close = sourceValue(last, "close");
+  const point: TimeSeriesPoint = {
+    ...last.point,
+    value: close,
+    open,
+    high,
+    low,
+    close,
+    volume,
+  };
+  return {
+    ...last,
+    point,
+    value: close,
+    breakBefore,
+  };
+}
+
+export function downsampleOhlcProjectedPoints(
+  points: readonly CompositeProjectedPoint[],
+  targetWidth: number,
+): CompositeProjectedPoint[] {
+  const budget = Math.max(Math.floor(targetWidth), 1);
+  if (points.length <= budget) return points as CompositeProjectedPoint[];
+
+  const buckets = new Map<number, CompositeProjectedPoint[]>();
+  for (const point of points) {
+    const index = Math.min(budget - 1, Math.max(0, Math.floor(point.xRatio * budget)));
+    const bucket = buckets.get(index);
+    if (bucket) bucket.push(point);
+    else buckets.set(index, [point]);
+  }
+  return [...buckets.entries()]
+    .sort((left, right) => left[0] - right[0])
+    .map(([, bucket]) => aggregateOhlcProjectedBucket(bucket));
+}
+
+export function downsampleProjectedSeries(
+  series: CompositeProjectedSeries,
+  pixelWidth: number,
+): CompositeProjectedSeries {
+  const width = Math.max(Math.floor(pixelWidth), 1);
+  if (series.points.length <= 1 || width <= 1) return series;
+  const points = isOhlcSeriesStyle(series.source.style)
+    ? downsampleOhlcProjectedPoints(series.points, Math.max(Math.floor(width / 2), 1))
+    : downsampleLineProjectedPoints(series.points, width);
+  return points === series.points ? series : { ...series, points };
+}
+
+function downsamplePanel(panel: CompositePanelScene, pixelWidth: number): CompositePanelScene {
+  let changed = false;
+  const series = panel.series.map((entry) => {
+    const next = downsampleProjectedSeries(entry, pixelWidth);
+    if (next !== entry) changed = true;
+    return next;
+  });
+  return changed ? { ...panel, series } : panel;
+}
+
+/**
+ * Caps each panel's projected series to the plot's pixel budget. Cursor
+ * snapping still uses the full `dates` / `dateRatios` lists on the scene.
+ */
+export function downsampleCompositeChartScene(
+  scene: CompositeChartScene,
+  pixelWidth: number,
+): CompositeChartScene {
+  const width = Math.max(Math.floor(pixelWidth), 1);
+  if (width <= 1) return scene;
+  let changed = false;
+  const panels = scene.panels.map((panel) => {
+    const next = downsamplePanel(panel, width);
+    if (next !== panel) changed = true;
+    return next;
+  });
+  return changed ? { ...scene, panels } : scene;
+}

package/src/components/chart/composite/panel-series.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, test } from "bun:test";
+import type { ResolvedSeries, TimeSeriesPoint } from "../../../time-series/types";
+import { reuseResolvedSeriesIdentity, reuseResolvedSeriesList } from "./panel-series";
+
+function point(): TimeSeriesPoint {
+  const date = new Date("2024-01-01T00:00:00.000Z");
+  return { date, observedAt: date, value: 1 };
+}
+
+function series(id: string, panelId: string): ResolvedSeries {
+  return {
+    id,
+    label: id,
+    color: "#0f0",
+    unit: "USD",
+    unitGroup: "currency",
+    nativeFrequency: "daily",
+    dataShape: "scalar",
+    style: "line",
+    transform: "raw",
+    axis: "left",
+    panelId,
+    interpolation: "none",
+    points: [point()],
+  };
+}
+
+describe("reuseResolvedSeriesIdentity", () => {
+  test("reuses the previous object when a parent clones identical series data", () => {
+    const original = series("a", "main");
+    const clone: ResolvedSeries = { ...original, points: original.points.map((entry) => ({ ...entry })) };
+    expect(reuseResolvedSeriesIdentity(original, clone)).toBe(original);
+  });
+
+  test("keeps series identity when only the last bar close and time change", () => {
+    const start = new Date("2024-01-01T00:00:00.000Z");
+    const first: TimeSeriesPoint = { date: start, observedAt: start, value: 10, close: 10 };
+    const second: TimeSeriesPoint = {
+      date: new Date("2024-01-02T00:00:00.000Z"),
+      observedAt: new Date("2024-01-02T00:00:00.000Z"),
+      value: 11,
+      close: 11,
+    };
+    const previous = series("a", "main");
+    previous.points = [first, second];
+    const nextLast: TimeSeriesPoint = {
+      date: new Date("2024-01-02T00:00:01.000Z"),
+      observedAt: new Date("2024-01-02T00:00:01.000Z"),
+      value: 11.5,
+      close: 11.5,
+    };
+    const next: ResolvedSeries = {
+      ...previous,
+      points: [first, nextLast],
+    };
+    expect(reuseResolvedSeriesIdentity(previous, next)).toBe(previous);
+    expect(previous.points[1]).toBe(nextLast);
+  });
+
+  test("reuses the list identity when every member is reused", () => {
+    const a = series("a", "main");
+    const first = [a];
+    const second = reuseResolvedSeriesList(first, [{ ...a, points: a.points.map((entry) => ({ ...entry })) }]);
+    expect(second).toBe(first);
+  });
+});