@datarecce/ui 0.1.40 → 0.2.0

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

@@ -1,282 +0,0 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Stack from "@mui/material/Stack";
-import MuiSwitch from "@mui/material/Switch";
-import MuiTooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import { useMutation } from "@tanstack/react-query";
-import React, { useMemo } from "react";
-import { PiInfoFill } from "react-icons/pi";
-import SetupConnectionPopover from "@/components/app/SetupConnectionPopover";
-import HistoryToggle from "@/components/shared/HistoryToggle";
-import { RECCE_SUPPORT_CALENDAR_URL } from "@/constants/urls";
-import {
-  QueryParams,
-  submitQuery,
-  submitQueryBase,
-  submitQueryDiff,
-} from "@/lib/api/adhocQuery";
-import { SubmitOptions, waitRun } from "@/lib/api/runs";
-import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
-import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
-import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
-import { useRecceInstanceContext } from "@/lib/hooks/RecceInstanceContext";
-import {
-  defaultSqlQuery,
-  useRecceQueryContext,
-} from "@/lib/hooks/RecceQueryContext";
-import { BaseEnvironmentSetupGuide } from "../lineage/SingleEnvironmentQueryView";
-import { QueryForm } from "./QueryForm";
-import SetupConnectionGuide from "./SetupConnectionGuide";
-import SqlEditor, { DualSqlEditor } from "./SqlEditor";
-
-const QueryModeToggle = () => {
-  const { isCustomQueries, setCustomQueries, sqlQuery, setBaseSqlQuery } =
-    useRecceQueryContext();
-  const handleToggle = () => {
-    if (!isCustomQueries && setBaseSqlQuery) setBaseSqlQuery(sqlQuery);
-    setCustomQueries(!isCustomQueries);
-  };
-  const customQueriesDescription =
-    "Custom queries allow you to use two SQL queries to compare results between current and base environments.";
-  return (
-    <Box>
-      <Stack
-        direction="row"
-        spacing={0.5}
-        alignItems="center"
-        fontSize="0.75rem"
-      >
-        <Typography variant="body2" sx={{ fontSize: "0.75rem" }}>
-          Custom Queries
-        </Typography>
-        <MuiTooltip title={customQueriesDescription}>
-          <Box component="span" sx={{ display: "flex", color: "grey.600" }}>
-            <PiInfoFill fontSize="1rem" />
-          </Box>
-        </MuiTooltip>
-      </Stack>
-      <MuiSwitch
-        size="small"
-        checked={isCustomQueries}
-        onChange={handleToggle}
-        color="primary"
-      />
-    </Box>
-  );
-};
-
-export const QueryPage = () => {
-  const {
-    sqlQuery: _sqlQuery,
-    baseSqlQuery,
-    setSqlQuery,
-    setBaseSqlQuery,
-    primaryKeys,
-    setPrimaryKeys,
-    isCustomQueries,
-  } = useRecceQueryContext();
-  const { lineageGraph, envInfo } = useLineageGraphContext();
-  const { featureToggles, singleEnv } = useRecceInstanceContext();
-
-  let sqlQuery = _sqlQuery;
-  if (envInfo?.adapterType === "sqlmesh" && _sqlQuery === defaultSqlQuery) {
-    sqlQuery = `select * from db.mymodel`;
-  }
-
-  if (featureToggles.mode === "read only") {
-    sqlQuery = `--- Would like to do query here? Book a demo with us at ${RECCE_SUPPORT_CALENDAR_URL}\n${sqlQuery}`;
-  }
-
-  const { showRunId } = useRecceActionContext();
-  const { apiClient } = useApiConfig();
-  const queryFn = async (type: "query" | "query_base" | "query_diff") => {
-    function queryFactory(type: string) {
-      switch (type) {
-        case "query":
-          return submitQuery;
-        case "query_base":
-          return submitQueryBase;
-        case "query_diff":
-          return submitQueryDiff;
-        default:
-          throw new Error(`Unknown query type: ${type}`);
-      }
-    }
-    const sqlTemplate = type === "query_base" ? (baseSqlQuery ?? "") : sqlQuery;
-    const runFn = queryFactory(type);
-    const params: QueryParams = { sql_template: sqlTemplate };
-    const options: SubmitOptions = { nowait: true };
-
-    if (type === "query_diff") {
-      params.primary_keys = primaryKeys;
-      if (isCustomQueries) params.base_sql_template = baseSqlQuery;
-    }
-    const { run_id } = await runFn(params, options, apiClient);
-
-    showRunId(run_id);
-
-    return await waitRun(run_id, undefined, apiClient);
-  };
-
-  const { mutate: runQuery, isPending } = useMutation({
-    mutationFn: queryFn,
-  });
-
-  const currentSchema = useMemo(() => {
-    const initialValue = "N/A";
-    // find the most common schema from the current lineage graph
-    const countMap: Record<string, number> = {};
-    if (!lineageGraph) {
-      return initialValue;
-    }
-
-    for (const key in lineageGraph.nodes) {
-      const schema = lineageGraph.nodes[key].data.data.current?.schema;
-      if (schema) {
-        countMap[schema] = (countMap[schema] || 0) + 1;
-      }
-    }
-    // Find the most common value
-    return Object.keys(countMap).reduce((mostCommon, current) => {
-      if (countMap[current] > (countMap[mostCommon] || 0)) {
-        return current;
-      }
-      return mostCommon;
-    }, initialValue);
-  }, [lineageGraph]);
-
-  if (singleEnv || featureToggles.mode === "metadata only") {
-    return (
-      <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "right",
-            alignItems: "center",
-            padding: "4pt 8pt",
-            gap: "5px",
-            height: "54px",
-            borderBottom: "1px solid",
-            borderColor: "divider",
-          }}
-        >
-          <HistoryToggle />
-          <Box sx={{ flexGrow: 1 }} />
-          {singleEnv ? (
-            <MuiTooltip
-              title="Please configure the base environment before running the diff"
-              placement="left"
-            >
-              <span>
-                <Button
-                  variant="contained"
-                  disabled
-                  size="small"
-                  sx={{ fontSize: "14px", mt: "16px" }}
-                >
-                  Run Diff
-                </Button>
-              </span>
-            </MuiTooltip>
-          ) : (
-            <SetupConnectionPopover
-              display={featureToggles.mode === "metadata only"}
-            >
-              <Button
-                variant="contained"
-                disabled
-                size="small"
-                sx={{ fontSize: "14px", mt: "16px" }}
-              >
-                Run Diff
-              </Button>
-            </SetupConnectionPopover>
-          )}
-        </Box>
-        <DualSqlEditor
-          value={sqlQuery}
-          onChange={setSqlQuery}
-          onRun={() => {
-            runQuery("query");
-          }}
-          labels={["base (production)", `current (${currentSchema})`]}
-          SetupGuide={
-            featureToggles.mode === "metadata only" ? (
-              <SetupConnectionGuide />
-            ) : (
-              <BaseEnvironmentSetupGuide />
-            )
-          }
-        />
-      </Box>
-    );
-  }
-
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "right",
-          alignItems: "flex-end",
-          padding: "4pt 8pt",
-          gap: "5px",
-          height: "54px",
-          borderBottom: "1px solid",
-          borderColor: "divider",
-          flex: "0 0 54px",
-        }}
-      >
-        <HistoryToggle />
-        <QueryModeToggle />
-        <Box sx={{ flexGrow: 1 }} />
-        <QueryForm
-          defaultPrimaryKeys={primaryKeys}
-          onPrimaryKeysChange={setPrimaryKeys}
-        />
-        <Button
-          variant="contained"
-          onClick={() => {
-            runQuery("query_diff");
-          }}
-          disabled={isPending || featureToggles.disableDatabaseQuery}
-          size="small"
-        >
-          Run Diff
-        </Button>
-      </Box>
-
-      <Box sx={{ width: "100%", flex: 1 }}>
-        {isCustomQueries ? (
-          <DualSqlEditor
-            value={sqlQuery}
-            baseValue={baseSqlQuery}
-            onChange={setSqlQuery}
-            onChangeBase={setBaseSqlQuery}
-            onRun={() => {
-              runQuery("query");
-            }}
-            onRunBase={() => {
-              runQuery("query_base");
-            }}
-            onRunDiff={() => {
-              runQuery("query_diff");
-            }}
-          />
-        ) : (
-          <SqlEditor
-            value={sqlQuery}
-            onChange={setSqlQuery}
-            onRun={() => {
-              runQuery("query");
-            }}
-            onRunDiff={() => {
-              runQuery("query_diff");
-            }}
-          />
-        )}
-      </Box>
-    </Box>
-  );
-};

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

