gloomberb 0.7.2 → 0.7.4

package/src/components/chart/comparison-stock-chart.tsx

@@ -7,12 +7,12 @@ import { useChartQueries } from "../../market-data/hooks";
 import { buildChartKey } from "../../market-data/selectors";
 import { useAppSelector, usePaneSettingValue } from "../../state/app-context";
 import { usePaneFooter, type PaneHint } from "../layout/pane-footer";
-import { blendHex, colors, getComparisonSeriesColor, priceColor } from "../../theme/colors";
+import { blendHex, colors, getComparisonSeriesColor } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import type { BrokerContractRef } from "../../types/instrument";
 import type { PricePoint } from "../../types/financials";
 import { formatPercentRaw } from "../../utils/format";
-import { formatMarketPriceWithCurrency, formatSignedMarketPrice } from "../../utils/market-format";
+import { formatMarketPriceWithCurrency } from "../../utils/market-format";
 import { getSharedMarketData } from "../../plugins/registry";
 import {
   applyComparisonZoomAroundAnchor,
@@ -30,7 +30,6 @@ import {
 import {
   buildVisibleDateWindow,
   clearActivePreset,
-  formatVisibleSpanLabel,
   needsCanonicalPresetViewportReset,
   resolveChartBodyState,
   resolveCanonicalPresetViewport,
@@ -96,9 +95,10 @@ import {
   resolveNativeSurfaceVisibleRect,
   type NativeSurfaceRenderableNode,
 } from "./native/surface-visibility";
-import { formatDateShort, resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
+import { resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
 import { TimeAxisLabel } from "./time-axis-label";
 import { PriceAxisLabels } from "./price-axis-labels";
+import { getChartMarketSessionKey, resolveChartMarketSession } from "./market-session";
 
 const MODE_CHIPS: Record<ComparisonChartRenderMode, string> = {
   area: "A",
@@ -393,6 +393,7 @@ function buildComparisonNativeBitmapKey(
   pixelWidth: number,
   pixelHeight: number,
   paletteKey: string,
+  marketSessionKey: string,
 ): string {
   const fingerprint = projection.series
     .map((series) => [
@@ -413,6 +414,7 @@ function buildComparisonNativeBitmapKey(
     pixelWidth,
     pixelHeight,
     paletteKey,
+    marketSessionKey,
     fingerprint,
   ].join("::");
 }
@@ -445,6 +447,23 @@ function clipText(text: string, width: number): string {
   return `${text.slice(0, width - 3)}...`;
 }
 
+function formatLegendSummary(
+  symbol: string,
+  rawValue: number | null,
+  baseValue: number | null,
+  currency: string,
+  priceRange: number | undefined,
+): string {
+  if (rawValue === null) return `${symbol} waiting`;
+  const price = formatMarketPriceWithCurrency(rawValue, currency, {
+    minimumFractionDigits: 2,
+    precisionOffset: 1,
+    priceRange,
+  });
+  if (baseValue === null || baseValue === 0) return `${symbol} ${price}`;
+  return `${symbol} ${price} ${formatPercentRaw(((rawValue - baseValue) / baseValue) * 100)}`;
+}
+
 function getInitialComparisonMode(mode: string | undefined): ComparisonChartRenderMode {
   return mode === "line" ? "line" : "area";
 }
@@ -555,6 +574,7 @@ function ComparisonStockChartView({
   const mouseCrosshairDisabledRef = useRef(false);
   const cursorMotionKindRef = useRef<ChartCursorMotionKind>("discrete");
   const animationFrameRef = useRef<number | null>(null);
+  const lastAppliedStoredSelectionKeyRef = useRef<string | null>(null);
   const pendingCanonicalResetRef = useRef(1);
   const appliedCanonicalResetRef = useRef(0);
   const pendingExpansionRef = useRef<PendingExpansionAction>(null);
@@ -564,7 +584,7 @@ function ComparisonStockChartView({
   const axisRightPadding = 1;
   const minimumAxisWidth = axisMode === "percent" ? 5 : 4;
   const axisGap = axisSectionWidthBudget > 0 ? 1 : 0;
-  const headerRows = 1;
+  const headerRows = 0;
   const controlRows = 2;
   const timeAxisRows = 1;
   const helpRows = 0;
@@ -581,7 +601,16 @@ function ComparisonStockChartView({
     bgColor: colors.bg,
     gridColor: blendHex(colors.bg, colors.border, 0.55),
     crosshairColor: colors.borderFocused,
+    preMarketBgColor: blendHex(colors.bg, "#1d4ed8", 0.18),
+    postMarketBgColor: blendHex(colors.bg, "#b45309", 0.18),
   }), [colors.bg, colors.border, colors.borderFocused]);
+  const marketSession = useMemo(() => resolveChartMarketSession(symbolSources.map((source) => ({
+    exchange: source.exchange,
+    primaryExchange: source.instrument?.primaryExchange,
+    currency: source.currency,
+    assetCategory: source.instrument?.secType,
+  }))), [symbolSources]);
+  const marketSessionKey = useMemo(() => getChartMarketSessionKey(marketSession), [marketSession]);
 
   const setSelectedSymbol = (symbol: string) => {
     setViewState((current) => (
@@ -591,13 +620,35 @@ function ComparisonStockChartView({
     ));
   };
 
-  const capabilityKey = useMemo(() => symbolSources.map((source) => [
-    source.symbol,
-    source.exchange,
-    source.brokerId ?? "",
-    source.brokerInstanceId ?? "",
-    source.instrument?.conId ?? "",
-  ].join(":")).join("|"), [symbolSources]);
+  const marketDataProvider = getSharedMarketData();
+  const capabilityDescriptor = useMemo(() => {
+    const sources = symbolSources.map((source) => ({
+      symbol: source.symbol,
+      exchange: source.exchange,
+      brokerId: source.brokerId,
+      brokerInstanceId: source.brokerInstanceId,
+      instrument: source.instrument,
+    }));
+    return {
+      key: sources.map((source) => [
+        source.symbol,
+        source.exchange,
+        source.brokerId ?? "",
+        source.brokerInstanceId ?? "",
+        source.instrument?.conId ?? "",
+        source.instrument?.localSymbol ?? "",
+        source.instrument?.symbol ?? "",
+      ].join(":")).join("|"),
+      sources,
+    };
+  }, [symbolSources]);
+  const effectiveResolutionSupport = useMemo<ChartResolutionSupport[]>(() => (
+    resolutionSupport ?? DEFAULT_VISIBLE_MANUAL_CHART_RESOLUTIONS.map((resolution) => ({ resolution, maxRange: "ALL" as const }))
+  ), [resolutionSupport]);
+  const selectionSupportMap = useMemo(
+    () => buildChartResolutionSupportMap(effectiveResolutionSupport),
+    [effectiveResolutionSupport],
+  );
 
   useEffect(() => {
     if (symbols.includes(viewState.selectedSymbol ?? "")) return;
@@ -608,21 +659,25 @@ function ComparisonStockChartView({
   }, [symbols, viewState.selectedSymbol]);
 
   useEffect(() => {
+    const storedSelectionKey = `${storedRangePreset}:${storedResolution}`;
+    if (lastAppliedStoredSelectionKeyRef.current === storedSelectionKey) return;
+
+    lastAppliedStoredSelectionKeyRef.current = storedSelectionKey;
     pendingCanonicalResetRef.current += 1;
     setViewState((current) => (
       storedResolution === "auto"
-        ? resolveStoredChartSelection(current, storedRangePreset, storedResolution, supportMap)
+        ? resolveStoredChartSelection(current, storedRangePreset, storedResolution, selectionSupportMap)
         : resolvePresetSelection(
           {
             ...current,
             resolution: storedResolution,
           },
           storedRangePreset,
-          getSupportMaxRange(supportMap, storedResolution),
+          getSupportMaxRange(selectionSupportMap, storedResolution),
         )
     ));
     updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
-  }, [storedRangePreset, storedResolution, supportMap]);
+  }, [selectionSupportMap, storedRangePreset, storedResolution]);
 
   const commitDisplayCursor = (next: DisplayCursorState) => {
     displayCursorRef.current = next;
@@ -705,15 +760,15 @@ function ComparisonStockChartView({
   ), [nativeSurfaceManager]);
 
   useEffect(() => {
-    const provider = getSharedMarketData();
-    if ((!provider?.getChartResolutionSupport && !provider?.getChartResolutionCapabilities) || symbolSources.length === 0) {
+    const provider = marketDataProvider;
+    if ((!provider?.getChartResolutionSupport && !provider?.getChartResolutionCapabilities) || capabilityDescriptor.sources.length === 0) {
       setResolutionSupport(null);
       return;
     }
 
     let cancelled = false;
     setResolutionSupport(null);
-    Promise.all(symbolSources.map(async (source) => {
+    Promise.all(capabilityDescriptor.sources.map(async (source) => {
       try {
         const support = provider.getChartResolutionSupport
           ? await provider.getChartResolutionSupport(
@@ -757,11 +812,7 @@ function ComparisonStockChartView({
     return () => {
       cancelled = true;
     };
-  }, [capabilityKey, symbolSources]);
-
-  const effectiveResolutionSupport = useMemo<ChartResolutionSupport[]>(() => (
-    resolutionSupport ?? DEFAULT_VISIBLE_MANUAL_CHART_RESOLUTIONS.map((resolution) => ({ resolution, maxRange: "ALL" as const }))
-  ), [resolutionSupport]);
+  }, [capabilityDescriptor.key, marketDataProvider]);
   const availableManualResolutions = resolutionSupport?.map((entry) => entry.resolution) ?? DEFAULT_VISIBLE_MANUAL_CHART_RESOLUTIONS;
   const effectiveResolution: ChartResolution = viewState.resolution !== "auto"
     && resolutionSupport !== null
@@ -873,7 +924,6 @@ function ComparisonStockChartView({
   ]);
   const axisSectionWidth = axisWidth + axisRightPadding;
   const chartWidth = Math.max(width - axisSectionWidth - axisGap, minChartWidth);
-  const maxCursorX = chartWidth - 1;
   const seriesDates = useMemo(() => getUniqueSortedSeriesDates(series), [series]);
   const visibleDateWindow = useMemo(() => buildVisibleDateWindow(seriesDates, viewState.panOffset, viewState.zoomLevel), [seriesDates, viewState.panOffset, viewState.zoomLevel]);
   const activePreset = resolveVisibleActivePreset(seriesDates, {
@@ -1006,6 +1056,16 @@ function ComparisonStockChartView({
     ));
   };
 
+  const selectSymbolByOffset = (offset: number) => {
+    setViewState((current) => {
+      const currentIndex = Math.max(symbols.indexOf(current.selectedSymbol ?? symbols[0] ?? ""), 0);
+      return {
+        ...current,
+        selectedSymbol: symbols[clamp(currentIndex + offset, 0, symbols.length - 1)] ?? current.selectedSymbol,
+      };
+    });
+  };
+
   useEffect(() => {
     const remapCursor = (cursor: DisplayCursorState) => buildDisplayCursorState(
       cursor.cellX,
@@ -1040,7 +1100,8 @@ function ComparisonStockChartView({
     cursorY: null,
     selectedSymbol: viewState.selectedSymbol,
     colors: chartColors,
-  }), [chartColors, chartHeight, chartWidth, projection, viewState.selectedSymbol]);
+    marketSession,
+  }), [chartColors, chartHeight, chartWidth, marketSession, projection, viewState.selectedSymbol]);
   const displayScene = useMemo(() => buildComparisonChartScene(projection, {
     width: chartWidth,
     height: chartHeight,
@@ -1048,7 +1109,8 @@ function ComparisonStockChartView({
     cursorY: displayCursorY,
     selectedSymbol: viewState.selectedSymbol,
     colors: chartColors,
-  }), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, projection, viewState.selectedSymbol]);
+    marketSession,
+  }), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, marketSession, projection, viewState.selectedSymbol]);
 
   const staticResult = useMemo(() => renderComparisonChart(projection, {
     width: chartWidth,
@@ -1057,7 +1119,8 @@ function ComparisonStockChartView({
     cursorY: null,
     selectedSymbol: viewState.selectedSymbol,
     colors: chartColors,
-  }), [chartColors, chartHeight, chartWidth, projection, viewState.selectedSymbol]);
+    marketSession,
+  }), [chartColors, chartHeight, chartWidth, marketSession, projection, viewState.selectedSymbol]);
 
   const interactiveResult = useMemo(() => (
     effectiveRenderer === "kitty" || useCanvasChart
@@ -1069,8 +1132,9 @@ function ComparisonStockChartView({
         cursorY: displayCursorY,
         selectedSymbol: viewState.selectedSymbol,
         colors: chartColors,
+        marketSession,
       })
-  ), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, effectiveRenderer, projection, useCanvasChart, viewState.selectedSymbol]);
+  ), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, effectiveRenderer, marketSession, projection, useCanvasChart, viewState.selectedSymbol]);
 
   const result = effectiveRenderer === "kitty" || useCanvasChart ? staticResult : interactiveResult!;
   const timeAxisLabel = result.timeLabels || staticResult.timeLabels;
@@ -1234,7 +1298,14 @@ function ComparisonStockChartView({
       viewState.selectedSymbol,
       bitmapSize.pixelWidth,
       bitmapSize.pixelHeight,
-      [chartColors.bgColor, chartColors.gridColor, chartColors.crosshairColor].join(","),
+      [
+        chartColors.bgColor,
+        chartColors.gridColor,
+        chartColors.crosshairColor,
+        chartColors.preMarketBgColor,
+        chartColors.postMarketBgColor,
+      ].join(","),
+      marketSessionKey,
     );
     const cachedBitmap = lastNativeBaseBitmapRef.current?.key === bitmapKey
       ? lastNativeBaseBitmapRef.current.bitmap
@@ -1264,7 +1335,10 @@ function ComparisonStockChartView({
     chartColors.bgColor,
     chartColors.crosshairColor,
     chartColors.gridColor,
+    chartColors.postMarketBgColor,
+    chartColors.preMarketBgColor,
     effectiveRenderer,
+    marketSessionKey,
     nativeSurfaceManager,
     paneId,
     projection,
@@ -1425,22 +1499,6 @@ function ComparisonStockChartView({
       case "t":
         onEditTickers?.();
         return;
-      case "h":
-        mouseCrosshairDisabledRef.current = false;
-        cursorMotionKindRef.current = "discrete";
-        setViewState((current) => ({
-          ...current,
-          cursorX: current.cursorX === null ? maxCursorX : Math.max(current.cursorX - 1, 0),
-        }));
-        return;
-      case "l":
-        mouseCrosshairDisabledRef.current = false;
-        cursorMotionKindRef.current = "discrete";
-        setViewState((current) => ({
-          ...current,
-          cursorX: current.cursorX === null ? 0 : Math.min(current.cursorX + 1, maxCursorX),
-        }));
-        return;
       case "escape":
         mouseCrosshairDisabledRef.current = true;
         updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
@@ -1451,42 +1509,20 @@ function ComparisonStockChartView({
         if (viewState.selectedSymbol) onOpenSymbol(viewState.selectedSymbol);
         return;
       case "left":
-        setViewState((current) => {
-          const currentIndex = Math.max(symbols.indexOf(current.selectedSymbol ?? symbols[0] ?? ""), 0);
-          return {
-            ...current,
-            selectedSymbol: symbols[Math.max(currentIndex - 1, 0)] ?? current.selectedSymbol,
-          };
-        });
+      case "h":
+        selectSymbolByOffset(-1);
         return;
       case "right":
-        setViewState((current) => {
-          const currentIndex = Math.max(symbols.indexOf(current.selectedSymbol ?? symbols[0] ?? ""), 0);
-          return {
-            ...current,
-            selectedSymbol: symbols[Math.min(currentIndex + 1, symbols.length - 1)] ?? current.selectedSymbol,
-          };
-        });
+      case "l":
+        selectSymbolByOffset(1);
         return;
       case "up":
       case "k":
-        setViewState((current) => {
-          const currentIndex = Math.max(symbols.indexOf(current.selectedSymbol ?? symbols[0] ?? ""), 0);
-          return {
-            ...current,
-            selectedSymbol: symbols[Math.max(currentIndex - legendColumns, 0)] ?? current.selectedSymbol,
-          };
-        });
+        selectSymbolByOffset(-legendColumns);
         return;
       case "down":
       case "j":
-        setViewState((current) => {
-          const currentIndex = Math.max(symbols.indexOf(current.selectedSymbol ?? symbols[0] ?? ""), 0);
-          return {
-            ...current,
-            selectedSymbol: symbols[Math.min(currentIndex + legendColumns, symbols.length - 1)] ?? current.selectedSymbol,
-          };
-        });
+        selectSymbolByOffset(legendColumns);
         return;
     }
 
@@ -1629,18 +1665,9 @@ function ComparisonStockChartView({
   const hasChartData = series.some((entry) => entry.points.length > 0);
   const hasDisplayCursor = displayCursorX !== null && displayCursorY !== null;
   const cursorScene = hasDisplayCursor ? displayScene : staticScene;
-  const selectedSeries = hasChartData ? (cursorScene?.selectedSeries ?? staticResult.selectedSeries) : null;
-  const selectedPoint = hasChartData ? (cursorScene?.selectedPoint ?? staticResult.selectedPoint) : null;
-  const selectedRawValue = selectedPoint?.rawValue ?? selectedSeries?.latestRawValue ?? null;
-  const selectedBaseValue = selectedSeries?.baseValue ?? null;
-  const selectedChange = selectedRawValue !== null && selectedBaseValue !== null
-    ? selectedRawValue - selectedBaseValue
-    : null;
-  const selectedChangePct = selectedChange !== null && selectedBaseValue
-    ? (selectedChange / selectedBaseValue) * 100
+  const legendActiveIndex = hasChartData
+    ? cursorScene?.activeIdx ?? staticScene?.activeIdx ?? null
     : null;
-  const selectedCurrency = selectedSeries?.currency ?? "USD";
-  const displayDate = cursorScene?.activeDate ?? staticResult.activeDate;
   const visiblePriceRange = result.priceRange ?? staticResult.priceRange ?? undefined;
   const axisLabels = new Map(staticResult.axisLabels.map((entry) => [entry.row, entry.label]));
   const cursorRow = useCanvasChart ? cursorScene?.cursorRow ?? null : result.cursorRow;
@@ -1652,10 +1679,6 @@ function ComparisonStockChartView({
       visiblePriceRange,
     )
     : null;
-  const visibleLabel = formatVisibleSpanLabel({
-    start: visibleWindow.dates[0] ?? null,
-    end: visibleWindow.dates[visibleWindow.dates.length - 1] ?? null,
-  });
   const cursorTimeAxisColumn = hasDisplayCursor ? displayScene?.cursorColumn ?? null : null;
   const cursorTimeAxisDate = hasDisplayCursor ? displayScene?.activeDate ?? null : null;
 
@@ -1688,9 +1711,10 @@ function ComparisonStockChartView({
         cursorY: null,
         selectedSymbol: viewState.selectedSymbol,
         colors: chartColors,
+        marketSession,
       })
       : null
-  ), [canvasBitmapSize?.pixelWidth, canvasProjection, chartColors, chartHeight, chartWidth, viewState.selectedSymbol]);
+  ), [canvasBitmapSize?.pixelWidth, canvasProjection, chartColors, chartHeight, chartWidth, marketSession, viewState.selectedSymbol]);
 
   const canvasBaseBitmapKey = useMemo(() => {
     if (!canvasBitmapSize || !canvasProjection || !hasChartData || isBlockingBody || bodyMessage) return null;
@@ -1700,7 +1724,14 @@ function ComparisonStockChartView({
       viewState.selectedSymbol,
       canvasBitmapSize.pixelWidth,
       canvasBitmapSize.pixelHeight,
-      [chartColors.bgColor, chartColors.gridColor, chartColors.crosshairColor].join(","),
+      [
+        chartColors.bgColor,
+        chartColors.gridColor,
+        chartColors.crosshairColor,
+        chartColors.preMarketBgColor,
+        chartColors.postMarketBgColor,
+      ].join(","),
+      marketSessionKey,
     );
   }, [
     bodyMessage,
@@ -1709,8 +1740,11 @@ function ComparisonStockChartView({
     chartColors.bgColor,
     chartColors.crosshairColor,
     chartColors.gridColor,
+    chartColors.postMarketBgColor,
+    chartColors.preMarketBgColor,
     hasChartData,
     isBlockingBody,
+    marketSessionKey,
     symbols.length,
     viewState.selectedSymbol,
   ]);
@@ -1852,32 +1886,6 @@ function ComparisonStockChartView({
       flexGrow={1}
       onMouseScroll={hasChartData && !isBlockingBody && !bodyMessage ? handlePlotScroll : undefined}
     >
-      <Box flexDirection="row" gap={2} height={1}>
-        <Text attributes={TextAttributes.BOLD} fg={colors.textBright}>
-          {viewState.selectedSymbol ?? "Compare"} - {getChartResolutionLabel(effectiveResolution)}
-        </Text>
-        <Text fg={colors.textDim}>{visibleLabel}</Text>
-        <Text fg={selectedChange !== null ? priceColor(selectedChange) : colors.textDim}>
-          {selectedRawValue !== null
-            ? formatMarketPriceWithCurrency(selectedRawValue, selectedCurrency, {
-              minimumFractionDigits: 2,
-              precisionOffset: 1,
-              priceRange: visiblePriceRange,
-            })
-            : "—"}
-        </Text>
-        <Text fg={selectedChange !== null ? priceColor(selectedChange) : colors.textDim}>
-          {selectedChange !== null && selectedChangePct !== null
-            ? `${formatSignedMarketPrice(selectedChange, {
-              minimumFractionDigits: 2,
-              precisionOffset: 1,
-              priceRange: visiblePriceRange,
-            })} (${formatPercentRaw(selectedChangePct)})`
-            : "Waiting for data"}
-        </Text>
-        {displayDate && <Text fg={colors.textDim}>{formatDateShort(displayDate)}</Text>}
-      </Box>
-
       <Box flexDirection="row" height={1}>
         <Box flexDirection="row" gap={1}>
           {TIME_RANGES.map((range, index) => (
@@ -1951,7 +1959,7 @@ function ComparisonStockChartView({
           cursorColumn={cursorTimeAxisColumn}
           cursorPixelX={hasDisplayCursor ? displayCursor.pixelX : null}
           cursorDate={cursorTimeAxisDate}
-          dates={projection.dates}
+          dates={visibleWindow.dates}
           cursorColor={chartColors.crosshairColor}
         />
       </Box>
@@ -1964,19 +1972,11 @@ function ComparisonStockChartView({
                 {legendRow.map((symbol) => {
                   const item = projection.series.find((entry) => entry.symbol === symbol) ?? null;
                   const isSelected = viewState.selectedSymbol === symbol;
-                  const latestRaw = item?.latestRawValue ?? null;
-                  const latestChange = latestRaw !== null && item?.baseValue != null ? latestRaw - item.baseValue : null;
-                  const latestChangePct = latestChange !== null && item?.baseValue
-                    ? (latestChange / item.baseValue) * 100
-                    : null;
+                  const activeRaw = legendActiveIndex !== null
+                    ? item?.points[legendActiveIndex]?.rawValue ?? null
+                    : item?.latestRawValue ?? null;
                   const currency = item?.currency ?? "USD";
-                  const summary = latestRaw !== null && latestChangePct !== null
-                    ? `${symbol} ${formatMarketPriceWithCurrency(latestRaw, currency, {
-                      minimumFractionDigits: 2,
-                      precisionOffset: 1,
-                      priceRange: visiblePriceRange,
-                    })} ${formatPercentRaw(latestChangePct)}`
-                    : `${symbol} waiting`;
+                  const summary = formatLegendSummary(symbol, activeRaw, item?.baseValue ?? null, currency, visiblePriceRange);
 
                   return (
                     <Box