@datarecce/ui 0.1.30 → 0.1.31

package/recce-source/js/src/components/ui/dataGrid/schemaCells.tsx

@@ -0,0 +1,142 @@
+/**
+ * @file schemaCells.tsx
+ * @description Cell components and render functions for Schema grid views
+ */
+
+import type { ICellRendererParams } from "ag-grid-community";
+import React from "react";
+import { ColumnNameCell } from "@/components/schema/ColumnNameCell";
+import { NodeData } from "@/lib/api/info";
+import { RowObjectType } from "@/lib/api/types";
+import type {
+  SchemaDiffRow,
+  SchemaRow,
+} from "@/lib/dataGrid/generators/toSchemaDataGrid";
+
+// ============================================================================
+// Render Functions for toSchemaDataGrid.ts
+// ============================================================================
+
+/**
+ * Creates a cellRenderer function for schema diff column names
+ */
+export function createColumnNameRenderer(
+  node: NodeData,
+  cllRunningMap?: Map<string, boolean>,
+  showMenu?: boolean,
+): (params: ICellRendererParams<SchemaDiffRow>) => React.ReactNode {
+  return (params) => {
+    const row = params.data;
+    if (!row) return null;
+    return (
+      <ColumnNameCell
+        model={node}
+        row={row}
+        cllRunning={cllRunningMap?.get(row.name) ?? false}
+        showMenu={showMenu}
+      />
+    );
+  };
+}
+
+/**
+ * Creates a cellRenderer function for single-env schema column names
+ */
+export function createSingleEnvColumnNameRenderer(
+  node: NodeData,
+  cllRunningMap?: Map<string, boolean>,
+  showMenu?: boolean,
+): (params: ICellRendererParams<SchemaRow>) => React.ReactNode {
+  return (params) => {
+    const row = params.data;
+    if (!row) return null;
+    return (
+      <ColumnNameCell
+        model={node}
+        row={row}
+        cllRunning={cllRunningMap?.get(row.name) ?? false}
+        singleEnv
+        showMenu={showMenu}
+      />
+    );
+  };
+}
+
+// ============================================================================
+// Merged Column Render Functions for Compressed Schema View
+// ============================================================================
+
+/**
+ * Renders the merged index column.
+ * Shows currentIndex for normal/added rows, baseIndex for removed rows.
+ */
+export function renderIndexCell(
+  params: ICellRendererParams<RowObjectType>,
+): React.ReactNode {
+  if (!params.data) {
+    return null;
+  }
+  const row = params.data;
+
+  const { baseIndex, currentIndex } = row;
+  const isRemoved = currentIndex === undefined;
+  const value = isRemoved
+    ? baseIndex !== undefined
+      ? baseIndex
+      : "-"
+    : currentIndex !== undefined
+      ? currentIndex
+      : "-";
+  return <span>{value}</span>;
+}
+
+// Memoized version for performance optimization
+export const MemoizedRenderIndexCell = React.memo(renderIndexCell);
+MemoizedRenderIndexCell.displayName = "MemoizedRenderIndexCell";
+
+/**
+ * Renders the merged type column with badges for type changes.
+ * - Type changed: shows red badge (base) + green badge (current) inline
+ * - Added row: shows currentType
+ * - Removed row: shows baseType
+ * - No change: shows currentType (same as baseType)
+ */
+export function renderTypeCell(
+  params: ICellRendererParams<RowObjectType>,
+): React.ReactNode {
+  if (!params.data) {
+    return null;
+  }
+  const row = params.data;
+
+  const { baseType, currentType, baseIndex, currentIndex } = row;
+  const isAdded = baseIndex === undefined;
+  const isRemoved = currentIndex === undefined;
+  const isTypeChanged = !isAdded && !isRemoved && baseType !== currentType;
+
+  if (isTypeChanged) {
+    return (
+      <span>
+        <span
+          className="type-badge type-badge-removed"
+          title={`Base type: ${baseType}`}
+        >
+          {baseType}
+        </span>
+        <span
+          className="type-badge type-badge-added"
+          title={`Current type: ${currentType}`}
+        >
+          {currentType}
+        </span>
+      </span>
+    );
+  }
+
+  // For added rows, show currentType; for removed rows, show baseType
+  return <span>{isRemoved ? baseType : currentType}</span>;
+}
+
+// Memoized version for performance optimization
+export const MemoizedRenderTypeCell = React.memo(renderTypeCell);
+MemoizedRenderTypeCell.displayName = "MemoizedRenderTypeCell";

