@datarecce/ui 0.1.40 → 0.2.0

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

@@ -1,211 +0,0 @@
-/**
- * @file inlineRenderCell.tsx
- * @description Inline diff cell renderer for DataGrid columns
- *
- * Renders base and current values side-by-side when they differ,
- * or a single value when unchanged. Used for inline diff display mode.
- *
- * NOTE: Imports directly from gridUtils.ts to avoid circular dependency
- * with toDiffColumn.tsx which imports this component.
- */
-
-import Box from "@mui/material/Box";
-import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import type { ColDef, ICellRendererParams } from "ag-grid-community";
-import { DiffText } from "@/components/query/DiffText";
-import {
-  ColumnRenderMode,
-  ColumnType,
-  RowDataTypes,
-  RowObjectType,
-} from "@/lib/api/types";
-// Import directly from gridUtils to avoid circular dependency
-import {
-  formatSmartDecimal,
-  toRenderedValue,
-} from "@/lib/dataGrid/shared/gridUtils";
-
-/**
- * Custom context data for Recce columns
- * Stored in colDef.context to avoid AG Grid validation warnings
- */
-interface RecceColumnContext {
-  columnType?: ColumnType;
-  columnRenderMode?: ColumnRenderMode;
-}
-
-/**
- * Extended column definition with context metadata
- * Uses context property for custom data per AG Grid best practices
- */
-type ColDefWithMetadata = ColDef<RowObjectType> & {
-  context?: RecceColumnContext;
-};
-
-/**
- * Inline diff cell renderer for comparing base and current values
- *
- * @description Renders cell values in inline diff mode:
- * - If base and current values are equal, shows single value
- * - If values differ, shows both with red (base/removed) and green (current/added) styling
- * - Handles missing values gracefully
- *
- * The component uses DiffText for styled diff display with copy functionality.
- *
- * @param params - AG Grid cell renderer params containing row data and column definition
- * @returns Rendered cell content showing diff or single value
- */
-export const inlineRenderCell = (
-  params: ICellRendererParams<RowObjectType>,
-) => {
-  const colDef = params.colDef as ColDefWithMetadata;
-  const columnType = colDef?.context?.columnType;
-  const columnRenderMode = colDef?.context?.columnRenderMode;
-  const columnKey = colDef?.field ?? "";
-
-  if (!params.data) {
-    return null;
-  }
-
-  const row = params.data;
-  const baseKey = `base__${columnKey}`.toLowerCase();
-  const currentKey = `current__${columnKey}`.toLowerCase();
-
-  // Handle case where neither base nor current values exist
-  if (!Object.hasOwn(row, baseKey) && !Object.hasOwn(row, currentKey)) {
-    return "-";
-  }
-
-  const hasBase = Object.hasOwn(row, baseKey);
-  const hasCurrent = Object.hasOwn(row, currentKey);
-
-  const [baseValue, baseGrayOut] = toRenderedValue(
-    row,
-    `base__${columnKey}`.toLowerCase(),
-    columnType,
-    columnRenderMode,
-  );
-
-  const [currentValue, currentGrayOut] = toRenderedValue(
-    row,
-    `current__${columnKey}`.toLowerCase(),
-    columnType,
-    columnRenderMode,
-  );
-
-  // No change - render single value
-  if (row[baseKey] === row[currentKey]) {
-    return (
-      <Typography
-        component="span"
-        style={{ color: currentGrayOut ? "gray" : "inherit" }}
-      >
-        {currentValue}
-      </Typography>
-    );
-  }
-
-  // Check if we're using delta display mode
-  const isDeltaMode = columnRenderMode === "delta";
-
-  // For delta modes, calculate the change for numeric columns
-  if (
-    isDeltaMode &&
-    (columnType === "number" || columnType === "integer") &&
-    hasBase &&
-    hasCurrent
-  ) {
-    // Parse values to numbers (they may be strings from the API)
-    const baseNum = asNumber(row[baseKey]);
-    const currentNum = asNumber(row[currentKey]);
-
-    // Only show delta if both values are valid numbers
-    if (Number.isFinite(baseNum) && Number.isFinite(currentNum)) {
-      const netChange = currentNum - baseNum;
-      const changePercent = baseNum !== 0 ? (netChange / baseNum) * 100 : 0;
-
-      // Format current value and delta with smart decimals (up to 2, no trailing zeros)
-      const formattedCurrent = formatSmartDecimal(currentNum);
-      const formattedDelta = formatSmartDecimal(netChange);
-      const deltaText = `(${netChange >= 0 ? "+" : ""}${formattedDelta})`;
-
-      // Build tooltip text showing full precision
-      const tooltipText = `Base: ${baseNum}\nCurrent: ${currentNum}\nChange: ${
-        netChange >= 0 ? "+" : ""
-      }${netChange} (${changePercent >= 0 ? "+" : ""}${changePercent.toFixed(
-        2,
-      )}%)`;
-
-      return (
-        <Tooltip
-          title={tooltipText}
-          slotProps={{
-            tooltip: { sx: { whiteSpace: "pre-line" } },
-          }}
-          enterDelay={300}
-          placement="top"
-        >
-          <Box
-            gap="5px"
-            display="flex"
-            alignItems="center"
-            lineHeight="normal"
-            height="100%"
-          >
-            <DiffText
-              value={formattedCurrent}
-              colorPalette="green"
-              grayOut={currentGrayOut}
-            />
-            <Typography
-              fontSize="0.75rem"
-              color={netChange >= 0 ? "green.600" : "red.600"}
-            >
-              {deltaText}
-            </Typography>
-          </Box>
-        </Tooltip>
-      );
-    }
-  }
-
-  // Values differ - render inline diff with base (red) and current (green)
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        gap: "5px",
-        alignItems: "center",
-        lineHeight: "normal",
-        height: "100%",
-      }}
-    >
-      {hasBase && (
-        <DiffText value={baseValue} colorPalette="red" grayOut={baseGrayOut} />
-      )}
-      {hasCurrent && (
-        <DiffText
-          value={currentValue}
-          colorPalette="green"
-          grayOut={currentGrayOut}
-        />
-      )}
-    </Box>
-  );
-};
-
-/*
- * Converts row data values to a number
- *
- * @param data - The row data value (number, string, or other type)
- * @returns The numeric value, or 0 if conversion fails or value is not numeric
- */
-export function asNumber(data: RowDataTypes): number {
-  if (typeof data === "number") return data;
-  if (typeof data === "string") {
-    const n = Number.parseFloat(data);
-    return Number.isNaN(n) ? 0 : n;
-  }
-  return 0;
-}

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

