@datarecce/ui 0.1.40 → 0.2.0

package/recce-source/js/src/components/rowcount/delta.test.ts

@@ -1,51 +0,0 @@
-import { deltaPercentageString } from "./delta";
-
-describe("deltaPercentageString", () => {
-  describe("when base < current (increase)", () => {
-    test("returns positive percentage", () => {
-      expect(deltaPercentageString(100, 150)).toBe("+50.0%");
-    });
-
-    test("returns positive percentage with decimal", () => {
-      expect(deltaPercentageString(100, 125)).toBe("+25.0%");
-    });
-
-    test("returns '+ <0.1 %' for very small increases", () => {
-      expect(deltaPercentageString(10000, 10005)).toBe("+ <0.1 %");
-    });
-  });
-
-  describe("when base > current (decrease)", () => {
-    test("returns negative percentage", () => {
-      expect(deltaPercentageString(100, 50)).toBe("-50.0%");
-    });
-
-    test("returns negative percentage with decimal", () => {
-      expect(deltaPercentageString(100, 75)).toBe("-25.0%");
-    });
-
-    test("returns '- <0.1 %' for very small decreases", () => {
-      expect(deltaPercentageString(10000, 9995)).toBe("- <0.1 %");
-    });
-  });
-
-  describe("when base === current (no change)", () => {
-    test("returns '0'", () => {
-      expect(deltaPercentageString(100, 100)).toBe("0");
-    });
-
-    test("returns '0' for zero values", () => {
-      expect(deltaPercentageString(0, 0)).toBe("0");
-    });
-  });
-
-  describe("when base is 0 (divide by zero)", () => {
-    test("returns 'N/A' when base is 0 and current is positive", () => {
-      expect(deltaPercentageString(0, 100)).toBe("N/A");
-    });
-
-    test("returns 'N/A' when base is 0 and current is negative", () => {
-      expect(deltaPercentageString(0, -100)).toBe("N/A");
-    });
-  });
-});

package/recce-source/js/src/components/rowcount/delta.ts

@@ -1,16 +0,0 @@
-export function deltaPercentageString(base: number, current: number) {
-  // Handle divide by zero - percentage change from 0 is undefined
-  if (base === 0 && current !== 0) {
-    return "N/A";
-  }
-
-  if (base < current) {
-    const p = ((current - base) / base) * 100;
-    return `+${p >= 0.1 ? p.toFixed(1) : " <0.1 "}%`;
-  } else if (base > current) {
-    const p = ((base - current) / base) * 100;
-    return `-${p >= 0.1 ? p.toFixed(1) : " <0.1 "}%`;
-  } else {
-    return "0";
-  }
-}

package/recce-source/js/src/components/run/RunList.tsx

