@datarecce/ui 0.1.41 → 0.2.0

package/recce-source/js/src/components/screenshot/ScreenshotBox.tsx

@@ -1,39 +0,0 @@
-import type { BoxProps } from "@mui/material/Box";
-import Box from "@mui/material/Box";
-import { forwardRef, Ref } from "react";
-
-interface ScreenshotBoxProps extends BoxProps {
-  backgroundColor?: string;
-  blockSize?: string;
-  children?: React.ReactNode;
-}
-
-export const ScreenshotBox = forwardRef(
-  (
-    {
-      backgroundColor = "white",
-      blockSize,
-      children,
-      ...restProps
-    }: ScreenshotBoxProps,
-    ref: Ref<HTMLDivElement>,
-  ) => {
-    return (
-      <Box
-        ref={ref}
-        {...restProps}
-        sx={{ overflowY: "auto", overflowX: "hidden", ...restProps.sx }}
-      >
-        <Box
-          sx={{
-            backgroundColor,
-            height: "100%",
-            blockSize,
-          }}
-        >
-          {children}
-        </Box>
-      </Box>
-    );
-  },
-);

package/recce-source/js/src/components/shared/HistoryToggle.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import React, { ReactNode } from "react";
-import { VscHistory } from "react-icons/vsc";
-import { trackHistoryAction } from "@/lib/api/track";
-import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
-
-export default function HistoryToggle(): ReactNode {
-  const { isHistoryOpen, showHistory } = useRecceActionContext();
-
-  if (isHistoryOpen) {
-    return;
-  }
-
-  return (
-    <Box>
-      <Box sx={{ fontSize: "8pt" }}>History</Box>
-
-      <Button
-        size="xsmall"
-        variant="outlined"
-        color="neutral"
-        startIcon={<VscHistory />}
-        onClick={() => {
-          trackHistoryAction({ name: isHistoryOpen ? "hide" : "show" });
-          showHistory();
-        }}
-      >
-        Show
-      </Button>
-    </Box>
-  );
-}

package/recce-source/js/src/components/split/Split.tsx

@@ -1,40 +0,0 @@
-import ReactSplit, { SplitProps } from "react-split";
-import "./styles.css";
-
-export const HSplit = (props: SplitProps) => {
-  const { style, children, gutterSize = 5, ...rest } = props;
-
-  return (
-    <ReactSplit
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        ...style,
-      }}
-      direction="horizontal"
-      gutterSize={gutterSize}
-      {...rest}
-    >
-      {children}
-    </ReactSplit>
-  );
-};
-
-export const VSplit = (props: SplitProps) => {
-  const { style, children, gutterSize = 5, ...rest } = props;
-
-  return (
-    <ReactSplit
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        ...style,
-      }}
-      gutterSize={gutterSize}
-      direction="vertical"
-      {...rest}
-    >
-      {children}
-    </ReactSplit>
-  );
-};

package/recce-source/js/src/components/split/styles.css

@@ -1,24 +0,0 @@
-/**
- * Split pane gutter styles
- * Uses CSS custom properties from global.css for theme-aware colors.
- */
-
-.gutter {
-  background-color: var(--recce-gutter-bg);
-  background-repeat: no-repeat;
-  background-position: 50%;
-}
-
-.gutter:hover {
-  background-color: var(--recce-gutter-hover);
-}
-
-.gutter.gutter-vertical {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=");
-  cursor: row-resize;
-}
-
-.gutter.gutter-horizontal {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
-  cursor: col-resize;
-}

package/recce-source/js/src/components/summary/ChangeSummary.tsx