@@ -1,180 +0,0 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import React, { forwardRef, Ref, useMemo } from "react";
-import { PiWarning } from "react-icons/pi";
-import { colors } from "@/components/ui/mui-theme";
-import { QueryViewOptions } from "@/lib/api/adhocQuery";
-import {
-  ColumnRenderMode,
-  isQueryBaseRun,
-  isQueryRun,
-  Run,
-} from "@/lib/api/types";
-import { createDataGrid } from "@/lib/dataGrid/dataGridFactory";
-import {
-  type DataGridHandle,
-  EmptyRowsRenderer,
-  ScreenshotDataGrid,
-} from "../data-grid/ScreenshotDataGrid";
-import { RunResultViewProps } from "../run/types";
-
-interface QueryResultViewProp extends RunResultViewProps<QueryViewOptions> {
-  onAddToChecklist?: (run: Run) => void;
-}
-
-const PrivateQueryResultView = (
-  {
-    run,
-    viewOptions,
-    onViewOptionsChanged,
-    onAddToChecklist,
-  }: QueryResultViewProp,
-  ref: Ref<DataGridHandle>,
-) => {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-
-  if (!(isQueryRun(run) || isQueryBaseRun(run))) {
-    throw new Error("run type must be query");
-  }
-  const pinnedColumns = useMemo(
-    () => viewOptions?.pinned_columns ?? [],
-    [viewOptions],
-  );
-  const columnsRenderMode = useMemo(
-    () => viewOptions?.columnsRenderMode ?? {},
-    [viewOptions],
-  );
-
-  const dataframe = run.result;
-  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={{
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        No data
-      </Box>
-    );
-  }
-
-  const limit = dataframe ? (dataframe.limit ?? 0) : 0;
-  const warning =
-    limit > 0 && dataframe?.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 showTopBar = onAddToChecklist ?? warning;
-
-  return (
-    <Stack sx={{ bgcolor: isDark ? "grey.900" : "grey.50", height: "100%" }}>
-      {showTopBar && (
-        <Stack
-          direction="row"
-          sx={{
-            borderBottom: "1px solid",
-            borderBottomColor: "divider",
-            alignItems: "center",
-            gap: "5px",
-            px: "10px",
-            bgcolor: warning
-              ? isDark
-                ? colors.amber[900]
-                : colors.amber[100]
-              : "inherit",
-            color: warning
-              ? isDark
-                ? colors.amber[200]
-                : colors.amber[800]
-              : "inherit",
-          }}
-        >
-          {warning && (
-            <>
-              <PiWarning
-                color={isDark ? colors.amber[400] : colors.amber[600]}
-                style={{ alignSelf: "center" }}
-              />{" "}
-              <Box>{warning}</Box>
-            </>
-          )}
-
-          <Box sx={{ flexGrow: 1, minHeight: "32px" }} />
-          {onAddToChecklist && (
-            <Button
-              sx={{ my: "5px" }}
-              size="small"
-              color="iochmara"
-              variant="contained"
-              onClick={() => {
-                onAddToChecklist(run);
-              }}
-            >
-              Add to Checklist
-            </Button>
-          )}
-        </Stack>
-      )}
-      <ScreenshotDataGrid
-        ref={ref}
-        style={{ blockSize: "auto", maxHeight: "100%", overflow: "auto" }}
-        columns={gridData.columns}
-        rows={gridData.rows}
-        renderers={{ noRowsFallback: <EmptyRowsRenderer /> }}
-        defaultColumnOptions={{
-          resizable: true,
-          maxWidth: 800,
-          minWidth: 35,
-        }}
-        className={isDark ? "rdg-dark" : "rdg-light"}
-      />
-    </Stack>
-  );
-};
-
-export const QueryResultView = forwardRef(PrivateQueryResultView);

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

