@datarecce/ui 0.1.30 → 0.1.32

package/recce-source/js/src/components/valuediff/ValueDiffForm.tsx

@@ -0,0 +1,246 @@
+import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Stack from "@mui/material/Stack";
+import { useTheme } from "@mui/material/styles";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useEffect, useMemo, useState } from "react";
+import ReactSelect, {
+  type CSSObjectWithLabel,
+  type MultiValue,
+} from "react-select";
+import { colors } from "@/components/ui/mui-theme";
+import useModelColumns from "@/lib/hooks/useModelColumns";
+import { RunFormProps } from "../run/types";
+
+interface ColumnOption {
+  label: string;
+  value: string;
+}
+
+export interface ValueDiffFormParams {
+  model: string;
+  primary_key?: string | (string | undefined)[];
+  columns?: string[];
+}
+
+type ValueDiffFormProp = RunFormProps<ValueDiffFormParams>;
+
+export function ValueDiffForm({
+  params,
+  onParamsChanged,
+  setIsReadyToExecute,
+}: ValueDiffFormProp) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const [allColumns, setAllColumns] = useState<boolean>(
+    !params.columns || params.columns.length === 0,
+  );
+
+  const model = params.model;
+  const primaryKey = params.primary_key;
+
+  const selectStyles = useMemo(
+    () => ({
+      container: (base: CSSObjectWithLabel) => ({
+        ...base,
+        width: "100%",
+      }),
+      control: (base: CSSObjectWithLabel) => ({
+        ...base,
+        minHeight: "40px",
+        backgroundColor: isDark ? colors.neutral[700] : base.backgroundColor,
+        borderColor: isDark ? colors.neutral[600] : base.borderColor,
+      }),
+      menu: (base: CSSObjectWithLabel) => ({
+        ...base,
+        backgroundColor: isDark ? colors.neutral[700] : base.backgroundColor,
+      }),
+      option: (
+        base: CSSObjectWithLabel,
+        state: { isFocused: boolean; isSelected: boolean },
+      ) => ({
+        ...base,
+        backgroundColor: state.isSelected
+          ? isDark
+            ? colors.neutral[600]
+            : colors.iochmara[500]
+          : state.isFocused
+            ? isDark
+              ? colors.neutral[600]
+              : colors.iochmara[50]
+            : isDark
+              ? colors.neutral[700]
+              : base.backgroundColor,
+        color: isDark ? colors.neutral[200] : base.color,
+      }),
+      multiValue: (base: CSSObjectWithLabel) => ({
+        ...base,
+        backgroundColor: isDark ? colors.neutral[600] : base.backgroundColor,
+      }),
+      multiValueLabel: (base: CSSObjectWithLabel) => ({
+        ...base,
+        color: isDark ? colors.neutral[200] : base.color,
+      }),
+      multiValueRemove: (base: CSSObjectWithLabel) => ({
+        ...base,
+        color: isDark ? colors.neutral[400] : base.color,
+        "&:hover": {
+          backgroundColor: isDark ? colors.neutral[500] : colors.red[200],
+          color: isDark ? colors.neutral[200] : colors.red[600],
+        },
+      }),
+      input: (base: CSSObjectWithLabel) => ({
+        ...base,
+        color: isDark ? colors.neutral[200] : base.color,
+      }),
+      singleValue: (base: CSSObjectWithLabel) => ({
+        ...base,
+        color: isDark ? colors.neutral[200] : base.color,
+      }),
+      placeholder: (base: CSSObjectWithLabel) => ({
+        ...base,
+        color: isDark ? colors.neutral[400] : base.color,
+      }),
+    }),
+    [isDark],
+  );
+
+  const {
+    columns,
+    primaryKey: nodePrimaryKey,
+    isLoading,
+    error,
+  } = useModelColumns(params.model);
+
+  useEffect(() => {
+    if (!primaryKey && nodePrimaryKey) {
+      onParamsChanged({
+        ...params,
+        primary_key: nodePrimaryKey,
+      });
+    }
+  }, [primaryKey, nodePrimaryKey, params, onParamsChanged]);
+
+  useEffect(() => {
+    setIsReadyToExecute(!!(primaryKey && model));
+  }, [primaryKey, model, setIsReadyToExecute]);
+
+  const columnNames = columns.map((c) => c.name);
+
+  // primaryKey can be an array or string, map to array
+  const primaryKeys = Array.isArray(primaryKey)
+    ? primaryKey
+    : primaryKey
+      ? [primaryKey]
+      : undefined;
+
+  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 (
+    <Stack spacing={5} sx={{ m: "8px 24px", pb: "200px" }}>
+      <Box>
+        <Typography variant="body2" sx={{ mb: 1 }}>
+          Model
+        </Typography>
+        <TextField
+          fullWidth
+          size="small"
+          value={params.model}
+          slotProps={{ input: { readOnly: true } }}
+        />
+      </Box>
+      <Box>
+        <Typography variant="body2" sx={{ mb: 1 }}>
+          Primary key
+        </Typography>
+        <ReactSelect
+          placeholder="Select primary key"
+          className="no-track-pii-safe"
+          isMulti
+          closeMenuOnSelect={false}
+          options={columnNames.map((c) => ({ label: c, value: c }))}
+          value={(primaryKeys ?? [])
+            .filter((c): c is string => c !== undefined)
+            .map((c) => ({
+              label: c,
+              value: c,
+            }))}
+          onChange={(options: MultiValue<ColumnOption>) => {
+            const optionsArray = Array.isArray(options) ? options : [];
+            onParamsChanged({
+              ...params,
+              primary_key:
+                optionsArray.length == 1
+                  ? optionsArray[0].value
+                  : optionsArray.map((v) => v.value),
+            });
+          }}
+          styles={selectStyles}
+        />
+      </Box>
+      <Box>
+        <Typography variant="body2" sx={{ mb: 1 }}>
+          Columns
+        </Typography>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={allColumns}
+              onChange={(e) => {
+                setAllColumns(e.target.checked);
+                onParamsChanged({
+                  ...params,
+                  columns: undefined,
+                });
+              }}
+              size="small"
+            />
+          }
+          label="All columns"
+          sx={{ mb: "10px" }}
+        />
+        {!allColumns && (
+          <ReactSelect
+            isMulti
+            className="no-track-pii-safe"
+            closeMenuOnSelect={false}
+            options={columnNames.map((c) => ({ label: c, value: c }))}
+            value={(params.columns ?? []).map((c) => ({
+              label: c,
+              value: c,
+            }))}
+            onChange={(newValue: MultiValue<ColumnOption>) => {
+              let cols: string[] | undefined;
+              const newCols = Array.isArray(newValue)
+                ? newValue.map((v) => v.value)
+                : [];
+              if (newCols.length === 0) {
+                cols = undefined;
+              } else {
+                cols = newCols;
+              }
+              onParamsChanged({
+                ...params,
+                columns: cols,
+              });
+            }}
+            styles={selectStyles}
+          />
+        )}
+      </Box>
+    </Stack>
+  );
+}

