@deck.gl-community/graph-layers 9.0.2 → 9.1.0-beta.3

package/src/layers/graph-layer.ts

@@ -2,10 +2,15 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import type {CompositeLayerProps} from '@deck.gl/core';
 import {COORDINATE_SYSTEM, CompositeLayer} from '@deck.gl/core';
 
-import {Stylesheet} from '../style/style-sheet';
 import {NODE_TYPE, EDGE_DECORATOR_TYPE} from '../core/constants';
+import {Graph} from '../graph/graph';
+import {GraphLayout} from '../core/graph-layout';
+import {GraphEngine} from '../core/graph-engine';
+
+import {Stylesheet} from '../style/style-sheet';
 import {mixedGetPosition} from '../utils/layer-utils';
 import {InteractionManager} from '../core/interaction-manager';
 
@@ -17,7 +22,7 @@ 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-rectange-layer';
+import {PathBasedRoundedRectangleLayer} from './node-layers/path-rounded-rectangle-layer';
 import {ZoomableMarkerLayer} from './node-layers/zoomable-marker-layer';
 
 // edge layers
@@ -25,6 +30,8 @@ import {EdgeLayer} from './edge-layer';
 import {EdgeLabelLayer} from './edge-layers/edge-label-layer';
 import {FlowLayer} from './edge-layers/flow-layer';
 
+import {JSONLoader} from '../loaders/json-loader';
+
 const NODE_LAYER_MAP = {
   [NODE_TYPE.RECTANGLE]: RectangleLayer,
   [NODE_TYPE.ROUNDED_RECTANGLE]: RoundedRectangleLayer,
@@ -46,32 +53,73 @@ const SHARED_LAYER_PROPS = {
     depthTest: false
   }
 };
