@datarecce/ui 0.1.30 → 0.1.32

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

@@ -0,0 +1,470 @@
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import { ForwardedRef, forwardRef, Ref, useMemo } from "react";
+import {
+  QueryDiffViewOptions,
+  QueryPreviewChangeParams,
+} from "@/lib/api/adhocQuery";
+
+import "./styles.css";
+import { ColumnRenderMode, Run } from "@/lib/api/types";
+import {
+  createDataGrid,
+  DiffGridOptions,
+} from "@/lib/dataGrid/dataGridFactory";
+import {
+  type DataGridHandle,
+  EmptyRowsRenderer,
+  ScreenshotDataGrid,
+} from "../data-grid/ScreenshotDataGrid";
+import { RunToolbar } from "../run/RunToolbar";
+import { RunResultViewProps } from "../run/types";
+import { ChangedOnlyCheckbox } from "./ChangedOnlyCheckbox";
+import { DiffDisplayModeSwitch } from "./ToggleSwitch";
+
+export interface QueryDiffResultViewProps
+  extends RunResultViewProps<QueryDiffViewOptions> {
+  onAddToChecklist?: (run: Run) => void;
+  baseTitle?: string;
+  currentTitle?: string;
+}
+
+const PrivateQueryDiffResultView = (
+  {
+    run,
+    onAddToChecklist,
+    viewOptions,
+    onViewOptionsChanged,
+    baseTitle,
+    currentTitle,
+  }: QueryDiffResultViewProps,
+
+  ref: Ref<DataGridHandle>,
+) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const primaryKeys = useMemo(
+    () => viewOptions?.primary_keys ?? [],
+    [viewOptions],
+  );
+  const changedOnly = useMemo(
+    () => viewOptions?.changed_only ?? false,
+    [viewOptions],
+  );
+  const pinnedColumns = useMemo(
+    () => viewOptions?.pinned_columns ?? [],
+    [viewOptions],
+  );
+  const displayMode = useMemo(
+    () => viewOptions?.display_mode ?? "inline",
+    [viewOptions],
+  );
+  const columnsRenderMode = useMemo(
+    () => viewOptions?.columnsRenderMode ?? {},
+    [viewOptions],
+  );
+  if (run.type !== "query_diff") {
+    throw new Error("QueryDiffResult view should be rendered as query_diff");
+  }
+
+  const gridData = useMemo(() => {
+    const onColumnsRenderModeChanged = (
+      cols: Record<string, ColumnRenderMode>,
+    ) => {
+      const newRenderModes = {
+        ...(viewOptions?.columnsRenderMode ?? {}),
+        ...cols,
+      };
+      if (onViewOptionsChanged) {
+        onViewOptionsChanged({
+          ...viewOptions,
+          columnsRenderMode: newRenderModes,
+        });
+      }
+    };
+
+    const handlePrimaryKeyChanged = (primaryKeys: string[]) => {
+      if (onViewOptionsChanged) {
+        onViewOptionsChanged({
+          ...viewOptions,
+          primary_keys: primaryKeys,
+        });
+      }
+    };
+
+    const handlePinnedColumnsChanged = (pinnedColumns: string[]) => {
+      if (onViewOptionsChanged) {
+        onViewOptionsChanged({
+          ...viewOptions,
+          pinned_columns: pinnedColumns,
+        });
+      }
+    };
+    const options: DiffGridOptions = {
+      changedOnly,
+      onPrimaryKeyChange: handlePrimaryKeyChanged,
+      pinnedColumns,
+      onPinnedColumnsChange: handlePinnedColumnsChanged,
+      columnsRenderMode,
+      onColumnsRenderModeChanged,
+      baseTitle,
+      currentTitle,
+      displayMode,
+    };
+
+    return createDataGrid(run, options) ?? { columns: [], rows: [] };
+  }, [
+    run,
+    viewOptions,
+    changedOnly,
+    pinnedColumns,
+    displayMode,
+    onViewOptionsChanged,
+    baseTitle,
+    currentTitle,
+    columnsRenderMode,
+  ]);
+
+  const warningPKey = useMemo(() => {
+    const pkName = primaryKeys.join(", ");
+
+    if (gridData.invalidPKeyBase && gridData.invalidPKeyCurrent) {
+      return `Warning: The primary key '${pkName}' is not unique in the base and current environments`;
+    } else if (gridData.invalidPKeyBase) {
+      return `Warning: The primary key '${pkName}' is not unique in the base environment`;
+    } else if (gridData.invalidPKeyCurrent) {
+      return `Warning: The primary key '${pkName}' is not unique in the current environment`;
+    }
+  }, [gridData.invalidPKeyBase, gridData.invalidPKeyCurrent, primaryKeys]);
+
+  const limit = run.result?.current?.limit ?? 0;
+  const warningLimit =
+    limit > 0 && (run.result?.current?.more || run.result?.base?.more)
+      ? `Warning: Displayed results are limited to ${limit.toLocaleString()} records. To ensure complete data retrieval, consider applying a LIMIT or WHERE clause to constrain the result set.`
+      : null;
+
+  const warnings: string[] = [];
+  if (warningPKey) {
+    warnings.push(warningPKey);
+  }
+  if (warningLimit) {
+    warnings.push(warningLimit);
+  }
+
+  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}
+        viewOptions={viewOptions}
+        onViewOptionsChanged={onViewOptionsChanged}
+        warnings={warnings}
+      >
+        <DiffDisplayModeSwitch
+          displayMode={displayMode}
+          onDisplayModeChanged={(displayMode) => {
+            if (onViewOptionsChanged) {
+              onViewOptionsChanged({
+                ...viewOptions,
+                display_mode: displayMode,
+              });
+            }
+          }}
+        />
+
+        <ChangedOnlyCheckbox
+          changedOnly={viewOptions?.changed_only}
+          onChange={() => {
+            const changedOnly = !viewOptions?.changed_only;
+            if (onViewOptionsChanged) {
+              onViewOptionsChanged({
+                ...viewOptions,
+                changed_only: changedOnly,
+              });
+            }
+          }}
+        />
+      </RunToolbar>
+      <ScreenshotDataGrid
+        ref={ref}
+        style={{ blockSize: "auto", maxHeight: "100%", overflow: "auto" }}
+        columns={gridData.columns}
+        rows={gridData.rows}
+        renderers={{
+          noRowsFallback: (
+            <EmptyRowsRenderer emptyMessage="No mismatched rows" />
+          ),
+        }}
+        defaultColumnOptions={{
+          resizable: true,
+          maxWidth: 800,
+          minWidth: 35,
+        }}
+        className="rdg-light"
+      />
+    </Box>
+  );
+};
+
+const PrivateQueryDiffJoinResultView = (
+  {
+    run,
+    viewOptions,
+    onViewOptionsChanged,
+    baseTitle,
+    currentTitle,
+  }: QueryDiffResultViewProps,
+  ref: Ref<DataGridHandle>,
+) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+  if (run.type !== "query_diff") {
+    throw new Error("QueryDiffResult view should be rendered as query_diff");
+  }
+  const changedOnly = useMemo(
+    () => viewOptions?.changed_only ?? false,
+    [viewOptions],
+  );
+  const pinnedColumns = useMemo(
+    () => viewOptions?.pinned_columns ?? [],
+    [viewOptions],
+  );
+  const displayMode = useMemo(
+    () => viewOptions?.display_mode ?? "inline",
+    [viewOptions],
+  );
+  const columnsRenderMode = useMemo(
+    () => 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, {
+        changedOnly,
+        pinnedColumns,
+        onPinnedColumnsChange: handlePinnedColumnsChanged,
+        baseTitle,
+        currentTitle,
+        displayMode,
+        columnsRenderMode,
+        onColumnsRenderModeChanged,
+      }) ?? { columns: [], rows: [] }
+    );
+  }, [
+    run,
+    viewOptions,
+    changedOnly,
+    pinnedColumns,
+    displayMode,
+    onViewOptionsChanged,
+    baseTitle,
+    currentTitle,
+    columnsRenderMode,
+  ]);
+
+  const limit = run.result?.diff?.limit ?? 0;
+  const warningLimit =
+    limit > 0 && run.result?.diff?.more
+      ? `Warning: Displayed results are limited to ${limit.toLocaleString()} records. To ensure complete data retrieval, consider applying a LIMIT or WHERE clause to constrain the result set.`
+      : null;
+
+  const warnings: string[] = [];
+  if (warningLimit) {
+    warnings.push(warningLimit);
+  }
+
+  if (gridData.columns.length === 0) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        No data
+      </Box>
+    );
+  }
+
+  if (changedOnly && gridData.rows.length === 0) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          bgcolor: isDark ? "grey.900" : "grey.50",
+          height: "100%",
+        }}
+      >
+        <RunToolbar
+          run={run}
+          viewOptions={viewOptions}
+          onViewOptionsChanged={onViewOptionsChanged}
+          warnings={warnings}
+        />
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+          }}
+        >
+          No change
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: isDark ? "grey.900" : "grey.50",
+        height: "100%",
+      }}
+    >
+      <RunToolbar
+        run={run}
+        viewOptions={viewOptions}
+        onViewOptionsChanged={onViewOptionsChanged}
+        warnings={warnings}
+      >
+        <DiffDisplayModeSwitch
+          displayMode={displayMode}
+          onDisplayModeChanged={(displayMode) => {
+            if (onViewOptionsChanged) {
+              onViewOptionsChanged({
+                ...viewOptions,
+                display_mode: displayMode,
+              });
+            }
+          }}
+        />
+
+        <ChangedOnlyCheckbox
+          changedOnly={viewOptions?.changed_only}
+          onChange={() => {
+            const changedOnly = !viewOptions?.changed_only;
+            if (onViewOptionsChanged) {
+              onViewOptionsChanged({
+                ...viewOptions,
+                changed_only: changedOnly,
+              });
+            }
+          }}
+        />
+      </RunToolbar>
+      <ScreenshotDataGrid
+        ref={ref}
+        style={{ blockSize: "auto", maxHeight: "100%", overflow: "auto" }}
+        columns={gridData.columns}
+        rows={gridData.rows}
+        renderers={{
+          noRowsFallback: (
+            <EmptyRowsRenderer emptyMessage="No mismatched rows" />
+          ),
+        }}
+        defaultColumnOptions={{
+          resizable: true,
+          maxWidth: 800,
+          minWidth: 35,
+        }}
+        className="rdg-light"
+      />
+    </Box>
+  );
+};
+
+// Create the forwardRef components here, at module level
+const QueryDiffResultViewWithRef = forwardRef(PrivateQueryDiffResultView);
+const QueryDiffJoinResultViewWithRef = forwardRef(
+  PrivateQueryDiffJoinResultView,
+);
+
+export const QueryDiffResultView = forwardRef(
+  (props: QueryDiffResultViewProps, ref: ForwardedRef<DataGridHandle>) => {
+    let baseTitle;
+    let currentTitle;
+    if (
+      props.run.params &&
+      (props.run.params as QueryPreviewChangeParams).current_model
+    ) {
+      // Configure the base and current titles under Sandbox Editor
+      baseTitle = "Original";
+      currentTitle = "Editor";
+    }
+    if (
+      props.run.result &&
+      "diff" in props.run.result &&
+      props.run.result.diff != null
+    ) {
+      return (
+        <QueryDiffJoinResultViewWithRef
+          {...props}
+          ref={ref}
+          baseTitle={baseTitle}
+          currentTitle={currentTitle}
+        />
+      );
+    } else {
+      return (
+        <QueryDiffResultViewWithRef
+          {...props}
+          ref={ref}
+          baseTitle={baseTitle}
+          currentTitle={currentTitle}
+        />
+      );
+    }
+  },
+);

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

