@truedat/dd 8.11.6 → 8.11.9

package/src/components/__tests__/LineageGraphLayout.spec.js

@@ -0,0 +1,639 @@
+import {
+  applyFieldHandlesToEdges,
+  collapseLineageNodes,
+  bundleLineageEdges,
+  lineageEdge,
+  lineageCollapsedGroupIdsForDepth,
+  lineageMaximumExpansionDepth,
+  planLineageEdgeRoutes,
+  redesignedLineageEdges,
+} from "../LineageGraph";
+import { layoutVisibleLineageGraph } from "../../utils/lineageLayout";
+
+const groupNode = (id, x, y, w, h, options = {}) => ({
+  id,
+  type: "lineageGroup",
+  width: w,
+  height: h,
+  z: options.z,
+  position: { x, y },
+  data: {
+    absoluteGeometry: { x, y, w, h },
+    collapsed: false,
+    variant: "absolute",
+  },
+});
+
+const resourceNode = (id, parent, x, y, w, h, options = {}) => {
+  const parentGeometry = parent.data.absoluteGeometry;
+
+  return {
+    id,
+    type: "lineageResource",
+    parentId: parent.id,
+    width: w,
+    height: h,
+    z: options.z,
+    position: { x, y },
+    data: {
+      absoluteGeometry: {
+        x: parentGeometry.x + x,
+        y: parentGeometry.y + y,
+        w,
+        h,
+      },
+    },
+  };
+};
+
+const childGroupNode = (id, parent, x, y, w, h, options = {}) => ({
+  ...groupNode(
+    id,
+    parent.data.absoluteGeometry.x + x,
+    parent.data.absoluteGeometry.y + y,
+    w,
+    h,
+    options,
+  ),
+  parentId: parent.id,
+  position: { x, y },
+});
+
+const standaloneResourceNode = (id, x = 0, y = 0, options = {}) => ({
+  id,
+  type: "lineageResource",
+  width: options.width || 288,
+  height: options.height || 80,
+  position: { x, y },
+  data: {
+    absoluteGeometry: {
+      x,
+      y,
+      w: options.width || 288,
+      h: options.height || 80,
+    },
+    label: options.label || id,
+    z: options.z,
+  },
+});
+
+const absoluteGeometryFor = (nodes, id) =>
+  nodes.find((node) => node.id === id).data.absoluteGeometry;
+
+const overlaps = (geometryA, geometryB) =>
+  geometryA.x < geometryB.x + geometryB.w &&
+  geometryA.x + geometryA.w > geometryB.x &&
+  geometryA.y < geometryB.y + geometryB.h &&
+  geometryA.y + geometryA.h > geometryB.y;
+
+describe("lineageCollapsedGroupIdsForDepth", () => {
+  it("uses zero as the base view and opens groups from level one", () => {
+    const level1 = groupNode("level-1", 0, 0, 300, 300);
+    const level2 = childGroupNode("level-2", level1, 10, 50, 260, 220);
+    const level3 = childGroupNode("level-3", level2, 10, 50, 220, 140);
+    const leaf = resourceNode("leaf", level3, 10, 50, 120, 60);
+    const nodes = [level1, level2, level3, leaf];
+
+    expect(lineageCollapsedGroupIdsForDepth(nodes, 0)).toEqual(
+      new Set(["level-1", "level-2", "level-3"]),
+    );
+    expect(lineageCollapsedGroupIdsForDepth(nodes, 1)).toEqual(
+      new Set(["level-2", "level-3"]),
+    );
+    expect(lineageCollapsedGroupIdsForDepth(nodes, 2)).toEqual(
+      new Set(["level-3"]),
+    );
+    expect(lineageCollapsedGroupIdsForDepth(nodes, 3)).toEqual(new Set());
+    expect(lineageMaximumExpansionDepth(nodes)).toBe(3);
+  });
+
+  it("derives the maximum only from collapsible graph groups", () => {
+    const level1 = groupNode("level-1", 0, 0, 300, 300);
+    const leaf = resourceNode("leaf", level1, 10, 50, 120, 60);
+    const deepLevels = [level1];
+
+    for (let depth = 2; depth <= 7; depth += 1) {
+      deepLevels.push(
+        childGroupNode(
+          `level-${depth}`,
+          deepLevels[deepLevels.length - 1],
+          5,
+          5,
+          300 - depth * 10,
+          300 - depth * 10,
+        ),
+      );
+    }
+    const deepLeaf = resourceNode(
+      "deep-leaf",
+      deepLevels[deepLevels.length - 1],
+      5,
+      5,
+      80,
+      40,
+    );
+
+    expect(lineageMaximumExpansionDepth([level1, leaf])).toBe(1);
+    expect(lineageMaximumExpansionDepth([leaf])).toBe(0);
+    expect(lineageMaximumExpansionDepth([...deepLevels, deepLeaf])).toBe(7);
+  });
+});
+
+describe("layoutVisibleLineageGraph", () => {
+  it("keeps a compact footer gap below expanded group contents", () => {
+    const group = groupNode("group", 0, 0, 360, 220);
+    const leaf = resourceNode("leaf", group, 20, 58, 288, 80);
+    const laid = layoutVisibleLineageGraph({ nodes: [group, leaf], edges: [] });
+    const laidGroup = absoluteGeometryFor(laid, "group");
+    const laidLeaf = absoluteGeometryFor(laid, "leaf");
+
+    expect(laidGroup.y + laidGroup.h - (laidLeaf.y + laidLeaf.h)).toBe(12);
+  });
+
+  it("orders impact chains from left to right", () => {
+    const nodes = [
+      standaloneResourceNode("source"),
+      standaloneResourceNode("transform"),
+      standaloneResourceNode("target"),
+    ];
+    const laid = layoutVisibleLineageGraph({
+      nodes,
+      edges: [
+        { id: "e1", source: "source", target: "transform" },
+        { id: "e2", source: "transform", target: "target" },
+      ],
+      graphType: "impact",
+    });
+
+    expect(absoluteGeometryFor(laid, "source").x).toBeLessThan(
+      absoluteGeometryFor(laid, "transform").x,
+    );
+    expect(absoluteGeometryFor(laid, "transform").x).toBeLessThan(
+      absoluteGeometryFor(laid, "target").x,
+    );
+  });
+
+  it("reserves a wide horizontal corridor for curves entering arrowheads", () => {
+    const nodes = [
+      standaloneResourceNode("source"),
+      standaloneResourceNode("target"),
+    ];
+    const laid = layoutVisibleLineageGraph({
+      nodes,
+      edges: [{ id: "e1", source: "source", target: "target" }],
+      graphType: "impact",
+    });
+    const source = absoluteGeometryFor(laid, "source");
+    const target = absoluteGeometryFor(laid, "target");
+    const horizontalCorridor = target.x - (source.x + source.w);
+
+    expect(horizontalCorridor).toBeGreaterThanOrEqual(144);
+  });
+
+  it("normalizes lineage edges before ranking real flow left to right", () => {
+    const nodes = [
+      standaloneResourceNode("selected"),
+      standaloneResourceNode("upstream"),
+    ];
+    const laid = layoutVisibleLineageGraph({
+      nodes,
+      edges: [
+        lineageEdge(
+          undefined,
+          (id) => id,
+          new Map(nodes.map((node) => [node.id, node])),
+          "lineage",
+        )({ id: "e1", source: "selected", target: "upstream" }, 0),
+      ],
+      graphType: "lineage",
+    });
+
+    expect(absoluteGeometryFor(laid, "upstream").x).toBeLessThan(
+      absoluteGeometryFor(laid, "selected").x,
+    );
+  });
+
+  it("lets an open group span every rank occupied by its descendants", () => {
+    const group = groupNode("pipeline", 0, 0, 720, 300);
+    const source = resourceNode("source", group, 20, 52, 288, 80);
+    const target = resourceNode("target", group, 360, 52, 288, 80);
+    const laid = layoutVisibleLineageGraph({
+      nodes: [group, source, target],
+      edges: [{ id: "e1", source: "source", target: "target" }],
+    });
+    const laidGroup = absoluteGeometryFor(laid, "pipeline");
+    const laidSource = absoluteGeometryFor(laid, "source");
+    const laidTarget = absoluteGeometryFor(laid, "target");
+
+    expect(laidSource.x).toBeLessThan(laidTarget.x);
+    expect(laidGroup.x).toBeLessThanOrEqual(laidSource.x);
+    expect(laidGroup.x + laidGroup.w).toBeGreaterThanOrEqual(
+      laidTarget.x + laidTarget.w,
+    );
+  });
+
+  it("keeps strongly connected nodes in one rank", () => {
+    const nodes = [
+      standaloneResourceNode("a"),
+      standaloneResourceNode("b"),
+      standaloneResourceNode("c"),
+    ];
+    const laid = layoutVisibleLineageGraph({
+      nodes,
+      edges: [
+        { id: "e1", source: "a", target: "b" },
+        { id: "e2", source: "b", target: "c" },
+        { id: "e3", source: "c", target: "a" },
+      ],
+    });
+
+    expect(new Set(laid.map((node) => node.data.absoluteGeometry.x)).size).toBe(
+      1,
+    );
+  });
+
+  it("uses compact backend depth ranks for disconnected nodes", () => {
+    const nodes = [
+      standaloneResourceNode("first", 0, 0, { z: 0 }),
+      standaloneResourceNode("second", 0, 100, { z: 40 }),
+      standaloneResourceNode("third", 0, 200, { z: 80 }),
+    ];
+    const laid = layoutVisibleLineageGraph({ nodes, edges: [] });
+
+    expect(absoluteGeometryFor(laid, "first").x).toBeLessThan(
+      absoluteGeometryFor(laid, "second").x,
+    );
+    expect(absoluteGeometryFor(laid, "second").x).toBeLessThan(
+      absoluteGeometryFor(laid, "third").x,
+    );
+  });
+
+  it("is deterministic when node and edge inputs are permuted", () => {
+    const nodes = [
+      standaloneResourceNode("a"),
+      standaloneResourceNode("b"),
+      standaloneResourceNode("c"),
+      standaloneResourceNode("d"),
+    ];
+    const edges = [
+      { id: "e1", source: "a", target: "c" },
+      { id: "e2", source: "b", target: "d" },
+    ];
+    const first = layoutVisibleLineageGraph({ nodes, edges });
+    const second = layoutVisibleLineageGraph({
+      nodes: [...nodes].reverse(),
+      edges: [...edges].reverse(),
+    });
+    const geometry = (laid) =>
+      [...laid]
+        .sort((nodeA, nodeB) => nodeA.id.localeCompare(nodeB.id))
+        .map((node) => [node.id, node.data.absoluteGeometry]);
+
+    expect(geometry(second)).toEqual(geometry(first));
+  });
+
+  it("preserves the anchor position when its rendered height changes", () => {
+    const nodes = [
+      standaloneResourceNode("anchor", 0, 0, { height: 80 }),
+      standaloneResourceNode("sibling", 0, 120, { height: 80 }),
+    ];
+    const previousLayout = layoutVisibleLineageGraph({ nodes, edges: [] });
+    const expandedNodes = nodes.map((node) =>
+      node.id === "anchor"
+        ? {
+            ...node,
+            height: 240,
+            data: {
+              ...node.data,
+              absoluteGeometry: {
+                ...node.data.absoluteGeometry,
+                h: 240,
+              },
+            },
+          }
+        : node,
+    );
+    const expandedLayout = layoutVisibleLineageGraph({
+      anchorNodeId: "anchor",
+      nodes: expandedNodes,
+      edges: [],
+      previousLayout,
+    });
+
+    expect(absoluteGeometryFor(expandedLayout, "anchor")).toMatchObject({
+      x: absoluteGeometryFor(previousLayout, "anchor").x,
+      y: absoluteGeometryFor(previousLayout, "anchor").y,
+      h: 240,
+    });
+  });
+
+  it("orders bifurcations and convergences without overlapping peers", () => {
+    const nodes = [
+      standaloneResourceNode("source"),
+      standaloneResourceNode("branch-a", 0, 240),
+      standaloneResourceNode("branch-b", 0, 0),
+      standaloneResourceNode("target"),
+    ];
+    const laid = layoutVisibleLineageGraph({
+      nodes,
+      edges: [
+        { id: "e1", source: "source", target: "branch-a" },
+        { id: "e2", source: "source", target: "branch-b" },
+        { id: "e3", source: "branch-a", target: "target" },
+        { id: "e4", source: "branch-b", target: "target" },
+      ],
+    });
+    const branchA = absoluteGeometryFor(laid, "branch-a");
+    const branchB = absoluteGeometryFor(laid, "branch-b");
+
+    expect(branchA.x).toBe(branchB.x);
+    expect(overlaps(branchA, branchB)).toBe(false);
+    expect(absoluteGeometryFor(laid, "source").x).toBeLessThan(branchA.x);
+    expect(branchA.x).toBeLessThan(absoluteGeometryFor(laid, "target").x);
+  });
+
+  it("uses long-edge virtual nodes to keep parallel flows uncrossed", () => {
+    const nodes = [
+      standaloneResourceNode("source-a", 0, 0),
+      standaloneResourceNode("source-b", 0, 200),
+      standaloneResourceNode("middle-a", 0, 0),
+      standaloneResourceNode("middle-b", 0, 200),
+      standaloneResourceNode("target-a", 0, 200),
+      standaloneResourceNode("target-b", 0, 0),
+    ];
+    const edges = [
+      { id: "a-middle", source: "source-a", target: "middle-a" },
+      { id: "b-middle", source: "source-b", target: "middle-b" },
+      { id: "a-target", source: "source-a", target: "target-a" },
+      { id: "b-target", source: "source-b", target: "target-b" },
+      { id: "middle-a-target", source: "middle-a", target: "target-a" },
+      { id: "middle-b-target", source: "middle-b", target: "target-b" },
+    ];
+    const laid = layoutVisibleLineageGraph({ nodes, edges });
+
+    expect(absoluteGeometryFor(laid, "source-a").y).toBeLessThan(
+      absoluteGeometryFor(laid, "source-b").y,
+    );
+    expect(absoluteGeometryFor(laid, "middle-a").y).toBeLessThan(
+      absoluteGeometryFor(laid, "middle-b").y,
+    );
+    expect(absoluteGeometryFor(laid, "target-a").y).toBeLessThan(
+      absoluteGeometryFor(laid, "target-b").y,
+    );
+  });
+
+  it("packs nested groups across ranks without overlapping sibling groups", () => {
+    const root = groupNode("root", 0, 0, 1200, 600);
+    const pipeline = childGroupNode("pipeline", root, 20, 58, 720, 260);
+    const sibling = childGroupNode("sibling", root, 20, 340, 320, 180);
+    const source = resourceNode("nested-source", pipeline, 20, 58, 288, 80);
+    const target = resourceNode("nested-target", pipeline, 360, 58, 288, 80);
+    const siblingLeaf = resourceNode("sibling-leaf", sibling, 20, 58, 288, 80);
+    const laid = layoutVisibleLineageGraph({
+      nodes: [root, pipeline, sibling, source, target, siblingLeaf],
+      edges: [
+        { id: "nested", source: "nested-source", target: "nested-target" },
+        { id: "sibling", source: "sibling-leaf", target: "nested-target" },
+      ],
+    });
+    const laidPipeline = absoluteGeometryFor(laid, "pipeline");
+    const laidSibling = absoluteGeometryFor(laid, "sibling");
+    const laidRoot = absoluteGeometryFor(laid, "root");
+
+    expect(overlaps(laidPipeline, laidSibling)).toBe(false);
+    [laidPipeline, laidSibling].forEach((geometry) => {
+      expect(geometry.x).toBeGreaterThanOrEqual(laidRoot.x);
+      expect(geometry.y).toBeGreaterThanOrEqual(laidRoot.y);
+      expect(geometry.x + geometry.w).toBeLessThanOrEqual(
+        laidRoot.x + laidRoot.w,
+      );
+      expect(geometry.y + geometry.h).toBeLessThanOrEqual(
+        laidRoot.y + laidRoot.h,
+      );
+    });
+    expect(absoluteGeometryFor(laid, "nested-source").x).toBeLessThan(
+      absoluteGeometryFor(laid, "nested-target").x,
+    );
+  });
+
+  it("does not overlap deep nested sibling groups when everything is expanded", () => {
+    const nest = (id, parent, leafId) => {
+      const level2 = childGroupNode(`${id}-l2`, parent, 20, 58, 320, 220);
+      const level3 = childGroupNode(`${id}-l3`, level2, 20, 58, 300, 160);
+      const level4 = childGroupNode(`${id}-l4`, level3, 20, 58, 280, 110);
+      const leaf = resourceNode(leafId, level4, 20, 58, 288, 80);
+
+      return [level2, level3, level4, leaf];
+    };
+    const root = groupNode("root", 0, 0, 1600, 900);
+    const systemA = childGroupNode("system-a", root, 20, 58, 720, 400);
+    const systemB = childGroupNode("system-b", root, 760, 58, 720, 400);
+    const nestedA = nest("a", systemA, "table-a");
+    const nestedB = nest("b", systemB, "table-b");
+    const laid = layoutVisibleLineageGraph({
+      nodes: [root, systemA, systemB, ...nestedA, ...nestedB],
+      edges: [{ id: "flow", source: "table-a", target: "table-b" }],
+    });
+    [
+      ["system-a", "system-b"],
+      ["a-l2", "b-l2"],
+      ["a-l3", "b-l3"],
+      ["a-l4", "b-l4"],
+      ["table-a", "table-b"],
+    ].forEach(([leftId, rightId]) => {
+      expect(
+        overlaps(
+          absoluteGeometryFor(laid, leftId),
+          absoluteGeometryFor(laid, rightId),
+        ),
+      ).toBe(false);
+    });
+    expect(absoluteGeometryFor(laid, "table-a").x).toBeLessThan(
+      absoluteGeometryFor(laid, "table-b").x,
+    );
+  });
+});
+
+describe("positioned lineage layout", () => {
+  it("routes stacked siblings through the gap between their boxes", () => {
+    const group = groupNode("group", 0, 0, 360, 280);
+    const source = resourceNode("source", group, 24, 52, 288, 80);
+    const target = resourceNode("target", group, 24, 148, 288, 80);
+    const [edge] = planLineageEdgeRoutes(
+      [{ id: "e1", source: "source", target: "target", data: {} }],
+      [group, source, target],
+    );
+
+    expect(edge.data.edgeOffset).toBe(12);
+    expect(edge.data.routeGuide).toMatchObject({
+      kind: "bypass",
+      laneY: 140,
+    });
+  });
+
+  it("keeps output right and input left for a feedback relation", () => {
+    const source = groupNode("source", 400, 40, 288, 120);
+    const target = groupNode("target", 0, 180, 288, 120);
+    const nodes = [source, target];
+    const handledEdges = applyFieldHandlesToEdges(
+      [{ id: "e1", source: "source", target: "target", data: {} }],
+      new Map(nodes.map((node) => [node.id, node])),
+    );
+    const [edge] = planLineageEdgeRoutes(handledEdges, nodes);
+
+    expect(edge.data).toMatchObject({
+      sourcePortPosition: "right",
+      targetPortPosition: "left",
+      routeGuide: { kind: "corridor" },
+    });
+    expect(edge.sourceHandle).toBe("end-node");
+    expect(edge.targetHandle).toBe("start-node");
+  });
+
+  it("uses node handles when a relation does not identify a field", () => {
+    const source = {
+      ...groupNode("source", 0, 40, 288, 120),
+      data: {
+        ...groupNode("source", 0, 40, 288, 120).data,
+        fields: [{ name: "source_field" }],
+        variant: "lineage-redesigned",
+      },
+    };
+    const target = {
+      ...groupNode("target", 400, 40, 288, 120),
+      data: {
+        ...groupNode("target", 400, 40, 288, 120).data,
+        fields: [{ name: "target_field" }],
+        variant: "lineage-redesigned",
+      },
+    };
+    const [edge] = applyFieldHandlesToEdges(
+      [{ id: "e1", source: "source", target: "target", data: {} }],
+      new Map([
+        [source.id, source],
+        [target.id, target],
+      ]),
+    );
+
+    expect(edge.sourceHandle).toBe("end-node");
+    expect(edge.targetHandle).toBe("start-node");
+    expect(edge.data.sourceFieldIndex).toBeUndefined();
+    expect(edge.data.targetFieldIndex).toBeUndefined();
+  });
+
+  it("keeps explicit field relations attached to their field handles", () => {
+    const source = {
+      ...groupNode("source", 0, 40, 288, 120),
+      data: {
+        ...groupNode("source", 0, 40, 288, 120).data,
+        fields: [{ name: "source_field" }],
+        variant: "lineage-redesigned",
+      },
+    };
+    const target = {
+      ...groupNode("target", 400, 40, 288, 120),
+      data: {
+        ...groupNode("target", 400, 40, 288, 120).data,
+        fields: [{ name: "target_field" }],
+        variant: "lineage-redesigned",
+      },
+    };
+    const [edge] = applyFieldHandlesToEdges(
+      [
+        {
+          id: "e1",
+          source: "source",
+          target: "target",
+          data: { sourceFieldIndex: 0, targetFieldIndex: 0 },
+        },
+      ],
+      new Map([
+        [source.id, source],
+        [target.id, target],
+      ]),
+    );
+
+    expect(edge.sourceHandle).toBe("field-source-0");
+    expect(edge.targetHandle).toBe("field-target-0");
+  });
+
+  it("marks N-to-1 relations so they share one target trunk", () => {
+    const bundled = bundleLineageEdges([
+      {
+        id: "e1",
+        source: "source-a",
+        sourceHandle: "end-node",
+        target: "target",
+        targetHandle: "start-node",
+        data: {},
+      },
+      {
+        id: "e2",
+        source: "source-b",
+        sourceHandle: "end-node",
+        target: "target",
+        targetHandle: "start-node",
+        data: {},
+      },
+    ]);
+
+    expect(bundled).toEqual([
+      expect.objectContaining({
+        data: expect.objectContaining({
+          bundleSource: false,
+          bundleTarget: true,
+          bundleOffset: 40,
+        }),
+      }),
+      expect.objectContaining({
+        data: expect.objectContaining({
+          bundleSource: false,
+          bundleTarget: true,
+          bundleOffset: 40,
+        }),
+      }),
+    ]);
+  });
+
+  it("lets redesigned edge states control width and opacity", () => {
+    const [edge] = redesignedLineageEdges([
+      {
+        id: "e1",
+        source: "source",
+        sourceHandle: "end-node",
+        target: "target",
+        targetHandle: "start-node",
+        data: {},
+        style: {
+          stroke: "#b0b8c8",
+          strokeOpacity: 0.95,
+          strokeWidth: 2,
+        },
+      },
+    ]);
+
+    expect(edge.style).toEqual({});
+    expect(edge.data).toMatchObject({
+      edgeCurvature: 0.32,
+      edgePath: "bezier",
+    });
+  });
+});
+
+it("compacts empty open groups while preserving collapsed group summaries", () => {
+  const empty = groupNode("empty", 0, 0, 288, 82);
+  const parent = groupNode("parent", 400, 0, 288, 200);
+  const child = resourceNode("child", parent, 0, 50, 200, 80);
+  const result = collapseLineageNodes(
+    [empty, parent, child],
+    new Set(["parent"]),
+    () => {},
+  );
+  const compact = result.find(({ id }) => id === "empty");
+  expect(compact.height).toBe(44);
+  expect(compact.style.height).toBe(44);
+  expect(compact.data.absoluteGeometry.h).toBe(44);
+  const collapsed = result.find(({ id }) => id === "parent");
+  expect(collapsed.height).toBe(82);
+  expect(collapsed.data.collapsed).toBe(true);
+});