chore(graph): cleanup of graph-layers module (visgl#184)

docs/modules/graph-layers/api-reference/layouts/custom-layout.md

@@ -3,9 +3,9 @@
 Here's the method you will likely to implement when creating your own custom layout:
 
 ```js
-import {BaseLayout} from '@deck.gl-community/graph-layers';
+import {GraphLayout} from '@deck.gl-community/graph-layers';
 
-export default class MyLayout extends BaseLayout {
+export default class MyLayout extends GraphLayout {
   // initialize the layout
   constructor(options) {}
   // first time to pass the graph data into this layout
@@ -71,14 +71,14 @@ In the constructor, you can initialize some internal object you'll need for the
 The most important part is to create a 'map' to keep the position of nodes.
 
 ```js
-export default class RandomLayout extends BaseLayout {
+export default class RandomLayout extends GraphLayout {
   static defaultOptions = {
     viewportWidth: 1000,
     viewportHeight: 1000
   };
 
   constructor(options) {
-    // init BaseLayout
+    // init GraphLayout
     super(options);
     // give a name to this layout
     this._name = 'RandomLayout';
@@ -184,9 +184,9 @@ getEdgePosition = (edge) => {
 ### Full source code
 
 ```js
-import {BaseLayout} from '@deck.gl-community/graph-layers';
+import {GraphLayout} from '@deck.gl-community/graph-layers';
 
-export default class RandomLayout extends BaseLayout {
+export default class RandomLayout extends GraphLayout {
   constructor(options) {
     super(options);
     this._name = 'RandomLayout';

examples/graph-layers/graph-viewer-legacy/react-graph-layers/graph-gl.tsx

@@ -6,7 +6,7 @@ import React, {useCallback, useEffect, useLayoutEffect, useMemo, useState} from
 import PropTypes from 'prop-types';
 import DeckGL from '@deck.gl/react';
 import {OrthographicView} from '@deck.gl/core';
-import {BaseLayout, Graph, GraphLayer, log, SimpleLayout} from '@deck.gl-community/graph-layers';
+import {GraphLayout, Graph, GraphLayer, log, SimpleLayout} from '@deck.gl-community/graph-layers';
 import {PositionedViewControl} from '@deck.gl-community/react';
 import {ViewControlWidget} from '@deck.gl-community/graph-layers';
 import '@deck.gl/widgets/stylesheet.css';
@@ -70,7 +70,7 @@ export const GraphGL = ({
     log.error('Invalid graph data class')();
     return null;
   }
-  if (!(layout instanceof BaseLayout)) {
+  if (!(layout instanceof GraphLayout)) {
     log.error('Invalid layout class')();
     return null;
   }

examples/graph-layers/graph-viewer-legacy/react-graph-layers/use-graph-engine.tsx

@@ -3,9 +3,9 @@
 // Copyright (c) vis.gl contributors
 
 import {useLayoutEffect, useRef, useState} from 'react';
-import {BaseLayout, Graph, GraphEngine} from '@deck.gl-community/graph-layers';
+import {GraphLayout, Graph, GraphEngine} from '@deck.gl-community/graph-layers';
 
-export const useGraphEngine = (graph: Graph, layout: BaseLayout): GraphEngine => {
+export const useGraphEngine = (graph: Graph, layout: GraphLayout): GraphEngine => {
   const [engine, setEngine] = useState(new GraphEngine(graph, layout));
   const isFirstMount = useRef(true);
 

examples/graph-layers/graph-viewer/app.tsx

@@ -9,7 +9,7 @@ import DeckGL from '@deck.gl/react';
 import {PositionedViewControl} from '@deck.gl-community/react';
 
 import {OrthographicView} from '@deck.gl/core';
-import {GraphEngine, GraphLayer, Graph, log, BaseLayout, SimpleLayout, D3ForceLayout, JSONLoader, NODE_TYPE} from '@deck.gl-community/graph-layers';
+import {GraphEngine, GraphLayer, Graph, log, GraphLayout, SimpleLayout, D3ForceLayout, JSONLoader, NODE_TYPE} from '@deck.gl-community/graph-layers';
 
 // import {ViewControlWidget} from '@deck.gl-community/graph-layers';
 import '@deck.gl/widgets/stylesheet.css';

examples/graph-layers/graph-viewer/layouts/hive-plot-layout.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout, EDGE_TYPE} from '../../src';
+import {GraphLayout, EDGE_TYPE} from '../../src';
 
 const defaultOptions = {
   innerRadius: 100,
@@ -54,7 +54,7 @@ const computeControlPoint = ({
   ];
 };
 
-export default class HivePlot extends BaseLayout {
+export default class HivePlot extends GraphLayout {
   constructor(options) {
     super(options);
     this._name = 'HivePlot';

examples/graph-layers/graph-viewer/layouts/multi-graph-layout.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout, EDGE_TYPE} from '../../src';
+import {GraphLayout, EDGE_TYPE} from '../../src';
 import * as d3 from 'd3-force';
 
 const defaultOptions = {
@@ -33,7 +33,7 @@ function computeControlPoint(source, target, direction, offset) {
   ];
 }
 
-export default class ForceMultiGraphLayout extends BaseLayout {
+export default class ForceMultiGraphLayout extends GraphLayout {
   constructor(options) {
     super(options);
     this._name = 'ForceMultiGraphLayout';

examples/graph-layers/graph-viewer/layouts/radial-layout.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout, EDGE_TYPE} from '../../src';
+import {GraphLayout, EDGE_TYPE} from '../../src';
 
 const defaultOptions = {
   radius: 500,
@@ -59,7 +59,7 @@ const getPath = (node, targetId, path) => {
   return false;
 };
 
-export default class RadialLayout extends BaseLayout {
+export default class RadialLayout extends GraphLayout {
   constructor(options) {
     super(options);
     this._name = 'RadialLayout';

examples/playground/json-examples/graph-layer.json

@@ -0,0 +1,40 @@
+{
+  "description": "@deck.gl-community/graph-layers JSON bindings",
+  "websiteUrl": "https://deck.gl-community/#/examples/playground",
+  "initialViewState": {
+    "longitude": -74,
+    "latitude": 40.7,
+    "zoom": 11,
+    "maxZoom": 16,
+    "pitch": 0,
+    "bearing": 0
+  },
+  "views": [
+    {
+      "@@type": "OrthographicView",
+      "controller": true
+    }
+  ],
+  "layers": [
+    {
+      "@@type": "GraphLayer",
+      "data": "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json",
+      "engine": {
+        "@@type": "GraphEngine",
+        "graph": {},
+        "layout": {
+          "@@type": "SimpleLayout"
+        }
+      },
+      "radiusScale": 30,
+      "radiusMinPixels": 0.25,
+      "getPosition": "@@=-",
+      "getFillColor": [
+        0,
+        128,
+        255
+      ],
+      "getRadius": 1
+    }
+  ]
+}

examples/playground/json-examples/index.js

@@ -1,5 +1,6 @@
 
 import tileSource from './tile-source.json';
+import graphLayer from './graph-layer.json';
 
 import heatmap from './3d-heatmap.json';
 import heatmapMinimap from './3d-heatmap-minimap.json';
@@ -18,6 +19,7 @@ import dotText from './dot-text.json';
 
 export default {
   // WEBSITE EXAMPLES AS JSON PAYLOADS
+  'Graph (GraphLayer)': graphLayer,
   'website/Vector Tiles (TileSourceLayer)': tileSource,
   'website/3D Heatmap (HexagonLayer)': heatmap,
   'website/3D Heatmap (wth Minimap)': heatmapMinimap,

examples/playground/src/app.tsx

@@ -105,8 +105,8 @@ export class App extends Component {
           initialViewState: {
             ...initialViewState,
             // Tells deck.gl to animate the camera move to the new tileset
-            transitionDuration: 4000,
-            transitionInterpolator: new FlyToInterpolator()
+            // transitionDuration: 4000,
+            // transitionInterpolator: new FlyToInterpolator()
           }
         });
       }

examples/playground/src/json-configuration.ts

@@ -50,9 +50,9 @@ export const JSON_CONFIGURATION = {
     ...MeshLayers,
 
     // community layer modules
-    CommunityLayers,
-    EditableLayers,
-    GraphLayers,
+    ...CommunityLayers,
+    ...EditableLayers,
+    ...GraphLayers,
     // ArrowLayers,
   },
 

modules/graph-layers/src/core/graph-engine.ts

@@ -2,23 +2,43 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout} from './base-layout';
+import type {Node} from '../graph/node';
+import {Edge} from '../graph/edge';
+import {Graph} from '../graph/graph';
+import {GraphLayout} from './graph-layout';
 import {Cache} from './cache';
-import {Edge} from './edge';
-import {Graph} from './graph';
 
-// Graph engine controls the graph data and layout calculation
+export type GraphEngineProps = {
+  graph: Graph;
+  layout: GraphLayout;
+};
+
+/** Graph engine controls the graph data and layout calculation */
 export class GraphEngine extends EventTarget {
+  props: Readonly<Required<GraphEngineProps>>;
+
   private readonly _graph: Graph;
-  private readonly _layout: BaseLayout;
+  private readonly _layout: GraphLayout;
   private readonly _cache = new Cache<'nodes' | 'edges', Node[] | Edge[]>();
   private _layoutDirty = false;
   private _transactionInProgress = false;
 
-  constructor(graph: Graph, layout: BaseLayout) {
+  constructor(props: GraphEngineProps);
+  /** @deprecated Use props constructor: new GraphEngine(props) */
+  constructor(graph: Graph, layout: GraphLayout);
+
+  constructor(props: GraphEngineProps | Graph, layout?: GraphLayout) {
     super();
-    this._graph = graph;
-    this._layout = layout;
+    if (props instanceof Graph) {
+      props = {
+        graph: props,
+        layout
+      };
+    }
+
+    this.props = props;
+    this._graph = props.graph;
+    this._layout = props.layout;
   }
 
   /** Getters */
@@ -39,9 +59,9 @@ export class GraphEngine extends EventTarget {
     return this._cache.get('edges') as Edge[];
   };
 
-  getNodePosition = (node) => this._layout.getNodePosition(node);
+  getNodePosition = (node: Node) => this._layout.getNodePosition(node);
 
-  getEdgePosition = (edge) => this._layout.getEdgePosition(edge);
+  getEdgePosition = (edge: Edge) => this._layout.getEdgePosition(edge);
 
   getGraphVersion = () => this._graph.version;