gloomberb 0.16.4 → 0.16.6

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

@@ -11,6 +11,7 @@ import {
 import { colors as themeColors } from "../../../theme/colors";
 import { consumeChartMouseEvent, getGlobalMouseX, getLocalPlotPointer, type ChartMouseEvent } from "../core/pointer";
 import { useStaticChartBitmapSize } from "./bitmap";
+import { useMeasuredCells } from "../../../ui/measured-cells";
 import { PriceAxisLabels } from "./price-axis-labels";
 import { formatCompositeCursorValue, type CompositeAxisValueFormatter } from "./format";
 import {
@@ -20,7 +21,6 @@ import {
   type CompositeNavigationFrame,
   type CompositeViewportRange,
 } from "./interactions";
-import { buildCompositeColumnLayout } from "./column-layout";
 import {
   fitAxisLabels,
   hitTestLevel,
@@ -122,6 +122,8 @@ interface CompositePanelSurfaceProps {
   onSelectLevel: (id: string | null) => void;
 }
 
+const DESKTOP_PLOT_STYLE = { flex: "1 1 0px", width: "auto", minWidth: 0, height: "auto", alignSelf: "stretch" } as const;
+
 export function CompositePanelSurface({
   panel,
   scene,
@@ -190,20 +192,25 @@ export function CompositePanelSurface({
     | ChartToolDrag
     | null
   >(null);
-  const plotAspect = (plotWidth * cellWidthPx) / Math.max(panel.height * cellHeightPx, 1);
+  // The plot's box as the browser lays it out: on the desktop a chart that
+  // fills its box has it a fraction of a cell past its columns and rows. The
+  // bitmap is drawn at that size, so it is 1:1 at rest, and the pointer is
+  // read back into the scene's columns and rows. Elsewhere, and in the
+  // terminal, it is the plot's cells.
+  const plotSize = useMeasuredCells(plotRef, { width: plotWidth, height: panel.height });
+  const plotAspect = (plotSize.width * cellWidthPx) / Math.max(plotSize.height * cellHeightPx, 1);
   // The plot is wider than the viewport by the reserved right offset. Gestures
   // read the pointer in plot space, so they convert through this.
   const plotSpanFactor = 1 + compositeRightOffsetRatio(scene.timeScale);
-  const bitmapSize = useStaticChartBitmapSize(plotWidth, panel.height);
+  const bitmapSize = useStaticChartBitmapSize(plotSize.width, plotSize.height);
   const bitmap = useCompositePanelBitmap({ panel, bitmapSize, colors, isDesktopWeb });
-  const columnLayout = useMemo(() => buildCompositeColumnLayout(panel), [panel]);
   // The level line follows the pointer only. A keyboard or shared cursor knows
   // its column, and the series markers and axis readout already say the value.
   // A tool placed from the keyboard is the exception: its end is a level.
   const pointerCursorYRatio = scene.cursorXRatio === null ? null : heldCursorYRatio;
   const crosshair = useMemo(
-    () => resolvePanelCrosshair(panel, columnLayout, bitmap, scene.cursorXRatio, pointerCursorYRatio, colors.crosshair),
-    [bitmap, colors.crosshair, columnLayout, panel, pointerCursorYRatio, scene.cursorXRatio],
+    () => resolvePanelCrosshair(panel, bitmap, scene, pointerCursorYRatio, colors.crosshair),
+    [bitmap, colors.crosshair, panel, pointerCursorYRatio, scene],
   );
   const measureDomain = useMemo(() => resolveMeasureAxisDomain(panel), [panel]);
   const toolReadout = useMemo(() => {
@@ -489,18 +496,26 @@ export function CompositePanelSurface({
   const leftAxisMarkers = buildAxisMarkers("left");
   const rightAxisMarkers = buildAxisMarkers("right");
 
+  /** Where the pointer is over the plot, in the scene's columns and rows. */
+  const plotPointer = useCallback((event: ChartMouseEvent) => {
+    const pointer = getLocalPlotPointer(event, plotRef.current as unknown as Parameters<typeof getLocalPlotPointer>[1], renderer);
+    if (!pointer || (plotSize.width === plotWidth && plotSize.height === panel.height)) return pointer;
+    return {
+      ...pointer,
+      cellX: plotSize.width > 0 ? pointer.cellX * (plotWidth / plotSize.width) : pointer.cellX,
+      cellY: plotSize.height > 0 ? pointer.cellY * (panel.height / plotSize.height) : pointer.cellY,
+    };
+  }, [panel.height, plotSize.height, plotSize.width, plotWidth, renderer]);
   const pointerRatios = useCallback((event: ChartMouseEvent) => {
-    const pointerTarget = plotRef.current as unknown as Parameters<typeof getLocalPlotPointer>[1];
-    const pointer = getLocalPlotPointer(event, pointerTarget, renderer);
+    const pointer = plotPointer(event);
     if (!pointer) return null;
     return {
       xRatio: plotWidth <= 1 ? 0 : Math.max(0, Math.min(1, pointer.cellX / (plotWidth - 1))),
       yRatio: panel.height <= 1 ? 0.5 : Math.max(0, Math.min(1, pointer.cellY / (panel.height - 1))),
     };
-  }, [panel.height, plotWidth, renderer]);
+  }, [panel.height, plotPointer, plotWidth]);
   const updateCursor = useCallback((event: ChartMouseEvent): boolean => {
-    const pointerTarget = plotRef.current as unknown as Parameters<typeof getLocalPlotPointer>[1];
-    const pointer = getLocalPlotPointer(event, pointerTarget, renderer);
+    const pointer = plotPointer(event);
     if (!pointer) return false;
     const nextDate = resolveCompositeCursorDate(scene, pointer.cellX);
     if (!nextDate) return false;
@@ -511,7 +526,7 @@ export function CompositePanelSurface({
     onCursorDateChange(nextDate);
     consumeChartMouseEvent(event);
     return true;
-  }, [onCursorDateChange, panel.height, renderer, scene]);
+  }, [onCursorDateChange, panel.height, plotPointer, scene]);
   const clearCursor = useCallback(() => {
     setCursorYRatio(null);
     onCursorDateChange(null);
@@ -525,7 +540,7 @@ export function CompositePanelSurface({
     if (isDesktopWeb) releaseEditableFocus(event);
     consumeChartMouseEvent(event);
     if (onPickTime) {
-      const pointer = getLocalPlotPointer(event, plotRef.current as unknown as Parameters<typeof getLocalPlotPointer>[1], renderer);
+      const pointer = plotPointer(event);
       const date = pointer ? resolveCompositeCursorDate(scene, pointer.cellX) : null;
       if (date) onPickTime(date);
       return;
@@ -588,7 +603,7 @@ export function CompositePanelSurface({
     dragRef.current = startPanGesture(
       frame,
       viewport,
-      plotWidth,
+      plotSize.width,
       getGlobalMouseX(event, renderer),
       plotSpanFactor,
     );
@@ -606,6 +621,8 @@ export function CompositePanelSurface({
     panel,
     plotAspect,
     projectedLevels,
+    plotPointer,
+    plotSize.width,
     plotSpanFactor,
     plotWidth,
     pointerRatios,
@@ -658,7 +675,7 @@ export function CompositePanelSurface({
     if (drag.frame !== frame) {
       // Data refreshed mid-drag. The new frame maps positions differently, so
       // continue from where the plot is now instead of replaying the drag.
-      Object.assign(drag, startPanGesture(frame, viewport, plotWidth, globalX, plotSpanFactor));
+      Object.assign(drag, startPanGesture(frame, viewport, plotSize.width, globalX, plotSpanFactor));
     }
     onPanViewport(
       (globalX - drag.startGlobalX) * drag.positionsPerCell,
@@ -670,6 +687,7 @@ export function CompositePanelSurface({
     onEditDrawing,
     onPanViewport,
     panel,
+    plotSize.width,
     plotSpanFactor,
     plotWidth,
     pointerRatios,
@@ -745,8 +763,7 @@ export function CompositePanelSurface({
     if (!scroll) return;
     onActivate?.();
     consumeChartMouseEvent(event);
-    const pointerTarget = plotRef.current as unknown as Parameters<typeof getLocalPlotPointer>[1];
-    const pointer = getLocalPlotPointer(event, pointerTarget, renderer);
+    const pointer = plotPointer(event);
     updateCursor(event);
     const pending = pendingWheelRef.current ?? { panRatio: 0, zoomLog: 0, anchorRatio: 0.5 };
     if (event.modifiers.ctrl && pointer && isVerticalWheelDirection(scroll.direction)) {
@@ -758,7 +775,7 @@ export function CompositePanelSurface({
         pointer.cellX / Math.max(plotWidth - 1, 1) * plotSpanFactor,
       );
     } else {
-      pending.panRatio += resolveCompositeWheelPan(scroll, plotWidth * cellWidthPx);
+      pending.panRatio += resolveCompositeWheelPan(scroll, plotSize.width * cellWidthPx);
     }
     pendingWheelRef.current = pending;
     if (!isDesktopWeb || typeof webFrame.requestAnimationFrame !== "function") {
@@ -773,9 +790,10 @@ export function CompositePanelSurface({
     flushWheel,
     isDesktopWeb,
     onActivate,
+    plotPointer,
+    plotSize.width,
     plotSpanFactor,
     plotWidth,
-    renderer,
     updateCursor,
   ]);
 
@@ -785,6 +803,10 @@ export function CompositePanelSurface({
       height={panel.height}
       width={plotWidth + leftAxisWidth + rightAxisWidth + axisGap * ((leftAxisWidth ? 1 : 0) + (rightAxisWidth ? 1 : 0))}
       position="relative"
+      // Desktop: spans the chart's box and takes its share of the height, so
+      // when a resize draws the box at a new size between renders the plot
+      // follows it by CSS. At rest, the size the cells give it.
+      style={isDesktopWeb ? { width: "100%", flex: `${panel.height} 1 calc(${panel.height} * var(--cell-h))`, height: "auto", minHeight: 0 } : undefined}
     >
       {measureReadout ? (
         <Box
@@ -830,8 +852,11 @@ export function CompositePanelSurface({
       ) : null}
       <ChartSurface
         ref={plotRef}
-        width={plotWidth}
-        height={panel.height}
+        // Its measured box on the desktop, where pointer bounds read it; CSS lays it out.
+        width={plotSize.width}
+        height={plotSize.height}
+        // Desktop: the width the axes leave, and the row's height.
+        style={isDesktopWeb ? DESKTOP_PLOT_STYLE : undefined}
         flexDirection="column"
         bitmaps={bitmapLayers}
         crosshair={crosshair}

package/src/components/chart/composite/price-axis-labels.tsx

@@ -190,7 +190,9 @@ export function PriceAxisLabels({
       height={height}
       flexDirection="column"
       overflow="hidden"
-      style={usePixelOverlay || usePixelTicks ? { position: "relative" } : undefined}
+      // Labels placed in percentages follow the row's height as a resize
+      // draws the chart at a new size between renders.
+      style={usePixelOverlay || usePixelTicks ? { position: "relative", height: "auto", alignSelf: "stretch" } : undefined}
     >
       {Array.from({ length: height }, (_, row) => {
         const isCursorRow = !usePixelOverlay && cursorLabel !== null && cursorRow === row;

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

@@ -1,5 +1,6 @@
 import type { NativeChartBitmap } from "../native/chart-rasterizer";
 import {
+  blendAt,
   blendPixel,
   drawCircle,
   drawLine,
@@ -104,20 +105,61 @@ function fillAreaGradient(
   const reachAbove = Math.max(1, floor - Math.max(0, peakAbove));
   const reachBelow = Math.max(1, Math.min(height - 1, peakBelow) - floor);
 
+  // A pixel's opacity depends on its row alone, so each row's is worked out
+  // once; the pixels a fill covers are inside the bitmap and blend unchecked.
+  const colorAlpha = color.a / 255;
+  const rowAlpha = new Float64Array(height);
+  // Over an opaque pixel a blend is `colour * alpha + pixel * (1 - alpha)`:
+  // the first term and the factor are worked out per row too.
+  const rowRed = new Float64Array(height);
+  const rowGreen = new Float64Array(height);
+  const rowBlue = new Float64Array(height);
+  const rowKeep = new Float64Array(height);
+  for (let y = 0; y < height; y += 1) {
+    const strength = y <= floor ? (floor - y) / reachAbove : (y - floor) / reachBelow;
+    const alpha = clamp(colorAlpha * (AREA_FILL_MIN_OPACITY + (AREA_FILL_MAX_OPACITY - AREA_FILL_MIN_OPACITY) * strength), 0, 1);
+    rowAlpha[y] = alpha;
+    rowRed[y] = color.r * alpha;
+    rowGreen[y] = color.g * alpha;
+    rowBlue[y] = color.b * alpha;
+    rowKeep[y] = 1 - alpha;
+  }
+  // Each column fills from the line to the baseline. Walking the buffer row
+  // by row, in memory order, is several times faster than column by column.
+  const fillFrom = new Float64Array(width).fill(Number.POSITIVE_INFINITY);
+  const fillTo = new Float64Array(width).fill(Number.NEGATIVE_INFINITY);
+  let firstRow = floor + 1;
+  let lastRow = floor;
   for (let x = 0; x < width; x += 1) {
     const top = above[x]!;
+    const bottom = below[x]!;
     if (!Number.isNaN(top)) {
-      for (let y = Math.max(0, Math.ceil(top)); y <= floor; y += 1) {
-        const strength = (floor - y) / reachAbove;
-        blendPixel(data, width, height, x, y, color, AREA_FILL_MIN_OPACITY + (AREA_FILL_MAX_OPACITY - AREA_FILL_MIN_OPACITY) * strength);
-      }
+      fillFrom[x] = Math.max(0, Math.ceil(top));
+      firstRow = Math.min(firstRow, fillFrom[x]!);
     }
-    const bottom = below[x]!;
     if (!Number.isNaN(bottom)) {
-      for (let y = floor + 1; y <= Math.min(height - 1, Math.floor(bottom)); y += 1) {
-        const strength = (y - floor) / reachBelow;
-        blendPixel(data, width, height, x, y, color, AREA_FILL_MIN_OPACITY + (AREA_FILL_MAX_OPACITY - AREA_FILL_MIN_OPACITY) * strength);
+      fillTo[x] = Math.min(height - 1, Math.floor(bottom));
+      lastRow = Math.max(lastRow, fillTo[x]!);
+    }
+  }
+  for (let y = firstRow; y <= lastRow; y += 1) {
+    const alpha = rowAlpha[y]!;
+    if (alpha <= 0) continue;
+    const keep = rowKeep[y]!;
+    const red = rowRed[y]!;
+    const green = rowGreen[y]!;
+    const blue = rowBlue[y]!;
+    const aboveBaseline = y <= floor;
+    for (let x = 0; x < width; x += 1) {
+      if (aboveBaseline ? y < fillFrom[x]! : y > fillTo[x]!) continue;
+      const index = (y * width + x) * 4;
+      if (data[index + 3] !== 255) {
+        blendAt(data, index, color, alpha);
+        continue;
       }
+      data[index] = Math.round(red + data[index]! * keep);
+      data[index + 1] = Math.round(green + data[index + 1]! * keep);
+      data[index + 2] = Math.round(blue + data[index + 2]! * keep);
     }
   }
 }

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

@@ -656,6 +656,7 @@ function buildCursorValues(
       unit: entry.source.unit,
       value: projected?.value ?? null,
       point: projected?.point ?? gap?.point ?? null,
+      ...(cursorDate && projected && projected.timestamp < cursorTime ? { carried: true } : {}),
     };
   }));
 }
@@ -681,7 +682,7 @@ export function applyCompositeChartCursor(
     ...scene,
     cursorDate,
     cursorXRatio,
-    cursorValues: buildCursorValues(scene.panels, cursorDate, scene),
+    cursorValues: buildCursorValues(scene.cursorPanels ?? scene.panels, cursorDate, scene),
   };
 }
 

package/src/components/chart/composite/time-scale.ts

@@ -27,6 +27,7 @@ interface CachedMarketAnchors {
   timeZone: string;
   configuredCadence: number | undefined;
   cadenceMs: number;
+  historyMsPerSlot: number;
   anchors: MarketAnchors;
 }
 
@@ -113,7 +114,7 @@ function lowerBoundAnchor(
 }
 
 function positionForTimestamp(
-  scale: Pick<Extract<CompositeTimeScale, { kind: "market" }>, "anchors" | "cadenceMs">,
+  scale: Pick<Extract<CompositeTimeScale, { kind: "market" }>, "anchors" | "cadenceMs" | "historyMsPerSlot">,
   timestamp: number,
 ): number {
   const { anchors, cadenceMs } = scale;
@@ -122,7 +123,7 @@ function positionForTimestamp(
   if (next?.timestamp === timestamp) return next.position;
   const previous = anchors[index - 1];
   if (!previous) {
-    return anchors[0]!.position + (timestamp - anchors[0]!.timestamp) / cadenceMs;
+    return anchors[0]!.position + (timestamp - anchors[0]!.timestamp) / (scale.historyMsPerSlot ?? cadenceMs);
   }
   if (!next) {
     const last = anchors.at(-1)!;
@@ -134,8 +135,22 @@ function positionForTimestamp(
     + (next.position - previous.position) * ((timestamp - previous.timestamp) / elapsed);
 }
 
+/**
+ * Wall-clock time per slot across the loaded bars, nights and weekends
+ * included. History not loaded yet is laid out at this rate: at the bar
+ * cadence instead, a view panned into it would hold a few days where it held
+ * weeks, and squeeze shut when the bars arrive.
+ */
+function averageMsPerSlot(anchors: MarketAnchors, cadenceMs: number): number {
+  const first = anchors[0];
+  const last = anchors.at(-1);
+  if (!first || !last || last.position <= first.position) return cadenceMs;
+  return Math.max(cadenceMs, (last.timestamp - first.timestamp) / (last.position - first.position));
+}
+
 function buildMarketAnchors(series: ResolvedSeries, timeZone: string): {
   cadenceMs: number;
+  historyMsPerSlot: number;
   anchors: MarketAnchors;
 } {
   const anchorTimestamps = uniqueSeriesTimestamps(series);
@@ -166,7 +181,7 @@ function buildMarketAnchors(series: ResolvedSeries, timeZone: string): {
     }
     anchors.push({ timestamp, position });
   });
-  return { cadenceMs, anchors };
+  return { cadenceMs, historyMsPerSlot: averageMsPerSlot(anchors, cadenceMs), anchors };
 }
 
 /**
@@ -176,7 +191,7 @@ function buildMarketAnchors(series: ResolvedSeries, timeZone: string): {
  */
 function resolveMarketAnchors(
   series: ResolvedSeries,
-): { cadenceMs: number; anchors: MarketAnchors; timeZone: string } | null {
+): { cadenceMs: number; historyMsPerSlot: number; anchors: MarketAnchors; timeZone: string } | null {
   if (!series.timeBasis || series.timeBasis.kind !== "market") return null;
   const { timeZone, cadenceMs: configuredCadence } = series.timeBasis;
   const lastTimestamp = series.points.length > 0
@@ -191,7 +206,7 @@ function resolveMarketAnchors(
     && cached.timeZone === timeZone
     && cached.configuredCadence === configuredCadence
   ) {
-    return { cadenceMs: cached.cadenceMs, anchors: cached.anchors, timeZone };
+    return { cadenceMs: cached.cadenceMs, historyMsPerSlot: cached.historyMsPerSlot, anchors: cached.anchors, timeZone };
   }
   const built = buildMarketAnchors(series, timeZone);
   anchorCache.set(series, {
@@ -201,6 +216,7 @@ function resolveMarketAnchors(
     timeZone,
     configuredCadence,
     cadenceMs: built.cadenceMs,
+    historyMsPerSlot: built.historyMsPerSlot,
     anchors: built.anchors,
   });
   return { ...built, timeZone };
@@ -218,15 +234,16 @@ export function buildCompositeTimeScale(
   if (!anchorSeries || !resolved || resolved.anchors.length === 0) {
     return { kind: "calendar", startTime, endTime, rightOffsetRatio: offset };
   }
-  const { cadenceMs, anchors } = resolved;
-  const startPosition = positionForTimestamp({ anchors, cadenceMs }, startTime);
-  const endPosition = positionForTimestamp({ anchors, cadenceMs }, endTime);
+  const { cadenceMs, historyMsPerSlot, anchors } = resolved;
+  const startPosition = positionForTimestamp({ anchors, cadenceMs, historyMsPerSlot }, startTime);
+  const endPosition = positionForTimestamp({ anchors, cadenceMs, historyMsPerSlot }, endTime);
   return {
     kind: "market",
     startTime,
     endTime,
     anchorSeriesId: anchorSeries.id,
     cadenceMs,
+    historyMsPerSlot,
     anchors,
     startPosition,
     endPosition: endPosition > startPosition ? endPosition : startPosition + 1,
@@ -267,7 +284,7 @@ export function compositeTimeAtPosition(scale: CompositeTimeScale, position: num
   const next = anchors[low];
   const previous = anchors[low - 1];
   if (!previous) {
-    return anchors[0]!.timestamp + (position - anchors[0]!.position) * scale.cadenceMs;
+    return anchors[0]!.timestamp + (position - anchors[0]!.position) * (scale.historyMsPerSlot ?? scale.cadenceMs);
   }
   if (!next) {
     const last = anchors.at(-1)!;

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

@@ -70,6 +70,12 @@ interface CompositeMarketTimeScale {
   endTime: number;
   anchorSeriesId: string;
   cadenceMs: number;
+  /**
+   * Wall-clock time one slot stands for before the first observation: the
+   * loaded bars' own average, closed sessions included. Absent means
+   * `cadenceMs`.
+   */
+  historyMsPerSlot?: number;
   anchors: Array<{
     timestamp: number;
     position: number;
@@ -146,6 +152,12 @@ export interface CompositeCursorValue {
   unit: string;
   value: number | null;
   point: TimeSeriesPoint | null;
+  /**
+   * Under a cursor, the value is the series' last one before the cursor's
+   * time, which it has no observation at: another venue's hours, a coarser
+   * cadence, a dataset that lags.
+   */
+  carried?: boolean;
 }
 
 export interface CompositeChartScene {
@@ -161,6 +173,12 @@ export interface CompositeChartScene {
   cursorDate: Date | null;
   cursorXRatio: number | null;
   cursorValues: CompositeCursorValue[];
+  /**
+   * The panels before they were thinned to the plot's pixels, which the
+   * cursor reads values from: a thinned line or a bucket of candles has no
+   * point at most of the bars it stands for.
+   */
+  cursorPanels?: CompositePanelScene[];
   /** IANA zone the time axis and cursor read in: the venue's for intraday market bars, else UTC. */
   timeZone?: string;
 }

package/src/components/chart/composite/use-composite-viewport.ts

@@ -16,6 +16,17 @@ import type { CompositeChartProps } from "./types";
 
 /** How far past the first loaded observation a backfilling chart may pan, as a fraction of the view. */
 const HISTORICAL_PADDING_RATIO = 0.5;
+/**
+ * Once the source has said its history starts at the first loaded bar, a pan
+ * stops there, with this much air before it rather than half an empty view.
+ */
+const HISTORY_EDGE_PADDING_RATIO = 0.02;
+
+/** True when every market listing on the chart has said nothing older exists. */
+function reachesHistoryStart(series: readonly ResolvedSeries[]): boolean {
+  const market = series.filter((entry) => entry.observationKind === "market" && entry.points.length > 0);
+  return market.length > 0 && market.every((entry) => entry.historyStart !== undefined);
+}
 
 export function useCompositeViewport({
   viewport,
@@ -45,11 +56,13 @@ export function useCompositeViewport({
         previousAuthoredViewportRef.current,
         viewport ?? null,
       );
+  const historyStartReached = allowHistoricalBackfill && reachesHistoryStart(visibleSeries);
   const navigationFrame = useMemo(
     () => buildCompositeNavigationFrame(visibleSeries, marketTimelineSeries, {
-      historicalPaddingRatio: allowHistoricalBackfill ? HISTORICAL_PADDING_RATIO : 0,
+      historicalPaddingRatio: !allowHistoricalBackfill ? 0
+        : historyStartReached ? HISTORY_EDGE_PADDING_RATIO : HISTORICAL_PADDING_RATIO,
     }),
-    [allowHistoricalBackfill, marketTimelineSeries, visibleSeries],
+    [allowHistoricalBackfill, historyStartReached, marketTimelineSeries, visibleSeries],
   );
   const authoredViewport = useMemo(() => {
     // The requested dates own the axis, including gaps in a cached or partial
@@ -95,6 +108,21 @@ export function useCompositeViewport({
     }
   }, [authoredViewportChanged, userViewport, viewport, viewportResetKey]);
 
+  // Once the source says it has nothing older, a view left in the space
+  // before the first bar (where a pan went while the answer was on its way)
+  // settles onto it, as it would have stopped there had the answer come first.
+  useEffect(() => {
+    if (!historyStartReached || !navigationFrame) return;
+    setUserViewport((current) => {
+      if (!current) return current;
+      const positions = compositeViewportPositions(navigationFrame, current);
+      const span = positions ? positions.end - positions.start : 0;
+      if (!positions || positions.start >= navigationFrame.dataStartPosition - span * HISTORY_EDGE_PADDING_RATIO - 1e-6) return current;
+      viewportInteractionRef.current = "pan";
+      return fitCompositeViewport(navigationFrame, current);
+    });
+  }, [historyStartReached, navigationFrame]);
+
   const navigate = useCallback((
     kind: "pan" | "zoom",
     compute: (base: CompositeViewportRange, frame: CompositeNavigationFrame) => CompositeViewportRange,

package/src/components/chart/native/raster/crosshair.ts

@@ -1,10 +1,12 @@
-import { drawCircle, drawLine, parseHex } from "./primitives";
+import { drawCircle, drawLine, drawRing, parseHex } from "./primitives";
 import type { CellRect, NativeChartBitmap } from "./types";
 import { clamp } from "../../../../utils/math";
 
 interface CrosshairMarker {
   pixelY: number;
   color: string;
+  /** A ring rather than a dot: the series carries an earlier value here. */
+  hollow?: boolean;
 }
 
 export interface CrosshairStripsOptions {
@@ -56,15 +58,18 @@ export function renderCrosshairStrips(options: CrosshairStripsOptions): Crosshai
   const vertical = bitmap(verticalWidth, pixelHeight);
   const localX = clamp(x - verticalStart * cellWidth, 0, vertical.width - 1);
   drawLine(vertical.pixels, vertical.width, vertical.height, localX, 0, localX, vertical.height - 1, lineColor, 1.05);
+  let markerKey = "";
   for (const marker of options.markers ?? []) {
     const markerY = clamp(marker.pixelY, 0, Math.max(pixelHeight - 1, 0));
-    drawCircle(vertical.pixels, vertical.width, vertical.height, localX, markerY, 2.6, parseHex(marker.color));
+    if (marker.hollow) drawRing(vertical.pixels, vertical.width, vertical.height, localX, markerY, 2.6, 1.2, parseHex(marker.color));
+    else drawCircle(vertical.pixels, vertical.width, vertical.height, localX, markerY, 2.6, parseHex(marker.color));
+    markerKey += `${markerY.toFixed(1)}${marker.hollow ? "o" : "."}${marker.color}`;
   }
   if (y !== null) drawCircle(vertical.pixels, vertical.width, vertical.height, localX, y, 2.1, focusColor);
   strips.push({
     rect: { x: verticalStart, y: 0, width: verticalCols, height: rows },
     bitmap: vertical,
-    key: `v:${verticalStart}:${localX.toFixed(2)}:${y === null ? "-" : y.toFixed(2)}`,
+    key: `v:${verticalStart}:${localX.toFixed(2)}:${y === null ? "-" : y.toFixed(2)}:${markerKey}`,
   });
   if (y === null) return strips;