package/recce-source/js/src/components/ui/dataGrid/valueDiffCells.test.tsx

@@ -0,0 +1,178 @@
+/**
+ * @file valueDiffCells.test.tsx
+ * @description Tests for Value Diff cell components
+ *
+ * Tests cover:
+ * - PrimaryKeyIndicatorCell rendering
+ * - MatchedPercentCell formatting
+ * - ValueDiffColumnNameCell rendering and context menu
+ */
+
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import { render, screen } from "@testing-library/react";
+import React, { ReactNode } from "react";
+import { lightTheme as theme } from "@/components/ui/mui-theme";
+import {
+  MatchedPercentCell,
+  PrimaryKeyIndicatorCell,
+  ValueDiffColumnNameCell,
+} from "./valueDiffCells";
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+jest.mock("@/lib/hooks/RecceActionContext", () => ({
+  useRecceActionContext: () => ({
+    runAction: jest.fn(),
+  }),
+}));
+
+jest.mock("@/lib/hooks/RecceInstanceContext", () => ({
+  useRecceInstanceContext: () => ({
+    featureToggles: {
+      disableDatabaseQuery: false,
+    },
+  }),
+}));
+
+// ============================================================================
+// Test Wrapper
+// ============================================================================
+
+/**
+ * Test wrapper that provides MUI ThemeProvider context
+ */
+function TestWrapper({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+}
+
+/**
+ * Custom render function that includes providers
+ */
+function renderWithProviders(ui: React.ReactElement) {
+  return render(ui, { wrapper: TestWrapper });
+}
+
+// ============================================================================
+// PrimaryKeyIndicatorCell Tests
+// ============================================================================
+
+describe("PrimaryKeyIndicatorCell", () => {
+  test("renders key icon when column is a primary key", () => {
+    const { container } = renderWithProviders(
+      <PrimaryKeyIndicatorCell
+        columnName="user_id"
+        primaryKeys={["user_id", "order_id"]}
+      />,
+    );
+
+    // Check that icon is rendered (VscKey icon)
+    const icon = container.querySelector("svg");
+    expect(icon).toBeInTheDocument();
+  });
+
+  test("renders empty when column is not a primary key", () => {
+    const { container } = renderWithProviders(
+      <PrimaryKeyIndicatorCell
+        columnName="email"
+        primaryKeys={["user_id", "order_id"]}
+      />,
+    );
+
+    // Should not have an icon
+    const icon = container.querySelector("svg");
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  test("handles empty primary keys array", () => {
+    const { container } = renderWithProviders(
+      <PrimaryKeyIndicatorCell columnName="user_id" primaryKeys={[]} />,
+    );
+
+    const icon = container.querySelector("svg");
+    expect(icon).not.toBeInTheDocument();
+  });
+});
+
+// ============================================================================
+// MatchedPercentCell Tests
+// ============================================================================
+
+describe("MatchedPercentCell", () => {
+  test("renders 'N/A' for null value", () => {
+    renderWithProviders(<MatchedPercentCell value={null} />);
+    expect(screen.getByText("N/A")).toBeInTheDocument();
+  });
+
+  test("renders 'N/A' for undefined value", () => {
+    renderWithProviders(<MatchedPercentCell value={undefined} />);
+    expect(screen.getByText("N/A")).toBeInTheDocument();
+  });
+
+  test("renders '100.00 %' for 1.0", () => {
+    renderWithProviders(<MatchedPercentCell value={1.0} />);
+    expect(screen.getByText("100.00 %")).toBeInTheDocument();
+  });
+
+  test("renders '0.00 %' for 0", () => {
+    renderWithProviders(<MatchedPercentCell value={0} />);
+    expect(screen.getByText("0.00 %")).toBeInTheDocument();
+  });
+
+  test("renders '~99.99 %' for values slightly below 100%", () => {
+    renderWithProviders(<MatchedPercentCell value={0.99995} />);
+    expect(screen.getByText("~99.99 %")).toBeInTheDocument();
+  });
+
+  test("renders '~0.01 %' for values slightly above 0%", () => {
+    renderWithProviders(<MatchedPercentCell value={0.00005} />);
+    expect(screen.getByText("~0.01 %")).toBeInTheDocument();
+  });
+
+  test("renders formatted percentage for normal values", () => {
+    renderWithProviders(<MatchedPercentCell value={0.9542} />);
+    expect(screen.getByText("95.42 %")).toBeInTheDocument();
+  });
+
+  test("renders formatted percentage with two decimal places", () => {
+    renderWithProviders(<MatchedPercentCell value={0.12345} />);
+    expect(screen.getByText("12.35 %")).toBeInTheDocument();
+  });
+});
+
+// ============================================================================
+// ValueDiffColumnNameCell Tests
+// ============================================================================
+
+describe("ValueDiffColumnNameCell", () => {
+  test("renders column name", () => {
+    renderWithProviders(
+      <ValueDiffColumnNameCell
+        column="email"
+        params={{ model: "users", primary_key: "id" }}
+      />,
+    );
+
+    expect(screen.getByText("email")).toBeInTheDocument();
+  });
+
+  test("renders context menu trigger button", () => {
+    renderWithProviders(
+      <ValueDiffColumnNameCell
+        column="email"
+        params={{ model: "users", primary_key: "id" }}
+      />,
+    );
+
+    // Should have a button for the context menu
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+  });
+});

package/recce-source/js/src/components/ui/dataGrid/valueDiffCells.tsx

@@ -0,0 +1,275 @@
+/**
+ * @file valueDiffCells.tsx
+ * @description Cell components and render functions for Value Diff summary grid
+ *
+ * Provides specialized cell renderers for the value diff summary view:
+ * - PrimaryKeyIndicatorCell: Shows key icon for primary key columns
+ * - ValueDiffColumnNameCell: Column name with context menu for drill-down
+ * - MatchedPercentCell: Formatted percentage display
+ *
+ * Also exports render functions for use in toValueDataGrid.ts generator.
+ */
+
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import ListSubheader from "@mui/material/ListSubheader";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import type { ICellRendererParams } from "ag-grid-community";
+import React, { MouseEvent, useState } from "react";
+import { PiDotsThreeVertical } from "react-icons/pi";
+import { VscKey } from "react-icons/vsc";
+import { RowObjectType } from "@/lib/api/types";
+import { ValueDiffParams } from "@/lib/api/valuediff";
+import {
+  RecceActionOptions,
+  useRecceActionContext,
+} from "@/lib/hooks/RecceActionContext";
+import { useRecceInstanceContext } from "@/lib/hooks/RecceInstanceContext";
+
+// ============================================================================
+// PrimaryKeyIndicatorCell
+// ============================================================================
+
+export interface PrimaryKeyIndicatorCellProps {
+  /** The column name to check */
+  columnName: string;
+  /** List of primary key column names */
+  primaryKeys: string[];
+}
+
+/**
+ * Cell component that displays a key icon for primary key columns
+ *
+ * @example
+ * <PrimaryKeyIndicatorCell
+ *   columnName="user_id"
+ *   primaryKeys={["user_id", "order_id"]}
+ * />
+ */
+export function PrimaryKeyIndicatorCell({
+  columnName,
+  primaryKeys,
+}: PrimaryKeyIndicatorCellProps) {
+  const isPrimaryKey = primaryKeys.includes(columnName);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+      }}
+    >
+      {isPrimaryKey && <VscKey />}
+    </Box>
+  );
+}
+
+// ============================================================================
+// ValueDiffColumnNameCell
+// ============================================================================
+
+export interface ValueDiffColumnNameCellProps {
+  /** The column name to display */
+  column: string;
+  /** Parameters from the value_diff run */
+  params: ValueDiffParams;
+}
+
+/**
+ * Cell component for column names with context menu for drill-down actions
+ *
+ * @description Renders the column name with a context menu that provides:
+ * - "Show mismatched values..." - Opens form to configure detail view
+ * - "Show mismatched values for '{column}'" - Directly shows mismatches for this column
+ *
+ * @example
+ * <ValueDiffColumnNameCell
+ *   column="email"
+ *   params={{ model: "users", primary_key: "id" }}
+ * />
+ */
+export function ValueDiffColumnNameCell({
+  params,
+  column,
+}: ValueDiffColumnNameCellProps) {
+  const { runAction } = useRecceActionContext();
+  const { featureToggles } = useRecceInstanceContext();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const menuOpen = Boolean(anchorEl);
+
+  const handleMenuClick = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleValueDiffDetail = (
+    paramsOverride?: Partial<ValueDiffParams>,
+    options?: RecceActionOptions,
+  ) => {
+    const newParams = {
+      ...params,
+      ...paramsOverride,
+    };
+
+    runAction("value_diff_detail", newParams, options);
+  };
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      <Box
+        sx={{
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {column}
+      </Box>
+      <Box sx={{ flex: 1 }} />
+
+      <IconButton
+        aria-label="Column options"
+        className="row-context-menu"
+        size="small"
+        disabled={featureToggles.disableDatabaseQuery}
+        onClick={handleMenuClick}
+      >
+        <PiDotsThreeVertical />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={menuOpen}
+        onClose={handleMenuClose}
+        slotProps={{
+          list: { sx: { lineHeight: "20px" } },
+        }}
+      >
+        <ListSubheader sx={{ fontSize: "8pt", lineHeight: "20px" }}>
+          Action
+        </ListSubheader>
+        <MenuItem
+          onClick={() => {
+            handleValueDiffDetail({}, { showForm: true });
+            handleMenuClose();
+          }}
+          sx={{ fontSize: "10pt" }}
+        >
+          Show mismatched values...
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            handleValueDiffDetail({ columns: [column] }, { showForm: false });
+            handleMenuClose();
+          }}
+          sx={{ fontSize: "10pt" }}
+        >
+          Show mismatched values for &apos;{column}&apos;
+        </MenuItem>
+      </Menu>
+    </Box>
+  );
+}
+
+// ============================================================================
+// MatchedPercentCell
+// ============================================================================
+
+export interface MatchedPercentCellProps {
+  /** The percentage value (0-1 scale) */
+  value: number | undefined | null;
+}
+
+/**
+ * Cell component for displaying match percentage with special formatting
+ *
+ * @description Formats the percentage value with special handling for edge cases:
+ * - Values > 99.99% but < 100%: Shows "~99.99 %"
+ * - Values > 0% but < 0.01%: Shows "~0.01 %"
+ * - null/undefined: Shows "N/A"
+ * - Other values: Shows "XX.XX %"
+ *
+ * @example
+ * <MatchedPercentCell value={0.9542} />  // "95.42 %"
+ * <MatchedPercentCell value={0.99999} /> // "~99.99 %"
+ * <MatchedPercentCell value={null} />    // "N/A"
+ */
+export function MatchedPercentCell({ value }: MatchedPercentCellProps) {
+  let displayValue = "N/A";
+
+  if (value != null) {
+    if (value > 0.9999 && value < 1) {
+      displayValue = "~99.99 %";
+    } else if (value < 0.0001 && value > 0) {
+      displayValue = "~0.01 %";
+    } else {
+      displayValue = `${(value * 100).toFixed(2)} %`;
+    }
+  }
+
+  return <Box sx={{ textAlign: "right" }}>{displayValue}</Box>;
+}
+
+// ============================================================================
+// Render Functions for toValueDataGrid.ts
+// ============================================================================
+
+/**
+ * Creates a cellRenderer function for the primary key indicator column
+ *
+ * @param primaryKeys - List of primary key column names
+ * @returns A cellRenderer function compatible with AG Grid
+ */
+export function createPrimaryKeyIndicatorRenderer(
+  primaryKeys: string[],
+): (params: ICellRendererParams<RowObjectType>) => React.ReactNode {
+  return (params) => {
+    const row = params.data;
+    if (!row) return null;
+    return (
+      <PrimaryKeyIndicatorCell
+        columnName={String(row["0"])}
+        primaryKeys={primaryKeys}
+      />
+    );
+  };
+}
+
+/**
+ * Creates a cellRenderer function for the column name column
+ *
+ * @param params - ValueDiffParams from the run
+ * @returns A cellRenderer function compatible with AG Grid
+ */
+export function createColumnNameRenderer(
+  params: ValueDiffParams,
+): (cellParams: ICellRendererParams<RowObjectType>) => React.ReactNode {
+  return (cellParams) => {
+    const row = cellParams.data;
+    const field = cellParams.colDef?.field ?? "";
+    if (!row) return null;
+    return (
+      <ValueDiffColumnNameCell column={String(row[field])} params={params} />
+    );
+  };
+}
+
+/**
+ * cellRenderer function for the matched percentage column
+ *
+ * @param params - ICellRendererParams from AG Grid
+ * @returns React node displaying formatted percentage
+ */
+export function renderMatchedPercentCell(
+  params: ICellRendererParams<RowObjectType>,
+): React.ReactNode {
+  const row = params.data;
+  const field = params.colDef?.field ?? "";
+  if (!row) return null;
+  return <MatchedPercentCell value={row[field] as number} />;
+}