@datarecce/ui 0.1.30 → 0.1.31

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

@@ -0,0 +1,327 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import IconButton from "@mui/material/IconButton";
+import Link from "@mui/material/Link";
+import MuiPopover from "@mui/material/Popover";
+import Stack from "@mui/material/Stack";
+import MuiTooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { UseMutationResult } from "@tanstack/react-query";
+import { useState } from "react";
+import { FaRegDotCircle } from "react-icons/fa";
+import { PiInfo, PiX } from "react-icons/pi";
+import { CllInput, ColumnLineageData } from "@/lib/api/cll";
+import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
+import { useRecceServerFlag } from "@/lib/hooks/useRecceServerFlag";
+import { useLineageViewContextSafe } from "./LineageViewContext";
+
+const _AnalyzeChangeHint = ({ ml }: { ml?: number }) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  return (
+    <>
+      <Box
+        component="span"
+        sx={{
+          fontSize: "10px",
+          cursor: "pointer",
+          ml: ml,
+          display: "inline-flex",
+          alignItems: "center",
+        }}
+        onMouseEnter={(e: React.MouseEvent<HTMLElement>) => {
+          setAnchorEl(e.currentTarget);
+        }}
+        onMouseLeave={() => {
+          setAnchorEl(null);
+        }}
+      >
+        <PiInfo />
+      </Box>
+      <MuiPopover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        disableRestoreFocus
+        sx={{ pointerEvents: "none" }}
+        slotProps={{
+          paper: {
+            sx: { bgcolor: "black", color: "white", p: 1.5 },
+          },
+        }}
+      >
+        <Typography sx={{ fontSize: "0.875rem" }}>
+          Breaking changes are determined by analyzing SQL for changes that may
+          impact downstream models.{" "}
+          <Link
+            href="https://docs.datarecce.io/features/breaking-change-analysis/"
+            target="_blank"
+            sx={{ color: "white", textDecoration: "underline" }}
+          >
+            Learn more
+          </Link>
+          .
+        </Typography>
+      </MuiPopover>
+    </>
+  );
+};
+
+const _CllHint = () => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  return (
+    <>
+      <Box
+        component="span"
+        sx={{
+          fontSize: "10px",
+          color: "white",
+          cursor: "pointer",
+          ml: 0.5,
+          display: "inline-flex",
+          alignItems: "center",
+        }}
+        onMouseEnter={(e: React.MouseEvent<HTMLElement>) => {
+          setAnchorEl(e.currentTarget);
+        }}
+        onMouseLeave={() => {
+          setAnchorEl(null);
+        }}
+      >
+        <PiInfo />
+      </Box>
+      <MuiPopover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        disableRestoreFocus
+        sx={{ pointerEvents: "none" }}
+        slotProps={{
+          paper: {
+            sx: { bgcolor: "black", color: "white", p: 1.5 },
+          },
+        }}
+      >
+        <Typography sx={{ fontSize: "0.875rem" }}>
+          Column-Level Lineage provides visibility into the upstream and
+          downstream relationships of a column.{" "}
+          <Link
+            href="https://docs.datarecce.io/features/column-level-lineage/"
+            target="_blank"
+            sx={{ color: "white", textDecoration: "underline" }}
+          >
+            Learn more
+          </Link>
+          .
+        </Typography>
+      </MuiPopover>
+    </>
+  );
+};
+
+const ModeMessage = () => {
+  const { lineageGraph } = useLineageGraphContext();
+  const { centerNode, viewOptions } = useLineageViewContextSafe();
+  const cllInput = viewOptions.column_level_lineage;
+
+  if (!lineageGraph) {
+    return <></>;
+  }
+
+  if (!cllInput) {
+    return "Default View";
+  }
+
+  if (cllInput.node_id === undefined) {
+    return (
+      <Typography component="span">
+        Impact Radius for All Changed Models
+      </Typography>
+    );
+  }
+
+  const nodeName =
+    cllInput.node_id in lineageGraph.nodes
+      ? lineageGraph.nodes[cllInput.node_id].data.name
+      : cllInput.node_id;
+
+  if (!cllInput.column) {
+    const nodeId = cllInput.node_id;
+
+    return (
+      <>
+        <Typography component="span" sx={{ mr: "5px" }}>
+          Impact Radius for
+        </Typography>
+        <Box
+          component="code"
+          onClick={() => {
+            centerNode(nodeId);
+          }}
+          sx={(theme) => ({
+            cursor: "pointer",
+            fontFamily: "monospace",
+            bgcolor: theme.palette.mode === "dark" ? "grey.700" : "grey.100",
+            px: 0.5,
+            borderRadius: 0.5,
+          })}
+        >
+          {nodeName}
+        </Box>
+      </>
+    );
+  } else {
+    const nodeId = `${cllInput.node_id}_${cllInput.column}`;
+    return (
+      <>
+        <Typography component="span" sx={{ mr: "5px" }}>
+          Column Lineage for{" "}
+        </Typography>
+        <Box
+          component="code"
+          onClick={() => {
+            centerNode(nodeId);
+          }}
+          sx={(theme) => ({
+            cursor: "pointer",
+            fontFamily: "monospace",
+            bgcolor: theme.palette.mode === "dark" ? "grey.700" : "grey.100",
+            px: 0.5,
+            borderRadius: 0.5,
+          })}
+        >
+          {nodeName}.{cllInput.column}
+        </Box>
+      </>
+    );
+  }
+};
+
+export const ColumnLevelLineageControl = ({
+  action,
+}: {
+  action: UseMutationResult<ColumnLineageData, Error, CllInput>;
+}) => {
+  const {
+    showColumnLevelLineage,
+    resetColumnLevelLineage,
+    interactive,
+    viewOptions,
+  } = useLineageViewContextSafe();
+  const { data: flagData } = useRecceServerFlag();
+  const singleEnv = flagData?.single_env_onboarding ?? false;
+  const { lineageGraph } = useLineageGraphContext();
+  const noCatalogCurrent = !lineageGraph?.catalogMetadata.current;
+
+  return (
+    <Stack direction="row" spacing="5px">
+      {!singleEnv && (
+        <Box sx={{ borderRadius: 1, boxShadow: 3 }}>
+          <MuiTooltip
+            enterDelay={50}
+            title={
+              noCatalogCurrent
+                ? "Please provide catalog.json to enable Impact Radius"
+                : ""
+            }
+            placement="top"
+          >
+            <span>
+              <Button
+                size="small"
+                variant="outlined"
+                color="neutral"
+                sx={{
+                  whiteSpace: "nowrap",
+                  display: "inline-flex",
+                  bgcolor: "background.paper",
+                }}
+                disabled={!interactive || noCatalogCurrent}
+                startIcon={<FaRegDotCircle />}
+                onClick={() => {
+                  void showColumnLevelLineage({
+                    no_upstream: true,
+                    change_analysis: true,
+                  });
+                }}
+              >
+                Impact Radius
+              </Button>
+            </span>
+          </MuiTooltip>
+        </Box>
+      )}
+      {viewOptions.column_level_lineage && (
+        <Stack
+          direction="row"
+          alignItems="center"
+          sx={{
+            borderRadius: 1,
+            boxShadow: 3,
+            border: "1px solid",
+            borderColor: "divider",
+            bgcolor: "background.paper",
+            fontSize: "0.8rem",
+            p: "0 0.625rem",
+          }}
+        >
+          <ModeMessage />
+          {action.isError && (
+            <MuiTooltip
+              title={`Error: ${action.error.message}`}
+              placement="bottom"
+            >
+              <Typography
+                component="span"
+                sx={{
+                  color: "error.main",
+                  ml: "2px",
+                  display: "inline-flex",
+                  alignItems: "center",
+                }}
+              >
+                <Box
+                  component={PiInfo}
+                  sx={{ color: "error.main", fontSize: "14px" }}
+                />
+              </Typography>
+            </MuiTooltip>
+          )}
+
+          {action.isPending ? (
+            <CircularProgress size={12} sx={{ ml: "2px" }} />
+          ) : (
+            <IconButton
+              size="small"
+              sx={{ ml: "2px" }}
+              aria-label="Reset Column Level Lineage"
+              onClick={() => {
+                void resetColumnLevelLineage();
+              }}
+            >
+              <PiX size="10px" />
+            </IconButton>
+          )}
+        </Stack>
+      )}
+    </Stack>
+  );
+};

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