package/recce-source/js/src/components/valuediff/ValueDiffResultView.tsx

@@ -0,0 +1,82 @@
+/**
+ * @file ValueDiffResultView.tsx
+ * @description View component for displaying value diff summary results
+ *
+ * Shows a summary table of column-level match statistics from a value_diff run.
+ * Each row represents a column with its match count and percentage.
+ */
+
+import Box from "@mui/material/Box";
+import React, { forwardRef, Ref } from "react";
+import { isValueDiffRun } from "@/lib/api/types";
+import { ValueDiffParams, ValueDiffResult } from "@/lib/api/valuediff";
+import { createDataGrid } from "@/lib/dataGrid";
+import {
+  type DataGridHandle,
+  EmptyRowsRenderer,
+  ScreenshotDataGrid,
+} from "../data-grid/ScreenshotDataGrid";
+import { RunResultViewProps } from "../run/types";
+
+type ValueDiffResultViewProp = RunResultViewProps;
+
+function _ValueDiffResultView(
+  { run }: ValueDiffResultViewProp,
+  ref: Ref<DataGridHandle>,
+) {
+  if (!isValueDiffRun(run)) {
+    throw new Error("Run type must be value_diff");
+  }
+
+  const result = run.result as ValueDiffResult;
+  const params = run.params as ValueDiffParams;
+
+  const gridData = createDataGrid(run);
+
+  if (!gridData) {
+    return null;
+  }
+
+  const { columns, rows } = gridData;
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "5px",
+        pt: "5px",
+        height: "100%",
+      }}
+    >
+      <Box sx={{ px: "16px" }}>
+        Model: {params.model}, {result.summary.total} total (
+        {result.summary.total - result.summary.added - result.summary.removed}{" "}
+        common, {result.summary.added} added, {result.summary.removed} removed)
+      </Box>
+
+      <Box
+        sx={{
+          flex: 1,
+          minHeight: 0,
+          maxHeight: "100%",
+          overflow: "auto",
+          borderTop: "1px solid",
+          borderBottom: "1px solid",
+          borderColor: "divider",
+        }}
+      >
+        <ScreenshotDataGrid
+          ref={ref}
+          columns={columns}
+          rows={rows}
+          renderers={{ noRowsFallback: <EmptyRowsRenderer /> }}
+          defaultColumnOptions={{ resizable: true }}
+          className="rdg-light"
+        />
+      </Box>
+    </Box>
+  );
+}
+
+export const ValueDiffResultView = forwardRef(_ValueDiffResultView);

package/recce-source/js/src/components/valuediff/shared.ts