@@ -1,264 +0,0 @@
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid";
-import Stack from "@mui/material/Stack";
-import MuiTooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import { ReactNode } from "react";
-import { IconType } from "react-icons";
-import { FiInfo } from "react-icons/fi";
-import { token } from "@/components/ui/mui-theme";
-import { NodeData } from "@/lib/api/info";
-import { LineageGraph } from "../lineage/lineage";
-import {
-  IconAdded,
-  IconChanged,
-  IconModified,
-  IconRemoved,
-} from "../lineage/styles";
-
-export type ChangeStatus =
-  // node change
-  // code change (user edit)
-  | "added"
-  | "removed"
-  | "modified"
-
-  // column change
-  | "col_added"
-  | "col_removed"
-  | "col_changed"
-
-  // folder change
-  | "folder_changed"
-  | null;
-
-export const NODE_CHANGE_STATUS_MSGS = {
-  added: ["Model Added", "Added resource"],
-  removed: ["Model Removed", "Removed resource"],
-  modified: ["Model Modified", "Modified resource"],
-  col_added: ["Column Added", "Added column"],
-  col_removed: ["Column Removed", "Removed column"],
-  col_changed: ["Column Modified", "Modified column"],
-  folder_changed: ["Modified", "Modified folder"],
-};
-
-export function getIconForChangeStatus(changeStatus?: ChangeStatus): {
-  color: string;
-  icon: IconType | undefined;
-} {
-  const greenColor = String(token("colors.green.solid"));
-  const redColor = String(token("colors.red.solid"));
-  const amberColor = String(token("colors.amber.emphasized"));
-
-  if (changeStatus === "added") {
-    return { color: greenColor, icon: IconAdded };
-  } else if (changeStatus === "removed") {
-    return { color: redColor, icon: IconRemoved };
-  } else if (changeStatus === "modified") {
-    return { color: amberColor, icon: IconModified };
-  } else if (changeStatus === "col_added") {
-    return { color: greenColor, icon: IconAdded };
-  } else if (changeStatus === "col_removed") {
-    return { color: redColor, icon: IconRemoved };
-  } else if (changeStatus === "col_changed") {
-    return { color: amberColor, icon: IconModified };
-  } else if (changeStatus === "folder_changed") {
-    return { color: amberColor, icon: IconChanged };
-  }
-
-  return { color: "inherit", icon: undefined };
-}
-
-function SummaryText({
-  name,
-  value,
-  tip,
-}: {
-  name: ReactNode;
-  value: ReactNode;
-  tip?: ReactNode;
-}) {
-  return (
-    <Stack alignItems="stretch">
-      <Typography sx={{ fontSize: "0.875rem", color: "grey.600" }}>
-        {name}
-        {tip && (
-          <MuiTooltip title={tip}>
-            <Box sx={{ display: "inline-block" }}>
-              <Box
-                component={FiInfo}
-                sx={{ mx: "2px", fontSize: 12, verticalAlign: "middle" }}
-              />
-            </Box>
-          </MuiTooltip>
-        )}
-      </Typography>
-      {value}
-    </Stack>
-  );
-}
-
-function ChangeStatusCountLabel({
-  changeStatus,
-  value,
-}: {
-  changeStatus: ChangeStatus;
-  value: number;
-}) {
-  const [label] = changeStatus ? NODE_CHANGE_STATUS_MSGS[changeStatus] : [""];
-  const { icon, color } = getIconForChangeStatus(changeStatus);
-
-  return (
-    <Stack alignItems="stretch">
-      <Stack
-        direction="row"
-        alignItems="center"
-        sx={{ fontSize: "0.875rem", color: "grey.600" }}
-      >
-        {icon && (
-          <Box component={icon} sx={{ mr: "5px", color, fontSize: "1rem" }} />
-        )}
-        {label}
-      </Stack>
-      <Typography sx={{ fontSize: "0.875rem" }}>{value}</Typography>
-    </Stack>
-  );
-}
-
-function calculateColumnChange(
-  base: NodeData | undefined,
-  current: NodeData | undefined,
-) {
-  let adds = 0;
-  let removes = 0;
-  let modifies = 0;
-  if (!base && !current) return { adds, removes, modifies };
-
-  // Add columns
-  if (current) {
-    Object.keys(current.columns ?? {}).forEach((col) => {
-      if (!base?.columns?.[col]) adds++;
-    });
-  }
-
-  // Remove columns
-  if (base) {
-    Object.keys(base.columns ?? {}).forEach((col) => {
-      if (!current?.columns?.[col]) removes++;
-    });
-  }
-
-  // Modify columns
-  if (current && base) {
-    Object.keys(current.columns ?? {}).forEach((col) => {
-      if (base.columns && current.columns?.[col] && base.columns[col]) {
-        if (base.columns[col].type !== current.columns[col].type) modifies++;
-      }
-    });
-  }
-
-  return { adds, removes, modifies };
-}
-
-function calculateChangeSummary(lineageGraph: LineageGraph) {
-  const modifiedSet = lineageGraph.modifiedSet;
-  let adds = 0;
-  let removes = 0;
-  let modifies = 0;
-  let col_added = 0;
-  let col_removed = 0;
-  let col_changed = 0;
-
-  modifiedSet.forEach((nodeId) => {
-    if (lineageGraph.nodes[nodeId].data.changeStatus === "added") adds++;
-    else if (lineageGraph.nodes[nodeId].data.changeStatus === "removed")
-      removes++;
-    else if (lineageGraph.nodes[nodeId].data.changeStatus === "modified")
-      modifies++;
-
-    const base = lineageGraph.nodes[nodeId].data.data.base;
-    const current = lineageGraph.nodes[nodeId].data.data.current;
-    const columnChange = calculateColumnChange(base, current);
-    col_added += columnChange.adds;
-    col_removed += columnChange.removes;
-    col_changed += columnChange.modifies;
-  });
-
-  return { adds, removes, modifies, col_added, col_removed, col_changed };
-}
-
-export interface Props {
-  lineageGraph: LineageGraph;
-}
-
-export function ChangeSummary({ lineageGraph }: Props) {
-  const { adds, removes, modifies, col_added, col_removed, col_changed } =
-    calculateChangeSummary(lineageGraph);
-
-  return (
-    <Grid
-      container
-      sx={{
-        mb: "10px",
-        borderTop: "1px solid",
-        borderColor: "divider",
-        p: "2.5vw",
-      }}
-    >
-      <Grid size={6} sx={{ borderColor: "divider" }}>
-        <SummaryText
-          name="Code Changes"
-          value={
-            <Grid container sx={{ width: "100%" }}>
-              <Grid size={4}>
-                <ChangeStatusCountLabel changeStatus="added" value={adds} />
-              </Grid>
-              <Grid size={4}>
-                <ChangeStatusCountLabel
-                  changeStatus="removed"
-                  value={removes}
-                />
-              </Grid>
-              <Grid size={4}>
-                <ChangeStatusCountLabel
-                  changeStatus="modified"
-                  value={modifies}
-                />
-              </Grid>
-            </Grid>
-          }
-        />
-      </Grid>
-      <Grid
-        size={6}
-        sx={{ borderLeft: "1px solid", borderLeftColor: "divider", pl: "12px" }}
-      >
-        <SummaryText
-          name="Column Changes"
-          value={
-            <Grid container sx={{ width: "100%" }}>
-              <Grid size={4}>
-                <ChangeStatusCountLabel
-                  changeStatus="col_added"
-                  value={col_added}
-                />
-              </Grid>
-              <Grid size={4}>
-                <ChangeStatusCountLabel
-                  changeStatus="col_removed"
-                  value={col_removed}
-                />
-              </Grid>
-              <Grid size={4}>
-                <ChangeStatusCountLabel
-                  changeStatus="col_changed"
-                  value={col_changed}
-                />
-              </Grid>
-            </Grid>
-          }
-        />
-      </Grid>
-    </Grid>
-  );
-}