@@ -0,0 +1,57 @@
+import Box from "@mui/material/Box";
+import Tooltip from "@mui/material/Tooltip";
+import { TransformationType } from "./GraphColumnNode";
+
+export function ColumnLevelLineageLegend() {
+  const TRANSFORMATION_MSGS: Record<string, [string, string]> = {
+    passthrough: [
+      "Pass Through",
+      "The column is directly selected from the upstream table.",
+    ],
+    renamed: [
+      "Renamed",
+      "The column is selected from the upstream table but with a different name.",
+    ],
+    derived: [
+      "Derived",
+      "The column is created through transformations applied to upstream columns, such as calculations, conditions, functions, or aggregations.",
+    ],
+    source: [
+      "Source",
+      "The column is not derived from any upstream data. It may originate from a seed/source node, literal value, or data generation function.",
+    ],
+    unknown: [
+      "Unknown",
+      "We have no information about the transformation type. This could be due to a parse error, or other unknown reason.",
+    ],
+  };
+
+  return (
+    <Box
+      sx={{
+        bgcolor: "background.paper",
+        padding: "12px",
+        border: "1px solid",
+        borderColor: "divider",
+        fontSize: "0.875rem",
+      }}
+    >
+      {Object.entries(TRANSFORMATION_MSGS).map(([key, [label, tip]]) => {
+        return (
+          <Tooltip title={tip} key={key} placement="right">
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                mb: "2px",
+              }}
+            >
+              <TransformationType legend transformationType={key} /> {label}
+            </Box>
+          </Tooltip>
+        );
+      })}
+    </Box>
+  );
+}

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

