@datarecce/ui 0.1.30 → 0.1.31

package/recce-source/js/src/components/charts/TopKSummaryList.tsx

@@ -0,0 +1,457 @@
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import { useTheme } from "@mui/material/styles";
+import MuiTooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import {
+  AnimationOptions,
+  BarElement,
+  CategoryScale,
+  ChartData,
+  Chart as ChartJS,
+  ChartOptions,
+  LinearScale,
+} from "chart.js";
+import { Fragment } from "react";
+import { Bar } from "react-chartjs-2";
+import { TopKDiffResult, TopKResult } from "@/lib/api/profile";
+import {
+  formatAsAbbreviatedNumber,
+  formatIntervalMinMax,
+} from "@/utils/formatters";
+import { getChartThemeColors } from "./chartTheme";
+import { getBarColors, SquareIcon } from "./SquareIcon";
+
+export const INFO_VAL_COLOR = "#63B3ED";
+
+interface BarChartProps {
+  topKDiff: TopKDiffResult;
+  valids: number;
+  isDisplayTopTen: boolean;
+}
+
+interface Summary {
+  label: string;
+  count: number;
+  displayCount: string;
+  displayRatio: string;
+  isLastItemOthers: boolean;
+  isSpecialLabel: boolean;
+}
+
+function prepareSummaryList(
+  topK: TopKResult,
+  isDisplayTopTen: boolean,
+): Summary[] {
+  const endAtIndex = isDisplayTopTen ? 10 : topK.counts.length;
+  const counts = topK.counts.slice(0, endAtIndex);
+  const remainingSumCount =
+    topK.valids - counts.reduce((accum, curr) => accum + curr, 0);
+  const values = topK.values.slice(0, endAtIndex);
+
+  return values.concat([remainingSumCount]).map((v, index) => {
+    const isLastItemOthers = index === counts.length;
+    const count = isLastItemOthers ? remainingSumCount : counts[index];
+
+    let label: string;
+    let isSpecialLabel = false;
+
+    if (isLastItemOthers) {
+      label = "(others)";
+      isSpecialLabel = true;
+    } else if (v == null) {
+      label = "(null)";
+      isSpecialLabel = true;
+    } else if (typeof v === "string" && v.length === 0) {
+      label = "(empty)";
+      isSpecialLabel = true;
+    } else {
+      label = String(v);
+    }
+
+    return {
+      isLastItemOthers,
+      isSpecialLabel,
+      label,
+      count: count,
+      displayCount: formatAsAbbreviatedNumber(count),
+      displayRatio: formatIntervalMinMax(count / topK.valids) ?? "N/A",
+    };
+  });
+}
+
+function TopKChartTooltip({
+  base,
+  current,
+  barColors,
+  children,
+}: {
+  base: Summary;
+  current: Summary;
+  barColors: ReturnType<typeof getBarColors>;
+  children?: React.ReactNode;
+}) {
+  return (
+    <MuiTooltip
+      title={
+        <Box>
+          <Typography>
+            <SquareIcon color={barColors.current} />
+            Current: {current.count} ({current.displayRatio})
+          </Typography>
+          <Typography>
+            <SquareIcon color={barColors.base} />
+            Base: {base.count} ({base.displayRatio})
+          </Typography>
+        </Box>
+      }
+      arrow
+    >
+      <span>{children}</span>
+    </MuiTooltip>
+  );
+}
+
+export function TopKSummaryBarChart({
+  topKDiff,
+  isDisplayTopTen,
+}: BarChartProps) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const barColors = getBarColors(isDark);
+  // const [isDisplayTopTen, setIsDisplayTopTen] = useState<boolean>(true);
+  const currents = prepareSummaryList(topKDiff.current, isDisplayTopTen);
+  const bases = prepareSummaryList(topKDiff.base, isDisplayTopTen);
+
+  return (
+    <Box sx={{ width: "100%", px: 20, py: 2 }}>
+      <Box sx={{ display: "flex", alignItems: "center", flexDirection: "row" }}>
+        <Box sx={{ flex: 1 }} />
+        <Typography
+          component="h3"
+          sx={{ fontSize: "0.875rem", p: 1, color: "text.secondary" }}
+        >
+          <SquareIcon color={barColors.base} /> Base
+        </Typography>
+        <Typography
+          component="h3"
+          sx={{ fontSize: "0.875rem", p: 1, color: "text.secondary" }}
+        >
+          <SquareIcon color={barColors.current} /> Current
+        </Typography>
+        <Box sx={{ flex: 1 }} />
+      </Box>
+      {currents.map((current, index) => {
+        const base = bases[index];
+        if (
+          current.isLastItemOthers &&
+          current.count === 0 &&
+          base.count === 0
+        ) {
+          // skip rendering the others if both are empty
+          return <></>;
+        }
+        return (
+          <Fragment key={current.label}>
+            <TopKChartTooltip
+              base={base}
+              current={current}
+              barColors={barColors}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  width: "100%",
+                  "&:hover": { bgcolor: "action.hover" },
+                  px: 2,
+                }}
+              >
+                <Typography
+                  sx={{
+                    width: "10em",
+                    fontSize: "0.875rem",
+                    color: current.isSpecialLabel ? "grey.400" : "inherit",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  {current.label}
+                </Typography>
+                <Box
+                  sx={{
+                    display: "flex",
+                    width: "70%",
+                    flexDirection: "column",
+                  }}
+                >
+                  {/* Current Top-K */}
+                  <Box sx={{ display: "flex", height: "1em" }}>
+                    <CategoricalBarChart
+                      topkCount={current.count}
+                      topkLabel={current.label}
+                      valids={topKDiff.current.valids}
+                      color={barColors.current}
+                      isDark={isDark}
+                    />
+                    <Typography
+                      sx={{
+                        ml: 2.5,
+                        mr: 1,
+                        fontSize: "0.875rem",
+                        width: "6em",
+                      }}
+                    >
+                      {current.displayCount}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: "grey.400",
+                        fontSize: "0.875rem",
+                        width: "4em",
+                      }}
+                    >
+                      {current.displayRatio}
+                    </Typography>
+                  </Box>
+                  {/* Base Top-K */}
+                  <Box sx={{ display: "flex", height: "1em" }}>
+                    <CategoricalBarChart
+                      topkCount={base.count}
+                      topkLabel={base.label}
+                      valids={topKDiff.base.valids}
+                      color={barColors.base}
+                      isDark={isDark}
+                    />
+                    <Typography
+                      sx={{
+                        ml: 2.5,
+                        mr: 1,
+                        fontSize: "0.875rem",
+                        width: "6em",
+                      }}
+                    >
+                      {base.displayCount}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: "grey.400",
+                        fontSize: "0.875rem",
+                        width: "4em",
+                      }}
+                    >
+                      {base.displayRatio}
+                    </Typography>
+                  </Box>
+                </Box>
+              </Box>
+            </TopKChartTooltip>
+            <Divider />
+          </Fragment>
+        );
+      })}
+    </Box>
+  );
+}
+
+interface Props {
+  topk: TopKResult;
+  valids: number;
+  isDisplayTopTen: boolean;
+}
+
+/**
+ * A list of each topk summary item (categorical)
+ * Last list item will show 'others' when there are leftover values, which is the count difference of valids and displayed topk items
+ */
+export function TopKSummaryList({ topk, valids, isDisplayTopTen }: Props) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const barColors = getBarColors(isDark);
+  const endAtIndex = isDisplayTopTen ? 10 : topk.counts.length;
+  const displayList = topk.counts.slice(0, endAtIndex);
+  const remainingSumCount =
+    valids - displayList.reduce((accum, curr) => accum + curr, 0);
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      {displayList.concat([remainingSumCount]).map((v, index) => {
+        const isLastItemOthers = index === displayList.length;
+        const topkCount = isLastItemOthers ? remainingSumCount : v;
+        const catName = String(topk.values[index]);
+        const topkLabel = isLastItemOthers ? "(others)" : catName || "(empty)";
+        const displayTopkCount = formatAsAbbreviatedNumber(topkCount);
+        const displayTopkRatio = formatIntervalMinMax(topkCount / valids);
+        return (
+          <Fragment key={topkLabel}>
+            {!isLastItemOthers || topkCount > 0 ? (
+              <>
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    width: "100%",
+                    "&:hover": { bgcolor: "action.hover" },
+                    px: 1.5,
+                  }}
+                >
+                  <MuiTooltip title={topkLabel} placement="top-start">
+                    <Typography
+                      sx={{
+                        width: "14em",
+                        fontSize: "0.875rem",
+                        color:
+                          isLastItemOthers || catName.length === 0
+                            ? "grey.400"
+                            : "inherit",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {topkLabel}
+                    </Typography>
+                  </MuiTooltip>
+                  <Box sx={{ display: "flex", height: "2em", width: "10em" }}>
+                    <CategoricalBarChart
+                      topkCount={topkCount}
+                      topkLabel={topkLabel}
+                      valids={valids}
+                      color={barColors.info}
+                      isDark={isDark}
+                    />
+                  </Box>
+                  <MuiTooltip title={displayTopkCount} placement="top-start">
+                    <Typography
+                      sx={{
+                        ml: 2.5,
+                        mr: 1,
+                        fontSize: "0.875rem",
+                        width: "4em",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {displayTopkCount}
+                    </Typography>
+                  </MuiTooltip>
+                  <MuiTooltip title={displayTopkRatio} placement="top-start">
+                    <Typography
+                      sx={{
+                        color: "grey.400",
+                        fontSize: "0.875rem",
+                        width: "4em",
+                      }}
+                    >
+                      {displayTopkRatio}
+                    </Typography>
+                  </MuiTooltip>
+                </Box>
+                <Divider />
+              </>
+            ) : (
+              <></>
+            )}
+          </Fragment>
+        );
+      })}
+    </Box>
+  );
+}
+
+/**
+ * Props for creating a CategoricalBarChart Component
+ */
+export interface CategoricalBarChartProps {
+  topkCount: number;
+  topkLabel: number | string;
+  valids: number;
+  animation?: AnimationOptions<"bar">["animation"];
+  color?: string;
+  isDark?: boolean;
+}
+/**
+ * A Singular horizontal progress bar chart that visualizes categorical dataset, plotted 1:1 category group
+ */
+export function CategoricalBarChart({
+  topkCount,
+  topkLabel,
+  valids,
+  animation = false,
+  color = INFO_VAL_COLOR,
+  isDark = false,
+}: CategoricalBarChartProps) {
+  ChartJS.register(CategoryScale, BarElement, LinearScale);
+  const chartOptions = getCatBarChartOptions(topkCount, valids, isDark, {
+    animation,
+  });
+  const chartData = getCatBarChartData({
+    topkCount,
+    topkLabel,
+    color,
+  });
+
+  return <Bar data={chartData} options={chartOptions} plugins={[]} />;
+}
+
+/**
+ * @returns merged Chart.js option object for categorical 'bar'
+ */
+export function getCatBarChartOptions(
+  _count: CategoricalBarChartProps["topkCount"],
+  valids: number,
+  isDark = false,
+  { ...configOverrides }: ChartOptions<"bar"> = {},
+): ChartOptions<"bar"> {
+  const themeColors = getChartThemeColors(isDark);
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    indexAxis: "y",
+    scales: {
+      x: {
+        display: false,
+        max: valids,
+        grid: { display: false },
+        ticks: { color: themeColors.textColor },
+      },
+      y: {
+        display: false,
+        ticks: { color: themeColors.textColor },
+      },
+    },
+    plugins: {
+      tooltip: {
+        enabled: false,
+      },
+    },
+    ...configOverrides,
+  };
+}
+/**
+ * @returns merged Chart.js data object for categorical 'bar'
+ */
+export function getCatBarChartData({
+  topkLabel,
+  topkCount,
+  color = INFO_VAL_COLOR,
+}: Omit<CategoricalBarChartProps, "animation" | "valids">): ChartData<"bar"> {
+  return {
+    labels: [topkLabel], // showing top cats
+    datasets: [
+      {
+        indexAxis: "y",
+        data: [topkCount], // showing top cats
+        backgroundColor: color,
+        hoverBackgroundColor: color,
+        borderWidth: 0,
+        borderColor: color,
+        barPercentage: 1,
+        categoryPercentage: 0.6,
+      },
+    ],
+  };
+}

