@truedat/dd 8.12.10 → 8.12.11

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",

package/src/styles/LineageGraph.less

@@ -2481,8 +2481,8 @@
       var(--td-lineage-inspector-toolbar-offset) +
       var(--td-lineage-context-control-size) - 1px
   );
-  --td-lineage-inspector-motion-duration: 180ms;
-  --td-lineage-inspector-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --td-lineage-inspector-motion-duration: 220ms;
+  --td-lineage-inspector-motion-easing: cubic-bezier(0.22, 0.68, 0, 1);
 
   position: relative;
   display: flex;
@@ -2540,12 +2540,16 @@
   content: "";
   pointer-events: none;
 }
+.lineage-graph__dock-context--pinned .lineage-graph__dock-context-bar {
+  background: var(--td-graph-accent, #ed5c17);
+}
 .lineage-graph__dock-context--pinned
   .lineage-graph__dock-context-bar:not(
     .lineage-graph__dock-context-bar--expanded
   ) {
   background: var(--td-graph-accent, #ed5c17);
-  box-shadow: 0 5px 12px rgba(237, 92, 23, 0.28);
+  box-shadow: 0 5px 12px
+    color-mix(in srgb, var(--td-graph-accent, #ed5c17) 28%, transparent);
 }
 .lineage-graph__dock-context-bar--edge {
   background: var(--td-graph-edge-metadata, #7c3aed);
@@ -2564,6 +2568,11 @@
   cursor: pointer;
 }
 .lineage-graph__dock-context-reopen {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
   position: static;
   display: flex;
   height: 100%;
@@ -2572,28 +2581,30 @@
   align-items: center;
   text-align: left;
 }
+button.lineage-graph__dock-context-reopen {
+  cursor: pointer;
+}
 .lineage-graph__dock-context-clear,
 .lineage-graph__dock-context-unpin {
   width: var(--td-lineage-context-control-size);
   min-width: var(--td-lineage-context-control-size);
 }
+@keyframes td-lineage-context-copy-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .lineage-graph__dock-context-clear {
   border-left: 1px solid rgba(255, 255, 255, 0.34);
 }
 .lineage-graph__dock-context-bar--expanded .lineage-graph__dock-context-clear {
   border-left: 0;
 }
-.lineage-graph__dock-context-bar--expanded .lineage-graph__dock-context-unpin {
-  height: 100%;
-  border-right: 1px solid rgba(255, 255, 255, 0.34);
-}
-.lineage-graph__dock-context--pinned
-  .lineage-graph__dock-context-bar--expanded
-  .lineage-graph__dock-context-unpin {
-  background: var(--td-graph-accent, #ed5c17);
-  color: #ffffff;
-}
 .lineage-graph__dock-context-summary {
+  animation: td-lineage-context-copy-in 140ms ease-out;
   display: flex;
   width: 100%;
   height: 100%;
@@ -2614,12 +2625,6 @@
   border: 1px solid transparent;
   border-radius: 6px;
   transition:
-    width var(--td-lineage-inspector-motion-duration)
-      var(--td-lineage-inspector-motion-easing),
-    min-width var(--td-lineage-inspector-motion-duration)
-      var(--td-lineage-inspector-motion-easing),
-    height var(--td-lineage-inspector-motion-duration)
-      var(--td-lineage-inspector-motion-easing),
     border-color var(--td-lineage-inspector-motion-duration)
       var(--td-lineage-inspector-motion-easing),
     background-color var(--td-lineage-inspector-motion-duration)
@@ -2635,7 +2640,7 @@
   flex: 1 1 auto;
   flex-direction: column;
   justify-content: center;
-  gap: 3px;
+  gap: 0;
 }
 .lineage-graph__dock-context-label,
 .lineage-graph__dock-context-type {
@@ -2649,8 +2654,6 @@
 .lineage-graph__dock-context-label {
   font-size: 11px;
   font-weight: 700;
-  transition: font-size var(--td-lineage-inspector-motion-duration)
-    var(--td-lineage-inspector-motion-easing);
 }
 .lineage-graph__dock-context-type {
   max-height: 0;
@@ -2662,8 +2665,6 @@
   text-transform: uppercase;
   transform: translateY(-3px);
   transition:
-    max-height var(--td-lineage-inspector-motion-duration)
-      var(--td-lineage-inspector-motion-easing),
     opacity var(--td-lineage-inspector-motion-duration)
       var(--td-lineage-inspector-motion-easing),
     transform var(--td-lineage-inspector-motion-duration)
@@ -2678,6 +2679,9 @@
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.1);
 }
+.lineage-graph__dock-context-bar--expanded .lineage-graph__dock-context-copy {
+  gap: 3px;
+}
 .lineage-graph__dock-context-bar--expanded .lineage-graph__dock-context-label {
   font-size: 16px;
   font-weight: 800;
@@ -3607,6 +3611,7 @@
 @media (prefers-reduced-motion: reduce) {
   .lineage-graph__tool-panel,
   .lineage-inspector,
+  .lineage-graph__dock-context-summary,
   .lineage-graph__dock-context-clear .icon {
     animation: none;
   }
@@ -4044,3 +4049,55 @@
 .lineage-graph__legend-section {
   flex-shrink: 0;
 }
+
+.lineage-graph__stage-surface
+  .react-flow__node.lineage-node--pinned
+  > :is(.td-lineage-resource-node, .td-lineage-group-node) {
+  box-shadow: inset 0 0 0 2px var(--td-graph-accent, #ed5c17);
+  opacity: 1;
+
+  > :is(
+      .td-lineage-resource-node__header,
+      .td-lineage-group-node__header,
+      .td-lineage-group-node__absolute-header
+    ) {
+    background: var(--td-lineage-interaction-bg, #fff7ed);
+    box-shadow: none;
+    color: color-mix(in srgb, var(--td-graph-accent, #ed5c17) 70%, #000000);
+
+    :is(
+      .td-lineage-resource-node__label,
+      .td-lineage-resource-node__kind,
+      .td-lineage-group-node__label,
+      .td-lineage-group-node__absolute-label,
+      .td-lineage-group-node__toggle,
+      .td-lineage-group-node__type-icon.icon
+    ) {
+      color: color-mix(in srgb, var(--td-graph-accent, #ed5c17) 70%, #000000);
+    }
+  }
+}
+
+.lineage-graph__stage-surface .lineage-graph__node-unpin {
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  z-index: 5;
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--td-graph-accent, #ed5c17);
+  border-radius: 50%;
+  background: var(--td-graph-accent, #ed5c17);
+  color: #ffffff;
+  cursor: pointer;
+  pointer-events: auto;
+
+  &:focus-visible {
+    outline: 2px solid #0284c7;
+    outline-offset: 2px;
+  }
+}