@datarecce/ui 0.1.29 → 0.1.31

package/recce-source/js/src/lib/dataGrid/generators/toDataDiffGrid.ts

@@ -0,0 +1,140 @@
+/**
+ * @file toDataDiffGrid.ts
+ * @description Query diff grid generation and rendering components
+ *
+ * REFACTORED: Now uses shared utilities from @/lib/dataGrid/shared
+ */
+
+import "src/components/query/styles.css";
+import { ColumnRenderMode, DataFrame, RowObjectType } from "@/lib/api/types";
+import {
+  buildDiffColumnDefinitions,
+  buildDiffRows,
+  buildMergedColumnMap,
+  getDisplayColumns,
+  getPrimaryKeyValue,
+  validatePrimaryKeys,
+  validateToDataDiffGridInputs,
+} from "@/lib/dataGrid/shared";
+import { dataFrameToRowObjects } from "@/utils/transforms";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface QueryDataDiffGridOptions {
+  primaryKeys?: string[];
+  onPrimaryKeyChange?: (primaryKeys: string[]) => void;
+  pinnedColumns?: string[];
+  onPinnedColumnsChange?: (pinnedColumns: string[]) => void;
+  columnsRenderMode?: Record<string, ColumnRenderMode>;
+  onColumnsRenderModeChanged?: (col: Record<string, ColumnRenderMode>) => void;
+  changedOnly?: boolean;
+  baseTitle?: string;
+  currentTitle?: string;
+  displayMode?: "side_by_side" | "inline";
+}
+
+// ============================================================================
+// Main Grid Generation Function
+// ============================================================================
+
+export function toDataDiffGrid(
+  _base?: DataFrame,
+  _current?: DataFrame,
+  options?: QueryDataDiffGridOptions,
+) {
+  validateToDataDiffGridInputs(_base, _current, options);
+  const base = _base ?? { columns: [], data: [] };
+  const current = _current ?? { columns: [], data: [] };
+  const primaryKeys = options?.primaryKeys ?? [];
+  const pinnedColumns = options?.pinnedColumns ?? [];
+  const changedOnly = options?.changedOnly ?? false;
+  const displayMode = options?.displayMode ?? "side_by_side";
+  const columnsRenderMode = options?.columnsRenderMode ?? {};
+
+  const baseData = dataFrameToRowObjects(base);
+  const currentData = dataFrameToRowObjects(current);
+
+  // REFACTORED: Use shared utility
+  const columnMap = buildMergedColumnMap(base, current);
+
+  // Build row maps indexed by primary key
+  const baseMap: Record<string, RowObjectType> = {};
+  const currentMap: Record<string, RowObjectType> = {};
+  let invalidPKeyBase = false;
+  let invalidPKeyCurrent = false;
+
+  if (primaryKeys.length === 0) {
+    baseData.forEach((row) => {
+      baseMap[String(row._index)] = row;
+    });
+    currentData.forEach((row) => {
+      currentMap[String(row._index)] = row;
+    });
+  } else {
+    // REFACTORED: Use shared utility
+    const basePKKeys = validatePrimaryKeys(base.columns, primaryKeys);
+    baseData.forEach((row) => {
+      const key = getPrimaryKeyValue(base.columns, basePKKeys, row);
+      if (key in baseMap) {
+        invalidPKeyBase = true;
+      }
+      baseMap[key] = row;
+    });
+
+    const currentPKKeys = validatePrimaryKeys(current.columns, primaryKeys);
+    currentData.forEach((row) => {
+      const key = getPrimaryKeyValue(current.columns, currentPKKeys, row);
+      if (key in currentMap) {
+        invalidPKeyCurrent = true;
+      }
+      currentMap[key] = row;
+    });
+  }
+
+  const { rows, rowStats } = buildDiffRows({
+    baseMap,
+    currentMap,
+    baseColumns: base.columns,
+    currentColumns: current.columns,
+    columnMap,
+    primaryKeys,
+    changedOnly,
+  });
+
+  // Get column configurations (pure data)
+  const columnConfigs = getDisplayColumns({
+    columnMap,
+    primaryKeys,
+    pinnedColumns,
+    columnsRenderMode,
+    changedOnly,
+    rowStats,
+    excludeColumns: ["index"],
+    strictMode: false, // querydiff is lenient with missing columns
+  });
+
+  // Build column definitions with JSX
+  const { columns } = buildDiffColumnDefinitions({
+    columns: columnConfigs,
+    displayMode,
+    allowIndexFallback: true, // querydiff adds _index when no PKs
+    baseTitle: options?.baseTitle,
+    currentTitle: options?.currentTitle,
+    headerProps: {
+      primaryKeys,
+      pinnedColumns,
+      onPrimaryKeyChange: options?.onPrimaryKeyChange,
+      onPinnedColumnsChange: options?.onPinnedColumnsChange,
+      onColumnsRenderModeChanged: options?.onColumnsRenderModeChanged,
+    },
+  });
+
+  return {
+    columns,
+    rows,
+    invalidPKeyBase,
+    invalidPKeyCurrent,
+  };
+}

