gloomberb 0.9.5 → 0.9.6

package/src/components/metric-treemap/index.tsx

@@ -0,0 +1,317 @@
+import { useMemo, useState, type CSSProperties } from "react";
+import { Box, Text, TextAttributes, useUiCapabilities } from "../../ui";
+import { blendHex, colors, priceColor } from "../../theme/colors";
+import { blendForContrast, higherContrast } from "../../theme/color-utils";
+import { padTo } from "../../utils/format";
+import {
+  buildMetricTreemap,
+  buildMetricTreemapRects,
+  type FloatMetricTreemapTile,
+  type MetricTreemapItem,
+  type MetricTreemapTile,
+} from "./layout";
+
+export {
+  buildMetricTreemapNavigationTiles,
+  findMetricTreemapNeighbor,
+  type MetricTreemapDirection,
+  type MetricTreemapItem,
+} from "./layout";
+
+type PreventableMouseEvent = { preventDefault(): void };
+
+export interface MetricTreemapSurfaceProps<T> {
+  items: MetricTreemapItem<T>[];
+  width: number;
+  height: number;
+  selectedId: string | null;
+  onSelect: (item: MetricTreemapItem<T>) => void;
+  onActivate?: (item: MetricTreemapItem<T>) => void;
+  emptyStateTitle?: string;
+}
+
+function metricTileColor(item: MetricTreemapItem): string {
+  if (item.colorValue == null) return colors.neutral;
+  return priceColor(item.colorValue);
+}
+
+function desktopMetricTileColor(item: MetricTreemapItem): string {
+  if (item.colorValue == null || item.colorValue === 0) {
+    return colors.neutral;
+  }
+  const intensity = Math.max(0.38, Math.min(0.88, Math.log1p(Math.abs(item.colorValue)) / Math.log1p(30)));
+  return blendHex(colors.panel, item.colorValue > 0 ? colors.positive : colors.negative, intensity);
+}
+
+const TILE_TEXT_MIN_CONTRAST = 4.5;
+
+function tileTextColor(backgroundColor: string): string {
+  const preferred = higherContrast(
+    higherContrast(colors.text, colors.textBright, backgroundColor),
+    colors.selectedText,
+    backgroundColor,
+  );
+  const fallback = higherContrast("#000000", "#ffffff", backgroundColor);
+  return blendForContrast(preferred, backgroundColor, fallback, TILE_TEXT_MIN_CONTRAST);
+}
+
+function visibleLines(item: MetricTreemapItem): string[] {
+  return [
+    item.label,
+    item.primaryText,
+    item.secondaryText,
+    item.tertiaryText,
+  ].filter((line): line is string => !!line);
+}
+
+function Tile<T>({ tile, selected, onSelect, onActivate }: {
+  tile: MetricTreemapTile<T>;
+  selected: boolean;
+  onSelect: () => void;
+  onActivate?: () => void;
+}) {
+  const renderWidth = Math.max(1, tile.width - (tile.width > 2 ? 1 : 0));
+  const renderHeight = Math.max(1, tile.height - (tile.height > 2 ? 1 : 0));
+  const innerWidth = Math.max(1, renderWidth - 1);
+  const backgroundColor = selected ? colors.selected : metricTileColor(tile.item);
+  const textColor = tileTextColor(backgroundColor);
+  const attributes = selected ? TextAttributes.BOLD : TextAttributes.NONE;
+  const lines = visibleLines(tile.item);
+
+  return (
+    <Box
+      position="absolute"
+      left={tile.x}
+      top={tile.y}
+      width={renderWidth}
+      height={renderHeight}
+      backgroundColor={backgroundColor}
+      onMouseDown={(event: PreventableMouseEvent) => {
+        event.preventDefault();
+        onSelect();
+      }}
+      onMouseOver={onSelect}
+      onMouseMove={onSelect}
+      onDoubleClick={onActivate}
+    >
+      {lines.slice(0, renderHeight).map((line, index) => (
+        <Text key={`${tile.item.id}:${index}`} fg={textColor} attributes={attributes}>
+          {padTo(line, innerWidth)}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+function pct(value: number, total: number): string {
+  return `${total > 0 ? value / total * 100 : 0}%`;
+}
+
+function DesktopTile<T>({ tile, chartWidth, chartHeight, selected, hovered, onSelect, onActivate, onHover }: {
+  tile: FloatMetricTreemapTile<T>;
+  chartWidth: number;
+  chartHeight: number;
+  selected: boolean;
+  hovered: boolean;
+  onSelect: () => void;
+  onActivate?: () => void;
+  onHover: (hovered: boolean) => void;
+}) {
+  const lines = visibleLines(tile.item);
+  const canShowDetails = tile.width >= 7 && tile.height >= 3;
+  const canShowExtra = tile.height >= 3.7;
+  const canShowLabel = tile.width >= 4 && tile.height >= 1.4;
+  const isTiny = tile.width < 5 || tile.height < 2;
+  const backgroundColor = desktopMetricTileColor(tile.item);
+  const textColor = tileTextColor(backgroundColor);
+  const style: CSSProperties = {
+    position: "absolute",
+    left: `calc(${pct(tile.x, chartWidth)} + 1px)`,
+    top: `calc(${pct(tile.y, chartHeight)} + 1px)`,
+    width: `max(1px, calc(${pct(tile.width, chartWidth)} - 2px))`,
+    height: `max(1px, calc(${pct(tile.height, chartHeight)} - 2px))`,
+    minWidth: 1,
+    minHeight: 1,
+    padding: isTiny ? "3px 4px" : "7px 8px",
+    overflow: "hidden",
+    borderRadius: 5,
+    border: selected
+      ? `1px solid ${colors.textBright}`
+      : hovered
+        ? `1px solid ${blendHex(colors.textBright, backgroundColor, 0.55)}`
+        : `1px solid ${blendHex(backgroundColor, colors.textBright, 0.11)}`,
+    boxShadow: selected
+      ? `inset 0 0 0 1px ${blendHex(backgroundColor, colors.textBright, 0.55)}`
+      : hovered
+        ? `inset 0 0 0 1px ${blendHex(backgroundColor, colors.textBright, 0.18)}`
+        : "none",
+    backgroundColor,
+    color: textColor,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
+    gap: 2,
+    cursor: "pointer",
+    transition: "border-color 120ms ease, box-shadow 120ms ease, filter 120ms ease",
+    filter: hovered ? "brightness(1.08)" : undefined,
+  };
+  const textStyle: CSSProperties = {
+    display: "block",
+    minWidth: 0,
+    width: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    textShadow: `0 1px 1px ${blendHex(backgroundColor, colors.bg, 0.35)}`,
+  };
+  const startHover = () => {
+    onHover(true);
+    onSelect();
+  };
+
+  return (
+    <Box
+      data-gloom-role="metric-treemap-desktop-tile"
+      style={style}
+      onMouseDown={(event: PreventableMouseEvent) => {
+        event.preventDefault();
+        onSelect();
+      }}
+      onDoubleClick={onActivate}
+      onMouseOver={startHover}
+      onMouseMove={startHover}
+      onMouseOut={() => onHover(false)}
+    >
+      {canShowLabel && (
+        <Text
+          fg={textColor}
+          attributes={selected ? TextAttributes.BOLD : TextAttributes.NONE}
+          style={{
+            ...textStyle,
+            fontSize: isTiny ? 11 : 13,
+            fontWeight: 700,
+          }}
+        >
+          {lines[0]}
+        </Text>
+      )}
+      {canShowDetails && lines.slice(1, canShowExtra ? 4 : 3).map((line, index) => (
+        <Text key={`${tile.item.id}:detail:${index}`} fg={textColor} style={{ ...textStyle, fontSize: 12, fontWeight: 600 }}>
+          {line}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+function DesktopMetricTreemapSurface<T>({ items, width, height, selectedId, onSelect, onActivate, cellAspect, emptyStateTitle }: MetricTreemapSurfaceProps<T> & {
+  cellAspect: number;
+}) {
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+  const chartWidth = Math.max(1, width - 2);
+  const tiles = useMemo(() => buildMetricTreemapRects(items, chartWidth, height, cellAspect), [cellAspect, chartWidth, height, items]);
+
+  if (tiles.length === 0) {
+    return (
+      <Box width={width} height={height} paddingX={1} paddingY={1}>
+        <Text fg={colors.textDim}>{emptyStateTitle ?? "No chart data"}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      width={width}
+      height={height}
+      paddingX={1}
+      style={{
+        backgroundColor: colors.bg,
+        overflow: "hidden",
+      }}
+    >
+      <Box
+        data-gloom-role="metric-treemap"
+        width={chartWidth}
+        height={height}
+        style={{
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          backgroundColor: colors.bg,
+          overflow: "hidden",
+        }}
+      >
+        {tiles.map((tile) => (
+          <DesktopTile
+            key={tile.item.id}
+            tile={tile}
+            chartWidth={chartWidth}
+            chartHeight={height}
+            selected={tile.item.id === selectedId}
+            hovered={tile.item.id === hoveredId}
+            onSelect={() => onSelect(tile.item)}
+            onActivate={onActivate ? () => onActivate(tile.item) : undefined}
+            onHover={(isHovered) => setHoveredId((current) => (isHovered ? tile.item.id : current === tile.item.id ? null : current))}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+export function MetricTreemapSurface<T>({
+  items,
+  width,
+  height,
+  selectedId,
+  onSelect,
+  onActivate,
+  emptyStateTitle,
+}: MetricTreemapSurfaceProps<T>) {
+  const { cellWidthPx = 8, cellHeightPx = 18, nativePaneChrome } = useUiCapabilities();
+  const chartWidth = Math.max(1, width - 2);
+  const cellAspect = Math.max(0.5, Math.min(4, cellHeightPx / Math.max(1, cellWidthPx)));
+  const tiles = useMemo(() => buildMetricTreemap(items, chartWidth, height, cellAspect), [cellAspect, chartWidth, height, items]);
+
+  if (nativePaneChrome) {
+    return (
+      <DesktopMetricTreemapSurface
+        items={items}
+        width={width}
+        height={height}
+        selectedId={selectedId}
+        onSelect={onSelect}
+        onActivate={onActivate}
+        cellAspect={cellAspect}
+        emptyStateTitle={emptyStateTitle}
+      />
+    );
+  }
+
+  if (tiles.length === 0) {
+    return (
+      <Box width={width} height={height} paddingX={1} paddingY={1}>
+        <Text fg={colors.textDim}>{emptyStateTitle ?? "No chart data"}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box width={width} height={height} paddingX={1} backgroundColor={colors.bg}>
+      <Box position="relative" width={chartWidth} height={height} backgroundColor={colors.bg}>
+        {tiles.map((tile) => (
+          <Tile
+            key={tile.item.id}
+            tile={tile}
+            selected={tile.item.id === selectedId}
+            onSelect={() => onSelect(tile.item)}
+            onActivate={onActivate ? () => onActivate(tile.item) : undefined}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/components/metric-treemap/layout.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, test } from "bun:test";
+import {
+  buildMetricTreemap,
+  buildMetricTreemapRects,
+  findMetricTreemapNeighbor,
+  type MetricTreemapItem,
+  type MetricTreemapTile,
+} from "./layout";
+
+const ITEMS: Array<MetricTreemapItem<string>> = [
+  { id: "a", label: "A", weight: 3, data: "A" },
+  { id: "b", label: "B", weight: 1, data: "B" },
+  { id: "zero", label: "Zero", weight: 0, data: "Zero" },
+];
+
+describe("metric treemap layout", () => {
+  test("lays out positive weighted items inside integer bounds", () => {
+    const tiles = buildMetricTreemap(ITEMS, 12, 6);
+
+    expect(tiles.map((tile) => tile.item.id)).toEqual(["a", "b"]);
+    for (const tile of tiles) {
+      expect(tile.x).toBeGreaterThanOrEqual(0);
+      expect(tile.y).toBeGreaterThanOrEqual(0);
+      expect(tile.width).toBeGreaterThan(0);
+      expect(tile.height).toBeGreaterThan(0);
+      expect(tile.x + tile.width).toBeLessThanOrEqual(12);
+      expect(tile.y + tile.height).toBeLessThanOrEqual(6);
+    }
+  });
+
+  test("produces proportional floating rects for native rendering", () => {
+    const tiles = buildMetricTreemapRects(ITEMS, 100, 40);
+    const first = tiles[0];
+    const second = tiles[1];
+
+    expect(first?.item.id).toBe("a");
+    expect(second?.item.id).toBe("b");
+    expect((first?.width ?? 0) * (first?.height ?? 0)).toBeGreaterThan((second?.width ?? 0) * (second?.height ?? 0));
+  });
+
+  test("drops low-ranked float tiles before they render as slivers", () => {
+    const denseItems = Array.from({ length: 96 }, (_, index): MetricTreemapItem<number> => ({
+      id: `item-${index}`,
+      label: `${index}`,
+      weight: 100 - index,
+      data: index,
+    }));
+
+    const tiles = buildMetricTreemapRects(denseItems, 52, 32, 18 / 8);
+
+    expect(tiles.length).toBeLessThan(denseItems.length);
+    expect(tiles.every((tile) => tile.width >= 3 && tile.height >= 1.8)).toBe(true);
+  });
+
+  test("finds neighbors by rendered geometry instead of source order", () => {
+    const tiles: Array<MetricTreemapTile<string>> = [
+      { item: { id: "a", label: "A", weight: 1, data: "a" }, x: 0, y: 0, width: 5, height: 5 },
+      { item: { id: "below", label: "Below", weight: 1, data: "below" }, x: 0, y: 5, width: 5, height: 5 },
+      { item: { id: "right", label: "Right", weight: 1, data: "right" }, x: 5, y: 0, width: 5, height: 5 },
+    ];
+
+    expect(findMetricTreemapNeighbor(tiles, "a", "right")?.item.id).toBe("right");
+    expect(findMetricTreemapNeighbor(tiles, "a", "down")?.item.id).toBe("below");
+    expect(findMetricTreemapNeighbor(tiles, "right", "left")?.item.id).toBe("a");
+  });
+
+  test("does not choose an overlapping lower tile for right navigation", () => {
+    const tiles: Array<MetricTreemapTile<string>> = [
+      { item: { id: "current", label: "Current", weight: 1, data: "current" }, x: 33, y: 0, width: 26, height: 10 },
+      { item: { id: "lower", label: "Lower", weight: 1, data: "lower" }, x: 49, y: 10, width: 12, height: 6 },
+      { item: { id: "right", label: "Right", weight: 1, data: "right" }, x: 59, y: 0, width: 24, height: 10 },
+    ];
+
+    expect(findMetricTreemapNeighbor(tiles, "current", "right")?.item.id).toBe("right");
+    expect(findMetricTreemapNeighbor(tiles, "current", "down")?.item.id).toBe("lower");
+  });
+});