@@ -1,452 +0,0 @@
-/**
- * @file schemaCells.test.tsx
- * @description Tests for Schema cell render functions
- *
- * Tests cover:
- * - renderIndexCell rendering logic for normal/added/removed rows
- * - renderTypeCell rendering logic and type change badges
- * - Accessibility attributes for type badges
- * - Null data handling
- */
-
-import { render, screen } from "@testing-library/react";
-import type { ICellRendererParams } from "ag-grid-community";
-import React from "react";
-import type { RowObjectType } from "@/lib/api/types";
-
-// Performance testing utilities
-const performance = {
-  now: () => Date.now(),
-};
-
-// ============================================================================
-// Mocks - Must be defined before imports that use them
-// ============================================================================
-
-jest.mock("@/components/schema/ColumnNameCell", () => ({
-  ColumnNameCell: () => null,
-}));
-
-jest.mock("@/lib/api/info", () => ({}));
-
-// Import after mocks
-import {
-  MemoizedRenderIndexCell,
-  MemoizedRenderTypeCell,
-  renderIndexCell,
-  renderTypeCell,
-} from "./schemaCells";
-
-// ============================================================================
-// Test Helpers
-// ============================================================================
-
-/**
- * Creates a mock ICellRendererParams object for testing renderIndexCell
- */
-function createIndexCellParams(
-  data: {
-    name?: string;
-    currentIndex?: number;
-    baseIndex?: number;
-  } | null,
-): ICellRendererParams<RowObjectType> {
-  return {
-    data: data
-      ? {
-          name: "test_column",
-          ...data,
-        }
-      : undefined,
-  } as ICellRendererParams<RowObjectType>;
-}
-
-/**
- * Creates a mock ICellRendererParams object for testing renderTypeCell
- */
-function createTypeCellParams(
-  data: {
-    name?: string;
-    currentIndex?: number;
-    baseIndex?: number;
-    currentType?: string;
-    baseType?: string;
-  } | null,
-): ICellRendererParams<RowObjectType> {
-  return {
-    data: data
-      ? {
-          name: "test_column",
-          ...data,
-        }
-      : undefined,
-  } as ICellRendererParams<RowObjectType>;
-}
-
-// ============================================================================
-// renderIndexCell Tests
-// ============================================================================
-
-describe("renderIndexCell", () => {
-  test("renders currentIndex for normal rows (both base and current exist)", () => {
-    const params = createIndexCellParams({
-      baseIndex: 1,
-      currentIndex: 2,
-    });
-
-    render(<>{renderIndexCell(params)}</>);
-    expect(screen.getByText("2")).toBeInTheDocument();
-  });
-
-  test("renders currentIndex for added rows (only current exists)", () => {
-    const params = createIndexCellParams({
-      baseIndex: undefined,
-      currentIndex: 5,
-    });
-
-    render(<>{renderIndexCell(params)}</>);
-    expect(screen.getByText("5")).toBeInTheDocument();
-  });
-
-  test("renders baseIndex for removed rows (only base exists)", () => {
-    const params = createIndexCellParams({
-      baseIndex: 3,
-      currentIndex: undefined,
-    });
-
-    render(<>{renderIndexCell(params)}</>);
-    expect(screen.getByText("3")).toBeInTheDocument();
-  });
-
-  test("renders currentIndex when both indices are the same", () => {
-    const params = createIndexCellParams({
-      baseIndex: 4,
-      currentIndex: 4,
-    });
-
-    render(<>{renderIndexCell(params)}</>);
-    expect(screen.getByText("4")).toBeInTheDocument();
-  });
-
-  test("renders fallback when both indices are undefined", () => {
-    const params = createIndexCellParams({
-      baseIndex: undefined,
-      currentIndex: undefined,
-    });
-
-    render(<>{renderIndexCell(params)}</>);
-    expect(screen.getByText("-")).toBeInTheDocument();
-  });
-
-  test("returns null when data is undefined", () => {
-    const params = createIndexCellParams(null);
-
-    const { container } = render(<>{renderIndexCell(params)}</>);
-    expect(container).toBeEmptyDOMElement();
-  });
-});
-
-// ============================================================================
-// renderTypeCell Tests
-// ============================================================================
-
-describe("renderTypeCell", () => {
-  describe("type changed scenarios", () => {
-    test("renders both badges when type changed", () => {
-      const params = createTypeCellParams({
-        baseIndex: 1,
-        currentIndex: 1,
-        baseType: "INTEGER",
-        currentType: "BIGINT",
-      });
-
-      render(<>{renderTypeCell(params)}</>);
-
-      expect(screen.getByText("INTEGER")).toBeInTheDocument();
-      expect(screen.getByText("BIGINT")).toBeInTheDocument();
-    });
-
-    test("renders removed badge with correct class", () => {
-      const params = createTypeCellParams({
-        baseIndex: 1,
-        currentIndex: 1,
-        baseType: "VARCHAR",
-        currentType: "TEXT",
-      });
-
-      const { container } = render(<>{renderTypeCell(params)}</>);
-
-      const removedBadge = container.querySelector(".type-badge-removed");
-      expect(removedBadge).toBeInTheDocument();
-      expect(removedBadge).toHaveTextContent("VARCHAR");
-    });
-
-    test("renders added badge with correct class", () => {
-      const params = createTypeCellParams({
-        baseIndex: 1,
-        currentIndex: 1,
-        baseType: "VARCHAR",
-        currentType: "TEXT",
-      });
-
-      const { container } = render(<>{renderTypeCell(params)}</>);
-
-      const addedBadge = container.querySelector(".type-badge-added");
-      expect(addedBadge).toBeInTheDocument();
-      expect(addedBadge).toHaveTextContent("TEXT");
-    });
-
-    test("renders badges with title for accessibility", () => {
-      const params = createTypeCellParams({
-        baseIndex: 1,
-        currentIndex: 1,
-        baseType: "INTEGER",
-        currentType: "BIGINT",
-      });
-
-      render(<>{renderTypeCell(params)}</>);
-
-      const integerBadge = screen.getByTitle("Base type: INTEGER");
-      const bigintBadge = screen.getByTitle("Current type: BIGINT");
-
-      expect(integerBadge).toBeInTheDocument();
-      expect(bigintBadge).toBeInTheDocument();
-    });
-  });
-
-  describe("added row scenarios", () => {
-    test("renders currentType for added rows", () => {
-      const params = createTypeCellParams({
-        baseIndex: undefined,
-        currentIndex: 3,
-        baseType: undefined,
-        currentType: "VARCHAR",
-      });
-
-      render(<>{renderTypeCell(params)}</>);
-
-      expect(screen.getByText("VARCHAR")).toBeInTheDocument();
-    });
-
-    test("does not render badges for added rows", () => {
-      const params = createTypeCellParams({
-        baseIndex: undefined,
-        currentIndex: 3,
-        baseType: undefined,
-        currentType: "VARCHAR",
-      });
-
-      const { container } = render(<>{renderTypeCell(params)}</>);
-
-      expect(container.querySelector(".type-badge")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("removed row scenarios", () => {
-    test("renders baseType for removed rows", () => {
-      const params = createTypeCellParams({
-        baseIndex: 2,
-        currentIndex: undefined,
-        baseType: "DATE",
-        currentType: undefined,
-      });
-
-      render(<>{renderTypeCell(params)}</>);
-
-      expect(screen.getByText("DATE")).toBeInTheDocument();
-    });
-
-    test("does not render badges for removed rows", () => {
-      const params = createTypeCellParams({
-        baseIndex: 2,
-        currentIndex: undefined,
-        baseType: "DATE",
-        currentType: undefined,
-      });
-
-      const { container } = render(<>{renderTypeCell(params)}</>);
-
-      expect(container.querySelector(".type-badge")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("no change scenarios", () => {
-    test("renders currentType when types are the same", () => {
-      const params = createTypeCellParams({
-        baseIndex: 1,
-        currentIndex: 1,
-        baseType: "BIGINT",
-        currentType: "BIGINT",
-      });
-
-      render(<>{renderTypeCell(params)}</>);
-
-      expect(screen.getByText("BIGINT")).toBeInTheDocument();
-    });
-
-    test("does not render badges when types are the same", () => {
-      const params = createTypeCellParams({
-        baseIndex: 1,
-        currentIndex: 1,
-        baseType: "BIGINT",
-        currentType: "BIGINT",
-      });
-
-      const { container } = render(<>{renderTypeCell(params)}</>);
-
-      expect(container.querySelector(".type-badge")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("edge cases", () => {
-    test("handles undefined baseType and currentType", () => {
-      const params = createTypeCellParams({
-        baseIndex: 1,
-        currentIndex: 1,
-        baseType: undefined,
-        currentType: undefined,
-      });
-
-      const { container } = render(<>{renderTypeCell(params)}</>);
-
-      // Should render without crashing
-      expect(container.querySelector("span")).toBeInTheDocument();
-    });
-
-    test("handles empty string types", () => {
-      const params = createTypeCellParams({
-        baseIndex: 1,
-        currentIndex: 1,
-        baseType: "",
-        currentType: "VARCHAR",
-      });
-
-      const { container } = render(<>{renderTypeCell(params)}</>);
-
-      // Empty string vs non-empty should show type change with badges
-      expect(screen.getByText("VARCHAR")).toBeInTheDocument();
-      expect(container.querySelector(".type-badge")).toBeInTheDocument();
-
-      // Verify both badge types are present when baseType differs from currentType
-      const removedBadge = container.querySelector(".type-badge-removed");
-      const addedBadge = container.querySelector(".type-badge-added");
-      expect(removedBadge).toBeInTheDocument();
-      expect(addedBadge).toBeInTheDocument();
-      expect(addedBadge).toHaveTextContent("VARCHAR");
-    });
-
-    test("returns null when data is undefined", () => {
-      const params = createTypeCellParams(null);
-
-      const { container } = render(<>{renderTypeCell(params)}</>);
-      expect(container).toBeEmptyDOMElement();
-    });
-  });
-
-  // ============================================================================
-  // Performance Tests
-  // ============================================================================
-
-  describe("performance benchmarks", () => {
-    const ITERATIONS = 1000;
-
-    test("renderIndexCell function execution performance", () => {
-      const testData = Array.from({ length: ITERATIONS }, (_, i) =>
-        createIndexCellParams({
-          baseIndex: i,
-          currentIndex: i + 1,
-        }),
-      );
-
-      const startTime = performance.now();
-
-      // Measure only function execution time, not DOM rendering
-      testData.forEach((params) => {
-        renderIndexCell(params);
-      });
-
-      const endTime = performance.now();
-      const totalTime = endTime - startTime;
-      const avgTime = totalTime / ITERATIONS;
-
-      // Performance assertion: function execution should be very fast
-      expect(avgTime).toBeLessThan(1);
-    });
-
-    test("renderTypeCell function execution performance", () => {
-      const testData = Array.from({ length: ITERATIONS }, (_, i) =>
-        createTypeCellParams({
-          baseIndex: i,
-          currentIndex: i,
-          baseType: i % 2 === 0 ? "INTEGER" : "VARCHAR",
-          currentType:
-            i % 3 === 0 ? "BIGINT" : i % 2 === 0 ? "INTEGER" : "VARCHAR",
-        }),
-      );
-
-      const startTime = performance.now();
-
-      // Measure only function execution time, not DOM rendering
-      testData.forEach((params) => {
-        renderTypeCell(params);
-      });
-
-      const endTime = performance.now();
-      const totalTime = endTime - startTime;
-      const avgTime = totalTime / ITERATIONS;
-
-      // Performance assertion: function execution should be very fast
-      expect(avgTime).toBeLessThan(1);
-    });
-
-    test("MemoizedRenderIndexCell is properly memoized", () => {
-      const params = createIndexCellParams({
-        baseIndex: 1,
-        currentIndex: 2,
-      });
-
-      // First render
-      const { rerender } = render(
-        React.createElement(MemoizedRenderIndexCell, params),
-      );
-      expect(screen.getByText("2")).toBeInTheDocument();
-
-      // Re-render with same props (should not cause actual re-render due to memo)
-      rerender(React.createElement(MemoizedRenderIndexCell, params));
-      expect(screen.getByText("2")).toBeInTheDocument();
-
-      // Verify the component is memoized
-      expect(MemoizedRenderIndexCell).toHaveProperty(
-        "$$typeof",
-        Symbol.for("react.memo"),
-      );
-    });
-
-    test("MemoizedRenderTypeCell is properly memoized", () => {
-      const params = createTypeCellParams({
-        baseIndex: 1,
-        currentIndex: 1,
-        baseType: "INTEGER",
-        currentType: "BIGINT",
-      });
-
-      // First render
-      const { rerender } = render(
-        React.createElement(MemoizedRenderTypeCell, params),
-      );
-      expect(screen.getByText("INTEGER")).toBeInTheDocument();
-      expect(screen.getByText("BIGINT")).toBeInTheDocument();
-
-      // Re-render with same props (should not cause actual re-render due to memo)
-      rerender(React.createElement(MemoizedRenderTypeCell, params));
-      expect(screen.getByText("INTEGER")).toBeInTheDocument();
-      expect(screen.getByText("BIGINT")).toBeInTheDocument();
-
-      // Verify the component is memoized
-      expect(MemoizedRenderTypeCell).toHaveProperty(
-        "$$typeof",
-        Symbol.for("react.memo"),
-      );
-    });
-  });
-});