gloomberb 0.7.4 → 0.8.0

package/src/components/ticker-list-table.test.tsx

@@ -1,210 +0,0 @@
-import { afterEach, describe, expect, test } from "bun:test";
-import { act, useEffect, useRef, useState } from "react";
-import { testRender } from "../renderers/opentui/test-utils";
-import type { ColumnConfig } from "../types/config";
-import type { TickerFinancials } from "../types/financials";
-import type { TickerRecord } from "../types/ticker";
-import type { ScrollBoxRenderable } from "../ui";
-import { TickerListTable, type TickerTableCell } from "./ticker-list-table";
-import { TickerListTableView } from "./ticker-list-table-view";
-
-let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
-let setHarnessCursorSymbol: ((symbol: string) => void) | null = null;
-let setHarnessTickers: ((tickers: TickerRecord[]) => void) | null = null;
-let tableScrollRef: ScrollBoxRenderable | null = null;
-let resolveCellCallCount = 0;
-
-const columns: ColumnConfig[] = [
-  { id: "ticker", label: "Ticker", width: 6, align: "left" },
-];
-const financialsMap = new Map<string, TickerFinancials>();
-const tickers: TickerRecord[] = [
-  { metadata: { ticker: "AAPL", exchange: "NASDAQ", currency: "USD", name: "Apple", portfolios: [], watchlists: [], positions: [], custom: {}, tags: [] } },
-  { metadata: { ticker: "MSFT", exchange: "NASDAQ", currency: "USD", name: "Microsoft", portfolios: [], watchlists: [], positions: [], custom: {}, tags: [] } },
-  { metadata: { ticker: "NVDA", exchange: "NASDAQ", currency: "USD", name: "NVIDIA", portfolios: [], watchlists: [], positions: [], custom: {}, tags: [] } },
-];
-const manyTickers: TickerRecord[] = Array.from({ length: 1000 }, (_, index) => ({
-  metadata: {
-    ticker: `T${index}`,
-    exchange: "NASDAQ",
-    currency: "USD",
-    name: `Ticker ${index}`,
-    portfolios: [],
-    watchlists: [],
-    positions: [],
-    custom: {},
-    tags: [],
-  },
-}));
-
-function noop(_index: number | null): void {}
-
-function resolveCell(_column: ColumnConfig, ticker: TickerRecord, _financials: TickerFinancials | undefined): TickerTableCell {
-  resolveCellCallCount += 1;
-  return { text: ticker.metadata.ticker };
-}
-
-function TickerListTableHarness() {
-  const [cursorSymbol, setCursorSymbol] = useState("AAPL");
-  setHarnessCursorSymbol = (symbol: string) => setCursorSymbol(symbol);
-
-  return (
-    <TickerListTable
-      columns={columns}
-      tickers={tickers}
-      cursorSymbol={cursorSymbol}
-      hoveredIdx={null}
-      setHoveredIdx={noop}
-      setCursorSymbol={setCursorSymbol}
-      resolveCell={resolveCell}
-      financialsMap={financialsMap}
-    />
-  );
-}
-
-function LargeTickerListTableHarness() {
-  const [cursorSymbol, setCursorSymbol] = useState("T0");
-  const scrollRef = useRef<ScrollBoxRenderable>(null);
-
-  useEffect(() => {
-    tableScrollRef = scrollRef.current;
-    return () => {
-      if (tableScrollRef === scrollRef.current) {
-        tableScrollRef = null;
-      }
-    };
-  });
-
-  return (
-    <TickerListTable
-      columns={columns}
-      tickers={manyTickers}
-      cursorSymbol={cursorSymbol}
-      hoveredIdx={null}
-      setHoveredIdx={noop}
-      setCursorSymbol={setCursorSymbol}
-      resolveCell={resolveCell}
-      financialsMap={financialsMap}
-      scrollRef={scrollRef}
-    />
-  );
-}
-
-function ReorderingTickerListTableViewHarness() {
-  const [rows, setRows] = useState(manyTickers);
-  const scrollRef = useRef<ScrollBoxRenderable>(null);
-  setHarnessTickers = setRows;
-
-  useEffect(() => {
-    tableScrollRef = scrollRef.current;
-    return () => {
-      if (tableScrollRef === scrollRef.current) {
-        tableScrollRef = null;
-      }
-    };
-  });
-
-  return (
-    <TickerListTableView
-      focused
-      columns={columns}
-      tickers={rows}
-      cursorSymbol="T0"
-      setCursorSymbol={() => {}}
-      resolveCell={resolveCell}
-      financialsMap={financialsMap}
-      scrollRef={scrollRef}
-    />
-  );
-}
-
-afterEach(async () => {
-  if (testSetup) {
-    await act(async () => {
-      testSetup!.renderer.destroy();
-    });
-    testSetup = undefined;
-  }
-  resolveCellCallCount = 0;
-  setHarnessCursorSymbol = null;
-  setHarnessTickers = null;
-  tableScrollRef = null;
-});
-
-describe("TickerListTable", () => {
-  test("recomputes cells only for rows whose selection state changed", async () => {
-    testSetup = await testRender(
-      <TickerListTableHarness />,
-      { width: 20, height: 6 },
-    );
-
-    await act(async () => {
-      await testSetup!.renderOnce();
-    });
-
-    const initialCallCount = resolveCellCallCount;
-
-    await act(async () => {
-      setHarnessCursorSymbol?.("MSFT");
-      await Promise.resolve();
-    });
-    await act(async () => {
-      await testSetup!.renderOnce();
-    });
-
-    expect(initialCallCount).toBeGreaterThan(0);
-    expect(resolveCellCallCount - initialCallCount).toBe(2);
-  });
-
-  test("renders a bounded window for large ticker lists", async () => {
-    testSetup = await testRender(
-      <LargeTickerListTableHarness />,
-      { width: 20, height: 6 },
-    );
-
-    await act(async () => {
-      await testSetup!.renderOnce();
-    });
-
-    const frame = testSetup.captureCharFrame();
-    expect(frame).toContain("T0");
-    expect(frame).not.toContain("T999");
-    expect(resolveCellCallCount).toBeLessThan(40);
-
-    await act(async () => {
-      for (let index = 0; index < 12; index++) {
-        await testSetup!.mockMouse.scroll(2, 2, "down");
-      }
-      await Promise.resolve();
-      await testSetup!.renderOnce();
-    });
-
-    const scrollTop = tableScrollRef?.scrollTop ?? 0;
-    expect(scrollTop).toBeGreaterThan(0);
-    expect(testSetup.captureCharFrame()).toContain(`T${scrollTop}`);
-  });
-
-  test("preserves manual scroll when market data reorders rows around the same cursor", async () => {
-    testSetup = await testRender(
-      <ReorderingTickerListTableViewHarness />,
-      { width: 20, height: 8 },
-    );
-
-    await act(async () => {
-      await testSetup!.renderOnce();
-      await testSetup!.renderOnce();
-    });
-
-    tableScrollRef!.scrollTop = 20;
-    expect(tableScrollRef?.scrollTop).toBe(20);
-
-    await act(async () => {
-      setHarnessTickers?.([...manyTickers.slice(1), manyTickers[0]!]);
-      await Promise.resolve();
-      await testSetup!.renderOnce();
-      await testSetup!.renderOnce();
-    });
-
-    expect(tableScrollRef?.scrollTop).toBe(20);
-  });
-});