package/recce-source/js/src/components/charts/chartTheme.ts

@@ -0,0 +1,74 @@
+/**
+ * Shared Chart.js theme utilities for dark mode support
+ */
+
+export interface ChartThemeColors {
+  gridColor: string;
+  textColor: string;
+  borderColor: string;
+  tooltipBackgroundColor: string;
+  tooltipTextColor: string;
+}
+
+/**
+ * Get theme-aware colors for Chart.js charts
+ * @param isDark - Whether dark mode is active
+ * @returns Theme colors for Chart.js configuration
+ */
+export function getChartThemeColors(isDark: boolean): ChartThemeColors {
+  return {
+    gridColor: isDark ? "#4b5563" : "#d1d5db",
+    textColor: isDark ? "#e5e7eb" : "#374151",
+    borderColor: isDark ? "#6b7280" : "#9ca3af",
+    tooltipBackgroundColor: isDark ? "#1f2937" : "#ffffff",
+    tooltipTextColor: isDark ? "#e5e7eb" : "#111827",
+  };
+}
+
+/**
+ * Get Chart.js scale options with theme-aware colors
+ * @param isDark - Whether dark mode is active
+ * @param showGrid - Whether to show grid lines
+ * @returns Partial scale options for Chart.js
+ */
+export function getThemedScaleOptions(isDark: boolean, showGrid = true) {
+  const colors = getChartThemeColors(isDark);
+  return {
+    grid: {
+      color: showGrid ? colors.gridColor : undefined,
+      display: showGrid,
+    },
+    ticks: {
+      color: colors.textColor,
+    },
+    border: {
+      color: colors.borderColor,
+    },
+  };
+}
+
+/**
+ * Get Chart.js plugin options with theme-aware colors
+ * @param isDark - Whether dark mode is active
+ * @returns Plugin options for Chart.js (legend, title, tooltip)
+ */
+export function getThemedPluginOptions(isDark: boolean) {
+  const colors = getChartThemeColors(isDark);
+  return {
+    legend: {
+      labels: {
+        color: colors.textColor,
+      },
+    },
+    title: {
+      color: colors.textColor,
+    },
+    tooltip: {
+      backgroundColor: colors.tooltipBackgroundColor,
+      titleColor: colors.tooltipTextColor,
+      bodyColor: colors.tooltipTextColor,
+      borderColor: colors.borderColor,
+      borderWidth: 1,
+    },
+  };
+}

