@unovis/ts 1.4.0-alpha.9 → 1.4.0-beta.0

package/components/graph/index.js

@@ -6,21 +6,22 @@ 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, clamp, getBoolean, isFunction, shallowDiff } from '../../utils/data.js';
+import { isNumber, clamp, getBoolean, isFunction, shallowDiff, unique, clean } from '../../utils/data.js';
+import { stringToHtmlId } from '../../utils/misc.js';
 import { smartTransition } from '../../utils/d3.js';
 import { GraphLayoutType, GraphLinkArrowStyle } from './types.js';
 import { GraphDefaultConfig } from './config.js';
 import { background, graphGroup, root } from './style.js';
 import * as style from './modules/node/style.js';
-import { nodes, gNode, gNodeExit, node, nodeGauge, sideLabelGroup, label, greyedOutNode } from './modules/node/style.js';
-import { links, gLink, gLinkExit, link, greyedOutLink } from './modules/link/style.js';
+import { nodes, gNode, gNodeExit, node, nodeGauge, sideLabelGroup, label } from './modules/node/style.js';
+import { links, gLink, gLinkExit, link } from './modules/link/style.js';
 import { panels, gPanel, panel, panelSelection, label as label$1, labelText, sideIconGroup, sideIconShape, sideIconSymbol } from './modules/panel/style.js';
 import { createNodes, updateNodes, removeNodes, updateSelectedNodes, zoomNodesThrottled, zoomNodes } from './modules/node/index.js';
 import { getMaxNodeSize, getX, getY, getNodeSize } from './modules/node/helper.js';
 import { createLinks, updateLinks, removeLinks, updateSelectedLinks, animateLinkFlow, zoomLinksThrottled, zoomLinks } from './modules/link/index.js';
-import { getArrowPath, getDoubleArrowPath } from './modules/link/helper.js';
+import { getLinkColor, getLinkArrow, LINK_MARKER_WIDTH, LINK_MARKER_HEIGHT, getDoubleArrowPath, getArrowPath } from './modules/link/helper.js';
 import { removePanels, createPanels, updatePanels } from './modules/panel/index.js';