package/recce-source/js/src/components/summary/SchemaSummary.tsx

@@ -1,123 +0,0 @@
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import CardContent from "@mui/material/CardContent";
-import CardHeader from "@mui/material/CardHeader";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useEffect, useState } from "react";
-import { mergeKeysWithStatus } from "@/lib/mergeKeys";
-import { LineageGraph, LineageGraphNode } from "../lineage/lineage";
-import { ResourceTypeTag, RowCountDiffTag } from "../lineage/NodeTag";
-import { SchemaView } from "../schema/SchemaView";
-
-interface SchemaDiffCardProps {
-  title: string;
-  node: LineageGraphNode;
-}
-
-function SchemaDiffCard({ node, ...props }: SchemaDiffCardProps) {
-  return (
-    <Card sx={{ maxWidth: 500 }}>
-      <CardHeader
-        title={
-          <Typography sx={{ fontSize: 18, fontWeight: "bold" }}>
-            {props.title}
-          </Typography>
-        }
-        subheader={
-          <Stack direction="row" spacing="8px" sx={{ p: "16px" }}>
-            <ResourceTypeTag node={node} />
-            {node.data.resourceType === "model" && (
-              <RowCountDiffTag node={node} />
-            )}
-          </Stack>
-        }
-      />
-      <CardContent>
-        <Box sx={{ display: "flex" }}>
-          <SchemaView
-            base={node.data.data.base}
-            current={node.data.data.current}
-          />
-        </Box>
-      </CardContent>
-    </Card>
-  );
-}
-
-function listChangedNodes(lineageGraph: LineageGraph) {
-  const changedNodes: LineageGraphNode[] = [];
-  const allNodes = lineageGraph.nodes;
-  lineageGraph.modifiedSet.forEach((nodeId) => {
-    const node = allNodes[nodeId];
-    const columnDiffStatus = mergeKeysWithStatus(
-      Object.keys(node.data.data.base?.columns ?? {}),
-      Object.keys(node.data.data.current?.columns ?? {}),
-    );
-    const isSchemaChanged = !Object.values(columnDiffStatus).every(
-      (el) => el === undefined,
-    );
-    // We only want to show nodes that have real schema changes.
-    // It doesn't include added or deleted model.
-    if (isSchemaChanged && node.data.data.base && node.data.data.current)
-      changedNodes.push(node);
-  });
-  return changedNodes;
-}
-
-export interface Props {
-  lineageGraph: LineageGraph;
-}
-
-export function SchemaSummary({ lineageGraph }: Props) {
-  const [changedNodes, setChangedNodes] = useState<LineageGraphNode[]>([]);
-
-  useEffect(() => {
-    setChangedNodes(listChangedNodes(lineageGraph));
-  }, [lineageGraph]);
-
-  return (
-    <>
-      <Box
-        sx={{
-          width: "100%",
-          pb: "10px",
-          mb: "20px",
-          mt: "20px",
-        }}
-      >
-        <Typography variant="h5" sx={{ fontSize: 24 }}>
-          Schema Summary
-        </Typography>
-      </Box>
-      <Box sx={{ width: "100%", pb: "10px", mb: "20px" }}>
-        {changedNodes.length === 0 ? (
-          <Typography sx={{ fontSize: 18, color: "grey.600" }}>
-            No schema changes detected.
-          </Typography>
-        ) : (
-          <Box
-            sx={{
-              display: "grid",
-              gridTemplateColumns: "repeat(auto-fill, minmax(400px, 1fr))",
-              gap: "2vw",
-              p: "2.5vw",
-              width: "100%",
-              bgcolor: "lightgray",
-            }}
-          >
-            {changedNodes.map((node) => {
-              return (
-                <SchemaDiffCard
-                  key={node.id}
-                  title={node.data.name}
-                  node={node}
-                />
-              );
-            })}
-          </Box>
-        )}
-      </Box>
-    </>
-  );
-}

