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

package/components/graph/index.js

@@ -2,12 +2,12 @@ import { __awaiter } from 'tslib';
 import { min, max, extent } from 'd3-array';
 import { select, pointer } from 'd3-selection';
 import { brush as brush$1 } from 'd3-brush';
-import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
+import { zoom, zoomTransform, zoomIdentity } from 'd3-zoom';
 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 { isFunction, getBoolean, 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,11 @@ class Graph extends ComponentCore {
         this._shouldSetPanels = false;
         this._isAutoFitDisabled = false;
         this._isDragging = false;
+        this._collapsedNodeIds = new Set();
+        this._dataVersion = 0;
+        this._lastExpandCollapseTime = 0;
+        this._isExpandCollapseInProgress = false;
+        this._expandCollapseRenderVersion = -1;
         // A map for storing link total path lengths to optimize rendering performance
         this._linkPathLengthMap = new Map();
         this._linkFlowFrameElapsed = 0;
@@ -84,11 +89,16 @@ class Graph extends ComponentCore {
         return this._selectedLink;
     }
     setData(data) {
+        var _a;
         const { config } = this;
-        if (!config.shouldDataUpdate(this.datamodel.data, data, this.datamodel))
+        const prevData = (_a = this._fullData) !== null && _a !== void 0 ? _a : this.datamodel.data;
+        if (!config.shouldDataUpdate(prevData, 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 +117,138 @@ class Graph extends ComponentCore {
             this._isAutoFitDisabled = false;
         this._shouldSetPanels = true;
     }
+    _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 an id -> node map.
+        const nodeById = new Map();
+        for (const n of allNodes) {
+            if (n.id !== undefined)
+                nodeById.set(n.id, n);
+        }
+        const { visibleIdSet, visibleChildLinkSet, childIdsByParentId } = this._getVisibleNodeIds(allNodes, nodeById);
+        const visibleNodes = allNodes.filter(n => n.id !== undefined && visibleIdSet.has(n.id));
+        // Resolve a link endpoint to a node 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 => {
+            var _a, _b;
+            const srcId = resolveId(l.source);
+            const tgtId = resolveId(l.target);
+            if (srcId === undefined || tgtId === undefined || !visibleIdSet.has(srcId) || !visibleIdSet.has(tgtId))
+                return false;
+            const isParentChildLink = ((_a = childIdsByParentId.get(srcId)) === null || _a === void 0 ? void 0 : _a.includes(tgtId)) || ((_b = childIdsByParentId.get(tgtId)) === null || _b === void 0 ? void 0 : _b.includes(srcId));
+            if (!isParentChildLink)
+                return true;
+            return visibleChildLinkSet.has(this._getExpandCollapseLinkKey(srcId, tgtId)) ||
+                visibleChildLinkSet.has(this._getExpandCollapseLinkKey(tgtId, srcId));
+        });
+        return { nodes: visibleNodes, links: visibleLinks };
+    }
+    _getVisibleNodeIds(allNodes, nodeById) {
+        var _a, _b;
+        const { config } = this;
+        const visible = new Set();
+        const visibleChildLinkSet = new Set();
+        const hasParent = new Set();
+        const childIdsByParentId = new Map();
+        for (const node of allNodes) {
+            if (node.id === undefined)
+                continue;
+            const children = (_a = (isFunction(config.nodeChildren) ? config.nodeChildren(node, 0) : config.nodeChildren)) !== null && _a !== void 0 ? _a : [];
+            childIdsByParentId.set(node.id, children);
+            for (const childId of children)
+                hasParent.add(childId);
+        }
+        const queue = [];
+        for (const node of allNodes) {
+            if (node.id === undefined)
+                continue;
+            if (!hasParent.has(node.id)) {
+                visible.add(node.id);
+                queue.push(node.id);
+            }
+        }
+        // Fallback for cyclic-only graphs.
+        if (!queue.length) {
+            for (const node of allNodes) {
+                if (node.id === undefined)
+                    continue;
+                visible.add(node.id);
+                queue.push(node.id);
+            }
+        }
+        while (queue.length) {
+            const parentId = queue.shift();
+            const parentNode = nodeById.get(parentId);
+            if (!parentNode)
+                continue;
+            const isParentExpandable = getBoolean(parentNode, config.nodeExpandable, 0);
+            const isParentCollapsed = this._collapsedNodeIds.has(String(parentId));
+            if (isParentExpandable && isParentCollapsed)
+                continue;
+            const children = (_b = childIdsByParentId.get(parentId)) !== null && _b !== void 0 ? _b : [];
+            for (const childId of children) {
+                if (!nodeById.has(childId))
+                    continue;
+                visibleChildLinkSet.add(this._getExpandCollapseLinkKey(parentId, childId));
+                if (!visible.has(childId)) {
+                    visible.add(childId);
+                    queue.push(childId);
+                }
+            }
+        }
+        return {
+            visibleIdSet: visible,
+            visibleChildLinkSet,
+            childIdsByParentId,
+        };
+    }
+    _getExpandCollapseLinkKey(sourceId, targetId) {
+        return `${typeof sourceId}:${String(sourceId)}->${typeof targetId}:${String(targetId)}`;
+    }
+    _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++;
+        this._lastExpandCollapseTime = Date.now();
+        // Clear dragged positions before layout.
+        for (const node of this.datamodel.nodes) {
+            delete node._state.fx;
+            delete node._state.fy;
+        }
+        this._shouldRecalculateLayout = true;
+        // Use one controlled fit for this cycle.
+        if (config.layoutAutofit)
+            this._shouldFitLayout = false;
+        this._isAutoFitDisabled = false;
+        this._shouldSetPanels = true;
+        // Do not lock interaction before the first size pass.
+        if (this._width <= 0) {
+            this._isExpandCollapseInProgress = false;
+            this._expandCollapseRenderVersion = -1;
+            return;
+        }
+        this._isExpandCollapseInProgress = true;
+        this._expandCollapseRenderVersion = this._dataVersion;
+        this._render();
+        // Keep viewport and node transitions aligned.
+        this.fitView(this.config.duration);
+    }
     get bleed() {
         const padding = this.config.fitViewPadding; // Extra padding to take into account labels and selection outlines
         return isNumber(padding)
@@ -163,11 +305,11 @@ 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())
+            // Cancel if destroyed or data changed.
+            if (this.isDestroyed() || this._dataVersion !== renderDataVersion)
                 return;
             this._initPanelsData();
             // Fit the view
@@ -209,9 +351,50 @@ class Graph extends ComponentCore {
             this._setCustomAttributesThrottled();
             // On render complete callback
             (_c = (_b = this.config).onRenderComplete) === null || _c === void 0 ? void 0 : _c.call(_b, this.g, datamodel.nodes, datamodel.links, this.config, animDuration, this._scale, this._containerWidth, this._containerHeight);
+            if (renderDataVersion === this._expandCollapseRenderVersion) {
+                if (this._expandCollapseVisibilityCheckTimer) {
+                    window.clearTimeout(this._expandCollapseVisibilityCheckTimer);
+                    this._expandCollapseVisibilityCheckTimer = undefined;
+                }
+                const delay = Math.max(animDuration, 0) + 50;
+                this._expandCollapseVisibilityCheckTimer = window.setTimeout(() => {
+                    this._expandCollapseVisibilityCheckTimer = undefined;
+                    if (this.isDestroyed())
+                        return;
+                    this._ensureGraphVisibleInViewport();
+                    this._isExpandCollapseInProgress = false;
+                }, delay);
+            }
             this._isFirstRender = false;
         });
     }
