@datarecce/ui 0.1.40 → 0.2.0

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

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

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

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

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