@truedat/dd 8.12.10 → 8.12.12

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

@@ -455,6 +455,27 @@ describe("layoutVisibleLineageGraph", () => {
 });
 
 describe("positioned lineage layout", () => {
+  it("drops a route from a previous layout when its endpoint is unavailable", () => {
+    const source = groupNode("source", 0, 0, 288, 120);
+    const [edge] = planLineageEdgeRoutes(
+      [
+        {
+          id: "e1",
+          source: "source",
+          target: "missing",
+          data: {
+            edgeOffset: 12,
+            routeGuide: { kind: "corridor", laneX: 400 },
+          },
+        },
+      ],
+      [source],
+    );
+
+    expect(edge.data.routeGuide).toBeUndefined();
+    expect(edge.data.edgeOffset).toBeUndefined();
+  });
+
   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);

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

@@ -0,0 +1,56 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import LineageGraphNode from "../LineageGraphNode";
+
+jest.mock("../LineageResourceNode", () => () => <div>Resource</div>);
+jest.mock("@truedat/core/components/graph/LineageGroupNode", () => () => (
+  <div>Group</div>
+));
+
+it.each(["lineageResource", "lineageGroup"])(
+  "unpins %s without selecting or expanding the node",
+  (type) => {
+    const onUnpin = jest.fn();
+    const onClick = jest.fn();
+    const onDoubleClick = jest.fn();
+    const view = render(
+      <div
+        className="react-flow__node"
+        tabIndex={0}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
+        role="button"
+      >
+        <LineageGraphNode type={type} data={{ onUnpin }} />
+      </div>,
+    );
+    const button = screen.getByRole("button", { name: "Unpin focus" });
+    fireEvent.click(button);
+    fireEvent.doubleClick(button);
+    expect(onUnpin).toHaveBeenCalledTimes(1);
+    expect(onClick).not.toHaveBeenCalled();
+    expect(onDoubleClick).not.toHaveBeenCalled();
+    expect(view.container.querySelector(".react-flow__node")).toHaveFocus();
+  },
+);
+
+it("renders no pin control for an unpinned node", () => {
+  render(<LineageGraphNode type="lineageResource" data={{}} />);
+  expect(
+    screen.queryByRole("button", { name: "Unpin focus" }),
+  ).not.toBeInTheDocument();
+});
+
+it("keeps Space keyup away from the canvas pan shortcut", () => {
+  const onKeyUp = jest.fn();
+  render(
+    <div onKeyUp={onKeyUp} role="presentation">
+      <LineageGraphNode type="lineageResource" data={{ onUnpin: jest.fn() }} />
+    </div>,
+  );
+  fireEvent.keyUp(screen.getByRole("button", { name: "Unpin focus" }), {
+    key: " ",
+    code: "Space",
+  });
+  expect(onKeyUp).not.toHaveBeenCalled();
+});

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

@@ -0,0 +1,338 @@
+import { act, fireEvent, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Graph from "@truedat/core/components/Graph";
+import { render } from "@truedat/test/render";
+import { LineageGraph } from "../LineageGraph";
+
+jest.mock("@truedat/core/components/Graph", () =>
+  jest.fn(
+    ({
+      nodes,
+      edges,
+      topControls,
+      onNodeClick,
+      onNodeDoubleClick,
+      onPaneClick,
+    }) => (
+      <div>
+        {topControls}
+        {nodes.map((node) => (
+          <div key={node.id}>
+            <button
+              className={`react-flow__node ${node.className || ""}`}
+              data-id={node.id}
+              data-selected={node.data.focusSelected}
+              data-dimmed={node.data.focusDimmed}
+              onClick={(event) => onNodeClick(event, node)}
+              onDoubleClick={(event) => onNodeDoubleClick(event, node)}
+              type="button"
+            >
+              {`Node ${node.id}`}
+            </button>
+            {node.data.onUnpin ? (
+              <button
+                type="button"
+                onClick={node.data.onUnpin}
+              >{`Unpin node ${node.id}`}</button>
+            ) : null}
+          </div>
+        ))}
+        {edges.map((edge) => (
+          <button
+            key={edge.id}
+            data-focused={edge.data.focusFocused}
+            onClick={edge.data.onClick}
+            type="button"
+          >
+            {`Edge ${edge.id}`}
+          </button>
+        ))}
+        <button onClick={onPaneClick} type="button">
+          Canvas
+        </button>
+      </div>
+    ),
+  ),
+);
+
+const resources = ["A", "B", "C"].map((id) => ({ id, name: id }));
+const defaultProps = {
+  resources,
+  edges: [],
+  groups: [],
+  cancelPoll: jest.fn(),
+  graphId: "graph-1",
+};
+const nodeButton = (id) => screen.getByRole("button", { name: `Node ${id}` });
+const pinA = () => {
+  fireEvent.click(nodeButton("A"));
+  fireEvent.click(screen.getByRole("button", { name: "Pin focus" }));
+};
+const dock = (container) =>
+  container.querySelector(".lineage-graph__dock-context-bar");
+const pinChip = (container) =>
+  container.querySelector(".lineage-graph__dock-pin");
+
+describe("LineageGraph pinned focus", () => {
+  it("shows the new selection without an extra pin chip", () => {
+    const { container } = render(<LineageGraph {...defaultProps} />);
+    pinA();
+    fireEvent.click(nodeButton("B"));
+    expect(nodeButton("A")).toHaveClass("lineage-node--pinned");
+    expect(nodeButton("B")).toHaveAttribute("data-selected", "true");
+    expect(nodeButton("B")).toHaveAttribute("data-dimmed", "false");
+    expect(dock(container)).toHaveTextContent("B");
+    expect(pinChip(container)).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Clear selection for B" }),
+    ).toBeInTheDocument();
+    fireEvent.mouseDown(document.body);
+    fireEvent.click(screen.getByRole("button", { name: "Canvas" }));
+    expect(nodeButton("A")).toHaveClass("lineage-node--pinned");
+    expect(dock(container)).toHaveTextContent("A");
+    expect(pinChip(container)).not.toBeInTheDocument();
+  });
+
+  it.each(["Enter", " "])(
+    "selects with %s and restores default focus when unpinning the node",
+    (key) => {
+      const { container } = render(<LineageGraph {...defaultProps} />);
+      pinA();
+      fireEvent.keyDown(nodeButton("B"), { key });
+      expect(nodeButton("B")).toHaveAttribute("data-selected", "true");
+      fireEvent.click(screen.getByRole("button", { name: "Unpin node A" }));
+      expect(nodeButton("A")).not.toHaveClass("lineage-node--pinned");
+      expect(nodeButton("B")).not.toHaveAttribute("data-selected", "true");
+      expect(nodeButton("C")).not.toHaveAttribute("data-dimmed", "true");
+      expect(dock(container)).not.toBeInTheDocument();
+    },
+  );
+
+  it("reopens the pinned context, replaces pin explicitly and clears only selection", () => {
+    const { container } = render(<LineageGraph {...defaultProps} />);
+    pinA();
+    fireEvent.click(nodeButton("B"));
+    fireEvent.click(screen.getByRole("button", { name: "Pin focus" }));
+    expect(nodeButton("A")).not.toHaveClass("lineage-node--pinned");
+    expect(nodeButton("B")).toHaveClass("lineage-node--pinned");
+    expect(pinChip(container)).not.toBeInTheDocument();
+    fireEvent.click(
+      screen.getByRole("button", { name: "Clear selection for B" }),
+    );
+    expect(dock(container)).toHaveTextContent("B");
+    fireEvent.click(
+      within(dock(container)).getByRole("button", { name: "B Table" }),
+    );
+    expect(screen.getByLabelText("Lineage inspector")).toBeInTheDocument();
+    expect(nodeButton("B")).toHaveAttribute("data-selected", "true");
+    act(() => jest.runOnlyPendingTimers());
+  });
+
+  it("retains pin through loading but clears it when the graph changes or the node is removed", () => {
+    const view = render(<LineageGraph {...defaultProps} />);
+    pinA();
+    view.rerender(<LineageGraph {...defaultProps} loading resources={[]} />);
+    view.rerender(<LineageGraph {...defaultProps} />);
+    expect(nodeButton("A")).toHaveClass("lineage-node--pinned");
+    view.rerender(<LineageGraph {...defaultProps} graphId="graph-2" />);
+    expect(nodeButton("A")).not.toHaveClass("lineage-node--pinned");
+    pinA();
+    view.rerender(
+      <LineageGraph
+        {...defaultProps}
+        graphId="graph-2"
+        resources={resources.slice(1)}
+      />,
+    );
+    expect(
+      screen.queryByRole("button", { name: "Unpin focus" }),
+    ).not.toBeInTheDocument();
+  });
+});
+
+it("inspects an unrelated edge without replacing the pinned focus", () => {
+  render(
+    <LineageGraph
+      {...defaultProps}
+      edges={[{ id: "BC", source: "B", target: "C" }]}
+    />,
+  );
+  pinA();
+  fireEvent.click(screen.getByRole("button", { name: "Edge BC" }));
+  expect(nodeButton("A")).toHaveClass("lineage-node--pinned");
+  expect(screen.getByRole("button", { name: "Edge BC" })).toHaveAttribute(
+    "data-focused",
+    "false",
+  );
+  expect(screen.getByLabelText("Lineage inspector")).toBeInTheDocument();
+});
+
+it("keeps pin when selecting a search result or double-clicking another node", () => {
+  const { container } = render(<LineageGraph {...defaultProps} />);
+  pinA();
+  fireEvent.click(screen.getByRole("button", { name: "Search nodes" }));
+  fireEvent.change(
+    screen.getByRole("textbox", { name: "Search graph nodes" }),
+    { target: { value: "B" } },
+  );
+  act(() => jest.advanceTimersByTime(300));
+  fireEvent.click(container.querySelector(".lineage-graph__search-result"));
+  expect(nodeButton("B")).toHaveAttribute("data-selected", "true");
+  expect(nodeButton("A")).toHaveClass("lineage-node--pinned");
+  fireEvent.doubleClick(nodeButton("C"));
+  expect(nodeButton("C")).toHaveAttribute("data-selected", "true");
+  expect(nodeButton("A")).toHaveClass("lineage-node--pinned");
+});
+
+it("keeps a hidden pinned child through collapse and expansion", () => {
+  const topology = {
+    nodes: [{ id: "G", name: "Group", class: "Group" }, ...resources],
+    contains: [{ source: "G", target: "A" }],
+    depends: [],
+  };
+  const { container } = render(
+    <LineageGraph
+      {...defaultProps}
+      topology={topology}
+      defaultExpansionDepth={10}
+    />,
+  );
+  pinA();
+  fireEvent.click(screen.getByRole("button", { name: "Collapse all" }));
+  expect(
+    screen.queryByRole("button", { name: "Node A" }),
+  ).not.toBeInTheDocument();
+  expect(dock(container)).toHaveTextContent("A");
+  expect(nodeButton("G")).not.toHaveClass("lineage-node--pinned");
+  fireEvent.click(screen.getByRole("button", { name: "Expand all" }));
+  expect(nodeButton("A")).toHaveClass("lineage-node--pinned");
+});
+
+it.each([
+  [false, "A"],
+  [true, "A"],
+  [true, "nested"],
+])(
+  "opens only the ancestors when centering a hidden node (pinned: %s, node: %s)",
+  async (pinned, targetId) => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    const topology = {
+      nodes: [
+        { id: "G", name: "Group", class: "Group" },
+        { id: "nested", name: "Nested", class: "Group" },
+        { id: "other", name: "Other", class: "Group" },
+        ...resources,
+      ],
+      contains: [
+        { source: "G", target: "nested" },
+        { source: "nested", target: "A" },
+        { source: "other", target: "B" },
+      ],
+      depends: [],
+    };
+    const { container } = render(
+      <LineageGraph
+        {...defaultProps}
+        topology={topology}
+        defaultExpansionDepth={10}
+      />,
+    );
+    fireEvent.keyDown(nodeButton(targetId), { key: "Enter" });
+    if (pinned) {
+      fireEvent.click(screen.getByRole("button", { name: "Pin focus" }));
+    }
+    fireEvent.click(screen.getByRole("button", { name: "Collapse all" }));
+    expect(screen.queryByRole("button", { name: "Node A" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Node nested" })).toBeNull();
+    const requestKey =
+      Graph.mock.calls.at(-1)[0].graphOptions.focusNodeRequestKey;
+    if (pinned) {
+      fireEvent.click(screen.getByRole("button", { name: "Canvas" }));
+      fireEvent.click(
+        within(dock(container)).getByRole("button", { name: /^(A|Nested)/ }),
+      );
+    }
+    screen.getByRole("button", { name: "Center in graph" }).focus();
+    await user.keyboard("{Enter}");
+    expect(nodeButton("nested")).toBeInTheDocument();
+    expect(nodeButton(targetId)).toHaveAttribute("data-selected", "true");
+    if (pinned)
+      expect(nodeButton(targetId)).toHaveClass("lineage-node--pinned");
+    if (targetId === "nested") {
+      expect(screen.queryByRole("button", { name: "Node A" })).toBeNull();
+    }
+    expect(nodeButton("other")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Node B" })).toBeNull();
+    expect(Graph.mock.calls.at(-1)[0].graphOptions).toMatchObject({
+      focusNodeId: targetId,
+      focusNodeRequestKey: requestKey + 1,
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Center in graph" }));
+    expect(Graph.mock.calls.at(-1)[0].graphOptions.focusNodeRequestKey).toBe(
+      requestKey + 2,
+    );
+  },
+);
+
+it("preserves the logical pin when duplicate fields acquire a new visible representative", () => {
+  const originalId = "https://glue.eu.amazonaws.com/#/table/field";
+  const aliasId = "glue:/Glue/table/field";
+  const topology = {
+    nodes: [
+      { id: "table", name: "Table", class: "Resource", type: "table" },
+      { id: originalId, name: "Field", class: "Resource", type: "column" },
+    ],
+    contains: [{ source: "table", target: originalId }],
+    depends: [],
+  };
+  const view = render(
+    <LineageGraph
+      {...defaultProps}
+      topology={topology}
+      defaultExpansionDepth={10}
+    />,
+  );
+  fireEvent.click(nodeButton(originalId));
+  fireEvent.click(screen.getByRole("button", { name: "Pin focus" }));
+  view.rerender(
+    <LineageGraph
+      {...defaultProps}
+      defaultExpansionDepth={10}
+      topology={{
+        ...topology,
+        nodes: [
+          ...topology.nodes,
+          { id: aliasId, name: "Field", class: "Resource", type: "column" },
+        ],
+        contains: [...topology.contains, { source: "table", target: aliasId }],
+      }}
+    />,
+  );
+  expect(nodeButton(aliasId)).toHaveClass("lineage-node--pinned");
+  expect(dock(view.container)).toHaveTextContent("Field");
+  fireEvent.click(
+    within(dock(view.container)).getByRole("button", { name: "Unpin focus" }),
+  );
+  expect(nodeButton(aliasId)).not.toHaveClass("lineage-node--pinned");
+});
+
+it("minimizes to the pinned context on an outside click without a pane click", () => {
+  const { container } = render(<LineageGraph {...defaultProps} />);
+  pinA();
+  expect(
+    within(dock(container)).queryByRole("button", { name: "Unpin focus" }),
+  ).not.toBeInTheDocument();
+  expect(dock(container).closest(".lineage-graph__dock-context")).toHaveClass(
+    "lineage-graph__dock-context--pinned",
+  );
+  fireEvent.click(nodeButton("B"));
+  fireEvent.mouseDown(document.body);
+  expect(dock(container)).toHaveTextContent("A");
+  expect(screen.queryByLabelText("Lineage inspector")).not.toBeInTheDocument();
+  fireEvent.click(
+    within(dock(container)).getByRole("button", { name: "Unpin focus" }),
+  );
+  expect(dock(container)).not.toBeInTheDocument();
+  expect(nodeButton("A")).not.toHaveClass("lineage-node--pinned");
+  expect(nodeButton("B")).not.toHaveAttribute("data-selected", "true");
+});

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

@@ -233,13 +233,13 @@ describe("<LineageGraphToolbar />", () => {
   });
 
   it("renders the pinned minimized bar with unpin and accent state", () => {
-    renderToolbar({ pinned: true });
+    renderToolbar({ context: null, pinnedContext: defaultProps.context });
 
     const unpin = screen.getByRole("button", { name: "Unpin focus" });
 
     expect(unpin).toHaveAttribute("aria-pressed", "true");
     expect(unpin.querySelector(".lucide-pin")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Search nodes" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Search nodes" })).toBeEnabled();
 
     fireEvent.click(unpin);
     expect(defaultProps.onUnpin).toHaveBeenCalledTimes(1);
@@ -362,3 +362,55 @@ describe("visibleLegendKeys", () => {
     ).not.toBeInTheDocument();
   });
 });
+
+it("shows the current selection without an additional pinned chip", () => {
+  const onPinnedContextSelect = jest.fn();
+  const rendered = renderToolbar({
+    pinnedContext: defaultProps.context,
+    context: {
+      type: "node",
+      node: {
+        ...defaultProps.context.node,
+        name: "Customers",
+        graphNodeId: "customers",
+      },
+    },
+    activePanel: "inspector",
+    onPinnedContextSelect,
+  });
+  expect(screen.getByLabelText("Lineage inspector")).toHaveTextContent(
+    "Customers",
+  );
+  expect(
+    rendered.container.querySelector(".lineage-graph__dock-context-bar"),
+  ).toHaveTextContent("Customers");
+  expect(
+    rendered.container.querySelector(".lineage-graph__dock-pin"),
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByRole("button", { name: "Unpin focus" }),
+  ).not.toBeInTheDocument();
+  expect(
+    screen.getByRole("button", { name: "Clear selection for Customers" }),
+  ).toBeInTheDocument();
+});
+
+it("preserves the structure icon in the pinned header without an unpin button", () => {
+  const { container } = renderToolbar({
+    pinned: true,
+    pinnedContext: defaultProps.context,
+    activePanel: "inspector",
+  });
+  const bar = container.querySelector(".lineage-graph__dock-context-bar");
+  expect(bar.closest(".lineage-graph__dock-context")).toHaveClass(
+    "lineage-graph__dock-context--pinned",
+  );
+  expect(
+    bar.querySelector(
+      ".lineage-graph__dock-context-summary-icon .lucide-table-2",
+    ),
+  ).toBeInTheDocument();
+  expect(
+    bar.querySelector(".lineage-graph__dock-context-unpin"),
+  ).not.toBeInTheDocument();
+});

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

@@ -344,7 +344,7 @@ describe("<LineageInspectorPanel />", () => {
       "utf8",
     );
 
-    expect(styles).toContain("--td-lineage-inspector-motion-duration: 180ms;");
+    expect(styles).toContain("--td-lineage-inspector-motion-duration: 220ms;");
     expect(styles).toContain("@media (prefers-reduced-motion: reduce)");
     expect(styles).toContain(
       ".lineage-view__header-icon > .icon,\n.lineage-inspector__header-icon > .icon",