@@ -0,0 +1,199 @@
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import { Handle, NodeProps, Position, useStore } from "@xyflow/react";
+import React from "react";
+import { VscKebabVertical } from "react-icons/vsc";
+import { useThemeColors } from "@/lib/hooks/useThemeColors";
+import { useLineageViewContextSafe } from "./LineageViewContext";
+import { COLUMN_HEIGHT, LineageGraphColumnNode } from "./lineage";
+import { getIconForChangeStatus } from "./styles";
+
+import "./styles.css";
+
+type GrapeColumnNodeProps = NodeProps<LineageGraphColumnNode>;
+
+export const ChangeStatus = ({
+  changeStatus,
+}: {
+  changeStatus?: "added" | "removed" | "modified";
+}) => {
+  if (!changeStatus) {
+    return <></>;
+  }
+
+  const { color: colorChangeStatus, icon: IconChangeStatus } =
+    getIconForChangeStatus(changeStatus);
+
+  if (!IconChangeStatus) {
+    return <></>;
+  }
+
+  return (
+    <Box
+      component={IconChangeStatus}
+      sx={{
+        fontSize: 14,
+        display: "inline-flex",
+        color: colorChangeStatus,
+      }}
+    />
+  );
+};
+
+export const TransformationType = ({
+  transformationType,
+  legend,
+}: {
+  transformationType?: string;
+  legend?: boolean;
+}) => {
+  let letter = "U";
+  let color: "default" | "error" | "warning" | "info" | "success" = "error";
+
+  if (transformationType === "passthrough") {
+    letter = "P";
+    color = "default";
+  } else if (transformationType === "renamed") {
+    letter = "R";
+    color = "warning";
+  } else if (transformationType === "derived") {
+    letter = "D";
+    color = "warning";
+  } else if (transformationType === "source") {
+    letter = "S";
+    color = "info";
+  } else {
+    letter = "U";
+    color = "error";
+  }
+
+  if (!transformationType) {
+    return <></>;
+  }
+
+  return (
+    <Chip
+      label={letter}
+      size="small"
+      color={color}
+      sx={{
+        fontSize: "8pt",
+        height: 18,
+        minWidth: 18,
+        "& .MuiChip-label": {
+          px: 0.5,
+        },
+      }}
+    />
+  );
+};
+
+export function GraphColumnNode(nodeProps: GrapeColumnNodeProps) {
+  const { id: columnNodeId, data } = nodeProps;
+  const { id: nodeId } = data.node;
+  const { column, type, transformationType, changeStatus } = data;
+  const showContent = useStore((s) => s.transform[2] > 0.3);
+  const { background, text, border } = useThemeColors();
+
+  const {
+    viewOptions,
+    showContextMenu,
+    isNodeHighlighted,
+    isNodeShowingChangeAnalysis,
+  } = useLineageViewContextSafe();
+
+  const selectedNode = viewOptions.column_level_lineage?.node_id;
+  const selectedColumn = viewOptions.column_level_lineage?.column;
+  const isFocus = column === selectedColumn && nodeId === selectedNode;
+  const [isHovered, setIsHovered] = React.useState(false);
+  const isHighlighted = isNodeHighlighted(columnNodeId);
+  const isShowingChangeAnalysis = isNodeShowingChangeAnalysis(nodeId);
+
+  if (!showContent) {
+    return <></>;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        width: 280,
+        padding: "0px 10px",
+        border: "1px solid",
+        borderColor: border.default,
+        backgroundColor: isFocus ? background.subtle : "inherit",
+        "&:hover": {
+          backgroundColor: background.subtle,
+        },
+        filter: isHighlighted ? "none" : "opacity(0.2) grayscale(50%)",
+        cursor: "pointer",
+      }}
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          fontSize: "11px",
+          color: text.primary,
+          width: "100%",
+          gap: "3px",
+          alignItems: "center",
+          height: `${COLUMN_HEIGHT - 1}px`,
+        }}
+      >
+        {isShowingChangeAnalysis && changeStatus ? (
+          <ChangeStatus changeStatus={changeStatus} />
+        ) : (
+          <TransformationType transformationType={transformationType} />
+        )}
+        <Box sx={{ height: `${COLUMN_HEIGHT + 1}px` }}>{column}</Box>
+        <Box sx={{ flexGrow: 1 }} />
+
+        {isHovered ? (
+          <Box
+            component={VscKebabVertical}
+            sx={{
+              fontSize: 14,
+              display: "inline-flex",
+              cursor: "pointer",
+              "&:hover": { color: text.primary },
+            }}
+            onClick={(e: React.MouseEvent) => {
+              e.preventDefault();
+              e.stopPropagation();
+              showContextMenu(
+                e,
+                nodeProps as unknown as LineageGraphColumnNode,
+              );
+            }}
+          />
+        ) : (
+          <Box sx={{ height: `${COLUMN_HEIGHT + 1} px` }}>{type}</Box>
+        )}
+      </Box>
+      <Handle
+        type="target"
+        position={Position.Left}
+        isConnectable={false}
+        style={{
+          left: 0,
+          visibility: "hidden",
+        }}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable={false}
+        style={{
+          right: 0,
+          visibility: "hidden",
+        }}
+      />
+    </Box>
+  );
+}

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

@@ -0,0 +1,59 @@
+import { BaseEdge, EdgeProps, getBezierPath } from "@xyflow/react";
+import { LineageGraphEdge } from "./lineage";
+import { getIconForChangeStatus } from "./styles";
+
+import "./styles.css";
+import { useLineageViewContextSafe } from "./LineageViewContext";
+
+type GraphEdgeProps = EdgeProps<LineageGraphEdge>;
+
+export default function GraphEdge(props: GraphEdgeProps) {
+  const {
+    source,
+    target,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    style: styleOverride = {},
+    markerEnd,
+    data,
+  } = props;
+
+  const style = {
+    ...styleOverride,
+  };
+
+  const { isEdgeHighlighted } = useLineageViewContextSafe();
+
+  if (data?.changeStatus) {
+    style.stroke = getIconForChangeStatus(data.changeStatus).hexColor;
+    style.strokeDasharray = "5";
+  }
+
+  const isHighlighted = isEdgeHighlighted(source, target);
+
+  if (!isHighlighted) {
+    style.filter = "opacity(0.2) grayscale(50%)";
+  }
+
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+  return (
+    <>
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{ ...style, ...styleOverride }}
+      />
+    </>
+  );
+}