gloomberb 0.5.1 → 0.6.0

package/src/components/data-table-view.tsx

@@ -0,0 +1,279 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { Box, type ScrollBoxRenderable } from "../ui";
+import { useShortcut } from "../react/input";
+import { DataTable, type DataTableColumn, type DataTableProps } from "./ui";
+
+export interface DataTableKeyEvent {
+  name?: string;
+  ctrl?: boolean;
+  meta?: boolean;
+  option?: boolean;
+  shift?: boolean;
+  preventDefault?: () => void;
+  stopPropagation?: () => void;
+}
+
+export interface DataTableViewProps<
+  T,
+  C extends DataTableColumn = DataTableColumn,
+> extends Omit<
+    DataTableProps<T, C>,
+    | "headerScrollRef"
+    | "scrollRef"
+    | "syncHeaderScroll"
+    | "onBodyScrollActivity"
+    | "hoveredIdx"
+    | "setHoveredIdx"
+  > {
+  focused?: boolean;
+  selectedIndex?: number | null;
+  onSelectIndex?: (index: number, item: T) => void;
+  onActivateIndex?: (index: number, item: T) => void;
+  isNavigable?: (item: T, index: number) => boolean;
+  rootBefore?: ReactNode;
+  rootAfter?: ReactNode;
+  rootWidth?: number;
+  rootHeight?: number;
+  rootBackgroundColor?: string;
+  headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
+  scrollRef?: RefObject<ScrollBoxRenderable | null>;
+  syncHeaderScroll?: () => void;
+  onBodyScrollActivity?: () => void;
+  hoveredIdx?: number | null;
+  setHoveredIdx?: (index: number | null) => void;
+  keyboardNavigation?: boolean;
+  onRootKeyDown?: (event: DataTableKeyEvent) => boolean | void;
+  resetScrollKey?: unknown;
+}
+
+function isActivationKey(name: string | undefined): boolean {
+  return name === "enter" || name === "return";
+}
+
+function isNextRowKey(name: string | undefined): boolean {
+  return name === "j" || name === "down";
+}
+
+function isPreviousRowKey(name: string | undefined): boolean {
+  return name === "k" || name === "up";
+}
+
+function stopTableKey(event: DataTableKeyEvent) {
+  event.stopPropagation?.();
+  event.preventDefault?.();
+}
+
+export function DataTableView<
+  T,
+  C extends DataTableColumn = DataTableColumn,
+>({
+  focused = false,
+  selectedIndex,
+  onSelectIndex,
+  onActivateIndex,
+  isNavigable,
+  rootBefore,
+  rootAfter,
+  rootWidth,
+  rootHeight,
+  rootBackgroundColor,
+  headerScrollRef,
+  scrollRef,
+  syncHeaderScroll,
+  onBodyScrollActivity,
+  hoveredIdx,
+  setHoveredIdx,
+  keyboardNavigation = true,
+  onRootKeyDown,
+  resetScrollKey,
+  scrollToIndex,
+  ...tableProps
+}: DataTableViewProps<T, C>) {
+  const internalHeaderScrollRef = useRef<ScrollBoxRenderable>(null);
+  const internalScrollRef = useRef<ScrollBoxRenderable>(null);
+  const [internalHoveredIdx, setInternalHoveredIdx] = useState<number | null>(
+    null,
+  );
+
+  const effectiveHeaderScrollRef = headerScrollRef ?? internalHeaderScrollRef;
+  const effectiveScrollRef = scrollRef ?? internalScrollRef;
+  const effectiveHoveredIdx =
+    hoveredIdx !== undefined ? hoveredIdx : internalHoveredIdx;
+  const effectiveSetHoveredIdx = setHoveredIdx ?? setInternalHoveredIdx;
+  const [fallbackSelectedIndex, setFallbackSelectedIndex] = useState<
+    number | null
+  >(null);
+  const selectedIndexFromPredicate = useMemo(
+    () => tableProps.items.findIndex(tableProps.isSelected),
+    [tableProps.items, tableProps.isSelected],
+  );
+  const usesFallbackSelection =
+    selectedIndex == null && selectedIndexFromPredicate < 0;
+  const effectiveSelectedIndex = selectedIndex
+    ?? (selectedIndexFromPredicate >= 0
+      ? selectedIndexFromPredicate
+      : fallbackSelectedIndex ?? -1);
+
+  const navigableIndices = useMemo(() => {
+    if (!isNavigable) {
+      return tableProps.items.map((_, index) => index);
+    }
+    return tableProps.items.reduce<number[]>((indices, item, index) => {
+      if (isNavigable(item, index)) indices.push(index);
+      return indices;
+    }, []);
+  }, [isNavigable, tableProps.items]);
+
+  useEffect(() => {
+    if (!usesFallbackSelection) {
+      if (fallbackSelectedIndex !== null) setFallbackSelectedIndex(null);
+      return;
+    }
+    if (fallbackSelectedIndex == null) return;
+    if (navigableIndices.includes(fallbackSelectedIndex)) return;
+
+    const nextIndex = navigableIndices.find(
+      (index) => index >= fallbackSelectedIndex,
+    )
+      ?? navigableIndices.at(-1)
+      ?? null;
+    setFallbackSelectedIndex(nextIndex);
+  }, [fallbackSelectedIndex, navigableIndices, usesFallbackSelection]);
+
+  const defaultSyncHeaderScroll = useCallback(() => {
+    const body = effectiveScrollRef.current;
+    const header = effectiveHeaderScrollRef.current;
+    if (!body || !header) return;
+    if (header.scrollLeft !== body.scrollLeft) {
+      header.scrollLeft = body.scrollLeft;
+    }
+  }, [effectiveHeaderScrollRef, effectiveScrollRef]);
+  const effectiveSyncHeaderScroll = syncHeaderScroll ?? defaultSyncHeaderScroll;
+
+  const handleBodyScrollActivity = useCallback(() => {
+    if (onBodyScrollActivity) {
+      onBodyScrollActivity();
+      return;
+    }
+    queueMicrotask(effectiveSyncHeaderScroll);
+  }, [effectiveSyncHeaderScroll, onBodyScrollActivity]);
+
+  useEffect(() => {
+    if (resetScrollKey === undefined) return;
+    const body = effectiveScrollRef.current;
+    if (body) {
+      body.scrollTop = 0;
+      body.scrollLeft = 0;
+    }
+    const header = effectiveHeaderScrollRef.current;
+    if (header) {
+      header.scrollLeft = 0;
+    }
+  }, [effectiveHeaderScrollRef, effectiveScrollRef, resetScrollKey]);
+
+  const selectIndex = useCallback((index: number) => {
+    if (index < 0 || index >= tableProps.items.length) return;
+    const item = tableProps.items[index]!;
+    if (isNavigable && !isNavigable(item, index)) return;
+    if (usesFallbackSelection) {
+      setFallbackSelectedIndex(index);
+    }
+    if (onSelectIndex) {
+      onSelectIndex(index, item);
+      return;
+    }
+    tableProps.onSelect(item, index);
+  }, [isNavigable, onSelectIndex, tableProps, usesFallbackSelection]);
+
+  const activateIndex = useCallback((index: number) => {
+    if (index < 0 || index >= tableProps.items.length) return;
+    const item = tableProps.items[index]!;
+    if (isNavigable && !isNavigable(item, index)) return;
+    if (onActivateIndex) {
+      onActivateIndex(index, item);
+      return;
+    }
+    tableProps.onActivate?.(item, index);
+  }, [isNavigable, onActivateIndex, tableProps]);
+
+  const selectByOffset = useCallback((offset: -1 | 1) => {
+    if (navigableIndices.length === 0) return;
+    const currentPosition = navigableIndices.indexOf(effectiveSelectedIndex);
+    const nextPosition = currentPosition >= 0
+      ? Math.max(0, Math.min(currentPosition + offset, navigableIndices.length - 1))
+      : 0;
+    const nextIndex = navigableIndices[nextPosition];
+    if (nextIndex !== undefined) selectIndex(nextIndex);
+  }, [effectiveSelectedIndex, navigableIndices, selectIndex]);
+
+  const activateSelection = useCallback(() => {
+    if (navigableIndices.length === 0) return;
+    const selectedIsNavigable = navigableIndices.includes(effectiveSelectedIndex);
+    activateIndex(selectedIsNavigable ? effectiveSelectedIndex : navigableIndices[0]!);
+  }, [activateIndex, effectiveSelectedIndex, navigableIndices]);
+
+  useShortcut((event) => {
+    if (!focused || !keyboardNavigation) return;
+
+    if (onRootKeyDown?.(event)) return;
+    if (tableProps.items.length === 0) return;
+
+    if (isNextRowKey(event.name)) {
+      stopTableKey(event);
+      selectByOffset(1);
+      return;
+    }
+
+    if (isPreviousRowKey(event.name)) {
+      stopTableKey(event);
+      selectByOffset(-1);
+      return;
+    }
+
+    if (isActivationKey(event.name)) {
+      stopTableKey(event);
+      activateSelection();
+    }
+  });
+
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      width={rootWidth}
+      height={rootHeight}
+      backgroundColor={rootBackgroundColor}
+      overflow="hidden"
+    >
+      {rootBefore}
+      <DataTable<T, C>
+        {...tableProps}
+        headerScrollRef={effectiveHeaderScrollRef}
+        scrollRef={effectiveScrollRef}
+        syncHeaderScroll={effectiveSyncHeaderScroll}
+        onBodyScrollActivity={handleBodyScrollActivity}
+        hoveredIdx={effectiveHoveredIdx}
+        setHoveredIdx={effectiveSetHoveredIdx}
+        scrollToIndex={scrollToIndex ?? (
+          effectiveSelectedIndex >= 0 ? effectiveSelectedIndex : null
+        )}
+        isSelected={(item, index) => (
+          tableProps.isSelected(item, index)
+          || (
+            index === effectiveSelectedIndex
+            && (!isNavigable || isNavigable(item, index))
+          )
+        )}
+      />
+      {rootAfter}
+    </Box>
+  );
+}