package/src/components/ticker-list-table.tsx

@@ -1,458 +0,0 @@
-import {
-  Box,
-  ScrollBox,
-  Text,
-  tickerContextMenuItems,
-  useContextMenu,
-  useNativeRenderer,
-  useRendererHost,
-  useUiCapabilities,
-} from "../ui";
-import { memo, useCallback, useMemo, useRef, useState, type RefObject } from "react";
-import { TextAttributes, type ScrollBoxRenderable } from "../ui";
-import { EmptyState } from "./ui";
-import { colors, hoverBg } from "../theme/colors";
-import { useThemeColors } from "../theme/theme-context";
-import { getSharedRegistry } from "../plugins/registry";
-import type { ColumnConfig } from "../types/config";
-import type { TickerFinancials, PricePoint } from "../types/financials";
-import type { TickerRecord } from "../types/ticker";
-import { padTo } from "../utils/format";
-import { PRICE_SPARKLINE_COLUMN_ID, PriceSparkline } from "./price-sparkline-view";
-import { tableContentWidthProps, useMeasuredTableContentWidth } from "./ui/table-layout";
-import { useViewport } from "../react/input";
-import { measurePerf } from "../utils/perf-marks";
-import { useScrollBoxScrollActivity } from "./table-view-shared";
-
-export interface TickerTableCell {
-  text: string;
-  color?: string;
-}
-
-export type QuoteFlashDirection = "up" | "down" | "flat";
-type ResolveTickerTableCell = (
-  column: ColumnConfig,
-  ticker: TickerRecord,
-  financials: TickerFinancials | undefined,
-) => TickerTableCell;
-type TableMouseEvent = {
-  button?: number;
-  detail?: number;
-  preventDefault?: () => void;
-  stopPropagation?: () => void;
-};
-
-const FLASHABLE_QUOTE_COLUMN_IDS = new Set([
-  "price",
-  "change",
-  "change_pct",
-  "bid",
-  "ask",
-  "spread",
-  "ext_hours",
-  "market_cap",
-  "mkt_value",
-  "pnl",
-  "pnl_pct",
-]);
-
-export interface TickerListTableProps {
-  columns: ColumnConfig[];
-  tickers: TickerRecord[];
-  cursorSymbol: string | null;
-  hoveredIdx: number | null;
-  setHoveredIdx: (index: number | null) => void;
-  setCursorSymbol: (symbol: string) => void;
-  resolveCell: ResolveTickerTableCell;
-  financialsMap: Map<string, TickerFinancials>;
-  headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
-  scrollRef?: RefObject<ScrollBoxRenderable | null>;
-  syncHeaderScroll?: () => void;
-  onBodyScrollActivity?: () => void;
-  flashSymbols?: Map<string, QuoteFlashDirection>;
-  sortColumnId?: string | null;
-  sortDirection?: "asc" | "desc";
-  onHeaderClick?: (columnId: string) => void;
-  onRowActivate?: (ticker: TickerRecord) => void;
-  emptyTitle?: string;
-  emptyHint?: string;
-  virtualize?: boolean;
-  overscan?: number;
-}
-
-const EMPTY_FLASH_SYMBOLS = new Map<string, QuoteFlashDirection>();
-
-const TickerListHeader = memo(function TickerListHeader({
-  columns,
-  contentWidth,
-  headerScrollRef,
-  sortColumnId,
-  sortDirection,
-  onHeaderClick,
-  onSizeChange,
-}: {
-  columns: ColumnConfig[];
-  contentWidth: number;
-  headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
-  sortColumnId?: string | null;
-  sortDirection?: "asc" | "desc";
-  onHeaderClick?: (columnId: string) => void;
-  onSizeChange?: () => void;
-}) {
-  useThemeColors();
-  return (
-    <ScrollBox
-      ref={headerScrollRef}
-      width="100%"
-      height={1}
-      backgroundColor={colors.panel}
-      scrollX
-      focusable={false}
-      onSizeChange={onSizeChange}
-    >
-      <Box
-        flexDirection="row"
-        height={1}
-        {...tableContentWidthProps(contentWidth)}
-        paddingX={1}
-        backgroundColor={colors.panel}
-      >
-        {columns.map((column) => {
-          const isSorted = sortColumnId === column.id;
-          const indicator = isSorted ? (sortDirection === "asc" ? " \u25B2" : " \u25BC") : "";
-          const labelText = column.label + indicator;
-          return (
-            <Box
-              key={column.id}
-              width={column.width + 1}
-              backgroundColor={colors.panel}
-              onMouseDown={onHeaderClick ? (event: TableMouseEvent) => {
-                event.preventDefault?.();
-                onHeaderClick(column.id);
-              } : undefined}
-            >
-              <Text attributes={TextAttributes.BOLD} fg={isSorted ? colors.text : colors.textDim}>
-                {padTo(labelText, column.width, column.align)}
-              </Text>
-            </Box>
-          );
-        })}
-      </Box>
-    </ScrollBox>
-  );
-});
-
-const TickerListRow = memo(function TickerListRow({
-  columns,
-  ticker,
-  index,
-  isSelected,
-  isHovered,
-  financials,
-  flashDirection,
-  setHoveredIdx,
-  setCursorSymbol,
-  resolveCell,
-  onRowActivate,
-  onRowContextMenu,
-  openContextMenuOnMouseDown,
-  priceHistory,
-  contentWidth,
-}: {
-  columns: ColumnConfig[];
-  ticker: TickerRecord;
-  index: number;
-  isSelected: boolean;
-  isHovered: boolean;
-  financials: TickerFinancials | undefined;
-  flashDirection: QuoteFlashDirection | undefined;
-  setHoveredIdx: (index: number | null) => void;
-  setCursorSymbol: (symbol: string) => void;
-  resolveCell: ResolveTickerTableCell;
-  onRowActivate?: (ticker: TickerRecord) => void;
-  onRowContextMenu: (ticker: TickerRecord, financials: TickerFinancials | undefined, event: unknown) => void;
-  openContextMenuOnMouseDown: boolean;
-  priceHistory?: PricePoint[];
-  contentWidth: number;
-}) {
-  useThemeColors();
-  const lastActivatedAtRef = useRef<number | null>(null);
-  const rowBg = isSelected ? colors.selected : isHovered ? hoverBg() : colors.bg;
-
-  return (
-    <Box
-      flexDirection="row"
-      height={1}
-      {...tableContentWidthProps(contentWidth)}
-      paddingX={1}
-      backgroundColor={rowBg}
-      data-gloom-context-menu-surface="true"
-      onMouseMove={() => setHoveredIdx(index)}
-      onMouseDown={(event: TableMouseEvent) => {
-        setCursorSymbol(ticker.metadata.ticker);
-        if (event.button === 2) {
-          if (openContextMenuOnMouseDown) {
-            onRowContextMenu(ticker, financials, event);
-          }
-          return;
-        }
-        event.preventDefault?.();
-        if (!onRowActivate) return;
-        if (typeof event.detail === "number" && event.detail >= 2) {
-          lastActivatedAtRef.current = null;
-          onRowActivate(ticker);
-          return;
-        }
-        const now = Date.now();
-        if (lastActivatedAtRef.current != null && now - lastActivatedAtRef.current <= 350) {
-          lastActivatedAtRef.current = null;
-          onRowActivate(ticker);
-          return;
-        }
-        lastActivatedAtRef.current = now;
-      }}
-      onContextMenu={(event: unknown) => {
-        setCursorSymbol(ticker.metadata.ticker);
-        onRowContextMenu(ticker, financials, event);
-      }}
-    >
-      {columns.map((column) => {
-        if (column.id === PRICE_SPARKLINE_COLUMN_ID) {
-          return (
-            <Box key={column.id} width={column.width + 1} overflow="hidden">
-              <PriceSparkline priceHistory={priceHistory} width={column.width} />
-            </Box>
-          );
-        }
-
-        const { text, color } = resolveCell(column, ticker, financials);
-        const baseFg = color || (isSelected ? colors.selectedText : colors.text);
-        const shouldFlash = flashDirection != null && FLASHABLE_QUOTE_COLUMN_IDS.has(column.id);
-
-        return (
-          <Box key={column.id} width={column.width + 1}>
-            <Text
-              fg={baseFg}
-              attributes={shouldFlash ? TextAttributes.DIM : TextAttributes.NONE}
-            >
-              {padTo(text, column.width, column.align)}
-            </Text>
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}, (previous, next) => (
-  previous.columns === next.columns
-  && previous.ticker === next.ticker
-  && previous.index === next.index
-  && previous.isSelected === next.isSelected
-  && previous.isHovered === next.isHovered
-  && previous.financials === next.financials
-  && previous.flashDirection === next.flashDirection
-  && previous.setHoveredIdx === next.setHoveredIdx
-  && previous.setCursorSymbol === next.setCursorSymbol
-  && previous.resolveCell === next.resolveCell
-  && previous.onRowActivate === next.onRowActivate
-  && previous.onRowContextMenu === next.onRowContextMenu
-  && previous.openContextMenuOnMouseDown === next.openContextMenuOnMouseDown
-  && previous.priceHistory === next.priceHistory
-  && previous.contentWidth === next.contentWidth
-));
-
-export function TickerListTable({
-  columns,
-  tickers,
-  cursorSymbol,
-  hoveredIdx,
-  setHoveredIdx,
-  setCursorSymbol,
-  resolveCell,
-  financialsMap,
-  headerScrollRef,
-  scrollRef,
-  syncHeaderScroll,
-  onBodyScrollActivity,
-  flashSymbols,
-  sortColumnId,
-  sortDirection,
-  onHeaderClick,
-  onRowActivate,
-  emptyTitle = "No tickers.",
-  emptyHint = "Press Ctrl+P to add one.",
-  virtualize = true,
-  overscan = 4,
-}: TickerListTableProps) {
-  const internalHeaderScrollRef = useRef<ScrollBoxRenderable>(null);
-  const internalScrollRef = useRef<ScrollBoxRenderable>(null);
-  const effectiveHeaderScrollRef = headerScrollRef ?? internalHeaderScrollRef;
-  const effectiveScrollRef = scrollRef ?? internalScrollRef;
-  const hoveredIdxRef = useRef(hoveredIdx);
-  const appViewport = useViewport();
-  const renderer = useRendererHost();
-  const nativeRenderer = useNativeRenderer();
-  const { showContextMenu } = useContextMenu();
-  const { nativeContextMenu } = useUiCapabilities();
-  const [scrollVersion, setScrollVersion] = useState(0);
-  hoveredIdxRef.current = hoveredIdx;
-  const safeFlashSymbols = flashSymbols ?? EMPTY_FLASH_SYMBOLS;
-  const tableWidth = useMemo(
-    () => columns.reduce((sum, column) => sum + column.width + 1, 2),
-    [columns],
-  );
-  const { contentWidth, measureContentWidth } = useMeasuredTableContentWidth(
-    tableWidth,
-    effectiveHeaderScrollRef,
-    effectiveScrollRef,
-  );
-  const scrollTop = virtualize ? (effectiveScrollRef.current?.scrollTop ?? 0) : 0;
-  const measuredViewportHeight = effectiveScrollRef.current?.viewport?.height;
-  const viewportHeight = virtualize
-    ? Math.max(
-        1,
-        Math.min(
-          measuredViewportHeight ?? Math.min(tickers.length, 16),
-          Math.max(1, Math.ceil(appViewport.height)),
-        ),
-      )
-    : tickers.length;
-  const startIndex = virtualize ? Math.max(scrollTop - overscan, 0) : 0;
-  const endIndex = virtualize
-    ? Math.min(startIndex + viewportHeight + overscan * 2, tickers.length)
-    : tickers.length;
-  const visibleTickers = useMemo(
-    () => measurePerf(
-      "ticker-list-table.visible-rows",
-      () => tickers.slice(startIndex, endIndex),
-      {
-        itemCount: tickers.length,
-        measuredViewportHeight,
-        startIndex,
-        endIndex,
-        viewportHeight,
-        virtualize,
-      },
-    ),
-    [
-      appViewport.height,
-      endIndex,
-      measuredViewportHeight,
-      scrollVersion,
-      startIndex,
-      tickers,
-      tickers.length,
-      viewportHeight,
-      virtualize,
-    ],
-  );
-  const handleBodyScrollActivity = useCallback(() => {
-    if (virtualize) {
-      setScrollVersion((current) => current + 1);
-    }
-    onBodyScrollActivity?.();
-    nativeRenderer.requestRender();
-  }, [nativeRenderer, onBodyScrollActivity, virtualize]);
-  const syncHeader = useCallback(() => {
-    syncHeaderScroll?.();
-  }, [syncHeaderScroll]);
-  useScrollBoxScrollActivity({
-    scrollRef: effectiveScrollRef,
-    onVerticalScroll: handleBodyScrollActivity,
-    onHorizontalScroll: syncHeader,
-  });
-  const setHoveredIdxIfChanged = useCallback((index: number | null) => {
-    if (hoveredIdxRef.current === index) return;
-    setHoveredIdx(index);
-  }, [setHoveredIdx]);
-  const handleRowContextMenu = useCallback((
-    ticker: TickerRecord,
-    financials: TickerFinancials | undefined,
-    event: unknown,
-  ) => {
-    const registry = getSharedRegistry() ?? null;
-    void showContextMenu(
-      {
-        kind: "ticker",
-        symbol: ticker.metadata.ticker,
-        ticker,
-        financials: financials ?? null,
-      },
-      tickerContextMenuItems({
-        ticker,
-        financials: financials ?? null,
-        registry,
-        copyText: renderer.copyText.bind(renderer),
-      }),
-      event as { preventDefault?: () => void; stopPropagation?: () => void },
-    );
-  }, [renderer, showContextMenu]);
-
-  return (
-    <Box
-      flexDirection="column"
-      flexGrow={1}
-      flexBasis={0}
-      width="100%"
-      backgroundColor={colors.bg}
-      overflow="hidden"
-    >
-      <TickerListHeader
-        columns={columns}
-        contentWidth={contentWidth}
-        headerScrollRef={effectiveHeaderScrollRef}
-        sortColumnId={sortColumnId}
-        sortDirection={sortDirection}
-        onHeaderClick={onHeaderClick}
-        onSizeChange={measureContentWidth}
-      />
-
-      <ScrollBox
-        ref={effectiveScrollRef}
-        width="100%"
-        flexGrow={1}
-        flexBasis={0}
-        backgroundColor={colors.bg}
-        scrollX
-        scrollY
-        focusable={false}
-        onSizeChange={measureContentWidth}
-      >
-        {tickers.length === 0 ? (
-          <Box width="100%" paddingX={1} paddingY={1}>
-            <EmptyState title={emptyTitle} hint={emptyHint} />
-          </Box>
-        ) : (
-          <>
-            {virtualize && startIndex > 0 && <Box height={startIndex} />}
-            {visibleTickers.map((ticker, visibleIndex) => {
-              const index = startIndex + visibleIndex;
-            return (
-              <TickerListRow
-                key={ticker.metadata.ticker}
-                columns={columns}
-                ticker={ticker}
-                index={index}
-                isSelected={ticker.metadata.ticker === cursorSymbol}
-                isHovered={index === hoveredIdx && ticker.metadata.ticker !== cursorSymbol}
-                financials={financialsMap.get(ticker.metadata.ticker)}
-                flashDirection={safeFlashSymbols.get(ticker.metadata.ticker)}
-                setHoveredIdx={setHoveredIdxIfChanged}
-                setCursorSymbol={setCursorSymbol}
-                resolveCell={resolveCell}
-                onRowActivate={onRowActivate}
-                onRowContextMenu={handleRowContextMenu}
-                openContextMenuOnMouseDown={nativeContextMenu !== true}
-                priceHistory={financialsMap.get(ticker.metadata.ticker)?.priceHistory}
-                contentWidth={contentWidth}
-              />
-            );
-            })}
-            {virtualize && endIndex < tickers.length && (
-              <Box height={Math.max(tickers.length - endIndex, 0)} />
-            )}
-          </>
-        )}
-      </ScrollBox>
-    </Box>
-  );
-}