@@ -1,303 +0,0 @@
-import Box from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import React, { ReactNode, useCallback } from "react";
-import { IconType } from "react-icons";
-import { FaCheckCircle, FaRegCheckCircle } from "react-icons/fa";
-import SimpleBar from "simplebar-react";
-import { cacheKeys } from "@/lib/api/cacheKeys";
-import { createCheckByRun } from "@/lib/api/checks";
-import { listRuns, waitRun } from "@/lib/api/runs";
-import { Run } from "@/lib/api/types";
-import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
-import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
-import { findByRunType } from "../run/registry";
-import "simplebar/dist/simplebar.min.css";
-import MuiTooltip from "@mui/material/Tooltip";
-import { PiX } from "react-icons/pi";
-import { trackHistoryAction } from "@/lib/api/track";
-import { useRecceInstanceContext } from "@/lib/hooks/RecceInstanceContext";
-import { useAppLocation } from "@/lib/hooks/useAppRouter";
-import { formatRunDate, RunStatusAndDate } from "./RunStatusAndDate";
-
-const RunListItem = ({
-  run,
-  isSelected,
-  onSelectRun,
-  onAddToChecklist,
-  onGoToCheck,
-}: {
-  run: Run;
-  isSelected: boolean;
-  onSelectRun: (runId: string) => void;
-  onAddToChecklist: (runId: string) => void;
-  onGoToCheck: (checkId: string) => void;
-}) => {
-  const { featureToggles } = useRecceInstanceContext();
-  const { apiClient } = useApiConfig();
-  const { data: fetchedRun } = useQuery({
-    queryKey: cacheKeys.run(run.run_id),
-    queryFn: async () => {
-      return await waitRun(run.run_id, undefined, apiClient);
-    },
-    enabled: run.status === "running",
-    retry: false,
-  });
-
-  const IconComponent: IconType = findByRunType(run.type).icon;
-  const checkId = run.check_id;
-  const hideAddToChecklist = featureToggles.disableUpdateChecklist;
-
-  return (
-    <Box
-      sx={(theme) => ({
-        minWidth: "200px",
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        p: "5px 20px",
-        cursor: "pointer",
-        borderBottom: "solid 1px",
-        borderBottomColor: "divider",
-        borderLeft: "4px solid",
-        borderLeftColor: isSelected ? "amber.400" : "transparent",
-        backgroundColor: isSelected
-          ? theme.palette.mode === "dark"
-            ? "amber.900"
-            : "amber.50"
-          : "transparent",
-        "&:hover": {
-          bgcolor: isSelected
-            ? theme.palette.mode === "dark"
-              ? "amber.800"
-              : "orange.50"
-            : theme.palette.mode === "dark"
-              ? "grey.800"
-              : "grey.200",
-        },
-      })}
-      onClick={() => {
-        onSelectRun(run.run_id);
-      }}
-    >
-      <Box
-        sx={{ display: "flex", alignItems: "center", gap: "12px" }}
-        onClick={() => {
-          return void 0;
-        }}
-      >
-        <IconComponent />
-        <Box
-          className="no-track-pii-safe"
-          sx={{
-            flex: 1,
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            color: run.name ? "inherit" : "grey.500",
-            fontSize: "11pt",
-            fontWeight: 500,
-          }}
-        >
-          {(run.name ?? "").trim() || "<no name>"}
-        </Box>
-        {checkId ? (
-          <MuiTooltip title="Go to Check">
-            <Typography
-              component="span"
-              aria-label="Go to Check"
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                onGoToCheck(checkId);
-              }}
-            >
-              <FaCheckCircle color="green" />
-            </Typography>
-          </MuiTooltip>
-        ) : !hideAddToChecklist ? (
-          <MuiTooltip title="Add to Checklist">
-            <Typography
-              component="span"
-              aria-label="Add to Checklist"
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                trackHistoryAction({ name: "add_to_checklist" });
-                onAddToChecklist(run.run_id);
-              }}
-            >
-              <FaRegCheckCircle />
-            </Typography>
-          </MuiTooltip>
-        ) : null}
-      </Box>
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "start",
-          fontSize: "11pt",
-          color: "grey.500",
-          gap: "3px",
-          alignItems: "center",
-        }}
-      >
-        <RunStatusAndDate run={fetchedRun ?? run} />
-      </Box>
-    </Box>
-  );
-};
-
-const DateSegmentItem = ({ runAt }: { runAt?: string }) => {
-  const dateTime = runAt ? formatRunDate(new Date(runAt)) : null;
-
-  return (
-    <Box
-      sx={{
-        minWidth: "200px",
-        width: "100%",
-        p: "5px 20px",
-        borderBottom: "solid 1px",
-        borderBottomColor: "divider",
-        color: "grey.500",
-        fontSize: "11pt",
-      }}
-    >
-      {dateTime}
-    </Box>
-  );
-};
-
-export const RunList = () => {
-  const { closeHistory } = useRecceActionContext();
-  const { apiClient } = useApiConfig();
-  const { data: runs, isLoading } = useQuery({
-    queryKey: cacheKeys.runs(),
-    queryFn: async () => {
-      return await listRuns(apiClient);
-    },
-    retry: false,
-  });
-
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
-      <Stack
-        direction="row"
-        alignItems="center"
-        sx={{
-          width: "100%",
-          flex: "0 0 54px",
-          px: "24px 8px",
-          borderBottom: "solid 1px",
-          borderBottomColor: "divider",
-        }}
-      >
-        <Typography variant="h6">History</Typography>
-        <Box sx={{ flex: 1 }} />
-        <IconButton
-          aria-label="Close History"
-          onClick={() => {
-            trackHistoryAction({ name: "hide" });
-            closeHistory();
-          }}
-        >
-          <PiX />
-        </IconButton>
-      </Stack>
-      <Box sx={{ flex: "1 1 auto" }}>
-        {isLoading ? (
-          "Loading..."
-        ) : runs?.length === 0 ? (
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100%",
-              color: "grey.400",
-            }}
-          >
-            No runs
-          </Box>
-        ) : (
-          <SimpleBar style={{ minHeight: "100%", height: 0 }}>
-            {(runs ?? []).map((run, idx) => {
-              if (runs != null) {
-                const previousDate =
-                  idx === 0
-                    ? null
-                    : new Date(runs[idx - 1].run_at).toDateString();
-                return (
-                  <DateDividedRunHistoryItem
-                    key={run.run_id}
-                    run={run}
-                    previousDate={previousDate}
-                  />
-                );
-              }
-            })}
-          </SimpleBar>
-        )}
-      </Box>
-    </Box>
-  );
-};
-
-interface DateDividedRunHistoryItemProps {
-  run: Run;
-  previousDate: string | null;
-}
-
-function DateDividedRunHistoryItem({
-  run,
-  previousDate,
-}: DateDividedRunHistoryItemProps): ReactNode {
-  const [, setLocation] = useAppLocation();
-  const queryClient = useQueryClient();
-  const { apiClient } = useApiConfig();
-  const { showRunId, runId } = useRecceActionContext();
-
-  const currentDate = new Date(run.run_at).toDateString();
-  const shouldRenderDateSegment =
-    previousDate != null && previousDate !== currentDate;
-
-  const handleSelectRun = (runId: string) => {
-    trackHistoryAction({ name: "click_run" });
-    showRunId(runId, false);
-  };
-
-  const handleAddToChecklist = useCallback(
-    async (clickedRunId: string) => {
-      const check = await createCheckByRun(clickedRunId, undefined, apiClient);
-
-      await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
-      setLocation(`/checks/?id=${check.check_id}`);
-    },
-    [setLocation, queryClient, apiClient],
-  );
-
-  const handleGoToCheck = useCallback(
-    (checkId: string) => {
-      trackHistoryAction({ name: "go_to_check" });
-      setLocation(`/checks/?id=${checkId}`);
-    },
-    [setLocation],
-  );
-  return (
-    <React.Fragment>
-      {shouldRenderDateSegment && (
-        <DateSegmentItem key={currentDate} runAt={run.run_at} />
-      )}
-      <RunListItem
-        key={run.run_id}
-        run={run}
-        isSelected={run.run_id === runId}
-        onSelectRun={handleSelectRun}
-        onGoToCheck={handleGoToCheck}
-        onAddToChecklist={handleAddToChecklist}
-      />
-    </React.Fragment>
-  );
-}

