sea-dev 1.0.0

package/libs/ui/src/components/chart-viz/table.tsx

@@ -0,0 +1,446 @@
+import {
+  flexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type Cell,
+  type CellContext,
+  type ColumnDef,
+  type ExpandedState,
+  type Header,
+  type HeaderGroup,
+  type Row,
+  type SortingState,
+} from "@tanstack/react-table";
+import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual";
+import { Component, memo, useMemo, useRef, useState, type ReactNode } from "react";
+import type { TableColumn, TableConfig } from "./types";
+
+// Error boundary for table rendering errors
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class TableErrorBoundary extends Component<
+  { children: ReactNode; configPreview?: string },
+  ErrorBoundaryState
+> {
+  constructor(props: { children: ReactNode; configPreview?: string }) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("Table rendering error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            padding: "16px",
+            color: "#ff6b6b",
+            background: "#2a1a1a",
+            borderRadius: "8px",
+            fontSize: "13px",
+          }}
+        >
+          <div style={{ fontWeight: 600, marginBottom: "8px" }}>Table rendering failed</div>
+          <div style={{ color: "#ff9999", marginBottom: "8px" }}>
+            {this.state.error?.message || "Unknown error"}
+          </div>
+          {this.props.configPreview && (
+            <details style={{ marginTop: "8px" }}>
+              <summary style={{ cursor: "pointer", color: "#888" }}>Config preview</summary>
+              <pre
+                style={{
+                  fontSize: "11px",
+                  color: "#666",
+                  marginTop: "8px",
+                  overflow: "auto",
+                  maxHeight: "200px",
+                }}
+              >
+                {this.props.configPreview}
+              </pre>
+            </details>
+          )}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+// Format functions for cell values
+function formatValue(value: unknown, format?: TableColumn["format"]): string {
+  if (value === null || value === undefined) return "";
+
+  switch (format) {
+    case "currency":
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      }).format(Number(value));
+    case "percent":
+      return new Intl.NumberFormat("en-US", {
+        style: "percent",
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 2,
+      }).format(Number(value) / 100);
+    case "date":
+      try {
+        return new Intl.DateTimeFormat("en-US", {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+        }).format(new Date(value as string | number | Date));
+      } catch {
+        return String(value);
+      }
+    case "number":
+      return new Intl.NumberFormat("en-US", {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      }).format(Number(value));
+    default:
+      return String(value);
+  }
+}
+
+// Helper to parse config
+function parseConfig(rawConfig: unknown): TableConfig | null {
+  if (typeof rawConfig === "string") {
+    try {
+      return JSON.parse(rawConfig) as TableConfig;
+    } catch {
+      console.error("Failed to parse table config:", rawConfig);
+      return null;
+    }
+  }
+  return rawConfig as TableConfig | null;
+}
+
+// Get nested value from object by field path (supports "a.b.c")
+function getNestedValue(obj: unknown, path: string): unknown {
+  if (typeof obj !== "object" || obj === null) return undefined;
+  return path.split(".").reduce((acc: unknown, key: string) => {
+    if (typeof acc === "object" && acc !== null) {
+      return (acc as Record<string, unknown>)[key];
+    }
+    return undefined;
+  }, obj);
+}
+
+interface TableRendererProps {
+  config: unknown;
+  height?: string | number;
+  className?: string;
+}
+
+export const TableRenderer = memo(
+  function TableRenderer({ config: rawConfig, height = "400px", className }: TableRendererProps) {
+    const parentRef = useRef<HTMLDivElement>(null);
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [expanded, setExpanded] = useState<ExpandedState>({});
+
+    // Parse config if it's a string
+    const config = useMemo(() => parseConfig(rawConfig), [rawConfig]);
+
+    // Build column definitions from config
+    const columns = useMemo<ColumnDef<Record<string, unknown>>[]>(() => {
+      if (!config?.columns) return [];
+
+      // Filter out invalid columns (must have a field property for TanStack Table)
+      const validColumns = config.columns.filter((col: TableColumn) => col && col.field);
+
+      return validColumns.map(
+        (col: TableColumn, index: number): ColumnDef<Record<string, unknown>> => ({
+          id: col.field,
+          accessorFn: (row: Record<string, unknown>) => getNestedValue(row, col.field),
+          header: col.header,
+          cell: (info: CellContext<Record<string, unknown>, unknown>) => {
+            const value = info.getValue();
+            const depth = info.row.depth;
+            const canExpand = info.row.getCanExpand();
+            const isExpanded = info.row.getIsExpanded();
+
+            // Add tree expansion toggle on first column
+            if (index === 0 && config.tree?.enabled) {
+              return (
+                <div
+                  style={{
+                    paddingLeft: `${depth * 20}px`,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                  }}
+                >
+                  {canExpand && (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        info.row.toggleExpanded();
+                      }}
+                      style={{
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        padding: "2px",
+                        color: "inherit",
+                        fontSize: "12px",
+                      }}
+                      aria-label={isExpanded ? "Collapse row" : "Expand row"}
+                    >
+                      {isExpanded ? "▼" : "▶"}
+                    </button>
+                  )}
+                  <span>{formatValue(value, col.format)}</span>
+                </div>
+              );
+            }
+
+            return formatValue(value, col.format);
+          },
+          size: col.width || 150,
+          enableSorting: config.features?.sorting !== false,
+        }),
+      );
+    }, [config]);
+
+    // Get subrows for tree data
+    const getSubRows = useMemo(() => {
+      if (config?.tree?.enabled && config.tree.childrenField) {
+        return (row: Record<string, unknown>) =>
+          (row[config.tree!.childrenField] as Record<string, unknown>[]) || [];
+      }
+      return undefined;
+    }, [config]);
+
+    // Create table instance
+    const table = useReactTable<Record<string, unknown>>({
+      data: (config?.data as Record<string, unknown>[]) || [],
+      columns,
+      state: {
+        sorting,
+        expanded,
+      },
+      onSortingChange: setSorting,
+      onExpandedChange: setExpanded,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getExpandedRowModel: getExpandedRowModel(),
+      getSubRows,
+    });
+
+    const { rows } = table.getRowModel();
+
+    // Use virtualization for large datasets (>100 rows)
+    const useVirtual = rows.length > 100;
+    const rowVirtualizer = useVirtualizer({
+      count: rows.length,
+      getScrollElement: () => parentRef.current,
+      estimateSize: () => 35,
+      overscan: 10,
+      enabled: useVirtual,
+    });
+
+    // Get config preview for error display
+    const configPreview = useMemo(() => {
+      try {
+        return JSON.stringify(config, null, 2).slice(0, 500);
+      } catch {
+        return "Unable to serialize config";
+      }
+    }, [config]);
+
+    // Handle parse failure
+    if (!config) {
+      return <div style={{ padding: "16px", color: "#ff6b6b" }}>Failed to parse table config</div>;
+    }
+
+    // Handle missing columns
+    if (!config.columns || config.columns.length === 0) {
+      return <div style={{ padding: "16px", color: "#ff6b6b" }}>Table config missing columns</div>;
+    }
+
+    // Handle missing data
+    if (!config.data || !Array.isArray(config.data)) {
+      return (
+        <div style={{ padding: "16px", color: "#ff6b6b" }}>Table config missing data array</div>
+      );
+    }
+
+    const virtualRows = rowVirtualizer.getVirtualItems();
+    const totalSize = rowVirtualizer.getTotalSize();
+
+    return (
+      <TableErrorBoundary configPreview={configPreview}>
+        <div
+          ref={parentRef}
+          className={className}
+          style={{
+            height,
+            overflow: "auto",
+            background: "transparent",
+          }}
+        >
+          <table
+            style={{
+              width: "100%",
+              borderCollapse: "collapse",
+              fontSize: "13px",
+              color: "#e4e4e7",
+            }}
+          >
+            <thead
+              style={{
+                position: "sticky",
+                top: 0,
+                background: "#27272a",
+                zIndex: 1,
+              }}
+            >
+              {table.getHeaderGroups().map((headerGroup: HeaderGroup<Record<string, unknown>>) => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header: Header<Record<string, unknown>, unknown>) => (
+                    <th
+                      key={header.id}
+                      onClick={
+                        header.column.getCanSort()
+                          ? header.column.getToggleSortingHandler()
+                          : undefined
+                      }
+                      style={{
+                        padding: "10px 12px",
+                        textAlign: "left",
+                        fontWeight: 600,
+                        borderBottom: "1px solid #3f3f46",
+                        cursor: header.column.getCanSort() ? "pointer" : "default",
+                        whiteSpace: "nowrap",
+                        userSelect: "none",
+                        width: header.column.getSize(),
+                      }}
+                    >
+                      <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                        {header.column.getIsSorted() && (
+                          <span style={{ fontSize: "10px" }}>
+                            {header.column.getIsSorted() === "asc" ? "▲" : "▼"}
+                          </span>
+                        )}
+                      </div>
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            <tbody>
+              {useVirtual ? (
+                // Virtualized rendering
+                <>
+                  {virtualRows.length > 0 && (
+                    <tr style={{ height: `${virtualRows[0]?.start ?? 0}px` }}>
+                      <td colSpan={columns.length} />
+                    </tr>
+                  )}
+                  {virtualRows.map((virtualRow: VirtualItem) => {
+                    const row = rows[virtualRow.index];
+                    return (
+                      <tr
+                        key={row?.id ?? ""}
+                        style={{
+                          height: `${virtualRow.size}px`,
+                          background:
+                            virtualRow.index % 2 === 0 ? "transparent" : "rgba(255,255,255,0.02)",
+                        }}
+                      >
+                        {row
+                          ?.getVisibleCells()
+                          .map((cell: Cell<Record<string, unknown>, unknown>) => (
+                            <td
+                              key={cell.id}
+                              style={{
+                                padding: "8px 12px",
+                                borderBottom: "1px solid #27272a",
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                maxWidth: cell.column.getSize(),
+                              }}
+                            >
+                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                            </td>
+                          ))}
+                      </tr>
+                    );
+                  })}
+                  {virtualRows.length > 0 && (
+                    <tr
+                      style={{
+                        height: `${totalSize - (virtualRows[virtualRows.length - 1]?.end || 0)}px`,
+                      }}
+                    >
+                      <td colSpan={columns.length} />
+                    </tr>
+                  )}
+                </>
+              ) : (
+                // Standard rendering for smaller datasets
+                rows.map((row: Row<Record<string, unknown>>, index: number) => (
+                  <tr
+                    key={row.id}
+                    style={{
+                      background: index % 2 === 0 ? "transparent" : "rgba(255,255,255,0.02)",
+                    }}
+                  >
+                    {row.getVisibleCells().map((cell: Cell<Record<string, unknown>, unknown>) => (
+                      <td
+                        key={cell.id}
+                        style={{
+                          padding: "8px 12px",
+                          borderBottom: "1px solid #27272a",
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          maxWidth: cell.column.getSize(),
+                        }}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </td>
+                    ))}
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+          {rows.length === 0 && (
+            <div style={{ padding: "20px", textAlign: "center", color: "#71717a" }}>
+              No data available
+            </div>
+          )}
+        </div>
+      </TableErrorBoundary>
+    );
+  },
+  (prevProps, nextProps) => {
+    // Custom comparison: only re-render if config content changed
+    const normalize = (c: unknown) => (typeof c === "string" ? c : JSON.stringify(c));
+    return (
+      normalize(prevProps.config) === normalize(nextProps.config) &&
+      prevProps.height === nextProps.height &&
+      prevProps.className === nextProps.className
+    );
+  },
+);

package/libs/ui/src/components/chart-viz/theme-context.tsx

@@ -0,0 +1,70 @@
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
+import {
+  createTailwindTheme,
+  darkTheme,
+  lightTheme,
+  type ChartVizTheme,
+  type TailwindColors,
+} from "./themes";
+
+interface ThemeContextValue {
+  theme: ChartVizTheme;
+  themeName: "dark" | "light" | "custom";
+  setTheme: (name: "dark" | "light", customColors?: TailwindColors) => void;
+  customizeTheme: (colors: TailwindColors) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: "dark" | "light";
+}
+
+export function ChartThemeProvider({ children, defaultTheme = "dark" }: ThemeProviderProps) {
+  const [themeName, setThemeName] = useState<"dark" | "light" | "custom">(defaultTheme);
+  const [customColors, setCustomColors] = useState<TailwindColors | null>(null);
+
+  const theme = useMemo(() => {
+    if (themeName === "custom" && customColors) {
+      return createTailwindTheme(customColors, "dark");
+    }
+    return themeName === "light" ? lightTheme : darkTheme;
+  }, [themeName, customColors]);
+
+  const setTheme = useCallback((name: "dark" | "light", colors?: TailwindColors) => {
+    if (colors) {
+      setCustomColors(colors);
+      setThemeName("custom");
+    } else {
+      setThemeName(name);
+      setCustomColors(null);
+    }
+  }, []);
+
+  const customizeTheme = useCallback((colors: TailwindColors) => {
+    setCustomColors((prev) => ({ ...prev, ...colors }));
+    setThemeName("custom");
+  }, []);
+
+  const value = useMemo(
+    () => ({ theme, themeName, setTheme, customizeTheme }),
+    [theme, themeName, setTheme, customizeTheme],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+// Stable default value for when no provider exists
+const defaultContextValue: ThemeContextValue = {
+  theme: darkTheme,
+  themeName: "light",
+  setTheme: () => {},
+  customizeTheme: () => {},
+};
+
+export function useChartTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  // Return stable default if no provider (backwards compatibility)
+  return context ?? defaultContextValue;
+}

package/libs/ui/src/components/chart-viz/themes/dark.ts

@@ -0,0 +1,98 @@
+import type { ChartVizTheme } from "./types";
+
+/**
+ * Dark theme preset - matches ECharts built-in dark theme
+ */
+export const darkTheme: ChartVizTheme = {
+  name: "chart-viz-dark",
+  backgroundColor: "#1a1a1a",
+  textStyle: {
+    color: "#eeeeee",
+  },
+  title: {
+    textStyle: {
+      color: "#eeeeee",
+    },
+    subtextStyle: {
+      color: "#aaaaaa",
+    },
+  },
+  legend: {
+    textStyle: {
+      color: "#eeeeee",
+    },
+  },
+  tooltip: {
+    backgroundColor: "rgba(50, 50, 50, 0.9)",
+    borderColor: "#555555",
+    textStyle: {
+      color: "#eeeeee",
+    },
+  },
+  axisPointer: {
+    lineStyle: {
+      color: "#555555",
+    },
+  },
+  categoryAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#555555",
+      },
+    },
+    axisTick: {
+      lineStyle: {
+        color: "#555555",
+      },
+    },
+    axisLabel: {
+      color: "#aaaaaa",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#333333",
+      },
+    },
+    splitArea: {
+      areaStyle: {
+        color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"],
+      },
+    },
+  },
+  valueAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#555555",
+      },
+    },
+    axisTick: {
+      lineStyle: {
+        color: "#555555",
+      },
+    },
+    axisLabel: {
+      color: "#aaaaaa",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#333333",
+      },
+    },
+    splitArea: {
+      areaStyle: {
+        color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"],
+      },
+    },
+  },
+  color: [
+    "#5470c6",
+    "#91cc75",
+    "#fac858",
+    "#ee6666",
+    "#73c0de",
+    "#3ba272",
+    "#fc8452",
+    "#9a60b4",
+    "#ea7ccc",
+  ],
+};