package/recce-source/js/src/components/summary/SummaryView.tsx

@@ -1,29 +0,0 @@
-import Box from "@mui/material/Box";
-import Divider from "@mui/material/Divider";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
-import { ChangeSummary } from "./ChangeSummary";
-import { SchemaSummary } from "./SchemaSummary";
-
-export default function SummaryView() {
-  const { lineageGraph } = useLineageGraphContext();
-  return (
-    <>
-      <Stack sx={{ width: "100%", minHeight: "650px" }}>
-        <Box sx={{ width: "100%", pb: "10px", mb: "20px" }}>
-          <Typography variant="h5" sx={{ fontSize: 24 }}>
-            Change Summary
-          </Typography>
-        </Box>
-        {lineageGraph && (
-          <>
-            <ChangeSummary lineageGraph={lineageGraph} />
-            <Divider />
-            <SchemaSummary lineageGraph={lineageGraph} />
-          </>
-        )}
-      </Stack>
-    </>
-  );
-}

package/recce-source/js/src/components/timeout/IdleTimeoutBadge.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import Badge from "@mui/material/Badge";
-import Box from "@mui/material/Box";
-import { IoWarning } from "react-icons/io5";
-import { useIdleTimeout } from "@/lib/hooks/IdleTimeoutContext";
-import { formatDuration } from "@/lib/utils/formatTime";
-
-/**
- * Warning threshold in seconds - badge appears when remaining time is below this
- */
-const WARNING_THRESHOLD_SECONDS = 60;
-
-/**
- * Badge component that displays idle timeout warning countdown
- * Only shows when remaining time is below the warning threshold
- * Styled as a warning indicator to draw user attention
- */
-export function IdleTimeoutBadge() {
-  const { remainingSeconds, isEnabled } = useIdleTimeout();
-
-  // Don't render if idle timeout is not configured
-  if (!isEnabled || remainingSeconds === null) {
-    return null;
-  }
-
-  // Only show when below warning threshold
-  if (remainingSeconds > WARNING_THRESHOLD_SECONDS) {
-    return null;
-  }
-
-  return (
-    <Badge
-      color="warning"
-      variant="standard"
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        fontSize: "0.75rem",
-        mr: 2,
-      }}
-    >
-      <Box component={IoWarning} sx={{ display: "inline-flex" }} />
-      Idle timeout: {formatDuration(remainingSeconds, "compact")}
-    </Badge>
-  );
-}

