@truedat/dd 8.14.0 → 8.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.14.0",
+  "version": "8.14.2",
   "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.14.0",
+    "@truedat/test": "8.14.2",
     "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": "9396fc850fc50e8e44a7198bac95c7a965396159"
+  "gitHead": "3814d239579315d817ba0e3467771e6a128e5788"
 }

package/src/components/LineageGraph.js

@@ -7,6 +7,14 @@ import Graph from "@truedat/core/components/Graph";
 import { EdgeHoverContext } from "@truedat/core/components/graph/ColoredEdge";
 import { backgroundGraph } from "../routines";
 import { layoutVisibleLineageGraph } from "../utils/lineageLayout";
+import {
+  applyInternalEdgeRoutes,
+  applyInternalNodeLayers,
+} from "../utils/lineageInternalRoutes";
+import {
+  readDependencyLayout,
+  writeDependencyLayout,
+} from "../utils/lineageViewPreferences";
 import {
   createLineageGraphIndex,
   prepareLineageTopology,
@@ -49,6 +57,7 @@ import {
   applyFieldHandlesToEdges,
   redesignedLineageEdges,
   planLineageEdgeRoutes,
+  planExternalLineageEdgeRoutes,
   focusLineageNodes,
   focusLineageEdges,
   focusedLineageGraphForNodeSet,
@@ -138,6 +147,7 @@ export const LineageGraph = ({
   structureId,
   initialViewState,
 }) => {
+  const { formatMessage } = useIntl();
   const preparedTopology = useMemo(
     () => prepareLineageTopology(topology),
     [topology],
@@ -163,6 +173,12 @@ export const LineageGraph = ({
     Number.MAX_SAFE_INTEGER,
   );
 
+  const [dependencyLayout, setDependencyLayout] = useState(() =>
+    String(initialViewState?.graphId) === String(graphId) &&
+    ["compact", "expanded"].includes(initialViewState?.dependencyLayout)
+      ? initialViewState.dependencyLayout
+      : readDependencyLayout(),
+  );
   const [activePanel, setActivePanel] = useState(null);
   const [selectedContext, setSelectedContext] = useState(null);
   const [doubleClickExpandsNodes, setDoubleClickExpandsNodes] = useState(false);
@@ -173,6 +189,7 @@ export const LineageGraph = ({
   const [searchInput, setSearchInput] = useState("");
   const [searchTerm, setSearchTerm] = useState("");
   const [systemTypeFilter, setSystemTypeFilter] = useState("");
+  const [customDepthGraphKey, setCustomDepthGraphKey] = useState(null);
   const [collapsedGroupIds, setCollapsedGroupIds] = useState(() => new Set());
   const [warnedGroupIds, setWarnedGroupIds] = useState(() => new Set());
   const [pendingExpand, setPendingExpand] = useState(null);
@@ -180,8 +197,10 @@ export const LineageGraph = ({
     () => new Set(),
   );
   const [hoveredNodeId, setHoveredNodeId] = useState(null);
+  const [keyboardFocusedNodeId, setKeyboardFocusedNodeId] = useState(null);
   const [hoveredEdgeEndpoints, setHoveredEdgeEndpoints] = useState(null);
   const stageRef = useRef(null);
+  const resizeFitTimeoutRef = useRef(null);
   const activeSurfaceRef = useRef(null);
   const restoredViewStateRef = useRef(null);
   const graphReadyRef = useRef(false);
@@ -222,6 +241,20 @@ export const LineageGraph = ({
     setHoveredEdgeEndpoints(null);
     if (loading) setFittedGraphKey(null);
   }, [graphIdForFit, loading]);
+  useEffect(() => {
+    const fitAfterResize = () => {
+      clearTimeout(resizeFitTimeoutRef.current);
+      resizeFitTimeoutRef.current = setTimeout(() => {
+        setFocusNodeId(null);
+        setFitViewRequestKey((requestKey) => (requestKey || 0) + 1);
+      }, 80);
+    };
+    window.addEventListener("resize", fitAfterResize);
+    return () => {
+      window.removeEventListener("resize", fitAfterResize);
+      clearTimeout(resizeFitTimeoutRef.current);
+    };
+  }, []);
   const duplicateNodeIds = useMemo(
     () => positionedDuplicateNodeIds(groups, resources),
     [groups, resources],
@@ -258,6 +291,7 @@ export const LineageGraph = ({
         return;
       }
       setPendingExpand(null);
+      setCustomDepthGraphKey(graphIdForFit);
       layoutAnchorNodeIdRef.current = groupId;
       setCollapsedGroupIds((currentIds) => {
         const nextIds = new Set(currentIds);
@@ -272,7 +306,7 @@ export const LineageGraph = ({
       });
       setFocusNodeId(null);
     },
-    [collapsedGroupIds, warnedGroupIds],
+    [collapsedGroupIds, warnedGroupIds, graphIdForFit],
   );
   const collapseAllGroups = useCallback((groupIds) => {
     layoutAnchorNodeIdRef.current = null;
@@ -296,9 +330,9 @@ export const LineageGraph = ({
   const resolvedNodeWidth = useMemo(
     () =>
       nodeDesign === "redesigned"
-        ? lineageNodeContentWidth(resources)
+        ? lineageNodeContentWidth([...groups, ...resources])
         : undefined,
-    [nodeDesign, resources],
+    [groups, nodeDesign, resources],
   );
   const graphNodes = useMemo(
     () =>
@@ -337,7 +371,7 @@ export const LineageGraph = ({
   const positionedGraphNodes = useMemo(
     () =>
       preparedTopology
-        ? lineageTopologyNodes(preparedTopology, nodeDesign, resolvedNodeWidth)
+        ? lineageTopologyNodes(preparedTopology, nodeDesign)
         : positionedLayout
           ? lineagePositionedLayoutNodes({
               groups,
@@ -348,7 +382,6 @@ export const LineageGraph = ({
               nodeDesign,
               expandedFieldNodeIds,
               onToggleFields: toggleNodeFields,
-              nodeWidth: resolvedNodeWidth,
             })
           : [],
     [
@@ -360,7 +393,6 @@ export const LineageGraph = ({
       preparedHierarchy,
       preparedTopology,
       resources,
-      resolvedNodeWidth,
       toggleNodeFields,
     ],
   );
@@ -388,7 +420,10 @@ export const LineageGraph = ({
         )
       : effectiveDefaultDepth;
   const setExpansionDepth = useCallback(
-    (depth) => setExpansionSelection({ depth, graphKey: graphIdForFit }),
+    (depth) => {
+      setExpansionSelection({ depth, graphKey: graphIdForFit });
+      setCustomDepthGraphKey(null);
+    },
     [graphIdForFit],
   );
 
@@ -435,6 +470,7 @@ export const LineageGraph = ({
         return;
       }
       setPendingExpand(null);
+      setCustomDepthGraphKey(graphIdForFit);
       layoutAnchorNodeIdRef.current = groupId;
       setCollapsedGroupIds((currentIds) =>
         expandLineageDescendantsUntilOversized(
@@ -452,6 +488,7 @@ export const LineageGraph = ({
       oversizedGroupIds,
       collapsedGroupIds,
       warnedGroupIds,
+      graphIdForFit,
     ],
   );
   useEffect(() => {
@@ -461,6 +498,7 @@ export const LineageGraph = ({
     (groupId, action) => {
       const nextWarnedIds = new Set([...warnedGroupIds, groupId]);
       setWarnedGroupIds(nextWarnedIds);
+      setCustomDepthGraphKey(graphIdForFit);
       setPendingExpand(null);
       if (action === "descendants") {
         layoutAnchorNodeIdRef.current = groupId;
@@ -483,7 +521,7 @@ export const LineageGraph = ({
       }
       setFocusNodeId(null);
     },
-    [positionedGraphNodes, oversizedGroupIds, warnedGroupIds],
+    [positionedGraphNodes, oversizedGroupIds, warnedGroupIds, graphIdForFit],
   );
   const dismissOversizedWarning = useCallback(() => setPendingExpand(null), []);
   const defaultCollapseSignature = useMemo(
@@ -697,14 +735,18 @@ export const LineageGraph = ({
   );
   const layoutedGraphNodes = useMemo(
     () =>
-      layoutVisibleLineageGraph({
-        anchorNodeId: layoutAnchorNodeIdRef.current,
-        edges: visibleLineageEdges,
-        graphType,
-        nodes: positionedLayout ? collapsedGraphNodes : graphNodes,
-        previousLayout: previousLayoutRef.current,
-      }),
+      applyInternalNodeLayers(
+        layoutVisibleLineageGraph({
+          dependencyLayout,
+          anchorNodeId: layoutAnchorNodeIdRef.current,
+          edges: visibleLineageEdges,
+          graphType,
+          nodes: positionedLayout ? collapsedGraphNodes : graphNodes,
+          previousLayout: previousLayoutRef.current,
+        }),
+      ),
     [
+      dependencyLayout,
       collapsedGraphNodes,
       graphType,
       graphNodes,
@@ -742,21 +784,26 @@ export const LineageGraph = ({
       visibleNodeById,
     );
 
+    const routedEdges =
+      nodeDesign === "redesigned"
+        ? applyInternalEdgeRoutes(handledEdges, layoutedGraphNodes)
+        : handledEdges;
     const renderedEdges =
       nodeDesign === "redesigned"
         ? redesignedLineageEdges(
             preparedTopology
-              ? planLineageEdgeRoutes(handledEdges, layoutedGraphNodes)
-              : handledEdges,
+              ? planExternalLineageEdgeRoutes(routedEdges, layoutedGraphNodes)
+              : routedEdges,
           )
         : positionedLayout
           ? planLineageEdgeRoutes(handledEdges, layoutedGraphNodes)
           : handledEdges;
     return renderedEdges.map((edge) => ({
       ...edge,
-      data: { ...edge.data, animated: false },
+      data: { ...edge.data, dependencyLayout, animated: false },
     }));
   }, [
+    dependencyLayout,
     layoutedGraphNodes,
     nodeDesign,
     positionedLayout,
@@ -973,6 +1020,33 @@ export const LineageGraph = ({
         data: {
           ...node.data,
           queryOrigin: queryOriginStates.get(node.id),
+          internalColumns: node.data?.internalColumns?.map((column) => ({
+            ...column,
+            label: (column.roles || [column.key])
+              .map((role) =>
+                formatMessage({ id: `lineage.graph.layout.${role}` }),
+              )
+              .join(" / "),
+            countLabel: formatMessage(
+              { id: "lineage.graph.layout.node_count" },
+              {
+                count: column.count,
+              },
+            ),
+            title: formatMessage({ id: "lineage.graph.layout.roles_hint" }),
+          })),
+          internalSummary: node.data?.internalEdgeGuides
+            ? formatMessage(
+                { id: "lineage.graph.layout.internal_count" },
+                {
+                  count: Object.keys(node.data.internalEdgeGuides).length,
+                },
+              )
+            : undefined,
+          internalHint:
+            node.data?.internalEdgeGuides && dependencyLayout === "compact"
+              ? formatMessage({ id: "lineage.graph.layout.compact_hint" })
+              : undefined,
           onUnpin:
             node.id === visiblePinnedGraphNodeId ? unpinFocus : undefined,
           connectedHandleIds: Array.from(
@@ -981,6 +1055,8 @@ export const LineageGraph = ({
         },
       })),
     [
+      dependencyLayout,
+      formatMessage,
       connectedHandleIdsByNode,
       focusActive,
       focusedNodeIds,
@@ -1036,6 +1112,17 @@ export const LineageGraph = ({
     }
     return ids;
   }, [hoveredNodeId, renderedGraphEdges]);
+  useEffect(() => {
+    if (loading || !visibleNodeById.has(keyboardFocusedNodeId))
+      setKeyboardFocusedNodeId(null);
+  }, [loading, visibleNodeById, keyboardFocusedNodeId]);
+  const handleNodeFocus = (event) => {
+    const id = event.target
+      .closest?.(".react-flow__node")
+      ?.getAttribute("data-id");
+    setKeyboardFocusedNodeId(!loading && visibleNodeById.has(id) ? id : null);
+  };
+  const handleNodeBlur = () => setKeyboardFocusedNodeId(null);
   const hoverContextValue = useMemo(
     () => ({
       hoveredNodeId,
@@ -1043,8 +1130,18 @@ export const LineageGraph = ({
       connectedNodeIds,
       hoveredEdgeEndpoints,
       setHoveredEdgeEndpoints,
+      keyboardFocusedNodeId,
+      compactReferenceNodeId: focusGraphNodeId,
+      selectedEdgeId: selectedGraphEdgeId,
     }),
-    [hoveredNodeId, connectedNodeIds, hoveredEdgeEndpoints],
+    [
+      hoveredNodeId,
+      keyboardFocusedNodeId,
+      connectedNodeIds,
+      hoveredEdgeEndpoints,
+      focusGraphNodeId,
+      selectedGraphEdgeId,
+    ],
   );
   const hasGraph = !_.isEmpty(graphNodes) || !_.isEmpty(renderedGraphEdges);
   const visibleLegendItems = useMemo(() => {
@@ -1102,6 +1199,8 @@ export const LineageGraph = ({
       return;
 
     restoredViewStateRef.current = initialViewState;
+    if (["compact", "expanded"].includes(initialViewState.dependencyLayout))
+      setDependencyLayout(initialViewState.dependencyLayout);
     setExpansionDepth(
       normalizedExpansionDepth(
         initialViewState.expansionDepth,
@@ -1109,6 +1208,8 @@ export const LineageGraph = ({
         effectiveMaxDepth,
       ),
     );
+    if (initialViewState.expansionDepthCustom)
+      setCustomDepthGraphKey(graphIdForFit);
     const groupIds = new Set(collapsibleGroupIds);
     setCollapsedGroupIds(
       new Set(
@@ -1155,6 +1256,7 @@ export const LineageGraph = ({
     hasGraph,
     graphId,
     setExpansionDepth,
+    graphIdForFit,
     effectiveDefaultDepth,
     effectiveMaxDepth,
     collapsibleGroupIds,
@@ -1201,6 +1303,8 @@ export const LineageGraph = ({
           lineageAncestorNodeIds(node, searchableNodeById),
         );
 
+        if ([...ancestorIds].some((id) => effectiveCollapsedGroupIds.has(id)))
+          setCustomDepthGraphKey(graphIdForFit);
         setCollapsedGroupIds(
           (currentIds) =>
             new Set([...currentIds].filter((id) => !ancestorIds.has(id))),
@@ -1212,7 +1316,12 @@ export const LineageGraph = ({
       setFocusNodeId(center ? node.id : null);
       if (center) setFocusNodeRequestKey((requestKey) => requestKey + 1);
     },
-    [positionedLayout, searchableNodeById],
+    [
+      positionedLayout,
+      searchableNodeById,
+      effectiveCollapsedGroupIds,
+      graphIdForFit,
+    ],
   );
   const handleNodeClick = useCallback(
     (event, node) => {
@@ -1327,30 +1436,41 @@ export const LineageGraph = ({
   };
   const handlePaneSelectionClear = useCallback(
     (event) => {
-      clearSelectedContext();
+      if (activePanel && !pinnedGraphNodeId) setActivePanel(null);
+      else clearSelectedContext();
       onPaneClick?.(event);
     },
-    [clearSelectedContext, onPaneClick],
+    [activePanel, pinnedGraphNodeId, clearSelectedContext, onPaneClick],
   );
 
   useEffect(() => {
     if (!activePanel && !selectedContext) return undefined;
 
     const closeOnOutsidePointer = (event) => {
-      if (event.target?.closest?.(".lineage-graph__dock")) return;
       if (
-        activePanel === "inspector" &&
+        event.target?.closest?.(
+          ".lineage-graph__dock, .lineage-graph__settings-popup, .lineage-graph__depth-popover, .react-flow__pane",
+        )
+      )
+        return;
+      if (
         event.target?.closest?.(
           ".react-flow__node, .td-graph-edge-hit-area, .td-graph-edge-metadata-badge",
         )
       ) {
         return;
       }
-      if (pinnedGraphNodeId) clearSelectedContext();
-      else setActivePanel(null);
+      if (activePanel && !pinnedGraphNodeId) setActivePanel(null);
+      else clearSelectedContext();
     };
     const closeOnEscape = (event) => {
       if (event.key !== "Escape") return;
+      if (
+        event.target?.closest?.(
+          ".lineage-graph__settings-popup, .lineage-graph__depth-popover, .lineage-graph__dock-settings-button[aria-expanded=true], .lineage-graph__dock-depth-button[aria-expanded=true]",
+        )
+      )
+        return;
 
       event.preventDefault();
       event.stopPropagation();
@@ -1390,9 +1510,28 @@ export const LineageGraph = ({
     graphReadyRef.current = ready;
   }, [hasGraph, loading, fittedGraphKey, graphIdForFit, onGraphReady]);
 
-  const handleCollapseAll = useCallback(
-    () => collapseAllGroups(collapsibleGroupIds),
-    [collapseAllGroups, collapsibleGroupIds],
+  const handleCollapseAll = useCallback(() => {
+    setExpansionDepth(0);
+    collapseAllGroups(collapsibleGroupIds);
+  }, [collapseAllGroups, collapsibleGroupIds, setExpansionDepth]);
+  const handleExpandAll = useCallback(() => {
+    setExpansionDepth(effectiveMaxDepth);
+    expandAllGroups();
+  }, [effectiveMaxDepth, expandAllGroups, setExpansionDepth]);
+  const handleDependencyLayoutChange = useCallback(
+    (value) => {
+      if (
+        !["compact", "expanded"].includes(value) ||
+        value === dependencyLayout
+      )
+        return;
+      layoutAnchorNodeIdRef.current = visibleNodeById.has(selectedGraphNodeId)
+        ? selectedGraphNodeId
+        : null;
+      setDependencyLayout(value);
+      writeDependencyLayout(value);
+    },
+    [dependencyLayout, selectedGraphNodeId, visibleNodeById],
   );
   const graphTopControls = hasGraph ? (
     <LineageGraphToolbar
@@ -1404,13 +1543,15 @@ export const LineageGraph = ({
       pinnedContext={pinnedContext}
       onPinnedContextSelect={selectPinnedContext}
       doubleClickExpandsNodes={doubleClickExpandsNodes}
+      dependencyLayout={dependencyLayout}
+      onDependencyLayoutChange={handleDependencyLayoutChange}
       visibleLegend={visibleLegend}
       legendItems={visibleLegendItems}
       onClosePanel={closeActivePanel}
       onClearContext={clearSelectedContext}
       onCollapseAll={handleCollapseAll}
       onDoubleClickExpandsNodesChange={setDoubleClickExpandsNodes}
-      onExpandAll={expandAllGroups}
+      onExpandAll={handleExpandAll}
       onExpansionDepthChange={handleExpansionDepthChange}
       onMinimizeInspector={minimizeInspector}
       onPanelChange={handlePanelChange}
@@ -1426,6 +1567,7 @@ export const LineageGraph = ({
         selectedContext?.type === "node" &&
         visiblePinnedGraphNodeId === selectedContext.node?.graphNodeId
       }
+      expansionDepthCustom={customDepthGraphKey === graphIdForFit}
       expansionDepth={expansionDepth}
       maxExpansionDepth={effectiveMaxDepth}
       searchInput={searchInput}
@@ -1475,6 +1617,8 @@ export const LineageGraph = ({
             className={`lineage-graph__stage lineage-graph__stage--${graphType === "impact" ? "impact" : "lineage"}`}
             ref={stageRef}
             onKeyDownCapture={handleNodeKeyDown}
+            onFocusCapture={handleNodeFocus}
+            onBlurCapture={handleNodeBlur}
           >
             <EdgeHoverContext.Provider value={hoverContextValue}>
               <Graph
@@ -1500,10 +1644,13 @@ export const LineageGraph = ({
                       disabled={loading || !graphId}
                       viewState={{
                         graphId,
+                        dependencyLayout,
                         selectedGraphNodeId,
                         selectedGraphEdgeId,
                         pinnedGraphNodeId,
                         expansionDepth,
+                        expansionDepthCustom:
+                          customDepthGraphKey === graphIdForFit,
                         collapsedGroupIds: [...effectiveCollapsedGroupIds],
                         expandedFieldNodeIds: [...expandedFieldNodeIds],
                       }}