@@ -0,0 +1,33 @@
+import { ColumnRenderMode } from "../../lib/api/types";
+
+export function columnPrecisionSelectOptions(
+  colName: string,
+  onColumnsRenderModeChanged: (col: Record<string, ColumnRenderMode>) => void,
+): { value: string; onClick: () => void }[] {
+  return [
+    {
+      value: "Show raw value",
+      onClick: () => {
+        onColumnsRenderModeChanged({ [colName]: "raw" });
+      },
+    },
+    {
+      value: "Show 2 decimal points",
+      onClick: () => {
+        onColumnsRenderModeChanged({ [colName]: 2 });
+      },
+    },
+    {
+      value: "Show as percentage",
+      onClick: () => {
+        onColumnsRenderModeChanged({ [colName]: "percent" });
+      },
+    },
+    {
+      value: "Show with net change",
+      onClick: () => {
+        onColumnsRenderModeChanged({ [colName]: "delta" });
+      },
+    },
+  ];
+}

package/recce-source/js/src/constants/tooltipMessage.ts

@@ -0,0 +1,3 @@
+export const DisableTooltipMessages = {
+  add_or_remove: "Unavailable for added or removed resources.",
+} as const;

package/recce-source/js/src/constants/urls.ts

@@ -0,0 +1 @@
+export const RECCE_SUPPORT_CALENDAR_URL = "https://cal.com/team/recce/chat";

package/recce-source/js/src/lib/UrlHash.ts

@@ -0,0 +1,12 @@
+"use client";
+export function getLocationHash() {
+  if (typeof window !== "undefined") {
+    return window.location.hash.replace("#", "");
+  }
+}
+
+export function setLocationHash(hash: string) {
+  if (typeof window !== "undefined") {
+    window.location.hash = hash;
+  }
+}

package/recce-source/js/src/lib/api/adhocQuery.ts

@@ -0,0 +1,70 @@
+import { AxiosInstance } from "axios";
+import { axiosClient } from "./axiosClient";
+import { SubmitOptions, submitRun } from "./runs";
+import { ColumnRenderMode, DataFrame } from "./types";
+
+export interface QueryParams
+  extends QueryRunParams,
+    QueryDiffParams,
+    QueryPreviewChangeParams {}
+
+export interface QueryPreviewChangeParams {
+  current_model?: string;
+  sql_template: string;
+  primary_keys?: string[];
+}
+
+export interface QueryRunParams {
+  sql_template: string;
+}
+
+export interface QueryViewOptions {
+  pinned_columns?: string[];
+  columnsRenderMode?: Record<string, ColumnRenderMode>;
+}
+
+export type QueryResult = DataFrame;
+
+export interface QueryDiffParams {
+  sql_template: string;
+  base_sql_template?: string;
+  primary_keys?: string[];
+}
+
+export interface QueryDiffResult {
+  base?: DataFrame;
+  current?: DataFrame;
+  diff?: DataFrame;
+}
+
+export interface QueryDiffViewOptions {
+  changed_only?: boolean;
+  primary_keys?: string[];
+  pinned_columns?: string[];
+  display_mode?: "inline" | "side_by_side";
+  columnsRenderMode?: Record<string, ColumnRenderMode>;
+}
+
+export async function submitQuery(
+  params: QueryRunParams,
+  options?: SubmitOptions,
+  client: AxiosInstance = axiosClient,
+) {
+  return await submitRun("query", params, options, client);
+}
+
+export async function submitQueryBase(
+  params: QueryRunParams,
+  options?: SubmitOptions,
+  client: AxiosInstance = axiosClient,
+) {
+  return await submitRun("query_base", params, options, client);
+}
+
+export async function submitQueryDiff(
+  params: QueryDiffParams,
+  options?: SubmitOptions,
+  client: AxiosInstance = axiosClient,
+) {
+  return await submitRun("query_diff", params, options, client);
+}

package/recce-source/js/src/lib/api/axiosClient.ts

@@ -0,0 +1,9 @@
+import { QueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { PUBLIC_API_URL } from "@/lib/const";
+
+export const axiosClient = axios.create({
+  baseURL: PUBLIC_API_URL,
+});
+
+export const reactQueryClient = new QueryClient();

package/recce-source/js/src/lib/api/cacheKeys.ts

@@ -0,0 +1,13 @@
+export const cacheKeys = {
+  rowCount: (model: string) => ["row_count", model],
+  lineage: () => ["lineage"],
+  checks: () => ["checks", "list"],
+  check: (checkId: string) => ["checks", checkId],
+  checkEvents: (checkId: string) => ["checks", checkId, "events"],
+  runs: () => ["runs"],
+  run: (runId: string) => ["runs", runId],
+  runsAggregated: () => ["runs_aggregated"],
+  flag: () => ["flag"],
+  instanceInfo: () => ["instance_info"],
+  user: () => ["user"],
+};