@truedat/dd 8.14.0 → 8.14.2

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

@@ -1,18 +1,53 @@
-import { act, fireEvent, screen, within } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { Route, Routes, useLocation } from "react-router";
 import { render } from "@truedat/test/render";
 import { LineageGraph } from "../LineageGraph";
 import { GraphLoader } from "../GraphLoader";
 
 let mockGraphProps;
+let mockHoverContext;
 let mockDeferInitialFit = false;
 
+/* eslint-disable react/prop-types -- Minimal test double for Semantic UI Popup. */
+jest.mock("semantic-ui-react", () => {
+  const React = require("react");
+  const semanticUi = jest.requireActual("semantic-ui-react");
+
+  return {
+    ...semanticUi,
+    Popup: ({ className, content, onOpen, open, trigger }) => (
+      <>
+        {React.cloneElement(trigger, {
+          onClick: (event) => {
+            trigger.props.onClick?.(event);
+            onOpen?.(event);
+          },
+        })}
+        {open ? <div className={className}>{content}</div> : null}
+      </>
+    ),
+  };
+});
+/* eslint-enable react/prop-types */
+
 jest.mock("@truedat/core/components/Graph", () => {
   const React = require("react");
   const { createPortal } = require("react-dom");
   return function Graph(props) {
     mockGraphProps = props;
     const [expanded, setExpanded] = React.useState(false);
+    const {
+      EdgeHoverContext,
+    } = require("@truedat/core/components/graph/ColoredEdge");
+    const hover = React.useContext(EdgeHoverContext);
+    mockHoverContext = hover;
     React.useEffect(() => {
       if (!mockDeferInitialFit) props.onInitialFitComplete();
     }, [props.onInitialFitComplete]);
@@ -30,6 +65,9 @@ jest.mock("@truedat/core/components/Graph", () => {
               {node.id}
             </button>
           ))}
+        <button className="react-flow__pane" onClick={props.onPaneClick}>
+          Canvas
+        </button>
         {props.topControls}
         {props.afterControls}
       </div>
@@ -50,6 +88,7 @@ const props = {
   graphId: "graph-1",
   loading: false,
   simplified: true,
+  cancelPoll: jest.fn(),
   groups: [],
   resources: [
     { id: "orders", name: "Orders", x: 0, y: 0, w: 288, h: 100 },
@@ -273,6 +312,7 @@ it.each([
               graph={graph}
               fetchGraph={fetchGraph}
               clearGraph={jest.fn()}
+              cancelPoll={jest.fn()}
             />
           }
         />
@@ -284,6 +324,226 @@ it.each([
   },
 );
 
+it("changes dependency layout without clearing selection and transfers it to the module", async () => {
+  const user = userEvent.setup({ delay: null });
+  renderGraph();
+  await user.click(screen.getByRole("button", { name: "orders", exact: true }));
+  const toggle = screen.getByRole("button", {
+    name: "Switch to expanded view",
+  });
+  await user.click(toggle);
+  expect(screen.getByLabelText("Lineage inspector")).toHaveTextContent(
+    "Orders",
+  );
+  expect(global.localStorage.getItem("td.lineage.dependencyLayout.v1")).toBe(
+    "expanded",
+  );
+  expect(
+    screen.getByRole("button", { name: "Switch to compact view" }),
+  ).toHaveFocus();
+  fireEvent.click(
+    screen.getByRole("button", { name: "View in Lineage module" }),
+  );
+  expect(
+    JSON.parse(screen.getByTestId("location").textContent).state
+      .lineageViewState,
+  ).toMatchObject({
+    dependencyLayout: "expanded",
+    selectedGraphNodeId: "orders",
+  });
+  global.localStorage.removeItem("td.lineage.dependencyLayout.v1");
+});
+
+it("keeps node keyboard focus independent of hover across normal and expanded canvases", async () => {
+  renderGraph();
+  const node = screen.getByRole("button", { name: "orders", exact: true });
+  act(() => node.focus());
+  expect(mockHoverContext.keyboardFocusedNodeId).toBe("orders");
+  expect(mockHoverContext.hoveredNodeId).toBeNull();
+  act(() => node.blur());
+  expect(mockHoverContext.keyboardFocusedNodeId).toBeNull();
+  fireEvent.click(screen.getByText("Toggle expanded"));
+  const expandedNode = within(screen.getByTestId("expanded")).getByRole(
+    "button",
+    { name: "report", exact: true },
+  );
+  act(() => expandedNode.focus());
+  await waitFor(() =>
+    expect(mockHoverContext.keyboardFocusedNodeId).toBe("report"),
+  );
+  act(() => expandedNode.blur());
+  await waitFor(() =>
+    expect(mockHoverContext.keyboardFocusedNodeId).toBeNull(),
+  );
+});
+
+it("keeps an active selection while changing depth from the popup", async () => {
+  const user = userEvent.setup({ delay: null });
+  renderGraph({
+    groups: [
+      { id: "database", name: "Database", x: -20, y: -60, w: 800, h: 220 },
+    ],
+  });
+  await user.click(screen.getByRole("button", { name: "orders", exact: true }));
+  fireEvent.click(screen.getByRole("button", { name: "Visible levels" }));
+  const slider = await screen.findByRole("slider", { name: "Visible levels" });
+
+  fireEvent.mouseDown(slider);
+  fireEvent.change(slider, { target: { value: "0" } });
+
+  expect(screen.getByLabelText("Lineage inspector")).toHaveTextContent(
+    "Orders",
+  );
+  expect(mockHoverContext.compactReferenceNodeId).toBe("orders");
+});
+
+it("closes only the depth popup with Escape and restores trigger focus", async () => {
+  const user = userEvent.setup({ delay: null });
+  renderGraph({
+    groups: [
+      { id: "database", name: "Database", x: -20, y: -60, w: 800, h: 220 },
+    ],
+  });
+  await user.click(screen.getByRole("button", { name: "orders", exact: true }));
+  const depthButton = screen.getByRole("button", { name: "Visible levels" });
+  fireEvent.click(depthButton);
+  const slider = await screen.findByRole("slider", { name: "Visible levels" });
+
+  await user.type(slider, "{Escape}");
+
+  expect(
+    screen.queryByRole("dialog", { name: "Visible levels" }),
+  ).not.toBeInTheDocument();
+  expect(screen.getByLabelText("Lineage inspector")).toHaveTextContent(
+    "Orders",
+  );
+  expect(mockHoverContext.compactReferenceNodeId).toBe("orders");
+  expect(depthButton).toHaveFocus();
+});
+
+it.each(["outside", "canvas"])(
+  "minimizes before deselecting on successive %s clicks",
+  (target) => {
+    renderGraph();
+    fireEvent.click(
+      screen.getByRole("button", { name: "orders", exact: true }),
+    );
+    const clickOutside = () => {
+      const element =
+        target === "outside" ? document.body : screen.getByText("Canvas");
+      fireEvent.mouseDown(element);
+      fireEvent.click(element);
+    };
+    clickOutside();
+    expect(
+      screen.queryByLabelText("Lineage inspector"),
+    ).not.toBeInTheDocument();
+    expect(mockHoverContext.compactReferenceNodeId).toBe("orders");
+    clickOutside();
+    expect(mockHoverContext.compactReferenceNodeId).toBeFalsy();
+  },
+);
+
+it("keeps compact dependencies referenced to the visible pin after clearing selection", () => {
+  renderGraph();
+  fireEvent.click(screen.getByRole("button", { name: "orders", exact: true }));
+  fireEvent.click(screen.getByRole("button", { name: "Pin focus" }));
+  fireEvent.click(screen.getByRole("button", { name: "report", exact: true }));
+
+  expect(mockHoverContext.compactReferenceNodeId).toBe("orders");
+
+  fireEvent.click(screen.getByText("Canvas"));
+  fireEvent.click(screen.getByText("Canvas"));
+
+  expect(screen.queryByLabelText("Lineage inspector")).not.toBeInTheDocument();
+  expect(mockHoverContext.compactReferenceNodeId).toBe("orders");
+  expect(mockHoverContext.selectedEdgeId).toBeNull();
+});
+
+it("synchronizes global depth and retains it after manual group changes", () => {
+  renderGraph({
+    groups: [
+      { id: "database", name: "Database", x: -20, y: -60, w: 800, h: 220 },
+    ],
+  });
+  const toolbar = () => mockGraphProps.topControls.props;
+  act(() => toolbar().onExpandAll());
+  expect(toolbar().expansionDepth).toBe(toolbar().maxExpansionDepth);
+  expect(toolbar().expansionDepthCustom).toBe(false);
+  const lastDepth = toolbar().expansionDepth;
+  const toggleGroup = () =>
+    mockGraphProps.nodes
+      .find((node) => node.data?.onToggleCollapse)
+      .data.onToggleCollapse();
+  act(toggleGroup);
+  expect(toolbar().expansionDepth).toBe(lastDepth);
+  expect(toolbar().expansionDepthCustom).toBe(true);
+  act(toggleGroup);
+  expect(toolbar().expansionDepthCustom).toBe(true);
+  act(() => toolbar().onCollapseAll());
+  expect(toolbar().expansionDepth).toBe(0);
+  expect(toolbar().expansionDepthCustom).toBe(false);
+  act(toggleGroup);
+  expect(toolbar().expansionDepth).toBe(0);
+  expect(toolbar().expansionDepthCustom).toBe(true);
+  act(() => toolbar().onExpansionDepthChange(1));
+  expect(toolbar().expansionDepth).toBe(1);
+  expect(toolbar().expansionDepthCustom).toBe(false);
+});
+
+it.each([true, false])(
+  "marks search expansion as custom only when it opens ancestors: %s",
+  (collapsed) => {
+    renderGraph({
+      groups: [
+        { id: "database", name: "Database", x: -20, y: -60, w: 800, h: 220 },
+      ],
+    });
+    const toolbar = () => mockGraphProps.topControls.props;
+    act(() =>
+      collapsed ? toolbar().onCollapseAll() : toolbar().onExpandAll(),
+    );
+    const depth = toolbar().expansionDepth;
+    act(() => toolbar().onSearchResultSelect("orders"));
+    expect(
+      mockGraphProps.nodes.find((node) => node.id === "orders").hidden,
+    ).toBeFalsy();
+    expect(toolbar().expansionDepth).toBe(depth);
+    expect(toolbar().expansionDepthCustom).toBe(collapsed);
+  },
+);
+
+it("refits after window resizing settles and cancels pending work on unmount", () => {
+  jest.useFakeTimers();
+  try {
+    const { unmount } = renderGraph();
+    const toolbar = () => mockGraphProps.topControls.props;
+    act(() => toolbar().onSearchResultSelect("orders"));
+    expect(mockGraphProps.graphOptions.focusNodeId).toBe("orders");
+    const initialKey = mockGraphProps.graphOptions.fitViewRequestKey;
+    act(() => {
+      fireEvent(window, new Event("resize"));
+      jest.advanceTimersByTime(50);
+      fireEvent(window, new Event("resize"));
+      jest.advanceTimersByTime(79);
+    });
+    expect(mockGraphProps.graphOptions.fitViewRequestKey).toBe(initialKey);
+    act(() => jest.advanceTimersByTime(1));
+    expect(mockGraphProps.graphOptions.fitViewRequestKey).toBe(
+      (initialKey || 0) + 1,
+    );
+    expect(mockGraphProps.graphOptions.focusNodeId).toBeNull();
+    expect(toolbar().context.node.graphNodeId).toBe("orders");
+    fireEvent(window, new Event("resize"));
+    unmount();
+    expect(jest.getTimerCount()).toBe(0);
+    fireEvent(window, new Event("resize"));
+    expect(jest.getTimerCount()).toBe(0);
+  } finally {
+    jest.useRealTimers();
+  }
+});
+
 test.each([
   { simplified: true },
   { simplified: false },
@@ -292,18 +552,23 @@ test.each([
     generationJob: { requestId: "other", status: "pending" },
   },
 ])("keeps loading inline without a background action: %j", (extra) => {
+  jest.useFakeTimers();
   const backgroundGraph = jest.fn();
   const view = renderGraph({ ...extra, loading: true, backgroundGraph });
-  act(() => jest.advanceTimersByTime(3000));
-  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-  expect(
-    screen.getByText("lineage.graph.loading").closest("[role=status]"),
-  ).toBeInTheDocument();
-  expect(
-    screen.queryByRole("button", { name: "lineage.graph.wait.background" }),
-  ).not.toBeInTheDocument();
-  fireEvent.keyDown(document, { key: "Escape", keyCode: 27 });
-  expect(backgroundGraph).not.toHaveBeenCalled();
-  expect(screen.getByText("lineage.graph.loading")).toBeInTheDocument();
-  view.unmount();
+  try {
+    act(() => jest.advanceTimersByTime(3000));
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(
+      screen.getByText("lineage.graph.loading").closest("[role=status]"),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "lineage.graph.wait.background" }),
+    ).not.toBeInTheDocument();
+    fireEvent.keyDown(document, { key: "Escape", keyCode: 27 });
+    expect(backgroundGraph).not.toHaveBeenCalled();
+    expect(screen.getByText("lineage.graph.loading")).toBeInTheDocument();
+  } finally {
+    view.unmount();
+    jest.useRealTimers();
+  }
 });

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

@@ -363,6 +363,50 @@ describe("visibleLegendKeys", () => {
   });
 });
 
+it.each([
+  [
+    "compact",
+    "expanded",
+    "Switch to expanded view",
+    "Expanded view",
+    ".lucide-columns-3",
+  ],
+  [
+    "expanded",
+    "compact",
+    "Switch to compact view",
+    "Compact view",
+    ".lucide-columns-2",
+  ],
+])(
+  "toggles the %s view directly and explains it on focus",
+  async (mode, next, label, title, icon) => {
+    const onDependencyLayoutChange = jest.fn();
+    renderToolbar({
+      simplified: true,
+      dependencyLayout: mode,
+      onDependencyLayoutChange,
+    });
+    expect(
+      screen.queryByRole("button", { name: "Graph settings" }),
+    ).not.toBeInTheDocument();
+    const toggle = screen.getByRole("button", { name: label });
+    expect(toggle.querySelector(icon)).toBeInTheDocument();
+    await act(async () => fireEvent.focus(toggle));
+    expect(await screen.findByText(title)).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        next === "expanded"
+          ? "Shows internal dependencies between nodes in each group."
+          : "Reduces visual clutter. Select a node to explore its internal dependencies.",
+      ),
+    ).toBeInTheDocument();
+    await act(async () => fireEvent.click(toggle));
+    expect(onDependencyLayoutChange).toHaveBeenCalledWith(next);
+    expect(screen.queryByRole("radio")).not.toBeInTheDocument();
+  },
+);
+
 it("shows the current selection without an additional pinned chip", () => {
   const onPinnedContextSelect = jest.fn();
   const rendered = renderToolbar({
@@ -414,3 +458,45 @@ it("preserves the structure icon in the pinned header without an unpin button",
     bar.querySelector(".lineage-graph__dock-context-unpin"),
   ).not.toBeInTheDocument();
 });
+
+it("places the layout toggle after settings and removes layout radios from settings", async () => {
+  const { container } = renderToolbar({ onDependencyLayoutChange: jest.fn() });
+  const settings = screen.getByRole("button", { name: "Graph settings" });
+  const toggle = screen.getByRole("button", {
+    name: "Switch to expanded view",
+  });
+  const buttons = Array.from(container.querySelectorAll("button"));
+  expect(buttons.indexOf(toggle)).toBe(buttons.indexOf(settings) + 1);
+  await act(async () => fireEvent.click(settings));
+  expect(
+    screen.getByRole("dialog", { name: "Graph settings" }),
+  ).toBeInTheDocument();
+  expect(screen.queryByRole("radio")).not.toBeInTheDocument();
+});
+
+it("keeps the selected depth and marks individual expansion with a question mark", async () => {
+  const onExpansionDepthChange = jest.fn();
+  renderToolbar({
+    expansionDepth: 2,
+    maxExpansionDepth: 4,
+    expansionDepthCustom: true,
+    onExpansionDepthChange,
+  });
+  await act(async () =>
+    fireEvent.click(screen.getByRole("button", { name: "Visible levels" })),
+  );
+  const slider = screen.getByRole("slider");
+  expect(slider).toHaveValue("2");
+  expect(slider).toHaveAttribute(
+    "aria-valuetext",
+    "Last selected level: 2. Nodes have been expanded or collapsed individually.",
+  );
+  expect(slider.closest(".lineage-graph__depth-popover")).toHaveClass(
+    "is-custom",
+  );
+  expect(screen.getByText("?")).toHaveClass(
+    "lineage-graph__depth-custom-marker",
+  );
+  fireEvent.change(slider, { target: { value: "3" } });
+  expect(onExpansionDepthChange).toHaveBeenCalledWith("3");
+});

package/src/styles/LineageGraph.less

@@ -2844,6 +2844,41 @@ button.lineage-graph__dock-context-reopen {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.lineage-graph__depth-slider-wrap {
+  position: relative;
+  display: flex;
+  margin-top: 8px;
+}
+.lineage-graph__depth-custom-marker {
+  position: absolute;
+  top: -13px;
+  transform: translateX(-50%);
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 12px;
+  pointer-events: none;
+}
+.lineage-graph__depth-popover.is-custom {
+  .lineage-graph__depth-slider {
+    accent-color: #64748b;
+  }
+  .lineage-graph__depth-popover-scale > span {
+    background: #e2e8f0;
+    color: #475569;
+  }
+  .lineage-graph__depth-popover-scale > .is-current {
+    background: #64748b;
+    color: #fff;
+  }
+}
+.lineage-graph__stage-surface
+  .td-graph-controls--vertical
+  .lineage-graph__dock-depth-button
+  .lineage-graph__dock-depth-value.is-custom {
+  background: #e2e8f0;
+  color: #475569;
+}
 .lineage-graph__depth-slider {
   width: 100%;
   height: 18px;