@deck.gl-community/graph-layers 9.0.0

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

@@ -0,0 +1,249 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {BaseLayout} from '../../core/base-layout';
+
+import {EDGE_TYPE} from '../../core/constants';
+
+const defaultOptions = {
+  alpha: 0.3,
+  resumeAlpha: 0.1,
+  nBodyStrength: -900,
+  nBodyDistanceMin: 100,
+  nBodyDistanceMax: 400,
+  getCollisionRadius: 0
+};
+
+// TODO: this layout should be updated with the organizational and logic improvements made in d3-force
+export class GPUForceLayout extends BaseLayout {
+  protected readonly _name: string = 'GPU';
+  private _d3Graph: any;
+  private _nodeMap: any;
+  private _edgeMap: any;
+  private _graph: any;
+  private _worker: Worker;
+  private _callbacks: any;
+  constructor(options) {
+    super(options);
+    this._name = 'GPU';
+    this._options = {
+      ...defaultOptions,
+      ...options
+    };
+    // store graph and prepare internal data
+    this._d3Graph = {nodes: [], edges: []};
+    this._nodeMap = {};
+    this._edgeMap = {};
+  }
+
+  initializeGraph(graph) {
+    this._graph = graph;
+    this._nodeMap = {};
+    this._edgeMap = {};
+    // nodes
+    const d3Nodes = graph.getNodes().map((node) => {
+      const id = node.id;
+      const locked = node.getPropertyValue('locked') || false;
+      const x = node.getPropertyValue('x') || 0;
+      const y = node.getPropertyValue('y') || 0;
+      const collisionRadius = node.getPropertyValue('collisionRadius') || 0;
+      const d3Node = {
+        id,
+        x,
+        y,
+        fx: locked ? x : null,
+        fy: locked ? y : null,
+        collisionRadius,
+        locked
+      };
+      this._nodeMap[node.id] = d3Node;
+      return d3Node;
+    });
+    // edges
+    const d3Edges = graph.getEdges().map((edge) => {
+      const d3Edge = {
+        id: edge.id,
+        source: this._nodeMap[edge.getSourceNodeId()],
+        target: this._nodeMap[edge.getTargetNodeId()]
+      };
+      this._edgeMap[edge.id] = d3Edge;
+      return d3Edge;
+    });
+    this._d3Graph = {
+      nodes: d3Nodes,
+      edges: d3Edges
+    };
+  }
+
+  start() {
+    this._engageWorker();
+  }
+
+  update() {
+    this._engageWorker();
+  }
+
+  _engageWorker() {
+    // prevent multiple start
+    if (this._worker) {
+      this._worker.terminate();
+    }
+
+    this._worker = new Worker(new URL('./worker.js', import.meta.url).href);
+    const {alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax, getCollisionRadius} = this
+      ._options as any;
+    this._worker.postMessage({
+      nodes: this._d3Graph.nodes,
+      edges: this._d3Graph.edges,
+      options: {
+        alpha,
+        nBodyStrength,
+        nBodyDistanceMin,
+        nBodyDistanceMax,
+        getCollisionRadius
+      }
+    });
+    this._worker.onmessage = (event) => {
+      switch (event.data.type) {
+        case 'tick':
+          this.ticked(event.data);
+          break;
+        case 'end':
+          this.ended(event.data);
+          break;
+        default:
+          break;
+      }
+    };
+  }
+  ticked(data) {}
+  ended(data) {
+    const {nodes, edges} = data;
+    this.updateD3Graph({nodes, edges});
+    this._onLayoutChange();
+    this._onLayoutDone();
+  }
+  resume() {
+    throw new Error('Resume unavailable');
+  }
+  stop() {
+    this._worker.terminate();
+  }
+
+  // for steaming new data on the same graph
+  updateGraph(graph) {
+    if (this._graph.getGraphName() !== graph.getGraphName()) {
+      // reset the maps
+      this._nodeMap = {};
+      this._edgeMap = {};
+    }
+    this._graph = graph;
+    // update internal layout data
+    // nodes
+    const newNodeMap = {};
+    const newD3Nodes = graph.getNodes().map((node) => {
+      const id = node.id;
+      const locked = node.getPropertyValue('locked') || false;
+      const x = node.getPropertyValue('x') || 0;
+      const y = node.getPropertyValue('y') || 0;
+      const fx = locked ? x : null;
+      const fy = locked ? y : null;
+      const collisionRadius = node.getPropertyValue('collisionRadius') || 0;
+
+      const oldD3Node = this._nodeMap[node.id];
+      const newD3Node = oldD3Node ? oldD3Node : {id, x, y, fx, fy, collisionRadius};
+      newNodeMap[node.id] = newD3Node;
+      return newD3Node;
+    });
+    this._nodeMap = newNodeMap;
+    this._d3Graph.nodes = newD3Nodes;
+    // edges
+    const newEdgeMap = {};
+    const newD3Edges = graph.getEdges().map((edge) => {
+      const oldD3Edge = this._edgeMap[edge.id];
+      const newD3Edge = oldD3Edge || {
+        id: edge.id,
+        source: newNodeMap[edge.getSourceNodeId()],
+        target: newNodeMap[edge.getTargetNodeId()]
+      };
+      newEdgeMap[edge.id] = newD3Edge;
+      return newD3Edge;
+    });
+    this._edgeMap = newEdgeMap;
+    this._d3Graph.edges = newD3Edges;
+  }
+
+  updateD3Graph(graph) {
+    const existingNodes = this._graph.getNodes();
+    // update internal layout data
+    // nodes
+    const newNodeMap = {};
+    const newD3Nodes = graph.nodes.map((node) => {
+      // Update existing _graph with the new values
+      const existingNode = existingNodes.find((n) => n.getId() === node.id);
+      existingNode.setDataProperty('locked', node.locked);
+      existingNode.setDataProperty('x', node.x);
+      existingNode.setDataProperty('y', node.y);
+      existingNode.setDataProperty('collisionRadius', node.collisionRadius);
+
+      newNodeMap[node.id] = node;
+      return node;
+    });
+    this._nodeMap = newNodeMap;
+    this._d3Graph.nodes = newD3Nodes;
+    // edges
+    const newEdgeMap = {};
+    const newD3Edges = graph.edges.map((edge) => {
+      newEdgeMap[edge.id] = edge;
+      return edge;
+    });
+    this._graph.triggerUpdate();
+    this._edgeMap = newEdgeMap;
+    this._d3Graph.edges = newD3Edges;
+  }
+
+  getNodePosition = (node): [number, number] => {
+    const d3Node = this._nodeMap[node.id];
+    if (d3Node) {
+      return [d3Node.x, d3Node.y];
+    }
+    return [0, 0];
+  };
+
+  getEdgePosition = (edge) => {
+    const d3Edge = this._edgeMap[edge.id];
+    const sourcePosition = d3Edge && d3Edge.source;
+    const targetPosition = d3Edge && d3Edge.target;
+    if (d3Edge && sourcePosition && targetPosition) {
+      return {
+        type: EDGE_TYPE.LINE,
+        sourcePosition: [sourcePosition.x, sourcePosition.y],
+        targetPosition: [targetPosition.x, targetPosition.y],
+        controlPoints: []
+      };
+    }
+    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;
+    d3Node.fx = x;
+    d3Node.fy = y;
+    this._callbacks.onLayoutChange();
+    this._callbacks.onLayoutDone();
+  };
+
+  unlockNodePosition = (node) => {
+    const d3Node = this._nodeMap[node.id];
+    d3Node.fx = null;
+    d3Node.fy = null;
+  };
+}

