@datarecce/ui 0.1.29 → 0.1.31

package/recce-source/js/src/components/lineage/SingleEnvironmentQueryView.tsx

@@ -0,0 +1,152 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { RiMindMap, RiTerminalBoxLine } from "react-icons/ri";
+
+export function BaseEnvironmentSetupGuide() {
+  return (
+    <Stack
+      sx={{
+        flex: 1,
+        height: "100%",
+        minHeight: 0,
+        m: 1,
+        p: 2,
+        bgcolor: "iochmara.50",
+        borderRadius: 2,
+        boxShadow: 2,
+        justifyContent: "center",
+      }}
+    >
+      <Stack
+        sx={{ width: "80%", overflowY: "auto", gap: 3, px: 4, pb: 4 }}
+        alignSelf="center"
+      >
+        <Stack alignItems="center" spacing={2}>
+          <Box
+            sx={{
+              p: 1,
+              bgcolor: "background.paper",
+              borderRadius: "50%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: 2,
+            }}
+          >
+            <Box
+              component={RiTerminalBoxLine}
+              sx={{ fontSize: 28, color: "iochmara.500" }}
+            />
+          </Box>
+          <Typography variant="h5" sx={{ mt: 2 }}>
+            Wait, there's more!
+          </Typography>
+          <Typography sx={{ textAlign: "center" }}>
+            Recce is currently running in{" "}
+            <Typography component="span" sx={{ fontWeight: "bold" }}>
+              limited functionality mode
+            </Typography>{" "}
+            so you can run queries but{" "}
+            <Typography component="span" sx={{ fontWeight: "bold" }}>
+              can't diff the results yet!
+            </Typography>
+          </Typography>
+        </Stack>
+        <Stack spacing={1}>
+          <Typography>
+            To unlock the full power of Recce, set up a base environment of dbt
+            artifacts for comparison.
+          </Typography>
+          <Typography>Once configured, you'll be able to:</Typography>
+          <List sx={{ listStyleType: "disc", pl: 2 }}>
+            <ListItem sx={{ display: "list-item", p: 0 }}>
+              <Typography>Run statistical data diffs</Typography>
+            </ListItem>
+            <ListItem sx={{ display: "list-item", p: 0 }}>
+              <Typography>Run query diffs</Typography>
+            </ListItem>
+            <ListItem sx={{ display: "list-item", p: 0 }}>
+              <Typography>Save checks to your Recce Checklist</Typography>
+            </ListItem>
+            <ListItem sx={{ display: "list-item", p: 0 }}>
+              <Typography>...and more!</Typography>
+            </ListItem>
+          </List>
+          <Typography>
+            Take the next step toward better data impact assessment.
+          </Typography>
+        </Stack>
+        <Stack sx={{ width: "100%", mt: 3 }}>
+          <Button
+            color="iochmara"
+            variant="contained"
+            size="large"
+            onClick={() => {
+              window.open(
+                "https://docs.datarecce.io/get-started/#prepare-dbt-artifacts",
+                "_blank",
+              );
+            }}
+          >
+            Start Now
+          </Button>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}
+
+export function BaseEnvironmentSetupNotification() {
+  return (
+    <Stack direction="row" spacing="10px" alignItems="flex-start">
+      <Box
+        component={RiMindMap}
+        sx={{ color: "iochmara.main", fontSize: 20 }}
+      />
+      <Stack spacing="5px">
+        <Typography sx={{ fontWeight: 700 }}>
+          Single Environment Mode{" "}
+          <Typography
+            component="span"
+            sx={{ color: "error.main", fontWeight: 600 }}
+          >
+            Limited Functionality
+          </Typography>
+        </Typography>
+
+        <Typography sx={{ fontSize: "0.875rem" }}>
+          Single Environment Mode allows you to explore your dbt project but
+          won't show data comparisons between environments.
+        </Typography>
+        <Typography sx={{ fontSize: "0.875rem" }}>
+          To set up full environment comparison:
+        </Typography>
+        <List sx={{ pl: 2 }}>
+          <ListItem sx={{ p: 0, display: "list-item" }}>
+            <Typography sx={{ fontSize: "0.875rem" }}>
+              Run `recce debug` for setup assistance
+            </Typography>
+          </ListItem>
+          <ListItem sx={{ p: 0, display: "list-item" }}>
+            <Typography sx={{ fontSize: "0.875rem" }}>
+              Visit{" "}
+              <Link
+                sx={{ color: "primary.main", fontWeight: 500 }}
+                target="_blank"
+                href="https://docs.datarecce.io/configure-diff/"
+              >
+                docs
+              </Link>{" "}
+              for configuration details
+            </Typography>
+          </ListItem>
+        </List>
+      </Stack>
+    </Stack>
+  );
+}

package/recce-source/js/src/components/lineage/graph.test.ts

@@ -0,0 +1,31 @@
+import { getNeighborSet } from "./graph";
+
+test("Neighbor set", () => {
+  /*
+   * A -> B -> D -> E
+   *   -> C
+   */
+  const dag: Record<string, string[]> = {
+    A: ["B", "C"],
+    B: ["D"],
+    C: [],
+    D: ["E"],
+    E: [],
+  };
+
+  const getNeighbors = (id: string) => dag[id];
+
+  expect(getNeighborSet(["A", "B", "D"], getNeighbors)).toEqual(
+    new Set(["A", "B", "C", "D", "E"]),
+  );
+  expect(getNeighborSet(["B"], getNeighbors)).toEqual(new Set(["B", "D", "E"]));
+  expect(getNeighborSet(["B", "C"], getNeighbors)).toEqual(
+    new Set(["B", "C", "D", "E"]),
+  );
+  expect(getNeighborSet(["A"], getNeighbors, 1)).toEqual(
+    new Set(["A", "B", "C"]),
+  );
+  expect(getNeighborSet(["B", "D"], getNeighbors, 1)).toEqual(
+    new Set(["B", "D", "E"]),
+  );
+});

package/recce-source/js/src/components/lineage/graph.ts

@@ -0,0 +1,58 @@
+export function getNeighborSet(
+  nodeIds: string[],
+  getNeighbors: (id: string) => string[],
+  degree = 1000,
+) {
+  const neighborSet = new Set<string>();
+  const visited: Record<string, number | undefined> = {};
+
+  const dfs = (id: string, currentDegree: number) => {
+    if (currentDegree < 0) {
+      return;
+    }
+    if (visited[id] != null && visited[id] >= currentDegree) {
+      return;
+    }
+    visited[id] = currentDegree;
+
+    const neighbors = getNeighbors(id);
+
+    for (const neighborId of neighbors) {
+      dfs(neighborId, currentDegree - 1);
+    }
+
+    neighborSet.add(id);
+  };
+
+  for (const nodeId of nodeIds) {
+    dfs(nodeId, degree);
+  }
+
+  return neighborSet;
+}
+
+export function union<T>(...sets: Set<T>[]) {
+  const unionSet = new Set<T>();
+
+  sets.forEach((set) => {
+    set.forEach((key) => {
+      unionSet.add(key);
+    });
+  });
+
+  return unionSet;
+}
+
+export function intersect<T>(...sets: Set<T>[]) {
+  if (sets.length === 0) {
+    return new Set<T>();
+  }
+
+  let intersection = new Set<T>(sets[0]);
+
+  for (const set of sets) {
+    intersection = new Set([...intersection].filter((x) => set.has(x)));
+  }
+
+  return intersection;
+}

package/recce-source/js/src/components/lineage/lineage.test.ts

@@ -0,0 +1,169 @@
+import { LineageData } from "@/lib/api/info";
+import { buildLineageGraph } from "./lineage";
+
+test("lineage diff", () => {
+  const base: LineageData = {
+    metadata: { pr_url: "" },
+    nodes: {
+      a: {
+        id: "a",
+        unique_id: "a",
+        name: "a",
+      },
+      b: {
+        id: "b",
+        unique_id: "b",
+        name: "b",
+      },
+      c: {
+        id: "c",
+        unique_id: "c",
+        name: "c",
+      },
+      d: {
+        id: "d",
+        unique_id: "d",
+        name: "d",
+      },
+    },
+    parent_map: {
+      a: [],
+      b: ["a"],
+      c: ["a"],
+      d: ["b"],
+    },
+    catalog_metadata: null,
+  };
+
+  const current: LineageData = {
+    metadata: { pr_url: "" },
+    nodes: {
+      a: {
+        id: "a",
+        unique_id: "a",
+        name: "a",
+      },
+      b: {
+        id: "b",
+        unique_id: "b",
+        name: "b",
+      },
+      c: {
+        id: "c",
+        unique_id: "c",
+        name: "c",
+      },
+      d: {
+        id: "d",
+        unique_id: "d",
+        name: "d",
+      },
+    },
+    parent_map: {
+      a: [],
+      b: ["a"],
+      c: ["a"],
+      d: ["b", "c"],
+    },
+    catalog_metadata: null,
+  };
+
+  const { nodes, edges } = buildLineageGraph(base, current);
+
+  expect(Object.keys(nodes).length).toBe(4);
+  expect(Object.keys(edges).length).toBe(4);
+  expect(nodes.d.data.from).toBe("both");
+  expect(nodes.c.data.children.d.data?.from).toBe("current");
+  expect(nodes.d.data.parents.c.data?.from).toBe("current");
+  expect(edges.c_d.data?.from).toBe("current");
+});
+
+test("lineage diff 2", () => {
+  const base: LineageData = {
+    metadata: { pr_url: "" },
+    nodes: {
+      a: {
+        id: "a",
+        unique_id: "a",
+        name: "a",
+      },
+      b: {
+        id: "b",
+        unique_id: "b",
+        name: "b",
+      },
+      c: {
+        id: "c",
+        unique_id: "c",
+        name: "c",
+        checksum: {
+          name: "sha1",
+          checksum: "c#v1",
+        },
+      },
+      d: {
+        id: "d",
+        unique_id: "d",
+        name: "d",
+      },
+    },
+    parent_map: {
+      a: [],
+      b: ["a"],
+      c: ["b"],
+      d: ["c"],
+    },
+    catalog_metadata: null,
+  };
+
+  const current: LineageData = {
+    metadata: { pr_url: "" },
+    nodes: {
+      a2: {
+        id: "a2",
+        unique_id: "a2",
+        name: "a2",
+      },
+      b: {
+        id: "b",
+        unique_id: "b",
+        name: "b",
+      },
+      c: {
+        id: "c",
+        unique_id: "c",
+        name: "c",
+        checksum: {
+          name: "sha1",
+          checksum: "c#v2",
+        },
+      },
+      d: {
+        id: "d",
+        unique_id: "d",
+        name: "d",
+      },
+    },
+    parent_map: {
+      a2: [],
+      b: ["a2"],
+      c: ["b"],
+      d: ["c"],
+    },
+    catalog_metadata: null,
+  };
+
+  const { nodes, edges } = buildLineageGraph(base, current);
+
+  expect(Object.keys(nodes).length).toBe(5);
+  expect(Object.keys(edges).length).toBe(4);
+  expect(nodes.a.data.changeStatus).toBe("removed");
+  expect(nodes.a2.data.changeStatus).toBe("added");
+  expect(nodes.b.data.changeStatus).toBeUndefined();
+  expect(nodes.c.data.changeStatus).toBe("modified");
+  expect(nodes.d.data.changeStatus).toBeUndefined();
+
+  expect(nodes.b.data.parents.a.data?.changeStatus).toBe("removed");
+  expect(nodes.b.data.parents.a2.data?.changeStatus).toBe("added");
+  expect(nodes.b.data.children.c.data?.changeStatus).toBeUndefined();
+});