package/src/components/feed-data-table-stack-view.test.tsx

@@ -0,0 +1,225 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, useState } from "react";
+import { testRender } from "../renderers/opentui/test-utils";
+import { AppContext, PaneInstanceProvider, createInitialState } from "../state/app-context";
+import { createDefaultConfig } from "../types/config";
+import {
+  FeedDataTableStackView,
+  type FeedDataTableItem,
+} from "./feed-data-table-stack-view";
+import { Box, Text } from "../ui";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let setHarnessItems:
+  | ((items: FeedDataTableItem[]) => void)
+  | undefined;
+let harnessSelectedIdx = 0;
+let rootKeyHits = 0;
+
+const items: FeedDataTableItem[] = [
+  {
+    id: "1",
+    eyebrow: "Reuters",
+    title:
+      "Long headline with enough words to prove the table truncates cleanly",
+    timestamp: new Date("2024-08-01T12:00:00Z"),
+    preview: "Preview text with a little more color.",
+    detailTitle: "Long headline with enough words",
+    detailMeta: ["Reuters", "Published Aug 1, 2024"],
+    detailBody:
+      "This body should stay readable when the pane opens the detail page.",
+    detailNote: "https://example.com/story",
+  },
+  {
+    id: "2",
+    eyebrow: "10-Q",
+    title: "10-Q filing",
+    timestamp: new Date("2024-08-02T12:00:00Z"),
+    preview: "Quarterly report",
+    detailTitle: "10-Q filing",
+    detailMeta: ["Filed Aug 2, 2024"],
+    detailBody: "Quarterly report details.",
+  },
+];
+
+afterEach(async () => {
+  if (testSetup) {
+    await act(async () => {
+      testSetup!.renderer.destroy();
+    });
+    testSetup = undefined;
+  }
+  setHarnessItems = undefined;
+  harnessSelectedIdx = 0;
+  rootKeyHits = 0;
+});
+
+function Harness({
+  width,
+  height,
+  withRootControls = false,
+}: {
+  width: number;
+  height: number;
+  withRootControls?: boolean;
+}) {
+  const [activeItems, setActiveItems] = useState(items);
+  const [selectedIdx, setSelectedIdx] = useState(0);
+
+  setHarnessItems = setActiveItems;
+  harnessSelectedIdx = selectedIdx;
+
+  const state = createInitialState(
+    createDefaultConfig("/tmp/gloomberb-detail-data-table-test"),
+  );
+
+  return (
+    <AppContext value={{ state, dispatch: () => {} }}>
+      <PaneInstanceProvider paneId="portfolio-list:main">
+        <FeedDataTableStackView
+          width={width}
+          height={height}
+          focused
+          items={activeItems}
+          selectedIdx={selectedIdx}
+          onSelect={setSelectedIdx}
+          rootBefore={withRootControls ? (
+            <Box height={1}>
+              <Text>Feed controls</Text>
+            </Box>
+          ) : undefined}
+          onRootKeyDown={withRootControls ? (event) => {
+            if (event.name !== "f") return false;
+            rootKeyHits += 1;
+            return true;
+          } : undefined}
+          sourceLabel="Source"
+          titleLabel="Headline"
+        />
+      </PaneInstanceProvider>
+    </AppContext>
+  );
+}
+
+async function renderSettled() {
+  await act(async () => {
+    await testSetup!.renderOnce();
+    await testSetup!.renderOnce();
+  });
+}
+
+async function clickAt(x: number, y: number) {
+  await act(async () => {
+    await testSetup!.mockMouse.click(x, y);
+    await testSetup!.renderOnce();
+    await testSetup!.renderOnce();
+  });
+}
+
+async function emitKeypress(event: { name?: string; sequence?: string }) {
+  await act(async () => {
+    testSetup!.renderer.keyInput.emit("keypress", {
+      ctrl: false,
+      meta: false,
+      option: false,
+      shift: false,
+      eventType: "press",
+      repeated: false,
+      preventDefault: () => {},
+      stopPropagation: () => {},
+      ...event,
+    } as any);
+    await testSetup!.renderOnce();
+  });
+}
+
+describe("FeedDataTableStackView", () => {
+  test("renders a DataTable list by default", async () => {
+    testSetup = await testRender(<Harness width={90} height={16} />, {
+      width: 90,
+      height: 16,
+    });
+
+    await renderSettled();
+    const frame = testSetup.captureCharFrame();
+
+    expect(frame).toContain("Time");
+    expect(frame).toContain("Source");
+    expect(frame).toContain("Headline");
+    expect(frame).toContain("10-Q filing");
+    expect(frame).not.toContain("j/k move");
+    expect(frame).not.toContain("Quarterly report details.");
+  });
+
+  test("selects a row on first click without opening detail", async () => {
+    testSetup = await testRender(<Harness width={90} height={16} />, {
+      width: 90,
+      height: 16,
+    });
+
+    await renderSettled();
+
+    const frame = testSetup.captureCharFrame();
+    const lines = frame.split("\n");
+    const filingRow = lines.findIndex((line) => line.includes("10-Q filing"));
+
+    await clickAt(2, filingRow);
+
+    const nextFrame = testSetup.captureCharFrame();
+    expect(harnessSelectedIdx).toBe(1);
+    expect(nextFrame).not.toContain("\u2190 Back");
+    expect(nextFrame).not.toContain("Quarterly report details.");
+  });
+
+  test("opens detail from the selected row and closes it when items change", async () => {
+    testSetup = await testRender(<Harness width={90} height={16} />, {
+      width: 90,
+      height: 16,
+    });
+
+    await renderSettled();
+
+    const frame = testSetup.captureCharFrame();
+    const lines = frame.split("\n");
+    const filingRow = lines.findIndex((line) => line.includes("10-Q filing"));
+
+    await clickAt(2, filingRow);
+    expect(harnessSelectedIdx).toBe(1);
+    await clickAt(2, filingRow);
+    await renderSettled();
+
+    const detailFrame = testSetup.captureCharFrame();
+    expect(detailFrame).toContain("\u2190 Back 10-Q filing");
+    expect(detailFrame).toContain("Quarterly report details.");
+    expect(detailFrame.match(/10-Q filing/g)?.length ?? 0).toBe(1);
+
+    await act(async () => {
+      setHarnessItems?.([
+        {
+          id: "9",
+          title: "Fresh item after source change",
+          detailBody: "Replacement detail",
+        },
+      ]);
+    });
+    await renderSettled();
+
+    const nextFrame = testSetup.captureCharFrame();
+    expect(nextFrame).toContain("Fresh item after source change");
+    expect(nextFrame).not.toContain("\u2190 Back");
+    expect(nextFrame).not.toContain("Replacement detail");
+  });
+
+  test("renders root controls and delegates root key handling", async () => {
+    testSetup = await testRender(<Harness width={90} height={16} withRootControls />, {
+      width: 90,
+      height: 16,
+    });
+
+    await renderSettled();
+    expect(testSetup.captureCharFrame()).toContain("Feed controls");
+
+    await emitKeypress({ name: "f", sequence: "f" });
+    expect(rootKeyHits).toBe(1);
+  });
+});