@datarecce/ui 0.1.30 → 0.1.31

package/recce-source/js/src/components/profile/ProfileDiffForm.tsx

@@ -0,0 +1,134 @@
+import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useEffect, useState } from "react";
+import ReactSelect, {
+  type CSSObjectWithLabel,
+  type MultiValue,
+} from "react-select";
+import useModelColumns from "@/lib/hooks/useModelColumns";
+import { RunFormProps } from "../run/types";
+
+interface ColumnOption {
+  label: string;
+  value: string;
+}
+
+export interface ProfileDiffFormParams {
+  model: string;
+  primary_key?: string | (string | undefined)[];
+  columns?: string[];
+}
+
+type ProfileDiffFormProp = RunFormProps<ProfileDiffFormParams>;
+
+export function ProfileDiffForm({
+  params,
+  onParamsChanged,
+  setIsReadyToExecute,
+}: ProfileDiffFormProp) {
+  const [allColumns, setAllColumns] = useState<boolean>(
+    !params.columns || params.columns.length === 0,
+  );
+
+  const model = params.model;
+
+  const { columns, isLoading, error } = useModelColumns(params.model);
+
+  useEffect(() => {
+    setIsReadyToExecute(!!model);
+  }, [model, setIsReadyToExecute]);
+
+  const columnNames = columns.map((c) => c.name);
+
+  if (isLoading) {
+    return <Box>Loading...</Box>;
+  }
+
+  if (columnNames.length === 0 || error) {
+    return (
+      <Box>
+        Error: Please provide the &apos;catalog.json&apos; to list column
+        candidates
+      </Box>
+    );
+  }
+
+  return (
+    <Stack spacing={5} sx={{ m: "8px 24px", pb: "200px" }}>
+      <Box>
+        <Typography variant="body2" sx={{ mb: 1 }}>
+          Model
+        </Typography>
+        <TextField
+          fullWidth
+          size="small"
+          value={params.model}
+          slotProps={{ input: { readOnly: true } }}
+        />
+      </Box>
+      <Box>
+        <Typography variant="body2" sx={{ mb: 1 }}>
+          Columns
+        </Typography>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={allColumns}
+              onChange={(e) => {
+                setAllColumns(e.target.checked);
+                onParamsChanged({
+                  ...params,
+                  columns: undefined,
+                });
+              }}
+              size="small"
+            />
+          }
+          label="All columns"
+          sx={{ mb: "10px" }}
+        />
+        {!allColumns && (
+          <ReactSelect
+            isMulti
+            className="no-track-pii-safe"
+            closeMenuOnSelect={false}
+            options={columnNames.map((c) => ({ label: c, value: c }))}
+            value={(params.columns ?? []).map((c) => ({
+              label: c,
+              value: c,
+            }))}
+            onChange={(newValue: MultiValue<ColumnOption>) => {
+              let cols: string[] | undefined;
+              const newCols = Array.isArray(newValue)
+                ? newValue.map((v) => v.value)
+                : [];
+              if (newCols.length === 0) {
+                cols = undefined;
+              } else {
+                cols = newCols;
+              }
+              onParamsChanged({
+                ...params,
+                columns: cols,
+              });
+            }}
+            styles={{
+              container: (base: CSSObjectWithLabel) => ({
+                ...base,
+                width: "100%",
+              }),
+              control: (base: CSSObjectWithLabel) => ({
+                ...base,
+                minHeight: "40px",
+              }),
+            }}
+          />
+        )}
+      </Box>
+    </Stack>
+  );
+}

package/recce-source/js/src/components/profile/ProfileDiffResultView.tsx

