@datarecce/ui 0.1.30 → 0.1.31

package/recce-source/js/src/components/lineage/styles.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import { FaCamera, FaCube, FaDatabase, FaSeedling } from "react-icons/fa";
+import { FaChartSimple, FaCircleNodes, FaGauge } from "react-icons/fa6";
+import { VscDiffAdded, VscDiffModified, VscDiffRemoved } from "react-icons/vsc";
+import { token } from "@/components/ui/mui-theme";
+
+export const IconAdded = VscDiffAdded;
+export const IconRemoved = VscDiffRemoved;
+export const IconModified = VscDiffModified;
+export const IconChanged = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 16 16"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 11 a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      />
+
+      <path fillRule="evenodd" clipRule="evenodd" d="" />
+    </svg>
+  );
+};
+
+export const IconModifiedDownstream = (
+  props: React.SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 16 16"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.5 1 h13 l.5.5 v13 l-.5.5 h-13 l-.5-.5 v-13l.5-.5zM2 2v4h-1v4h1v4h4v1h4v-1h4v-4h1v-4h-1v-4h-4v-1h-4v1h-4z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 11 a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      />
+
+      <path fillRule="evenodd" clipRule="evenodd" d="" />
+    </svg>
+  );
+};
+
+export function getIconForChangeStatus(
+  changeStatus?: "added" | "removed" | "modified",
+  isDark?: boolean,
+): {
+  color: string;
+  hexColor: string;
+  backgroundColor: string;
+  hexBackgroundColor: string;
+  icon: typeof IconAdded | undefined;
+} {
+  if (changeStatus === "added") {
+    const color = String(token("colors.green.solid"));
+    const backgroundColor = isDark
+      ? String(token("colors.green.muted"))
+      : String(token("colors.green.subtle"));
+    return {
+      color,
+      hexColor: color,
+      backgroundColor,
+      hexBackgroundColor: backgroundColor,
+      icon: IconAdded,
+    };
+  } else if (changeStatus === "removed") {
+    const color = String(token("colors.red.solid"));
+    const backgroundColor = isDark
+      ? String(token("colors.red.muted"))
+      : String(token("colors.red.subtle"));
+    return {
+      color,
+      hexColor: color,
+      backgroundColor,
+      hexBackgroundColor: backgroundColor,
+      icon: IconRemoved,
+    };
+  } else if (changeStatus === "modified") {
+    const color = String(token("colors.amber.emphasized"));
+    const backgroundColor = isDark
+      ? String(token("colors.amber.emphasized"))
+      : String(token("colors.amber.subtle"));
+    return {
+      color,
+      hexColor: color,
+      backgroundColor,
+      hexBackgroundColor: backgroundColor,
+      icon: IconModified,
+    };
+  }
+
+  const color = String(token("colors.gray.focusRing"));
+  // Use theme-aware background for default state
+  const backgroundColor = isDark ? "#404040" : "#ffffff";
+  return {
+    color,
+    hexColor: color,
+    backgroundColor,
+    hexBackgroundColor: backgroundColor,
+    icon: undefined,
+  };
+}
+
+export function getIconForResourceType(resourceType?: string): {
+  color: string;
+  icon: typeof FaCube | undefined;
+} {
+  if (resourceType === "model") {
+    return {
+      color: String(token("colors.cyan.subtle")),
+      icon: FaCube,
+    };
+  } else if (resourceType === "metric") {
+    return {
+      color: String(token("colors.rose.subtle")),
+      icon: FaChartSimple,
+    };
+  } else if (resourceType === "source") {
+    return {
+      color: String(token("colors.green.muted")),
+      icon: FaDatabase,
+    };
+  } else if (resourceType === "exposure") {
+    return {
+      color: String(token("colors.rose.subtle")),
+      icon: FaGauge,
+    };
+  } else if (resourceType === "semantic_model") {
+    return {
+      color: String(token("colors.rose.focusRing")),
+      icon: FaCircleNodes,
+    };
+  } else if (resourceType === "seed") {
+    return {
+      color: String(token("colors.green.emphasized")),
+      icon: FaSeedling,
+    };
+  } else if (resourceType === "snapshot") {
+    return {
+      color: String(token("colors.green.emphasized")),
+      icon: FaCamera,
+    };
+  } else {
+    return { color: "inherit", icon: undefined };
+  }
+}

package/recce-source/js/src/components/lineage/useMultiNodesAction.ts