package/libs/ui/src/components/chart-viz/themes/index.ts

@@ -0,0 +1,69 @@
+import * as echarts from "echarts";
+import { darkTheme } from "./dark";
+import { lightTheme } from "./light";
+import {
+  createTailwindTheme,
+  createThemeFromCSS,
+  extractCSSVariables,
+  parseTailwindCSS,
+} from "./tailwind";
+import type { ChartVizTheme, TailwindColors } from "./types";
+
+// Track registered themes
+const registeredThemes = new Set<string>();
+
+/**
+ * Register a theme with ECharts
+ * Can be called multiple times safely - will skip if already registered
+ */
+export function registerTheme(theme: ChartVizTheme): void {
+  if (registeredThemes.has(theme.name)) {
+    return;
+  }
+
+  echarts.registerTheme(theme.name, theme);
+  registeredThemes.add(theme.name);
+}
+
+/**
+ * Register built-in themes (dark and light)
+ * Call this once at app initialization to enable theme support
+ */
+export function registerBuiltInThemes(): void {
+  registerTheme(darkTheme);
+  registerTheme(lightTheme);
+}
+
+/**
+ * Get the theme name for use with ECharts init
+ * Accepts either a theme object or a string name
+ */
+export function getThemeName(theme: ChartVizTheme | string | undefined): string {
+  if (!theme) {
+    return "dark"; // Default to ECharts built-in dark theme
+  }
+  if (typeof theme === "string") {
+    return theme;
+  }
+  // Register the theme if it's an object
+  registerTheme(theme);
+  return theme.name;
+}
+
+/**
+ * Check if a theme is registered
+ */
+export function isThemeRegistered(name: string): boolean {
+  return registeredThemes.has(name);
+}
+
+// Re-export types and presets
+export {
+  createTailwindTheme,
+  createThemeFromCSS,
+  darkTheme,
+  extractCSSVariables,
+  lightTheme,
+  parseTailwindCSS,
+};
+export type { ChartVizTheme, TailwindColors };