-import { updatePanelNumNodes, updatePanelBBoxSize, initPanels, setPanelForNodes } from './modules/panel/helper.js';
+import { initPanels, setPanelForNodes, updatePanelNumNodes, updatePanelBBoxSize } from './modules/panel/helper.js';
 import { applyLayoutCircular, applyELKLayout, applyLayoutConcentric, applyLayoutForce, applyLayoutDagre, applyLayoutParallel } from './modules/layout.js';
 
 class Graph extends ComponentCore {
@@ -60,7 +61,7 @@ class Graph extends ComponentCore {
         this._linksGroup = this._graphGroup.append('g').attr('class', links);
         this._nodesGroup = this._graphGroup.append('g').attr('class', nodes);
         this._defs = this._graphGroup.append('defs');
-        this._getLinkArrowDefId = this._getLinkArrowDefId.bind(this);
+        this._getMarkerId = this._getMarkerId.bind(this);
     }
     get selectedNode() {
         return this._selectedNode;
@@ -79,9 +80,9 @@ class Graph extends ComponentCore {
         this._addSVGDefs();
     }
     setConfig(config) {
-        super.setConfig(config);
-        this._shouldRecalculateLayout = this._shouldRecalculateLayout || this._shouldLayoutRecalculate();
+        this._shouldRecalculateLayout = this._shouldRecalculateLayout || this._shouldLayoutRecalculate(config);
         this._shouldFitLayout = this._shouldFitLayout || this._shouldRecalculateLayout;
+        super.setConfig(config);
         this._shouldSetPanels = true;
     }
     get bleed() {
@@ -89,7 +90,7 @@ class Graph extends ComponentCore {
         return { top: extraPadding, bottom: extraPadding, left: extraPadding, right: extraPadding };
     }
     _render(customDuration) {
-        const { config: { disableZoom, duration, layoutAutofit }, datamodel } = this;
+        const { config: { disableZoom, duration, layoutAutofit, panels }, datamodel } = this;
         if (!datamodel.nodes && !datamodel.links)
             return;
         const animDuration = isNumber(customDuration) ? customDuration : duration;
@@ -104,17 +105,19 @@ class Graph extends ComponentCore {
             this._prevHeight = this._height;
         }
         // Apply layout and render
-        if (this._shouldRecalculateLayout || !this._layoutCalculationPromise) {
-            this._layoutCalculationPromise = this._calculateLayout();
-        }
-        this._layoutCalculationPromise.then(() => {
+        this._calculateLayout().then((isFirstRender) => {
             // If the component has been destroyed while the layout calculation
             // was in progress, we cancel the render
             if (this.isDestroyed())
                 return;
-            this._initPanelsData();
-            // Fit the view
-            if (this._isFirstRender) {
+            if (this._shouldSetPanels) {
+                smartTransition(this._panelsGroup, duration / 2)
+                    .style('opacity', (panels === null || panels === void 0 ? void 0 : panels.length) ? 1 : 0);
+                this._panels = initPanels(panels);
+                setPanelForNodes(this._panels, datamodel.nodes, this.config);
+                this._shouldSetPanels = false;
+            }
+            if (isFirstRender) {
                 this._fit();
                 this._shouldFitLayout = false;
             }
@@ -143,8 +146,9 @@ class Graph extends ComponentCore {
             // Zoom
             if (disableZoom)
                 this.g.on('.zoom', null);
-            else {
+            else
                 this.g.call(this._zoomBehavior).on('dblclick.zoom', null);
+            if (!this._isFirstRender && !disableZoom) {
                 const transform = zoomTransform(this.g.node());
                 this._onZoom(transform);
             }
@@ -160,8 +164,8 @@ class Graph extends ComponentCore {
             // calculation and they were not set up properly (see the render function of `ComponentCore`)
             this._setUpComponentEventsThrottled();
             this._setCustomAttributesThrottled();
-            this._isFirstRender = false;
         });
+        this._isFirstRender = false;
     }
     _drawNodes(duration) {
         const { config, datamodel } = this;
@@ -201,17 +205,14 @@ class Graph extends ComponentCore {
             .attr('class', gLink)
             .call(createLinks, config, duration);
         const linkGroupsMerged = linkGroups.merge(linkGroupsEnter);
-        linkGroupsMerged.call(updateLinks, config, duration, this._scale, this._getLinkArrowDefId);
+        linkGroupsMerged.call(updateLinks, config, duration, this._scale, this._getMarkerId);
         const linkGroupsExit = linkGroups.exit();
         linkGroupsExit
             .attr('class', gLinkExit)
             .call(removeLinks, config, duration);
     }
     _drawPanels(nodeUpdateSelection, duration) {
-        var _a;
         const { config } = this;
-        smartTransition(this._panelsGroup, duration / 2)
-            .style('opacity', ((_a = config.panels) === null || _a === void 0 ? void 0 : _a.length) ? 1 : 0);
         if (!this._panels)
             return;
         const selection = (nodeUpdateSelection.duration)
@@ -238,56 +239,51 @@ class Graph extends ComponentCore {
         panelToUpdate.call(updatePanels, config, duration);
     }
     _calculateLayout() {
-        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             const { config, datamodel } = this;
-            switch (config.layoutType) {
-                case GraphLayoutType.Precalculated:
-                    break;
-                case GraphLayoutType.Parallel:
-                    applyLayoutParallel(datamodel, config, this._width, this._height);
-                    break;
-                case GraphLayoutType.ParallelHorizontal:
-                    applyLayoutParallel(datamodel, config, this._width, this._height, 'horizontal');
-                    break;
-                case GraphLayoutType.Dagre:
-                    yield applyLayoutDagre(datamodel, config, this._width);
-                    break;
-                case GraphLayoutType.Force:
-                    yield applyLayoutForce(datamodel, config, this._width);
-                    break;
-                case GraphLayoutType.Concentric:
-                    applyLayoutConcentric(datamodel, config, this._width, this._height);
-                    break;
-                case GraphLayoutType.Elk:
-                    yield applyELKLayout(datamodel, config, this._width);
-                    break;
-                case GraphLayoutType.Circular:
-                default:
-                    applyLayoutCircular(datamodel, config, this._width, this._height);
-                    break;
+            const firstRender = this._isFirstRender;
+            if (this._shouldRecalculateLayout) {
+                switch (config.layoutType) {
+                    case GraphLayoutType.Parallel:
+                        applyLayoutParallel(datamodel, config, this._width, this._height);
+                        break;
+                    case GraphLayoutType.ParallelHorizontal:
+                        applyLayoutParallel(datamodel, config, this._width, this._height, 'horizontal');
+                        break;
+                    case GraphLayoutType.Dagre:
+                        yield applyLayoutDagre(datamodel, config, this._width);
+                        break;
+                    case GraphLayoutType.Force:
+                        yield applyLayoutForce(datamodel, config, this._width);
+                        break;
+                    case GraphLayoutType.Concentric:
+                        applyLayoutConcentric(datamodel, config, this._width, this._height);
+                        break;
+                    case GraphLayoutType.Elk:
+                        yield applyELKLayout(datamodel, config, this._width);
+                        break;
+                    case GraphLayoutType.Circular:
+                    default:
+                        applyLayoutCircular(datamodel, config, this._width, this._height);
+                        break;
+                }
+                this._shouldRecalculateLayout = false;
             }
-            // We need to update the panels data right after the layout calculation
-            // because we want to have the latest coordinates before calling `onLayoutCalculated`
-            this._initPanelsData();
-            (_b = (_a = this.config).onLayoutCalculated) === null || _b === void 0 ? void 0 : _b.call(_a, datamodel.nodes, datamodel.links);
-            this._shouldRecalculateLayout = false;
+            return firstRender;
         });
     }
-    _initPanelsData() {
-        const { config, datamodel } = this;
-        if (this._shouldSetPanels) {
-            this._panels = initPanels(config.panels);
-            setPanelForNodes(this._panels, datamodel.nodes, this.config);
-            this._shouldSetPanels = false;
-        }
-    }
     _fit(duration = 0) {
+        var _a;
         const { datamodel: { nodes } } = this;
-        const transform = this._getTransform(nodes);
-        smartTransition(this.g, duration)
-            .call(this._zoomBehavior.transform, transform);
-        this._onZoom(transform);
+        if ((nodes === null || nodes === void 0 ? void 0 : nodes.length) && ((_a = this.g) === null || _a === void 0 ? void 0 : _a.size())) {
+            const transform = this._getTransform(nodes);
+            smartTransition(this.g, duration)
+                .call(this._zoomBehavior.transform, transform);
+            this._onZoom(transform);
+        }
+        else {
+            console.warn('Unovis | Graph: Node data is not defined. Check if the component has been initialized.');
+        }
     }
     _getTransform(nodes) {
         const { nodeSize, zoomScaleExtent } = this.config;
@@ -296,17 +292,13 @@ class Graph extends ComponentCore {
         const w = this._width;
         const h = this._height;
         const xExtent = [
-            min(nodes, d => getX(d) - maxNodeSize / 2 - (max((d._panels || []).map(p => p._padding.left)) || 0)),
-            max(nodes, d => getX(d) + maxNodeSize / 2 + (max((d._panels || []).map(p => p._padding.right)) || 0)),
+            min(nodes, d => { var _a; return getX(d) - maxNodeSize / 2 - (max((_a = d._panels) === null || _a === void 0 ? void 0 : _a.map(p => p._padding.left)) || 0); }),
+            max(nodes, d => { var _a; return getX(d) + maxNodeSize / 2 + (max((_a = d._panels) === null || _a === void 0 ? void 0 : _a.map(p => p._padding.right)) || 0); }),
         ];
         const yExtent = [
-            min(nodes, d => getY(d) - maxNodeSize / 2 - (max((d._panels || []).map(p => p._padding.top)) || 0)),
-            max(nodes, d => getY(d) + maxNodeSize / 2 + (max((d._panels || []).map(p => p._padding.bottom)) || 0)),
+            min(nodes, d => { var _a; return getY(d) - maxNodeSize / 2 - (max((_a = d._panels) === null || _a === void 0 ? void 0 : _a.map(p => p._padding.top)) || 0); }),
+            max(nodes, d => { var _a; return getY(d) + maxNodeSize / 2 + (max((_a = d._panels) === null || _a === void 0 ? void 0 : _a.map(p => p._padding.bottom)) || 0); }),
         ];
-        if (xExtent.some(item => item === undefined) || yExtent.some(item => item === undefined)) {
-            console.warn('Unovis | Graph: Some of the node coordinates are undefined. This can happen if you try to fit the graph before the layout has been calculated.');
-            return zoomIdentity;
-        }
         const xScale = w / (xExtent[1] - xExtent[0] + left + right);
         const yScale = h / (yExtent[1] - yExtent[0] + top + bottom);
         const clampedScale = clamp(min([xScale, yScale]), zoomScaleExtent[0], zoomScaleExtent[1]);
@@ -449,8 +441,7 @@ class Graph extends ComponentCore {
         this._scale = transform.k;
         this._graphGroup.attr('transform', transform.toString());
         if (isFunction(config.onZoom))
-            config.onZoom(this._scale, config.zoomScaleExtent, event);
-        // console.warn('Unovis | Graph: Zoom: ', transform)
+            config.onZoom(this._scale, config.zoomScaleExtent);
         if (!this._initialTransform)
             this._initialTransform = transform;
         // If the event was triggered by a mouse interaction (pan or zoom) we don't
@@ -460,9 +451,7 @@ class Graph extends ComponentCore {
                 const propVal = transform[prop];
                 const initialPropVal = this._initialTransform[prop];
                 const dVal = Math.abs(propVal - initialPropVal);
-                const scaledDVal = prop === 'k' ? 20 * dVal : dVal / 15;
-                acc += scaledDVal;
-                return acc;
+                return prop === 'k' ? 2 * dVal : dVal / 50;
             }, 0);
             if (diff > config.layoutAutofitTolerance)
                 this._isAutoFitDisabled = true;
@@ -472,18 +461,16 @@ class Graph extends ComponentCore {
         this._nodesGroup.selectAll(`.${gNode}`)
             .call((nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomNodesThrottled : zoomNodes), config, this._scale);
         this._linksGroup.selectAll(`.${gLink}`)
-            .call((nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomLinksThrottled : zoomLinks), config, this._scale, this._getLinkArrowDefId);
+            .call((nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomLinksThrottled : zoomLinks), config, this._scale, this._getMarkerId);
     }
     _onDragStarted(d, event, nodeSelection) {
-        var _a;
         const { config } = this;
         this._isDragging = true;
         d._state.isDragged = true;
         nodeSelection.call(updateNodes, config, 0, this._scale);
-        (_a = config.onNodeDragStart) === null || _a === void 0 ? void 0 : _a.call(config, d, event);
     }
     _onDragged(d, event, allNodesSelection) {
-        var _a, _b, _c;
+        var _a, _b;
         const { config } = this;
         const transform = zoomTransform(this.g.node());
         const scale = transform.k;
@@ -525,60 +512,79 @@ class Graph extends ComponentCore {
             const target = l.target;
             return source._id === d._id || target._id === d._id;
         });
-        linksToUpdate.call(updateLinks, config, 0, scale, this._getLinkArrowDefId);
+        linksToUpdate.call(updateLinks, config, 0, scale, this._getMarkerId);
         const linksToAnimate = linksToUpdate.filter(d => d._state.greyout);
         if (linksToAnimate.size())
             animateLinkFlow(linksToAnimate, config, this._scale);
-        (_c = config.onNodeDrag) === null || _c === void 0 ? void 0 : _c.call(config, d, event);
     }
     _onDragEnded(d, event, nodeSelection) {
-        var _a;
         const { config } = this;
         this._isDragging = false;
         d._state.isDragged = false;
         nodeSelection.call(updateNodes, config, 0, this._scale);
-        (_a = config.onNodeDragEnd) === null || _a === void 0 ? void 0 : _a.call(config, d, event);
     }
-    _shouldLayoutRecalculate() {
-        const { prevConfig, config } = this;
-        if (prevConfig.layoutType !== config.layoutType)
+    _shouldLayoutRecalculate(nextConfig) {
+        const { config } = this;
+        if (config.layoutType !== nextConfig.layoutType)
             return true;
-        if (prevConfig.layoutNonConnectedAside !== config.layoutNonConnectedAside)
+        if (config.layoutNonConnectedAside !== nextConfig.layoutNonConnectedAside)
             return true;
-        if (prevConfig.layoutType === GraphLayoutType.Force) {
-            const forceSettingsDiff = shallowDiff(prevConfig.forceLayoutSettings, config.forceLayoutSettings);
+        if (config.layoutType === GraphLayoutType.Force) {
+            const forceSettingsDiff = shallowDiff(config.forceLayoutSettings, nextConfig.forceLayoutSettings);
             if (Object.keys(forceSettingsDiff).length)
                 return true;
         }
-        if (prevConfig.layoutType === GraphLayoutType.Dagre) {
-            const dagreSettingsDiff = shallowDiff(prevConfig.dagreLayoutSettings, config.dagreLayoutSettings);
+        if (config.layoutType === GraphLayoutType.Dagre) {
+            const dagreSettingsDiff = shallowDiff(config.dagreLayoutSettings, nextConfig.dagreLayoutSettings);
             if (Object.keys(dagreSettingsDiff).length)
                 return true;
         }
-        if (prevConfig.layoutType === GraphLayoutType.Parallel ||
-            prevConfig.layoutType === GraphLayoutType.ParallelHorizontal ||
-            prevConfig.layoutType === GraphLayoutType.Concentric) {
-            if (prevConfig.layoutGroupOrder !== config.layoutGroupOrder)
+        if (config.layoutType === GraphLayoutType.Parallel ||
+            config.layoutType === GraphLayoutType.ParallelHorizontal ||
+            config.layoutType === GraphLayoutType.Concentric) {
+            if (config.layoutGroupOrder !== nextConfig.layoutGroupOrder)
                 return true;
-            if (prevConfig.layoutParallelNodesPerColumn !== config.layoutParallelNodesPerColumn)
+            if (config.layoutParallelNodesPerColumn !== nextConfig.layoutParallelNodesPerColumn)
                 return true;
-            if (prevConfig.layoutParallelSortConnectionsByGroup !== config.layoutParallelSortConnectionsByGroup)
+            if (config.layoutParallelSortConnectionsByGroup !== nextConfig.layoutParallelSortConnectionsByGroup)
                 return true;
         }
         return false;
     }
-    _getLinkArrowDefId(arrow) {
-        return arrow ? `${this.uid}-${arrow}` : null;
+    _getMarkerId(d, color, arrow) {
+        const { config } = this;
+        const c = color !== null && color !== void 0 ? color : getLinkColor(d, config);
+        const a = arrow !== null && arrow !== void 0 ? arrow : getLinkArrow(d, this._scale, config);
+        return a && c ? `${this.uid}-${stringToHtmlId(c)}-${a}` : null;
     }
     _addSVGDefs() {
+        const { datamodel: { links } } = this;
         // Clean up old defs
         this._defs.selectAll('*').remove();
-        // Single Arrow
-        this._defs.append('path').attr('d', getArrowPath())
-            .attr('id', this._getLinkArrowDefId(GraphLinkArrowStyle.Single));
-        // Double Arrow
-        this._defs.append('path').attr('d', getDoubleArrowPath())
-            .attr('id', this._getLinkArrowDefId(GraphLinkArrowStyle.Double));
+        // Get all variations of link colors to create markers
+        const linkColors = unique(clean(links.map(d => getLinkColor(d, this.config))));
+        this._defs.selectAll('marker')
+            .data([
+            ...linkColors.map(d => ({ color: d, arrow: GraphLinkArrowStyle.Single })),
+            ...linkColors.map(d => ({ color: d, arrow: GraphLinkArrowStyle.Double })), // Double-sided arrows
+        ]).enter()
+            .append('marker')
+            .attr('id', d => this._getMarkerId(null, d.color, d.arrow))
+            .attr('orient', 'auto')
+            .attr('markerWidth', d => d.arrow === GraphLinkArrowStyle.Double ? LINK_MARKER_WIDTH * 2 : LINK_MARKER_WIDTH)
+            .attr('markerHeight', d => d.arrow === GraphLinkArrowStyle.Double ? LINK_MARKER_HEIGHT * 2 : LINK_MARKER_HEIGHT)
+            .attr('markerUnits', 'userSpaceOnUse')
+            .attr('refX', LINK_MARKER_WIDTH - LINK_MARKER_HEIGHT / 2)
+            .attr('refY', LINK_MARKER_HEIGHT - LINK_MARKER_HEIGHT / 2)
+            .html(d => {
+            var _a;
+            return `
+          <path
+            d="${d.arrow === GraphLinkArrowStyle.Double ? getDoubleArrowPath() : getArrowPath()}"
+            fill="${(_a = d.color) !== null && _a !== void 0 ? _a : null}"
+          />
+        `;
+        });
     }
     zoomIn(increment = 0.3) {
         const scaleBy = 1 + increment;
@@ -594,13 +600,8 @@ class Graph extends ComponentCore {
         smartTransition(this.g, this.config.duration / 2)
             .call(this._zoomBehavior.scaleTo, zoomLevel);
     }
-    getZoom() {
-        return zoomTransform(this.g.node()).k;
-    }
-    fitView(duration = this.config.duration) {
-        this._layoutCalculationPromise.then(() => {
-            this._fit(duration);
-        });
+    fitView() {
+        this._fit(this.config.duration / 2);
     }
     /** Enable automatic fitting to container if it was disabled due to previous zoom / pan interactions */
     resetAutofitState() {
@@ -640,10 +641,8 @@ Graph.selectors = {
     nodeGauge: nodeGauge,
     nodeSideLabel: sideLabelGroup,
     nodeLabel: label,
-    dimmedNode: greyedOutNode,
     link: gLink,
     linkLine: link,
-    dimmedLink: greyedOutLink,
     panel: gPanel,
     panelRect: panel,
     panelSelection: panelSelection,