@@ -0,0 +1,352 @@
+import { useRef } from "react";
+import { RunType } from "@/components/run/registry";
+import { createLineageDiffCheck } from "@/lib/api/lineagecheck";
+import { RowCountDiffParams, RowCountParams } from "@/lib/api/rowcount";
+import { cancelRun, submitRun, waitRun } from "@/lib/api/runs";
+import { createSchemaDiffCheck } from "@/lib/api/schemacheck";
+import {
+  EXPLORE_ACTION,
+  EXPLORE_SOURCE,
+  trackExploreAction,
+} from "@/lib/api/track";
+import { ValueDiffParams } from "@/lib/api/valuediff";
+import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
+import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
+import { ActionState } from "./LineageViewContext";
+import { LineageGraphNode } from "./lineage";
+
+const initValue: ActionState = {
+  mode: "per_node",
+  status: "pending",
+  completed: 0,
+  total: 0,
+  actions: {},
+};
+
+export const useMultiNodesAction = (
+  nodes: LineageGraphNode[],
+  {
+    onActionStarted,
+    onActionNodeUpdated,
+    onActionCompleted,
+  }: {
+    onActionStarted: () => void;
+    onActionNodeUpdated: (node: LineageGraphNode) => void;
+    onActionCompleted: () => void;
+  },
+) => {
+  const { apiClient } = useApiConfig();
+  const actionState = useRef<ActionState>({
+    ...initValue,
+  }).current;
+
+  const { showRunId } = useRecceActionContext();
+
+  const submitRunForNodes = async (
+    type: RunType,
+    skip: (node: LineageGraphNode) => string | undefined,
+    getParams: (
+      nodes: LineageGraphNode[],
+    ) => RowCountParams | RowCountDiffParams,
+  ) => {
+    actionState.mode = "multi_nodes";
+    actionState.actions = {};
+    const mode = actionState.mode;
+    const actions = actionState.actions;
+
+    onActionStarted();
+    actionState.status = "running";
+
+    const candidates: LineageGraphNode[] = [];
+
+    for (const node of nodes) {
+      const skipReason = skip(node);
+
+      if (skipReason) {
+        actions[node.id] = {
+          mode,
+          status: "skipped",
+          skipReason,
+        };
+        onActionNodeUpdated(node);
+      } else {
+        actions[node.id] = { mode, status: "pending" };
+        candidates.push(node);
+      }
+    }
+
+    const params = getParams(candidates);
+
+    try {
+      const { run_id } = await submitRun(
+        type,
+        params,
+        { nowait: true },
+        apiClient,
+      );
+      showRunId(run_id);
+      actionState.currentRun = { run_id };
+      actionState.total = 1;
+
+      for (;;) {
+        const run = await waitRun(run_id, 2, apiClient);
+        actionState.currentRun = run;
+
+        const status = run.error
+          ? "failure"
+          : run.result
+            ? "success"
+            : "running";
+
+        for (const node of candidates) {
+          actions[node.id] = {
+            mode,
+            status,
+            run,
+          };
+          onActionNodeUpdated(node);
+        }
+
+        if (run.error || run.result) {
+          break;
+        }
+      }
+    } catch (_e) {
+      // don't need to do anything here, the error will be shown in the summary
+    }
+
+    actionState.completed = 1;
+    if ((actionState.status as string) === "canceling") {
+      actionState.status = "canceled";
+      onActionCompleted();
+      return;
+    }
+
+    actionState.status = "completed";
+    onActionCompleted();
+  };
+
+  const submitRunsPerNodes = async (
+    type: RunType,
+    getParams: (node: LineageGraphNode) => {
+      /* params is the input parameters for the run of a node */
+      params?: ValueDiffParams;
+      /* skipReason is a string that explains why the node is skipped */
+      skipReason?: string;
+    },
+  ) => {
+    actionState.mode = "per_node";
+    actionState.actions = {};
+    const mode = actionState.mode;
+    const actions = actionState.actions;
+
+    onActionStarted();
+    actionState.status = "running";
+
+    for (const node of nodes) {
+      actions[node.id] = { mode, status: "pending" };
+      onActionNodeUpdated(node);
+    }
+
+    actionState.completed = 0;
+    actionState.total = nodes.length;
+
+    for (const node of nodes) {
+      const { params, skipReason } = getParams(node);
+      if (skipReason) {
+        actions[node.id] = {
+          mode,
+          status: "skipped",
+          skipReason,
+        };
+        onActionNodeUpdated(node);
+      } else {
+        try {
+          const { run_id } = await submitRun(
+            type,
+            params,
+            { nowait: true },
+            apiClient,
+          );
+          actionState.currentRun = { run_id };
+          actions[node.id] = {
+            mode,
+            status: "running",
+          };
+          onActionNodeUpdated(node);
+
+          for (;;) {
+            const run = await waitRun(run_id, 2, apiClient);
+            actionState.currentRun = run;
+            const status = run.error
+              ? "failure"
+              : run.result
+                ? "success"
+                : "running";
+            actions[node.id] = {
+              mode,
+              status,
+              run,
+            };
+            onActionNodeUpdated(node);
+
+            if (run.error || run.result) {
+              break;
+            }
+          }
+        } catch (_e) {
+          // don't need to do anything here, the error will be shown in the summary
+        } finally {
+          actionState.currentRun = undefined;
+        }
+      }
+      actionState.completed++;
+      if ((actionState.status as string) === "canceling") {
+        actionState.status = "canceled";
+        onActionCompleted();
+        return;
+      }
+    }
+
+    actionState.status = "completed";
+    onActionCompleted();
+  };
+
+  const runRowCount = async () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.ROW_COUNT,
+      source: EXPLORE_SOURCE.LINEAGE_VIEW_TOP_BAR,
+      node_count: nodes.length,
+    });
+
+    const nodeNames = [];
+    for (const node of nodes) {
+      if (node.data.resourceType !== "model") {
+        actionState.actions[node.id] = {
+          mode: "multi_nodes",
+          status: "skipped",
+          skipReason: "Not a model",
+        };
+        onActionNodeUpdated(node);
+      } else {
+        nodeNames.push(node.data.name);
+      }
+    }
+
+    const skip = (node: LineageGraphNode) => {
+      if (node.data.resourceType !== "model") {
+        return "Not a model";
+      }
+    };
+    const getParams = (nodes: LineageGraphNode[]): RowCountParams => {
+      return {
+        node_names: nodes.map((node) => node.data.name),
+      };
+    };
+
+    await submitRunForNodes("row_count", skip, getParams);
+  };
+
+  const runRowCountDiff = async () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.ROW_COUNT_DIFF,
+      source: EXPLORE_SOURCE.LINEAGE_VIEW_TOP_BAR,
+      node_count: nodes.length,
+    });
+
+    const nodeNames = [];
+    for (const node of nodes) {
+      if (node.data.resourceType !== "model") {
+        actionState.actions[node.id] = {
+          mode: "multi_nodes",
+          status: "skipped",
+          skipReason: "Not a model",
+        };
+        onActionNodeUpdated(node);
+      } else {
+        nodeNames.push(node.data.name);
+      }
+    }
+
+    const skip = (node: LineageGraphNode) => {
+      if (node.data.resourceType !== "model") {
+        return "Not a model";
+      }
+    };
+    const getParams = (nodes: LineageGraphNode[]): RowCountDiffParams => {
+      return {
+        node_names: nodes.map((node) => node.data.name),
+      };
+    };
+
+    await submitRunForNodes("row_count_diff", skip, getParams);
+  };
+
+  const runValueDiff = async () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.VALUE_DIFF,
+      source: EXPLORE_SOURCE.LINEAGE_VIEW_TOP_BAR,
+      node_count: nodes.length,
+    });
+
+    await submitRunsPerNodes("value_diff", (node) => {
+      const primaryKey = node.data.data.current?.primary_key;
+      if (!primaryKey) {
+        return {
+          skipReason:
+            "No primary key found. The first unique column is used as primary key.",
+        };
+      }
+
+      const params: ValueDiffParams = {
+        model: node.data.name,
+        primary_key: primaryKey,
+      };
+
+      return { params };
+    });
+  };
+
+  const addLineageDiffCheck = async () => {
+    const nodeIds = nodes.map((node) => node.id);
+    return await createLineageDiffCheck(
+      {
+        node_ids: nodeIds,
+      },
+      apiClient,
+    );
+  };
+
+  const addSchemaDiffCheck = async () => {
+    let check;
+    if (nodes.length === 1) {
+      check = await createSchemaDiffCheck({ node_id: nodes[0].id }, apiClient);
+    } else {
+      const nodeIds = nodes.map((node) => node.id);
+      check = await createSchemaDiffCheck({ node_id: nodeIds }, apiClient);
+    }
+    return check;
+  };
+
+  const cancel = async () => {
+    actionState.status = "canceling";
+    if (actionState.currentRun?.run_id) {
+      await cancelRun(actionState.currentRun.run_id, apiClient);
+    }
+  };
+
+  const reset = () => {
+    Object.assign(actionState, initValue);
+  };
+
+  return {
+    actionState,
+    runRowCount,
+    runRowCountDiff,
+    runValueDiff,
+    addLineageDiffCheck,
+    addSchemaDiffCheck,
+    cancel,
+    reset,
+  };
+};

