gloomberb 0.9.3 → 0.9.4

package/src/plugins/prediction-markets/detail/book.tsx

@@ -1,7 +1,7 @@
-import { Box, Text } from "../../../ui";
-import { TextAttributes } from "../../../ui";
+import { useEffect, useMemo, useState } from "react";
+import { DataTableView, type DataTableColumn } from "../../../components";
 import { colors } from "../../../theme/colors";
-import { formatNumber, padTo } from "../../../utils/format";
+import { formatNumber } from "../../../utils/format";
 import { formatPredictionProbability } from "../metrics";
 import type {
   PredictionBookLevel,
@@ -9,111 +9,156 @@ import type {
   PredictionOrderPreviewIntent,
 } from "../types";
 
-function BookTable({
-  title,
+type BookColumnId = "outcome" | "side" | "price" | "size";
+type BookColumn = DataTableColumn & { id: BookColumnId };
+
+interface BookRow {
+  id: string;
+  outcome: "yes" | "no";
+  side: "buy" | "sell";
+  level: PredictionBookLevel;
+  intent: PredictionOrderPreviewIntent;
+}
+
+const BOOK_COLUMNS: BookColumn[] = [
+  { id: "outcome", label: "OUT", width: 5 },
+  { id: "side", label: "SIDE", width: 6 },
+  { id: "price", label: "PRICE", width: 8, align: "right" },
+  { id: "size", label: "SIZE", width: 10, align: "right" },
+];
+
+function bookRowsForLevels({
   levels,
-  onSelect,
+  marketKey,
+  outcome,
+  side,
 }: {
-  title: string;
   levels: PredictionBookLevel[];
-  onSelect: (level: PredictionBookLevel) => void;
-}) {
-  return (
-    <Box flexDirection="column" flexGrow={1}>
-      <Box height={1}>
-        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
-          {title}
-        </Text>
-      </Box>
-      <Box height={1}>
-        <Text fg={colors.textDim}>
-          {padTo("PRICE", 8)} {padTo("SIZE", 10)}
-        </Text>
-      </Box>
-      {levels.slice(0, 10).map((level) => (
-        <Box
-          key={`${title}:${level.price}:${level.size}`}
-          height={1}
-          onMouseDown={(event) => {
-            event.preventDefault();
-            onSelect(level);
-          }}
-        >
-          <Text fg={colors.text}>
-            {`${padTo(formatPredictionProbability(level.price), 8)} ${padTo(formatNumber(level.size, 0), 10, "right")}`}
-          </Text>
-        </Box>
-      ))}
-      {levels.length === 0 && <Text fg={colors.textDim}>No levels.</Text>}
-    </Box>
-  );
+  marketKey: string;
+  outcome: "yes" | "no";
+  side: "buy" | "sell";
+}): BookRow[] {
+  return levels.slice(0, 10).map((level, index) => ({
+    id: `${outcome}:${side}:${index}:${level.price}:${level.size}`,
+    outcome,
+    side,
+    level,
+    intent: {
+      marketKey,
+      outcome,
+      side,
+      price: level.price,
+      size: level.size,
+    },
+  }));
+}
+
+function buildBookRows(detail: PredictionMarketDetail): BookRow[] {
+  const marketKey = detail.summary.key;
+  return [
+    ...bookRowsForLevels({
+      levels: detail.book.yesBids,
+      marketKey,
+      outcome: "yes",
+      side: "buy",
+    }),
+    ...bookRowsForLevels({
+      levels: detail.book.yesAsks,
+      marketKey,
+      outcome: "yes",
+      side: "sell",
+    }),
+    ...bookRowsForLevels({
+      levels: detail.book.noBids,
+      marketKey,
+      outcome: "no",
+      side: "buy",
+    }),
+    ...bookRowsForLevels({
+      levels: detail.book.noAsks,
+      marketKey,
+      outcome: "no",
+      side: "sell",
+    }),
+  ];
 }
 
 export function PredictionMarketBookView({
   detail,
+  focused,
   onPreviewOrder,
+  width,
 }: {
   detail: PredictionMarketDetail;
+  focused: boolean;
   onPreviewOrder: (intent: PredictionOrderPreviewIntent) => void;
+  width: number;
 }) {
+  const rows = useMemo(() => buildBookRows(detail), [detail]);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(() =>
+    rows.length > 0 ? 0 : null,
+  );
+
+  useEffect(() => {
+    setSelectedIndex((current) => {
+      if (rows.length === 0) return null;
+      if (current == null || current >= rows.length) return 0;
+      return current;
+    });
+  }, [rows.length]);
+
   return (
-    <Box flexDirection="column" gap={1}>
-      <Box flexDirection="row" gap={2}>
-        <BookTable
-          title="YES Bids"
-          levels={detail.book.yesBids}
-          onSelect={(level) =>
-            onPreviewOrder({
-              marketKey: detail.summary.key,
-              outcome: "yes",
-              side: "buy",
-              price: level.price,
-              size: level.size,
-            })
-          }
-        />
-        <BookTable
-          title="YES Asks"
-          levels={detail.book.yesAsks}
-          onSelect={(level) =>
-            onPreviewOrder({
-              marketKey: detail.summary.key,
-              outcome: "yes",
-              side: "sell",
-              price: level.price,
-              size: level.size,
-            })
-          }
-        />
-      </Box>
-      <Box flexDirection="row" gap={2}>
-        <BookTable
-          title="NO Bids"
-          levels={detail.book.noBids}
-          onSelect={(level) =>
-            onPreviewOrder({
-              marketKey: detail.summary.key,
-              outcome: "no",
-              side: "buy",
-              price: level.price,
-              size: level.size,
-            })
-          }
-        />
-        <BookTable
-          title="NO Asks"
-          levels={detail.book.noAsks}
-          onSelect={(level) =>
-            onPreviewOrder({
-              marketKey: detail.summary.key,
-              outcome: "no",
-              side: "sell",
-              price: level.price,
-              size: level.size,
-            })
-          }
-        />
-      </Box>
-    </Box>
+    <DataTableView<BookRow, BookColumn>
+      focused={focused}
+      keyboardNavigation={focused}
+      rootWidth={width}
+      rootBackgroundColor={colors.panel}
+      selection={{
+        kind: "index",
+        selectedIndex,
+        onChange: (index) => setSelectedIndex(index),
+      }}
+      columns={BOOK_COLUMNS}
+      items={rows}
+      sortColumnId={null}
+      sortDirection="asc"
+      onHeaderClick={() => {}}
+      getItemKey={(row) => row.id}
+      onActivate={(row) => onPreviewOrder(row.intent)}
+      onRowMouseDown={(row, index, event) => {
+        event.preventDefault();
+        setSelectedIndex(index);
+        onPreviewOrder(row.intent);
+        return true;
+      }}
+      renderCell={(row, column, _index, rowState) => {
+        const color = (fallback: string) =>
+          rowState.selected ? undefined : fallback;
+        switch (column.id) {
+          case "outcome":
+            return {
+              text: row.outcome.toUpperCase(),
+              color: color(colors.textBright),
+            };
+          case "side":
+            return {
+              text: row.side === "buy" ? "BID" : "ASK",
+              color: color(row.side === "buy" ? colors.positive : colors.negative),
+            };
+          case "price":
+            return {
+              text: formatPredictionProbability(row.level.price),
+              color: color(colors.text),
+            };
+          case "size":
+            return {
+              text: formatNumber(row.level.size, 0),
+              color: color(colors.textDim),
+            };
+        }
+      }}
+      emptyStateTitle="No book levels."
+      emptyStateHint="This venue did not return current order book depth."
+    />
   );
 }

package/src/plugins/prediction-markets/detail/overview.tsx

@@ -17,6 +17,7 @@ export function PredictionMarketOverviewView({
   detailWidth,
   height,
   historyRange,
+  loading,
   onHistoryRangeChange,
   onSelectMarket,
   selectedRow,
@@ -26,6 +27,7 @@ export function PredictionMarketOverviewView({
   detailWidth: number;
   height: number;
   historyRange: PredictionHistoryRange;
+  loading: boolean;
   onHistoryRangeChange: (range: PredictionHistoryRange) => void;
   onSelectMarket: (marketKey: string) => void;
   selectedRow: PredictionListRow | null;
@@ -47,6 +49,7 @@ export function PredictionMarketOverviewView({
         history={detail?.history ?? []}
         width={detailWidth}
         height={Math.max(Math.floor(height * 0.36), 10)}
+        loading={loading}
         range={historyRange}
         onRangeSelect={onHistoryRangeChange}
       />

package/src/plugins/prediction-markets/detail/pane.tsx

@@ -1,7 +1,7 @@
 import { Box, ScrollBox, Text } from "../../../ui";
 import { TextAttributes, type ScrollBoxRenderable } from "../../../ui";
 import type { RefObject } from "react";
-import { Spinner, Tabs } from "../../../components";
+import { Tabs } from "../../../components";
 import { EmptyState } from "../../../components/ui/status";
 import { colors } from "../../../theme/colors";
 import { padTo } from "../../../utils/format";
@@ -37,8 +37,11 @@ interface MetricCell {
 function MetricLabelRow({ metrics }: { metrics: MetricCell[] }) {
   return (
     <Box flexDirection="row" height={1}>
-      {metrics.map((metric) => (
-        <Box key={metric.label} width={metric.width + 1}>
+      {metrics.map((metric, index) => (
+        <Box
+          key={metric.label}
+          width={metric.width + (index === metrics.length - 1 ? 0 : 1)}
+        >
           <Text fg={colors.textDim}>{padTo(metric.label, metric.width)}</Text>
         </Box>
       ))}
@@ -49,8 +52,11 @@ function MetricLabelRow({ metrics }: { metrics: MetricCell[] }) {
 function MetricValueRow({ metrics }: { metrics: MetricCell[] }) {
   return (
     <Box flexDirection="row" height={1}>
-      {metrics.map((metric) => (
-        <Box key={metric.label} width={metric.width + 1}>
+      {metrics.map((metric, index) => (
+        <Box
+          key={metric.label}
+          width={metric.width + (index === metrics.length - 1 ? 0 : 1)}
+        >
           <Text
             fg={metric.color ?? colors.textBright}
             attributes={TextAttributes.BOLD}
@@ -108,8 +114,6 @@ export function PredictionMarketDetailPane({
   }
 
   const summaryMetrics = detail?.summary ?? selectedSummary;
-  const detailTitle =
-    selectedRow?.kind === "group" ? selectedRow.title : summaryMetrics.title;
   const detailSubtitleParts: string[] = [];
   if (selectedRow?.kind === "group") {
     if (summaryMetrics.category) detailSubtitleParts.push(summaryMetrics.category);
@@ -126,18 +130,18 @@ export function PredictionMarketDetailPane({
   );
   if (endsLabel !== "—") detailSubtitleParts.push(endsLabel);
   const detailSubtitle = detailSubtitleParts.join(" · ");
-  const primaryMetrics: MetricCell[] = [
+  const metrics: MetricCell[] = [
     {
       label: "YES",
       value: formatPredictionProbability(summaryMetrics.yesPrice),
       color: getPredictionProbabilityColor(summaryMetrics.yesPrice),
-      width: 12,
+      width: 6,
     },
     {
       label: "NO",
       value: formatPredictionProbability(summaryMetrics.noPrice),
       color: getPredictionProbabilityColor(summaryMetrics.noPrice),
-      width: 12,
+      width: 6,
     },
     {
       label: "24H VOL",
@@ -145,7 +149,7 @@ export function PredictionMarketDetailPane({
         summaryMetrics.volume24h,
         summaryMetrics.volume24hUnit ?? "usd",
       ),
-      width: 16,
+      width: 8,
     },
     {
       label: "TOTAL VOL",
@@ -153,28 +157,26 @@ export function PredictionMarketDetailPane({
         summaryMetrics.totalVolume,
         summaryMetrics.totalVolumeUnit ?? "usd",
       ),
-      width: 16,
+      width: 9,
     },
-  ];
-  const secondaryMetrics: MetricCell[] = [
     {
       label: "OI",
       value: formatPredictionMetric(
         summaryMetrics.openInterest,
         summaryMetrics.openInterestUnit ?? "usd",
       ),
-      width: 16,
+      width: 7,
     },
     {
       label: "SPREAD",
       value: formatPredictionSpread(summaryMetrics.spread),
-      width: 16,
+      width: 7,
     },
     {
       label: "LAST",
       value: formatPredictionProbability(summaryMetrics.lastTradePrice),
       color: colors.textBright,
-      width: 16,
+      width: 7,
     },
   ];
   const relatedSiblings =
@@ -186,33 +188,25 @@ export function PredictionMarketDetailPane({
             0,
             Math.max(Math.min(Math.floor((detailWidth - 10) / 18), 3), 0),
           ) ?? []);
-  const headerHeight = detailSubtitle.length > 0 ? 3 : 2;
+  const headerHeight = detailSubtitle.length > 0 ? 2 : 0;
   const detailLoading = detailLoadCount > 0 && !detail;
-  const titleColor = focused ? colors.textBright : colors.text;
   const detailTextWidth = Math.max(detailWidth, 12);
 
   return (
     <>
-      <Box flexDirection="column" height={headerHeight} paddingBottom={1}>
-        <Box flexDirection="row" height={1}>
-          <Text fg={titleColor} attributes={TextAttributes.BOLD}>
-            {truncatePredictionText(detailTitle, detailTextWidth)}
-          </Text>
-        </Box>
-        {detailSubtitle.length > 0 && (
+      {headerHeight > 0 && (
+        <Box flexDirection="column" height={headerHeight} paddingBottom={1}>
           <Box flexDirection="row" height={1}>
             <Text fg={colors.textDim}>
               {truncatePredictionText(detailSubtitle, detailTextWidth)}
             </Text>
           </Box>
-        )}
-      </Box>
+        </Box>
+      )}
 
-      <Box flexDirection="column" height={4} paddingBottom={1}>
-        <MetricLabelRow metrics={primaryMetrics} />
-        <MetricValueRow metrics={primaryMetrics} />
-        <MetricLabelRow metrics={secondaryMetrics} />
-        <MetricValueRow metrics={secondaryMetrics} />
+      <Box flexDirection="column" height={3} paddingBottom={1}>
+        <MetricLabelRow metrics={metrics} />
+        <MetricValueRow metrics={metrics} />
       </Box>
 
       {relatedSiblings.length > 0 && (
@@ -260,43 +254,56 @@ export function PredictionMarketDetailPane({
         </Box>
       )}
 
-      <ScrollBox ref={scrollRef} flexGrow={1} scrollY>
-        {detailLoading && (
-          <Box height={1} paddingBottom={1}>
-            <Spinner label="Loading market detail..." />
-          </Box>
-        )}
-        {detailTab === "overview" && (
-          <PredictionMarketOverviewView
-            detail={detail}
-            detailWidth={detailWidth}
-            height={height}
-            historyRange={historyRange}
-            onHistoryRangeChange={onHistoryRangeChange}
-            onSelectMarket={onSelectMarket}
-            selectedRow={selectedRow}
-            summary={summaryMetrics}
-          />
-        )}
+      {detailTab === "overview" || detailTab === "rules" ? (
+        <ScrollBox ref={scrollRef} flexGrow={1} scrollY>
+          {detailTab === "overview" && (
+            <PredictionMarketOverviewView
+              detail={detail}
+              detailWidth={detailWidth}
+              height={height}
+              historyRange={historyRange}
+              loading={detailLoading}
+              onHistoryRangeChange={onHistoryRangeChange}
+              onSelectMarket={onSelectMarket}
+              selectedRow={selectedRow}
+              summary={summaryMetrics}
+            />
+          )}
 
-        {detailTab === "book" && detail && (
+          {detailTab === "rules" && (
+            <PredictionMarketRulesView
+              detailWidth={detailTextWidth}
+              rules={detail?.rules ?? []}
+            />
+          )}
+        </ScrollBox>
+      ) : null}
+
+      {detailTab === "book" && (
+        detail ? (
           <PredictionMarketBookView
             detail={detail}
+            focused={focused}
             onPreviewOrder={onPreviewOrder}
+            width={detailWidth}
           />
-        )}
-
-        {detailTab === "trades" && (
-          <PredictionMarketTradesView trades={detail?.trades ?? []} />
-        )}
+        ) : (
+          <Box flexGrow={1} justifyContent="center">
+            <EmptyState
+              title={detailLoading ? "Loading order book." : "No order book."}
+              hint="This venue did not return current order book depth."
+            />
+          </Box>
+        )
+      )}
 
-        {detailTab === "rules" && (
-          <PredictionMarketRulesView
-            detailWidth={detailTextWidth}
-            rules={detail?.rules ?? []}
-          />
-        )}
-      </ScrollBox>
+      {detailTab === "trades" && (
+        <PredictionMarketTradesView
+          focused={focused}
+          trades={detail?.trades ?? []}
+          width={detailWidth}
+        />
+      )}
     </>
   );
 }

package/src/plugins/prediction-markets/detail/shared.tsx

@@ -1,6 +1,11 @@
 import { Box } from "../../../ui";
 import { colors } from "../../../theme/colors";
 import { ExternalLinkText } from "../../../components/ui/external-link";
+import type {
+  PredictionListRow,
+  PredictionMarketDetail,
+  PredictionMarketSummary,
+} from "../types";
 
 export function truncatePredictionText(
   value: string,
@@ -11,6 +16,20 @@ export function truncatePredictionText(
   return `${value.slice(0, maxLength - 3)}...`;
 }
 
+export function resolvePredictionDetailTitle({
+  detail,
+  selectedRow,
+  selectedSummary,
+}: {
+  detail: PredictionMarketDetail | null;
+  selectedRow: PredictionListRow | null;
+  selectedSummary: PredictionMarketSummary | null;
+}): string | undefined {
+  if (!selectedSummary) return undefined;
+  const summary = detail?.summary ?? selectedSummary;
+  return selectedRow?.kind === "group" ? selectedRow.title : summary.title;
+}
+
 export function SummaryLink({
   url,
   maxLength,

package/src/plugins/prediction-markets/detail/trades.tsx

@@ -1,31 +1,76 @@
-import { Box, Text } from "../../../ui";
+import { DataTableView, type DataTableColumn } from "../../../components";
 import { colors } from "../../../theme/colors";
-import { formatNumber, padTo } from "../../../utils/format";
+import { formatNumber } from "../../../utils/format";
 import { formatPredictionProbability } from "../metrics";
 import type { PredictionTrade } from "../types";
 
+type TradeColumnId = "time" | "side" | "outcome" | "price" | "size";
+type TradeColumn = DataTableColumn & { id: TradeColumnId };
+
+const TRADE_COLUMNS: TradeColumn[] = [
+  { id: "time", label: "TIME", width: 16 },
+  { id: "side", label: "SIDE", width: 6 },
+  { id: "outcome", label: "OUT", width: 4 },
+  { id: "price", label: "PRICE", width: 8, align: "right" },
+  { id: "size", label: "SIZE", width: 10, align: "right" },
+];
+
 export function PredictionMarketTradesView({
+  focused,
   trades,
+  width,
 }: {
+  focused: boolean;
   trades: PredictionTrade[];
+  width: number;
 }) {
   return (
-    <Box flexDirection="column">
-      <Box height={1}>
-        <Text
-          fg={colors.textDim}
-        >{`${padTo("TIME", 16)} ${padTo("SIDE", 6)} ${padTo("OUT", 4)} ${padTo("PRICE", 8)} ${padTo("SIZE", 10)}`}</Text>
-      </Box>
-      {trades.slice(0, 30).map((trade) => (
-        <Box key={trade.id} height={1}>
-          <Text fg={trade.side === "buy" ? colors.positive : colors.negative}>
-            {`${padTo(new Date(trade.timestamp).toLocaleTimeString("en-US", { hour12: false }), 16)} ${padTo(trade.side.toUpperCase(), 6)} ${padTo(trade.outcome.toUpperCase(), 4)} ${padTo(formatPredictionProbability(trade.price), 8)} ${padTo(formatNumber(trade.size, 0), 10, "right")}`}
-          </Text>
-        </Box>
-      ))}
-      {trades.length === 0 && (
-        <Text fg={colors.textDim}>No recent trades.</Text>
-      )}
-    </Box>
+    <DataTableView<PredictionTrade, TradeColumn>
+      focused={focused}
+      keyboardNavigation={false}
+      rootWidth={width}
+      rootBackgroundColor={colors.panel}
+      selection={{ kind: "none" }}
+      columns={TRADE_COLUMNS}
+      items={trades.slice(0, 30)}
+      sortColumnId={null}
+      sortDirection="asc"
+      onHeaderClick={() => {}}
+      getItemKey={(trade) => trade.id}
+      renderCell={(trade, column) => {
+        const tradeColor = trade.side === "buy" ? colors.positive : colors.negative;
+        switch (column.id) {
+          case "time":
+            return {
+              text: new Date(trade.timestamp).toLocaleTimeString("en-US", {
+                hour12: false,
+              }),
+              color: colors.textDim,
+            };
+          case "side":
+            return {
+              text: trade.side.toUpperCase(),
+              color: tradeColor,
+            };
+          case "outcome":
+            return {
+              text: trade.outcome.toUpperCase(),
+              color: colors.text,
+            };
+          case "price":
+            return {
+              text: formatPredictionProbability(trade.price),
+              color: tradeColor,
+            };
+          case "size":
+            return {
+              text: formatNumber(trade.size, 0),
+              color: colors.textDim,
+            };
+        }
+      }}
+      emptyStateTitle="No recent trades."
+      emptyStateHint="This venue did not return recent prints."
+    />
   );
 }