@@ -0,0 +1,80 @@
+import Box, { type BoxProps } from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import MuiTooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { useMemo } from "react";
+import { PiInfo } from "react-icons/pi";
+import { NodeColumnData } from "@/lib/api/info";
+import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
+import { DropdownValuesInput } from "@/utils/DropdownValuesInput";
+
+interface QueryFormProps extends BoxProps {
+  defaultPrimaryKeys: string[] | undefined;
+  onPrimaryKeysChange: (primaryKeys: string[]) => void;
+}
+
+export const QueryForm = ({
+  defaultPrimaryKeys,
+  onPrimaryKeysChange,
+  ...props
+}: QueryFormProps) => {
+  const { lineageGraph, isActionAvailable } = useLineageGraphContext();
+
+  const labelInfo =
+    "Provide a primary key to perform query diff in data warehouse and only return changed rows.";
+
+  const availableColumns = useMemo(() => {
+    if (!lineageGraph) {
+      return [];
+    }
+    const columnSet = new Set<string>();
+    for (const modelName in lineageGraph.nodes) {
+      const model = lineageGraph.nodes[modelName];
+      const combinedColumns: Record<string, NodeColumnData | undefined> = {
+        ...(model.data.data.base?.columns ?? {}),
+        ...(model.data.data.current?.columns ?? {}),
+      };
+
+      Object.entries(combinedColumns).forEach(([columnName, col]) => {
+        if (col?.unique) {
+          columnSet.add(columnName);
+        }
+      });
+    }
+    return Array.from(columnSet).sort();
+  }, [lineageGraph]);
+
+  return (
+    <Box sx={{ display: "flex" }} {...props}>
+      <Stack spacing={0} sx={{ m: "0 0.5rem" }}>
+        <Stack direction="row" alignItems="center" spacing={0.5}>
+          <Typography
+            component="label"
+            sx={{ fontSize: "0.625rem", color: "text.secondary" }}
+          >
+            Diff with Primary Key(s) (suggested)
+          </Typography>
+          <MuiTooltip title={labelInfo} placement="bottom-end">
+            <Box
+              component="span"
+              sx={{ display: "flex", color: "grey.600", cursor: "help" }}
+            >
+              <PiInfo fontSize="0.75rem" />
+            </Box>
+          </MuiTooltip>
+        </Stack>
+        <DropdownValuesInput
+          className="no-track-pii-safe"
+          unitName="key"
+          defaultValues={defaultPrimaryKeys}
+          suggestionList={availableColumns}
+          onValuesChange={onPrimaryKeysChange}
+          size="2xs"
+          width={"240px"}
+          placeholder="Select or type to add keys"
+          disabled={!isActionAvailable("query_diff_with_primary_key")}
+        />
+      </Stack>
+    </Box>
+  );
+};