@@ -0,0 +1,245 @@
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import { forwardRef, Ref, useMemo } from "react";
+import { ProfileDiffViewOptions } from "@/lib/api/profile";
+import {
+  ColumnRenderMode,
+  isProfileDiffRun,
+  isProfileRun,
+} from "@/lib/api/types";
+import { createDataGrid } from "@/lib/dataGrid/dataGridFactory";
+import {
+  type DataGridHandle,
+  ScreenshotDataGrid,
+} from "../data-grid/ScreenshotDataGrid";
+import { DiffDisplayModeSwitch } from "../query/ToggleSwitch";
+import { RunToolbar } from "../run/RunToolbar";
+import { RunResultViewProps } from "../run/types";
+
+type ProfileDiffResultViewProp = RunResultViewProps<ProfileDiffViewOptions>;
+
+const PrivateProfileDiffResultView = (
+  { run, viewOptions, onViewOptionsChanged }: ProfileDiffResultViewProp,
+
+  ref: Ref<DataGridHandle>,
+) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  if (!isProfileDiffRun(run)) {
+    throw new Error("Only run type profile_diff is supported");
+  }
+  const pinnedColumns = useMemo(
+    () => viewOptions?.pinned_columns ?? [],
+    [viewOptions],
+  );
+  const displayMode = useMemo(
+    () => viewOptions?.display_mode ?? "inline",
+    [viewOptions],
+  );
+  // Default proportion columns to percentage display
+  const columnsRenderMode = useMemo(
+    () => ({
+      distinct_proportion: "percent" as ColumnRenderMode,
+      not_null_proportion: "percent" as ColumnRenderMode,
+      ...viewOptions?.columnsRenderMode,
+    }),
+    [viewOptions],
+  );
+
+  const gridData = useMemo(() => {
+    const onColumnsRenderModeChanged = (
+      cols: Record<string, ColumnRenderMode>,
+    ) => {
+      const newRenderModes = {
+        ...(viewOptions?.columnsRenderMode ?? {}),
+        ...cols,
+      };
+      if (onViewOptionsChanged) {
+        onViewOptionsChanged({
+          ...viewOptions,
+          columnsRenderMode: newRenderModes,
+        });
+      }
+    };
+
+    const handlePinnedColumnsChanged = (pinnedColumns: string[]) => {
+      if (onViewOptionsChanged) {
+        onViewOptionsChanged({
+          ...viewOptions,
+          pinned_columns: pinnedColumns,
+        });
+      }
+    };
+
+    return (
+      createDataGrid(run, {
+        pinnedColumns,
+        onPinnedColumnsChange: handlePinnedColumnsChanged,
+        displayMode,
+        columnsRenderMode,
+        onColumnsRenderModeChanged,
+      }) ?? { columns: [], rows: [] }
+    );
+  }, [
+    run,
+    pinnedColumns,
+    displayMode,
+    viewOptions,
+    onViewOptionsChanged,
+    columnsRenderMode,
+  ]);
+
+  if (gridData.columns.length === 0) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        No data
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: isDark ? "grey.900" : "grey.50",
+        height: "100%",
+      }}
+    >
+      <RunToolbar run={run}>
+        <DiffDisplayModeSwitch
+          displayMode={displayMode}
+          onDisplayModeChanged={(displayMode) => {
+            if (onViewOptionsChanged) {
+              onViewOptionsChanged({
+                ...viewOptions,
+                display_mode: displayMode,
+              });
+            }
+          }}
+        />
+      </RunToolbar>
+      <ScreenshotDataGrid
+        ref={ref}
+        style={{ blockSize: "auto", maxHeight: "100%", overflow: "auto" }}
+        columns={gridData.columns}
+        rows={gridData.rows}
+        defaultColumnOptions={{ resizable: true, maxWidth: 800, minWidth: 35 }}
+        className="rdg-light"
+      />
+    </Box>
+  );
+};
+
+const PrivateProfileResultView = (
+  { run, viewOptions, onViewOptionsChanged }: ProfileDiffResultViewProp,
+
+  ref: Ref<DataGridHandle>,
+) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  if (!isProfileRun(run)) {
+    throw new Error("Only run type profile_diff is supported");
+  }
+  const pinnedColumns = useMemo(
+    () => viewOptions?.pinned_columns ?? [],
+    [viewOptions],
+  );
+  // Default proportion columns to percentage display
+  const columnsRenderMode = useMemo(
+    () => ({
+      distinct_proportion: "percent" as ColumnRenderMode,
+      not_null_proportion: "percent" as ColumnRenderMode,
+      ...viewOptions?.columnsRenderMode,
+    }),
+    [viewOptions],
+  );
+
+  const gridData = useMemo(() => {
+    const onColumnsRenderModeChanged = (
+      cols: Record<string, ColumnRenderMode>,
+    ) => {
+      const newRenderModes = {
+        ...(viewOptions?.columnsRenderMode ?? {}),
+        ...cols,
+      };
+      if (onViewOptionsChanged) {
+        onViewOptionsChanged({
+          ...viewOptions,
+          columnsRenderMode: newRenderModes,
+        });
+      }
+    };
+
+    const handlePinnedColumnsChanged = (pinnedColumns: string[]) => {
+      if (onViewOptionsChanged) {
+        onViewOptionsChanged({
+          ...viewOptions,
+          pinned_columns: pinnedColumns,
+        });
+      }
+    };
+
+    return (
+      createDataGrid(run, {
+        pinnedColumns,
+        onPinnedColumnsChange: handlePinnedColumnsChanged,
+        columnsRenderMode,
+        onColumnsRenderModeChanged,
+      }) ?? { columns: [], rows: [] }
+    );
+  }, [
+    run,
+    pinnedColumns,
+    viewOptions,
+    onViewOptionsChanged,
+    columnsRenderMode,
+  ]);
+
+  if (gridData.columns.length === 0) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        No data
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: isDark ? "grey.900" : "grey.50",
+        height: "100%",
+      }}
+    >
+      <ScreenshotDataGrid
+        ref={ref}
+        style={{ blockSize: "auto", maxHeight: "100%", overflow: "auto" }}
+        columns={gridData.columns}
+        rows={gridData.rows}
+        defaultColumnOptions={{ resizable: true, maxWidth: 800, minWidth: 35 }}
+        className="rdg-light"
+      />
+    </Box>
+  );
+};
+
+export const ProfileDiffResultView = forwardRef(PrivateProfileDiffResultView);
+export const ProfileResultView = forwardRef(PrivateProfileResultView);

