@truedat/dd 8.11.6 → 8.11.7

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

@@ -0,0 +1,660 @@
+/* eslint-disable react/prop-types -- Minimal render doubles exercise the real graph interactions. */
+import { act, fireEvent, screen } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { LineageGraph } from "../LineageGraph";
+import * as lineageLayout from "../../utils/lineageLayout";
+
+const mockGraphRender = jest.fn();
+
+jest.mock("@truedat/core/components", () => ({
+  Graph: (props) => {
+    const { useContext } = require("react");
+    const {
+      EdgeHoverContext,
+    } = require("@truedat/core/components/graph/ColoredEdge");
+    const hover = useContext(EdgeHoverContext);
+    mockGraphRender({ ...props, ...props.graphOptions });
+
+    return (
+      <div
+        data-orientation={props.graphOptions.controlsOrientation}
+        data-testid="mock-lineage-graph"
+      >
+        {props.topControls}
+        {props.nodes.map((node) => (
+          <button
+            aria-label={`select-${node.id}`}
+            className="react-flow__node"
+            data-id={node.id}
+            key={node.id}
+            onMouseEnter={() => hover.setHoveredNodeId(node.id)}
+            onMouseLeave={() => hover.setHoveredNodeId(null)}
+            onClick={(event) => props.onNodeClick(event, node)}
+            onDoubleClick={(event) => props.onNodeDoubleClick(event, node)}
+            type="button"
+          />
+        ))}
+        {props.edges.map((edge) =>
+          edge.data?.onClick ? (
+            <button
+              aria-label={`select-edge-${edge.id}`}
+              className="td-graph-edge-hit-area"
+              key={edge.id}
+              onClick={edge.data.onClick}
+              type="button"
+            />
+          ) : null,
+        )}
+        <button
+          aria-label="clear-canvas-selection"
+          onClick={props.onPaneClick}
+          type="button"
+        />
+      </div>
+    );
+  },
+}));
+
+const resources = [
+  {
+    external_id: "warehouse.sales.orders",
+    fields: [],
+    id: "orders",
+    name: "Orders",
+    schema: "sales",
+    system: "Warehouse",
+    system_group: "Oracle",
+  },
+  {
+    external_id: "warehouse.sales.customers",
+    fields: [],
+    id: "customers",
+    name: "Customers",
+    schema: "sales",
+    system: "Warehouse",
+    system_group: "Oracle",
+  },
+];
+
+const renderGraph = () =>
+  render(
+    <LineageGraph
+      cancelPoll={jest.fn()}
+      edges={[]}
+      groups={[]}
+      resources={resources}
+    />,
+    { state: { graph: { id: "graph-1" } } },
+  );
+
+describe("<LineageGraph /> toolbar interactions", () => {
+  it("keeps the query origin independent from selection and clears selection", () => {
+    render(
+      <LineageGraph
+        cancelPoll={jest.fn()}
+        edges={[]}
+        groups={[]}
+        resources={resources}
+        requestedNodeIds={["orders"]}
+      />,
+      { state: { graph: { id: "graph-1" } } },
+    );
+    const nodes = () => mockGraphRender.mock.calls.at(-1)[0].nodes;
+    expect(
+      nodes().find(({ id }) => id === "warehouse.sales.orders").className,
+    ).toContain("lineage-node--origin");
+    expect(nodes().some((node) => node.data.focusSelected)).toBe(false);
+    expect(nodes().some((node) => node.data.focusDimmed)).toBe(false);
+    fireEvent.click(
+      screen.getByRole("button", { name: "select-warehouse.sales.customers" }),
+    );
+    expect(
+      nodes().find(({ id }) => id === "warehouse.sales.orders").className,
+    ).toContain("lineage-node--origin");
+    expect(
+      nodes().find(({ id }) => id === "warehouse.sales.customers").className,
+    ).not.toContain("lineage-node--origin");
+    expect(
+      nodes().find(({ id }) => id === "warehouse.sales.customers").className,
+    ).toContain("lineage-node--selected");
+    fireEvent.click(
+      screen.getByRole("button", { name: "clear-canvas-selection" }),
+    );
+    expect(
+      nodes().some((node) => node.className.includes("lineage-node--selected")),
+    ).toBe(false);
+    expect(
+      nodes().find(({ id }) => id === "warehouse.sales.orders").className,
+    ).toContain("lineage-node--origin");
+  });
+
+  it.each(["Enter", " "])("opens the focused node inspector with %s", (key) => {
+    renderGraph();
+    const node = screen.getByRole("button", {
+      name: "select-warehouse.sales.orders",
+    });
+    fireEvent.keyDown(node, { key });
+    expect(screen.getByLabelText("Lineage inspector")).toHaveTextContent(
+      "Orders",
+    );
+    expect(
+      mockGraphRender.mock.calls
+        .at(-1)[0]
+        .nodes.find(({ id }) => id === "warehouse.sales.orders").ariaLabel,
+    ).toBe("Orders");
+    fireEvent.click(
+      screen.getByRole("button", { name: "Clear selection for Orders" }),
+    );
+    fireEvent.keyDown(screen.getByRole("button", { name: "Search nodes" }), {
+      key,
+    });
+    expect(
+      screen.queryByLabelText("Lineage inspector"),
+    ).not.toBeInTheDocument();
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.sessionStorage.clear();
+  });
+
+  it("ignores legacy stored depth and starts at the graph maximum below four", () => {
+    window.sessionStorage.setItem("td.lineage.expansionDepth", "1");
+
+    render(
+      <LineageGraph
+        cancelPoll={jest.fn()}
+        edges={[]}
+        graphId="depth-graph"
+        groups={[
+          {
+            h: 300,
+            id: "level-1",
+            name: "Level 1",
+            w: 300,
+            x: 0,
+            y: 0,
+            z: 1,
+          },
+          {
+            h: 220,
+            id: "level-2",
+            name: "Level 2",
+            w: 220,
+            x: 20,
+            y: 50,
+            z: 2,
+          },
+        ]}
+        resources={[
+          {
+            h: 60,
+            id: "leaf",
+            name: "Leaf",
+            w: 120,
+            x: 40,
+            y: 90,
+            z: 3,
+          },
+        ]}
+      />,
+      { state: { graph: { id: "depth-graph" } } },
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Visible levels" }),
+    ).toHaveTextContent("2");
+  });
+
+  it("opens the inspector on selection and closes it through clear selection", () => {
+    renderGraph();
+
+    expect(screen.getByTestId("mock-lineage-graph")).toHaveAttribute(
+      "data-orientation",
+      "vertical",
+    );
+    expect(
+      screen.getByRole("button", { name: "Lineage legend" }),
+    ).toBeInTheDocument();
+
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "select-warehouse.sales.orders",
+      }),
+    );
+
+    expect(screen.getByLabelText("Lineage inspector")).toBeInTheDocument();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Clear selection for Orders" }),
+    );
+    expect(
+      screen.queryByLabelText("Lineage inspector"),
+    ).not.toBeInTheDocument();
+
+    // Sin botón de reabrir en la barra: solo queda el clear.
+    expect(
+      screen.queryByRole("button", { name: "View information for Orders" }),
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "clear-canvas-selection" }),
+    );
+    expect(
+      screen.getByRole("button", { name: "Lineage legend" }),
+    ).toBeInTheDocument();
+
+    // Seleccionar otro nodo vuelve a abrir el inspector maximizado.
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "select-warehouse.sales.customers",
+      }),
+    );
+    expect(screen.getByLabelText("Lineage inspector")).toBeInTheDocument();
+    expect(
+      document.querySelector(".lineage-graph__dock-context-label"),
+    ).toHaveTextContent("Customers");
+
+    fireEvent.keyDown(document, { key: "Escape" });
+    act(() => jest.runOnlyPendingTimers());
+    expect(
+      screen.queryByLabelText("Lineage inspector"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Clear selection for Customers" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Lineage legend" }),
+    ).toBeInTheDocument();
+    expect(
+      mockGraphRender.mock.calls
+        .at(-1)[0]
+        .nodes.some((node) =>
+          node.className.includes("lineage-node--selected"),
+        ),
+    ).toBe(false);
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "clear-canvas-selection" }),
+    );
+    expect(
+      screen.getByRole("button", { name: "Lineage legend" }),
+    ).toBeInTheDocument();
+  });
+
+  it("debounces search and emits a repeatable focus request", () => {
+    renderGraph();
+    fireEvent.click(screen.getByRole("button", { name: "Search nodes" }));
+    fireEvent.change(
+      screen.getByRole("textbox", { name: "Search graph nodes" }),
+      { target: { value: "warehouse.sales.orders" } },
+    );
+
+    expect(
+      screen.queryByRole("option", { name: /Orders/ }),
+    ).not.toBeInTheDocument();
+
+    act(() => jest.advanceTimersByTime(299));
+    expect(
+      screen.queryByRole("option", { name: /Orders/ }),
+    ).not.toBeInTheDocument();
+
+    act(() => jest.advanceTimersByTime(1));
+    fireEvent.click(screen.getByRole("option", { name: /Orders/ }));
+
+    const firstFocusedProps = mockGraphRender.mock.calls.at(-1)[0];
+
+    expect(firstFocusedProps.focusNodeId).toBe("warehouse.sales.orders");
+    expect(screen.getByLabelText("Lineage inspector")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Search nodes" }));
+    fireEvent.click(screen.getByRole("option", { name: /Orders/ }));
+
+    const repeatedFocusProps = mockGraphRender.mock.calls.at(-1)[0];
+
+    expect(repeatedFocusProps.focusNodeId).toBe("warehouse.sales.orders");
+    expect(repeatedFocusProps.focusNodeRequestKey).toBeGreaterThan(
+      firstFocusedProps.focusNodeRequestKey,
+    );
+  });
+
+  it("re-centers the graph when the visible depth level changes", () => {
+    render(
+      <LineageGraph
+        cancelPoll={jest.fn()}
+        edges={[]}
+        graphId="depth-graph"
+        groups={[
+          { h: 300, id: "level-1", name: "Level 1", w: 300, x: 0, y: 0, z: 1 },
+          {
+            h: 220,
+            id: "level-2",
+            name: "Level 2",
+            w: 220,
+            x: 20,
+            y: 50,
+            z: 2,
+          },
+        ]}
+        resources={[
+          { h: 60, id: "leaf", name: "Leaf", w: 120, x: 40, y: 90, z: 3 },
+        ]}
+      />,
+      { state: { graph: { id: "depth-graph" } } },
+    );
+
+    const before = mockGraphRender.mock.calls.at(-1)[0];
+
+    expect(before.fitViewRequestKey).toBeUndefined();
+
+    fireEvent.click(screen.getByRole("button", { name: "Visible levels" }));
+    fireEvent.change(screen.getByRole("slider", { name: "Visible levels" }), {
+      target: { value: "0" },
+    });
+
+    const after = mockGraphRender.mock.calls.at(-1)[0];
+
+    expect(after.fitViewRequestKey).toBeGreaterThan(
+      before.fitViewRequestKey || 0,
+    );
+  });
+
+  it("keeps the viewport and the acted node fixed when fields expand", () => {
+    render(
+      <LineageGraph
+        cancelPoll={jest.fn()}
+        edges={[]}
+        groups={[]}
+        resources={[
+          {
+            external_id: "warehouse.sales.expanded_orders",
+            fields: Array.from({ length: 12 }, (_, index) => ({
+              name: `field-${index}`,
+            })),
+            h: 82,
+            id: "expanded-orders",
+            name: "Expanded orders",
+            w: 288,
+            x: 420,
+            y: 260,
+          },
+        ]}
+      />,
+      { state: { graph: { id: "graph-1" } } },
+    );
+
+    const initialProps = mockGraphRender.mock.calls.at(-1)[0];
+    const initialNode = initialProps.nodes.find(
+      ({ id }) => id === "warehouse.sales.expanded_orders",
+    );
+
+    expect(initialProps.fitViewOnLayoutChange).toBe(true);
+    expect(initialProps.preserveUserViewportOnLayoutChange).toBe(true);
+    expect(initialProps.fitViewRequestKey).toBeUndefined();
+    expect(initialNode.data.onToggleFields).toEqual(expect.any(Function));
+
+    act(() => initialNode.data.onToggleFields());
+
+    const expandedProps = mockGraphRender.mock.calls.at(-1)[0];
+    const expandedNode = expandedProps.nodes.find(
+      ({ id }) => id === "warehouse.sales.expanded_orders",
+    );
+
+    expect(expandedNode.data.absoluteGeometry).toMatchObject({
+      x: initialNode.data.absoluteGeometry.x,
+      y: initialNode.data.absoluteGeometry.y,
+    });
+    expect(expandedNode.data.absoluteGeometry.h).toBeGreaterThan(
+      initialNode.data.absoluteGeometry.h,
+    );
+    expect(expandedProps.fitViewOnLayoutChange).toBe(true);
+    expect(expandedProps.preserveUserViewportOnLayoutChange).toBe(true);
+    expect(expandedProps.fitViewRequestKey).toBeUndefined();
+    expect(expandedProps.focusNodeId).toBeNull();
+  });
+
+  it("opens the inspector from another panel when a node is double-clicked", () => {
+    renderGraph();
+
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "select-warehouse.sales.orders",
+      }),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Search nodes" }));
+    fireEvent.doubleClick(
+      screen.getByRole("button", {
+        name: "select-warehouse.sales.customers",
+      }),
+    );
+
+    expect(screen.getByLabelText("Lineage inspector")).toHaveTextContent(
+      "Customers",
+    );
+  });
+
+  it("keeps the inspector open and replaces its context on selection", () => {
+    renderGraph();
+
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "select-warehouse.sales.orders",
+      }),
+    );
+    const customersNode = screen.getByRole("button", {
+      name: "select-warehouse.sales.customers",
+    });
+
+    fireEvent.mouseDown(customersNode);
+    fireEvent.click(customersNode);
+
+    expect(screen.getByLabelText("Lineage inspector")).toBeInTheDocument();
+    expect(
+      document.querySelector(".lineage-graph__dock-context-label"),
+    ).toHaveTextContent("Customers");
+    expect(
+      document.querySelector(".lineage-graph__dock-context-type"),
+    ).toHaveTextContent("Table");
+    expect(
+      screen.getByRole("button", { name: "Clear selection for Customers" }),
+    ).toBeInTheDocument();
+  });
+
+  it("opens the inspector when a connection with metadata is selected", () => {
+    render(
+      <LineageGraph
+        cancelPoll={jest.fn()}
+        edges={[
+          {
+            id: "orders-customers",
+            metadata: { rule: "customer_id = id" },
+            source: "warehouse.sales.orders",
+            target: "warehouse.sales.customers",
+          },
+        ]}
+        groups={[]}
+        resources={resources}
+      />,
+      { state: { graph: { id: "graph-1" } } },
+    );
+
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "select-edge-orders-customers",
+      }),
+    );
+
+    expect(screen.getByLabelText("Lineage inspector")).toBeInTheDocument();
+    expect(
+      document.querySelector(".lineage-graph__dock-context-label"),
+    ).toHaveTextContent("Orders → Customers");
+    expect(
+      document.querySelector(".lineage-graph__dock-context-type"),
+    ).toHaveTextContent("Connection metadata");
+    expect(
+      screen.getByRole("button", {
+        name: "Clear selection for Orders → Customers",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it.skip("locks selection and panel controls while focus is pinned", () => {
+    render(
+      <LineageGraph
+        cancelPoll={jest.fn()}
+        edges={[
+          {
+            id: "orders-customers",
+            metadata: { rule: "customer_id = id" },
+            source: "warehouse.sales.orders",
+            target: "warehouse.sales.customers",
+          },
+        ]}
+        groups={[]}
+        resources={resources}
+      />,
+      { state: { graph: { id: "graph-1" } } },
+    );
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "select-warehouse.sales.orders" }),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Pin focus" }));
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "select-warehouse.sales.customers",
+      }),
+    );
+    fireEvent.click(
+      screen.getByRole("button", { name: "select-edge-orders-customers" }),
+    );
+    fireEvent.click(
+      screen.getByRole("button", { name: "clear-canvas-selection" }),
+    );
+    fireEvent.mouseDown(document.body);
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    expect(screen.getByLabelText("Lineage inspector")).toHaveTextContent(
+      "Orders",
+    );
+    expect(screen.getByRole("button", { name: "Search nodes" })).toBeDisabled();
+    expect(
+      mockGraphRender.mock.calls
+        .at(-1)[0]
+        .nodes.find(({ id }) => id === "warehouse.sales.orders").data
+        .focusSelected,
+    ).toBe(true);
+
+    expect(
+      screen
+        .getAllByRole("button", { name: "Unpin focus" })
+        .every((button) => !button.disabled),
+    ).toBe(true);
+    expect(
+      screen
+        .getAllByRole("button", { name: "Unpin focus" })[1]
+        .closest(".lineage-graph__dock-context"),
+    ).toHaveClass("lineage-graph__dock-context--pinned");
+
+    fireEvent.click(screen.getAllByRole("button", { name: "Unpin focus" })[0]);
+    expect(screen.getByLabelText("Lineage inspector")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "View information for Orders" }),
+    ).not.toBeInTheDocument();
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "select-warehouse.sales.customers",
+      }),
+    );
+    expect(screen.getByLabelText("Lineage inspector")).toHaveTextContent(
+      "Customers",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Pin focus" }));
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "Clear selection for Customers",
+      }),
+    );
+    expect(
+      screen.getByRole("button", { name: "Lineage legend" }),
+    ).toBeInTheDocument();
+  });
+});
+
+it("projects multiple hidden query origins to their nearest visible container", () => {
+  render(
+    <LineageGraph
+      cancelPoll={jest.fn()}
+      edges={[]}
+      graphId="origin-hierarchy"
+      groups={[
+        { h: 400, id: "system", name: "System", w: 400, x: 0, y: 0, z: 1 },
+        { h: 300, id: "table", name: "Table", w: 300, x: 20, y: 50, z: 2 },
+      ]}
+      resources={[
+        { h: 32, id: "field-a", name: "Field A", w: 200, x: 40, y: 90, z: 3 },
+        { h: 32, id: "field-b", name: "Field B", w: 200, x: 40, y: 130, z: 3 },
+      ]}
+      requestedNodeIds={["field-a", "field-b"]}
+    />,
+    { state: { graph: { id: "origin-hierarchy" } } },
+  );
+  const nodes = () => mockGraphRender.mock.calls.at(-1)[0].nodes;
+  expect(
+    nodes().filter(({ data }) => data.queryOrigin === "direct"),
+  ).toHaveLength(2);
+  const table = nodes().find(({ id }) => id === "table");
+  act(() => table.data.onToggleCollapse());
+  expect(nodes().find(({ id }) => id === "table").data.queryOrigin).toBe(
+    "contained",
+  );
+  expect(
+    nodes().find(({ id }) => id === "system").data.queryOrigin,
+  ).toBeUndefined();
+  expect(nodes().some(({ id }) => id === "field-a")).toBe(false);
+  act(() =>
+    nodes()
+      .find(({ id }) => id === "system")
+      .data.onToggleCollapse(),
+  );
+  expect(nodes().find(({ id }) => id === "system").data.queryOrigin).toBe(
+    "contained",
+  );
+  act(() =>
+    nodes()
+      .find(({ id }) => id === "system")
+      .data.onToggleCollapse(),
+  );
+  act(() =>
+    nodes()
+      .find(({ id }) => id === "table")
+      .data.onToggleCollapse(),
+  );
+  expect(
+    nodes().filter(({ data }) => data.queryOrigin === "direct"),
+  ).toHaveLength(2);
+});
+
+it("does not recompute topology or geometry on selection or hover", () => {
+  const layout = jest.spyOn(lineageLayout, "layoutVisibleLineageGraph");
+  renderGraph();
+  const callCount = layout.mock.calls.length;
+  const before = mockGraphRender.mock.calls
+    .at(-1)[0]
+    .nodes.map(({ position }) => position);
+  fireEvent.click(
+    screen.getByRole("button", { name: "select-warehouse.sales.orders" }),
+  );
+  fireEvent.mouseEnter(
+    screen.getByRole("button", { name: "select-warehouse.sales.customers" }),
+  );
+  fireEvent.mouseLeave(
+    screen.getByRole("button", { name: "select-warehouse.sales.customers" }),
+  );
+  expect(layout).toHaveBeenCalledTimes(callCount);
+  expect(
+    mockGraphRender.mock.calls.at(-1)[0].nodes.map(({ position }) => position),
+  ).toEqual(before);
+  layout.mockRestore();
+});