package/src/layouts/gpu-force/worker.ts

@@ -0,0 +1,137 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+/* global importScripts GPU*/
+
+importScripts('https://cdn.jsdelivr.net/npm/gpu.js@latest/dist/gpu-browser.js');
+
+onmessage = function (event) {
+  const {nodes: sourceNodes, edges: sourceEdges} = event.data;
+  const {nBodyStrength, nBodyDistanceMin, nBodyDistanceMax, getCollisionRadius} =
+    event.data.options;
+  // FIXME remove cpu mode
+  // @ts-expect-error TODO
+  const gpu = new GPU.GPU({
+    mode: 'cpu'
+  });
+  function getDistance(node1, node2) {
+    const dx = node1[1] - node2[1];
+    const dy = node1[2] - node2[2];
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+  function isCollision(node1, node2, radius) {
+    return getDistance(node1, node2) < radius;
+  }
+
+  function forceCollide(nodes, currentNode, nodesSize, radius) {
+    let collisons = true;
+    while (collisons) {
+      collisons = false;
+      for (let i = 0; i < nodesSize; i++) {
+        while (nodes[i][0] !== currentNode[0] && isCollision(currentNode, nodes[i], radius)) {
+          collisons = true;
+          const xMove = currentNode[1] + Math.random() - 0.5;
+          currentNode[1] = currentNode[1] + xMove;
+          const yMove = currentNode[2] + Math.random() - 0.5;
+          currentNode[2] = currentNode[2] + yMove;
+        }
+      }
+    }
+    return [currentNode[1], currentNode[2]];
+  }
+  // FIXME correct lint errors
+  // eslint-disable-next-line max-params
+  function forceLink(nodes, edges, currentNode, nodesSize, edgesSize, radius) {
+    let x1 = currentNode[1];
+    let y1 = currentNode[2];
+    for (let i = 0; i < edgesSize; i++) {
+      const edge = edges[i];
+      if (edge[0] === currentNode[0] || edge[1] === currentNode[0]) {
+        const otherNodeId = edge[0] === currentNode[0] ? edge[1] : edge[0];
+        // FIXME: deal with the fact that GPUjs doesn't like array.find or undefined
+        for (let j = 0; j < nodesSize; j++) {
+          // eslint-disable-next-line max-depth
+          if (nodes[i][0] === otherNodeId) {
+            const otherNode = nodes[j];
+            const x2 = otherNode[1];
+            const y2 = otherNode[2];
+            const dx = x1 - x2;
+            const dy = y1 - y2;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const force = 1;
+            // eslint-disable-next-line max-depth
+            if (distance > radius + force) {
+              x1 = dx > 0 ? x1 - force / 2 : x1 + force / 2;
+              y1 = dy > 0 ? y1 - force / 2 : y1 + force / 2;
+            }
+          }
+        }
+      }
+    }
+    return [x1, y1];
+  }
+
+  gpu.addFunction(forceCollide);
+  gpu.addFunction(forceLink);
+  gpu.addFunction(isCollision);
+  gpu.addFunction(getDistance);
+  const kernel = gpu.createKernel(
+    function (kernelNodes, kernelEdges) {
+      const currentNode = kernelNodes[this.thread.x];
+      forceCollide(
+        kernelNodes,
+        currentNode,
+        this.constants.nodesSize,
+        this.constants.collisionRadius
+      );
+      const forceLinkResult = forceLink(
+        kernelNodes,
+        kernelEdges,
+        currentNode,
+        this.constants.nodesSize,
+        this.constants.edgesSize,
+        this.constants.collisionRadius
+      );
+      currentNode[1] = forceLinkResult[0];
+      currentNode[2] = forceLinkResult[1];
+      return [currentNode[1], currentNode[2]];
+    },
+    {
+      constants: {
+        nodesSize: sourceNodes.length,
+        edgesSize: sourceEdges.length,
+        collisionRadius: getCollisionRadius,
+        nBodyStrength,
+        nBodyDistanceMin,
+        nBodyDistanceMax
+      },
+      output: [sourceNodes.length]
+    }
+  );
+  const tempNodes = sourceNodes.map((node) => [node.id, node.x, node.y, node.locked ? 1 : 0]);
+  const tempEdges = sourceEdges.map((edge) => [edge.source.id, edge.target.id]);
+  kernel(tempNodes, tempEdges);
+  const newNodes = sourceNodes.map((node, index) => {
+    const updatedNode = tempNodes.find((n) => n[0] === node.id);
+    return {
+      ...node,
+      x: updatedNode[1],
+      y: updatedNode[2]
+    };
+  });
+  const newEdges = sourceEdges.map((edge) => {
+    return {
+      ...edge,
+      source: newNodes.find((node) => node.id === edge.source.id),
+      target: newNodes.find((node) => node.id === edge.target.id)
+    };
+  });
+  postMessage({
+    type: 'end',
+    nodes: newNodes,
+    edges: newEdges
+  });
+  // FIXME cleanup per gpu documentation
+  this.self.close();
+};

package/src/layouts/simple-layout/simple-layout.ts

@@ -0,0 +1,87 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {BaseLayout, BaseLayoutOptions} from '../../core/base-layout';
+import {Node} from '../../core/node';
+import {EDGE_TYPE} from '../../core/constants';
+import {Graph} from '../../core/graph';
+
+type AccessorVec2 = (node: Node) => [number, number];
+
+interface SimpleLayoutOptions extends BaseLayoutOptions {
+  nodePositionAccessor?: AccessorVec2;
+}
+
+const defaultOptions: Required<SimpleLayoutOptions> = {
+  nodePositionAccessor: (node) =>
+    [node.getPropertyValue('x'), node.getPropertyValue('y')] as [number, number]
+};
+
+export class SimpleLayout extends BaseLayout {
+  protected readonly _name = 'SimpleLayout';
+  protected _graph: Graph | null = null;
+  protected _nodeMap: Record<string, Node> = {};
+  protected _nodePositionMap: Record<string, AccessorVec2> = {};
+
+  constructor(options = {}) {
+    super({...defaultOptions, ...options});
+  }
+
+  initializeGraph(graph: Graph): void {
+    this.updateGraph(graph);
+  }
+
+  _notifyLayoutComplete(): void {
+    this._onLayoutStart();
+    this._onLayoutChange();
+    this._onLayoutDone();
+  }
+
+  start(): void {
+    this._notifyLayoutComplete();
+  }
+
+  update(): void {
+    this._notifyLayoutComplete();
+  }
+
+  resume(): void {
+    this._notifyLayoutComplete();
+  }
+
+  updateGraph(graph: Graph): void {
+    this._graph = graph;
+    this._nodeMap = graph.getNodes().reduce((res, node) => {
+      res[node.getId()] = node;
+      return res;
+    }, {});
+    this._nodePositionMap = graph.getNodes().reduce((res, node) => {
+      res[node.getId()] = (this._options as any).nodePositionAccessor(node);
+      return res;
+    }, {});
+  }
+
+  setNodePositionAccessor = (accessor) => {
+    (this._options as any).nodePositionAccessor = accessor;
+  };
+
+  getNodePosition = (node) => this._nodePositionMap[node.getId()] as any;
+
+  getEdgePosition = (edge) => {
+    const sourcePos = this._nodePositionMap[edge.getSourceNodeId()];
+    const targetPos = this._nodePositionMap[edge.getTargetNodeId()];
+    return {
+      type: EDGE_TYPE.LINE,
+      sourcePosition: sourcePos,
+      targetPosition: targetPos,
+      controlPoints: []
+    } as any;
+  };
+
+  lockNodePosition = (node, x, y) => {
+    this._nodePositionMap[node.getId()] = [x, y] as any;
+    this._onLayoutChange();
+    this._onLayoutDone();
+  };
+}

package/src/loaders/edge-parsers.ts

@@ -0,0 +1,21 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {log} from '../utils/log';
+
+export function basicEdgeParser(edge) {
+  const {id, directed, sourceId, targetId} = edge;
+
+  if (sourceId === undefined || targetId === undefined) {
+    log.error('Invalid edge: sourceId or targetId is missing.')();
+    return null;
+  }
+
+  return {
+    id,
+    directed: directed || false,
+    sourceId,
+    targetId
+  };
+}

package/src/loaders/json-loader.ts

@@ -0,0 +1,19 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {createGraph} from '../utils/create-graph';
+import {basicNodeParser} from './node-parsers';
+import {basicEdgeParser} from './edge-parsers';
+import {log} from '../utils/log';
+
+export const JSONLoader = ({json, nodeParser = basicNodeParser, edgeParser = basicEdgeParser}) => {
+  const {name = 'default', nodes, edges} = json;
+  if (!nodes) {
+    log.error('Invalid graph: nodes is missing.')();
+    return null;
+  }
+
+  const graph = createGraph({name, nodes, edges, nodeParser, edgeParser});
+  return graph;
+};

package/src/loaders/node-parsers.ts

@@ -0,0 +1,13 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {log} from '../utils/log';
+
+export function basicNodeParser(node) {
+  if (node.id === undefined) {
+    log.error('Invalid node: id is missing.')();
+    return null;
+  }
+  return {id: node.id};
+}