package/recce-source/js/src/components/top-k/TopKDiffForm.tsx

@@ -1,58 +0,0 @@
-import Box from "@mui/material/Box";
-import FormControl from "@mui/material/FormControl";
-import FormLabel from "@mui/material/FormLabel";
-import NativeSelect from "@mui/material/NativeSelect";
-import { useEffect } from "react";
-import { TopKDiffParams } from "@/lib/api/profile";
-import useModelColumns from "@/lib/hooks/useModelColumns";
-import { RunFormProps } from "../run/types";
-
-type TopKDiffFormProps = RunFormProps<TopKDiffParams>;
-
-export function TopKDiffForm({
-  params,
-  onParamsChanged,
-  setIsReadyToExecute,
-}: TopKDiffFormProps) {
-  const { columns, isLoading, error } = useModelColumns(params.model);
-  const columnNames = columns.map((c) => c.name);
-
-  useEffect(() => {
-    setIsReadyToExecute(!!params.column_name);
-  }, [params, setIsReadyToExecute]);
-
-  if (isLoading) {
-    return <Box>Loading...</Box>;
-  }
-
-  if (columnNames.length === 0 || error) {
-    return (
-      <Box>
-        Error: Please provide the &apos;catalog.json&apos; to list column
-        candidates
-      </Box>
-    );
-  }
-
-  return (
-    <Box sx={{ m: "16px" }}>
-      <FormControl fullWidth>
-        <FormLabel sx={{ mb: 1 }}>Pick a column to show top-k</FormLabel>
-        <NativeSelect
-          value={params.column_name}
-          onChange={(e) => {
-            const column = e.target.value;
-            onParamsChanged({ ...params, column_name: column });
-          }}
-        >
-          <option value="">Select column</option>
-          {columnNames.map((c) => (
-            <option key={c} value={c} className="no-track-pii-safe">
-              {c}
-            </option>
-          ))}
-        </NativeSelect>
-      </FormControl>
-    </Box>
-  );
-}