package/recce-source/js/src/components/lineage/useValueDiffAlertDialog.tsx

@@ -0,0 +1,108 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import MuiDialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import React, { useCallback, useRef, useState } from "react";
+import { IoClose } from "react-icons/io5";
+import {
+  EXPLORE_ACTION,
+  EXPLORE_FORM_EVENT,
+  trackExploreActionForm,
+} from "@/lib/api/track";
+
+function useValueDiffAlertDialog() {
+  const [open, setOpen] = useState(false);
+  const [nodeCount, setNodeCount] = useState(0);
+  const [resolvePromise, setResolvePromise] =
+    useState<(value: boolean) => void>();
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  const confirm = useCallback((nodeCount: number) => {
+    setNodeCount(nodeCount);
+    return new Promise<boolean>((resolve) => {
+      setResolvePromise(() => resolve);
+      setOpen(true);
+    });
+  }, []);
+
+  const handleConfirm = () => {
+    trackExploreActionForm({
+      action: EXPLORE_ACTION.VALUE_DIFF,
+      event: EXPLORE_FORM_EVENT.EXECUTE,
+    });
+    resolvePromise?.(true);
+    setOpen(false);
+  };
+
+  const handleCancel = () => {
+    trackExploreActionForm({
+      action: EXPLORE_ACTION.VALUE_DIFF,
+      event: EXPLORE_FORM_EVENT.CANCEL,
+    });
+    resolvePromise?.(false);
+    setOpen(false);
+  };
+
+  const ValueDiffAlertDialog = (
+    <MuiDialog
+      open={open}
+      onClose={handleCancel}
+      maxWidth="md"
+      fullWidth
+      aria-labelledby="value-diff-alert-dialog-title"
+    >
+      <DialogTitle
+        id="value-diff-alert-dialog-title"
+        sx={{ fontSize: "1.125rem", fontWeight: "bold" }}
+      >
+        Value Diff on {nodeCount} nodes
+      </DialogTitle>
+      <IconButton
+        aria-label="close"
+        onClick={handleCancel}
+        sx={{
+          position: "absolute",
+          right: 8,
+          top: 8,
+          color: "grey.500",
+        }}
+      >
+        <IoClose />
+      </IconButton>
+      <DialogContent>
+        <Stack spacing="20px">
+          <Box>
+            Value diff will be executed on {nodeCount} nodes in the Lineage,
+            which can add extra costs to your bill.
+          </Box>
+        </Stack>
+      </DialogContent>
+      <DialogActions sx={{ gap: 0.5 }}>
+        <Button
+          ref={cancelRef}
+          onClick={handleCancel}
+          variant="outlined"
+          color="neutral"
+        >
+          Cancel
+        </Button>
+        <Button
+          color="iochmara"
+          variant="contained"
+          onClick={handleConfirm}
+          sx={{ ml: 1.5 }}
+        >
+          Execute
+        </Button>
+      </DialogActions>
+    </MuiDialog>
+  );
+
+  return { confirm, AlertDialog: ValueDiffAlertDialog };
+}
+
+export default useValueDiffAlertDialog;

