@datarecce/ui 0.1.40 → 0.2.0

package/recce-source/js/src/components/top-k/TopKDiffResultView.tsx

@@ -1,73 +0,0 @@
-import Box from "@mui/material/Box";
-import Link from "@mui/material/Link";
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import Typography from "@mui/material/Typography";
-import { forwardRef, Ref, useState } from "react";
-import { TopKDiffParams, TopKDiffResult } from "@/lib/api/profile";
-import { TopKSummaryBarChart } from "../charts/TopKSummaryList";
-import { RunResultViewProps } from "../run/types";
-import { ScreenshotBox } from "../screenshot/ScreenshotBox";
-
-type TopKDiffResultViewProp = RunResultViewProps;
-
-const PrivateTopKDiffResultView = (
-  { run }: TopKDiffResultViewProp,
-  ref: Ref<HTMLDivElement>,
-) => {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-  const [isDisplayTopTen, setIsDisplayTopTen] = useState<boolean>(true);
-  // TODO: Implement TopKDiffResultView
-  const result = run.result as TopKDiffResult;
-  const params = run.params as TopKDiffParams;
-
-  const baseTopK = result.base;
-  const currentTopK = result.current;
-
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
-      <ScreenshotBox
-        ref={ref}
-        blockSize={"auto"}
-        backgroundColor={isDark ? "#1f2937" : "white"}
-      >
-        <Typography
-          variant="h5"
-          sx={{
-            pt: 4,
-            textAlign: "center",
-            color: isDark ? "grey.200" : "grey.600",
-          }}
-        >
-          Model {params.model}.{params.column_name}
-        </Typography>
-        <Stack direction="row" alignItems="center">
-          <Box sx={{ flex: 1 }} />
-          <TopKSummaryBarChart
-            topKDiff={result}
-            valids={currentTopK.valids || 0}
-            isDisplayTopTen={isDisplayTopTen}
-          />
-          <Box sx={{ flex: 1 }} />
-        </Stack>
-      </ScreenshotBox>
-      <Box sx={{ flex: 1 }} />
-      {(baseTopK.values.length > 10 || currentTopK.values.length > 10) && (
-        <Box sx={{ display: "flex", p: 5, justifyContent: "start" }}>
-          <Link
-            component="button"
-            onClick={() => {
-              setIsDisplayTopTen((prevState) => !prevState);
-            }}
-            sx={{ color: "iochmara.main", cursor: "pointer" }}
-          >
-            {isDisplayTopTen ? "View More Items" : "View Only Top-10"}
-          </Link>
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-export const TopKDiffResultView = forwardRef(PrivateTopKDiffResultView);

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

@@ -1,228 +0,0 @@
-/**
- * @file DataFrameColumnGroupHeader.tsx
- * @description Column group header component for DataGrid with pin/primary key controls
- *
- * Provides interactive column header with:
- * - Primary key indicator and toggle
- * - Pin/unpin column functionality
- * - Number column precision options menu
- */
-
-import Box from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import { MouseEvent, useState } from "react";
-import {
-  VscClose,
-  VscKebabVertical,
-  VscKey,
-  VscPin,
-  VscPinned,
-} from "react-icons/vsc";
-import { columnPrecisionSelectOptions } from "@/components/valuediff/shared";
-import { ColumnRenderMode, ColumnType } from "@/lib/api/types";
-
-/**
- * Props for the DataFrameColumnGroupHeader component
- */
-export interface DataFrameColumnGroupHeaderProps {
-  /** Column name to display */
-  name: string;
-  /** Column diff status: 'added', 'removed', 'modified', or empty string */
-  columnStatus: string;
-  /** Column data type for determining available options */
-  columnType: ColumnType;
-  /** List of current primary key column names */
-  primaryKeys?: string[];
-  /** Callback when primary keys change (enables PK toggle functionality) */
-  onPrimaryKeyChange?: (primaryKeys: string[]) => void;
-  /** List of currently pinned column names */
-  pinnedColumns?: string[];
-  /** Callback when pinned columns change */
-  onPinnedColumnsChange?: (pinnedColumns: string[]) => void;
-  /** Callback when column render mode changes */
-  onColumnsRenderModeChanged?: (col: Record<string, ColumnRenderMode>) => void;
-}
-
-/**
- * Column group header with interactive controls
- *
- * @description Renders a column header with:
- * - Primary key icon (VscKey) when column is a primary key
- * - Primary key add/remove toggle (when onPrimaryKeyChange is provided and column can be a PK)
- * - Pin/unpin toggle (when onPinnedColumnsChange is provided and column is not a PK)
- * - Precision options menu for number columns
- *
- * Uses exact string matching for primary keys and pinned columns.
- * Backend normalization ensures column names match user-specified keys.
- *
- * @example
- * // Query diff mode with PK toggle
- * <DataFrameColumnGroupHeader
- *   name="user_id"
- *   columnStatus=""
- *   columnType="number"
- *   primaryKeys={['user_id']}
- *   onPrimaryKeyChange={setPrimaryKeys}
- *   pinnedColumns={[]}
- *   onPinnedColumnsChange={setPinnedColumns}
- * />
- *
- * @example
- * // Value diff mode (display-only PK indicator)
- * <DataFrameColumnGroupHeader
- *   name="user_id"
- *   columnStatus="modified"
- *   columnType="number"
- *   primaryKeys={['user_id']}
- *   pinnedColumns={[]}
- *   onPinnedColumnsChange={setPinnedColumns}
- * />
- */
-export function DataFrameColumnGroupHeader({
-  name,
-  columnStatus,
-  columnType,
-  primaryKeys = [],
-  onPrimaryKeyChange,
-  pinnedColumns = [],
-  onPinnedColumnsChange,
-  onColumnsRenderModeChanged,
-}: DataFrameColumnGroupHeaderProps) {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const menuOpen = Boolean(anchorEl);
-
-  const handleMenuClick = (event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
-
-  // Skip rendering for index column
-  if (name === "index") {
-    return <></>;
-  }
-
-  // Determine if column is a primary key or pinned (exact matching)
-  const isPK = primaryKeys.includes(name);
-  const isPinned = pinnedColumns.includes(name);
-
-  // Column can be a PK only if it's not added/removed (for diff scenarios)
-  const canBePk = columnStatus !== "added" && columnStatus !== "removed";
-
-  // Build precision options for number columns
-  let selectOptions: { value: string; onClick: () => void }[] = [];
-  if (onColumnsRenderModeChanged) {
-    selectOptions = columnPrecisionSelectOptions(
-      name,
-      onColumnsRenderModeChanged,
-    );
-  }
-
-  // Primary key handlers
-  const handleRemovePk = () => {
-    if (!onPrimaryKeyChange) return;
-    const newPrimaryKeys = primaryKeys.filter((item) => item !== name);
-    onPrimaryKeyChange(newPrimaryKeys);
-  };
-
-  const handleAddPk = () => {
-    if (!onPrimaryKeyChange) return;
-    const newPrimaryKeys = [
-      ...primaryKeys.filter((item) => item !== "index"),
-      name,
-    ];
-    onPrimaryKeyChange(newPrimaryKeys);
-  };
-
-  // Pin/unpin handlers
-  const handleUnpin = () => {
-    if (!onPinnedColumnsChange) return;
-    const newPinnedColumns = pinnedColumns.filter((item) => item !== name);
-    onPinnedColumnsChange(newPinnedColumns);
-  };
-
-  const handlePin = () => {
-    if (!onPinnedColumnsChange) return;
-    const newPinnedColumns = [...pinnedColumns, name];
-    onPinnedColumnsChange(newPinnedColumns);
-  };
-
-  return (
-    <Box
-      sx={{ display: "flex", alignItems: "center", gap: "10px", width: "100%" }}
-      className="grid-header"
-    >
-      {/* Primary key icon */}
-      {isPK && <VscKey />}
-
-      {/* Column name */}
-      <Box
-        sx={{
-          flex: 1,
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-        }}
-      >
-        {name}
-      </Box>
-
-      {/* Primary key toggle (only when onPrimaryKeyChange is provided) */}
-      {canBePk && onPrimaryKeyChange && (
-        <Box
-          component={isPK ? VscClose : VscKey}
-          className={isPK ? "close-icon" : "key-icon"}
-          sx={{
-            display: isPK ? "block" : "none",
-            cursor: "pointer",
-          }}
-          onClick={isPK ? handleRemovePk : handleAddPk}
-        />
-      )}
-
-      {/* Pin/unpin toggle (only for non-PK columns when callback is provided) */}
-      {!isPK && onPinnedColumnsChange && (
-        <Box
-          component={isPinned ? VscPinned : VscPin}
-          className={isPinned ? "unpin-icon" : "pin-icon"}
-          sx={{
-            display: isPinned ? "block" : "none",
-            cursor: "pointer",
-          }}
-          onClick={isPinned ? handleUnpin : handlePin}
-        />
-      )}
-
-      {/* Precision menu for number columns (only for non-PK columns) */}
-      {!isPK && columnType === "number" && selectOptions.length > 0 && (
-        <>
-          <IconButton
-            aria-label="Options"
-            size="small"
-            className="!size-4 !min-w-4"
-            onClick={handleMenuClick}
-          >
-            <VscKebabVertical />
-          </IconButton>
-          <Menu anchorEl={anchorEl} open={menuOpen} onClose={handleMenuClose}>
-            {selectOptions.map((o) => (
-              <MenuItem
-                key={o.value}
-                onClick={() => {
-                  o.onClick();
-                  handleMenuClose();
-                }}
-              >
-                {o.value}
-              </MenuItem>
-            ))}
-          </Menu>
-        </>
-      )}
-    </Box>
-  );
-}

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

@@ -1,113 +0,0 @@
-import Box from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import { MouseEvent, useState } from "react";
-import { PiDotsThreeVertical } from "react-icons/pi";
-import { VscPin, VscPinned } from "react-icons/vsc";
-import { columnPrecisionSelectOptions } from "@/components/valuediff/shared";
-import { ColumnRenderMode, ColumnType } from "@/lib/api/types";
-
-/**
- * Props for the DataFrameColumnHeader component
- */
-export interface DataFrameColumnHeaderProps {
-  /** Column name to display */
-  name: string;
-  /** Column data type for determining available options */
-  columnType: ColumnType;
-  /** List of currently pinned column names */
-  pinnedColumns?: string[];
-  /** Callback when pinned columns change */
-  onPinnedColumnsChange?: (pinnedColumns: string[]) => void;
-  /** Callback when column render mode changes */
-  onColumnsRenderModeChanged?: (col: Record<string, ColumnRenderMode>) => void;
-}
-
-export function DataFrameColumnHeader({
-  name,
-  pinnedColumns = [],
-  onPinnedColumnsChange = () => {
-    return void 0;
-  },
-  columnType,
-  onColumnsRenderModeChanged,
-}: DataFrameColumnHeaderProps) {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const menuOpen = Boolean(anchorEl);
-
-  const handleMenuClick = (event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
-
-  let selectOptions: { value: string; onClick: () => void }[] = [];
-  if (onColumnsRenderModeChanged) {
-    selectOptions = columnPrecisionSelectOptions(
-      name,
-      onColumnsRenderModeChanged,
-    );
-  }
-
-  const isPinned = pinnedColumns.includes(name);
-
-  const handleUnpin = () => {
-    const newPinnedColumns = pinnedColumns.filter((item) => item !== name);
-    onPinnedColumnsChange(newPinnedColumns);
-  };
-
-  const handlePin = () => {
-    const newPinnedColumns = [...pinnedColumns, name];
-    onPinnedColumnsChange(newPinnedColumns);
-  };
-
-  return (
-    <Box
-      sx={{ display: "flex", alignItems: "center", width: "100%" }}
-      className="grid-header"
-    >
-      <Box sx={{ flex: 1 }}>{name}</Box>
-
-      <Box
-        component={isPinned ? VscPinned : VscPin}
-        className={isPinned ? "unpin-icon" : "pin-icon"}
-        sx={{
-          display: isPinned ? "block" : "none",
-          cursor: "pointer",
-        }}
-        onClick={isPinned ? handleUnpin : handlePin}
-      />
-      {columnType === "number" && (
-        <>
-          <IconButton
-            aria-label="Options"
-            size="small"
-            className="size-6!"
-            sx={{
-              p: 0,
-            }}
-            onClick={handleMenuClick}
-          >
-            <PiDotsThreeVertical />
-          </IconButton>
-          <Menu anchorEl={anchorEl} open={menuOpen} onClose={handleMenuClose}>
-            {selectOptions.map((o) => (
-              <MenuItem
-                key={o.value}
-                onClick={() => {
-                  o.onClick();
-                  handleMenuClose();
-                }}
-              >
-                {o.value}
-              </MenuItem>
-            ))}
-          </Menu>
-        </>
-      )}
-    </Box>
-  );
-}

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

@@ -1,72 +0,0 @@
-/**
- * @file defaultRenderCell.tsx
- * @description Default cell renderer for DataGrid columns
- *
- * Renders a cell value with optional column type formatting and gray-out styling.
- * Used for standard (non-diff) cell rendering in data grids.
- *
- * NOTE: Imports directly from gridUtils.ts to avoid circular dependency
- * with toDiffColumn.tsx which imports this component.
- */
-
-import Typography from "@mui/material/Typography";
-import type { ColDef, ICellRendererParams } from "ag-grid-community";
-import { ColumnRenderMode, ColumnType, RowObjectType } from "@/lib/api/types";
-// Import directly from gridUtils to avoid circular dependency
-import { toRenderedValue } from "@/lib/dataGrid/shared/gridUtils";
-
-/**
- * Custom context data for Recce columns
- * Stored in colDef.context to avoid AG Grid validation warnings
- */
-export interface RecceColumnContext {
-  columnType?: ColumnType;
-  columnRenderMode?: ColumnRenderMode;
-}
-
-/**
- * Extended column definition with context metadata
- * Uses context property for custom data per AG Grid best practices
- */
-export type ColDefWithMetadata<TData = RowObjectType> = ColDef<TData> & {
-  context?: RecceColumnContext;
-};
-
-/**
- * Default cell renderer for data grid columns
- *
- * @description Extracts cell value from the row and renders it with appropriate
- * formatting based on the column type and render mode. Supports numeric
- * formatting (raw, integer, percent) and handles null/empty values with gray styling.
- *
- * @param params - AG Grid cell renderer params containing row data and column definition
- * @returns Rendered cell content as a Text component
- */
-export const defaultRenderCell = (
-  params: ICellRendererParams<RowObjectType>,
-) => {
-  const colDef = params.colDef as ColDefWithMetadata;
-  const columnType = colDef?.context?.columnType;
-  const columnRenderMode = colDef?.context?.columnRenderMode;
-  const fieldName = colDef?.field ?? "";
-
-  if (!params.data) {
-    return null;
-  }
-
-  const [renderedValue, grayOut] = toRenderedValue(
-    params.data,
-    fieldName,
-    columnType,
-    columnRenderMode,
-  );
-
-  return (
-    <Typography
-      component="span"
-      style={{ color: grayOut ? "gray" : "inherit" }}
-    >
-      {renderedValue}
-    </Typography>
-  );
-};

package/recce-source/js/src/components/ui/dataGrid/index.ts

@@ -1,23 +0,0 @@
-/**
- * @file index.ts
- * @description Barrel export for DataGrid UI components
- *
- * NOTE: valueDiffCells.tsx is intentionally NOT exported here.
- * Those components use hooks (useRecceActionContext, useRecceInstanceContext)
- * that pull in heavy dependencies. Import them directly from
- * @/components/ui/dataGrid/valueDiffCells when needed.
- */
-
-export {
-  DataFrameColumnGroupHeader,
-  type DataFrameColumnGroupHeaderProps,
-} from "./DataFrameColumnGroupHeader";
-export {
-  DataFrameColumnHeader,
-  type DataFrameColumnHeaderProps,
-} from "./DataFrameColumnHeader";
-export {
-  type ColDefWithMetadata,
-  defaultRenderCell,
-} from "./defaultRenderCell";
-export { asNumber, inlineRenderCell } from "./inlineRenderCell";