package/recce-source/js/src/components/query/ChangedOnlyCheckbox.tsx

@@ -0,0 +1,29 @@
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+
+interface ChangedOnlyCheckboxProps {
+  changedOnly?: boolean;
+  onChange: () => void;
+}
+export const ChangedOnlyCheckbox = ({
+  changedOnly,
+  onChange,
+}: ChangedOnlyCheckboxProps) => {
+  return (
+    <FormControlLabel
+      control={
+        <Checkbox
+          checked={changedOnly ?? false}
+          onChange={() => {
+            onChange();
+          }}
+          size="small"
+        />
+      }
+      label="Changed only"
+      slotProps={{
+        typography: { variant: "body2" },
+      }}
+    />
+  );
+};

package/recce-source/js/src/components/query/DiffText.tsx

@@ -0,0 +1,120 @@
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import { ReactNode, useState } from "react";
+import { PiCopy } from "react-icons/pi";
+import { useCopyToClipboard } from "usehooks-ts";
+import { colors } from "@/components/ui/mui-theme";
+import { useClipBoardToast } from "@/lib/hooks/useClipBoardToast";
+
+interface DiffTextProps {
+  value: string;
+  colorPalette: "red" | "green";
+  grayOut?: boolean;
+  noCopy?: boolean;
+  fontSize?: string;
+}
+
+export const DiffText = ({
+  value,
+  colorPalette,
+  grayOut,
+  noCopy,
+  fontSize,
+}: DiffTextProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Get the color values from the theme colors
+  const textColor = colors[colorPalette][800];
+  const bgColor = colors[colorPalette][100];
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        p: "2px 5px",
+        minWidth: "30px",
+        maxWidth: "200px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        color: textColor,
+        bgcolor: bgColor,
+        alignItems: "center",
+        gap: "2px",
+        borderRadius: "8px",
+        fontSize,
+        flexShrink: noCopy ? 0 : "inherit",
+      }}
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+    >
+      <Box
+        sx={{
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          color: grayOut ? "gray" : "inherit",
+        }}
+      >
+        {value}
+      </Box>
+
+      <CopyControl
+        value={value}
+        noCopy={noCopy}
+        grayOut={grayOut}
+        isHovered={isHovered}
+      />
+    </Box>
+  );
+};
+
+interface CopyControlProps {
+  value: string;
+  grayOut?: boolean;
+  noCopy?: boolean;
+  isHovered: boolean;
+}
+
+function CopyControl({
+  value,
+  noCopy,
+  grayOut,
+  isHovered,
+}: CopyControlProps): ReactNode {
+  const [, copyToClipboard] = useCopyToClipboard();
+  const { successToast } = useClipBoardToast();
+
+  if (noCopy || grayOut || !isHovered) {
+    return <></>;
+  }
+
+  const handleCopy = () => {
+    copyToClipboard(value);
+    successToast(`${value} copied`);
+  };
+
+  return (
+    <Tooltip title="Copy Value">
+      <IconButton
+        aria-label="Copy"
+        size="small"
+        onClick={handleCopy}
+        sx={{
+          minWidth: "0.625rem",
+          height: "0.625rem",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          p: 0,
+          color: "inherit",
+        }}
+      >
+        <PiCopy size="0.625rem" />
+      </IconButton>
+    </Tooltip>
+  );
+}