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

package/src/layers/graph-layer.ts

@@ -2,19 +2,32 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+/* eslint-disable no-continue */
+
 import type {CompositeLayerProps} from '@deck.gl/core';
 import {COORDINATE_SYSTEM, CompositeLayer} from '@deck.gl/core';
+import {PolygonLayer} from '@deck.gl/layers';
 
-import {NODE_TYPE, EDGE_DECORATOR_TYPE} from '../core/constants';
 import {Graph} from '../graph/graph';
+import type {Node} from '../graph/node';
 import {GraphLayout} from '../core/graph-layout';
 import {GraphEngine} from '../core/graph-engine';
 
-import {Stylesheet} from '../style/style-sheet';
+import {GraphStyleEngine, type GraphStylesheet} 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 {log} from '../utils/log';
+import {
+  DEFAULT_GRAPH_LAYER_STYLESHEET,
+  normalizeGraphLayerStylesheet,
+  type GraphLayerEdgeStyle,
+  type GraphLayerNodeStyle,
+  type GraphLayerStylesheet,
+  type NormalizedGraphLayerStylesheet
+} from '../style/graph-layer-stylesheet';
 
 // node layers
 import {CircleLayer} from './node-layers/circle-layer';
@@ -29,22 +42,25 @@ import {ZoomableMarkerLayer} from './node-layers/zoomable-marker-layer';
 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';
 
 const NODE_LAYER_MAP = {
-  [NODE_TYPE.RECTANGLE]: RectangleLayer,
-  [NODE_TYPE.ROUNDED_RECTANGLE]: RoundedRectangleLayer,
-  [NODE_TYPE.PATH_ROUNDED_RECTANGLE]: PathBasedRoundedRectangleLayer,
-  [NODE_TYPE.ICON]: ImageLayer,
-  [NODE_TYPE.CIRCLE]: CircleLayer,
-  [NODE_TYPE.LABEL]: LabelLayer,
-  [NODE_TYPE.MARKER]: ZoomableMarkerLayer
+  'rectangle': RectangleLayer,
+  'rounded-rectangle': RoundedRectangleLayer,
+  'path-rounded-rectangle': PathBasedRoundedRectangleLayer,
+  'icon': ImageLayer,
+  'circle': CircleLayer,
+  'label': LabelLayer,
+  'marker': ZoomableMarkerLayer
 };
 
 const EDGE_DECORATOR_LAYER_MAP = {
-  [EDGE_DECORATOR_TYPE.LABEL]: EdgeLabelLayer,
-  [EDGE_DECORATOR_TYPE.FLOW]: FlowLayer
+  'edge-label': EdgeLabelLayer,
+  'flow': FlowLayer,
+  'arrow': EdgeArrowLayer
 };
 
 const SHARED_LAYER_PROPS = {
@@ -54,6 +70,14 @@ 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.';
+
+let NODE_STYLE_DEPRECATION_WARNED = false;
+let EDGE_STYLE_DEPRECATION_WARNED = false;
+
 export type GraphLayerProps = CompositeLayerProps & _GraphLayerProps;
 
 export type _GraphLayerProps = {
@@ -62,14 +86,11 @@ export type _GraphLayerProps = {
   graphLoader?: (opts: {json: any}) => Graph;
   engine?: GraphEngine;
 
-  // an array of styles for layers
-  nodeStyle?: any[];
-  edgeStyle?: {
-    stroke?: string;
-    strokeWidth?: number;
-    /** an array of styles for layers */
-    decorators?: any[];
-  };
+  stylesheet?: GraphLayerStylesheet;
+  /** @deprecated Use `stylesheet.nodes`. */
+  nodeStyle?: GraphLayerNodeStyle[];
+  /** @deprecated Use `stylesheet.edges`. */
+  edgeStyle?: GraphLayerEdgeStyle | GraphLayerEdgeStyle[];
   nodeEvents?: {
     onMouseLeave?: () => void;
     onHover?: () => void;
@@ -84,6 +105,7 @@ export type _GraphLayerProps = {
   enableDragging?: boolean;
 };
 
+/** Composite layer that renders graph nodes, edges, and decorators. */
 export class GraphLayer extends CompositeLayer<GraphLayerProps> {
   static layerName = 'GraphLayer';
 
@@ -95,7 +117,8 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
     // Graph props
     graphLoader: JSONLoader,
 
-    nodeStyle: [],
+    stylesheet: DEFAULT_GRAPH_LAYER_STYLESHEET,
+    nodeStyle: undefined as unknown as GraphLayerNodeStyle[],
     nodeEvents: {
       onMouseLeave: () => {},
       onHover: () => {},
@@ -103,12 +126,7 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
       onClick: () => {},
       onDrag: () => {}
     },
-    edgeStyle: {
-      stroke: 'black',
-      strokeWidth: 1,
-      // an array of styles for layers
-      decorators: []
-    },
+    edgeStyle: undefined as unknown as GraphLayerEdgeStyle | GraphLayerEdgeStyle[],
     edgeEvents: {
       onClick: () => {},
       onHover: () => {}
@@ -122,6 +140,8 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
     graphEngine?: GraphEngine;
   };
 
+  private readonly _edgeAttachmentHelper = new EdgeAttachmentHelper();
+
   forceUpdate = () => {
     if (this.context && this.context.layerManager) {
       this.setNeedsUpdate();
@@ -163,6 +183,10 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
       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();
     }
   }
 
@@ -170,6 +194,40 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
     this._removeGraphEngine();
   }
 
+  private _getResolvedStylesheet(): NormalizedGraphLayerStylesheet {
+    const {stylesheet, nodeStyle, edgeStyle} = this.props;
+
+    const usingNodeStyle = typeof nodeStyle !== 'undefined';
+    if (usingNodeStyle && !NODE_STYLE_DEPRECATION_WARNED) {
+      warn(NODE_STYLE_DEPRECATION_MESSAGE);
+      NODE_STYLE_DEPRECATION_WARNED = true;
+    }
+
+    const usingEdgeStyle = typeof edgeStyle !== 'undefined';
+    if (usingEdgeStyle && !EDGE_STYLE_DEPRECATION_WARNED) {
+      warn(EDGE_STYLE_DEPRECATION_MESSAGE);
+      EDGE_STYLE_DEPRECATION_WARNED = true;
+    }
+
+    return normalizeGraphLayerStylesheet({
+      stylesheet,
+      nodeStyle: usingNodeStyle ? nodeStyle : undefined,
+      edgeStyle: usingEdgeStyle ? edgeStyle : undefined
+    });
+  }
+
+  private _createStyleEngine(style: GraphStylesheet, context: string): GraphStyleEngine | null {
+    try {
+      return new GraphStyleEngine(style, {
+        stateUpdateTrigger: (this.state.interactionManager as any).getLastInteraction()
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      warn(`GraphLayer: Failed to apply ${context}: ${message}`);
+      return null;
+    }
+  }
+
   _setGraphEngine(graphEngine: GraphEngine) {
     if (graphEngine === this.state.graphEngine) {
       return;
@@ -194,66 +252,91 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
 
   createNodeLayers() {
     const engine = this.state.graphEngine;
-    const {nodeStyle} = this.props;
-    if (!engine || !nodeStyle || !Array.isArray(nodeStyle) || nodeStyle.length === 0) {
+    const {nodes: nodeStyles} = this._getResolvedStylesheet();
+
+    if (!engine || !Array.isArray(nodeStyles) || nodeStyles.length === 0) {
       return [];
     }
 
-    return nodeStyle.filter(Boolean).map((style, idx) => {
-      const {pickable = true, visible = true, data = (nodes) => nodes, ...restStyle} = style;
-      const LayerType = NODE_LAYER_MAP[style.type];
-      if (!LayerType) {
-        log.error(`Invalid node type: ${style.type}`)();
-        throw new Error(`Invalid node type: ${style.type}`);
-      }
-      const stylesheet = new Stylesheet(restStyle, {
-        stateUpdateTrigger: (this.state.interactionManager as any).getLastInteraction()
-      });
-      const getOffset = stylesheet.getDeckGLAccessor('getOffset');
-      return new LayerType({
-        ...SHARED_LAYER_PROPS,
-        id: `node-rule-${idx}`,
-        data: data(engine.getNodes()),
-        getPosition: mixedGetPosition(engine.getNodePosition, getOffset),
-        pickable,
-        positionUpdateTrigger: [
-          engine.getLayoutLastUpdate(),
-          engine.getLayoutState(),
-          stylesheet.getDeckGLAccessorUpdateTrigger('getOffset')
-        ].join(),
-        stylesheet,
-        visible
-      } as any);
-    });
+    const baseLayers = nodeStyles
+      .filter(Boolean)
+      .map((style, idx) => {
+        const {pickable = true, visible = true, data = (nodes) => nodes, ...restStyle} = style;
+        const LayerType = NODE_LAYER_MAP[style.type];
+        if (!LayerType) {
+          warn(`GraphLayer: Invalid node type "${style.type}".`);
+          return null;
+        }
+        const stylesheet = this._createStyleEngine(
+          restStyle as unknown as GraphStylesheet,
+          `node stylesheet "${style.type}"`
+        );
+        if (!stylesheet) {
+          return null;
+        }
+        const getOffset = stylesheet.getDeckGLAccessor('getOffset');
+        return new LayerType({
+          ...SHARED_LAYER_PROPS,
+          id: `node-rule-${idx}`,
+          data: data(engine.getNodes()),
+          getPosition: mixedGetPosition(engine.getNodePosition, getOffset),
+          pickable,
+          positionUpdateTrigger: [
+            engine.getLayoutLastUpdate(),
+            engine.getLayoutState(),
+            stylesheet.getDeckGLAccessorUpdateTrigger('getOffset')
+          ].join(),
+          stylesheet,
+          visible
+        } as any);
+      })
+      .filter(Boolean) as any[];
+
+    const chainLayers = this._createChainOverlayLayers(engine);
+
+    return [...baseLayers, ...chainLayers];
   }
 
   createEdgeLayers() {
     const engine = this.state.graphEngine;
-    const {edgeStyle} = this.props;
+    const {edges: edgeStyles, nodes: nodeStyles} = this._getResolvedStylesheet();
 
-    if (!engine || !edgeStyle) {
+    if (!engine || !edgeStyles) {
       return [];
     }
 
-    return (Array.isArray(edgeStyle) ? edgeStyle : [edgeStyle])
+    const edgeStyleArray = Array.isArray(edgeStyles) ? edgeStyles : [edgeStyles];
+
+    if (edgeStyleArray.length === 0) {
+      return [];
+    }
+
+    const getLayoutInfo = this._edgeAttachmentHelper.getLayoutAccessor({
+      engine,
+      interactionManager: this.state.interactionManager,
+      nodeStyle: nodeStyles
+    });
+
+    return edgeStyleArray
       .filter(Boolean)
       .flatMap((style, idx) => {
         const {decorators, data = (edges) => edges, visible = true, ...restEdgeStyle} = style;
-        const stylesheet = new Stylesheet(
+        const stylesheet = this._createStyleEngine(
           {
-            type: 'Edge',
+            type: 'edge',
             ...restEdgeStyle
-          },
-          {
-            stateUpdateTrigger: (this.state.interactionManager as any).getLastInteraction()
-          }
+          } as GraphStylesheet,
+          'edge stylesheet'
         );
+        if (!stylesheet) {
+          return [];
+        }
 
         const edgeLayer = new EdgeLayer({
           ...SHARED_LAYER_PROPS,
           id: `edge-layer-${idx}`,
           data: data(engine.getEdges()),
-          getLayoutInfo: engine.getEdgePosition,
+          getLayoutInfo,
           pickable: true,
           positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
           stylesheet,
@@ -261,28 +344,37 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
         } as any);
 
         if (!decorators || !Array.isArray(decorators) || decorators.length === 0) {
-          return edgeLayer;
+          return [edgeLayer];
         }
-        const decoratorLayers = decorators.filter(Boolean).flatMap((decoratorStyle, idx2) => {
-          const DecoratorLayer = EDGE_DECORATOR_LAYER_MAP[decoratorStyle.type];
-          if (!DecoratorLayer) {
-            log.error(`Invalid edge decorator type: ${decoratorStyle.type}`)();
-            throw new Error(`Invalid edge decorator type: ${decoratorStyle.type}`);
-          }
-          const decoratorStylesheet = new Stylesheet(decoratorStyle, {
-            stateUpdateTrigger: (this.state.interactionManager as any).getLastInteraction()
-          });
-          return new DecoratorLayer({
-            ...SHARED_LAYER_PROPS,
-            id: `edge-decorator-${idx2}`,
-            data: data(engine.getEdges()),
-            getLayoutInfo: engine.getEdgePosition,
-            pickable: true,
-            positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
-            stylesheet: decoratorStylesheet
-          } as any);
-        });
-        return [edgeLayer, decoratorLayers];
+
+        const decoratorLayers = decorators
+          .filter(Boolean)
+          .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 as unknown as GraphStylesheet,
+              `edge decorator stylesheet "${decoratorStyle.type}"`
+            );
+            if (!decoratorStylesheet) {
+              return null;
+            }
+            return new DecoratorLayer({
+              ...SHARED_LAYER_PROPS,
+              id: `edge-decorator-${idx2}`,
+              data: data(engine.getEdges()),
+              getLayoutInfo,
+              pickable: true,
+              positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
+              stylesheet: decoratorStylesheet
+            } as any);
+          })
+          .filter(Boolean);
+
+        return [edgeLayer, ...decoratorLayers];
       });
   }
 
@@ -309,4 +401,130 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
   renderLayers() {
     return [this.createEdgeLayers(), this.createNodeLayers()];
   }
+
+  private _createChainOverlayLayers(engine: GraphEngine) {
+    const chainData = buildCollapsedChainLayers(engine);
+    if (!chainData) {
+      return [];
+    }
+
+    const {
+      collapsedNodes,
+      collapsedOutlineNodes,
+      expandedNodes,
+      expandedOutlineNodes,
+      getChainOutlinePolygon,
+      outlineUpdateTrigger
+    } = chainData;
+
+    const layers: any[] = [];
+
+    if (collapsedOutlineNodes.length > 0) {
+      layers.push(
+        new PolygonLayer({
+          ...SHARED_LAYER_PROPS,
+          id: 'collapsed-chain-outlines',
+          data: collapsedOutlineNodes,
+          getPolygon: (node: Node) => getChainOutlinePolygon(node),
+          stroked: true,
+          filled: false,
+          getLineColor: [220, 64, 64, 220],
+          getLineWidth: 2,
+          lineWidthUnits: 'pixels',
+          lineWidthMinPixels: 2,
+          pickable: true,
+          updateTriggers: {
+            getPolygon: [outlineUpdateTrigger]
+          }
+        })
+      );
+    }
+
+    const collapsedMarkerStylesheet = this._createStyleEngine(
+      {
+        type: 'marker',
+        fill: [64, 96, 192, 255],
+        size: 32,
+        marker: 'circle-plus-filled',
+        offset: [24, -24],
+        scaleWithZoom: false
+      } as GraphStylesheet<'marker'>,
+      'collapsed chain marker stylesheet'
+    );
+
+    if (collapsedMarkerStylesheet && collapsedNodes.length > 0) {
+      const getOffset = collapsedMarkerStylesheet.getDeckGLAccessor('getOffset');
+      layers.push(
+        new ZoomableMarkerLayer({
+          ...SHARED_LAYER_PROPS,
+          id: 'collapsed-chain-markers',
+          data: collapsedNodes,
+          getPosition: mixedGetPosition(engine.getNodePosition, getOffset),
+          pickable: true,
+          positionUpdateTrigger: [
+            engine.getLayoutLastUpdate(),
+            engine.getLayoutState(),
+            collapsedMarkerStylesheet.getDeckGLAccessorUpdateTrigger('getOffset')
+          ].join(),
+          stylesheet: collapsedMarkerStylesheet,
+          visible: true
+        } as any)
+      );
+    }
+
+    if (expandedOutlineNodes.length > 0) {
+      layers.push(
+        new PolygonLayer({
+          ...SHARED_LAYER_PROPS,
+          id: 'expanded-chain-outlines',
+          data: expandedOutlineNodes,
+          getPolygon: (node: Node) => getChainOutlinePolygon(node),
+          stroked: true,
+          filled: false,
+          getLineColor: [64, 96, 192, 200],
+          getLineWidth: 2,
+          lineWidthUnits: 'pixels',
+          lineWidthMinPixels: 2,
+          pickable: true,
+          updateTriggers: {
+            getPolygon: [outlineUpdateTrigger]
+          }
+        })
+      );
+    }
+
+    const expandedMarkerStylesheet = this._createStyleEngine(
+      {
+        type: 'marker',
+        fill: [64, 96, 192, 255],
+        size: 32,
+        marker: 'circle-minus-filled',
+        offset: [24, -24],
+        scaleWithZoom: false
+      } as GraphStylesheet<'marker'>,
+      'expanded chain marker stylesheet'
+    );
+
+    if (expandedMarkerStylesheet && expandedNodes.length > 0) {
+      const getOffset = expandedMarkerStylesheet.getDeckGLAccessor('getOffset');
+      layers.push(
+        new ZoomableMarkerLayer({
+          ...SHARED_LAYER_PROPS,
+          id: 'expanded-chain-markers',
+          data: expandedNodes,
+          getPosition: mixedGetPosition(engine.getNodePosition, getOffset),
+          pickable: true,
+          positionUpdateTrigger: [
+            engine.getLayoutLastUpdate(),
+            engine.getLayoutState(),
+            expandedMarkerStylesheet.getDeckGLAccessorUpdateTrigger('getOffset')
+          ].join(),
+          stylesheet: expandedMarkerStylesheet,
+          visible: true
+        } as any)
+      );
+    }
+
+    return layers;
+  }
 }