-const defaultProps = {
+
+export type GraphLayerProps = CompositeLayerProps & _GraphLayerProps;
+
+export type _GraphLayerProps = {
+  graph?: Graph;
+  layout?: GraphLayout;
+  graphLoader?: (opts: {json: any}) => Graph;
+  engine?: GraphEngine;
+
   // an array of styles for layers
-  nodeStyle: [],
-  nodeEvents: {
-    onMouseLeave: () => {},
-    onHover: () => {},
-    onMouseEnter: () => {},
-    onClick: () => {},
-    onDrag: () => {}
-  },
-  edgeStyle: {
-    color: 'black',
-    strokeWidth: 1,
-    // an array of styles for layers
-    decorators: []
-  },
-  edgeEvents: {
-    onClick: () => {},
-    onHover: () => {}
-  },
-  enableDragging: false
+  nodeStyle?: any[];
+  edgeStyle?: {
+    stroke?: string;
+    strokeWidth?: number;
+    /** an array of styles for layers */
+    decorators?: any[];
+  };
+  nodeEvents?: {
+    onMouseLeave?: () => void;
+    onHover?: () => void;
+    onMouseEnter?: () => void;
+    onClick?: () => void;
+    onDrag?: () => void;
+  };
+  edgeEvents?: {
+    onClick: () => void;
+    onHover: () => void;
+  };
+  enableDragging?: boolean;
 };
 
-export class GraphLayer extends CompositeLayer {
-  static defaultProps = {
-    pickable: true
+export class GraphLayer extends CompositeLayer<GraphLayerProps> {
+  static layerName = 'GraphLayer';
+
+  static defaultProps: Required<_GraphLayerProps> = {
+    // Composite layer props
+    // @ts-expect-error composite layer props
+    pickable: true,
+
+    // Graph props
+    graphLoader: JSONLoader,
+
+    nodeStyle: [],
+    nodeEvents: {
+      onMouseLeave: () => {},
+      onHover: () => {},
+      onMouseEnter: () => {},
+      onClick: () => {},
+      onDrag: () => {}
+    },
+    edgeStyle: {
+      stroke: 'black',
+      strokeWidth: 1,
+      // an array of styles for layers
+      decorators: []
+    },
+    edgeEvents: {
+      onClick: () => {},
+      onHover: () => {}
+    },
+    enableDragging: false
+  };
+
+  // @ts-expect-error Some typescript confusion due to override of base class state
+  state!: CompositeLayer<GraphLayerProps>['state'] & {
+    interactionManager: InteractionManager;
+    graphEngine?: GraphEngine;
   };
 
   forceUpdate = () => {
@@ -81,35 +129,76 @@ export class GraphLayer extends CompositeLayer {
     }
   };
 
-  constructor(props) {
+  constructor(props: GraphLayerProps & CompositeLayerProps) {
     super(props);
-
-    // added or removed a node, or in general something layout related changed
-    props.engine.addEventListener('onLayoutChange', this.forceUpdate);
   }
 
   initializeState() {
-    const interactionManager = new InteractionManager(this.props as any, () => this.forceUpdate());
-    this.state = {interactionManager};
+    this.state = {
+      interactionManager: new InteractionManager(this.props as any, () => this.forceUpdate())
+    };
+    const engine = this.props.engine;
+    this._setGraphEngine(engine);
   }
 
   shouldUpdateState({changeFlags}) {
     return changeFlags.dataChanged || changeFlags.propsChanged;
   }
 
-  updateState({props}) {
-    (this.state.interactionManager as any).updateProps(props);
+  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();
+    }
   }
 
   finalize() {
-    (this.props as any).engine.removeEventListener('onLayoutChange', this.forceUpdate);
+    this._removeGraphEngine();
+  }
+
+  _setGraphEngine(graphEngine: GraphEngine) {
+    if (graphEngine === this.state.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);
+    }
+  }
+
+  _removeGraphEngine() {
+    if (this.state.graphEngine) {
+      this.state.graphEngine.removeEventListener('onLayoutChange', this.forceUpdate);
+      this.state.graphEngine.clear();
+      this.state.graphEngine = null;
+    }
   }
 
   createNodeLayers() {
-    const {engine, nodeStyle} = this.props as any;
-    if (!nodeStyle || !Array.isArray(nodeStyle) || nodeStyle.length === 0) {
+    const engine = this.state.graphEngine;
+    const {nodeStyle} = this.props;
+    if (!engine || !nodeStyle || !Array.isArray(nodeStyle) || nodeStyle.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];
@@ -139,9 +228,10 @@ export class GraphLayer extends CompositeLayer {
   }
 
   createEdgeLayers() {
-    const {edgeStyle, engine} = this.props as any;
+    const engine = this.state.graphEngine;
+    const {edgeStyle} = this.props;
 
-    if (!edgeStyle) {
+    if (!engine || !edgeStyle) {
       return [];
     }
 
@@ -197,29 +287,26 @@ export class GraphLayer extends CompositeLayer {
   }
 
   onClick(info, event): boolean {
-    return (this.state.interactionManager as any).onClick(info, event) || false;
+    return (this.state.interactionManager.onClick(info, event) as unknown as boolean) || false;
   }
 
   onHover(info, event): boolean {
-    return (this.state.interactionManager as any).onHover(info, event) || false;
+    return (this.state.interactionManager.onHover(info, event) as unknown as boolean) || false;
   }
 
   onDragStart(info, event) {
-    (this.state.interactionManager as any).onDragStart(info, event);
+    this.state.interactionManager.onDragStart(info, event);
   }
 
   onDrag(info, event) {
-    (this.state.interactionManager as any).onDrag(info, event);
+    this.state.interactionManager.onDrag(info, event);
   }
 
   onDragEnd(info, event) {
-    (this.state.interactionManager as any).onDragEnd(info, event);
+    this.state.interactionManager.onDragEnd(info, event);
   }
 
   renderLayers() {
     return [this.createEdgeLayers(), this.createNodeLayers()];
   }
 }
-
-GraphLayer.layerName = 'GraphLayer';
-(GraphLayer as any).defaultProps = defaultProps;

package/src/layers/node-layers/rounded-rectangle-layer-fragment.ts

@@ -7,8 +7,6 @@ export const fs = /* glsl */ `\
 
 precision highp float;
 
-uniform float cornerRadius;
-
 varying vec4 vFillColor;
 varying vec2 unitPosition;
 
@@ -17,7 +15,7 @@ void main(void) {
   float distToCenter = length(unitPosition);
 
   /* Calculate the cutoff radius for the rounded corners */
-  float threshold = sqrt(2.0) * (1.0 - cornerRadius) + 1.0 * cornerRadius;
+  float threshold = sqrt(2.0) * (1.0 - roundedRectangle.cornerRadius) + 1.0 * roundedRectangle.cornerRadius;
   if (distToCenter <= threshold) {
     gl_FragColor = vFillColor;
   } else {

package/src/layers/node-layers/rounded-rectangle-layer.ts

@@ -3,25 +3,49 @@
 // Copyright (c) vis.gl contributors
 
 // import {ScatterplotLayer} from '@deck.gl/layers';
+import type {ShaderModule} from '@luma.gl/shadertools';
+import type {Model} from '@luma.gl/engine';
 import {fs} from './rounded-rectangle-layer-fragment';
 import {RectangleLayer} from './rectangle-layer';
 
+const uniformBlock = `\
+uniform roundedRectangleUniforms {
+  float cornerRadius;
+} roundedRectangle;
+`;
+
+export type RoundedRectangleProps = {
+  cornerRadius: number;
+};
+
+export const roundedRectangleUniforms = {
+  name: 'roundedRectangle',
+  vs: uniformBlock,
+  fs: uniformBlock,
+  uniformTypes: {
+    cornerRadius: 'f32'
+  }
+} as const satisfies ShaderModule<RoundedRectangleProps>;
+
 export class RoundedRectangleLayer extends RectangleLayer {
   static layerName = 'RoundedRectangleLayer';
-  draw({uniforms}) {
-    super.draw({
-      uniforms: {
-        ...uniforms,
-        cornerRadius: (this.props as any).cornerRadius
-      }
-    });
+
+  draw(props) {
+    const {cornerRadius} = this.props as any;
+    const roundedRectangleProps: RoundedRectangleProps = {cornerRadius};
+    const model = this.state.model as Model;
+    model.shaderInputs.setProps({roundedRectangle: roundedRectangleProps});
+    super.draw(props);
   }
 
   getShaders() {
     // use object.assign to make sure we don't overwrite existing fields like `vs`, `modules`...
-    return Object.assign({}, super.getShaders(undefined!), {
-      fs
-    });
+    const shaders = super.getShaders(undefined!);
+    return {
+      ...shaders,
+      fs,
+      modules: [...shaders.modules, roundedRectangleUniforms]
+    };
   }
 }
 

package/src/layouts/d3-force/d3-force-layout.ts

@@ -2,29 +2,39 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout} from '../../core/base-layout';
+import {GraphLayout, GraphLayoutOptions} from '../../core/graph-layout';
 
 import {EDGE_TYPE} from '../../core/constants';
 
-const defaultOptions = {
-  alpha: 0.3,
-  resumeAlpha: 0.1,
-  nBodyStrength: -900,
-  nBodyDistanceMin: 100,
-  nBodyDistanceMax: 400,
-  getCollisionRadius: 0
+export type D3ForceLayoutOptions = GraphLayoutOptions & {
+  alpha?: number;
+  resumeAlpha?: number;
+  nBodyStrength?: number;
+  nBodyDistanceMin?: number;
+  nBodyDistanceMax?: number;
+  getCollisionRadius?: number;
 };
 
-export class D3ForceLayout extends BaseLayout {
+export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
+  static defaultOptions: Required<D3ForceLayoutOptions> = {
+    alpha: 0.3,
+    resumeAlpha: 0.1,
+    nBodyStrength: -900,
+    nBodyDistanceMin: 100,
+    nBodyDistanceMax: 400,
+    getCollisionRadius: 0
+  };
+
   protected readonly _name = 'D3';
   private _positionsByNodeId = new Map();
   private _graph: any;
   private _worker: any;
-  constructor(options) {
+
+  constructor(options?: D3ForceLayoutOptions) {
     super(options);
 
     this._options = {
-      ...defaultOptions,
+      ...D3ForceLayout.defaultOptions,
       ...options
     };
   }

package/src/layouts/experimental/force-multi-graph-layout.ts

@@ -0,0 +1,268 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {GraphLayout, GraphLayoutOptions} from '../../core/graph-layout';
+import {Node} from '../../graph/node';
+import {EDGE_TYPE} from '../../core/constants';
+import {Graph} from '../../graph/graph';
+import * as d3 from 'd3-force';
+
+export type ForceMultiGraphLayoutOptions = GraphLayoutOptions & {
+  alpha?: number;
+  nBodyStrength?: number;
+  nBodyDistanceMin?: number;
+  nBodyDistanceMax?: number;
+};
+
+export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOptions> {
+  static defaultOptions = {
+    alpha: 3,
+    nBodyStrength: -1200,
+    nBodyDistanceMin: 100,
+    nBodyDistanceMax: 1400
+  };
+
+  _name = 'ForceMultiGraphLayout';
+  _graph: Graph;
+
+  // d3 part
+  // custom graph data
+  _d3Graph = {nodes: [], edges: []};
+  _nodeMap = {};
+  _edgeMap = {};
+  _simulator;
+
+  constructor(options: ForceMultiGraphLayoutOptions = {}) {
+    super(options);
+    this._options = {
+      ...ForceMultiGraphLayout.defaultOptions,
+      ...options
+    };
+  }
+
+  initializeGraph(graph: Graph): void {
+    this.updateGraph(graph);
+  }
+
+  _strength = (d3Edge) => {
+    if (d3Edge.isVirtual) {
+      return 1 / d3Edge.edgeCount;
+    }
+    const sourceDegree = this._graph.getDegree(d3Edge.source.id);
+    const targetDegree = this._graph.getDegree(d3Edge.target.id);
+    return 1 / Math.min(sourceDegree, targetDegree);
+  };
+
+  _generateSimulator() {
+    if (this._simulator) {
+      this._simulator.on('tick', null).on('end', null);
+      this._simulator = null;
+    }
+    const {alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax} = this._options;
+
+    const g = this._d3Graph;
+    this._simulator = d3
+      .forceSimulation(g.nodes)
+      .force(
+        'edge',
+        d3
+          .forceLink(g.edges)
+          .id((n) => n.id)
+          .strength(this._strength)
+      )
+      .force(
+        'charge',
+        d3
+          .forceManyBody()
+          .strength(nBodyStrength)
+          .distanceMin(nBodyDistanceMin)
+          .distanceMax(nBodyDistanceMax)
+      )
+      .force('center', d3.forceCenter())
+      .alpha(alpha);
+    // register event callbacks
+    this._simulator.on('tick', this._onLayoutChange).on('end', this._onLayoutDone);
+  }
+
+  start() {
+    this._generateSimulator();
+    this._simulator.restart();
+  }
+
+  resume() {
+    this._simulator.restart();
+  }
+
+  stop() {
+    this._simulator.stop();
+  }
+
+  updateGraph(graph) {
+    this._graph = graph;
+
+    // nodes
+    const newNodeMap = {};
+    const newD3Nodes = graph.getNodes().map((node) => {
+      const oldD3Node = this._nodeMap[node.id];
+      const newD3Node = oldD3Node ? oldD3Node : {id: node.id};
+      newNodeMap[node.id] = newD3Node;
+      return newD3Node;
+    });
+
+    // edges
+    // bucket edges between the same source/target node pairs.
+    const nodePairs = graph.getEdges().reduce((res, edge) => {
+      const nodes = [edge.getSourceNodeId(), edge.getTargetNodeId()];
+      // sort the node ids to count the edges with the same pair
+      // but different direction (a -> b or b -> a)
+      const pairId = nodes.sort().toString();
+      // push this edge into the bucket
+      if (!res[pairId]) {
+        res[pairId] = [edge];
+      } else {
+        res[pairId].push(edge);
+      }
+      return res;
+    }, {});
+
+    // go through each pair of edges,
+    // if only one edge between two nodes, create a straight line
+    // otherwise, create one virtual node and two edges for each edge
+    const newD3Edges = [];
+    const newEdgeMap = {};
+
+    Object.keys(nodePairs).forEach((pairId) => {
+      const betweenEdges = nodePairs[pairId];
+      const firstEdge = betweenEdges[0];
+      if (betweenEdges.length === 1) {
+        // do nothing, this is a real edge
+        const newD3Edge = {
+          type: EDGE_TYPE.LINE,
+          id: firstEdge.getId(),
+          source: newNodeMap[firstEdge.getSourceNodeId()],
+          target: newNodeMap[firstEdge.getTargetNodeId()],
+          isVirtual: false
+        };
+        newEdgeMap[firstEdge.getId()] = newD3Edge;
+        newD3Edges.push(newD3Edge);
+        return;
+      }
+
+      // else reduce to one virtual edge
+      const newD3Edge = {
+        type: EDGE_TYPE.LINE,
+        id: pairId,
+        source: newNodeMap[firstEdge.getSourceNodeId()],
+        target: newNodeMap[firstEdge.getTargetNodeId()],
+        isVirtual: true,
+        edgeCount: betweenEdges.length
+      };
+      newEdgeMap[pairId] = newD3Edge;
+      newD3Edges.push(newD3Edge);
+
+      betweenEdges.forEach((e, idx) => {
+        newEdgeMap[e.id] = {
+          type: EDGE_TYPE.SPLINE_CURVE,
+          id: e.id,
+          source: newNodeMap[e.getSourceNodeId()],
+          target: newNodeMap[e.getTargetNodeId()],
+          virtualEdgeId: pairId,
+          isVirtual: true,
+          index: idx
+        };
+      });
+    });
+
+    this._nodeMap = newNodeMap;
+    this._d3Graph.nodes = newD3Nodes;
+    this._edgeMap = newEdgeMap;
+    this._d3Graph.edges = newD3Edges;
+  }
+
+  getNodePosition = (node: Node): [number, number] => {
+    const d3Node = this._nodeMap[node.id];
+    if (d3Node) {
+      return [d3Node.x, d3Node.y];
+    }
+    // default value
+    return [0, 0];
+  };
+
+  getEdgePosition = (edge) => {
+    const d3Edge = this._edgeMap[edge.id];
+    if (d3Edge) {
+      if (!d3Edge.isVirtual) {
+        return {
+          type: EDGE_TYPE.LINE,
+          sourcePosition: [d3Edge.source.x, d3Edge.source.y],
+          targetPosition: [d3Edge.target.x, d3Edge.target.y],
+          controlPoints: []
+        };
+      }
+      // else, check the referenced virtual edge
+      const virtualEdge = this._edgeMap[d3Edge.virtualEdgeId];
+      const edgeCount = virtualEdge.edgeCount;
+      // get the position of source and target nodes
+      const sourcePosition = [virtualEdge.source.x, virtualEdge.source.y];
+      const targetPosition = [virtualEdge.target.x, virtualEdge.target.y];
+      // calculate a symmetric curve
+      const distance = Math.hypot(
+        sourcePosition[0] - targetPosition[0],
+        sourcePosition[1] - targetPosition[1]
+      );
+      const index = d3Edge.index;
+      // curve direction: inward vs. outward
+      const direction = index % 2 ? 1 : -1;
+      // if the number of the parallel edges is an even number => symmetric shape
+      // otherwise, the 0th node will be a staight line, and rest of them are symmetrical.
+      const symmetricShape = edgeCount % 2 === 0;
+      const offset =
+        Math.max(distance / 10, 5) *
+        (symmetricShape ? Math.floor(index / 2 + 1) : Math.ceil(index / 2));
+      const controlPoint = computeControlPoint(sourcePosition, targetPosition, direction, offset);
+      return {
+        type: EDGE_TYPE.SPLINE_CURVE,
+        sourcePosition,
+        targetPosition,
+        controlPoints: [controlPoint]
+      };
+    }
+    // default value
+    return {
+      type: EDGE_TYPE.LINE,
+      sourcePosition: [0, 0],
+      targetPosition: [0, 0],
+      controlPoints: []
+    };
+  };
+
+  lockNodePosition = (node, x, y) => {
+    const d3Node = this._nodeMap[node.id];
+    d3Node.x = x;
+    d3Node.y = y;
+    this._onLayoutChange();
+    this._onLayoutDone();
+  };
+}
+
+/**
+ * A helper function to compute the control point of a curve
+ * @param  {number[]} source  - the coordinates of source point, ex: [x, y, z]
+ * @param  {number[]} target  - the coordinates of target point, ex: [x, y, z]
+ * @param  {number} direction - the direction of the curve, 1 or -1
+ * @param  {number} offset    - offset from the midpoint
+ * @return {number[]}         - the coordinates of the control point
+ */
+function computeControlPoint(source, target, direction, offset) {
+  const midPoint = [(source[0] + target[0]) / 2, (source[1] + target[1]) / 2];
+  const dx = target[0] - source[0];
+  const dy = target[1] - source[1];
+  const normal = [dy, -dx];
+  const length = Math.sqrt(Math.pow(normal[0], 2.0) + Math.pow(normal[1], 2.0));
+  const normalized = [normal[0] / length, normal[1] / length];
+  return [
+    midPoint[0] + normalized[0] * offset * direction,
+    midPoint[1] + normalized[1] * offset * direction
+  ];
+}