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

package/src/layouts/d3-force/d3-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';
 import {log} from '../../utils/log';
 
 export type D3ForceLayoutOptions = GraphLayoutProps & {
@@ -15,39 +16,38 @@ export type D3ForceLayoutOptions = GraphLayoutProps & {
 };
 
 export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
-  static defaultProps: Required<D3ForceLayoutOptions> = {
+  static defaultProps = {
+    ...GraphLayout.defaultProps,
     alpha: 0.3,
     resumeAlpha: 0.1,
     nBodyStrength: -900,
     nBodyDistanceMin: 100,
     nBodyDistanceMax: 400,
     getCollisionRadius: 0
-  };
+  } as const satisfies Readonly<Required<D3ForceLayoutOptions>>;
 
   protected readonly _name = 'D3';
-  private _positionsByNodeId = new Map();
-  private _graph: any;
-  private _worker: any;
-
-  constructor(options?: D3ForceLayoutOptions) {
-    super(options);
+  private _positionsByNodeId = new Map<string | number, any>();
+  private _graph: Graph | null = null;
+  private _worker: Worker | null = null;
 
-    this._options = {
-      ...D3ForceLayout.defaultProps,
-      ...options
-    };
+  constructor(props?: D3ForceLayoutOptions) {
+    super(props, D3ForceLayout.defaultProps);
   }
 
-  initializeGraph(graph) {
+  initializeGraph(graph: Graph) {
     this._graph = graph;
   }
 
   // for streaming new data on the same graph
-  updateGraph(graph) {
+  updateGraph(graph: Graph) {
     this._graph = graph;
 
     this._positionsByNodeId = new Map(
-      this._graph.getNodes().map((node) => [node.id, this._positionsByNodeId.get(node.id)])
+      Array.from(this._graph.getNodes(), (node) => {
+        const id = node.getId();
+        return [id, this._positionsByNodeId.get(id)];
+      })
     );
   }
 
@@ -69,17 +69,30 @@ export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
 
     this._worker = new Worker(new URL('./worker.js', import.meta.url).href);
 
+    if (!this._graph) {
+      return;
+    }
+
+    const options = {...this.props};
+    delete options.onLayoutStart;
+    delete options.onLayoutChange;
+    delete options.onLayoutDone;
+    delete options.onLayoutError;
+
     this._worker.postMessage({
-      nodes: this._graph.getNodes().map((node) => ({
-        id: node.id,
-        ...this._positionsByNodeId.get(node.id)
-      })),
-      edges: this._graph.getEdges().map((edge) => ({
-        id: edge.id,
+      nodes: Array.from(this._graph.getNodes(), (node) => {
+        const id = node.getId();
+        return {
+          id,
+          ...this._positionsByNodeId.get(id)
+        };
+      }),
+      edges: Array.from(this._graph.getEdges(), (edge) => ({
+        id: edge.getId(),
         source: edge.getSourceNodeId(),
         target: edge.getTargetNodeId()
       })),
-      options: this._options
+      options
     });
 
     this._worker.onmessage = (event) => {
@@ -112,7 +125,11 @@ export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
     }
   }
 
-  getEdgePosition = (edge) => {
+  getEdgePosition = (edge: EdgeInterface) => {
+    if (!this._graph) {
+      return null;
+    }
+
     const sourceNode = this._graph.findNode(edge.getSourceNodeId());
     const targetNode = this._graph.findNode(edge.getTargetNodeId());
     if (!sourceNode || !targetNode) {
@@ -134,12 +151,12 @@ export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
     };
   };
 
-  getNodePosition = (node) => {
+  getNodePosition = (node: NodeInterface | null) => {
     if (!node) {
       return null;
     }
 
-    const d3Node = this._positionsByNodeId.get(node.id);
+    const d3Node = this._positionsByNodeId.get(node.getId());
     if (d3Node) {
       return d3Node.coordinates;
     }
@@ -147,9 +164,10 @@ export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
     return null;
   };
 
-  lockNodePosition = (node, x, y) => {
-    const d3Node = this._positionsByNodeId.get(node.id);
-    this._positionsByNodeId.set(node.id, {
+  lockNodePosition = (node: NodeInterface, x: number, y: number) => {
+    const id = node.getId();
+    const d3Node = this._positionsByNodeId.get(id);
+    this._positionsByNodeId.set(id, {
       ...d3Node,
       x,
       y,
@@ -161,8 +179,12 @@ export class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
     this._onLayoutDone();
   };
 
-  unlockNodePosition = (node) => {
-    const d3Node = this._positionsByNodeId.get(node.id);
+  unlockNodePosition = (node: NodeInterface) => {
+    const id = node.getId();
+    const d3Node = this._positionsByNodeId.get(id);
+    if (!d3Node) {
+      return;
+    }
     d3Node.fx = null;
     d3Node.fy = null;
   };

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

@@ -3,8 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {GraphLayout, GraphLayoutProps} from '../../core/graph-layout';
-import {Node} from '../../graph/node';
-import {Graph} from '../../graph/graph';
+import type {Graph, NodeInterface, EdgeInterface} from '../../graph/graph';
 import * as d3 from 'd3-force';
 
 export type ForceMultiGraphLayoutProps = GraphLayoutProps & {
@@ -16,28 +15,25 @@ export type ForceMultiGraphLayoutProps = GraphLayoutProps & {
 
 export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProps> {
   static defaultProps = {
+    ...GraphLayout.defaultProps,
     alpha: 3,
     nBodyStrength: -1200,
     nBodyDistanceMin: 100,
     nBodyDistanceMax: 1400
-  };
+  } as const satisfies Readonly<Required<ForceMultiGraphLayoutProps>>;
 
   _name = 'ForceMultiGraphLayout';
-  _graph: Graph;
+  _graph: Graph | null = null;
 
   // d3 part
   // custom graph data
-  _d3Graph = {nodes: [], edges: []};
-  _nodeMap = {};
-  _edgeMap = {};
-  _simulator;
+  _d3Graph: {nodes: any[]; edges: any[]} = {nodes: [], edges: []};
+  _nodeMap = new Map<string | number, any>();
+  _edgeMap = new Map<string | number, any>();
+  _simulator: d3.Simulation<any, undefined> | null = null;
 
-  constructor(options: ForceMultiGraphLayoutProps = {}) {
-    super(options);
-    this._options = {
-      ...ForceMultiGraphLayout.defaultProps,
-      ...options
-    };
+  constructor(props: ForceMultiGraphLayoutProps = {}) {
+    super(props, ForceMultiGraphLayout.defaultProps);
   }
 
   initializeGraph(graph: Graph): void {
@@ -48,8 +44,10 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProp
     if (d3Edge.isVirtual) {
       return 1 / d3Edge.edgeCount;
     }
-    const sourceDegree = this._graph.getDegree(d3Edge.source.id);
-    const targetDegree = this._graph.getDegree(d3Edge.target.id);
+    const sourceNode = this._graph?.findNode(d3Edge.source.id);
+    const targetNode = this._graph?.findNode(d3Edge.target.id);
+    const sourceDegree = sourceNode?.getDegree() ?? 0;
+    const targetDegree = targetNode?.getDegree() ?? 0;
     return 1 / Math.min(sourceDegree, targetDegree);
   };
 
@@ -58,7 +56,7 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProp
       this._simulator.on('tick', null).on('end', null);
       this._simulator = null;
     }
-    const {alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax} = this._options;
+    const {alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax} = this.props;
 
     const g = this._d3Graph;
     this._simulator = d3
@@ -100,25 +98,28 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProp
 
   update(): void {}
 
-  updateGraph(graph) {
+  updateGraph(graph: 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;
+    const newNodeMap = new Map<string | number, any>();
+    const nodes = Array.from(graph.getNodes());
+    const newD3Nodes = nodes.map((node) => {
+      const id = node.getId();
+      const oldD3Node = this._nodeMap.get(id);
+      const newD3Node = oldD3Node ? oldD3Node : {id};
+      newNodeMap.set(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()];
+    const edges = Array.from(graph.getEdges());
+    const nodePairs = edges.reduce((res, edge) => {
+      const endpoints = [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();
+      const pairId = endpoints.sort().toString();
       // push this edge into the bucket
       if (!res[pairId]) {
         res[pairId] = [edge];
@@ -131,8 +132,8 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProp
     // 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 = {};
+    const newD3Edges: any[] = [];
+    const newEdgeMap = new Map<string | number, any>();
 
     Object.keys(nodePairs).forEach((pairId) => {
       const betweenEdges = nodePairs[pairId];
@@ -142,11 +143,11 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProp
         const newD3Edge = {
           type: 'line',
           id: firstEdge.getId(),
-          source: newNodeMap[firstEdge.getSourceNodeId()],
-          target: newNodeMap[firstEdge.getTargetNodeId()],
+          source: newNodeMap.get(firstEdge.getSourceNodeId()),
+          target: newNodeMap.get(firstEdge.getTargetNodeId()),
           isVirtual: false
         };
-        newEdgeMap[firstEdge.getId()] = newD3Edge;
+        newEdgeMap.set(firstEdge.getId(), newD3Edge);
         newD3Edges.push(newD3Edge);
         return;
       }
@@ -155,24 +156,25 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProp
       const newD3Edge = {
         type: 'line',
         id: pairId,
-        source: newNodeMap[firstEdge.getSourceNodeId()],
-        target: newNodeMap[firstEdge.getTargetNodeId()],
+        source: newNodeMap.get(firstEdge.getSourceNodeId()),
+        target: newNodeMap.get(firstEdge.getTargetNodeId()),
         isVirtual: true,
         edgeCount: betweenEdges.length
       };
-      newEdgeMap[pairId] = newD3Edge;
+      newEdgeMap.set(pairId, newD3Edge);
       newD3Edges.push(newD3Edge);
 
       betweenEdges.forEach((e, idx) => {
-        newEdgeMap[e.id] = {
+        const edgeId = e.getId();
+        newEdgeMap.set(edgeId, {
           type: 'spline-curve',
-          id: e.id,
-          source: newNodeMap[e.getSourceNodeId()],
-          target: newNodeMap[e.getTargetNodeId()],
+          id: edgeId,
+          source: newNodeMap.get(e.getSourceNodeId()),
+          target: newNodeMap.get(e.getTargetNodeId()),
           virtualEdgeId: pairId,
           isVirtual: true,
           index: idx
-        };
+        });
       });
     });
 
@@ -182,8 +184,8 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProp
     this._d3Graph.edges = newD3Edges;
   }
 
-  getNodePosition = (node: 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];
     }
@@ -191,8 +193,8 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProp
     return [0, 0];
   };
 
-  getEdgePosition = (edge) => {
-    const d3Edge = this._edgeMap[edge.id];
+  getEdgePosition = (edge: EdgeInterface) => {
+    const d3Edge = this._edgeMap.get(edge.getId());
     if (d3Edge) {
       if (!d3Edge.isVirtual) {
         return {
@@ -203,7 +205,10 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProp
         };
       }
       // else, check the referenced virtual edge
-      const virtualEdge = this._edgeMap[d3Edge.virtualEdgeId];
+      const virtualEdge = this._edgeMap.get(d3Edge.virtualEdgeId);
+      if (!virtualEdge) {
+        return null;
+      }
       const edgeCount = virtualEdge.edgeCount;
       // get the position of source and target nodes
       const sourcePosition = [virtualEdge.source.x, virtualEdge.source.y];
@@ -239,8 +244,11 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProp
     };
   };
 
-  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;
     this._onLayoutChange();
@@ -248,9 +256,7 @@ export class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutProp
   };
 
   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/experimental/hive-plot-layout.ts

@@ -3,52 +3,46 @@
 // Copyright (c) vis.gl contributors
 
 import {GraphLayout, GraphLayoutProps} from '../../core/graph-layout';
-import {Node} from '../../graph/node';
-import {Graph} from '../../graph/graph';
+import type {Graph, NodeInterface, EdgeInterface} from '../../graph/graph';
 
 export type HivePlotLayoutProps = GraphLayoutProps & {
   innerRadius?: number;
   outerRadius?: number;
-  getNodeAxis?: (node: Node) => any;
+  getNodeAxis?: (node: NodeInterface) => any;
 };
 
 export class HivePlotLayout extends GraphLayout<HivePlotLayoutProps> {
   static defaultProps = {
+    ...GraphLayout.defaultProps,
     innerRadius: 100,
     outerRadius: 500,
-    getNodeAxis: (node: Node) => node.getPropertyValue('group')
+    getNodeAxis: (node: NodeInterface) => node.getPropertyValue('group')
   } as const satisfies Readonly<Required<HivePlotLayoutProps>>;
 
   _name = 'HivePlot';
-  _graph: Graph;
-  _totalAxis: number;
-  _axis: Record<string, any>;
-  _nodeMap = {};
-  _nodePositionMap = {};
-
-  constructor(options: HivePlotLayoutProps = {}) {
-    super(options);
-    this._options = {
-      ...HivePlotLayout.defaultProps,
-      ...options
-    };
+  _graph: Graph | null = null;
+  _totalAxis: number = 0;
+  _axis: Record<string, NodeInterface[]> = {};
+  _nodeMap = new Map<string | number, NodeInterface>();
+  _nodePositionMap = new Map<string | number, [number, number]>();
+
+  constructor(props: HivePlotLayoutProps = {}) {
+    super(props, HivePlotLayout.defaultProps);
   }
 
   initializeGraph(graph: Graph) {
     this.updateGraph(graph);
   }
 
-  updateGraph(graph) {
-    const {getNodeAxis, innerRadius, outerRadius} = this._options;
+  updateGraph(graph: Graph) {
+    const {getNodeAxis, innerRadius, outerRadius} = this.props;
     this._graph = graph;
-    this._nodeMap = graph.getNodes().reduce((res, node) => {
-      res[node.getId()] = node;
-      return res;
-    }, {});
+    const nodes = Array.from(graph.getNodes());
+    this._nodeMap = new Map(nodes.map((node) => [node.getId(), node]));
 
     // bucket nodes into few axis
 
-    this._axis = graph.getNodes().reduce((res, node) => {
+    this._axis = nodes.reduce((res, node) => {
       const axis = getNodeAxis(node);
       if (!res[axis]) {
         res[axis] = [];
@@ -77,7 +71,8 @@ export class HivePlotLayout extends GraphLayout<HivePlotLayoutProps> {
     const angleInterval = 360 / Object.keys(this._axis).length;
 
     // calculate positions
-    this._nodePositionMap = Object.keys(this._axis).reduce((res, axis, axisIdx) => {
+    this._nodePositionMap = new Map();
+    Object.keys(this._axis).forEach((axis, axisIdx) => {
       const axisAngle = angleInterval * axisIdx;
       const bucketedNodes = this._axis[axis];
       const interval = (outerRadius - innerRadius) / bucketedNodes.length;
@@ -86,13 +81,13 @@ export class HivePlotLayout extends GraphLayout<HivePlotLayoutProps> {
         const radius = innerRadius + idx * interval;
         const x = Math.cos((axisAngle / 180) * Math.PI) * radius + center[0];
         const y = Math.sin((axisAngle / 180) * Math.PI) * radius + center[1];
-        res[node.getId()] = [x, y];
+        this._nodePositionMap.set(node.getId(), [x, y]);
       });
-      return res;
-    }, {});
+    });
   }
 
   start() {
+    this._onLayoutStart();
     this._onLayoutChange();
     this._onLayoutDone();
   }
@@ -103,23 +98,27 @@ export class HivePlotLayout extends GraphLayout<HivePlotLayoutProps> {
 
   resume() {}
 
-  getNodePosition = (node) => this._nodePositionMap[node.getId()];
+  getNodePosition = (node: NodeInterface) => this._nodePositionMap.get(node.getId());
 
-  getEdgePosition = (edge) => {
-    const {getNodeAxis} = this._options;
+  getEdgePosition = (edge: EdgeInterface) => {
+    const {getNodeAxis} = this.props;
     const sourceNodeId = edge.getSourceNodeId();
     const targetNodeId = edge.getTargetNodeId();
 
-    const sourcePosition = this._nodePositionMap[sourceNodeId];
-    const targetPosition = this._nodePositionMap[targetNodeId];
+    const sourcePosition = this._nodePositionMap.get(sourceNodeId);
+    const targetPosition = this._nodePositionMap.get(targetNodeId);
+
+    if (!sourcePosition || !targetPosition) {
+      return null;
+    }
 
-    const sourceNode = this._nodeMap[sourceNodeId];
-    const targetNode = this._nodeMap[targetNodeId];
+    const sourceNode = this._nodeMap.get(sourceNodeId);
+    const targetNode = this._nodeMap.get(targetNodeId);
 
-    const sourceNodeAxis = getNodeAxis(sourceNode);
-    const targetNodeAxis = getNodeAxis(targetNode);
+    const sourceNodeAxis = sourceNode ? getNodeAxis(sourceNode) : null;
+    const targetNodeAxis = targetNode ? getNodeAxis(targetNode) : null;
 
-    if (sourceNodeAxis === targetNodeAxis) {
+    if (sourceNodeAxis !== null && sourceNodeAxis === targetNodeAxis) {
       return {
         type: 'line',
         sourcePosition,
@@ -130,9 +129,9 @@ export class HivePlotLayout extends GraphLayout<HivePlotLayoutProps> {
 
     const controlPoint = computeControlPoint({
       sourcePosition,
-      sourceNodeAxis,
+      sourceNodeAxis: sourceNodeAxis ?? 0,
       targetPosition,
-      targetNodeAxis,
+      targetNodeAxis: targetNodeAxis ?? 0,
       totalAxis: this._totalAxis
     });
 
@@ -144,14 +143,14 @@ export class HivePlotLayout extends GraphLayout<HivePlotLayoutProps> {
     };
   };
 
-  lockNodePosition = (node, x, y) => {
-    this._nodePositionMap[node.id] = [x, y];
+  lockNodePosition = (node: NodeInterface, x: number, y: number) => {
+    this._nodePositionMap.set(node.getId(), [x, y]);
     this._onLayoutChange();
     this._onLayoutDone();
   };
 
   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/layouts/experimental/radial-layout.ts

@@ -3,21 +3,33 @@
 // Copyright (c) vis.gl contributors
 
 import {GraphLayout, GraphLayoutProps} from '../../core/graph-layout';
-import {Graph} from '../../graph/graph';
+import type {Graph, NodeInterface, EdgeInterface} from '../../graph/graph';
 
 export type RadialLayoutProps = GraphLayoutProps & {
   radius?: number;
   tree?: any;
 };
 
-const traverseTree = (nodeId, nodeMap) => {
+const getTreeNode = (nodeId: string, nodeMap: Record<string, {children?: string[]; isLeaf?: boolean}>) => {
   const node = nodeMap[nodeId];
+  if (node) {
+    return node;
+  }
+  return {
+    id: nodeId,
+    children: [],
+    isLeaf: true
+  };
+};
+
+const traverseTree = (nodeId, nodeMap) => {
+  const node = getTreeNode(nodeId, nodeMap);
   if (node.isLeaf) {
     return node;
   }
   return {
     ...node,
-    children: node.children.map((nid) => traverseTree(nid, nodeMap))
+    children: (node.children ?? []).map((nid) => traverseTree(nid, nodeMap))
   };
 };
 
@@ -39,6 +51,9 @@ const getTreeDepth = (node, depth = 0) => {
 };
 
 const getPath = (node, targetId, path) => {
+  if (!node) {
+    return false;
+  }
   if (node.id === targetId) {
     path.push(node.id);
     return true;
@@ -53,21 +68,19 @@ const getPath = (node, targetId, path) => {
 
 export class RadialLayout extends GraphLayout<RadialLayoutProps> {
   static defaultProps = {
-    radius: 500
-  };
+    ...GraphLayout.defaultProps,
+    radius: 500,
+    tree: []
+  } as const satisfies Readonly<Required<RadialLayoutProps>>;
 
   _name = 'RadialLayout';
-  _graph: Graph = null;
+  _graph: Graph | null = null;
   // custom layout data structure
   _hierarchicalPoints = {};
   nestedTree;
 
-  constructor(options: RadialLayoutProps = {}) {
-    super(options);
-    this._options = {
-      ...RadialLayout.defaultProps,
-      ...options
-    };
+  constructor(props: RadialLayoutProps = {}) {
+    super(props, RadialLayout.defaultProps);
   }
 
   initializeGraph(graph: Graph): void {
@@ -79,18 +92,24 @@ export class RadialLayout extends GraphLayout<RadialLayoutProps> {
   }
 
   start(): void {
-    const nodeCount = this._graph.getNodes().length;
+    if (!this._graph) {
+      return;
+    }
+    const nodes = Array.from(this._graph.getNodes());
+    const nodeCount = nodes.length;
     if (nodeCount === 0) {
       return;
     }
 
-    const {tree} = this._options;
+    const {tree} = this.props;
 
     if (!tree || tree.length === 0) {
       return;
     }
 
-    const {radius} = this._options;
+    this._onLayoutStart();
+
+    const {radius} = this.props;
     const unitAngle = 360 / nodeCount;
 
     // hierarchical positions
@@ -154,12 +173,12 @@ export class RadialLayout extends GraphLayout<RadialLayoutProps> {
 
   update() {}
 
-  getNodePosition = (node) => {
-    return this._hierarchicalPoints[node.id];
+  getNodePosition = (node: NodeInterface) => {
+    return this._hierarchicalPoints[node.getId()];
   };
 
   // spline curve version
-  getEdgePosition = (edge) => {
+  getEdgePosition = (edge: EdgeInterface) => {
     const sourceNodeId = edge.getSourceNodeId();
     const targetNodeId = edge.getTargetNodeId();
     const sourceNodePos = this._hierarchicalPoints[sourceNodeId];
@@ -197,8 +216,8 @@ export class RadialLayout extends GraphLayout<RadialLayoutProps> {
     };
   };
 
-  lockNodePosition = (node, x, y) => {
-    this._hierarchicalPoints[node.id] = [x, y];
+  lockNodePosition = (node: NodeInterface, x: number, y: number) => {
+    this._hierarchicalPoints[node.getId()] = [x, y];
     this._onLayoutChange();
     this._onLayoutDone();
   };