@@ -1,57 +0,0 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { RiTerminalBoxLine } from "react-icons/ri";
-import { useRecceInstanceInfo } from "@/lib/hooks/useRecceInstanceInfo";
-import { getSettingsUrl } from "@/lib/utils/urls";
-
-export default function SetupConnectionGuide() {
-  const { data: instanceInfo } = useRecceInstanceInfo();
-
-  return (
-    <div className="flex flex-1 h-full min-h-0 m-2 p-4 bg-blue-50 rounded-lg shadow-md justify-center">
-      <div className="w-4/5 flex flex-col overflow-y-auto gap-6 px-8 pb-8">
-        <Stack alignItems="center" spacing={2}>
-          <Box
-            sx={{
-              p: 1,
-              bgcolor: "background.paper",
-              borderRadius: "50%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              boxShadow: 2,
-            }}
-          >
-            <Box
-              component={RiTerminalBoxLine}
-              sx={{ fontSize: 28, color: "iochmara.500" }}
-            />
-          </Box>
-          <Typography variant="h5" sx={{ mt: 2 }}>
-            Wait, there's more!
-          </Typography>
-          <Typography sx={{ fontSize: "1rem", textAlign: "center" }}>
-            Query functions disabled without a{" "}
-            <Typography component="span" sx={{ fontWeight: "bold" }}>
-              data warehouse connection
-            </Typography>
-          </Typography>
-        </Stack>
-        <Stack sx={{ width: "50%", mt: 3, mx: "auto" }}>
-          <Button
-            color="iochmara"
-            variant="contained"
-            size="large"
-            onClick={() => {
-              window.open(getSettingsUrl(instanceInfo), "_blank");
-            }}
-          >
-            Connect to Data Warehouse
-          </Button>
-        </Stack>
-      </div>
-    </div>
-  );
-}