Adjust row count diff tag color

Signed-off-by: Wei-Chun, Chang <[email protected]>
DataRecce · Jan 15, 2025 · 35b5aa0 · 35b5aa0
1 parent 05a6a36
commit 35b5aa0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/js/src/components/lineage/GraphNode.tsx b/js/src/components/lineage/GraphNode.tsx
@@ -30,21 +30,34 @@ import { deltaPercentageString } from "../rowcount/delta";
 
 interface GraphNodeProps extends NodeProps<LineageGraphNode> {}
 
-function _RowCountDiffRate({ rowCount }: { rowCount: RowCount }) {
+function _RowCountDiffTag({ rowCount }: { rowCount: RowCount }) {
   const base = rowCount.base;
   const current = rowCount.curr;
   const baseLabel = rowCount.base === null ? "N/A" : `${rowCount.base} Rows`;
   const currentLabel = rowCount.curr === null ? "N/A" : `${rowCount.curr} Rows`;
 
+  let tagLabel;
+  let colorScheme;
   if (base === null && current === null) {
-    return <>Failed to load</>;
+    tagLabel = "Failed to load";
+    colorScheme = "gray";
   } else if (base === null || current === null) {
-    return <Text>{`${baseLabel} -> ${currentLabel}`}</Text>;
+    tagLabel = `${baseLabel} -> ${currentLabel}`;
+    colorScheme = base === null ? "green" : "red";
   } else if (base === current) {
-    return <Text>=</Text>;
+    tagLabel = "=";
+    colorScheme = "gray";
   } else if (base !== current) {
-    return <Text>{`${deltaPercentageString(base, current)} Rows`}</Text>;
+    tagLabel = `${deltaPercentageString(base, current)} Rows`;
+    colorScheme = base < current ? "green" : "red";
   }
+
+  return (
+    <Tag colorScheme={colorScheme}>
+      <TagLeftIcon as={findByRunType("row_count_diff")?.icon} />
+      <TagLabel>{tagLabel}</TagLabel>
+    </Tag>
+  );
 }
 
 const NodeRunsAggregated = ({
@@ -95,19 +108,14 @@ const NodeRunsAggregated = ({
         </Tooltip>
       )}
       <Spacer />
-      {rowCountChanged !== undefined && (
+      {runs && runs["row_count_diff"] && rowCountChanged !== undefined && (
         <Tooltip
-          label={`Row count (${rowCountChanged ? "changed" : "no change"})`}
+          label={`Row count (${rowCountChanged ? "changed" : "="})`}
           openDelay={500}
         >
-          <Tag colorScheme={rowCountChanged ? "red" : "green"}>
-            <TagLeftIcon as={findByRunType("row_count_diff")?.icon} />
-            <TagLabel>
-              {runs && runs["row_count_diff"] && (
-                <_RowCountDiffRate rowCount={runs["row_count_diff"].result} />
-              )}
-            </TagLabel>
-          </Tag>
+          <Box>
+            <_RowCountDiffTag rowCount={runs["row_count_diff"].result} />
+          </Box>
         </Tooltip>
       )}
     </Flex>

diff --git a/js/src/components/lineage/PresetCheckRecommendation.tsx b/js/src/components/lineage/PresetCheckRecommendation.tsx
@@ -18,7 +18,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { cacheKeys } from "@/lib/api/cacheKeys";
 import { getCheck, listChecks } from "@/lib/api/checks";
 import { InfoOutlineIcon } from "@chakra-ui/icons";
-import { select, SelectInput } from "@/lib/api/select";
+import { select } from "@/lib/api/select";
 import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
 import { submitRunFromCheck } from "@/lib/api/runs";
 import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
@@ -106,7 +106,7 @@ export const PresetCheckRecommendation = () => {
     if (ignored) {
       setIgnoreRecommend(true);
     }
-  }, []);
+  }, [recommendationKey]);
 
   useEffect(() => {
     if (!recommendedCheck || !selectedNodes) {

diff --git a/js/src/components/rowcount/RowCountDiffResultView.tsx b/js/src/components/rowcount/RowCountDiffResultView.tsx
@@ -46,11 +46,10 @@ function _RowCountDiffResultView(
     const result = runResult[key];
     const base = isNumber(result?.base) ? result?.base : null;
     const current = isNumber(result?.curr) ? result?.curr : null;
-    let delta = "No Change";
+    let delta = "=";
 
     if (base !== null && current !== null) {
-      delta =
-        base !== current ? deltaPercentageString(base, current) : "No Change";
+      delta = base !== current ? deltaPercentageString(base, current) : "=";
     } else {
       if (base === current) {
         delta = "N/A";