+    _ensureGraphVisibleInViewport() {
+        var _a;
+        if (this.isDestroyed())
+            return;
+        const { datamodel, config: { nodeSize } } = this;
+        if (!((_a = datamodel.nodes) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        const maxNodeSize = getMaxNodeSize(datamodel.nodes, nodeSize);
+        const xExtent = [
+            min(datamodel.nodes, d => getX(d) - maxNodeSize / 2 - (max((d._panels || []).map(p => p._padding.left)) || 0)),
+            max(datamodel.nodes, d => getX(d) + maxNodeSize / 2 + (max((d._panels || []).map(p => p._padding.right)) || 0)),
+        ];
+        const yExtent = [
+            min(datamodel.nodes, d => getY(d) - maxNodeSize / 2 - (max((d._panels || []).map(p => p._padding.top)) || 0)),
+            max(datamodel.nodes, d => getY(d) + maxNodeSize / 2 + (max((d._panels || []).map(p => p._padding.bottom)) || 0)),
+        ];
+        if (xExtent.some(item => item === undefined) || yExtent.some(item => item === undefined))
+            return;
+        const transform = zoomTransform(this.g.node());
+        const left = transform.applyX(xExtent[0]);
+        const right = transform.applyX(xExtent[1]);
+        const top = transform.applyY(yExtent[0]);
+        const bottom = transform.applyY(yExtent[1]);
+        const isFullyOffscreen = right < 0 || left > this._width || bottom < 0 || top > this._height;
+        if (isFullyOffscreen)
+            this.fitView(0);
+    }
     _drawNodes(duration) {
         const { config, datamodel } = this;
         const nodes = datamodel.nodes;
@@ -494,6 +677,17 @@ 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)) {
+            // Ignore clicks during an active expand/collapse render.
+            if (this._isExpandCollapseInProgress)
+                return;
+            // Ignore the second click in a double-click.
+            const clickCooldown = 300;
+            if (Date.now() - this._lastExpandCollapseTime < clickCooldown)
+                return;
+            this.toggleNodeExpand(d._id);
+        }
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onNodeMouseOut(d) {
@@ -872,6 +1066,56 @@ class Graph extends ComponentCore {
     setNodeStateById(nodeId, state) {
         this.datamodel.setNodeStateById(nodeId, state);
     }
+    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
+        // Use the full-data node for 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();
+    }
+    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();
+    }
+    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();
+    }
+    isNodeCollapsed(nodeId) {
+        return this._collapsedNodeIds.has(String(nodeId));
+    }
+    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.