@datarecce/ui 0.1.40 → 0.2.0

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

@@ -1,468 +0,0 @@
-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,
-        }}
-      />
-    </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,
-        }}
-      />
-    </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

@@ -1,80 +0,0 @@
-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>
-  );
-};