Merge pull request #433 from DataRecce/feature/drc-701-allows-to-show…

…-histogram-and-top-k-in-the-schema-column [Feature] Allows to show histogram and top k in the schema column
DataRecce · Sep 30, 2024 · 920f7b6 · 920f7b6
2 parents c00ac17 + b1051b1
commit 920f7b6
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 5 deletions.
diff --git a/js/src/components/histogram/HistogramDiffForm.tsx b/js/src/components/histogram/HistogramDiffForm.tsx
@@ -53,6 +53,10 @@ function isDateTimeType(columnType: string) {
 
 interface HistogramDiffEditProps extends RunFormProps<HistogramDiffParams> {}
 
+export function supportsHistogramDiff(columnType: string) {
+  return !isStringDataType(columnType) && !isDateTimeType(columnType);
+}
+
 export function HistogramDiffForm({
   params,
   onParamsChanged,

diff --git a/js/src/components/schema/ColumnNameCell.tsx b/js/src/components/schema/ColumnNameCell.tsx
@@ -0,0 +1,98 @@
+import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
+import {
+  Flex,
+  Box,
+  Spacer,
+  Menu,
+  MenuButton,
+  IconButton,
+  Icon,
+  Portal,
+  MenuList,
+  MenuGroup,
+  MenuItem,
+} from "@chakra-ui/react";
+import { VscKebabVertical } from "react-icons/vsc";
+import { supportsHistogramDiff } from "../histogram/HistogramDiffForm";
+
+export function ColumnNameCell({
+  model,
+  name,
+  baseType,
+  currentType,
+}: {
+  model: string;
+  name: string;
+  baseType?: string;
+  currentType?: string;
+}) {
+  const { runAction } = useRecceActionContext();
+  const columnType = currentType || baseType;
+
+  const handleHistogramDiff = () => {
+    runAction(
+      "histogram_diff",
+      { model, column_name: name, column_type: columnType },
+      { showForm: false }
+    );
+  };
+
+  const handleTopkDiff = () => {
+    runAction(
+      "top_k_diff",
+      { model, column_name: name, k: 50 },
+      { showForm: false }
+    );
+  };
+  const addedOrRemoved = !baseType || !currentType;
+
+  return (
+    <Flex>
+      <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
+        {name}
+      </Box>
+      <Spacer />
+
+      <Menu>
+        {({ isOpen }) => (
+          <>
+            <MenuButton
+              className="row-context-menu"
+              visibility={isOpen ? "visible" : "hidden"}
+              width={isOpen ? "auto" : "0px"}
+              minWidth={isOpen ? "auto" : "0px"}
+              as={IconButton}
+              icon={<Icon as={VscKebabVertical} />}
+              variant="unstyled"
+              size={"sm"}
+            />
+
+            <Portal>
+              <MenuList lineHeight="20px">
+                <MenuGroup title="Diff" m="0" p="4px 12px">
+                  <MenuItem
+                    fontSize="10pt"
+                    onClick={handleHistogramDiff}
+                    isDisabled={
+                      addedOrRemoved ||
+                      (columnType ? !supportsHistogramDiff(columnType) : true)
+                    }
+                  >
+                    Histogram Diff
+                  </MenuItem>
+                  <MenuItem
+                    fontSize="10pt"
+                    onClick={handleTopkDiff}
+                    isDisabled={addedOrRemoved}
+                  >
+                    Top-k Diff
+                  </MenuItem>
+                </MenuGroup>
+              </MenuList>
+            </Portal>
+          </>
+        )}
+      </Menu>
+    </Flex>
+  );
+}
diff --git a/js/src/components/schema/SchemaView.tsx b/js/src/components/schema/SchemaView.tsx
@@ -21,10 +21,15 @@ export function SchemaView({
   current,
   enableScreenshot = false,
 }: SchemaViewProps) {
-  const { columns, rows } = useMemo(
-    () => toDataGrid(mergeColumns(base?.columns, current?.columns)),
-    [base, current]
-  );
+  const { columns, rows } = useMemo(() => {
+    const schemaDiff = mergeColumns(base?.columns, current?.columns);
+    const resourceType = current?.resource_type || base?.resource_type;
+    if (resourceType && ["model", "seed", "snapshot"].includes(resourceType)) {
+      return toDataGrid(schemaDiff, current?.name || base?.name);
+    } else {
+      return toDataGrid(schemaDiff);
+    }
+  }, [base, current]);
 
   const { lineageGraph } = useLineageGraphContext();
   const noCatalogBase = !lineageGraph?.catalogMetadata.base;

diff --git a/js/src/components/schema/schema.tsx b/js/src/components/schema/schema.tsx
@@ -4,6 +4,7 @@ import { ColumnOrColumnGroup } from "react-data-grid";
 
 import "./style.css";
 import { NodeData } from "@/lib/api/info";
+import { ColumnNameCell } from "./ColumnNameCell";
 
 interface SchemaDiffRow {
   name: string;
@@ -48,7 +49,7 @@ export function mergeColumns(
   return result;
 }
 
-export function toDataGrid(schemaDiff: SchemaDiff) {
+export function toDataGrid(schemaDiff: SchemaDiff, nodeName?: string) {
   function columnIndexCellClass(row: SchemaDiffRow) {
     if (row.baseIndex === undefined) {
       return "column-index-added";
@@ -111,6 +112,18 @@ export function toDataGrid(schemaDiff: SchemaDiff) {
       key: "name",
       name: "Name",
       resizable: true,
+      renderCell: ({ row, column }) => {
+        return nodeName ? (
+          <ColumnNameCell
+            model={nodeName}
+            name={row["name"]}
+            baseType={row["baseType"]}
+            currentType={row["currentType"]}
+          />
+        ) : (
+          row["name"]
+        );
+      },
       cellClass: columnNameCellClass,
     },
     {