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

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

@@ -3,6 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {GraphLayout, GraphLayoutProps} from '../../core/graph-layout';
+import type {Graph, NodeInterface, EdgeInterface} from '../../graph/graph';
 
 export type GPUForceLayoutOptions = GraphLayoutProps & {
   alpha?: number;
@@ -18,6 +19,7 @@ export type GPUForceLayoutOptions = GraphLayoutProps & {
  */
 export class GPUForceLayout extends GraphLayout<GPUForceLayoutOptions> {
   static defaultProps: Required<GPUForceLayoutOptions> = {
+    ...GraphLayout.defaultProps,
     alpha: 0.3,
     resumeAlpha: 0.1,
     nBodyStrength: -900,
@@ -27,40 +29,30 @@ export class GPUForceLayout extends GraphLayout<GPUForceLayoutOptions> {
   };
 
   protected readonly _name: string = 'GPU';
-  private _d3Graph: any;
-  private _nodeMap: any;
-  private _edgeMap: any;
-  private _graph: any;
+  private _d3Graph: {nodes: any[]; edges: any[]};
+  private _nodeMap: Map<string | number, any>;
+  private _edgeMap: Map<string | number, any>;
+  private _graph: Graph | null;
   private _worker: Worker | null = null;
-  private _callbacks: any;
 
   constructor(options: GPUForceLayoutOptions = {}) {
-    const _options = {
-      ...GPUForceLayout.defaultProps,
-      ...options
-    };
-
-    super(_options);
+    super(options, GPUForceLayout.defaultProps);
 
     this._name = 'GPU';
-    this._options = _options;
     // store graph and prepare internal data
     this._d3Graph = {nodes: [], edges: []};
-    this._nodeMap = {};
-    this._edgeMap = {};
-    this._callbacks = {
-      onLayoutChange: this._onLayoutChange,
-      onLayoutDone: this._onLayoutDone
-    };
+    this._nodeMap = new Map();
+    this._edgeMap = new Map();
+    this._graph = null;
   }
 
-  initializeGraph(graph) {
+  initializeGraph(graph: Graph) {
     this._graph = graph;
-    this._nodeMap = {};
-    this._edgeMap = {};
+    this._nodeMap = new Map();
+    this._edgeMap = new Map();
     // nodes
-    const d3Nodes = graph.getNodes().map((node) => {
-      const id = node.id;
+    const d3Nodes = Array.from(graph.getNodes(), (node) => {
+      const id = node.getId();
       const locked = node.getPropertyValue('locked') || false;
       const x = node.getPropertyValue('x') || 0;
       const y = node.getPropertyValue('y') || 0;
@@ -74,17 +66,18 @@ export class GPUForceLayout extends GraphLayout<GPUForceLayoutOptions> {
         collisionRadius,
         locked
       };
-      this._nodeMap[node.id] = d3Node;
+      this._nodeMap.set(id, d3Node);
       return d3Node;
     });
     // edges
-    const d3Edges = graph.getEdges().map((edge) => {
+    const d3Edges = Array.from(graph.getEdges(), (edge) => {
+      const id = edge.getId();
       const d3Edge = {
-        id: edge.id,
-        source: this._nodeMap[edge.getSourceNodeId()],
-        target: this._nodeMap[edge.getTargetNodeId()]
+        id,
+        source: this._nodeMap.get(edge.getSourceNodeId()),
+        target: this._nodeMap.get(edge.getTargetNodeId())
       };
-      this._edgeMap[edge.id] = d3Edge;
+      this._edgeMap.set(id, d3Edge);
       return d3Edge;
     });
     this._d3Graph = {
@@ -109,7 +102,7 @@ export class GPUForceLayout extends GraphLayout<GPUForceLayoutOptions> {
 
     this._worker = new Worker(new URL('./worker.js', import.meta.url).href);
     const {alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax, getCollisionRadius} =
-      this._options;
+      this.props;
     this._worker.postMessage({
       nodes: this._d3Graph.nodes,
       edges: this._d3Graph.edges,
@@ -152,18 +145,22 @@ export class GPUForceLayout extends GraphLayout<GPUForceLayoutOptions> {
   }
 
   // for steaming new data on the same graph
-  updateGraph(graph) {
-    if (this._graph.getGraphName() !== graph.getGraphName()) {
+  updateGraph(graph: Graph) {
+    const previousName = this._graph?.getGraphName?.();
+    const nextName = graph.getGraphName?.();
+    const isSameGraph =
+      (previousName && nextName && previousName === nextName) || this._graph === graph;
+    if (!isSameGraph) {
       // reset the maps
-      this._nodeMap = {};
-      this._edgeMap = {};
+      this._nodeMap = new Map();
+      this._edgeMap = new Map();
     }
     this._graph = graph;
     // update internal layout data
     // nodes
-    const newNodeMap = {};
-    const newD3Nodes = graph.getNodes().map((node) => {
-      const id = node.id;
+    const newNodeMap = new Map<string | number, any>();
+    const newD3Nodes = Array.from(graph.getNodes(), (node) => {
+      const id = node.getId();
       const locked = node.getPropertyValue('locked') || false;
       const x = node.getPropertyValue('x') || 0;
       const y = node.getPropertyValue('y') || 0;
@@ -171,68 +168,69 @@ export class GPUForceLayout extends GraphLayout<GPUForceLayoutOptions> {
       const fy = locked ? y : null;
       const collisionRadius = node.getPropertyValue('collisionRadius') || 0;
 
-      const oldD3Node = this._nodeMap[node.id];
+      const oldD3Node = this._nodeMap.get(id);
       const newD3Node = oldD3Node ? oldD3Node : {id, x, y, fx, fy, collisionRadius};
-      newNodeMap[node.id] = newD3Node;
+      newNodeMap.set(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 newEdgeMap = new Map<string | number, any>();
+    const newD3Edges = Array.from(graph.getEdges(), (edge) => {
+      const id = edge.getId();
+      const oldD3Edge = this._edgeMap.get(id);
       const newD3Edge = oldD3Edge || {
-        id: edge.id,
-        source: newNodeMap[edge.getSourceNodeId()],
-        target: newNodeMap[edge.getTargetNodeId()]
+        id,
+        source: newNodeMap.get(edge.getSourceNodeId()),
+        target: newNodeMap.get(edge.getTargetNodeId())
       };
-      newEdgeMap[edge.id] = newD3Edge;
+      newEdgeMap.set(id, newD3Edge);
       return newD3Edge;
     });
     this._edgeMap = newEdgeMap;
     this._d3Graph.edges = newD3Edges;
   }
 
-  updateD3Graph(graph) {
-    const existingNodes = this._graph.getNodes();
+  updateD3Graph(graph: {nodes: any[]; edges: any[]}): void {
+    const existingNodes = this._graph ? Array.from(this._graph.getNodes()) : [];
     // update internal layout data
     // nodes
-    const newNodeMap = {};
+    const newNodeMap = new Map<string | number, any>();
     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);
+      existingNode?.setDataProperty('locked', node.locked);
+      existingNode?.setDataProperty('x', node.x);
+      existingNode?.setDataProperty('y', node.y);
+      existingNode?.setDataProperty('collisionRadius', node.collisionRadius);
 
-      newNodeMap[node.id] = node;
+      newNodeMap.set(node.id, node);
       return node;
     });
     this._nodeMap = newNodeMap;
     this._d3Graph.nodes = newD3Nodes;
     // edges
-    const newEdgeMap = {};
+    const newEdgeMap = new Map<string | number, any>();
     const newD3Edges = graph.edges.map((edge) => {
-      newEdgeMap[edge.id] = edge;
+      newEdgeMap.set(edge.id, edge);
       return edge;
     });
-    this._graph.triggerUpdate();
+    this._graph?.triggerUpdate?.();
     this._edgeMap = newEdgeMap;
     this._d3Graph.edges = newD3Edges;
   }
 
-  getNodePosition = (node): [number, number] => {
-    const d3Node = this._nodeMap[node.id];
+  getNodePosition = (node: NodeInterface): [number, number] => {
+    const d3Node = this._nodeMap.get(node.getId());
     if (d3Node) {
       return [d3Node.x, d3Node.y];
     }
     return [0, 0];
   };
 
-  getEdgePosition = (edge) => {
-    const d3Edge = this._edgeMap[edge.id];
+  getEdgePosition = (edge: EdgeInterface) => {
+    const d3Edge = this._edgeMap.get(edge.getId());
     const sourcePosition = d3Edge && d3Edge.source;
     const targetPosition = d3Edge && d3Edge.target;
     if (d3Edge && sourcePosition && targetPosition) {
@@ -251,26 +249,30 @@ export class GPUForceLayout extends GraphLayout<GPUForceLayoutOptions> {
     };
   };
 
-  lockNodePosition = (node, x, y) => {
-    const d3Node = this._nodeMap[node.id];
+  lockNodePosition = (node: NodeInterface, x: number, y: number) => {
+    const d3Node = this._nodeMap.get(node.getId());
+    if (!d3Node) {
+      return;
+    }
     d3Node.x = x;
     d3Node.y = y;
     d3Node.fx = x;
     d3Node.fy = y;
-    this._callbacks.onLayoutChange();
-    this._callbacks.onLayoutDone();
+    this._onLayoutChange();
+    this._onLayoutDone();
   };
 
-  unlockNodePosition = (node) => {
-    const d3Node = this._nodeMap[node.id];
+  unlockNodePosition = (node: NodeInterface) => {
+    const d3Node = this._nodeMap.get(node.getId());
+    if (!d3Node) {
+      return;
+    }
     d3Node.fx = null;
     d3Node.fy = null;
   };
 
   protected override _updateBounds(): void {
-    const positions = Object.values(this._nodeMap ?? {}).map((node) =>
-      this._normalizePosition(node)
-    );
+    const positions = Array.from(this._nodeMap.values(), (node) => this._normalizePosition(node));
     this._bounds = this._calculateBounds(positions);
   }
 }

package/src/layouts/simple-layout.ts

@@ -3,44 +3,28 @@
 // Copyright (c) vis.gl contributors
 
 import {GraphLayout, GraphLayoutProps} from '../core/graph-layout';
-import {Node} from '../graph/node';
-import {Edge} from '../graph/edge';
-import {Graph} from '../graph/graph';
+import type {Graph, NodeInterface, EdgeInterface} from '../graph/graph';
 
 export type SimpleLayoutProps = GraphLayoutProps & {
-  /** The accessor lets the application supply the position ([x, y]) of each node.
-   * @example
-    ```js
-    <GraphGL
-      {...otherProps}
-      layout={
-        new SimpleLayout({
-          nodePositionAccessor: node => [
-            node.getPropertyValue('x'),
-            node.getPropertyValue('y'),
-          ]
-        })
-      }
-    />
-    ```
-  */
-  nodePositionAccessor?: (node: Node) => [number, number];
+  /** The accessor lets the application supply the position ([x, y]) of each node. */
+  nodePositionAccessor?: (node: NodeInterface) => [number, number];
 };
 
 /** A basic layout where the application controls positions of each node */
 export class SimpleLayout extends GraphLayout<SimpleLayoutProps> {
   static defaultProps: Required<SimpleLayoutProps> = {
+    ...GraphLayout.defaultProps,
     nodePositionAccessor: (node) =>
       [node.getPropertyValue('x'), node.getPropertyValue('y')] as [number, number]
   };
 
   protected readonly _name = 'SimpleLayout';
   protected _graph: Graph | null = null;
-  protected _nodeMap: Record<string, Node> = {};
-  protected _nodePositionMap: Record<string, [number, number] | null> = {};
+  protected _nodeMap: Map<string | number, NodeInterface> = new Map();
+  protected _nodePositionMap: Map<string | number, [number, number] | null> = new Map();
 
   constructor(options: SimpleLayoutProps = {}) {
-    super({...SimpleLayout.defaultProps, ...options});
+    super(options, SimpleLayout.defaultProps);
   }
 
   initializeGraph(graph: Graph): void {
@@ -63,36 +47,28 @@ export class SimpleLayout extends GraphLayout<SimpleLayoutProps> {
 
   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<Record<string, [number, number] | null>>(
-      (res, node) => {
-        res[node.getId()] = this._normalizePosition(
-          this._options.nodePositionAccessor(node)
-        );
-        return res;
-      },
-      {}
+    const nodes = Array.from(graph.getNodes());
+    this._nodeMap = new Map(nodes.map((node) => [node.getId(), node]));
+    this._nodePositionMap = new Map(
+      nodes.map((node) => [node.getId(), this._normalizePosition(this.props.nodePositionAccessor(node))])
     );
   }
 
   setNodePositionAccessor = (accessor) => {
-    (this._options as any).nodePositionAccessor = accessor;
+    (this.props as any).nodePositionAccessor = accessor;
   };
 
-  getNodePosition = (node: Node | null): [number, number] => {
+  getNodePosition = (node: NodeInterface | null): [number, number] => {
     if (!node) {
       return [0, 0] as [number, number];
     }
-    const position = this._nodePositionMap[node.getId()];
+    const position = this._nodePositionMap.get(node.getId());
     return position ?? [0, 0] as [number, number];
   };
 
-  getEdgePosition = (edge: Edge) => {
-    const sourceNode = this._nodeMap[edge.getSourceNodeId()];
-    const targetNode = this._nodeMap[edge.getTargetNodeId()];
+  getEdgePosition = (edge: EdgeInterface) => {
+    const sourceNode = this._nodeMap.get(edge.getSourceNodeId());
+    const targetNode = this._nodeMap.get(edge.getTargetNodeId());
     const sourcePos = sourceNode ? this.getNodePosition(sourceNode) : [0, 0];
     const targetPos = targetNode ? this.getNodePosition(targetNode) : [0, 0];
     return {
@@ -103,8 +79,8 @@ export class SimpleLayout extends GraphLayout<SimpleLayoutProps> {
     };
   };
 
-  lockNodePosition = (node, x, y) => {
-    this._nodePositionMap[node.getId()] = [x, y];
+  lockNodePosition = (node: NodeInterface, x: number, y: number) => {
+    this._nodePositionMap.set(node.getId(), [x, y]);
     this._onLayoutChange();
     this._onLayoutDone();
   };
@@ -117,7 +93,7 @@ export class SimpleLayout extends GraphLayout<SimpleLayoutProps> {
 
 
   protected override _updateBounds(): void {
-    const positions = Object.values(this._nodePositionMap).map((position) =>
+    const positions = Array.from(this._nodePositionMap.values(), (position) =>
       this._normalizePosition(position)
     );
     this._bounds = this._calculateBounds(positions);

package/src/loaders/{create-graph.ts → deprecated/create-graph.ts.disabled}

@@ -2,18 +2,18 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Edge} from '../graph/edge';
-import {Node} from '../graph/node';
-import {Graph} from '../graph/graph';
+import {Edge} from '../../graph/edge';
+import {Node} from '../../graph/node';
+import {ClassicGraph} from '../../graph/classic-graph';
 
 /**
- * @deprecated Use `new Graph(name, nodes, edges)`
+ * @deprecated Use `new ClassicGraph(name, nodes, edges)`
  * Create a graph from a list of Nodes and edges
  */
-export function createGraph(props: {name; nodes; edges; nodeParser; edgeParser}) {
+export function createGraph(props: {name; nodes; edges; nodeParser; edgeParser}): ClassicGraph {
   const {name, nodes, edges, nodeParser, edgeParser} = props;
   // create a new empty graph
-  const graph = new Graph();
+  const graph = new ClassicGraph();
 
   const graphName = name || Date.now();
   graph.setGraphName(graphName);

package/src/loaders/deprecated/json-classic-graph-loader.ts.disabled

@@ -0,0 +1,33 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {createGraph} from './create-graph';
+import {basicNodeParser} from '../parsers/node-parsers';
+import {basicEdgeParser} from '../parsers/edge-parsers';
+import {error} from '../../utils/log';
+import type {ClassicGraph} from '../../graph/classic-graph';
+
+export type JSONClassicGraphLoaderOptions = {
+  json: {
+    name?: string;
+    nodes?: unknown[] | null;
+    edges?: unknown[] | null;
+  };
+  nodeParser?: typeof basicNodeParser;
+  edgeParser?: typeof basicEdgeParser;
+};
+
+export function JSONClassicGraphLoader({
+  json,
+  nodeParser = basicNodeParser,
+  edgeParser = basicEdgeParser
+}: JSONClassicGraphLoaderOptions): ClassicGraph | null {
+  const {name = 'default', nodes, edges = []} = json ?? {};
+  if (!Array.isArray(nodes)) {
+    error('Invalid graph: nodes is missing.');
+    return null;
+  }
+
+  return createGraph({name, nodes, edges, nodeParser, edgeParser});
+}

package/src/loaders/{simple-json-graph-loader.ts → deprecated/simple-json-graph-loader.ts.disabled}

@@ -3,9 +3,9 @@
 // Copyright (c) vis.gl contributors
 
 import {createGraph} from './create-graph';
-import {error} from '../utils/log';
-import {basicNodeParser} from './node-parsers';
-import {basicEdgeParser} from './edge-parsers';
+import {error} from '../../utils/log';
+import {basicNodeParser} from '../parsers/node-parsers';
+import {basicEdgeParser} from '../parsers/edge-parsers';
 
 /** @deprecated Use loadSimpleJSONGraph */
 export const JSONLoader = ({json, nodeParser, edgeParser}) =>

package/src/loaders/{table-graph-loader.ts → deprecated/table-graph-loader.ts.disabled}

@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {NodeOptions} from '../graph/node';
-import type {EdgeOptions} from '../graph/edge';
-import {Edge} from '../graph/edge';
-import {Node} from '../graph/node';
-import {Graph} from '../graph/graph';
+import type {NodeOptions} from '../../graph/node';
+import type {EdgeOptions} from '../../graph/edge';
+import {Edge} from '../../graph/edge';
+import {Node} from '../../graph/node';
+import {ClassicGraph} from '../../graph/classic-graph';
 
-import {error} from '../utils/log';
+import {error} from '../../utils/log';
 
 export type ParseGraphOptions = {
   nodeIdField?: string;
@@ -42,7 +42,7 @@ const defaultParseGraphOptions = {
 export function tableGraphLoader(
   tables: {nodes: any[]; edges: any[]},
   options?: ParseGraphOptions
-): Graph {
+): ClassicGraph {
   options = {...defaultParseGraphOptions, ...options};
 
   const {nodes, edges} = tables;
@@ -95,7 +95,7 @@ export function tableGraphLoader(
 
   // create a new empty graph
   const name = 'loaded';
-  const graph = new Graph({name, nodes: glNodes, edges: glEdges});
+  const graph = new ClassicGraph({name, nodes: glNodes, edges: glEdges});
   return graph;
 }