@deck.gl-community/graph-layers 9.2.0-beta.2 → 9.2.0-beta.4

package/dist/layers/graph-layer.js

@@ -3,28 +3,32 @@
 // Copyright (c) vis.gl contributors
 import { COORDINATE_SYSTEM, CompositeLayer } from '@deck.gl/core';
 import { PolygonLayer } from '@deck.gl/layers';
-import { GraphEngine } from '../core/graph-engine';
-import { GraphStyleEngine } from '../style/graph-style-engine';
-import { mixedGetPosition } from '../utils/layer-utils';
-import { InteractionManager } from '../core/interaction-manager';
-import { buildCollapsedChainLayers } from '../utils/collapsed-chains';
-import { warn } from '../utils/log';
-import { DEFAULT_GRAPH_LAYER_STYLESHEET, normalizeGraphLayerStylesheet } from '../style/graph-layer-stylesheet';
+import { ClassicGraph } from "../graph/classic-graph.js";
+import { GraphLayout } from "../core/graph-layout.js";
+import { GraphEngine } from "../core/graph-engine.js";
+import { GraphStylesheetEngine } from "../style/graph-style-engine.js";
+import { DEFAULT_GRAPH_LAYER_STYLESHEET, normalizeGraphLayerStylesheet } from "../style/graph-layer-stylesheet.js";
 // node layers
-import { CircleLayer } from './node-layers/circle-layer';
-import { ImageLayer } from './node-layers/image-layer';
-import { LabelLayer } from './node-layers/label-layer';
-import { RectangleLayer } from './node-layers/rectangle-layer';
-import { RoundedRectangleLayer } from './node-layers/rounded-rectangle-layer';
-import { PathBasedRoundedRectangleLayer } from './node-layers/path-rounded-rectangle-layer';
-import { ZoomableMarkerLayer } from './node-layers/zoomable-marker-layer';
+import { CircleLayer } from "./node-layers/circle-layer.js";
+import { ImageLayer } from "./node-layers/image-layer.js";
+import { LabelLayer } from "./node-layers/label-layer.js";
+import { RectangleLayer } from "./node-layers/rectangle-layer.js";
+import { RoundedRectangleLayer } from "./node-layers/rounded-rectangle-layer.js";
+import { PathBasedRoundedRectangleLayer } from "./node-layers/path-rounded-rectangle-layer.js";
+import { ZoomableMarkerLayer } from "./node-layers/zoomable-marker-layer.js";
 // edge layers