package/recce-source/js/src/components/onboarding-guide/Notification.tsx

@@ -0,0 +1,62 @@
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import MuiLink from "@mui/material/Link";
+import { PropsWithChildren } from "react";
+import { FiInfo } from "react-icons/fi";
+import { IoClose } from "react-icons/io5";
+import { LuExternalLink } from "react-icons/lu";
+
+export const RecceNotification = (
+  props: PropsWithChildren<{
+    onClose: () => void;
+    align?: string;
+  }>,
+) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flex: 1,
+        minHeight: "48px",
+        m: "4px",
+        px: "16px",
+        py: "12px",
+        bgcolor: "primary.50",
+        border: "1px solid",
+        borderRadius: "4px",
+        borderColor: "primary.400",
+        alignItems: props.align ?? "center",
+        gap: "12px",
+      }}
+    >
+      <Box
+        component={FiInfo}
+        sx={{ width: "20px", height: "20px", color: "primary.900" }}
+      />
+      {props.children}
+      <Box sx={{ flexGrow: 1 }} />
+      <IconButton size="small" onClick={props.onClose}>
+        <IoClose />
+      </IconButton>
+    </Box>
+  );
+};
+
+export const LearnHowLink = () => {
+  return (
+    <MuiLink
+      href="https://docs.datarecce.io/get-started/#prepare-dbt-artifacts"
+      target="_blank"
+      sx={{
+        color: "primary.main",
+        fontWeight: "bold",
+        textDecoration: "underline",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5,
+      }}
+    >
+      Learn how <LuExternalLink />
+    </MuiLink>
+  );
+};