package/recce-source/js/src/lib/dataGrid/generators/toDataGrid.ts

@@ -0,0 +1,67 @@
+/**
+ * @file toDataGrid.tsx
+ * @description Simple data grid generation for single DataFrame display
+ *
+ * Unlike toDataDiffGrid and toValueDiffGrid, this handles non-diff scenarios
+ * where we just display a single DataFrame without base/current comparison.
+ *
+ * REFACTORED: Now uses shared utilities from @/lib/dataGrid/shared
+ */
+
+import { ColumnRenderMode, DataFrame } from "@/lib/api/types";
+import {
+  buildColumnMap,
+  buildSimpleColumnDefinitions,
+  getSimpleDisplayColumns,
+  validateToDataGridInputs,
+} from "@/lib/dataGrid/shared";
+import { dataFrameToRowObjects } from "@/utils/transforms";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface QueryDataGridOptions {
+  primaryKeys?: string[];
+  onPrimaryKeyChange?: (primaryKeys: string[]) => void;
+  pinnedColumns?: string[];
+  onPinnedColumnsChange?: (pinnedColumns: string[]) => void;
+  columnsRenderMode?: Record<string, ColumnRenderMode>;
+  onColumnsRenderModeChanged?: (col: Record<string, ColumnRenderMode>) => void;
+}
+
+// ============================================================================
+// Main Grid Generation Function
+// ============================================================================
+
+export function toDataGrid(result: DataFrame, options: QueryDataGridOptions) {
+  validateToDataGridInputs(result, options);
+
+  const primaryKeys = options.primaryKeys ?? [];
+  const pinnedColumns = options.pinnedColumns ?? [];
+  const columnsRenderMode = options.columnsRenderMode ?? {};
+
+  // REFACTORED: Use shared utility for column map
+  const columnMap = buildColumnMap(result);
+
+  // REFACTORED: Use shared utility for column configuration
+  const columnConfigs = getSimpleDisplayColumns({
+    columnMap,
+    primaryKeys,
+    pinnedColumns,
+    columnsRenderMode,
+  });
+
+  // REFACTORED: Use shared utility for column definitions with JSX
+  const { columns } = buildSimpleColumnDefinitions({
+    columns: columnConfigs,
+    headerProps: {
+      pinnedColumns,
+      onPinnedColumnsChange: options.onPinnedColumnsChange,
+      onColumnsRenderModeChanged: options.onColumnsRenderModeChanged,
+    },
+    allowIndexFallback: true,
+  });
+
+  return { columns, rows: dataFrameToRowObjects(result) };
+}

package/recce-source/js/src/lib/dataGrid/generators/toRowCountDataGrid.test.ts

