@datarecce/ui 0.1.30 → 0.1.32

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

@@ -0,0 +1,282 @@
+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

@@ -0,0 +1,180 @@
+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

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