package/recce-source/js/src/components/run/RunModal.tsx

@@ -1,191 +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 Link from "@mui/material/Link";
-import MuiPopover from "@mui/material/Popover";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { ComponentType, useRef, useState } from "react";
-import { IoClose } from "react-icons/io5";
-import { IconInfo } from "@/components/icons";
-import { RunFormParamTypes, RunType } from "@/components/run/registry";
-import {
-  EXPLORE_FORM_EVENT,
-  isExploreAction,
-  trackExploreActionForm,
-} from "@/lib/api/track";
-import { Run } from "@/lib/api/types";
-import { RunFormProps } from "./types";
-
-interface RunModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onExecute: (type: RunType, params: RunFormParamTypes) => void;
-  title: string;
-  type: RunType;
-  params?: RunFormParamTypes;
-  initialRun?: Run;
-  RunForm?: ComponentType<RunFormProps<RunFormParamTypes>>;
-}
-
-const getDocumentationUrl = (type: RunType): string | null => {
-  const urlMap: Record<string, string> = {
-    value_diff: "https://docs.datarecce.io/features/lineage/#value-diff",
-    profile_diff: "https://docs.datarecce.io/features/lineage/#profile-diff",
-    histogram_diff:
-      "https://docs.datarecce.io/features/lineage/#histogram-diff",
-    top_k_diff: "https://docs.datarecce.io/features/lineage/#top-k-diff",
-  };
-  return urlMap[type] || null;
-};
-
-export const RunModal = ({
-  isOpen,
-  onClose,
-  onExecute,
-  type,
-  title,
-  params: defaultParams,
-  RunForm,
-}: RunModalProps) => {
-  const [params, setParams] = useState<Partial<RunFormParamTypes>>(
-    defaultParams ?? {},
-  );
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const [isReadyToExecute, setIsReadyToExecute] = useState(false);
-  const documentationUrl = getDocumentationUrl(type);
-  const executeClicked = useRef(false);
-
-  const handleClose = () => {
-    if (!executeClicked.current && isExploreAction(type)) {
-      trackExploreActionForm({
-        action: type,
-        event: EXPLORE_FORM_EVENT.CANCEL,
-      });
-    }
-    executeClicked.current = false; // Reset for next open
-    onClose();
-  };
-
-  return (
-    <MuiDialog
-      open={isOpen}
-      onClose={handleClose}
-      maxWidth="sm"
-      fullWidth
-      scroll="paper"
-      slotProps={{
-        paper: { sx: { height: "75%", minHeight: "400px" } },
-      }}
-    >
-      <DialogTitle sx={{ display: "flex", alignItems: "center" }}>
-        {title}{" "}
-        {documentationUrl && (
-          <>
-            <IconButton
-              size="small"
-              aria-label="Click this button to learn more about the SQL behind"
-              onMouseEnter={(e) => setAnchorEl(e.currentTarget)}
-              onMouseLeave={() => setAnchorEl(null)}
-              onClick={() => window.open(documentationUrl, "_blank")}
-            >
-              <Box component={IconInfo} sx={{ fontSize: "16px" }} />
-            </IconButton>
-            <MuiPopover
-              open={Boolean(anchorEl)}
-              anchorEl={anchorEl}
-              onClose={() => setAnchorEl(null)}
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "right",
-              }}
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              disableRestoreFocus
-              sx={{ pointerEvents: "none" }}
-              slotProps={{
-                paper: {
-                  sx: { bgcolor: "black", color: "white", p: 1 },
-                },
-              }}
-            >
-              <Typography sx={{ fontSize: "0.875rem" }}>
-                Click{" "}
-                <Link
-                  href={documentationUrl}
-                  target="_blank"
-                  sx={{
-                    textDecoration: "underline",
-                    color: "white",
-                    "&:hover": { color: "iochmara.300" },
-                  }}
-                >
-                  here
-                </Link>{" "}
-                to learn more about the SQL behind
-              </Typography>
-            </MuiPopover>
-          </>
-        )}
-      </DialogTitle>
-      <IconButton
-        aria-label="close"
-        onClick={handleClose}
-        sx={{
-          position: "absolute",
-          right: 8,
-          top: 8,
-          color: "grey.500",
-        }}
-      >
-        <IoClose />
-      </IconButton>
-      <DialogContent
-        sx={{
-          p: 0,
-          overflow: "auto",
-          borderTop: "1px solid",
-          borderBottom: "1px solid",
-          borderColor: "divider",
-        }}
-      >
-        <Box sx={{ contain: "layout" }}>
-          {RunForm && (
-            <RunForm
-              params={params}
-              onParamsChanged={setParams}
-              setIsReadyToExecute={setIsReadyToExecute}
-            />
-          )}
-        </Box>
-      </DialogContent>
-      <DialogActions>
-        <Stack direction="row" spacing="10px">
-          <Button
-            disabled={!isReadyToExecute}
-            color="iochmara"
-            variant="contained"
-            onClick={() => {
-              executeClicked.current = true;
-              if (isExploreAction(type)) {
-                trackExploreActionForm({
-                  action: type,
-                  event: EXPLORE_FORM_EVENT.EXECUTE,
-                });
-              }
-              onExecute(type, params as RunFormParamTypes);
-            }}
-          >
-            Execute
-          </Button>
-        </Stack>
-      </DialogActions>
-    </MuiDialog>
-  );
-};

package/recce-source/js/src/components/run/RunPage.tsx

@@ -1,26 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { cacheKeys } from "@/lib/api/cacheKeys";
-import { waitRun } from "@/lib/api/runs";
-import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
-import { RunView } from "./RunView";
-import { findByRunType, RegistryEntry, runTypeHasRef } from "./registry";
-
-interface RunPageProps {
-  runId: string;
-}
-
-export const RunPage = ({ runId }: RunPageProps) => {
-  const { apiClient } = useApiConfig();
-  const { error, data: run } = useQuery({
-    queryKey: cacheKeys.run(runId),
-    queryFn: async () => waitRun(runId, undefined, apiClient),
-  });
-
-  let RunResultView: RegistryEntry["RunResultView"] | undefined;
-  if (run && runTypeHasRef(run.type)) {
-    RunResultView = findByRunType(run.type)
-      .RunResultView as RegistryEntry["RunResultView"];
-  }
-
-  return <RunView error={error} run={run} RunResultView={RunResultView} />;
-};