gloomberb 0.16.4 → 0.16.6

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

@@ -0,0 +1,150 @@
+import { Box, Text, useUiCapabilities } from "../../../ui";
+import { colors as themeColors } from "../../../theme/colors";
+import { displayWidth, truncateToDisplayWidth } from "../../../utils/format";
+import type { ResolvedSeries } from "../../../time-series/types";
+import { formatCompositeCarriedStamp, formatCompositePointDetails } from "./format";
+import { CompositeSeriesSwatch, formatLegendSeriesValue, withoutListingExchange } from "./legend";
+import type { SeriesLineCue } from "./series-cues";
+import type { CompositeChartColors, CompositeChartProps, CompositeChartScene } from "./types";
+
+/** A label this long or longer is cut; the legend above keeps the whole name. */
+const MAX_LABEL_CELLS = 24;
+/** Clear space between the crosshair and the readout beside it, px. */
+const CROSSHAIR_GAP_PX = 14;
+/** A row's swatch and its margin, and the box's padding and border, px. */
+const SWATCH_PX = 22;
+const BOX_CHROME_PX = 18;
+const NO_LINE_CUES: ReadonlyMap<string, SeriesLineCue> = new Map();
+
+interface ReadoutRow {
+  series: ResolvedSeries;
+  label: string;
+  value: string;
+  carried: string | null;
+  /** The row in full, with the observation's dates and source: what the legend's entry says for it. */
+  detail: string;
+}
+
+/**
+ * Every series' value at the crosshair, beside it: desktop and web, where the
+ * legend keeps the latest values. One row per line in the legend's order, in
+ * the line's own unit; a value carried from an earlier observation is dimmed
+ * and says when it is from. The time is the time axis's, under the cursor.
+ */
+export function CompositeCrosshairReadout({
+  scene,
+  series,
+  visibleSeriesIds,
+  lineCues = NO_LINE_CUES,
+  formatValue,
+  colors,
+  plotWidth,
+  left,
+  right,
+  top,
+}: {
+  scene: CompositeChartScene;
+  series: readonly ResolvedSeries[];
+  visibleSeriesIds: ReadonlySet<string>;
+  lineCues?: ReadonlyMap<string, SeriesLineCue>;
+  formatValue: CompositeChartProps["formatValue"];
+  colors: CompositeChartColors;
+  /** The plot's width in cells; the box is placed by CSS in the width the plot has, a fraction of a cell more. */
+  plotWidth: number;
+  /** The plot's inset from the chart's edges, in cells. */
+  left: number;
+  right: number;
+  top: number;
+}) {
+  const { cellWidthPx = 8 } = useUiCapabilities();
+  const cursorDate = scene.cursorDate;
+  const cursorXRatio = scene.cursorXRatio;
+  if (!cursorDate || cursorXRatio === null) return null;
+  const values = new Map(scene.cursorValues.map((entry) => [entry.seriesId, entry] as const));
+  const rows: ReadoutRow[] = series.flatMap((entry) => {
+    const cursor = values.get(entry.id);
+    if (!cursor || entry.hidden || !visibleSeriesIds.has(entry.id)) return [];
+    const label = withoutListingExchange(entry.label);
+    const value = formatLegendSeriesValue(entry, cursor.value, formatValue, scene);
+    const carried = cursor.carried && cursor.value != null && cursor.point
+      ? formatCompositeCarriedStamp(cursor.point.date, cursorDate, scene.timeZone)
+      : null;
+    return [{
+      series: entry,
+      label: displayWidth(label) > MAX_LABEL_CELLS ? truncateToDisplayWidth(label, MAX_LABEL_CELLS) : label,
+      value,
+      carried,
+      detail: [`${entry.label} ${value}${carried ? ` ${carried}` : ""}`, formatCompositePointDetails(cursor.point)].filter(Boolean).join(" · "),
+    }];
+  });
+  if (rows.length === 0) return null;
+  const labelWidth = Math.max(...rows.map((row) => displayWidth(row.label)));
+  // Beside the crosshair on the side with room for it, by the width its text
+  // takes; where neither side has, flush with the plot's edge farthest from it.
+  const tailCells = Math.max(...rows.map((row) => displayWidth(row.value) + (row.carried ? 1 + displayWidth(row.carried) : 0)));
+  const boxPx = SWATCH_PX + BOX_CHROME_PX + (labelWidth + 1 + tailCells) * cellWidthPx;
+  const plotPx = plotWidth * cellWidthPx;
+  const cursorPx = Math.max(0, Math.min(1, cursorXRatio)) * plotPx;
+  const placement = cursorPx + CROSSHAIR_GAP_PX + boxPx <= plotPx ? "right"
+    : cursorPx - CROSSHAIR_GAP_PX - boxPx >= 0 ? "left"
+    : cursorXRatio > 0.5 ? "start" : "end";
+  const position = placement === "start" ? { left: 0 }
+    : placement === "end" ? { right: 0 }
+    : {
+      left: `${Math.max(0, Math.min(1, cursorXRatio)) * 100}%`,
+      transform: placement === "left" ? `translateX(calc(-100% - ${CROSSHAIR_GAP_PX}px))` : `translateX(${CROSSHAIR_GAP_PX}px)`,
+    };
+  return (
+    <Box
+      position="absolute"
+      left={left}
+      top={top}
+      zIndex={30}
+      style={{
+        right: `calc(${right} * var(--cell-w))`,
+        width: "auto",
+        height: 0,
+        pointerEvents: "none",
+      }}
+    >
+      <Box
+        flexDirection="column"
+        position="absolute"
+        data-placement={placement}
+        style={{
+          ...position,
+          top: 6,
+          width: "max-content",
+          height: "auto",
+          padding: "4px 8px",
+          gap: 1,
+          borderRadius: 4,
+          border: `1px solid ${colors.grid}`,
+          backgroundColor: `color-mix(in srgb, ${colors.background} 94%, transparent)`,
+          whiteSpace: "pre",
+        }}
+        data-gloom-role="composite-chart-readout"
+      >
+        {rows.map((row) => (
+          <Box
+            key={row.series.id}
+            flexDirection="row"
+            alignItems="center"
+            height={1}
+            style={{ width: "auto" }}
+            data-gloom-role="composite-chart-readout-row"
+            data-gloom-label={row.detail}
+            data-carried={row.carried ? "true" : undefined}
+          >
+            <CompositeSeriesSwatch series={row.series} cue={lineCues.get(row.series.id) ?? null} filled={!row.carried} />
+            <Box width={labelWidth + 1} height={1} flexShrink={0}>
+              <Text fg={colors.textDim}>{row.label}</Text>
+            </Box>
+            <Text fg={row.carried ? colors.textDim : colors.text}>{row.value}</Text>
+            {row.carried ? <Text fg={themeColors.textMuted}>{` ${row.carried}`}</Text> : null}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

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

@@ -201,5 +201,5 @@ export function downsampleCompositeChartScene(
     if (next !== panel) changed = true;
     return next;
   });
-  return changed ? { ...scene, panels } : scene;
+  return changed ? { ...scene, panels, cursorPanels: scene.cursorPanels ?? scene.panels } : scene;
 }

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

@@ -484,3 +484,32 @@ export function formatCompositeTimeAxisDate(date: Date, startTime: number, endTi
     ? `${utcTime(wall)} ${zone}`
     : `${utcDate(wall).slice(5)} ${utcTime(wall)} ${zone}`;
 }
+
+/**
+ * The crosshair's place on the time axis. Intraday bars keep their time of
+ * day however wide the chart is: a three-month chart of 30-minute bars has
+ * thirteen under each date, and the cursor sits on one of them.
+ */
+export function formatCompositeCursorAxisDate(
+  date: Date, startTime: number, endTime: number, timeZone: string | undefined, intradayBars: boolean,
+): string {
+  if (!intradayBars || isIntradaySpan(startTime, endTime)) return formatCompositeTimeAxisDate(date, startTime, endTime, timeZone);
+  const { wall, zone } = onClock(date, timeZone);
+  return `${utcDate(wall)} ${utcTime(wall)} ${zone}`;
+}
+
+const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] as const;
+
+/**
+ * When a value carried under the cursor was observed: its time when it is
+ * from the cursor's own day, else its date (`Sep 2`, with the year when that
+ * differs), and the time too for an intraday bar.
+ */
+export function formatCompositeCarriedStamp(observed: Date, cursor: Date, timeZone?: string): string {
+  const seen = onClock(observed, timeZone).wall;
+  const at = onClock(cursor, timeZone).wall;
+  const time = utcTime(seen);
+  if (utcDate(seen) === utcDate(at)) return time;
+  const date = `${MONTH_NAMES[seen.getUTCMonth()]} ${seen.getUTCDate()}${seen.getUTCFullYear() === at.getUTCFullYear() ? "" : ` ${seen.getUTCFullYear()}`}`;
+  return time === "00:00" ? date : `${date} ${time}`;
+}

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

@@ -181,13 +181,19 @@ function clampPositions(
   frame: CompositeNavigationFrame,
   range: PositionRange,
   paddingRatio: number,
+  from?: PositionRange,
 ): PositionRange {
   const dataSpan = Math.max(frame.dataEndPosition - frame.dataStartPosition, 0);
   const maximumSpan = Math.max(dataSpan * (1 + paddingRatio), frame.minimumSpanPositions);
   const span = clamp(range.end - range.start, frame.minimumSpanPositions, maximumSpan);
-  let start = Math.max(range.start, frame.dataStartPosition - span * paddingRatio);
+  // A view already past a limit stays where it is rather than being pulled
+  // back across it: the limits move when bars arrive or the source says it
+  // has no older ones, and that must not jump the view under the pointer.
+  const oldest = frame.dataStartPosition - span * paddingRatio;
+  let start = Math.max(range.start, from ? Math.min(oldest, from.start) : oldest);
   // The newest observation is the hard edge: nothing lies beyond it yet.
-  start = Math.min(start, frame.dataEndPosition - span);
+  const newest = frame.dataEndPosition - span;
+  start = Math.min(start, from ? Math.max(newest, from.start) : newest);
   return { start, end: start + span };
 }
 
@@ -216,6 +222,7 @@ export function panCompositeViewport(
     frame,
     { start: positions.start - shift, end: positions.end - shift },
     frame.historicalPaddingRatio,
+    positions,
   );
   return viewportFromPositions(frame, clamped);
 }

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

@@ -5,7 +5,7 @@ import { CANONICAL_EXCHANGE_ALIASES } from "../../../utils/exchanges";
 import { displayWidth, formatPercentRaw, truncateToDisplayWidth } from "../../../utils/format";
 import type { ResolvedSeries } from "../../../time-series/types";
 import { consumeChartMouseEvent, type ChartMouseEvent } from "../core/pointer";
-import { formatCompositePointDetails, formatCompositeSeriesValue, seriesPriceReference } from "./format";
+import { formatCompositeCarriedStamp, formatCompositePointDetails, formatCompositeSeriesValue, seriesPriceReference } from "./format";
 import type { CompositeChartProps, CompositeChartScene } from "./types";
 import { seriesCueCssBackground, type SeriesLineCue } from "./series-cues";
 
@@ -17,7 +17,8 @@ const DOT_MARKER = "● ";
 const DOM_DOT_CELLS = 2;
 const DOM_LINE_CELLS = 3;
 
-function legendValue(
+/** A series' value as the legend and the crosshair readout print it, in the series' own unit. */
+export function formatLegendSeriesValue(
   series: ResolvedSeries,
   value: number | null,
   formatValue: CompositeChartProps["formatValue"],
@@ -44,15 +45,98 @@ function axisPriceReference(scene: CompositeChartScene | null, series: ResolvedS
   return own;
 }
 
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] as const;
+
+/** `Oct 4`, the axis's own wording, with the year when the chart ends in another. */
+function legendDateText(date: Date, endTime: number | undefined): string {
+  const text = `${MONTHS[date.getUTCMonth()]} ${date.getUTCDate()}`;
+  const endYear = endTime === undefined ? null : new Date(endTime).getUTCFullYear();
+  return endYear === null || endYear === date.getUTCFullYear() ? text : `${text} ${date.getUTCFullYear()}`;
+}
+
+/**
+ * A dataset's values arrive days late, so the legend dates them. Idle, one
+ * date leads the legend when it is every value's; otherwise, and under the
+ * cursor for a value older than the cursor's date, each carries its own.
+ */
+function legendValueDates(
+  series: readonly ResolvedSeries[],
+  scene: CompositeChartScene | null,
+  cursorValueById: ReadonlyMap<string, CompositeChartScene["cursorValues"][number]>,
+): { lead: string | null; own: ReadonlyMap<string, string> } {
+  const dates = new Map<string, Date>();
+  let valued = 0;
+  for (const entry of series) {
+    const cursorValue = cursorValueById.get(entry.id);
+    if (cursorValue?.value == null) continue;
+    valued += 1;
+    if (entry.observationKind === "dataset" && cursorValue.point) dates.set(entry.id, cursorValue.point.date);
+  }
+  const text = new Map([...dates].map(([id, date]) => [id, legendDateText(date, scene?.endTime)] as const));
+  const cursorDate = scene?.cursorDate;
+  if (cursorDate) {
+    const cursorDay = cursorDate.toISOString().slice(0, 10);
+    const own = new Map([...text].filter(([id]) => dates.get(id)!.toISOString().slice(0, 10) !== cursorDay));
+    // Any other value carried from before the cursor says when it is from:
+    // another venue's last bar, a coarser series, the last print before a halt.
+    for (const entry of series) {
+      const cursorValue = cursorValueById.get(entry.id);
+      if (dates.has(entry.id) || !cursorValue?.carried || cursorValue.value == null || !cursorValue.point) continue;
+      own.set(entry.id, formatCompositeCarriedStamp(cursorValue.point.date, cursorDate, scene?.timeZone));
+    }
+    return { lead: null, own };
+  }
+  const shared = new Set(text.values());
+  return text.size > 0 && text.size === valued && shared.size === 1
+    ? { lead: [...shared][0]!, own: new Map() }
+    : { lead: null, own: text };
+}
+
 const LISTED_TICKER_PATTERN = /(^|[\s(])([A-Z0-9^][A-Z0-9.^=/-]*):([A-Z0-9]{2,})(?=$|[\s),])/g;
 
 /** `Volume AAPL:XNAS Price` → `Volume AAPL Price`, for a legend name that must shorten. */
-function withoutListingExchange(label: string): string {
+export function withoutListingExchange(label: string): string {
   return label.replace(LISTED_TICKER_PATTERN, (match, lead: string, symbol: string, exchange: string) => (
     CANONICAL_EXCHANGE_ALIASES[exchange] ? `${lead}${symbol}` : match
   ));
 }
 
+/** The legend's marker for a series on the desktop: its line as the plot strokes it, or a dot. */
+export function CompositeSeriesSwatch({ series, cue, filled = true }: {
+  series: ResolvedSeries;
+  cue: SeriesLineCue | null;
+  filled?: boolean;
+}) {
+  return cue ? (
+    // The line as the plot strokes it: solid, dashed, dotted or heavy.
+    <Box
+      flexShrink={0}
+      style={{
+        width: 16,
+        height: Math.max(2, Math.round(cue.thickness)),
+        marginInlineEnd: 6,
+        background: seriesCueCssBackground(cue, series.color),
+        opacity: filled ? 1 : 0.35,
+      }}
+      data-gloom-role="composite-chart-legend-marker"
+      data-gloom-cue={cue.id}
+    />
+  ) : (
+    <Box
+      flexShrink={0}
+      style={{
+        width: 8,
+        height: 8,
+        marginInlineEnd: 6,
+        borderRadius: 999,
+        border: `1px solid ${series.color}`,
+        backgroundColor: filled ? series.color : "transparent",
+      }}
+      data-gloom-role="composite-chart-legend-marker"
+    />
+  );
+}
+
 export function CompositeLegend({
   scene,
   series,
@@ -91,6 +175,7 @@ export function CompositeLegend({
   const cursorValueById = new Map(
     scene?.cursorValues.map((entry) => [entry.seriesId, entry] as const) ?? [],
   );
+  const valueDates = legendValueDates(series, scene, cursorValueById);
   const entries = series.map((entry) => {
     const cue = lineCues.get(entry.id) ?? null;
     const marker = cue ? `${cellPlot ? cue.glyph : cue.sample} ` : DOT_MARKER;
@@ -103,14 +188,15 @@ export function CompositeLegend({
         && Number.isFinite(entry.latestChangePercent)
       ? ` ${formatPercentRaw(entry.latestChangePercent)}`
       : "";
+    const ownDate = valueDates.own.get(entry.id);
     const valueText = entry.points.length === 0
       ? entry.hidden ? "" : "no data"
-      : `${legendValue(
+      : `${formatLegendSeriesValue(
         entry,
         cursorValue?.value ?? null,
         formatValue,
         scene,
-      )}${changeText}`;
+      )}${ownDate ? ` ${ownDate}` : ""}${changeText}`;
     const fullText = [entry.label, valueText].filter(Boolean).join(" ");
     const details = formatCompositePointDetails(cursorValue?.point);
     const exactTotal = entry.unitGroup.split(":")[0] === "currency-total"
@@ -150,7 +236,8 @@ export function CompositeLegend({
   // One cell in from the pane border, so the first marker and the legend text
   // line up with the query bar and tables above and below the chart.
   const inset = width > 1 ? 1 : 0;
-  const innerWidth = Math.max(0, width - inset);
+  const leadWidth = valueDates.lead ? displayWidth(valueDates.lead) + 1 : 0;
+  const innerWidth = Math.max(0, width - inset - leadWidth);
   const resolvedAccessoryWidth = accessory
     ? Math.max(1, Math.min(innerWidth, Math.floor(accessoryWidth ?? 14)))
     : 0;
@@ -253,6 +340,11 @@ export function CompositeLegend({
       zIndex={accessory ? 40 : 20}
       data-gloom-role="composite-chart-legend"
     >
+      {valueDates.lead ? (
+        <Box width={leadWidth} height={1} flexShrink={0} data-gloom-role="composite-chart-legend-date">
+          <Text fg={themeColors.textMuted}>{valueDates.lead}</Text>
+        </Box>
+      ) : null}
       {seriesWidth > 0 ? (
         <ScrollBox
           ref={scrollRef}
@@ -293,33 +385,8 @@ export function CompositeLegend({
                 data-visible={entryVisible ? "true" : "false"}
                 title={isDesktopWeb ? tooltip : undefined}
               >
-                {isDesktopWeb && cue ? (
-                  // The line as the plot strokes it: solid, dashed, dotted or heavy.
-                  <Box
-                    flexShrink={0}
-                    style={{
-                      width: 16,
-                      height: Math.max(2, Math.round(cue.thickness)),
-                      marginInlineEnd: 6,
-                      background: seriesCueCssBackground(cue, entry.color),
-                      opacity: entryVisible ? 1 : 0.35,
-                    }}
-                    data-gloom-role="composite-chart-legend-marker"
-                    data-gloom-cue={cue.id}
-                  />
-                ) : isDesktopWeb ? (
-                  <Box
-                    flexShrink={0}
-                    style={{
-                      width: 8,
-                      height: 8,
-                      marginInlineEnd: 6,
-                      borderRadius: 999,
-                      border: `1px solid ${entry.color}`,
-                      backgroundColor: entryVisible ? entry.color : "transparent",
-                    }}
-                    data-gloom-role="composite-chart-legend-marker"
-                  />
+                {isDesktopWeb ? (
+                  <CompositeSeriesSwatch series={entry} cue={cue} filled={entryVisible} />
                 ) : (
                   <Text fg={entryVisible ? entry.color : themeColors.textMuted}>{marker}</Text>
                 )}

package/src/components/chart/composite/panel-bitmap.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { NativeChartBitmap } from "../native/chart-rasterizer";
 import type { StaticChartBitmapSize } from "./bitmap";
 import { renderCompositePanelBitmap } from "./rasterizer";
@@ -8,6 +8,29 @@ import type { CompositeChartColors, CompositePanelScene } from "./types";
 // live-data paints or depending on a foreground animation frame.
 const DESKTOP_BITMAP_RESIZE_DEBOUNCE_MS = 32;
 
+const pendingResizes = new Set<() => void>();
+let resizeTimer: ReturnType<typeof globalThis.setTimeout> | null = null;
+
+/** All plots resized by a layout publish their bitmaps in one task, hence one React batch. */
+function scheduleResize(render: () => void): () => void {
+  pendingResizes.add(render);
+  if (resizeTimer === null) {
+    resizeTimer = globalThis.setTimeout(() => {
+      resizeTimer = null;
+      const renders = [...pendingResizes];
+      pendingResizes.clear();
+      for (const draw of renders) draw();
+    }, DESKTOP_BITMAP_RESIZE_DEBOUNCE_MS);
+  }
+  return () => {
+    pendingResizes.delete(render);
+    if (pendingResizes.size === 0 && resizeTimer !== null) {
+      clearTimeout(resizeTimer);
+      resizeTimer = null;
+    }
+  };
+}
+
 function renderPanelBitmap(
   panel: CompositePanelScene,
   bitmapSize: StaticChartBitmapSize,
@@ -35,6 +58,9 @@ export function useCompositePanelBitmap({
 }): NativeChartBitmap | null {
   const [desktopBitmap, setDesktopBitmap] = useState<NativeChartBitmap | null>(null);
   const desktopBitmapRef = useRef<NativeChartBitmap | null>(null);
+  const desktopRenderedColorsRef = useRef<CompositeChartColors | null>(null);
+  /** The plot's first bitmap, not painted yet: a new size before that paint draws at once, not after the debounce. */
+  const desktopUnpaintedRef = useRef(false);
   const desktopRenderInputRef = useRef<{
     panel: CompositePanelScene;
     pixelWidth: number;
@@ -43,7 +69,7 @@ export function useCompositePanelBitmap({
   } | null>(null);
   const desktopRequestedSizeRef = useRef<{ pixelWidth: number; pixelHeight: number } | null>(null);
   const desktopRenderedSizeRef = useRef<{ pixelWidth: number; pixelHeight: number } | null>(null);
-  const desktopRenderTimerRef = useRef<ReturnType<typeof globalThis.setTimeout> | null>(null);
+  const desktopCancelRenderRef = useRef<(() => void) | null>(null);
   const desktopActiveRef = useRef(false);
   const pixelWidth = bitmapSize?.pixelWidth ?? null;
   const pixelHeight = bitmapSize?.pixelHeight ?? null;
@@ -59,32 +85,40 @@ export function useCompositePanelBitmap({
     return renderPanelBitmap(panel, bitmapSize, colors, true);
   }, [bitmapSize, colors, isDesktopWeb, panel]);
 
-  useEffect(() => {
+  // A newly mounted plot, or a new palette, must have pixels before the
+  // browser paints. Only a resize may keep the previous bitmap briefly.
+  useLayoutEffect(() => {
     const cancelRender = () => {
-      if (desktopRenderTimerRef.current === null) return;
-      clearTimeout(desktopRenderTimerRef.current);
-      desktopRenderTimerRef.current = null;
+      desktopCancelRenderRef.current?.();
+      desktopCancelRenderRef.current = null;
     };
-    const scheduleRender = (delay: number) => {
-      if (desktopRenderTimerRef.current !== null) return;
-      desktopRenderTimerRef.current = globalThis.setTimeout(() => {
-        desktopRenderTimerRef.current = null;
-        if (!desktopActiveRef.current) return;
-        const input = desktopRenderInputRef.current;
-        if (!input) return;
-        const next = renderPanelBitmap(
-          input.panel,
-          { pixelWidth: input.pixelWidth, pixelHeight: input.pixelHeight },
-          input.colors,
-        );
-        if (!desktopActiveRef.current) return;
-        desktopRenderedSizeRef.current = {
-          pixelWidth: input.pixelWidth,
-          pixelHeight: input.pixelHeight,
-        };
-        desktopBitmapRef.current = next;
-        setDesktopBitmap(next);
-      }, delay);
+    const render = () => {
+      if (!desktopActiveRef.current) return;
+      const first = desktopBitmapRef.current === null;
+      const input = desktopRenderInputRef.current;
+      if (!input) return;
+      const next = renderPanelBitmap(
+        input.panel,
+        { pixelWidth: input.pixelWidth, pixelHeight: input.pixelHeight },
+        input.colors,
+      );
+      desktopRenderedSizeRef.current = {
+        pixelWidth: input.pixelWidth,
+        pixelHeight: input.pixelHeight,
+      };
+      desktopRenderedColorsRef.current = input.colors;
+      desktopBitmapRef.current = next;
+      setDesktopBitmap(next);
+      // A chart that fills its box when it opens takes its measured size
+      // before its first paint, by the end of the frame after next. Later
+      // sizes (a resize) keep the debounce.
+      if (!first) return;
+      desktopUnpaintedRef.current = true;
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(() => requestAnimationFrame(() => { desktopUnpaintedRef.current = false; }));
+      } else {
+        desktopUnpaintedRef.current = false;
+      }
     };
 
     if (!isDesktopWeb) {
@@ -116,22 +150,23 @@ export function useCompositePanelBitmap({
       && renderedSize.pixelWidth === pixelWidth
       && renderedSize.pixelHeight === pixelHeight;
 
-    if (!desktopBitmapRef.current || sizeAlreadyRendered) {
-      if (requestedSizeChanged) cancelRender();
-      scheduleRender(0);
+    if (!desktopBitmapRef.current || sizeAlreadyRendered || desktopRenderedColorsRef.current !== colors || desktopUnpaintedRef.current) {
+      cancelRender();
+      render();
       return;
     }
 
-    if (!requestedSizeChanged || desktopRenderTimerRef.current !== null) return;
-    scheduleRender(DESKTOP_BITMAP_RESIZE_DEBOUNCE_MS);
+    if (!requestedSizeChanged || desktopCancelRenderRef.current !== null) return;
+    desktopCancelRenderRef.current = scheduleResize(() => {
+      desktopCancelRenderRef.current = null;
+      render();
+    });
   }, [colors, isDesktopWeb, panel, pixelHeight, pixelWidth]);
 
   useEffect(() => () => {
     desktopActiveRef.current = false;
-    if (desktopRenderTimerRef.current !== null) {
-      clearTimeout(desktopRenderTimerRef.current);
-      desktopRenderTimerRef.current = null;
-    }
+    desktopCancelRenderRef.current?.();
+    desktopCancelRenderRef.current = null;
   }, []);
 
   if (!bitmapSize) return null;

package/src/components/chart/composite/panel-labels.ts

@@ -1,34 +1,35 @@
 import type { ChartSurfaceProps } from "../../../ui";
 import type { NativeChartBitmap } from "../native/chart-rasterizer";
 import { compositeAxisTicks, formatCompositeCursorValue, type CompositeAxisValueFormatter } from "./format";
-import type { CompositeColumnLayout } from "./column-layout";
 import { projectCompositeValue, unprojectCompositeValue } from "./scene";
 import type { CompositeAxisDomain, CompositeChartScene, CompositePanelScene } from "./types";
 
+/**
+ * The crosshair, and a marker where it crosses each line: hollow where the
+ * line has no observation at the cursor's time and carries its last one.
+ * Columns are read off their own bars.
+ */
 export function resolvePanelCrosshair(
   panel: CompositePanelScene,
-  columnLayout: CompositeColumnLayout,
   bitmap: NativeChartBitmap | null,
-  cursorXRatio: number | null,
+  scene: Pick<CompositeChartScene, "cursorXRatio" | "cursorValues">,
   cursorYRatio: number | null,
   color: string,
 ): ChartSurfaceProps["crosshair"] {
+  const cursorXRatio = scene.cursorXRatio;
   if (!bitmap || cursorXRatio === null) return null;
+  const values = new Map(scene.cursorValues.map((entry) => [entry.seriesId, entry] as const));
   const markers = panel.series.flatMap((series) => {
-    // Column cohorts are drawn at their group center, not each observation's
-    // own timestamp, so match the position the bar actually occupies.
-    const cursorPoint = series.points.find((point) => {
-      const xRatio = series.source.style === "columns"
-        ? columnLayout.groupByPoint.get(point)?.xRatio ?? point.xRatio
-        : point.xRatio;
-      return Math.abs(xRatio - cursorXRatio) < 1e-9;
-    });
-    return cursorPoint
-      ? [{
-        pixelY: cursorPoint.yRatio * Math.max(bitmap.height - 1, 0),
-        color: series.source.color,
-      }]
-      : [];
+    const cursor = values.get(series.source.id);
+    const domain = panel.axes[series.source.axis];
+    if (!cursor || cursor.value === null || !domain || series.source.style === "columns" || series.source.profile) return [];
+    const yRatio = projectCompositeValue(cursor.value, domain);
+    if (yRatio === null || yRatio < 0 || yRatio > 1) return [];
+    return [{
+      pixelY: yRatio * Math.max(bitmap.height - 1, 0),
+      color: series.source.color,
+      ...(cursor.carried ? { hollow: true } : {}),
+    }];
   });
   return {
     pixelX: cursorXRatio * Math.max(bitmap.width - 1, 0),

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

@@ -39,6 +39,7 @@ function sameSeriesMeta(left: ResolvedSeries, right: ResolvedSeries): boolean {
     && left.interpolation === right.interpolation
     && left.warning === right.warning
     && left.hidden === right.hidden
+    && left.historyStart?.getTime() === right.historyStart?.getTime()
     && left.observationKind === right.observationKind
     && left.timeBasis?.kind === right.timeBasis?.kind
     && left.timeBasis?.timeZone === right.timeBasis?.timeZone