gloomberb 0.7.5 → 0.8.0

package/src/plugins/builtin/ticker-detail/pane.tsx

@@ -1,7 +1,6 @@
 import { Box } from "../../../ui";
-import { useShortcut } from "../../../react/input";
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import type { DetailTabDef, PaneProps } from "../../../types/plugin";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import type { PaneProps, TickerResearchTabDef } from "../../../types/plugin";
 import { quoteSubscriptionTargetFromTicker } from "../../../market-data/request-types";
 import {
   useAppDispatch,
@@ -10,18 +9,15 @@ import {
   usePaneInstance,
   usePaneStateValue,
   usePaneTicker,
-} from "../../../state/app-context";
-import { useQuoteStreaming } from "../../../state/use-quote-streaming";
+} from "../../../state/app/context";
+import { useQuoteStreaming } from "../../../state/hooks/quote-streaming";
 import { getCollectionName, getCollectionTickerCount } from "../../../state/selectors";
 import { getSharedRegistry } from "../../registry";
 import { EmptyState, PaneFooterScope, Tabs } from "../../../components";
 import { resolveOptionsTarget } from "../../../utils/options";
-import { ChartTab } from "./chart-tab";
-import { ResolvedFinancialsTab } from "./financials-tab";
-import { OverviewTab } from "./overview-tab";
 import {
-  buildVisibleDetailTabs,
-  getTickerDetailPaneSettings,
+  buildVisibleTickerResearchTabs,
+  getTickerResearchPaneSettings,
   resolveLockedTabId,
 } from "./settings";
 
@@ -33,14 +29,14 @@ function sameStringSet(left: Set<string>, right: Set<string>): boolean {
   return true;
 }
 
