@unovis/ts 1.6.6-beta.0 → 1.6.6-stellar-beta.0

package/components/graph/index.js

@@ -7,7 +7,7 @@ import { drag } from 'd3-drag';
 import { interval } from 'd3-timer';
 import { ComponentCore } from '../../core/component/index.js';
 import { GraphDataModel } from '../../data-models/graph.js';
-import { isNumber, isFunction, clamp, getBoolean, getNumber, shallowDiff, isPlainObject, isEqual } from '../../utils/data.js';
+import { getBoolean, isFunction, isNumber, clamp, getNumber, shallowDiff, isPlainObject, isEqual } from '../../utils/data.js';
 import { smartTransition } from '../../utils/d3.js';
 import { GraphLayoutType, GraphFitViewAlignment, GraphNodeSelectionHighlightMode, GraphLinkArrowStyle } from './types.js';
 import { GraphDefaultConfig } from './config.js';
@@ -35,6 +35,10 @@ class Graph extends ComponentCore {
         this._shouldSetPanels = false;
         this._isAutoFitDisabled = false;
         this._isDragging = false;
+        /** Set of node ids (string) that are currently collapsed */
+        this._collapsedNodeIds = new Set();
+        /** Incremented every time datamodel.data is replaced; used to detect stale layout .then() callbacks */
+        this._dataVersion = 0;
         // A map for storing link total path lengths to optimize rendering performance
         this._linkPathLengthMap = new Map();
         this._linkFlowFrameElapsed = 0;
@@ -87,8 +91,11 @@ class Graph extends ComponentCore {
         const { config } = this;
         if (!config.shouldDataUpdate(this.datamodel.data, data, this.datamodel))
             return;
+        this._fullData = data;
+        const visibleData = config.nodeExpandable ? this._computeVisibleData(data) : data;
         this.datamodel.nodeSort = config.nodeSort;
-        this.datamodel.data = data;
+        this.datamodel.data = visibleData;
+        this._dataVersion++;
         this._shouldRecalculateLayout = true;
         if (config.layoutAutofit)
             this._shouldFitLayout = true;
@@ -107,6 +114,92 @@ class Graph extends ComponentCore {
             this._isAutoFitDisabled = false;
         this._shouldSetPanels = true;
     }
+    /** Compute the visible subset of `data` based on `_collapsedNodeIds` */
+    _computeVisibleData(data) {
+        var _a;
+        const { config } = this;
+        if (!config.nodeExpandable || !config.nodeChildren)
+            return data;
+        const allNodes = data.nodes;
+        const allLinks = (_a = data.links) !== null && _a !== void 0 ? _a : [];
+        // Build a map of id → node for quick lookup (use the node's id property)
+        const nodeById = new Map();
+        for (const n of allNodes) {
+            if (n.id !== undefined)
+                nodeById.set(n.id, n);
+        }
+        // Collect ids to hide (all descendants of collapsed nodes)
+        const hiddenIds = this._getHiddenNodeIds(allNodes, nodeById);
+        const visibleIdSet = new Set(allNodes.filter(n => !hiddenIds.has(n.id)).map(n => n.id));
+        const visibleNodes = allNodes.filter(n => !hiddenIds.has(n.id));
+        // Helper: resolve a link endpoint (number index, string id, or node object) to the node's id
+        const resolveId = (endpoint) => {
+            var _a;
+            if (typeof endpoint === 'object')
+                return endpoint.id;
+            if (typeof endpoint === 'number')
+                return (_a = allNodes[endpoint]) === null || _a === void 0 ? void 0 : _a.id;
+            return endpoint;
+        };
+        const visibleLinks = allLinks.filter(l => {
+            const srcId = resolveId(l.source);
+            const tgtId = resolveId(l.target);
+            return visibleIdSet.has(srcId) && visibleIdSet.has(tgtId);
+        });
+        return { nodes: visibleNodes, links: visibleLinks };
+    }
+    _getHiddenNodeIds(allNodes, nodeById) {
+        var _a;
+        const { config } = this;
+        const hidden = new Set();
+        const hide = (id) => {
+            var _a;
+            if (id === undefined || hidden.has(id))
+                return;
+            hidden.add(id);
+            const node = nodeById.get(id);
+            if (node) {
+                const children = getBoolean(node, config.nodeExpandable, 0)
+                    ? (isFunction(config.nodeChildren) ? config.nodeChildren(node, 0) : (_a = config.nodeChildren) !== null && _a !== void 0 ? _a : [])
+                    : [];
+                for (const childId of children)
+                    hide(childId);
+            }
+        };
+        for (const id of this._collapsedNodeIds) {
+            const node = nodeById.get(id);
+            if (node && getBoolean(node, config.nodeExpandable, 0) && config.nodeChildren) {
+                const nodeChildIds = isFunction(config.nodeChildren) ? config.nodeChildren(node, 0) : (_a = config.nodeChildren) !== null && _a !== void 0 ? _a : [];
+                for (const childId of nodeChildIds !== null && nodeChildIds !== void 0 ? nodeChildIds : [])
+                    hide(childId);
+            }
+        }
+        return hidden;
+    }
+    _applyExpandCollapse() {
+        const { config } = this;
+        if (!config.nodeExpandable || !this._fullData)
+            return;
+        const visibleData = this._computeVisibleData(this._fullData);
+        this.datamodel.nodeSort = config.nodeSort;
+        this.datamodel.data = visibleData;
+        this._dataVersion++;
+        // Clear any fixed (dragged) positions so the fresh layout output is used
+        for (const node of this.datamodel.nodes) {
+            delete node._state.fx;
+            delete node._state.fy;
+        }
+        this._shouldRecalculateLayout = true;
+        if (config.layoutAutofit)
+            this._shouldFitLayout = true;
+        this._shouldSetPanels = true;
+        // Only call _render() if the component has been sized. When called before the first
+        // container render (e.g. from a useEffect on mount), _width is 0 and layout functions
+        // produce NaN coordinates (Infinity * 0). The flags above ensure the next
+        // container-triggered render will recalculate and draw with correct dimensions.
+        if (this._width > 0)
+            this._render();
+    }
     get bleed() {
         const padding = this.config.fitViewPadding; // Extra padding to take into account labels and selection outlines
         return isNumber(padding)
@@ -163,11 +256,13 @@ class Graph extends ComponentCore {
         this._zoomBehavior.filter(isFunction(zoomEventFilter)
             ? zoomEventFilter
             : (e) => (!e.ctrlKey || e.type === 'wheel') && !e.button && !e.shiftKey); // Default filter
+        const renderDataVersion = this._dataVersion;
         this._layoutCalculationPromise.then(() => {
             var _a, _b, _c;
             // If the component has been destroyed while the layout calculation
-            // was in progress, we cancel the render
-            if (this.isDestroyed())
+            // was in progress, or data has been replaced (e.g. React re-render
+            // fired between layout resolving and this callback), cancel the render
+            if (this.isDestroyed() || this._dataVersion !== renderDataVersion)
                 return;
             this._initPanelsData();
             // Fit the view
@@ -338,6 +433,8 @@ class Graph extends ComponentCore {
         }
     }
     _fit(duration = 0, nodeIds, alignment = this.config.fitViewAlign) {
+        if (this.isDestroyed())
+            return;
         const { datamodel, config: { nodeSize } } = this;
         const nodes = (nodeIds === null || nodeIds === void 0 ? void 0 : nodeIds.length) ? datamodel.nodes.filter(n => nodeIds.includes(n.id)) : datamodel.nodes;
         const maxNodeSize = getMaxNodeSize(nodes, nodeSize);
@@ -492,6 +589,10 @@ class Graph extends ComponentCore {
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onNodeClick(d) {
+        const { config } = this;
+        if (config.nodeExpandable && getBoolean(d, config.nodeExpandable, d._index)) {
+            this.toggleNodeExpand(d._id);
+        }
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onNodeMouseOut(d) {
@@ -870,6 +971,67 @@ class Graph extends ComponentCore {
     setNodeStateById(nodeId, state) {
         this.datamodel.setNodeStateById(nodeId, state);
     }
+    /** Toggle the expanded/collapsed state of a node by its id.
+     * Only works when `nodeExpandable` and `nodeChildren` config options are set. */
+    toggleNodeExpand(nodeId) {
+        var _a, _b;
+        const { config } = this;
+        const id = String(nodeId);
+        const wasCollapsed = this._collapsedNodeIds.has(id);
+        if (wasCollapsed) {
+            this._collapsedNodeIds.delete(id);
+        }
+        else {
+            this._collapsedNodeIds.add(id);
+        }
+        const expanded = wasCollapsed; // after toggle
+        // Find the node in the full data to fire the callback
+        const node = (_a = this._fullData) === null || _a === void 0 ? void 0 : _a.nodes.find(n => String(n.id) === id);
+        if (node)
+            (_b = config.onNodeExpand) === null || _b === void 0 ? void 0 : _b.call(config, node, expanded);
+        this._applyExpandCollapse();
+    }
+    /** Expand a node by its id. No-op if already expanded. */
+    expandNode(nodeId) {
+        var _a, _b, _c;
+        const id = String(nodeId);
+        if (!this._collapsedNodeIds.has(id))
+            return;
+        this._collapsedNodeIds.delete(id);
+        const node = (_a = this._fullData) === null || _a === void 0 ? void 0 : _a.nodes.find(n => String(n.id) === id);
+        if (node)
+            (_c = (_b = this.config).onNodeExpand) === null || _c === void 0 ? void 0 : _c.call(_b, node, true);
+        this._applyExpandCollapse();
+    }
+    /** Collapse a node by its id. No-op if already collapsed. */
+    collapseNode(nodeId) {
+        var _a, _b;
+        const { config } = this;
+        const id = String(nodeId);
+        if (this._collapsedNodeIds.has(id))
+            return;
+        this._collapsedNodeIds.add(id);
+        const node = (_a = this._fullData) === null || _a === void 0 ? void 0 : _a.nodes.find(n => String(n.id) === id);
+        if (node)
+            (_b = config.onNodeExpand) === null || _b === void 0 ? void 0 : _b.call(config, node, false);
+        this._applyExpandCollapse();
+    }
+    /** Returns whether a node is currently collapsed. */
+    isNodeCollapsed(nodeId) {
+        return this._collapsedNodeIds.has(String(nodeId));
+    }
+    /** Set the complete set of collapsed node ids in one shot.
+     * All currently collapsed nodes not in the new set are expanded; all ids in the new set are
+     * collapsed. A single layout recalculation is triggered at the end, avoiding the race condition
+     * that occurs when `collapseNode`/`expandNode` are called in a loop.
+     * `nodeCollapsible` is still respected for the collapse direction.
+     */
+    setCollapsedNodes(nodeIds) {
+        this._collapsedNodeIds = new Set(nodeIds.map(id => String(id)));
+        this._isAutoFitDisabled = false;
+        this._shouldFitLayout = true;
+        this._applyExpandCollapse();
+    }
     /** Call a partial render to update the positions of the nodes and their links.
       * This can be useful when you've changed the node positions manually outside
       * of the component and want to update the graph.