@datarecce/ui 0.1.40 → 0.2.0

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

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

@@ -1,81 +0,0 @@
-/**
- * @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 }}
-        />
-      </Box>
-    </Box>
-  );
-}
-
-export const ValueDiffResultView = forwardRef(_ValueDiffResultView);

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

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

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

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

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

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

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

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

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

@@ -1,13 +0,0 @@
-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"],
-};