@@ -0,0 +1,142 @@
+/**
+ * @file toRowCountDataGrid.test.ts
+ * @description Tests for toRowCountDataGrid generator (single environment)
+ */
+
+import { RowCountResult } from "@/lib/api/rowcount";
+import { RowObjectType } from "@/lib/api/types";
+import { toRowCountDataGrid } from "./toRowCountDataGrid";
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+// Mock ag-grid-community to avoid ES module parsing issues
+jest.mock("ag-grid-community", () => ({
+  ModuleRegistry: {
+    registerModules: jest.fn(),
+  },
+}));
+
+// ============================================================================
+// Types for testing (avoids ESM import issues with ag-grid-community)
+// ============================================================================
+
+/**
+ * Test-friendly Column type (mirrors AG Grid ColDef)
+ */
+interface TestColumn {
+  field: string;
+  headerName?: string;
+  resizable?: boolean;
+  cellClass?: string | ((row: RowObjectType) => string | undefined);
+}
+
+// ============================================================================
+// Test Helpers
+// ============================================================================
+
+/**
+ * Get a specific column by index and cast to TestColumn
+ */
+function getColumn(columns: unknown[], index: number): TestColumn {
+  return columns[index] as TestColumn;
+}
+
+// ============================================================================
+// Test Fixtures
+// ============================================================================
+
+const createResult = (
+  entries: Record<string, { curr: number | null }>,
+): RowCountResult => entries;
+
+// ============================================================================
+// Column Structure Tests
+// ============================================================================
+
+describe("toRowCountDataGrid - Column Structure", () => {
+  test("creates 2 columns", () => {
+    const result = createResult({ orders: { curr: 100 } });
+    const { columns } = toRowCountDataGrid(result);
+
+    expect(columns).toHaveLength(2);
+  });
+
+  test("columns have correct fields", () => {
+    const result = createResult({ orders: { curr: 100 } });
+    const { columns } = toRowCountDataGrid(result);
+
+    expect(getColumn(columns, 0).field).toBe("name");
+    expect(getColumn(columns, 1).field).toBe("current");
+  });
+
+  test("columns are resizable", () => {
+    const result = createResult({ orders: { curr: 100 } });
+    const { columns } = toRowCountDataGrid(result);
+
+    columns.forEach((col) => {
+      expect(getColumn([col], 0).resizable).toBe(true);
+    });
+  });
+
+  test("columns have no cellClass (single env)", () => {
+    const result = createResult({ orders: { curr: 100 } });
+    const { columns } = toRowCountDataGrid(result);
+
+    columns.forEach((col) => {
+      expect(getColumn([col], 0).cellClass).toBeUndefined();
+    });
+  });
+});
+
+// ============================================================================
+// Row Generation Tests
+// ============================================================================
+
+describe("toRowCountDataGrid - Row Generation", () => {
+  test("generates correct number of rows", () => {
+    const result = createResult({
+      orders: { curr: 100 },
+      customers: { curr: 50 },
+    });
+    const { rows } = toRowCountDataGrid(result);
+
+    expect(rows).toHaveLength(2);
+  });
+
+  test("row contains name and current", () => {
+    const result = createResult({ orders: { curr: 150 } });
+    const { rows } = toRowCountDataGrid(result);
+
+    expect(rows[0].name).toBe("orders");
+    expect(rows[0].current).toBe(150);
+  });
+
+  test("null values display as 'N/A'", () => {
+    const result = createResult({ failed_model: { curr: null } });
+    const { rows } = toRowCountDataGrid(result);
+
+    expect(rows[0].current).toBe("N/A");
+  });
+
+  test("rows have undefined __status", () => {
+    const result = createResult({ orders: { curr: 100 } });
+    const { rows } = toRowCountDataGrid(result);
+
+    expect(rows[0].__status).toBeUndefined();
+  });
+});
+
+// ============================================================================
+// Empty Result Tests
+// ============================================================================
+
+describe("toRowCountDataGrid - Empty Results", () => {
+  test("handles empty result", () => {
+    const { columns, rows } = toRowCountDataGrid({});
+
+    expect(columns).toHaveLength(2);
+    expect(rows).toHaveLength(0);
+  });
+});

package/recce-source/js/src/lib/dataGrid/generators/toRowCountDataGrid.ts

@@ -0,0 +1,71 @@
+/**
+ * @file toRowCountDataGrid.ts
+ * @description Grid generator for Row Count view (single environment)
+ *
+ * Generates columns and rows for displaying row counts
+ * in a single environment context.
+ */
+
+import type { ColDef, ColGroupDef } from "ag-grid-community";
+import { RowCountResult } from "@/lib/api/rowcount";
+import { RowObjectType } from "@/lib/api/types";
+import { dataFrameToRowObjects } from "@/utils/transforms";
+import { rowCountResultToDataFrame } from "./rowCountUtils";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface RowCountDataGridResult {
+  columns: (ColDef<RowObjectType> | ColGroupDef<RowObjectType>)[];
+  rows: RowObjectType[];
+}
+
+// ============================================================================
+// Main Generator Function
+// ============================================================================
+
+/**
+ * Generates grid data for Row Count view (single environment)
+ *
+ * @param result - The RowCountResult from the backend
+ * @returns Grid columns and rows ready for RecceDataGrid
+ *
+ * @example
+ * ```tsx
+ * const { columns, rows } = toRowCountDataGrid(run.result);
+ * return <RecceDataGrid columnDefs={columns} rowData={rows} />;
+ * ```
+ */
+export function toRowCountDataGrid(
+  result: RowCountResult,
+): RowCountDataGridResult {
+  // Convert to DataFrame format
+  const dataFrame = rowCountResultToDataFrame(result);
+
+  // Convert DataFrame to row objects
+  const rawRows = dataFrameToRowObjects(dataFrame);
+
+  // Transform rows (display "N/A" for null values)
+  const rows: RowObjectType[] = rawRows.map((row) => ({
+    ...row,
+    current: row.current ?? "N/A",
+    __status: undefined,
+  }));
+
+  // Build columns (simple, no diff styling)
+  const columns: ColDef<RowObjectType>[] = [
+    {
+      field: "name",
+      headerName: "Name",
+      resizable: true,
+    },
+    {
+      field: "current",
+      headerName: "Row Count",
+      resizable: true,
+    },
+  ];
+
+  return { columns, rows };
+}

