@datarecce/ui 0.1.30 → 0.1.31

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

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

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

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

@@ -0,0 +1,24 @@
+/**
+ * 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

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

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

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

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

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