@truedat/dd 8.12.10 → 8.12.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.12.10",
+  "version": "8.12.12",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -54,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.12.8",
+    "@truedat/test": "8.12.12",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -90,5 +90,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "ac5f172e0ff4c087ea040ae29d1f2ea822bcadb6"
+  "gitHead": "b6e3413dae81b2e28e98a21cf371174caa30ab4b"
 }

package/src/components/LineageGraph.js

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
 import Graph from "@truedat/core/components/Graph";
-import LineageGroupNode from "@truedat/core/components/graph/LineageGroupNode";
 import { EdgeHoverContext } from "@truedat/core/components/graph/ColoredEdge";
 import { cancelPoll } from "../routines";
 import { layoutVisibleLineageGraph } from "../utils/lineageLayout";
@@ -63,7 +62,7 @@ import {
   spreadLegacyFieldIndexes,
   legacyPathEdges,
 } from "../utils/lineageGraph";
-import LineageResourceNode from "./LineageResourceNode";
+import LineageGraphNode from "./LineageGraphNode";
 import LineageModuleButton from "./LineageModuleButton";
 import LineageGraphToolbar, { visibleLegendKeys } from "./LineageGraphToolbar";
 
@@ -114,8 +113,8 @@ export {
 } from "../utils/lineageGraph";
 
 const LINEAGE_NODE_TYPES = {
-  lineageGroup: LineageGroupNode,
-  lineageResource: LineageResourceNode,
+  lineageGroup: LineageGraphNode,
+  lineageResource: LineageGraphNode,
 };
 
 export const LineageGraph = ({
@@ -286,16 +285,11 @@ export const LineageGraph = ({
     setFitViewRequestKey((requestKey) => (requestKey || 0) + 1);
   }, []);
 
-  const handleEdgeSelect = useCallback(
-    (edgeContext) => {
-      setPinnedGraphNodeId(null);
-
-      setSelectedContext({ ...edgeContext, iconName: "exchange" });
-      setFocusNodeId(null);
-      setActivePanel("inspector");
-    },
-    [pinnedGraphNodeId],
-  );
+  const handleEdgeSelect = useCallback((edgeContext) => {
+    setSelectedContext({ ...edgeContext, iconName: "exchange" });
+    setFocusNodeId(null);
+    setActivePanel("inspector");
+  }, []);
 
   const resolvedNodeWidth = useMemo(
     () =>
@@ -878,38 +872,41 @@ export const LineageGraph = ({
     );
   }, [layoutedGraphNodes, requestedGraphNodeIds, searchableGraphNodes]);
   const selectedGraphNodeId =
-    pinnedGraphNodeId ||
     (selectedContext?.type === "node" && selectedContext.node?.graphNodeId) ||
     null;
+  const visiblePinnedGraphNodeId =
+    preparedTopology?.originalToVisibleId.get(pinnedGraphNodeId) ||
+    pinnedGraphNodeId;
+  const focusGraphNodeId = visiblePinnedGraphNodeId || selectedGraphNodeId;
   const selectedGraphEdgeId =
     selectedContext?.type === "edge" ? selectedContext.edge?.id : null;
   const focusActive =
-    Boolean(selectedGraphNodeId || selectedGraphEdgeId) || toolbarFilterActive;
+    Boolean(focusGraphNodeId || selectedGraphEdgeId) || toolbarFilterActive;
   const focusedSelectedNodeId = selectedGraphNodeId;
   const { focusedEdgeIds, focusedNodeIds } = useMemo(() => {
-    if (selectedGraphEdgeId) {
+    if (!pinnedGraphNodeId && selectedGraphEdgeId) {
       const edge = graphEdges.find(({ id }) => id === selectedGraphEdgeId);
       return {
         focusedEdgeIds: new Set(edge ? [edge.id] : []),
         focusedNodeIds: new Set(edge ? [edge.source, edge.target] : []),
       };
     }
-    if (!selectedGraphNodeId) {
+    if (!focusGraphNodeId) {
       return toolbarFilterActive
         ? focusedLineageGraphForNodeSet(toolbarMatchedNodeIds, graphEdges)
         : { focusedEdgeIds: new Set(), focusedNodeIds: new Set() };
     }
 
-    const selectedNode = lineageGraphIndex.nodeById.get(selectedGraphNodeId);
+    const selectedNode = lineageGraphIndex.nodeById.get(focusGraphNodeId);
     const seedIds = new Set(
       preparedTopology?.originalsByVisibleId
-        .get(selectedGraphNodeId)
-        ?.map(({ id }) => id) || [selectedGraphNodeId],
+        .get(focusGraphNodeId)
+        ?.map(({ id }) => id) || [focusGraphNodeId],
     );
 
     if (selectedNode?.type === "lineageGroup") {
       lineageGraphIndex
-        .descendantIds(selectedGraphNodeId)
+        .descendantIds(focusGraphNodeId)
         .forEach((id) => seedIds.add(id));
     }
 
@@ -936,15 +933,22 @@ export const LineageGraph = ({
       focusedNodeIds: projectedNodeIds,
     };
   }, [
+    pinnedGraphNodeId,
     graphEdges,
     layoutedGraphNodes,
     lineageGraphIndex,
     preparedTopology,
-    selectedGraphNodeId,
+    focusGraphNodeId,
     selectedGraphEdgeId,
     toolbarFilterActive,
     toolbarMatchedNodeIds,
   ]);
+  const unpinFocus = useCallback(() => {
+    setPinnedGraphNodeId(null);
+    setSelectedContext(null);
+    setActivePanel(null);
+    setFocusNodeId(null);
+  }, []);
   const renderedGraphNodes = useMemo(
     () =>
       focusLineageNodes(
@@ -952,12 +956,14 @@ export const LineageGraph = ({
         focusedNodeIds,
         focusActive,
         focusedSelectedNodeId,
+        visiblePinnedGraphNodeId,
       ).map((node) => ({
         ...node,
         className: [
           node.className,
           queryOriginStates.has(node.id) ? "lineage-node--origin" : "",
           node.id === focusedSelectedNodeId ? "lineage-node--selected" : "",
+          node.id === visiblePinnedGraphNodeId ? "lineage-node--pinned" : "",
         ]
           .filter(Boolean)
           .join(" "),
@@ -965,6 +971,8 @@ export const LineageGraph = ({
         data: {
           ...node.data,
           queryOrigin: queryOriginStates.get(node.id),
+          onUnpin:
+            node.id === visiblePinnedGraphNodeId ? unpinFocus : undefined,
           connectedHandleIds: Array.from(
             connectedHandleIdsByNode.get(node.id) || [],
           ),
@@ -975,6 +983,8 @@ export const LineageGraph = ({
       focusActive,
       focusedNodeIds,
       focusedSelectedNodeId,
+      visiblePinnedGraphNodeId,
+      unpinFocus,
       layoutedGraphNodes,
       queryOriginStates,
     ],
@@ -985,8 +995,8 @@ export const LineageGraph = ({
         graphEdges,
         focusedEdgeIds,
         focusActive,
-        Boolean(selectedGraphNodeId),
-        selectedGraphNodeId,
+        Boolean(focusGraphNodeId),
+        focusGraphNodeId,
         selectedGraphEdgeId,
       ).map((edge) => ({
         ...edge,
@@ -1009,7 +1019,7 @@ export const LineageGraph = ({
       focusActive,
       focusedEdgeIds,
       graphEdges,
-      selectedGraphNodeId,
+      focusGraphNodeId,
       handleEdgeSelect,
       visibleNodeById,
       selectedGraphEdgeId,
@@ -1073,6 +1083,12 @@ export const LineageGraph = ({
     () => new Map(searchableGraphNodes.map((node) => [node.id, node])),
     [searchableGraphNodes],
   );
+  useEffect(() => {
+    setPinnedGraphNodeId(null);
+    setSelectedContext(null);
+    setActivePanel(null);
+    setFocusNodeId(null);
+  }, [graphId, graphType]);
   useEffect(() => {
     if (
       !initialViewState ||
@@ -1143,19 +1159,37 @@ export const LineageGraph = ({
     searchableNodeById,
     renderedGraphEdges,
   ]);
+  const pinnedNode = searchableNodeById.get(visiblePinnedGraphNodeId);
+  const pinnedContextNode = pinnedNode
+    ? selectedNodeFromGraphNode(pinnedNode, searchableNodeById)
+    : null;
+  const pinnedContext = pinnedContextNode
+    ? { type: "node", node: pinnedContextNode }
+    : null;
   useEffect(() => {
-    if (!selectedGraphNodeId || searchableNodeById.has(selectedGraphNodeId))
-      return;
-
-    setActivePanel(null);
-    setPinnedGraphNodeId(null);
-    setSelectedContext(null);
-    setFocusNodeId(null);
-  }, [searchableNodeById, selectedGraphNodeId]);
+    if (loading) return;
+    if (
+      pinnedGraphNodeId &&
+      !searchableNodeById.has(visiblePinnedGraphNodeId) &&
+      !lineageGraphIndex.nodeById.has(pinnedGraphNodeId)
+    ) {
+      setPinnedGraphNodeId(null);
+    }
+    if (selectedGraphNodeId && !searchableNodeById.has(selectedGraphNodeId)) {
+      setActivePanel(null);
+      setSelectedContext(null);
+      setFocusNodeId(null);
+    }
+  }, [
+    loading,
+    pinnedGraphNodeId,
+    visiblePinnedGraphNodeId,
+    lineageGraphIndex,
+    searchableNodeById,
+    selectedGraphNodeId,
+  ]);
   const selectGraphNode = useCallback(
     (node, { center = false } = {}) => {
-      if (pinnedGraphNodeId) return;
-
       const selectedNode = selectedNodeFromGraphNode(node, searchableNodeById);
 
       if (!selectedNode) return;
@@ -1176,7 +1210,7 @@ export const LineageGraph = ({
       setFocusNodeId(center ? node.id : null);
       if (center) setFocusNodeRequestKey((requestKey) => requestKey + 1);
     },
-    [pinnedGraphNodeId, positionedLayout, searchableNodeById],
+    [positionedLayout, searchableNodeById],
   );
   const handleNodeClick = useCallback(
     (event, node) => {
@@ -1220,15 +1254,21 @@ export const LineageGraph = ({
 
     if (!graphNodeId) return;
 
-    setPinnedGraphNodeId((currentGraphNodeId) =>
-      currentGraphNodeId === graphNodeId ? null : graphNodeId,
-    );
-  }, [selectedContext]);
-  const unpinFocus = useCallback(() => setPinnedGraphNodeId(null), []);
-  const handleCenterNode = useCallback((nodeId) => {
-    setFocusNodeId(nodeId);
-    setFocusNodeRequestKey((requestKey) => requestKey + 1);
-  }, []);
+    if (visiblePinnedGraphNodeId === graphNodeId) {
+      unpinFocus();
+      return;
+    }
+    setPinnedGraphNodeId(graphNodeId);
+  }, [selectedContext, unpinFocus, visiblePinnedGraphNodeId]);
+  const handleCenterNode = useCallback(
+    (nodeId) => {
+      const node = searchableNodeById.get(nodeId);
+
+      if (!node) return;
+      selectGraphNode(node, { center: true });
+    },
+    [searchableNodeById, selectGraphNode],
+  );
   const handleNodeDoubleClick = useCallback(
     (event, node) => {
       event?.preventDefault();
@@ -1245,19 +1285,11 @@ export const LineageGraph = ({
         return;
       }
 
-      if (pinnedGraphNodeId) {
-        if (node?.id === pinnedGraphNodeId) {
-          setActivePanel("inspector");
-        }
-        return;
-      }
-
       selectGraphNode(node);
     },
     [
       collapsibleGroupIds,
       doubleClickExpandsNodes,
-      pinnedGraphNodeId,
       selectGraphNode,
       toggleGroupCollapse,
     ],
@@ -1270,7 +1302,9 @@ export const LineageGraph = ({
         ? activeSurfaceRef.current
         : stageRef.current
       )
-        ?.querySelector(".lineage-graph__dock-context-clear")
+        ?.querySelector(
+          "button.lineage-graph__dock-context-reopen, .lineage-graph__dock-context-clear",
+        )
         ?.focus();
     });
   }, []);
@@ -1280,28 +1314,21 @@ export const LineageGraph = ({
   }, [focusContextButton]);
   const clearSelectedContext = useCallback(() => {
     setActivePanel(null);
-    setPinnedGraphNodeId(null);
     setSelectedContext(null);
     setFocusNodeId(null);
   }, []);
-  const handlePanelChange = useCallback(
-    (panel) => {
-      if (pinnedGraphNodeId && panel !== "inspector" && panel !== null) return;
-      setActivePanel(panel);
-    },
-    [pinnedGraphNodeId],
-  );
+  const handlePanelChange = useCallback((panel) => setActivePanel(panel), []);
+  const selectPinnedContext = () => {
+    if (!pinnedContext) return;
+    setSelectedContext(pinnedContext);
+    setActivePanel("inspector");
+  };
   const handlePaneSelectionClear = useCallback(
     (event) => {
-      if (pinnedGraphNodeId) return;
-
-      setActivePanel(null);
-      setPinnedGraphNodeId(null);
-      setSelectedContext(null);
-      setFocusNodeId(null);
+      clearSelectedContext();
       onPaneClick?.(event);
     },
-    [onPaneClick, pinnedGraphNodeId],
+    [clearSelectedContext, onPaneClick],
   );
 
   useEffect(() => {
@@ -1317,21 +1344,17 @@ export const LineageGraph = ({
       ) {
         return;
       }
-      if (activePanel === "inspector" && pinnedGraphNodeId) return;
-      setActivePanel(null);
+      if (pinnedGraphNodeId) clearSelectedContext();
+      else setActivePanel(null);
     };
     const closeOnEscape = (event) => {
       if (event.key !== "Escape") return;
 
-      if (pinnedGraphNodeId && !activePanel) return;
       event.preventDefault();
       event.stopPropagation();
-      if (pinnedGraphNodeId) {
-        setActivePanel(null);
-        return;
-      }
       if (selectedContext) {
         clearSelectedContext();
+        focusContextButton();
         return;
       }
       setActivePanel(null);
@@ -1348,9 +1371,9 @@ export const LineageGraph = ({
   }, [
     activePanel,
     selectedContext,
+    pinnedGraphNodeId,
     clearSelectedContext,
     focusContextButton,
-    pinnedGraphNodeId,
   ]);
 
   const shouldRenderGraph = !loading && hasGraph;
@@ -1376,6 +1399,8 @@ export const LineageGraph = ({
       canExpandAll={canExpandAll}
       collapsible={positionedLayout && Boolean(collapsibleGroupIds.length)}
       context={selectedContext}
+      pinnedContext={pinnedContext}
+      onPinnedContextSelect={selectPinnedContext}
       doubleClickExpandsNodes={doubleClickExpandsNodes}
       visibleLegend={visibleLegend}
       legendItems={visibleLegendItems}
@@ -1397,7 +1422,7 @@ export const LineageGraph = ({
       onCenterNode={handleCenterNode}
       pinned={
         selectedContext?.type === "node" &&
-        pinnedGraphNodeId === selectedContext.node?.graphNodeId
+        visiblePinnedGraphNodeId === selectedContext.node?.graphNodeId
       }
       expansionDepth={expansionDepth}
       maxExpansionDepth={effectiveMaxDepth}
@@ -1524,6 +1549,8 @@ export const LineageGraph = ({
               />
             </EdgeHoverContext.Provider>
           </div>
+        ) : loading ? (
+          <div className="lineage-graph__empty" />
         ) : (
           <LineageGraphEmptyState />
         )}

package/src/components/LineageGraphNode.js

@@ -0,0 +1,53 @@
+import { memo } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Pin } from "lucide-react";
+import LineageGroupNode from "@truedat/core/components/graph/LineageGroupNode";
+import LineageResourceNode from "./LineageResourceNode";
+
+const stopPropagation = (event) => event.stopPropagation();
+
+const LineageGraphNode = ({ type, data, ...props }) => {
+  const { formatMessage } = useIntl();
+  const Node = type === "lineageGroup" ? LineageGroupNode : LineageResourceNode;
+  const unpinLabel = formatMessage({
+    id: "lineage.context_menu.unpin_focus",
+    defaultMessage: "Unpin focus",
+  });
+  const unpin = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.closest(".react-flow__node")?.focus();
+    data.onUnpin();
+  };
+
+  return (
+    <>
+      <Node {...props} data={data} />
+      {data.onUnpin ? (
+        <button
+          aria-label={unpinLabel}
+          aria-pressed="true"
+          className="lineage-graph__node-unpin nodrag nopan"
+          onClick={unpin}
+          onDoubleClick={stopPropagation}
+          onPointerDown={stopPropagation}
+          onMouseDown={stopPropagation}
+          onKeyDown={stopPropagation}
+          onKeyUp={stopPropagation}
+          title={unpinLabel}
+          type="button"
+        >
+          <Pin size={14} aria-hidden="true" />
+        </button>
+      ) : null}
+    </>
+  );
+};
+
+LineageGraphNode.propTypes = {
+  type: PropTypes.string,
+  data: PropTypes.object.isRequired,
+};
+
+export default memo(LineageGraphNode);

package/src/components/LineageGraphToolbar.js

@@ -539,6 +539,8 @@ export const LineageGraphToolbar = ({
   onUnpin,
   onCenterNode,
   pinned,
+  pinnedContext,
+  onPinnedContextSelect,
   expansionDepth = 4,
   maxExpansionDepth = expansionDepth,
   searchInput = "",
@@ -551,14 +553,22 @@ export const LineageGraphToolbar = ({
   const { formatMessage } = useIntl();
   const [depthPopoverOpen, setDepthPopoverOpen] = useState(false);
   const [settingsPopoverOpen, setSettingsPopoverOpen] = useState(false);
-  const hasContext = Boolean(context);
-  const inspectorOpen = hasContext && activePanel === "inspector";
-  const selectedLabel = contextLabel(context);
+  const dockContext = context || pinnedContext;
+  const pinnedOnly = !context && Boolean(pinnedContext);
+  const ContextSummary = pinnedOnly ? "button" : "div";
+  const dockPinned = pinned || pinnedOnly;
+  const hasContext = Boolean(dockContext);
+  const inspectorOpen = Boolean(context) && activePanel === "inspector";
+  const selectedLabel = contextLabel(dockContext);
   const selectedTypeLabel = hasContext
-    ? contextTypeLabel(context, formatMessage)
+    ? contextTypeLabel(dockContext, formatMessage)
     : "";
   const togglePanel = (panel) =>
     onPanelChange(activePanel === panel ? null : panel);
+  const unpinLabel = formatMessage({
+    id: "lineage.context_menu.unpin_focus",
+    defaultMessage: "Unpin focus",
+  });
   const clearContextLabel = formatMessage(
     {
       id: "lineage.graph.toolbar.context.clear",
@@ -566,6 +576,17 @@ export const LineageGraphToolbar = ({
     },
     { name: selectedLabel },
   );
+  const unpinButton = (
+    <button
+      aria-label={unpinLabel}
+      aria-pressed="true"
+      className="lineage-graph__dock-context-unpin"
+      onClick={onUnpin}
+      type="button"
+    >
+      <DockIcon name="pin" />
+    </button>
+  );
   const visibleLevelsLabel = formatMessage({
     id: "lineage.graph.controls.visible_levels",
     defaultMessage: "Visible levels",
@@ -592,7 +613,7 @@ export const LineageGraphToolbar = ({
           hasContext ? " lineage-graph__dock-context--selected" : ""
         }${
           inspectorOpen ? " lineage-graph__dock-context--inspector-open" : ""
-        }${pinned ? " lineage-graph__dock-context--pinned" : ""}`}
+        }${dockPinned ? " lineage-graph__dock-context--pinned" : ""}`}
       >
         {inspectorOpen ? (
           <LineageInspectorPanel
@@ -610,28 +631,16 @@ export const LineageGraphToolbar = ({
             className={`lineage-graph__dock-context-bar${
               inspectorOpen ? " lineage-graph__dock-context-bar--expanded" : ""
             }${
-              context?.type === "edge"
+              dockContext?.type === "edge"
                 ? " lineage-graph__dock-context-bar--edge"
                 : ""
             }`}
           >
-            {pinned ? (
-              <button
-                aria-label={formatMessage({
-                  id: "lineage.context_menu.unpin_focus",
-                  defaultMessage: "Unpin focus",
-                })}
-                aria-pressed="true"
-                className="lineage-graph__dock-context-unpin"
-                onClick={onUnpin}
-                type="button"
-              >
-                <DockIcon name="pin" />
-              </button>
-            ) : null}
-            <div
-              aria-live="polite"
+            {pinnedOnly ? unpinButton : null}
+            <ContextSummary
               className="lineage-graph__dock-context-reopen lineage-graph__dock-context-button"
+              onClick={pinnedOnly ? onPinnedContextSelect : undefined}
+              type={pinnedOnly ? "button" : undefined}
             >
               <span
                 aria-live="polite"
@@ -641,7 +650,7 @@ export const LineageGraphToolbar = ({
                   aria-hidden="true"
                   className="lineage-graph__dock-context-summary-icon"
                 >
-                  <DockIcon name={contextIcon(context)} />
+                  <DockIcon name={contextIcon(dockContext)} />
                 </span>
                 <span className="lineage-graph__dock-context-copy">
                   <span className="lineage-graph__dock-context-label">
@@ -652,15 +661,17 @@ export const LineageGraphToolbar = ({
                   </span>
                 </span>
               </span>
-            </div>
-            <button
-              aria-label={clearContextLabel}
-              className="lineage-graph__dock-context-clear"
-              onClick={onClearContext}
-              type="button"
-            >
-              <DockIcon name="close" />
-            </button>
+            </ContextSummary>
+            {context ? (
+              <button
+                aria-label={clearContextLabel}
+                className="lineage-graph__dock-context-clear"
+                onClick={onClearContext}
+                type="button"
+              >
+                <DockIcon name="close" />
+              </button>
+            ) : null}
           </div>
         ) : (
           <LineageToolButton
@@ -680,7 +691,6 @@ export const LineageGraphToolbar = ({
         <LineageToolButton
           active={activePanel === "search"}
           aria-expanded={activePanel === "search"}
-          disabled={pinned}
           icon="search"
           label={formatMessage({
             id: "lineage.graph.toolbar.search.header",
@@ -884,6 +894,8 @@ LineageGraphToolbar.propTypes = {
   onUnpin: PropTypes.func,
   onCenterNode: PropTypes.func,
   pinned: PropTypes.bool,
+  pinnedContext: PropTypes.object,
+  onPinnedContextSelect: PropTypes.func,
   expansionDepth: PropTypes.number,
   maxExpansionDepth: PropTypes.number,
   searchInput: PropTypes.string,

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

@@ -2,6 +2,7 @@ import {
   collapseLineageNodes,
   expandLineageDescendantsUntilOversized,
   focusLineageEdges,
+  focusLineageNodes,
   focusedLineageGraphForNodeSet,
   lineageDirectChildCounts,
   lineageEdge,
@@ -894,3 +895,18 @@ describe("lineageCatalogState", () => {
     ).toBe("deleted");
   });
 });
+
+describe("focusLineageNodes with a pinned node", () => {
+  it("keeps an unrelated selection visible without losing the pinned focus", () => {
+    const nodes = ["A", "B", "C"].map((id) => ({
+      id,
+      type: "lineageResource",
+      data: {},
+    }));
+    const result = focusLineageNodes(nodes, new Set(), true, "B", "A");
+    expect(result[0].data.focusDimmed).toBe(false);
+    expect(result[1].data.focusSelected).toBe(true);
+    expect(result[1].data.focusDimmed).toBe(false);
+    expect(result[2].data.focusDimmed).toBe(true);
+  });
+});

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

@@ -175,7 +175,7 @@ it("restores groups, fields, depth and a pinned selection without reapplying def
     },
   });
   expect(screen.getAllByRole("button", { name: "Unpin focus" })).toHaveLength(
-    2,
+    1,
   );
   fireEvent.click(
     screen.getByRole("button", { name: "View in Lineage module" }),