package/recce-source/js/src/lib/dataGrid/generators/toRowCountDiffDataGrid.test.ts

@@ -0,0 +1,258 @@
+/**
+ * @file toRowCountDiffDataGrid.test.ts
+ * @description Tests for toRowCountDiffDataGrid generator
+ */
+
+import type { CellClassParams } from "ag-grid-community";
+import { RowCountDiffResult } from "@/lib/api/rowcount";
+import { RowObjectType } from "@/lib/api/types";
+import { toRowCountDiffDataGrid } from "./toRowCountDiffDataGrid";
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+// Mock ag-grid-community to avoid ES module parsing issues
+jest.mock("ag-grid-community", () => ({
+  ModuleRegistry: {
+    registerModules: jest.fn(),
+  },
+}));
+
+// ============================================================================
+// Helper to create mock CellClassParams
+// ============================================================================
+
+/**
+ * Helper to create mock CellClassParams from a row
+ * This is needed because AG Grid cellClass functions expect CellClassParams
+ */
+const createCellClassParams = (
+  row: RowObjectType,
+): CellClassParams<RowObjectType> =>
+  ({
+    data: row,
+    value: undefined,
+    node: undefined,
+    colDef: {},
+    column: {},
+    api: {},
+    rowIndex: 0,
+  }) as unknown as CellClassParams<RowObjectType>;
+
+// ============================================================================
+// Types for testing (avoids ESM import issues with ag-grid-community)
+// ============================================================================
+
+/**
+ * Test-friendly Column type (mirrors AG Grid ColDef)
+ */
+interface TestColumn {
+  field: string;
+  headerName?: string;
+  resizable?: boolean;
+  cellClass?:
+    | string
+    | ((params: CellClassParams<RowObjectType>) => string | undefined);
+}
+
+// ============================================================================
+// Test Helpers
+// ============================================================================
+
+/**
+ * Get a specific column by index and cast to TestColumn
+ */
+function getColumn(columns: unknown[], index: number): TestColumn {
+  return columns[index] as TestColumn;
+}
+
+// ============================================================================
+// Test Fixtures
+// ============================================================================
+
+const createResult = (
+  entries: Record<string, { base: number | null; curr: number | null }>,
+): RowCountDiffResult => entries;
+
+// ============================================================================
+// Column Structure Tests
+// ============================================================================
+
+describe("toRowCountDiffDataGrid - Column Structure", () => {
+  test("creates 4 columns", () => {
+    const result = createResult({ orders: { base: 100, curr: 100 } });
+    const { columns } = toRowCountDiffDataGrid(result);
+
+    expect(columns).toHaveLength(4);
+  });
+
+  test("columns have correct fields", () => {
+    const result = createResult({ orders: { base: 100, curr: 100 } });
+    const { columns } = toRowCountDiffDataGrid(result);
+
+    expect(getColumn(columns, 0).field).toBe("name");
+    expect(getColumn(columns, 1).field).toBe("base");
+    expect(getColumn(columns, 2).field).toBe("current");
+    expect(getColumn(columns, 3).field).toBe("delta");
+  });
+
+  test("columns are resizable", () => {
+    const result = createResult({ orders: { base: 100, curr: 100 } });
+    const { columns } = toRowCountDiffDataGrid(result);
+
+    columns.forEach((col) => {
+      expect(getColumn([col], 0).resizable).toBe(true);
+    });
+  });
+
+  test("columns have cellClass function", () => {
+    const result = createResult({ orders: { base: 100, curr: 100 } });
+    const { columns } = toRowCountDiffDataGrid(result);
+
+    columns.forEach((col) => {
+      expect(typeof getColumn([col], 0).cellClass).toBe("function");
+    });
+  });
+});
+
+// ============================================================================
+// Row Generation Tests
+// ============================================================================
+
+describe("toRowCountDiffDataGrid - Row Generation", () => {
+  test("generates correct number of rows", () => {
+    const result = createResult({
+      orders: { base: 100, curr: 100 },
+      customers: { base: 50, curr: 60 },
+    });
+    const { rows } = toRowCountDiffDataGrid(result);
+
+    expect(rows).toHaveLength(2);
+  });
+
+  test("row contains name, base, current, delta", () => {
+    const result = createResult({ orders: { base: 100, curr: 150 } });
+    const { rows } = toRowCountDiffDataGrid(result);
+
+    expect(rows[0].name).toBe("orders");
+    expect(rows[0].base).toBe(100);
+    expect(rows[0].current).toBe(150);
+    expect(rows[0].delta).toMatch(/^\+50/);
+  });
+
+  test("null values display as 'N/A'", () => {
+    const result = createResult({ new_model: { base: null, curr: 100 } });
+    const { rows } = toRowCountDiffDataGrid(result);
+
+    expect(rows[0].base).toBe("N/A");
+    expect(rows[0].current).toBe(100);
+  });
+});
+
+// ============================================================================
+// Row Status Tests
+// ============================================================================
+
+describe("toRowCountDiffDataGrid - Row Status", () => {
+  test("unchanged rows have undefined __status", () => {
+    const result = createResult({ orders: { base: 100, curr: 100 } });
+    const { rows } = toRowCountDiffDataGrid(result);
+
+    expect(rows[0].__status).toBeUndefined();
+  });
+
+  test("added models have 'added' __status", () => {
+    const result = createResult({ new_model: { base: null, curr: 100 } });
+    const { rows } = toRowCountDiffDataGrid(result);
+
+    expect(rows[0].__status).toBe("added");
+  });
+
+  test("removed models have 'removed' __status", () => {
+    const result = createResult({ old_model: { base: 100, curr: null } });
+    const { rows } = toRowCountDiffDataGrid(result);
+
+    expect(rows[0].__status).toBe("removed");
+  });
+
+  test("modified models have 'modified' __status", () => {
+    const result = createResult({ orders: { base: 100, curr: 150 } });
+    const { rows } = toRowCountDiffDataGrid(result);
+
+    expect(rows[0].__status).toBe("modified");
+  });
+});
+
+// ============================================================================
+// Cell Class Tests
+// ============================================================================
+
+describe("toRowCountDiffDataGrid - Cell Classes", () => {
+  test("unchanged rows return undefined cellClass", () => {
+    const result = createResult({ orders: { base: 100, curr: 100 } });
+    const { columns, rows } = toRowCountDiffDataGrid(result);
+
+    const cellClassFn = getColumn(columns, 0).cellClass as (
+      params: CellClassParams<RowObjectType>,
+    ) => string | undefined;
+    expect(cellClassFn(createCellClassParams(rows[0]))).toBeUndefined();
+  });
+
+  test("increased counts return 'diff-cell-added'", () => {
+    const result = createResult({ orders: { base: 100, curr: 150 } });
+    const { columns, rows } = toRowCountDiffDataGrid(result);
+
+    const cellClassFn = getColumn(columns, 0).cellClass as (
+      params: CellClassParams<RowObjectType>,
+    ) => string | undefined;
+    expect(cellClassFn(createCellClassParams(rows[0]))).toBe("diff-cell-added");
+  });
+
+  test("decreased counts return 'diff-cell-removed'", () => {
+    const result = createResult({ orders: { base: 150, curr: 100 } });
+    const { columns, rows } = toRowCountDiffDataGrid(result);
+
+    const cellClassFn = getColumn(columns, 0).cellClass as (
+      params: CellClassParams<RowObjectType>,
+    ) => string | undefined;
+    expect(cellClassFn(createCellClassParams(rows[0]))).toBe(
+      "diff-cell-removed",
+    );
+  });
+
+  test("added models (null base) return 'diff-cell-added'", () => {
+    const result = createResult({ new_model: { base: null, curr: 100 } });
+    const { columns, rows } = toRowCountDiffDataGrid(result);
+
+    const cellClassFn = getColumn(columns, 0).cellClass as (
+      params: CellClassParams<RowObjectType>,
+    ) => string | undefined;
+    expect(cellClassFn(createCellClassParams(rows[0]))).toBe("diff-cell-added");
+  });
+
+  test("removed models (null current) return 'diff-cell-removed'", () => {
+    const result = createResult({ old_model: { base: 100, curr: null } });
+    const { columns, rows } = toRowCountDiffDataGrid(result);
+
+    const cellClassFn = getColumn(columns, 0).cellClass as (
+      params: CellClassParams<RowObjectType>,
+    ) => string | undefined;
+    expect(cellClassFn(createCellClassParams(rows[0]))).toBe(
+      "diff-cell-removed",
+    );
+  });
+});
+
+// ============================================================================
+// Empty Result Tests
+// ============================================================================
+
+describe("toRowCountDiffDataGrid - Empty Results", () => {
+  test("handles empty result", () => {
+    const { columns, rows } = toRowCountDiffDataGrid({});
+
+    expect(columns).toHaveLength(4);
+    expect(rows).toHaveLength(0);
+  });
+});