@datarecce/ui 0.1.41 → 0.2.1-nightly.20260402

package/recce-source/js/src/lib/dataGrid/shared/toDiffColumn.tsx

@@ -1,231 +0,0 @@
-/**
- * @file toDiffColumn.tsx
- * @description Shared column builder for diff grids (querydiff and valuediff)
- *
- * Provides a unified function to create column definitions for data diff grids,
- * supporting both inline and side-by-side display modes.
- */
-
-import type { CellClassParams, ColDef, ColGroupDef } from "ag-grid-community";
-import _ from "lodash";
-import {
-  DataFrameColumnGroupHeader,
-  type DataFrameColumnGroupHeaderProps,
-  defaultRenderCell,
-  inlineRenderCell,
-} from "@/components/ui/dataGrid";
-import { ColumnRenderMode, ColumnType, RowObjectType } from "@/lib/api/types";
-import { getHeaderCellClass } from "./gridUtils";
-import { type RecceColumnContext } from "./simpleColumnBuilder";
-
-// ============================================================================
-// Types
-// ============================================================================
-
-/**
- * Configuration for building a diff column
- */
-export interface DiffColumnConfig {
-  /** Column name */
-  name: string;
-  /** Column diff status: 'added', 'removed', 'modified', or empty */
-  columnStatus: string;
-  /** Column data type */
-  columnType: ColumnType;
-  /** How to render numeric values */
-  columnRenderMode?: ColumnRenderMode;
-  /** Display mode: inline shows diff in single cell, side_by_side shows two columns */
-  displayMode: "inline" | "side_by_side";
-  /** Title for base column in side_by_side mode */
-  baseTitle?: string;
-  /** Title for current column in side_by_side mode */
-  currentTitle?: string;
-  /** Props to pass to DataFrameColumnGroupHeader */
-  headerProps?: Partial<DataFrameColumnGroupHeaderProps>;
-}
-
-/**
- * Extended column type with context metadata
- * Uses context property for custom data per AG Grid best practices
- * Note: Distributed form allows TypeScript to narrow types correctly
- */
-export type DiffColumnResult =
-  | (ColDef<RowObjectType> & { context?: RecceColumnContext })
-  | (ColGroupDef<RowObjectType> & { context?: RecceColumnContext });
-
-// ============================================================================
-// Cell Class Factories
-// ============================================================================
-
-/**
- * Creates a cell class function for base column cells
- *
- * @param columnName - The column name (used for value comparison)
- * @param columnStatus - The column's diff status
- * @returns Function that returns CSS class based on row status and value diff
- */
-export function createCellClassBase(
-  columnName: string,
-  columnStatus: string,
-): (params: CellClassParams<RowObjectType>) => string | undefined {
-  return (params: CellClassParams<RowObjectType>) => {
-    const row = params.data;
-    if (!row) return undefined;
-
-    const rowStatus = row.__status;
-
-    if (rowStatus === "removed") return "diff-cell-removed";
-    if (rowStatus === "added") return "diff-cell-added";
-    if (columnStatus === "added" || columnStatus === "removed")
-      return undefined;
-
-    const baseKey = `base__${columnName}`.toLowerCase();
-    const currentKey = `current__${columnName}`.toLowerCase();
-
-    if (!_.isEqual(row[baseKey], row[currentKey])) {
-      return "diff-cell-removed";
-    }
-
-    return undefined;
-  };
-}
-
-/**
- * Creates a cell class function for current column cells
- *
- * @param columnName - The column name (used for value comparison)
- * @param columnStatus - The column's diff status
- * @returns Function that returns CSS class based on row status and value diff
- */
-export function createCellClassCurrent(
-  columnName: string,
-  columnStatus: string,
-): (params: CellClassParams<RowObjectType>) => string | undefined {
-  return (params: CellClassParams<RowObjectType>) => {
-    const row = params.data;
-    if (!row) return undefined;
-
-    const rowStatus = row.__status;
-
-    if (rowStatus === "removed") return "diff-cell-removed";
-    if (rowStatus === "added") return "diff-cell-added";
-    if (columnStatus === "added" || columnStatus === "removed")
-      return undefined;
-
-    const baseKey = `base__${columnName}`.toLowerCase();
-    const currentKey = `current__${columnName}`.toLowerCase();
-
-    if (!_.isEqual(row[baseKey], row[currentKey])) {
-      return "diff-cell-added";
-    }
-
-    return undefined;
-  };
-}
-
-// ============================================================================
-// Main Column Builder
-// ============================================================================
-
-/**
- * Creates a diff column definition for use in data grids
- *
- * @description Builds a column configuration that supports both inline and
- * side-by-side diff display modes. In inline mode, differences are shown
- * within a single cell. In side-by-side mode, base and current values
- * appear in separate child columns.
- *
- * @param config - Column configuration options
- * @returns Column definition compatible with AG Grid
- *
- * @example
- * // Inline mode for querydiff
- * const column = toDiffColumn({
- *   name: 'price',
- *   columnStatus: 'modified',
- *   columnType: 'number',
- *   displayMode: 'inline',
- *   headerProps: {
- *     primaryKeys: ['id'],
- *     onPrimaryKeyChange: setPrimaryKeys,
- *   }
- * });
- *
- * @example
- * // Side-by-side mode for valuediff
- * const column = toDiffColumn({
- *   name: 'Amount',
- *   columnStatus: '',
- *   columnType: 'number',
- *   displayMode: 'side_by_side',
- *   baseTitle: 'Before',
- *   currentTitle: 'After',
- *   headerProps: {
- *     primaryKeys: ['id'],
- *   }
- * });
- */
-export function toDiffColumn(config: DiffColumnConfig): DiffColumnResult {
-  const {
-    name,
-    columnStatus,
-    columnType,
-    columnRenderMode,
-    displayMode,
-    baseTitle = "Base",
-    currentTitle = "Current",
-    headerProps = {},
-  } = config;
-
-  const headerCellClass = getHeaderCellClass(columnStatus);
-
-  // Build the header component
-  const headerComponent = () => (
-    <DataFrameColumnGroupHeader
-      name={name}
-      columnStatus={columnStatus}
-      columnType={columnType}
-      {...headerProps}
-    />
-  );
-
-  if (displayMode === "inline") {
-    return {
-      field: name,
-      headerName: name,
-      headerClass: headerCellClass,
-      headerComponent,
-      cellRenderer: inlineRenderCell,
-      context: { columnType, columnRenderMode },
-    };
-  }
-
-  // Side-by-side mode with base/current child columns
-  const cellClassBase = createCellClassBase(name, columnStatus);
-  const cellClassCurrent = createCellClassCurrent(name, columnStatus);
-
-  return {
-    headerName: name,
-    headerClass: headerCellClass,
-    headerGroupComponent: headerComponent,
-    context: { columnType, columnRenderMode },
-    children: [
-      {
-        field: `base__${name}`,
-        headerName: baseTitle,
-        headerClass: headerCellClass,
-        cellClass: cellClassBase,
-        cellRenderer: defaultRenderCell,
-        context: { columnType, columnRenderMode },
-      } as ColDef<RowObjectType>,
-      {
-        field: `current__${name}`,
-        headerName: currentTitle,
-        headerClass: headerCellClass,
-        cellClass: cellClassCurrent,
-        cellRenderer: defaultRenderCell,
-        context: { columnType, columnRenderMode },
-      } as ColDef<RowObjectType>,
-    ],
-  };
-}