@datarecce/ui 0.1.40 → 0.2.0

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

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

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

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

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