-function registryDetailTabsSnapshot(registry: ReturnType<typeof getSharedRegistry>): string {
+function registryTickerResearchTabsSnapshot(registry: ReturnType<typeof getSharedRegistry>): string {
   if (!registry) return "";
-  return [...registry.detailTabs.values()]
-    .map((tab) => `${tab.id}:${tab.name}:${tab.order}:${registry.getDetailTabPluginId?.(tab.id) ?? ""}`)
+  return [...registry.tickerResearchTabs.values()]
+    .map((tab) => `${tab.id}:${tab.name}:${tab.order}:${registry.getTickerResearchTabPluginId?.(tab.id) ?? ""}`)
     .join("\0");
 }
 
-function useRegistryDetailTabsSnapshot(registry: ReturnType<typeof getSharedRegistry>): string {
+function useRegistryTickerResearchTabsSnapshot(registry: ReturnType<typeof getSharedRegistry>): string {
   const subscribe = useCallback((onStoreChange: () => void) => {
     const events = registry?.events;
     if (!events) return () => {};
@@ -52,15 +48,15 @@ function useRegistryDetailTabsSnapshot(registry: ReturnType<typeof getSharedRegi
     };
   }, [registry]);
 
-  const getSnapshot = useCallback(() => registryDetailTabsSnapshot(registry), [registry]);
+  const getSnapshot = useCallback(() => registryTickerResearchTabsSnapshot(registry), [registry]);
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 
-export function TickerDetailPane({ focused, width, height }: PaneProps) {
+export function TickerResearchPane({ focused, width, height }: PaneProps) {
   const dispatch = useAppDispatch();
   const config = useAppSelector((state) => state.config);
   const paneInstance = usePaneInstance();
-  const { symbol, ticker, financials } = usePaneTicker();
+  const { ticker, financials } = usePaneTicker();
   const streamingTarget = quoteSubscriptionTargetFromTicker(ticker, ticker?.metadata.ticker, "provider");
   const streamingTargets = useMemo(() => (
     streamingTarget
@@ -84,26 +80,25 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
 
   const { collectionId } = usePaneCollection();
   const [activeTabId, setActiveTabId] = usePaneStateValue<string>("activeTabId", "overview");
-  const [chartInteractive, setChartInteractive] = useState(false);
   const [pluginCaptured, setPluginCaptured] = useState(false);
   const [mountedTabIds, setMountedTabIds] = useState<Set<string>>(() => new Set());
-  const paneSettings = getTickerDetailPaneSettings(paneInstance?.settings);
+  const paneSettings = getTickerResearchPaneSettings(paneInstance?.settings);
   const hasOptionsChain = !!resolveOptionsTarget(ticker)?.effectiveTicker;
   const collectionTickerCount = useAppSelector((state) => getCollectionTickerCount(state, collectionId));
   const collectionName = useAppSelector((state) => getCollectionName(state, collectionId));
 
   const disabledPlugins = config.disabledPlugins;
   const registry = getSharedRegistry();
-  const detailTabsSnapshot = useRegistryDetailTabsSnapshot(registry);
-  const pluginTabs = useMemo<DetailTabDef[]>(() => (
+  const tickerResearchTabsSnapshot = useRegistryTickerResearchTabsSnapshot(registry);
+  const tickerResearchTabs = useMemo<TickerResearchTabDef[]>(() => (
     registry
-      ? [...registry.detailTabs.values()].filter((tab) => {
-        const ownerId = registry.getDetailTabPluginId?.(tab.id);
+      ? [...registry.tickerResearchTabs.values()].filter((tab) => {
+        const ownerId = registry.getTickerResearchTabPluginId?.(tab.id);
         return !ownerId || !disabledPlugins.includes(ownerId);
       })
       : []
-  ), [disabledPlugins, registry, detailTabsSnapshot]);
-  const allTabs = buildVisibleDetailTabs(pluginTabs, ticker, financials, {
+  ), [disabledPlugins, registry, tickerResearchTabsSnapshot]);
+  const allTabs = buildVisibleTickerResearchTabs(tickerResearchTabs, ticker, financials, {
     config,
     hasOptionsChain,
   });
@@ -125,35 +120,13 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
     return next;
   }, [mountedTabIds, resolvedTabId, visibleTabIds]);
 
-  const stateRef = useRef({
-    focused,
-    chartInteractive,
-    pluginCaptured,
-    activeTabId: resolvedTabId,
-  });
-  stateRef.current = {
-    focused,
-    chartInteractive,
-    pluginCaptured,
-    activeTabId: resolvedTabId,
-  };
-
-  const setChartInteractiveEager = useCallback((value: boolean) => {
-    stateRef.current = { ...stateRef.current, chartInteractive: value };
-    setChartInteractive(value);
-  }, []);
-
   const handlePluginCapture = useCallback((capturing: boolean) => {
-    stateRef.current = { ...stateRef.current, pluginCaptured: capturing };
     setPluginCaptured(capturing);
     dispatch({ type: "SET_INPUT_CAPTURED", captured: capturing });
   }, [dispatch]);
   const ignorePluginCapture = useCallback(() => {}, []);
 
   useEffect(() => {
-    if (resolvedTabId !== "chart") {
-      setChartInteractive(false);
-    }
     setPluginCaptured(false);
     dispatch({ type: "SET_INPUT_CAPTURED", captured: false });
   }, [resolvedTabId, dispatch]);
@@ -171,27 +144,6 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
     });
   }, [resolvedTabId, visibleTabIds]);
 
-  const handleKeyboard = useCallback((event: { name?: string }) => {
-    const currentState = stateRef.current;
-    if (!currentState.focused || currentState.pluginCaptured) return;
-
-    if (currentState.activeTabId === "chart") {
-      const isEnter = event.name === "enter" || event.name === "return";
-      if (event.name === "escape" && currentState.chartInteractive) {
-        setChartInteractiveEager(false);
-        return;
-      }
-      if (isEnter && !currentState.chartInteractive) {
-        setChartInteractiveEager(true);
-        return;
-      }
-      if (currentState.chartInteractive) return;
-    }
-
-  }, [setChartInteractiveEager]);
-
-  useShortcut(handleKeyboard);
-
   if (!ticker) {
     const isEmptyFollowCollection = paneInstance?.binding?.kind === "follow" && !!collectionId && collectionTickerCount === 0;
     const message = isEmptyFollowCollection
@@ -212,78 +164,14 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
           tabs={allTabs.map((tab) => ({ label: tab.name, value: tab.id }))}
           activeValue={resolvedTabId}
           onSelect={setActiveTabId}
-          focused={focused && !pluginCaptured && !(resolvedTabId === "chart" && chartInteractive)}
+          focused={focused && !pluginCaptured}
         />
       )}
 
       <Box height={contentHeight} flexGrow={1} flexBasis={0} overflow="hidden">
-        {renderedTabIds.has("overview") && (
-          <Box
-            key="overview"
-            visible={resolvedTabId === "overview"}
-            flexDirection="column"
-            flexGrow={1}
-            flexBasis={0}
-            height={contentHeight}
-            overflow="hidden"
-          >
-            <PaneFooterScope active={resolvedTabId === "overview"}>
-              <OverviewTab
-                width={width}
-                symbol={symbol}
-                ticker={ticker}
-                financials={financials}
-              />
-            </PaneFooterScope>
-          </Box>
-        )}
-        {renderedTabIds.has("financials") && (
-          <Box
-            key="financials"
-            visible={resolvedTabId === "financials"}
-            flexDirection="column"
-            flexGrow={1}
-            flexBasis={0}
-            height={contentHeight}
-            overflow="hidden"
-          >
-            <PaneFooterScope active={resolvedTabId === "financials"}>
-              <ResolvedFinancialsTab
-                focused={focused && resolvedTabId === "financials"}
-                financials={financials}
-              />
-            </PaneFooterScope>
-          </Box>
-        )}
-        {renderedTabIds.has("chart") && (
-          <Box
-            key="chart"
-            visible={resolvedTabId === "chart"}
-            flexDirection="column"
-            flexGrow={1}
-            flexBasis={0}
-            height={contentHeight}
-            overflow="hidden"
-          >
-            <PaneFooterScope active={resolvedTabId === "chart"}>
-              <ChartTab
-                width={width}
-                height={contentHeight}
-                focused={focused && resolvedTabId === "chart"}
-                interactive={chartInteractive}
-                axisMode={paneSettings.chartAxisMode}
-                onActivate={() => setChartInteractiveEager(true)}
-                symbol={symbol}
-                ticker={ticker}
-                financials={financials}
-              />
-            </PaneFooterScope>
-          </Box>
-        )}
-
-        {pluginTabs.map((tab) => {
+        {tickerResearchTabs.map((tab) => {
           if (!renderedTabIds.has(tab.id) || !visibleTabIds.has(tab.id)) return null;
-          const PluginTab = tab.component;
+          const TickerResearchTab = tab.component;
           const isActive = resolvedTabId === tab.id;
           return (
             <Box
@@ -296,7 +184,7 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
               overflow="hidden"
             >
               <PaneFooterScope active={isActive}>
-                <PluginTab
+                <TickerResearchTab
                   width={width}
                   height={contentHeight}
                   focused={focused && isActive}

package/src/plugins/builtin/ticker-detail/quote-monitor/card.tsx

@@ -0,0 +1,330 @@
+import { useMemo } from "react";
+import { Box, Text, TextAttributes, useUiCapabilities } from "../../../../ui";
+import type { TickerFinancials } from "../../../../types/financials";
+import type { TickerRecord } from "../../../../types/ticker";
+import {
+  DEFAULT_LIVE_CHART_REFRESH_INTERVAL_MS,
+  useChartQuery,
+  useTickerFinancials,
+} from "../../../../market-data/hooks";
+import { instrumentFromTicker } from "../../../../market-data/request-types";
+import { resolveEntryData } from "../../../../market-data/selectors";
+import { useDoubleClickActivation } from "../../../../components/use-double-click-activation";
+import { colors, priceColor } from "../../../../theme/colors";
+import { formatPercentRaw } from "../../../../utils/format";
+import { formatMarketPriceWithCurrency, formatSignedMarketPrice } from "../../../../market-data/market/format";
+import { getActiveQuoteDisplay } from "../../../../market-data/market/status";
+import { useQuoteFlashDirection } from "../../../../components/quote-flash";
+import {
+  PriceAreaSparklineBackground,
+  PriceSparkline,
+  resolvePriceSparklineRange,
+  type PriceSparklinePeriod,
+  type PriceSparklineTrend,
+} from "../../../../components/price-sparkline/view";
+
+function quoteTrend(value: number | null | undefined): PriceSparklineTrend {
+  if (value == null || value === 0) return "neutral";
+  return value > 0 ? "positive" : "negative";
+}
+
+export function QuoteMonitorCard({
+  symbol,
+  ticker,
+  cachedFinancials,
+  width,
+  height,
+  showRightDivider,
+  showBottomDivider,
+  chartPeriod,
+  valueFlashingEnabled,
+  onOpen,
+}: {
+  symbol: string;
+  ticker: TickerRecord | null;
+  cachedFinancials: TickerFinancials | null;
+  width: number;
+  height: number;
+  showRightDivider: boolean;
+  showBottomDivider: boolean;
+  chartPeriod: PriceSparklinePeriod;
+  valueFlashingEnabled: boolean;
+  onOpen: (symbol: string) => void;
+}) {
+  const { nativePaneChrome } = useUiCapabilities();
+  const marketFinancials = useTickerFinancials(symbol, ticker);
+  const financials = marketFinancials ?? cachedFinancials;
+  const chartRequest = useMemo(() => {
+    const instrument = instrumentFromTicker(ticker, symbol);
+    return instrument
+      ? {
+        instrument,
+        bufferRange: chartPeriod,
+        granularity: "range" as const,
+      }
+      : null;
+  }, [chartPeriod, symbol, ticker]);
+  const chartEntry = useChartQuery(chartRequest, {
+    refreshIntervalMs: DEFAULT_LIVE_CHART_REFRESH_INTERVAL_MS,
+  });
+  const queriedPriceHistory = resolveEntryData(chartEntry);
+  const priceHistory = queriedPriceHistory && queriedPriceHistory.length >= 2
+    ? queriedPriceHistory
+    : financials?.priceHistory;
+  const flashDirection = useQuoteFlashDirection(financials, valueFlashingEnabled);
+  const quote = financials?.quote;
+  const display = getActiveQuoteDisplay(quote);
+  const changeColor = priceColor(display?.change ?? 0);
+  const priceAttributes = flashDirection ? TextAttributes.DIM : TextAttributes.BOLD;
+  const changeAttributes = flashDirection ? TextAttributes.DIM : TextAttributes.NONE;
+  const currency = quote?.currency ?? ticker?.metadata.currency ?? "USD";
+  const stacked = width < 31;
+  const priceText = display
+    ? formatMarketPriceWithCurrency(display.price, currency, { assetCategory: ticker?.metadata.assetCategory })
+    : "";
+  const changePercentText = display ? formatPercentRaw(display.changePercent) : "";
+  const changeValueText = display ? formatSignedMarketPrice(display.change, { assetCategory: ticker?.metadata.assetCategory }) : "";
+  const priceColumnWidth = Math.max(priceText.length, changePercentText.length + changeValueText.length + 1);
+  const nameMaxWidth = Math.max(10, width - priceColumnWidth - (nativePaneChrome ? 5 : 3));
+  const sparklineRange = resolvePriceSparklineRange(priceHistory, chartPeriod);
+  const rangeLabel = sparklineRange
+    ? `${chartPeriod} ${formatMarketPriceWithCurrency(sparklineRange.min, currency, { assetCategory: ticker?.metadata.assetCategory })}-${formatMarketPriceWithCurrency(sparklineRange.max, currency, { assetCategory: ticker?.metadata.assetCategory })}`
+    : "";
+  const sparklineWidth = Math.max(8, width - (nativePaneChrome ? rangeLabel.length + 5 : 2));
+  const trend = quoteTrend(display?.change);
+  const terminalSparklineHeight = !nativePaneChrome && !stacked && height >= 4 ? 2 : 1;
+  const desktopPriceStyle = nativePaneChrome
+    ? {
+        fontSize: "22px",
+        lineHeight: "1.05",
+        fontWeight: 720,
+        textShadow: `0 1px 2px ${colors.bg}`,
+      }
+    : undefined;
+  const desktopChangeStyle = nativePaneChrome
+    ? {
+        fontSize: "12px",
+        lineHeight: "1.1",
+        fontWeight: 540,
+        textShadow: `0 1px 2px ${colors.bg}`,
+      }
+    : undefined;
+  const desktopSymbolStyle = nativePaneChrome
+    ? {
+        fontSize: "15px",
+        lineHeight: "18px",
+      }
+    : undefined;
+
+  const handleMouseDown = useDoubleClickActivation<string>({
+    onActivate: onOpen,
+  });
+
+  return (
+    <Box
+      flexDirection="column"
+      width={nativePaneChrome ? undefined : width}
+      height={nativePaneChrome ? undefined : height}
+      backgroundColor={colors.bg}
+      paddingX={nativePaneChrome ? 0 : 1}
+      paddingY={0}
+      overflow="hidden"
+      onMouseDown={(event: any) => {
+        event.preventDefault?.();
+        handleMouseDown(symbol, symbol, event);
+      }}
+      data-gloom-role="quote-monitor-card"
+      style={nativePaneChrome ? {
+        cursor: "pointer",
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 6,
+        paddingBottom: 4,
+        borderRight: showRightDivider ? `1px solid ${colors.border}` : undefined,
+        borderBottom: showBottomDivider ? `1px solid ${colors.border}` : undefined,
+      } : undefined}
+    >
+      {nativePaneChrome && display && (
+        <PriceAreaSparklineBackground priceHistory={priceHistory} trend={trend} period={chartPeriod} />
+      )}
+      {!display ? (
+        <Box flexDirection="column" flexGrow={1} justifyContent="center">
+          <Text attributes={TextAttributes.BOLD} fg={colors.textBright} style={desktopSymbolStyle}>
+            {symbol}
+          </Text>
+          <Text fg={colors.textDim}>Waiting for quote...</Text>
+        </Box>
+      ) : nativePaneChrome ? (
+        <Box
+          flexGrow={1}
+          style={{
+            position: "relative",
+            zIndex: 1,
+            display: "grid",
+            gridTemplateColumns: "minmax(130px, 1fr) minmax(88px, auto)",
+            gridTemplateRows: "auto 1fr auto",
+            columnGap: 12,
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          <Box
+            flexDirection="column"
+            minWidth={0}
+            style={{
+              gridColumn: "1",
+              gridRow: "1 / span 2",
+              minWidth: 0,
+              overflow: "hidden",
+            }}
+          >
+            <Text attributes={TextAttributes.BOLD} fg={colors.textBright} style={desktopSymbolStyle}>
+              {symbol}
+            </Text>
+            {ticker?.metadata.name && (
+              <Text
+                fg={colors.textDim}
+                style={{
+                  fontSize: "12px",
+                  lineHeight: "14px",
+                  maxWidth: "100%",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {ticker.metadata.name}
+              </Text>
+            )}
+          </Box>
+
+          <Box
+            flexDirection="column"
+            alignItems="flex-end"
+            style={{
+              gridColumn: "2",
+              gridRow: "1",
+              justifySelf: "end",
+              backgroundColor: colors.bg,
+              borderRadius: 4,
+              boxShadow: `0 0 0 2px ${colors.bg}`,
+              paddingLeft: 6,
+              paddingBottom: 1,
+            }}
+          >
+            <Text
+              attributes={priceAttributes}
+              fg={changeColor}
+              style={desktopPriceStyle}
+            >
+              {priceText}
+            </Text>
+            <Box flexDirection="row" gap={1} justifyContent="flex-end">
+              <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changePercentText}</Text>
+              <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changeValueText}</Text>
+            </Box>
+          </Box>
+
+          {rangeLabel && (
+            <Text
+              fg={colors.textDim}
+              style={{
+                gridColumn: "2",
+                gridRow: "3",
+                justifySelf: "end",
+                alignSelf: "end",
+                fontSize: "11px",
+                lineHeight: "13px",
+                backgroundColor: colors.bg,
+                paddingLeft: 6,
+                paddingRight: 2,
+                boxShadow: `0 0 0 2px ${colors.bg}`,
+              }}
+            >
+              {rangeLabel}
+            </Text>
+          )}
+        </Box>
+      ) : (
+        <Box flexDirection="column" flexGrow={1} justifyContent="flex-start">
+          {stacked ? (
+            <Box flexDirection="column">
+              <Text attributes={TextAttributes.BOLD} fg={colors.textBright} style={desktopSymbolStyle}>
+                {symbol}
+              </Text>
+              <Box flexDirection="column">
+                <Text attributes={priceAttributes} fg={changeColor} style={desktopPriceStyle}>
+                  {priceText}
+                </Text>
+                <Box flexDirection="row" gap={1}>
+                  <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changePercentText}</Text>
+                  <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changeValueText}</Text>
+                </Box>
+              </Box>
+            </Box>
+          ) : (
+            <Box
+              flexDirection="row"
+              alignItems="flex-start"
+              justifyContent="space-between"
+              gap={1}
+            >
+              <Box flexDirection="column" flexGrow={1} minWidth={0}>
+                <Text attributes={TextAttributes.BOLD} fg={colors.textBright} style={desktopSymbolStyle}>
+                  {symbol}
+                </Text>
+                {nativePaneChrome && ticker?.metadata.name && width >= 36 && (
+                  <Text
+                    fg={colors.textDim}
+                    style={{
+                      fontSize: "12px",
+                      lineHeight: "16px",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                    maxWidth={nameMaxWidth}
+                  >
+                    {ticker.metadata.name}
+                  </Text>
+                )}
+              </Box>
+              <Box flexDirection="column" alignItems="flex-end">
+                <Text
+                  attributes={priceAttributes}
+                  fg={changeColor}
+                  style={desktopPriceStyle}
+                >
+                  {priceText}
+                </Text>
+                <Box flexDirection="row" gap={1} justifyContent="flex-end">
+                  <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changePercentText}</Text>
+                  <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changeValueText}</Text>
+                </Box>
+              </Box>
+            </Box>
+          )}
+
+          <Box height={terminalSparklineHeight} flexDirection="row" alignItems="center" gap={1}>
+            <PriceSparkline
+              priceHistory={priceHistory}
+              width={sparklineWidth}
+              height={terminalSparklineHeight}
+              trend={trend}
+              period={chartPeriod}
+              area={!nativePaneChrome}
+            />
+            {nativePaneChrome && rangeLabel && (
+              <Text fg={colors.textDim} style={{ fontSize: "11px", lineHeight: "14px" }}>
+                {rangeLabel}
+              </Text>
+            )}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}