-import { EdgeLayer } from './edge-layer';
-import { EdgeLabelLayer } from './edge-layers/edge-label-layer';
-import { FlowLayer } from './edge-layers/flow-layer';
-import { EdgeArrowLayer } from './edge-layers/edge-arrow-layer';
-import { EdgeAttachmentHelper } from './edge-attachment-helper';
-import { JSONLoader } from '../loaders/json-loader';
+import { EdgeLayer } from "./edge-layer.js";
+import { EdgeLabelLayer } from "./edge-layers/edge-label-layer.js";
+import { FlowLayer } from "./edge-layers/flow-layer.js";
+import { EdgeArrowLayer } from "./edge-layers/edge-arrow-layer.js";
+import { EdgeAttachmentHelper } from "./edge-attachment-helper.js";
+import { GridLayer } from "./common-layers/grid-layer/grid-layer.js";
+import { JSONGraphLoader } from "../loaders/json-graph-loader.js";
+import { mixedGetPosition } from "../utils/layer-utils.js";
+import { InteractionManager } from "../core/interaction-manager.js";
+import { buildCollapsedChainLayers } from "../utils/collapsed-chains.js";
+import { mapRanksToYPositions, selectRankLines } from "../utils/rank-grid.js";
+import { warn } from "../utils/log.js";
 const NODE_LAYER_MAP = {
     'rectangle': RectangleLayer,
     'rounded-rectangle': RoundedRectangleLayer,
@@ -47,8 +51,12 @@ const SHARED_LAYER_PROPS = {
 };
 const NODE_STYLE_DEPRECATION_MESSAGE = 'GraphLayer: `nodeStyle` has been replaced by `stylesheet.nodes` and will be removed in a future release.';
 const EDGE_STYLE_DEPRECATION_MESSAGE = 'GraphLayer: `edgeStyle` has been replaced by `stylesheet.edges` and will be removed in a future release.';
+const GRAPH_PROP_DEPRECATION_MESSAGE = 'GraphLayer: `graph` prop is deprecated. Pass graphs via the `data` prop instead.';
+const LAYOUT_REQUIRED_MESSAGE = 'GraphLayer: `layout` must be provided when supplying raw graph data.';
 let NODE_STYLE_DEPRECATION_WARNED = false;
 let EDGE_STYLE_DEPRECATION_WARNED = false;
+let GRAPH_PROP_DEPRECATION_WARNED = false;
+let LAYOUT_REQUIRED_WARNED = false;
 /** Composite layer that renders graph nodes, edges, and decorators. */
 export class GraphLayer extends CompositeLayer {
     static layerName = 'GraphLayer';
@@ -56,8 +64,9 @@ export class GraphLayer extends CompositeLayer {
         // Composite layer props
         // @ts-expect-error composite layer props
         pickable: true,
+        data: { type: 'object', value: null, async: true },
         // Graph props
-        graphLoader: JSONLoader,
+        graphLoader: JSONGraphLoader,
         stylesheet: DEFAULT_GRAPH_LAYER_STYLESHEET,
         nodeStyle: undefined,
         nodeEvents: {
@@ -72,56 +81,74 @@ export class GraphLayer extends CompositeLayer {
             onClick: () => { },
             onHover: () => { }
         },
-        enableDragging: false
+        enableDragging: false,
+        rankGrid: false,
+        resumeLayoutAfterDragging: true
     };
     // @ts-expect-error Some typescript confusion due to override of base class state
     state;
     _edgeAttachmentHelper = new EdgeAttachmentHelper();
+    _suppressNextDeckDataChange = false;
     forceUpdate = () => {
-        if (this.context && this.context.layerManager) {
-            this.setNeedsUpdate();
-            this.setChangeFlags({ dataChanged: true }); // TODO
+        if (!this.state) {
+            return;
         }
+        this.setNeedsRedraw();
+        this.setState({ interactionVersion: this.state.interactionVersion + 1 });
     };
     constructor(props) {
         super(props);
     }
     initializeState() {
+        const interactionManager = new InteractionManager({
+            nodeEvents: this.props.nodeEvents,
+            edgeEvents: this.props.edgeEvents,
+            engine: undefined,
+            enableDragging: Boolean(this.props.enableDragging),
+            resumeLayoutAfterDragging: Boolean(this.props.resumeLayoutAfterDragging ?? GraphLayer.defaultProps.resumeLayoutAfterDragging)
+        }, () => this.forceUpdate());
         this.state = {
-            interactionManager: new InteractionManager(this.props, () => this.forceUpdate())
+            interactionManager,
+            graphEngine: null,
+            layoutVersion: 0,
+            layoutState: undefined,
+            interactionVersion: 0
         };
-        const engine = this.props.engine;
-        this._setGraphEngine(engine);
+        this._syncInteractionManager(this.props, null);
+        this._refreshEngineFromProps(this.props, { force: true });
     }
     shouldUpdateState({ changeFlags }) {
-        return changeFlags.dataChanged || changeFlags.propsChanged;
+        return changeFlags.dataChanged || changeFlags.propsChanged || changeFlags.stateChanged;
     }
     updateState({ props, oldProps, changeFlags }) {
-        if (changeFlags.dataChanged &&
-            props.data &&
-            !(Array.isArray(props.data) && props.data.length === 0)) {
-            // console.log(props.data);
-            const graph = this.props.graphLoader({ json: props.data });
-            const layout = this.props.layout;
-            const graphEngine = new GraphEngine({ graph, layout });
-            this._setGraphEngine(graphEngine);
-            this.state.interactionManager.updateProps(props);
-            this.forceUpdate();
-        }
-        else if (changeFlags.propsChanged && props.graph !== oldProps.graph) {
-            const graphEngine = new GraphEngine({ graph: props.graph, layout: props.layout });
-            this._setGraphEngine(graphEngine);
-            this.state.interactionManager.updateProps(props);
-            this.forceUpdate();
-        }
-        else if (changeFlags.propsChanged && props.engine !== oldProps.engine) {
-            this._setGraphEngine(props.engine);
-            this.state.interactionManager.updateProps(props);
-            this.forceUpdate();
+        const propsDataChanged = props.data !== oldProps.data;
+        const deckDataChanged = changeFlags.dataChanged && !(this._suppressNextDeckDataChange && !propsDataChanged);
+        const dataChanged = deckDataChanged || propsDataChanged;
+        const layoutChanged = props.layout !== oldProps.layout;
+        const graphChanged = props.graph !== oldProps.graph;
+        const engineChanged = props.engine !== oldProps.engine;
+        const loaderChanged = props.graphLoader !== oldProps.graphLoader;
+        const engineRefreshed = this._refreshEngineFromProps(props, {
+            dataChanged,
+            layoutChanged,
+            graphChanged,
+            engineChanged,
+            loaderChanged
+        });
+        if (!engineRefreshed && changeFlags.propsChanged) {
+            const engine = this.state.graphEngine;
+            if (engine) {
+                this._applyGraphEngineCallbacks(engine);
+            }
+        }
+        if (!engineRefreshed && (changeFlags.propsChanged || changeFlags.stateChanged)) {
+            this._syncInteractionManager(props, this.state.graphEngine ?? null);
         }
+        this._suppressNextDeckDataChange = false;
     }
     finalize() {
         this._removeGraphEngine();
+        this._syncInteractionManager(this.props, null);
     }
     _getResolvedStylesheet() {
         const { stylesheet, nodeStyle, edgeStyle } = this.props;
@@ -141,9 +168,9 @@ export class GraphLayer extends CompositeLayer {
             edgeStyle: usingEdgeStyle ? edgeStyle : undefined
         });
     }
-    _createStyleEngine(style, context) {
+    _createStylesheetEngine(style, context) {
         try {
-            return new GraphStyleEngine(style, {
+            return new GraphStylesheetEngine(style, {
                 stateUpdateTrigger: this.state.interactionManager.getLastInteraction()
             });
         }
@@ -153,25 +180,362 @@ export class GraphLayer extends CompositeLayer {
             return null;
         }
     }
+    _refreshEngineFromProps(props, { force = false, dataChanged = false, layoutChanged = false, graphChanged = false, engineChanged = false, loaderChanged = false }) {
+        const { engine: nextEngine, shouldReplace } = this._resolveEngineCandidate(props, {
+            force,
+            dataChanged,
+            layoutChanged,
+            graphChanged,
+            engineChanged,
+            loaderChanged
+        });
+        if (nextEngine === undefined) {
+            return false;
+        }
+        const currentEngine = this.state.graphEngine ?? null;
+        if (!shouldReplace && nextEngine === currentEngine) {
+            return false;
+        }
+        this._setGraphEngine(nextEngine);
+        this._syncInteractionManager(props, nextEngine);
+        return true;
+    }
+    _resolveEngineCandidate(props, flags) {
+        const dataResult = this._getEngineFromData(props, flags);
+        if (dataResult) {
+            return dataResult;
+        }
+        const engineResult = this._getEngineFromEngineProp(props, flags);
+        if (engineResult) {
+            return engineResult;
+        }
+        const graphResult = this._getEngineFromGraphProp(props, flags);
+        if (graphResult) {
+            return graphResult;
+        }
+        if (props.data === null || props.graph === null || props.engine === null || flags.force) {
+            return { engine: null, shouldReplace: true };
+        }
+        return { engine: undefined, shouldReplace: flags.force };
+    }
+    _getEngineFromData(props, { force, dataChanged, layoutChanged, loaderChanged }) {
+        const dataValue = props.data;
+        if (dataValue === null || typeof dataValue === 'undefined') {
+            return null;
+        }
+        const shouldRebuild = force || dataChanged || layoutChanged || loaderChanged;
+        if (!shouldRebuild) {
+            return { engine: undefined, shouldReplace: false };
+        }
+        const engine = this._deriveEngineFromData(dataValue, props);
+        if (typeof engine === 'undefined') {
+            return { engine: undefined, shouldReplace: false };
+        }
+        return {
+            engine,
+            shouldReplace: true
+        };
+    }
+    _getEngineFromEngineProp(props, { force, engineChanged }) {
+        if (typeof props.engine === 'undefined') {
+            return null;
+        }
+        if (props.engine === null) {
+            return { engine: null, shouldReplace: true };
+        }
+        return {
+            engine: props.engine,
+            shouldReplace: force || engineChanged
+        };
+    }
+    _getEngineFromGraphProp(props, { force, graphChanged, layoutChanged }) {
+        if (typeof props.graph === 'undefined') {
+            return null;
+        }
+        if (props.graph === null) {
+            return { engine: null, shouldReplace: true };
+        }
+        this._warnGraphProp();
+        return {
+            engine: this._buildEngineFromGraph(props.graph, props.layout),
+            shouldReplace: force || graphChanged || layoutChanged
+        };
+    }
+    _deriveEngineFromData(data, props) {
+        if (data === null || typeof data === 'undefined') {
+            return null;
+        }
+        if (typeof data?.then === 'function') {
+            return undefined;
+        }
+        if (data instanceof GraphEngine) {
+            return data;
+        }
+        const graphCandidate = this._coerceGraph(data);
+        if (graphCandidate) {
+            return this._buildEngineFromGraph(graphCandidate, props.layout);
+        }
+        if (typeof data === 'string') {
+            return undefined;
+        }
+        if (Array.isArray(data) || isPlainObject(data)) {
+            const loader = props.graphLoader ?? JSONGraphLoader;
+            const graph = loader({ json: data });
+            if (!graph) {
+                return null;
+            }
+            return this._buildEngineFromGraph(graph, props.layout);
+        }
+        return null;
+    }
+    _buildEngineFromGraph(graph, layout) {
+        if (!graph) {
+            return null;
+        }
+        if (!layout) {
+            this._warnLayoutRequired();
+            return null;
+        }
+        if (graph instanceof ClassicGraph && layout instanceof GraphLayout) {
+            return new GraphEngine({ graph, layout });
+        }
+        if (layout instanceof GraphLayout && !(graph instanceof ClassicGraph)) {
+            const legacyGraph = this._convertToClassicGraph(graph);
+            if (legacyGraph) {
+                return new GraphEngine({ graph: legacyGraph, layout });
+            }
+            this._warnLayoutRequired();
+            return null;
+        }
+        if (layout) {
+            return new GraphEngine({ graph, layout });
+        }
+        this._warnLayoutRequired();
+        return null;
+    }
+    _syncInteractionManager(props, engine) {
+        const resumeLayoutAfterDragging = props.resumeLayoutAfterDragging ?? GraphLayer.defaultProps.resumeLayoutAfterDragging;
+        this.state.interactionManager.updateProps({
+            nodeEvents: props.nodeEvents ?? GraphLayer.defaultProps.nodeEvents,
+            edgeEvents: props.edgeEvents ?? GraphLayer.defaultProps.edgeEvents,
+            engine: (engine ?? props.engine ?? null),
+            enableDragging: Boolean(props.enableDragging),
+            resumeLayoutAfterDragging: Boolean(resumeLayoutAfterDragging)
+        });
+    }
+    _warnGraphProp() {
+        if (!GRAPH_PROP_DEPRECATION_WARNED) {
+            warn(GRAPH_PROP_DEPRECATION_MESSAGE);
+            GRAPH_PROP_DEPRECATION_WARNED = true;
+        }
+    }
+    _warnLayoutRequired() {
+        if (!LAYOUT_REQUIRED_WARNED) {
+            warn(LAYOUT_REQUIRED_MESSAGE);
+            LAYOUT_REQUIRED_WARNED = true;
+        }
+    }
+    _isGraph(value) {
+        if (!value || typeof value !== 'object') {
+            return false;
+        }
+        const candidate = value;
+        return (typeof candidate.getNodes === 'function' && typeof candidate.getEdges === 'function');
+    }
+    _coerceGraph(value) {
+        if (value instanceof ClassicGraph) {
+            return value;
+        }
+        if (this._isGraph(value)) {
+            return value;
+        }
+        return null;
+    }
+    _convertToClassicGraph(graph) {
+        if (graph instanceof ClassicGraph) {
+            return graph;
+        }
+        const candidate = graph;
+        if (typeof candidate.toClassicGraph === 'function') {
+            try {
+                return candidate.toClassicGraph() ?? null;
+            }
+            catch (error) {
+                warn('GraphLayer: failed to convert graph to ClassicGraph for layout compatibility.', error);
+            }
+        }
+        return null;
+    }
+    _updateLayoutSnapshot(engine) {
+        const activeEngine = engine ?? this.state.graphEngine ?? null;
+        if (!activeEngine) {
+            if (this.state.layoutVersion !== 0 || typeof this.state.layoutState !== 'undefined') {
+                this._suppressNextDeckDataChange = true;
+                this.setState({ layoutVersion: 0, layoutState: undefined });
+            }
+            this.setNeedsRedraw();
+            return;
+        }
+        const nextVersion = activeEngine.getLayoutLastUpdate();
+        const nextState = activeEngine.getLayoutState();
+        if (this.state.layoutVersion !== nextVersion || this.state.layoutState !== nextState) {
+            this._suppressNextDeckDataChange = true;
+            this.setState({ layoutVersion: nextVersion, layoutState: nextState });
+        }
+        this.setNeedsRedraw();
+    }
+    _handleLayoutEvent = () => {
+        this._updateLayoutSnapshot();
+    };
     _setGraphEngine(graphEngine) {
         if (graphEngine === this.state.graphEngine) {
+            if (graphEngine) {
+                this._applyGraphEngineCallbacks(graphEngine);
+            }
+            this._updateLayoutSnapshot(graphEngine);
             return;
         }
         this._removeGraphEngine();
         if (graphEngine) {
             this.state.graphEngine = graphEngine;
-            this.state.graphEngine.run();
-            // added or removed a node, or in general something layout related changed
-            this.state.graphEngine.addEventListener('onLayoutChange', this.forceUpdate);
+            this._applyGraphEngineCallbacks(graphEngine);
+            graphEngine.run();
+            this._updateLayoutSnapshot(graphEngine);
+        }
+        else {
+            this.state.graphEngine = null;
+            this._updateLayoutSnapshot(null);
         }
     }
     _removeGraphEngine() {
-        if (this.state.graphEngine) {
-            this.state.graphEngine.removeEventListener('onLayoutChange', this.forceUpdate);
-            this.state.graphEngine.clear();
+        const engine = this.state.graphEngine;
+        if (engine) {
+            engine.setProps({
+                onLayoutStart: undefined,
+                onLayoutChange: undefined,
+                onLayoutDone: undefined,
+                onLayoutError: undefined
+            });
+            engine.clear();
             this.state.graphEngine = null;
+            this._updateLayoutSnapshot(null);
         }
     }
+    _applyGraphEngineCallbacks(engine) {
+        engine.setProps({
+            onLayoutStart: (detail) => {
+                this._handleLayoutEvent();
+                this.props.onLayoutStart?.(detail);
+            },
+            onLayoutChange: (detail) => {
+                this._handleLayoutEvent();
+                this.props.onLayoutChange?.(detail);
+            },
+            onLayoutDone: (detail) => {
+                this._handleLayoutEvent();
+                this.props.onLayoutDone?.(detail);
+            },
+            onLayoutError: (error) => {
+                this._handleLayoutEvent();
+                this.props.onLayoutError?.(error);
+            }
+        });
+    }
+    _createRankGridLayer() {
+        const engine = this.state.graphEngine;
+        if (!engine) {
+            return null;
+        }
+        const { enabled, config } = this._normalizeRankGridConfig(this.props.rankGrid);
+        if (!enabled) {
+            return null;
+        }
+        const bounds = this._resolveRankGridBounds(engine);
+        if (!bounds) {
+            return null;
+        }
+        const data = this._buildRankGridData(engine, config, bounds);
+        if (!data) {
+            return null;
+        }
+        const direction = config?.direction ?? 'horizontal';
+        const gridProps = config?.gridProps ?? {};
+        return new GridLayer({
+            id: `${this.props.id}-rank-grid`,
+            data,
+            direction,
+            xMin: bounds.xMin,
+            xMax: bounds.xMax,
+            yMin: bounds.yMin,
+            yMax: bounds.yMax,
+            pickable: false,
+            ...gridProps
+        });
+    }
+    _normalizeRankGridConfig(value) {
+        if (typeof value === 'boolean') {
+            return { enabled: value };
+        }
+        if (value && typeof value === 'object') {
+            return { enabled: value.enabled ?? true, config: value };
+        }
+        return { enabled: false };
+    }
+    _resolveRankGridBounds(engine) {
+        const bounds = engine.getLayoutBounds();
+        if (!bounds) {
+            return null;
+        }
+        const [[minXRaw, minYRaw], [maxXRaw, maxYRaw]] = bounds;
+        const values = [minXRaw, minYRaw, maxXRaw, maxYRaw];
+        if (!values.every((value) => typeof value === 'number' && Number.isFinite(value))) {
+            return null;
+        }
+        return {
+            xMin: Math.min(minXRaw, maxXRaw),
+            xMax: Math.max(minXRaw, maxXRaw),
+            yMin: Math.min(minYRaw, maxYRaw),
+            yMax: Math.max(minYRaw, maxYRaw)
+        };
+    }
+    _buildRankGridData(engine, config, bounds) {
+        const rankLabelPrefix = this._resolveRankFieldLabel(config?.rankAccessor);
+        // @ts-ignore iterator type
+        const rankPositions = mapRanksToYPositions(engine.getNodes(), engine.getNodePosition, {
+            rankAccessor: config?.rankAccessor,
+            labelAccessor: config?.labelAccessor,
+            yRange: { min: bounds.yMin, max: bounds.yMax }
+        });
+        if (rankPositions.length === 0) {
+            return null;
+        }
+        const selectedRanks = selectRankLines(rankPositions, {
+            yMin: bounds.yMin,
+            yMax: bounds.yMax,
+            maxCount: config?.maxLines ?? 8
+        });
+        if (selectedRanks.length === 0) {
+            return null;
+        }
+        return selectedRanks.map(({ rank, label, yPosition }) => ({
+            label: `${rankLabelPrefix} ${rank}`,
+            rank,
+            originalLabel: label === undefined ? undefined : label,
+            yPosition
+        }));
+    }
+    _resolveRankFieldLabel(rankAccessor) {
+        if (!rankAccessor) {
+            return 'srank';
+        }
+        if (typeof rankAccessor === 'string' && rankAccessor.length > 0) {
+            return rankAccessor;
+        }
+        if (typeof rankAccessor === 'function' && rankAccessor.name) {
+            return rankAccessor.name;
+        }
+        return 'rank';
+    }
     createNodeLayers() {
         const engine = this.state.graphEngine;
         const { nodes: nodeStyles } = this._getResolvedStylesheet();
@@ -187,7 +551,7 @@ export class GraphLayer extends CompositeLayer {
                 warn(`GraphLayer: Invalid node type "${style.type}".`);
                 return null;
             }
-            const stylesheet = this._createStyleEngine(restStyle, `node stylesheet "${style.type}"`);
+            const stylesheet = this._createStylesheetEngine(restStyle, `node stylesheet "${style.type}"`);
             if (!stylesheet) {
                 return null;
             }
@@ -230,7 +594,7 @@ export class GraphLayer extends CompositeLayer {
             .filter(Boolean)
             .flatMap((style, idx) => {
             const { decorators, data = (edges) => edges, visible = true, ...restEdgeStyle } = style;
-            const stylesheet = this._createStyleEngine({
+            const stylesheet = this._createStylesheetEngine({
                 type: 'edge',
                 ...restEdgeStyle
             }, 'edge stylesheet');
@@ -252,13 +616,14 @@ export class GraphLayer extends CompositeLayer {
             }
             const decoratorLayers = decorators
                 .filter(Boolean)
+                // @ts-ignore eslint-disable-next-line @typescript-eslint/no-unused-vars
                 .map((decoratorStyle, idx2) => {
                 const DecoratorLayer = EDGE_DECORATOR_LAYER_MAP[decoratorStyle.type];
                 if (!DecoratorLayer) {
                     warn(`GraphLayer: Invalid edge decorator type "${decoratorStyle.type}".`);
                     return null;
                 }
-                const decoratorStylesheet = this._createStyleEngine(decoratorStyle, `edge decorator stylesheet "${decoratorStyle.type}"`);
+                const decoratorStylesheet = this._createStylesheetEngine(decoratorStyle, `edge decorator stylesheet "${decoratorStyle.type}"`);
                 if (!decoratorStylesheet) {
                     return null;
                 }
@@ -292,7 +657,20 @@ export class GraphLayer extends CompositeLayer {
         this.state.interactionManager.onDragEnd(info, event);
     }
     renderLayers() {
-        return [this.createEdgeLayers(), this.createNodeLayers()];
+        const layers = [];
+        const gridLayer = this._createRankGridLayer();
+        if (gridLayer) {
+            layers.push(gridLayer);
+        }
+        const edgeLayers = this.createEdgeLayers();
+        if (Array.isArray(edgeLayers) && edgeLayers.length > 0) {
+            layers.push(...edgeLayers);
+        }
+        const nodeLayers = this.createNodeLayers();
+        if (Array.isArray(nodeLayers) && nodeLayers.length > 0) {
+            layers.push(...nodeLayers);
+        }
+        return layers;
     }
     _createChainOverlayLayers(engine) {
         const chainData = buildCollapsedChainLayers(engine);
@@ -319,7 +697,7 @@ export class GraphLayer extends CompositeLayer {
                 }
             }));
         }
-        const collapsedMarkerStylesheet = this._createStyleEngine({
+        const collapsedMarkerStylesheet = this._createStylesheetEngine({
             type: 'marker',
             fill: [64, 96, 192, 255],
             size: 32,
@@ -362,7 +740,7 @@ export class GraphLayer extends CompositeLayer {
                 }
             }));
         }
-        const expandedMarkerStylesheet = this._createStyleEngine({
+        const expandedMarkerStylesheet = this._createStylesheetEngine({
             type: 'marker',
             fill: [64, 96, 192, 255],
             size: 32,
@@ -390,3 +768,11 @@ export class GraphLayer extends CompositeLayer {
         return layers;
     }
 }
+function isPlainObject(value) {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+    const prototype = Object.getPrototypeOf(value);
+    return prototype === Object.prototype || prototype === null;
+}
+//# sourceMappingURL=graph-layer.js.map