package/recce-source/js/src/components/check/CheckBreadcrumb.tsx

@@ -0,0 +1,97 @@
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
+
+interface CheckBreadcrumbProps {
+  name: string;
+  setName: (name: string) => void;
+}
+
+export function CheckBreadcrumb({ name, setName }: CheckBreadcrumbProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(name);
+  const editInputRef = useRef<HTMLInputElement>(null);
+
+  const handleClick = () => {
+    setEditValue(name);
+    setIsEditing(true);
+  };
+
+  const handleCommit = useCallback(() => {
+    setName(editValue);
+    setIsEditing(false);
+  }, [setName, editValue]);
+
+  const handleKeyDown: React.KeyboardEventHandler = (event) => {
+    if (event.key === "Enter") {
+      setName(editValue);
+      setIsEditing(false);
+    } else if (event.key === "Escape") {
+      setEditValue(name);
+      setIsEditing(false);
+    }
+  };
+
+  const handleChange: React.ChangeEventHandler = (
+    event: ChangeEvent<HTMLInputElement>,
+  ) => {
+    setEditValue(event.target.value);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        editInputRef.current &&
+        !editInputRef.current.contains(event.target as Node | null)
+      ) {
+        handleCommit();
+      }
+    };
+
+    if (isEditing) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isEditing, handleCommit]);
+
+  return (
+    <Box
+      sx={{
+        flex: "2",
+        fontSize: "1rem",
+        fontWeight: 500,
+        overflow: "hidden",
+        color: "text.primary",
+        cursor: "pointer",
+      }}
+      className="no-track-pii-safe"
+    >
+      {isEditing ? (
+        <TextField
+          inputRef={editInputRef}
+          value={editValue}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          size="small"
+          sx={{ width: "100%" }}
+          variant="outlined"
+        />
+      ) : (
+        <Box
+          sx={{
+            flex: "0 1 auto",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+          }}
+          onClick={handleClick}
+        >
+          {name}
+        </Box>
+      )}
+    </Box>
+  );
+}