@truedat/dd 8.12.8 → 8.12.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.12.8",
+  "version": "8.12.10",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -69,10 +69,10 @@
     "lodash": "^4.17.21",
     "lucide-react": "^1.41.0",
     "match-sorter": "^8.0.1",
-    "moment": "^2.30.1",
+    "moment": "^2.31.0",
     "path-to-regexp": "^8.2.0",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.3",
+    "query-string": "^9.5.1",
     "react": "^19.2.7",
     "react-csv": "^2.2.2",
     "react-dom": "^19.2.7",
@@ -90,5 +90,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "682b801555be3f898e0502fd70a48ea32110c327"
+  "gitHead": "ac5f172e0ff4c087ea040ae29d1f2ea822bcadb6"
 }

package/src/components/Graphs.js

@@ -5,7 +5,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { useParams } from "react-router";
+import { useLocation, useParams } from "react-router";
 import { Segment } from "semantic-ui-react";
 import LineageHeader from "./LineageHeader";
 import LineageSelectionPanel from "./LineageSelectionPanel";
@@ -14,6 +14,7 @@ import LineageGraph from "./LineageGraph";
 
 export const Graphs = () => {
   const { id } = useParams();
+  const { state } = useLocation();
   const canvasRef = useRef(null);
   useLayoutEffect(() => {
     const canvas = canvasRef.current;
@@ -125,7 +126,10 @@ export const Graphs = () => {
         />
         <main className="lineage-view__main" ref={canvasRef}>
           <GraphRedirector />
-          <LineageGraph height="var(--td-lineage-canvas-height)" />
+          <LineageGraph
+            height="var(--td-lineage-canvas-height)"
+            initialViewState={state?.lineageViewState}
+          />
         </main>
       </div>
     </Segment>

package/src/components/LineageGraph.js

@@ -64,6 +64,7 @@ import {
   legacyPathEdges,
 } from "../utils/lineageGraph";
 import LineageResourceNode from "./LineageResourceNode";
+import LineageModuleButton from "./LineageModuleButton";
 import LineageGraphToolbar, { visibleLegendKeys } from "./LineageGraphToolbar";
 
 export {
@@ -135,6 +136,7 @@ export const LineageGraph = ({
   simplified = false,
   requestedNodeIds,
   structureId,
+  initialViewState,
 }) => {
   const preparedTopology = useMemo(
     () => prepareLineageTopology(topology),
@@ -180,6 +182,8 @@ export const LineageGraph = ({
   const [hoveredNodeId, setHoveredNodeId] = useState(null);
   const [hoveredEdgeEndpoints, setHoveredEdgeEndpoints] = useState(null);
   const stageRef = useRef(null);
+  const activeSurfaceRef = useRef(null);
+  const restoredViewStateRef = useRef(null);
   const graphReadyRef = useRef(false);
   const [fittedGraphKey, setFittedGraphKey] = useState(null);
   const defaultCollapseSignatureRef = useRef("");
@@ -1069,6 +1073,76 @@ export const LineageGraph = ({
     () => new Map(searchableGraphNodes.map((node) => [node.id, node])),
     [searchableGraphNodes],
   );
+  useEffect(() => {
+    if (
+      !initialViewState ||
+      restoredViewStateRef.current === initialViewState ||
+      loading ||
+      !hasGraph ||
+      String(initialViewState.graphId) !== String(graphId)
+    )
+      return;
+
+    restoredViewStateRef.current = initialViewState;
+    setExpansionDepth(
+      normalizedExpansionDepth(
+        initialViewState.expansionDepth,
+        effectiveDefaultDepth,
+        effectiveMaxDepth,
+      ),
+    );
+    const groupIds = new Set(collapsibleGroupIds);
+    setCollapsedGroupIds(
+      new Set(
+        (initialViewState.collapsedGroupIds || []).filter((id) =>
+          groupIds.has(id),
+        ),
+      ),
+    );
+    setExpandedFieldNodeIds(
+      new Set(
+        (initialViewState.expandedFieldNodeIds || []).filter((id) =>
+          searchableNodeById.has(id),
+        ),
+      ),
+    );
+    const node = searchableNodeById.get(initialViewState.selectedGraphNodeId);
+    const selectedNode =
+      node && selectedNodeFromGraphNode(node, searchableNodeById);
+    const edge = renderedGraphEdges.find(
+      ({ id }) => id === initialViewState.selectedGraphEdgeId,
+    );
+    const context = selectedNode
+      ? { type: "node", node: selectedNode }
+      : edge
+        ? lineageEdgeContext({
+            edge: edge.data || {},
+            id: edge.id,
+            source: edge.source,
+            target: edge.target,
+            nodeById: searchableNodeById,
+          })
+        : null;
+    setSelectedContext(context);
+    setPinnedGraphNodeId(
+      searchableNodeById.has(initialViewState.pinnedGraphNodeId)
+        ? initialViewState.pinnedGraphNodeId
+        : null,
+    );
+    setActivePanel(context ? "inspector" : null);
+    setFitViewRequestKey((key) => (key || 0) + 1);
+  }, [
+    initialViewState,
+    loading,
+    hasGraph,
+    graphId,
+    setExpansionDepth,
+    effectiveDefaultDepth,
+    effectiveMaxDepth,
+    collapsibleGroupIds,
+    searchableNodeById,
+    renderedGraphEdges,
+  ]);
   useEffect(() => {
     if (!selectedGraphNodeId || searchableNodeById.has(selectedGraphNodeId))
       return;
@@ -1108,14 +1182,9 @@ export const LineageGraph = ({
     (event, node) => {
       event?.preventDefault();
       event?.stopPropagation();
-      if (
-        stageRef.current &&
-        event?.target &&
-        !stageRef.current.contains(event.target)
-      ) {
-        return;
-      }
-
+      activeSurfaceRef.current = event?.target?.closest?.(
+        ".td-graph-container",
+      );
       selectGraphNode(node);
     },
     [selectGraphNode],
@@ -1127,6 +1196,7 @@ export const LineageGraph = ({
       const node = visibleNodeById.get(event.target.dataset.id);
 
       if (!node || node.selectable === false) return;
+      activeSurfaceRef.current = event.target.closest(".td-graph-container");
       event.preventDefault();
       event.stopPropagation();
       selectGraphNode(node);
@@ -1196,7 +1266,10 @@ export const LineageGraph = ({
   const closeActivePanel = useCallback(() => setActivePanel(null), []);
   const focusContextButton = useCallback(() => {
     requestAnimationFrame(() => {
-      stageRef.current
+      (activeSurfaceRef.current?.isConnected
+        ? activeSurfaceRef.current
+        : stageRef.current
+      )
         ?.querySelector(".lineage-graph__dock-context-clear")
         ?.focus();
     });
@@ -1250,9 +1323,13 @@ export const LineageGraph = ({
     const closeOnEscape = (event) => {
       if (event.key !== "Escape") return;
 
-      if (pinnedGraphNodeId) return;
+      if (pinnedGraphNodeId && !activePanel) return;
       event.preventDefault();
       event.stopPropagation();
+      if (pinnedGraphNodeId) {
+        setActivePanel(null);
+        return;
+      }
       if (selectedContext) {
         clearSelectedContext();
         return;
@@ -1408,7 +1485,22 @@ export const LineageGraph = ({
                 onNodeDoubleClick={handleNodeDoubleClick}
                 onPaneClick={handlePaneSelectionClear}
                 topControls={graphTopControls}
-                afterControls={null}
+                afterControls={
+                  simplified ? (
+                    <LineageModuleButton
+                      disabled={loading || !graphId}
+                      viewState={{
+                        graphId,
+                        selectedGraphNodeId,
+                        selectedGraphEdgeId,
+                        pinnedGraphNodeId,
+                        expansionDepth,
+                        collapsedGroupIds: [...effectiveCollapsedGroupIds],
+                        expandedFieldNodeIds: [...expandedFieldNodeIds],
+                      }}
+                    />
+                  ) : null
+                }
                 bottomControls={false}
                 graphOptions={{
                   controlsOrientation: "vertical",
@@ -1441,6 +1533,7 @@ export const LineageGraph = ({
 };
 
 LineageGraph.propTypes = {
+  initialViewState: PropTypes.object,
   defaultExpansionDepth: PropTypes.number,
   edges: PropTypes.array,
   graphId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/src/components/LineageGraphToolbar.js

@@ -87,7 +87,7 @@ DockIcon.propTypes = {
   name: PropTypes.string,
 };
 
-const LineageToolButton = ({
+export const LineageToolButton = ({
   active = false,
   children,
   className,
@@ -552,8 +552,7 @@ export const LineageGraphToolbar = ({
   const [depthPopoverOpen, setDepthPopoverOpen] = useState(false);
   const [settingsPopoverOpen, setSettingsPopoverOpen] = useState(false);
   const hasContext = Boolean(context);
-  const inspectorOpen =
-    !simplified && hasContext && activePanel === "inspector";
+  const inspectorOpen = hasContext && activePanel === "inspector";
   const selectedLabel = contextLabel(context);
   const selectedTypeLabel = hasContext
     ? contextTypeLabel(context, formatMessage)
@@ -697,54 +696,56 @@ export const LineageGraphToolbar = ({
         size="mini"
         tooltipPosition="left center"
       />
-      {collapsible && !simplified ? (
+      {collapsible ? (
         <>
           <span className="lineage-graph__dock-divider" aria-hidden="true" />
-          <Popup
-            on="click"
-            onClose={() => setSettingsPopoverOpen(false)}
-            onOpen={() => setSettingsPopoverOpen(true)}
-            open={settingsPopoverOpen}
-            position="left center"
-            trigger={
-              <LineageToolButton
-                active={settingsPopoverOpen}
-                aria-expanded={settingsPopoverOpen}
-                aria-haspopup="dialog"
-                className="lineage-graph__dock-settings-button"
-                icon={
-                  <Settings
-                    size={DOCK_ICON_SIZE}
-                    strokeWidth={DOCK_ICON_STROKE}
-                  />
-                }
-                label={settingsLabel}
-                showTooltip={false}
-              />
-            }
-            content={
-              <div
-                aria-label={settingsLabel}
-                className="lineage-graph__settings-popover"
-                role="dialog"
-              >
-                <span className="lineage-graph__settings-popover-header">
-                  {settingsLabel}
-                </span>
-                <label className="lineage-graph__settings-toggle">
-                  <input
-                    checked={doubleClickExpandsNodes}
-                    onChange={(event) =>
-                      onDoubleClickExpandsNodesChange?.(event.target.checked)
-                    }
-                    type="checkbox"
-                  />
-                  <span>{doubleClickInfoLabel}</span>
-                </label>
-              </div>
-            }
-            className="lineage-graph__settings-popup"
-          />
+          {!simplified ? (
+            <Popup
+              on="click"
+              onClose={() => setSettingsPopoverOpen(false)}
+              onOpen={() => setSettingsPopoverOpen(true)}
+              open={settingsPopoverOpen}
+              position="left center"
+              trigger={
+                <LineageToolButton
+                  active={settingsPopoverOpen}
+                  aria-expanded={settingsPopoverOpen}
+                  aria-haspopup="dialog"
+                  className="lineage-graph__dock-settings-button"
+                  icon={
+                    <Settings
+                      size={DOCK_ICON_SIZE}
+                      strokeWidth={DOCK_ICON_STROKE}
+                    />
+                  }
+                  label={settingsLabel}
+                  showTooltip={false}
+                />
+              }
+              content={
+                <div
+                  aria-label={settingsLabel}
+                  className="lineage-graph__settings-popover"
+                  role="dialog"
+                >
+                  <span className="lineage-graph__settings-popover-header">
+                    {settingsLabel}
+                  </span>
+                  <label className="lineage-graph__settings-toggle">
+                    <input
+                      checked={doubleClickExpandsNodes}
+                      onChange={(event) =>
+                        onDoubleClickExpandsNodesChange?.(event.target.checked)
+                      }
+                      type="checkbox"
+                    />
+                    <span>{doubleClickInfoLabel}</span>
+                  </label>
+                </div>
+              }
+              className="lineage-graph__settings-popup"
+            />
+          ) : null}
           <Popup
             on="click"
             onClose={() => setDepthPopoverOpen(false)}

package/src/components/LineageModuleButton.js

@@ -0,0 +1,35 @@
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { generatePath, useNavigate } from "react-router";
+import { GRAPH } from "@truedat/core/routes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
+import { LineageToolButton } from "./LineageGraphToolbar";
+
+export default function LineageModuleButton({ disabled, viewState }) {
+  const navigate = useNavigate();
+  const { formatMessage } = useIntl();
+  const authorized = useAuthorized("lineage");
+
+  if (!authorized) return null;
+
+  return (
+    <LineageToolButton
+      disabled={disabled || !viewState.graphId}
+      icon="sitemap"
+      label={formatMessage({
+        id: "lineage.graph.controls.open_module",
+        defaultMessage: "View in Lineage module",
+      })}
+      onClick={() =>
+        navigate(generatePath(GRAPH, { id: viewState.graphId }), {
+          state: { lineageViewState: viewState },
+        })
+      }
+    />
+  );
+}
+
+LineageModuleButton.propTypes = {
+  disabled: PropTypes.bool,
+  viewState: PropTypes.object.isRequired,
+};

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

@@ -0,0 +1,238 @@
+import { fireEvent, screen, within } from "@testing-library/react";
+import { Route, Routes, useLocation } from "react-router";
+import { render } from "@truedat/test/render";
+import { LineageGraph } from "../LineageGraph";
+import { GraphLoader } from "../GraphLoader";
+
+let mockGraphProps;
+
+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);
+    React.useEffect(
+      () => props.onInitialFitComplete(),
+      [props.onInitialFitComplete],
+    );
+    const canvas = (name) => (
+      <div className="td-graph-container" data-testid={name}>
+        {props.nodes
+          .filter((node) => !node.hidden)
+          .map((node) => (
+            <button
+              className="react-flow__node"
+              data-id={node.id}
+              key={node.id}
+              onClick={(event) => props.onNodeClick(event, node)}
+            >
+              {node.id}
+            </button>
+          ))}
+        {props.topControls}
+        {props.afterControls}
+      </div>
+    );
+    return (
+      <>
+        {canvas("normal")}
+        <button onClick={() => setExpanded(!expanded)}>Toggle expanded</button>
+        {expanded
+          ? createPortal(canvas("expanded"), global.document.body)
+          : null}
+      </>
+    );
+  };
+});
+
+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 },
+    { id: "report", name: "Report", x: 400, y: 0, w: 288, h: 100 },
+  ],
+  edges: [{ source: "orders", target: "report" }],
+};
+const state = { authentication: { role: "admin" }, graph: { id: "graph-1" } };
+const Location = () => {
+  const location = useLocation();
+  return <output data-testid="location">{JSON.stringify(location)}</output>;
+};
+const renderGraph = (extra = {}) =>
+  render(
+    <>
+      <LineageGraph {...props} {...extra} />
+      <Location />
+    </>,
+    { state },
+  );
+
+it("selects successive nodes through a real portal and keeps dependencies active on return", () => {
+  renderGraph();
+  fireEvent.click(screen.getByText("Toggle expanded"));
+  const expanded = within(screen.getByTestId("expanded"));
+  fireEvent.click(
+    expanded.getByRole("button", { name: "orders", exact: true }),
+  );
+  expect(expanded.getByLabelText("Lineage inspector")).toHaveTextContent(
+    "Orders",
+  );
+  expect(mockGraphProps.edges.some((edge) => edge.data.animated)).toBe(true);
+  fireEvent.click(
+    expanded.getByRole("button", { name: "report", exact: true }),
+  );
+  expect(expanded.getByLabelText("Lineage inspector")).toHaveTextContent(
+    "Report",
+  );
+  fireEvent.click(screen.getByText("Toggle expanded"));
+  expect(screen.getByLabelText("Lineage inspector")).toHaveTextContent(
+    "Report",
+  );
+});
+
+it("transfers serializable selection and expansion to the existing graph route", () => {
+  renderGraph();
+  fireEvent.click(screen.getByRole("button", { name: "orders", exact: true }));
+  fireEvent.click(
+    screen.getByRole("button", { name: "View in Lineage module" }),
+  );
+  const location = JSON.parse(screen.getByTestId("location").textContent);
+  expect(location.pathname).toBe("/graphs/graph-1");
+  expect(location.state.lineageViewState).toMatchObject({
+    graphId: "graph-1",
+    selectedGraphNodeId: "orders",
+    collapsedGroupIds: [],
+    expandedFieldNodeIds: [],
+  });
+});
+
+it("restores once after loading and ignores missing node ids", () => {
+  const initialViewState = {
+    graphId: "graph-1",
+    selectedGraphNodeId: "orders",
+    pinnedGraphNodeId: "missing",
+    expansionDepth: 0,
+    collapsedGroupIds: ["missing"],
+    expandedFieldNodeIds: ["missing"],
+  };
+  const view = renderGraph({ loading: true, initialViewState });
+  expect(screen.queryByLabelText("Lineage inspector")).not.toBeInTheDocument();
+  view.rerender(
+    <LineageGraph {...props} initialViewState={initialViewState} />,
+  );
+  expect(screen.getByLabelText("Lineage inspector")).toHaveTextContent(
+    "Orders",
+  );
+  fireEvent.click(screen.getByRole("button", { name: "report", exact: true }));
+  expect(screen.getByLabelText("Lineage inspector")).toHaveTextContent(
+    "Report",
+  );
+  fireEvent.click(
+    screen.getByRole("button", { name: "View in Lineage module" }),
+  );
+});
+
+it("does not apply a snapshot to a different graph", () => {
+  renderGraph({
+    initialViewState: { graphId: "other", selectedGraphNodeId: "orders" },
+  });
+  expect(screen.queryByLabelText("Lineage inspector")).not.toBeInTheDocument();
+});
+
+it("selects portal nodes with the keyboard and clears context before closing", () => {
+  renderGraph();
+  fireEvent.click(screen.getByText("Toggle expanded"));
+  const node = within(screen.getByTestId("expanded")).getByRole("button", {
+    name: "orders",
+    exact: true,
+  });
+  fireEvent.keyDown(node, { key: "Enter" });
+  expect(
+    within(screen.getByTestId("expanded")).getByLabelText("Lineage inspector"),
+  ).toBeInTheDocument();
+  fireEvent.keyDown(node, { key: "Escape" });
+  expect(screen.queryByLabelText("Lineage inspector")).not.toBeInTheDocument();
+  expect(screen.getByTestId("expanded")).toBeInTheDocument();
+});
+
+it("restores groups, fields, depth and a pinned selection without reapplying defaults", () => {
+  renderGraph({
+    groups: [
+      { id: "database", name: "Database", x: -20, y: -60, w: 800, h: 220 },
+    ],
+    initialViewState: {
+      graphId: "graph-1",
+      selectedGraphNodeId: "orders",
+      pinnedGraphNodeId: "orders",
+      expansionDepth: 1,
+      collapsedGroupIds: [],
+      expandedFieldNodeIds: ["orders", "missing"],
+    },
+  });
+  expect(screen.getAllByRole("button", { name: "Unpin focus" })).toHaveLength(
+    2,
+  );
+  fireEvent.click(
+    screen.getByRole("button", { name: "View in Lineage module" }),
+  );
+  expect(
+    JSON.parse(screen.getByTestId("location").textContent).state
+      .lineageViewState,
+  ).toMatchObject({
+    selectedGraphNodeId: "orders",
+    pinnedGraphNodeId: "orders",
+    expansionDepth: 1,
+    collapsedGroupIds: [],
+    expandedFieldNodeIds: ["orders"],
+  });
+});
+
+it("hides module navigation without lineage permission", () => {
+  render(<LineageGraph {...props} />, {
+    state: { authentication: { groups: [] } },
+  });
+  expect(
+    screen.queryByRole("button", { name: "View in Lineage module" }),
+  ).not.toBeInTheDocument();
+});
+
+it("disables module navigation when the graph has no identifier", () => {
+  renderGraph({ graphId: null });
+  expect(
+    screen.getByRole("button", { name: "View in Lineage module" }),
+  ).toBeDisabled();
+});
+
+it.each([
+  [{ id: "graph-1" }, false],
+  [{}, true],
+  [{ id: "other" }, true],
+])(
+  "loads the existing graph only when it is not already available: %j",
+  (graph, needsFetch) => {
+    const fetchGraph = jest.fn();
+    render(
+      <Routes>
+        <Route
+          path="/graphs/:id"
+          element={
+            <GraphLoader
+              graph={graph}
+              fetchGraph={fetchGraph}
+              clearGraph={jest.fn()}
+              cancelPoll={jest.fn()}
+            />
+          }
+        />
+      </Routes>,
+      { routes: ["/graphs/graph-1"] },
+    );
+    if (needsFetch) expect(fetchGraph).toHaveBeenCalledWith({ id: "graph-1" });
+    else expect(fetchGraph).not.toHaveBeenCalled();
+  },
+);

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

@@ -180,31 +180,27 @@ describe("<LineageGraphToolbar />", () => {
     );
   });
 
-  it("keeps the selected name in the minimized banner in structure views", () => {
-    const rendered = renderToolbar({
+  it("opens the inspector and depth controls in structure views", async () => {
+    renderToolbar({
       activePanel: "inspector",
       simplified: true,
+      maxExpansionDepth: 8,
     });
-
-    const contextBar = rendered.container.querySelector(
-      ".lineage-graph__dock-context-bar",
-    );
-    expect(contextBar).toHaveTextContent("Orders");
-    expect(contextBar).not.toHaveClass(
-      "lineage-graph__dock-context-bar--expanded",
-    );
+    expect(screen.getByLabelText("Lineage inspector")).toBeInTheDocument();
     expect(
-      screen.queryByLabelText("Lineage inspector"),
+      screen.queryByRole("button", { name: "Search nodes" }),
     ).not.toBeInTheDocument();
-    fireEvent.click(screen.getByText("Orders"));
-    expect(defaultProps.onPanelChange).not.toHaveBeenCalled();
     expect(
-      screen.queryByLabelText("Lineage inspector"),
+      screen.queryByRole("button", { name: "Graph settings" }),
     ).not.toBeInTheDocument();
-    fireEvent.click(
-      screen.getByRole("button", { name: "Clear selection for Orders" }),
+    await act(async () =>
+      fireEvent.click(screen.getByRole("button", { name: "Visible levels" })),
     );
-    expect(defaultProps.onClearContext).toHaveBeenCalledTimes(1);
+    const slider = screen.getByRole("slider", { name: "Visible levels" });
+    fireEvent.change(slider, { target: { value: "0" } });
+    expect(defaultProps.onExpansionDepthChange).toHaveBeenLastCalledWith("0");
+    fireEvent.change(slider, { target: { value: "8" } });
+    expect(defaultProps.onExpansionDepthChange).toHaveBeenLastCalledWith("8");
   });
 
   it("reuses and expands the minimized context bar with the inspector", () => {

package/src/styles/LineageGraph.less

@@ -1391,7 +1391,7 @@
 
 // Size overlay panels against the canvas, including sidebar/page gutters.
 .lineage-graph__stage-surface {
-  container-type: inline-size;
+  container-type: size;
 }
 
 .lineage-graph__stage .react-flow,
@@ -2321,27 +2321,6 @@
 .structure-lineage {
   --td-structure-lineage-height: clamp(480px, calc(100vh - 260px), 82vh);
 }
-.structure-lineage .td-graph-container .react-flow__controls.top.right {
-  display: flex;
-  width: max-content;
-  align-items: center;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  top: 12px;
-  right: 12px;
-  left: auto;
-  margin: 0;
-}
-.structure-lineage .td-graph-container .react-flow__controls.top.right > span {
-  display: inline-flex;
-  flex: 0 0 auto;
-}
-.structure-lineage .lineage-graph__legend-control {
-  display: none !important;
-}
-.structure-lineage .lineage-graph__selection-control {
-  top: 52px;
-}
 .structure-lineage .lineage-graph__canvas,
 .structure-lineage .lineage-graph__stage,
 .structure-lineage .td-graph-container {
@@ -2384,6 +2363,9 @@
   box-shadow: 0 12px 28px rgba(15, 23, 42, 0.13);
   overflow: visible;
   backdrop-filter: blur(10px);
+  max-height: calc(100cqh - 24px);
+  flex-wrap: wrap;
+  align-content: flex-end;
 }
 .lineage-graph__stage-surface
   .td-graph-controls--vertical
@@ -2509,7 +2491,8 @@
   align-self: flex-end;
   flex: 0 0 34px;
 }
-.lineage-graph__dock-context > .lineage-graph__dock-context-button {
+.lineage-graph__dock-context > .lineage-graph__dock-context-button,
+.lineage-graph__dock-context > .lineage-graph__dock-tooltip-trigger {
   position: absolute;
   top: 0;
   right: 0;
@@ -2522,6 +2505,7 @@
   z-index: 472;
   display: flex;
   width: var(--td-lineage-context-collapsed-width);
+  max-width: calc(100cqw - 28px);
   height: var(--td-lineage-context-control-size);
   align-items: flex-start;
   border-radius: 7px;
@@ -2946,12 +2930,8 @@
   right: calc(100% + 10px);
   z-index: 470;
   display: flex;
-  width: min(336px, calc(100vw - 82px));
-  max-height: min(
-    580px,
-    calc(100vh - 86px),
-    calc(var(--td-graph-container-height, 640px) - 24px)
-  );
+  width: min(336px, calc(100cqw - 82px));
+  max-height: min(580px, calc(100vh - 86px), calc(100cqh - 24px));
   flex-direction: column;
   border: 1px solid #d7dde6;
   border-radius: 10px;
@@ -2977,10 +2957,7 @@
   max-height: min(
     calc(580px - var(--td-lineage-context-expanded-height)),
     calc(100vh - 86px - var(--td-lineage-context-expanded-height)),
-    calc(
-      var(--td-graph-container-height, 640px) - 24px -
-        var(--td-lineage-context-expanded-height)
-    )
+    calc(100cqh - 24px - var(--td-lineage-context-expanded-height))
   );
   border-top: 0;
   border-radius: 0 0 10px 10px;
@@ -3604,7 +3581,7 @@
   .lineage-graph__tool-panel,
   .lineage-inspector {
     width: min(360px, calc(100cqw - 72px));
-    max-height: calc(100vh - 72px);
+    max-height: min(calc(100vh - 72px), calc(100cqh - 24px));
   }
   .lineage-graph__stage-surface .lineage-inspector--body-only {
     right: calc(100% + var(--td-lineage-inspector-toolbar-offset) - 1px);
@@ -3811,43 +3788,6 @@
   }
 }
 
-.ui.modal.td-graph-modal > .content {
-  padding: 0;
-}
-
-.ui.fullscreen.modal.td-graph-modal--expanded {
-  inset: 12px auto auto 12px !important;
-  width: calc(100vw - 24px) !important;
-  height: calc(100vh - 24px);
-  margin: 0 !important;
-  border: 1px solid #d7dde6;
-  border-radius: 8px;
-  overflow: visible;
-}
-
-.ui.fullscreen.modal.td-graph-modal--expanded > .close {
-  top: -14px;
-  right: -14px;
-  z-index: 20;
-  width: 30px;
-  height: 30px;
-  margin: 0;
-  border-radius: 8px;
-  background: #ffffff;
-  box-shadow: 0 8px 18px rgba(21, 26, 36, 0.18);
-}
-
-.ui.modal.td-graph-modal--expanded > .content {
-  height: 100%;
-  border-radius: 8px;
-  background: transparent;
-  overflow: hidden;
-}
-
-.ui.modal.td-graph-modal--expanded .td-graph-container {
-  height: 100%;
-}
-
 .td-graph-edge-metadata-badge {
   position: absolute;
   pointer-events: auto;
@@ -3944,27 +3884,27 @@
   );
 }
 
-.lineage-graph
+.lineage-graph__stage-surface
   .react-flow__node.td-lineage-group-node--entity-system
   > .td-lineage-group-node,
-.lineage-graph
+.lineage-graph__stage-surface
   .react-flow__node.td-lineage-resource-node--entity-system
   > .td-lineage-resource-node {
   border-color: #b3b3b3;
 }
 
 // Catalog state only changes borders and group headers, never box backgrounds.
-.lineage-graph
+.lineage-graph__stage-surface
   .react-flow__node.td-lineage-catalog--absent
   > :is(.td-lineage-group-node, .td-lineage-resource-node) {
   border: 2px dashed #b3b3b3;
 }
-.lineage-graph
+.lineage-graph__stage-surface
   .react-flow__node.td-lineage-catalog--deleted
   > :is(.td-lineage-group-node, .td-lineage-resource-node) {
   border: 2px dashed #dc2626;
 }
-.lineage-graph
+.lineage-graph__stage-surface
   .react-flow__node.td-lineage-catalog--absent
   > .td-lineage-group-node {
   :is(.td-lineage-group-node__header, .td-lineage-group-node__absolute-header) {
@@ -3983,7 +3923,7 @@
 }
 
 // Only catalog-present SYSTEM headers use the dark blue treatment.
-.lineage-graph {
+.lineage-graph__stage-surface {
   --td-graph-bg: #eaeaea;
 
   .react-flow__node :is(.td-lineage-group-node, .td-lineage-resource-node) {
@@ -4095,3 +4035,12 @@
 .lineage-graph__tool-panel--legend .lineage-graph__legend-section:empty {
   display: none;
 }
+
+.lineage-graph__tool-panel--legend {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.lineage-graph__legend-section {
+  flex-shrink: 0;
+}