gloomberb 0.9.2 → 0.9.4

package/src/plugins/builtin/substack/article-detail.tsx

@@ -1,4 +1,4 @@
-import { useCallback, type RefObject } from "react";
+import { memo, useCallback, useMemo, type RefObject } from "react";
 import { Box, ScrollBox, Text, TextAttributes, useRendererHost, type ScrollBoxRenderable } from "../../../ui";
 import { Spinner } from "../../../components";
 import { RemoteImage } from "../../../components/ui";
@@ -38,6 +38,25 @@ function wrappedTextProps(width: number) {
   } as const;
 }
 
+const ARTICLE_IMAGE_MAX_WIDTH = 152;
+const ARTICLE_IMAGE_MAX_HEIGHT = 26;
+const ARTICLE_IMAGE_MIN_HEIGHT = 6;
+const ARTICLE_IMAGE_LEGACY_HEIGHT_CAP = 14;
+
+export function resolveArticleImageSize(lineWidth: number) {
+  const safeLineWidth = Math.max(1, Math.floor(lineWidth));
+  const width = Math.min(safeLineWidth, ARTICLE_IMAGE_MAX_WIDTH);
+  const legacyHeight = Math.min(ARTICLE_IMAGE_LEGACY_HEIGHT_CAP, Math.floor(width * 0.32));
+  const expandedHeight = Math.floor(width * 0.18);
+  return {
+    width,
+    height: Math.max(ARTICLE_IMAGE_MIN_HEIGHT, Math.min(
+      ARTICLE_IMAGE_MAX_HEIGHT,
+      Math.max(legacyHeight, expandedHeight),
+    )),
+  };
+}
+
 function normalizedTwitterUsername(username: string | null | undefined): string | null {
   const normalized = username?.trim().replace(/^@/, "") ?? "";
   return /^[A-Za-z0-9_]{1,15}$/.test(normalized) ? normalized : null;
@@ -251,7 +270,7 @@ function ArticleBlockView({
   }
 }
 
-function ArticleRichContent({
+const ArticleRichContent = memo(function ArticleRichContent({
   blocks,
   fallbackText,
   fallbackImageUrls,
@@ -269,14 +288,20 @@ function ArticleRichContent({
   imageHeight: number;
 }) {
   const rendererHost = useRendererHost();
-  const resolvedBlocks = blocks.length > 0
-    ? blocks
-    : [
-      ...(fallbackText ? [{ type: "paragraph" as const, text: fallbackText }] : []),
-      ...fallbackImageUrls.map((url): SubstackContentBlock => ({ type: "image", url, alt: articleTitle })),
-    ];
-  const tickerText = resolvedBlocks.map(articleBlockText).filter(Boolean).join("\n");
-  const { catalog, openTicker } = useInlineTickers([tickerText], { liveQuotes: false });
+  const resolvedBlocks = useMemo(() => (
+    blocks.length > 0
+      ? blocks
+      : [
+        ...(fallbackText ? [{ type: "paragraph" as const, text: fallbackText }] : []),
+        ...fallbackImageUrls.map((url): SubstackContentBlock => ({ type: "image", url, alt: articleTitle })),
+      ]
+  ), [articleTitle, blocks, fallbackImageUrls, fallbackText]);
+  const tickerText = useMemo(
+    () => resolvedBlocks.map(articleBlockText).filter(Boolean).join("\n"),
+    [resolvedBlocks],
+  );
+  const tickerTexts = useMemo(() => [tickerText], [tickerText]);
+  const { catalog, openTicker } = useInlineTickers(tickerTexts, { liveQuotes: false });
   const openLink = useCallback((url: string) => {
     void rendererHost.openExternal(url);
   }, [rendererHost]);
@@ -307,9 +332,9 @@ function ArticleRichContent({
       ))}
     </Box>
   );
-}
+});
 
-export function ArticleDetail({
+export const ArticleDetail = memo(function ArticleDetail({
   article,
   detail,
   width,
@@ -331,8 +356,7 @@ export function ArticleDetail({
   const blocks = resolved?.contentBlocks ?? [];
   const fallbackImageUrls = resolved?.imageUrls.length ? resolved.imageUrls : article.imageUrls;
   const lineWidth = Math.max(1, width - 2);
-  const imageWidth = Math.min(lineWidth, 86);
-  const imageHeight = Math.max(6, Math.min(14, Math.floor(imageWidth * 0.32)));
+  const { width: imageWidth, height: imageHeight } = resolveArticleImageSize(lineWidth);
 
   return (
     <ScrollBox ref={scrollRef} scrollY focusable={false} flexGrow={1} paddingX={1}>
@@ -356,4 +380,4 @@ export function ArticleDetail({
       </Box>
     </ScrollBox>
   );
-}
+});

package/src/plugins/builtin/substack/article-stack.tsx

@@ -24,6 +24,7 @@ export function SubstackArticleStack({
   detailOpen,
   selectedArticle,
   selectedArticleId,
+  readArticleIds,
   detailContent,
   activePublication,
   activeFeedState,
@@ -45,6 +46,7 @@ export function SubstackArticleStack({
   detailOpen: boolean;
   selectedArticle: SubstackArticleSummary | null;
   selectedArticleId: string | null;
+  readArticleIds: ReadonlySet<string>;
   detailContent: ReactNode;
   activePublication: SubstackPublication | null;
   activeFeedState: ActiveFeedState;
@@ -78,7 +80,9 @@ export function SubstackArticleStack({
         return {
           text: article.title,
           color: selectedColor ?? colors.text,
-          attributes: TextAttributes.BOLD,
+          attributes: readArticleIds.has(article.id)
+            ? TextAttributes.NONE
+            : TextAttributes.BOLD,
         };
       case "read":
         return {
@@ -86,7 +90,7 @@ export function SubstackArticleStack({
           color: selectedColor ?? colors.textDim,
         };
     }
-  }, []);
+  }, [readArticleIds]);
 
   const bodyAfter = activePublication && sortedRows.length > 0 && (activeFeedState.loading || activeFeedState.loadingMore) ? (
     <Box height={1} paddingX={1}>

package/src/plugins/builtin/substack/feed-tabs.tsx

@@ -1,3 +1,4 @@
+import { memo, useMemo } from "react";
 import { Box } from "../../../ui";
 import { Tabs } from "../../../components";
 import { tabIdForPublication } from "./table";
@@ -7,7 +8,7 @@ import {
 } from "./types";
 import { tabLabel } from "./pane-state";
 
-export function SubstackFeedTabs({
+export const SubstackFeedTabs = memo(function SubstackFeedTabs({
   subscriptions,
   activeTab,
   focused,
@@ -20,16 +21,18 @@ export function SubstackFeedTabs({
   detailOpen: boolean;
   onSelect: (tabId: string) => void;
 }) {
+  const tabs = useMemo(() => [
+    { label: "Feed", value: SUBSTACK_FEED_TAB_ID },
+    ...subscriptions.map((publication) => ({
+      label: tabLabel(publication.name),
+      value: tabIdForPublication(publication),
+    })),
+  ], [subscriptions]);
+
   return (
     <Box height={1}>
       <Tabs
-        tabs={[
-          { label: "Feed", value: SUBSTACK_FEED_TAB_ID },
-          ...subscriptions.map((publication) => ({
-            label: tabLabel(publication.name),
-            value: tabIdForPublication(publication),
-          })),
-        ]}
+        tabs={tabs}
         activeValue={activeTab}
         onSelect={onSelect}
         compact
@@ -38,4 +41,4 @@ export function SubstackFeedTabs({
       />
     </Box>
   );
-}
+});

package/src/plugins/builtin/substack/pane.tsx

@@ -58,6 +58,7 @@ import {
   type LoadState,
   type PublicationFeedState,
 } from "./pane-state";
+import { useSubstackReadState } from "./read-state";
 
 const PUBLICATION_LOAD_MORE_THRESHOLD_ROWS = 8;
 
@@ -74,6 +75,7 @@ export function SubstackPane({ focused, width, height }: PaneProps) {
     columnId: "published",
     direction: "desc",
   });
+  const { readArticleIds, markArticleRead } = useSubstackReadState();
   const homeFetchGenRef = useRef(0);
   const publicationFetchGenRef = useRef<Record<string, number>>({});
   const detailFetchGenRef = useRef(0);
@@ -206,12 +208,12 @@ export function SubstackPane({ focused, width, height }: PaneProps) {
     loadPublication(activePublication, false);
   }, [activePublication, activePublicationTabId, loadPublication, publicationFeeds]);
 
-  const activeFeedState = activeFeedStateFromSources({
+  const activeFeedState = useMemo(() => activeFeedStateFromSources({
     activePublication,
     activePublicationTabId,
     publicationFeeds,
     home,
-  });
+  }), [activePublication, activePublicationTabId, home, publicationFeeds]);
 
   const loadMoreActivePublicationRows = useCallback(() => {
     if (!activePublication || !activePublicationTabId || detailOpen) return;
@@ -335,8 +337,9 @@ export function SubstackPane({ focused, width, height }: PaneProps) {
 
   const openSelectedArticle = useCallback(() => {
     if (!selectedArticle?.url) return;
+    markArticleRead(selectedArticle.id);
     void rendererHost.openExternal(selectedArticle.url);
-  }, [rendererHost, selectedArticle]);
+  }, [markArticleRead, rendererHost, selectedArticle]);
 
   const handleLogin = useCallback((nextAuth: SubstackAuthState) => {
     setAuth(nextAuth);
@@ -477,7 +480,9 @@ export function SubstackPane({ focused, width, height }: PaneProps) {
         selectedArticle={selectedArticle}
         detailContent={detailContent}
         selectedArticleId={selectedArticleId}
+        readArticleIds={readArticleIds}
         onActivate={(article) => {
+          markArticleRead(article.id);
           setSelectedArticleId(article.id, { immediate: true });
           setDetailOpen(true);
         }}

package/src/plugins/builtin/substack/read-state.ts

@@ -0,0 +1,55 @@
+import { useCallback, useMemo } from "react";
+import { usePluginState } from "../../runtime";
+import {
+  DEFAULT_MAX_READ_IDS,
+  markReadId,
+  normalizeReadIds,
+  sameStringArray,
+} from "../shared/read-state";
+
+export interface SubstackReadState {
+  articleIds: string[];
+}
+
+const SUBSTACK_READ_STATE_SCHEMA_VERSION = 1;
+const READ_STATE_KEY = "read-articles";
+const EMPTY_READ_STATE: SubstackReadState = { articleIds: [] };
+
+export const MAX_READ_SUBSTACK_ARTICLE_IDS = DEFAULT_MAX_READ_IDS;
+
+export function normalizeSubstackReadState(state: SubstackReadState): SubstackReadState {
+  return {
+    articleIds: normalizeReadIds(state.articleIds, MAX_READ_SUBSTACK_ARTICLE_IDS),
+  };
+}
+
+export function markSubstackArticleRead(
+  state: SubstackReadState,
+  articleId: string,
+): SubstackReadState {
+  const current = normalizeSubstackReadState(state).articleIds;
+  const articleIds = markReadId(current, articleId, MAX_READ_SUBSTACK_ARTICLE_IDS);
+
+  return sameStringArray(articleIds, state.articleIds) ? state : { articleIds };
+}
+
+export function useSubstackReadState() {
+  const [readState, setReadState] = usePluginState<SubstackReadState>(
+    READ_STATE_KEY,
+    EMPTY_READ_STATE,
+    { schemaVersion: SUBSTACK_READ_STATE_SCHEMA_VERSION },
+  );
+  const normalizedReadState = useMemo(
+    () => normalizeSubstackReadState(readState),
+    [readState],
+  );
+  const readArticleIds = useMemo(
+    () => new Set(normalizedReadState.articleIds),
+    [normalizedReadState],
+  );
+  const markArticleRead = useCallback((articleId: string) => {
+    setReadState((current) => markSubstackArticleRead(current, articleId));
+  }, [setReadState]);
+
+  return { readArticleIds, markArticleRead };
+}

package/src/plugins/builtin/thirteenf/pane.test.tsx

@@ -224,6 +224,32 @@ describe("ThirteenFPane", () => {
     ).toBeUndefined();
   });
 
+  test("moves from the first fund row to search with Up", async () => {
+    setHttpFetchTransport(async (url) => {
+      const path = new URL(String(url)).pathname;
+      if (path.endsWith("/topfunds")) {
+        return json([
+          { cik: "1", name: "Alpha Capital", period_of_report: "2026-03-31", pnl: null },
+        ]);
+      }
+      return json([]);
+    });
+
+    await act(async () => {
+      testSetup = await testRender(<Harness />, { width: 100, height: 20 });
+    });
+    await renderFrames();
+
+    await emitKeypress({ name: "up", sequence: "\u001B[A" });
+    await act(async () => {
+      await testSetup!.mockInput.typeText("BRK");
+      await testSetup!.renderOnce();
+    });
+    await renderFrames(2);
+
+    expect(testSetup!.captureCharFrame()).toContain("BRK");
+  });
+
   test("rapid keyboard navigation activates the current rendered row", async () => {
     setHttpFetchTransport(async (url) => {
       const path = new URL(String(url)).pathname;

package/src/plugins/builtin/thirteenf/pane.tsx

@@ -15,6 +15,7 @@ import {
   Tabs,
   usePaneFooter,
   type DataTableKeyEvent,
+  type DataTableRootKeyContext,
 } from "../../../components";
 import { useShortcut } from "../../../react/input";
 import { usePaneSettingValue } from "../../../state/app/context";
@@ -23,6 +24,7 @@ import { TICKER_RESEARCH_PANE_ID } from "../../../types/config";
 import type { PaneProps } from "../../../types/plugin";
 import { isDetailBackNavigationKey } from "../../../utils/back-navigation";
 import { isPlainKey } from "../../../utils/keyboard";
+import { isPlainArrowUp, stopSearchFocusNavigation } from "../../../utils/search-focus-navigation";
 import { truncateWithEllipsis } from "../../../utils/text-wrap";
 import { usePluginPaneState, usePluginTickerActions } from "../../runtime";
 import { loadBrowserRows, loadFilingPositions, loadFundDetail } from "./data";
@@ -303,6 +305,7 @@ export function ThirteenFPane({ focused, width, height }: PaneProps) {
         normalizeValue={trimSearchValue}
         onFocus={focusSearch}
         onBlur={blurSearch}
+        onNavigateDown={blurSearch}
         onQueryChange={updateQuery}
       />
     </Box>
@@ -312,7 +315,15 @@ export function ThirteenFPane({ focused, width, height }: PaneProps) {
     ? "Loading 13F funds..."
     : error ?? warning ?? "No 13F funds found.";
 
-  const handleRootKeyDown = useCallback((event: DataTableKeyEvent) => {
+  const handleRootKeyDown = useCallback((
+    event: DataTableKeyEvent,
+    context: DataTableRootKeyContext,
+  ) => {
+    if (context.selectedIndex <= 0 && isPlainArrowUp(event)) {
+      stopSearchFocusNavigation(event);
+      focusSearch();
+      return true;
+    }
     if (event.name === "r") {
       event.preventDefault?.();
       event.stopPropagation?.();

package/src/plugins/builtin/ticker-detail/data-panes/fundamental-graph/content.tsx

@@ -1,23 +1,25 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Box, TextAttributes } from "../../../../../ui";
 import {
   DataTableView,
+  Tabs,
   usePaneFooter,
   type DataTableCell,
   type DataTableKeyEvent,
 } from "../../../../../components";
+import { useShortcut } from "../../../../../react/input";
+import type { BarChartHover } from "../../../../../components/chart/bar-chart-renderer";
 import { StaticBarChartSurface } from "../../../../../components/chart/static/bar-chart-surface";
 import { colors, priceColor } from "../../../../../theme/colors";
 import { usePluginPaneState } from "../../../../runtime";
 import { loadingErrorFooterInfo, refreshFooterHint, useClampSelectedIndex } from "../../../shared/table-pane";
 import {
+  allMetricDefs,
   buildFundamentalColumns,
   buildGraphBarSeries,
-  defaultMetric,
   formatMaybePercent,
-  isMetricForKind,
   metricDef,
-  nextMetric,
+  metricKind,
 } from "./model";
 import type {
   FundamentalColumn,
@@ -41,6 +43,7 @@ export function FundamentalGraphContent({
   setMetric,
   chartKind,
   setChartKind,
+  onCapture,
 }: {
   focused: boolean;
   width: number;
@@ -55,39 +58,106 @@ export function FundamentalGraphContent({
   setMetric: (updater: (current: GraphMetricKey) => GraphMetricKey) => void;
   chartKind: GraphKind;
   setChartKind: (updater: (current: GraphKind) => GraphKind) => void;
+  onCapture?: (capturing: boolean) => void;
 }) {
   const [selectedIdx, setSelectedIdx] = usePluginPaneState<number>("selectedIdx", 0);
+  const [hoveredBar, setHoveredBar] = useState<BarChartHover | null>(null);
+  const [metricTabsFocused, setMetricTabsFocused] = useState(false);
   const definition = metricDef(chartKind, metric);
+  const metricOptions = useMemo(() => allMetricDefs(), []);
+  const metricTabs = useMemo(() => metricOptions.map(({ definition }) => ({
+    label: definition.label,
+    value: definition.key,
+  })), [metricOptions]);
   const multiSymbol = new Set(rows.map((row) => row.symbol)).size > 1;
   const columns = useMemo(() => buildFundamentalColumns(width, multiSymbol), [multiSymbol, width]);
-  const boundedSelectedIdx = rows.length > 0 ? Math.min(selectedIdx, rows.length - 1) : -1;
-  const chartHeight = height >= 14 ? Math.min(12, Math.max(7, Math.floor(height * 0.52))) : Math.max(4, Math.floor(height / 2));
-  const tableHeight = Math.max(4, height - chartHeight);
+  const tableRows = useMemo(() => [...rows].sort((left, right) => (
+    right.date.localeCompare(left.date) || left.symbol.localeCompare(right.symbol)
+  )), [rows]);
+  const boundedSelectedIdx = tableRows.length > 0 ? Math.min(selectedIdx, tableRows.length - 1) : -1;
+  const minTableHeight = tableRows.length > 0 ? 4 : 3;
+  const desiredChartHeight = height >= 14 ? Math.min(16, Math.max(9, Math.floor(height * 0.58))) : Math.max(4, Math.floor(height / 2));
+  const chartHeight = Math.max(1, Math.min(desiredChartHeight, Math.max(1, height - minTableHeight)));
+  const tableHeight = Math.max(0, height - chartHeight);
   const chartSeries = useMemo(() => buildGraphBarSeries(rows), [rows]);
-  const cycleMetric = useCallback(() => setMetric((current) => nextMetric(chartKind, current)), [chartKind, setMetric]);
-  const togglePeriod = useCallback(() => setPeriod((current) => current === "annual" ? "quarterly" : "annual"), [setPeriod]);
-  const toggleGraphKind = useCallback(() => {
-    const nextKind = chartKind === "fundamental" ? "valuation" : "fundamental";
+  const selectMetric = useCallback((value: string) => {
+    const nextMetric = value as GraphMetricKey;
+    const nextKind = metricKind(nextMetric);
+    if (!nextKind) return;
+    setHoveredBar(null);
     setChartKind(() => nextKind);
-    setMetric((current) => isMetricForKind(nextKind, current) ? current : defaultMetric(nextKind));
-  }, [chartKind, setChartKind, setMetric]);
+    setMetric(() => nextMetric);
+  }, [setChartKind, setMetric]);
+  const focusMetricTabs = useCallback(() => {
+    if (metricTabsFocused) return;
+    setMetricTabsFocused(true);
+    onCapture?.(true);
+  }, [metricTabsFocused, onCapture]);
+  const releaseMetricTabs = useCallback(() => {
+    if (!metricTabsFocused) return;
+    setMetricTabsFocused(false);
+    onCapture?.(false);
+  }, [metricTabsFocused, onCapture]);
+  const selectMetricFromTabs = useCallback((value: string) => {
+    focusMetricTabs();
+    selectMetric(value);
+  }, [focusMetricTabs, selectMetric]);
+  const togglePeriod = useCallback(() => setPeriod((current) => current === "annual" ? "quarterly" : "annual"), [setPeriod]);
+  const hoveredValue = useMemo(() => {
+    if (!hoveredBar) return null;
+    const label = chartSeries.length > 1 ? `${hoveredBar.category} ${hoveredBar.seriesLabel}` : hoveredBar.category;
+    return `${label} ${definition.format(hoveredBar.value)}`;
+  }, [chartSeries.length, definition, hoveredBar]);
+
+  useClampSelectedIndex(tableRows.length, selectedIdx, setSelectedIdx);
+
+  useEffect(() => {
+    if (!focused && metricTabsFocused) {
+      setMetricTabsFocused(false);
+      onCapture?.(false);
+    }
+  }, [focused, metricTabsFocused, onCapture]);
+
+  useEffect(() => () => {
+    onCapture?.(false);
+  }, [onCapture]);
 
-  useClampSelectedIndex(rows.length, selectedIdx, setSelectedIdx);
+  useShortcut((event) => {
+    if (event.defaultPrevented || event.propagationStopped || event.targetEditable) return;
+    if (event.ctrl || event.meta || event.alt || event.shift) return;
+
+    const isEnter = event.name === "enter" || event.name === "return";
+    const isEscape = event.name === "escape" || event.name === "esc";
+    if (isEnter) {
+      event.preventDefault();
+      event.stopPropagation();
+      focusMetricTabs();
+      return;
+    }
+    if (isEscape && metricTabsFocused) {
+      event.preventDefault();
+      event.stopPropagation();
+      releaseMetricTabs();
+    }
+  }, { enabled: focused, phase: "before" });
 
   const handleKeyDown = useCallback((event: DataTableKeyEvent) => {
-    if (event.name === "r") {
+    const isEnter = event.name === "enter" || event.name === "return";
+    if (isEnter) {
       event.preventDefault?.();
-      reload();
+      event.stopPropagation?.();
+      focusMetricTabs();
       return true;
     }
-    if (event.name === "m") {
+    if ((event.name === "escape" || event.name === "esc") && metricTabsFocused) {
       event.preventDefault?.();
-      cycleMetric();
+      event.stopPropagation?.();
+      releaseMetricTabs();
       return true;
     }
-    if (event.name === "g") {
+    if (event.name === "r") {
       event.preventDefault?.();
-      toggleGraphKind();
+      reload();
       return true;
     }
     if (event.name === "p") {
@@ -96,7 +166,7 @@ export function FundamentalGraphContent({
       return true;
     }
     return false;
-  }, [cycleMetric, reload, toggleGraphKind, togglePeriod]);
+  }, [focusMetricTabs, metricTabsFocused, releaseMetricTabs, reload, togglePeriod]);
 
   const renderCell = useCallback((
     row: FundamentalGraphRow,
@@ -111,7 +181,11 @@ export function FundamentalGraphContent({
       case "date":
         return { text: row.date, color: selectedColor ?? colors.textDim };
       case "value":
-        return { text: definition.format(row.value), color: selectedColor ?? colors.textBright, attributes: TextAttributes.BOLD };
+        return {
+          text: definition.format(row.value),
+          color: row.value < 0 ? colors.negative : selectedColor ?? colors.textBright,
+          attributes: TextAttributes.BOLD,
+        };
       case "growth":
         return { text: formatMaybePercent(row.growth), color: selectedColor ?? priceColor(row.growth ?? 0) };
     }
@@ -119,41 +193,68 @@ export function FundamentalGraphContent({
 
   usePaneFooter("fundamental-graph", () => ({
     info: [
-      { id: "metric", parts: [{ text: definition.label, tone: "muted" as const }] },
-      { id: "kind", parts: [{ text: chartKind === "valuation" ? "valuation" : "fundamental", tone: "muted" as const }] },
-      { id: "period", parts: [{ text: period, tone: "muted" as const }] },
+      { id: "period", parts: [{ text: "period", tone: "label" as const }, { text: period, tone: "value" as const }] },
+      ...(hoveredValue ? [{ id: "hover", parts: [{ text: hoveredValue, tone: "value" as const }] }] : []),
       ...loadingErrorFooterInfo(loading, error),
     ],
     hints: [
-      { id: "metric", key: "m", label: "etric", onPress: cycleMetric },
-      { id: "kind", key: "g", label: "raph", onPress: toggleGraphKind },
       { id: "period", key: "p", label: "eriod", onPress: togglePeriod },
       refreshFooterHint(reload),
     ],
-  }), [chartKind, cycleMetric, definition.label, error, loading, period, reload, toggleGraphKind, togglePeriod]);
+  }), [error, hoveredValue, loading, period, reload, togglePeriod]);
+
+  const metricHeader = (
+    <Tabs
+      tabs={metricTabs}
+      activeValue={metric}
+      onSelect={selectMetricFromTabs}
+      compact
+      focused={focused && metricTabsFocused}
+      keyboardNavigation={metricTabsFocused}
+      scrollable
+      variant="underline"
+    />
+  );
 
   return (
-    <Box flexDirection="column" width={width} height={height} overflow="hidden">
-      <StaticBarChartSurface width={width} height={chartHeight} series={chartSeries} />
-      <DataTableView<FundamentalGraphRow, FundamentalColumn>
-        focused={focused}
-        selection={{
-          kind: "index",
-          selectedIndex: boundedSelectedIdx,
-          onChange: (index) => setSelectedIdx(index),
-        }}
-        onRootKeyDown={handleKeyDown}
-        rootWidth={width}
-        rootHeight={tableHeight}
-        columns={columns}
-        items={rows}
-        sortColumnId={null}
-        sortDirection="asc"
-        onHeaderClick={() => {}}
-        getItemKey={(row) => row.key}
-        renderCell={renderCell}
-        emptyStateTitle={loading ? "Loading fundamentals..." : "No graph data"}
+    <Box
+      flexDirection="column"
+      width={width}
+      height={height}
+      overflow="hidden"
+      onMouseDown={focusMetricTabs}
+    >
+      <StaticBarChartSurface
+        width={width}
+        height={chartHeight}
+        series={chartSeries}
+        header={metricHeader}
+        formatValue={definition.format}
+        onHoverChange={setHoveredBar}
+        onMouseDown={focusMetricTabs}
       />
+      {tableHeight > 0 ? (
+        <DataTableView<FundamentalGraphRow, FundamentalColumn>
+          focused={focused}
+          selection={{
+            kind: "index",
+            selectedIndex: boundedSelectedIdx,
+            onChange: (index) => setSelectedIdx(index),
+          }}
+          onRootKeyDown={handleKeyDown}
+          rootWidth={width}
+          rootHeight={tableHeight}
+          columns={columns}
+          items={tableRows}
+          sortColumnId="date"
+          sortDirection="desc"
+          onHeaderClick={() => {}}
+          onTableMouseDown={focusMetricTabs}
+          getItemKey={(row) => row.key}
+          renderCell={renderCell}
+          emptyStateTitle={loading ? "Loading fundamentals..." : "No graph data"}
+        />
+      ) : null}
     </Box>
   );
 }