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

package/src/_disabled/columnar-graph-data-builder.ts.disabled

@@ -0,0 +1,250 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {NodeState, EdgeState} from '../core/constants';
+import type {GraphNodeData, GraphEdgeData} from './graph-data';
+import {
+  cloneDataColumn,
+  cloneRecord,
+  normalizeEdgeState,
+  normalizeNodeState,
+  normalizeVersion
+} from '../graph/graph-normalization';
+
+export type ColumnarGraphDataBuilderOptions = {
+  nodeCapacity?: number;
+  edgeCapacity?: number;
+  version?: number;
+};
+
+export interface ColumnarGraphNodeColumns {
+  id: (string | number)[];
+  state?: NodeState[];
+  selectable?: boolean[];
+  highlightConnectedEdges?: boolean[];
+  data?: Record<string, unknown>[];
+  [columnName: string]: unknown;
+}
+
+export interface ColumnarGraphEdgeColumns {
+  id: (string | number)[];
+  sourceId: (string | number)[];
+  targetId: (string | number)[];
+  directed?: boolean[];
+  state?: EdgeState[];
+  data?: Record<string, unknown>[];
+  [columnName: string]: unknown;
+}
+
+export interface ColumnarGraphColumns {
+  type?: 'columnar-graph-data';
+  version?: number;
+  nodes: ColumnarGraphNodeColumns;
+  edges: ColumnarGraphEdgeColumns;
+}
+
+type MutableNodeColumns = {
+  id: (string | number)[];
+  state: NodeState[];
+  selectable: boolean[];
+  highlightConnectedEdges: boolean[];
+  data: Record<string, unknown>[];
+};
+
+type MutableEdgeColumns = {
+  id: (string | number)[];
+  sourceId: (string | number)[];
+  targetId: (string | number)[];
+  directed: boolean[];
+  state: EdgeState[];
+  data: Record<string, unknown>[];
+};
+
+export class ColumnarGraphDataBuilder {
+  private nodeColumns: MutableNodeColumns;
+  private edgeColumns: MutableEdgeColumns;
+
+  private nodeCapacity: number;
+  private edgeCapacity: number;
+
+  private nodeLength = 0;
+  private edgeLength = 0;
+
+  private _version: number;
+
+  constructor(options: ColumnarGraphDataBuilderOptions = {}) {
+    this.nodeCapacity = Math.max(0, options.nodeCapacity ?? 0);
+    this.edgeCapacity = Math.max(0, options.edgeCapacity ?? 0);
+    this.nodeColumns = createMutableNodeColumns(this.nodeCapacity);
+    this.edgeColumns = createMutableEdgeColumns(this.edgeCapacity);
+    this._version = normalizeVersion(options.version);
+  }
+
+  get version(): number {
+    return this._version;
+  }
+
+  setVersion(version: unknown): void {
+    this._version = normalizeVersion(version);
+  }
+
+  get nodeCount(): number {
+    return this.nodeLength;
+  }
+
+  get edgeCount(): number {
+    return this.edgeLength;
+  }
+
+  addNode(node: GraphNodeData): number {
+    if (typeof node?.id === 'undefined') {
+      throw new Error('Graph node requires an "id" field.');
+    }
+
+    this.ensureNodeCapacity(this.nodeLength + 1);
+
+    const index = this.nodeLength++;
+    const attributes = cloneRecord(node.attributes);
+
+    if (typeof node.label !== 'undefined') {
+      attributes.label = node.label;
+    }
+
+    if (typeof node.weight !== 'undefined') {
+      attributes.weight = node.weight;
+    }
+
+    const stateCandidate = node.state ?? (attributes.state as NodeState | undefined);
+    const selectableCandidate = node.selectable ?? (attributes.selectable as boolean | undefined);
+    const highlightCandidate =
+      node.highlightConnectedEdges ?? (attributes.highlightConnectedEdges as boolean | undefined);
+
+    this.nodeColumns.id[index] = node.id;
+    this.nodeColumns.state[index] = normalizeNodeState(stateCandidate);
+    this.nodeColumns.selectable[index] = Boolean(selectableCandidate);
+    this.nodeColumns.highlightConnectedEdges[index] = Boolean(highlightCandidate);
+    this.nodeColumns.data[index] = attributes;
+
+    return index;
+  }
+
+  addEdge(edge: GraphEdgeData): number {
+    if (
+      typeof edge?.id === 'undefined' ||
+      typeof edge?.sourceId === 'undefined' ||
+      typeof edge?.targetId === 'undefined'
+    ) {
+      throw new Error('Graph edge requires "id", "sourceId", and "targetId" fields.');
+    }
+
+    this.ensureEdgeCapacity(this.edgeLength + 1);
+
+    const index = this.edgeLength++;
+    const attributes = cloneRecord(edge.attributes);
+
+    if (typeof edge.label !== 'undefined') {
+      attributes.label = edge.label;
+    }
+
+    if (typeof edge.weight !== 'undefined') {
+      attributes.weight = edge.weight;
+    }
+
+    const stateCandidate = edge.state ?? (attributes.state as EdgeState | undefined);
+    const directedCandidate = edge.directed ?? (attributes.directed as boolean | undefined);
+
+    this.edgeColumns.id[index] = edge.id;
+    this.edgeColumns.sourceId[index] = edge.sourceId;
+    this.edgeColumns.targetId[index] = edge.targetId;
+    this.edgeColumns.directed[index] = Boolean(directedCandidate);
+    this.edgeColumns.state[index] = normalizeEdgeState(stateCandidate);
+    this.edgeColumns.data[index] = attributes;
+
+    return index;
+  }
+
+  build(): ColumnarGraphColumns {
+    return {
+      type: 'columnar-graph-data',
+      version: this._version,
+      nodes: {
+        id: this.nodeColumns.id.slice(0, this.nodeLength),
+        state: this.nodeColumns.state.slice(0, this.nodeLength),
+        selectable: this.nodeColumns.selectable.slice(0, this.nodeLength),
+        highlightConnectedEdges: this.nodeColumns.highlightConnectedEdges.slice(0, this.nodeLength),
+        data: cloneDataColumn(this.nodeColumns.data, this.nodeLength)
+      },
+      edges: {
+        id: this.edgeColumns.id.slice(0, this.edgeLength),
+        sourceId: this.edgeColumns.sourceId.slice(0, this.edgeLength),
+        targetId: this.edgeColumns.targetId.slice(0, this.edgeLength),
+        directed: this.edgeColumns.directed.slice(0, this.edgeLength),
+        state: this.edgeColumns.state.slice(0, this.edgeLength),
+        data: cloneDataColumn(this.edgeColumns.data, this.edgeLength)
+      }
+    };
+  }
+
+  private ensureNodeCapacity(minCapacity: number): void {
+    if (this.nodeCapacity >= minCapacity) {
+      return;
+    }
+
+    const nextCapacity = Math.max(8, this.nodeCapacity * 2, minCapacity);
+    const nextColumns = createMutableNodeColumns(nextCapacity);
+
+    for (let i = 0; i < this.nodeLength; i++) {
+      nextColumns.id[i] = this.nodeColumns.id[i];
+      nextColumns.state[i] = this.nodeColumns.state[i];
+      nextColumns.selectable[i] = this.nodeColumns.selectable[i];
+      nextColumns.highlightConnectedEdges[i] = this.nodeColumns.highlightConnectedEdges[i];
+      nextColumns.data[i] = this.nodeColumns.data[i];
+    }
+
+    this.nodeColumns = nextColumns;
+    this.nodeCapacity = nextCapacity;
+  }
+
+  private ensureEdgeCapacity(minCapacity: number): void {
+    if (this.edgeCapacity >= minCapacity) {
+      return;
+    }
+
+    const nextCapacity = Math.max(8, this.edgeCapacity * 2, minCapacity);
+    const nextColumns = createMutableEdgeColumns(nextCapacity);
+
+    for (let i = 0; i < this.edgeLength; i++) {
+      nextColumns.id[i] = this.edgeColumns.id[i];
+      nextColumns.sourceId[i] = this.edgeColumns.sourceId[i];
+      nextColumns.targetId[i] = this.edgeColumns.targetId[i];
+      nextColumns.directed[i] = this.edgeColumns.directed[i];
+      nextColumns.state[i] = this.edgeColumns.state[i];
+      nextColumns.data[i] = this.edgeColumns.data[i];
+    }
+
+    this.edgeColumns = nextColumns;
+    this.edgeCapacity = nextCapacity;
+  }
+}
+
+function createMutableNodeColumns(capacity: number): MutableNodeColumns {
+  return {
+    id: new Array<string | number>(capacity),
+    state: new Array<NodeState>(capacity),
+    selectable: new Array<boolean>(capacity),
+    highlightConnectedEdges: new Array<boolean>(capacity),
+    data: new Array<Record<string, unknown>>(capacity)
+  };
+}
+
+function createMutableEdgeColumns(capacity: number): MutableEdgeColumns {
+  return {
+    id: new Array<string | number>(capacity),
+    sourceId: new Array<string | number>(capacity),
+    targetId: new Array<string | number>(capacity),
+    directed: new Array<boolean>(capacity),
+    state: new Array<EdgeState>(capacity),
+    data: new Array<Record<string, unknown>>(capacity)
+  };
+}

package/src/_disabled/graph-runtime-layout.ts.disabled

@@ -0,0 +1,29 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {Bounds2D} from '@math.gl/types';
+
+import type {GraphLayoutProps, GraphLayoutState} from './graph-layout';
+import type {EdgeInterface, Graph, NodeInterface} from '../graph/graph';
+
+export interface GraphRuntimeLayout {
+  readonly version: number;
+  readonly state: GraphLayoutState;
+  getProps(): GraphLayoutProps;
+  setProps(props: Partial<GraphLayoutProps>): void;
+  initializeGraph(graph: Graph): void;
+  updateGraph(graph: Graph): void;
+  start(): void;
+  update(): void;
+  resume(): void;
+  stop(): void;
+  getBounds(): Bounds2D | null;
+  getNodePosition(node: NodeInterface): [number, number] | null | undefined;
+  getEdgePosition(edge: EdgeInterface): unknown;
+  lockNodePosition(node: NodeInterface, x: number, y: number): void;
+  unlockNodePosition(node: NodeInterface): void;
+  destroy?(): void;
+}
+
+export type TabularGraphLayout = GraphRuntimeLayout;

package/src/core/graph-engine.ts

@@ -4,67 +4,125 @@
 
 import type {Bounds2D} from '@math.gl/types';
 
-import type {Node} from '../graph/node';
-import {Edge} from '../graph/edge';
-import {Graph} from '../graph/graph';
+import type {Graph, EdgeInterface, NodeInterface} from '../graph/graph';
+import {ClassicGraph} from '../graph/classic-graph';
 import {GraphLayout, type GraphLayoutEventDetail} from './graph-layout';
 import {Cache} from './cache';
 import {log} from '../utils/log';
+import {GraphStylesheetEngine, type GraphStylesheet} from '../style/graph-style-engine';
 
-export type GraphEngineProps = {
+type ClassicGraphEngineProps = {
+  graph: ClassicGraph;
+  layout: GraphLayout;
+  onLayoutStart?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutChange?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutDone?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutError?: (error?: unknown) => void;
+  onTransactionStart?: () => void;
+  onTransactionEnd?: () => void;
+  onNodeAdded?: (node: NodeInterface) => void;
+  onNodeRemoved?: (node: NodeInterface) => void;
+  onNodeUpdated?: (node: NodeInterface) => void;
+  onEdgeAdded?: (edge: EdgeInterface) => void;
+  onEdgeRemoved?: (edge: EdgeInterface) => void;
+  onEdgeUpdated?: (edge: EdgeInterface) => void;
+};
+
+type InterfaceGraphEngineProps = {
   graph: Graph;
   layout: GraphLayout;
+  onLayoutStart?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutChange?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutDone?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutError?: (error?: unknown) => void;
+  onTransactionStart?: () => void;
+  onTransactionEnd?: () => void;
+  onNodeAdded?: (node: NodeInterface) => void;
+  onNodeRemoved?: (node: NodeInterface) => void;
+  onNodeUpdated?: (node: NodeInterface) => void;
+  onEdgeAdded?: (edge: EdgeInterface) => void;
+  onEdgeRemoved?: (edge: EdgeInterface) => void;
+  onEdgeUpdated?: (edge: EdgeInterface) => void;
 };
 
-/** Graph engine controls the graph data and layout calculation */
-export class GraphEngine extends EventTarget {
-  props: Readonly<Required<GraphEngineProps>>;
+export type GraphEngineProps = ClassicGraphEngineProps | InterfaceGraphEngineProps;
 
+/** Graph engine controls the graph data and layout calculation */
+export class GraphEngine {
+  private _props: GraphEngineProps;
   private readonly _graph: Graph;
   private readonly _layout: GraphLayout;
-  private readonly _cache = new Cache<'nodes' | 'edges', Node[] | Edge[]>();
+  private readonly _cache = new Cache<'nodes' | 'edges', NodeInterface[] | EdgeInterface[]>();
   private _layoutDirty = false;
   private _transactionInProgress = false;
+  private _graphCallbacksAttached = false;
+  private _layoutCallbacksAttached = false;
 
   constructor(props: GraphEngineProps);
   /** @deprecated Use props constructor: new GraphEngine(props) */
-  constructor(graph: Graph, layout: GraphLayout);
-
-  constructor(props: GraphEngineProps | Graph, layout?: GraphLayout) {
-    super();
-    if (props instanceof Graph) {
-      props = {
-        graph: props,
-        layout
-      };
+  constructor(graph: ClassicGraph, layout: GraphLayout);
+
+  constructor(props: GraphEngineProps | ClassicGraph, layout?: GraphLayout) {
+    let normalizedProps: GraphEngineProps;
+    if (props instanceof ClassicGraph) {
+      if (!(layout instanceof GraphLayout)) {
+        throw new Error('GraphEngine: legacy graphs require a GraphLayout instance.');
+      }
+      normalizedProps = {graph: props, layout};
+    } else {
+      normalizedProps = props;
     }
 
-    this.props = props;
-    this._graph = props.graph;
-    this._layout = props.layout;
+    this._props = {...normalizedProps};
+
+    this._graph = normalizedProps.graph;
+    this._layout = normalizedProps.layout;
+  }
+
+  get props(): GraphEngineProps {
+    return {...this._props};
+  }
+
+  setProps(props: Partial<Omit<GraphEngineProps, 'graph' | 'layout'>>): void {
+    this._props = {
+      ...this._props,
+      ...props,
+      graph: this._props.graph,
+      layout: this._props.layout
+    } as GraphEngineProps;
   }
 
   /** Getters */
 
-  getNodes = (): Node[] => {
+  getNodes = (): NodeInterface[] => {
     this._updateCache('nodes', () =>
-      this._graph.getNodes().filter((node) => this.getNodePosition(node))
+      Array.from(this._graph.getNodes()).filter((node) => {
+        const position = this.getNodePosition(node);
+        return position !== null && position !== undefined;
+      })
     );
 
-    return this._cache.get('nodes') as Node[];
+    return (this._cache.get('nodes') as NodeInterface[]) ?? [];
   };
 
   getEdges = () => {
     this._updateCache('edges', () =>
-      this._graph.getEdges().filter((edge) => this.getEdgePosition(edge))
+      Array.from(this._graph.getEdges()).filter((edge) => {
+        const layout = this.getEdgePosition(edge);
+        return layout !== null && layout !== undefined;
+      })
     );
 
-    return this._cache.get('edges') as Edge[];
+    return (this._cache.get('edges') as EdgeInterface[]) ?? [];
   };
 
-  getNodePosition = (node: Node) => this._layout.getNodePosition(node);
+  getNodePosition = (node: NodeInterface) => {
+    return this._layout.getNodePosition(node) ?? null;
+  };
 
-  getEdgePosition = (edge: Edge) => this._layout.getEdgePosition(edge);
+  getEdgePosition = (edge: EdgeInterface) => {
+    return this._layout.getEdgePosition(edge) ?? null;
+  };
 
   getGraphVersion = () => this._graph.version;
 
@@ -72,77 +130,74 @@ export class GraphEngine extends EventTarget {
 
   getLayoutState = () => this._layout.state;
 
-  getLayoutBounds = (): Bounds2D | null => this._layout.getBounds();
+  getLayoutBounds = (): Bounds2D | null => this._layout.getBounds() ?? null;
 
   /** Operations on the graph */
 
-  lockNodePosition = (node, x, y) => this._layout.lockNodePosition(node, x, y);
+  lockNodePosition = (node: NodeInterface, x: number, y: number) => {
+    this._layout.lockNodePosition(node, x, y);
+  };
+
+  unlockNodePosition = (node: NodeInterface) => {
+    this._layout.unlockNodePosition(node);
+  };
+
+  findNode(nodeId: string | number): NodeInterface | undefined {
+    return this._graph.findNode?.(nodeId) ?? this._graph.findNodeById?.(nodeId);
+  }
 
-  unlockNodePosition = (node) => this._layout.unlockNodePosition(node);
+  createStylesheetEngine(
+    style: GraphStylesheet,
+    options: {stateUpdateTrigger?: unknown} = {}
+  ): GraphStylesheetEngine {
+    return new GraphStylesheetEngine(style, options);
+  }
 
   /**
    * @fires GraphEngine#onLayoutStart
    */
-  _onLayoutStart = (event: Event) => {
+  _onLayoutStart = (detail?: GraphLayoutEventDetail) => {
     log.log(0, 'GraphEngine: layout start')();
-    const detail = event instanceof CustomEvent ? (event.detail as GraphLayoutEventDetail) : undefined;
-    /**
-     * @event GraphEngine#onLayoutStart
-     * @type {CustomEvent}
-     */
-    this.dispatchEvent(new CustomEvent('onLayoutStart', {detail}));
+    this._props.onLayoutStart?.(detail);
   };
 
   /**
    * @fires GraphEngine#onLayoutChange
    */
-  _onLayoutChange = (event: Event) => {
+  _onLayoutChange = (detail?: GraphLayoutEventDetail) => {
     log.log(0, 'GraphEngine: layout update event')();
-    const detail = event instanceof CustomEvent ? (event.detail as GraphLayoutEventDetail) : undefined;
-    /**
-     * @event GraphEngine#onLayoutChange
-     * @type {CustomEvent}
-     */
-    this.dispatchEvent(new CustomEvent('onLayoutChange', {detail}));
+    this._props.onLayoutChange?.(detail);
   };
 
   /**
    * @fires GraphEngine#onLayoutDone
    */
-  _onLayoutDone = (event: Event) => {
+  _onLayoutDone = (detail?: GraphLayoutEventDetail) => {
     log.log(0, 'GraphEngine: layout end')();
-    const detail = event instanceof CustomEvent ? (event.detail as GraphLayoutEventDetail) : undefined;
-    /**
-     * @event GraphEngine#onLayoutDone
-     * @type {CustomEvent}
-     */
-    this.dispatchEvent(new CustomEvent('onLayoutDone', {detail}));
+    this._props.onLayoutDone?.(detail);
   };
 
   /**
    * @fires GraphEngine#onLayoutError
    */
-  _onLayoutError = (event: Event) => {
-    const detail = event instanceof CustomEvent ? event.detail : undefined;
-    /**
-     * @event GraphEngine#onLayoutError
-     * @type {CustomEvent}
-     */
-    this.dispatchEvent(new CustomEvent('onLayoutError', {detail}));
+  _onLayoutError = (error?: unknown) => {
+    this._props.onLayoutError?.(error);
   };
 
-  _onGraphStructureChanged = (entity) => {
+  _onGraphStructureChanged = () => {
     this._layoutDirty = true;
     this._graphChanged();
   };
 
   _onTransactionStart = () => {
     this._transactionInProgress = true;
+    this._props.onTransactionStart?.();
   };
 
   _onTransactionEnd = () => {
     this._transactionInProgress = false;
     this._graphChanged();
+    this._props.onTransactionEnd?.();
   };
 
   /** Layout calculations */
@@ -151,17 +206,8 @@ export class GraphEngine extends EventTarget {
     log.log(1, 'GraphEngine: run');
     // TODO: throw if running on a cleared engine
 
-    this._graph.addEventListener('transactionStart', this._onTransactionStart);
-    this._graph.addEventListener('transactionEnd', this._onTransactionEnd);
-    this._graph.addEventListener('onNodeAdded', this._onGraphStructureChanged);
-    this._graph.addEventListener('onNodeRemoved', this._onGraphStructureChanged);
-    this._graph.addEventListener('onEdgeAdded', this._onGraphStructureChanged);
-    this._graph.addEventListener('onEdgeRemoved', this._onGraphStructureChanged);
-
-    this._layout.addEventListener('onLayoutStart', this._onLayoutStart);
-    this._layout.addEventListener('onLayoutChange', this._onLayoutChange);
-    this._layout.addEventListener('onLayoutDone', this._onLayoutDone);
-    this._layout.addEventListener('onLayoutError', this._onLayoutError);
+    this._attachGraphCallbacks();
+    this._attachLayoutCallbacks();
 
     this._layout.initializeGraph(this._graph);
     this._layout.start();
@@ -169,22 +215,17 @@ export class GraphEngine extends EventTarget {
 
   clear = () => {
     log.log(1, 'GraphEngine: end');
-    this._graph.removeEventListener('transactionStart', this._onTransactionStart);
-    this._graph.removeEventListener('transactionEnd', this._onTransactionEnd);
-    this._graph.removeEventListener('onNodeAdded', this._onGraphStructureChanged);
-    this._graph.removeEventListener('onNodeRemoved', this._onGraphStructureChanged);
-    this._graph.removeEventListener('onEdgeAdded', this._onGraphStructureChanged);
-    this._graph.removeEventListener('onEdgeRemoved', this._onGraphStructureChanged);
-
-    this._layout.removeEventListener('onLayoutStart', this._onLayoutStart);
-    this._layout.removeEventListener('onLayoutChange', this._onLayoutChange);
-    this._layout.removeEventListener('onLayoutDone', this._onLayoutDone);
-    this._layout.removeEventListener('onLayoutError', this._onLayoutError);
+    this._detachGraphCallbacks();
+    this._detachLayoutCallbacks();
   };
 
-  resume = () => this._layout.resume();
+  resume = () => {
+    this._layout.resume();
+  };
 
-  stop = () => this._layout.stop();
+  stop = () => {
+    this._layout.stop();
+  };
 
   _graphChanged = () => {
     if (this._layoutDirty && !this._transactionInProgress) {
@@ -200,6 +241,82 @@ export class GraphEngine extends EventTarget {
   };
 
   _updateCache(key, updateValue) {
-    this._cache.set(key, updateValue, this._graph.version + this._layout.version);
+    this._cache.set(key, updateValue, this.getGraphVersion() + this.getLayoutLastUpdate());
+  }
+
+  private _attachGraphCallbacks() {
+    if (this._graphCallbacksAttached) {
+      return;
+    }
+    this._graph.updateProps({
+      onTransactionStart: this._onTransactionStart,
+      onTransactionEnd: this._onTransactionEnd,
+      onNodeAdded: (node) => {
+        this._onGraphStructureChanged();
+        this._props.onNodeAdded?.(node);
+      },
+      onNodeRemoved: (node) => {
+        this._onGraphStructureChanged();
+        this._props.onNodeRemoved?.(node);
+      },
+      onNodeUpdated: (node) => {
+        this._props.onNodeUpdated?.(node);
+      },
+      onEdgeAdded: (edge) => {
+        this._onGraphStructureChanged();
+        this._props.onEdgeAdded?.(edge);
+      },
+      onEdgeRemoved: (edge) => {
+        this._onGraphStructureChanged();
+        this._props.onEdgeRemoved?.(edge);
+      },
+      onEdgeUpdated: (edge) => {
+        this._props.onEdgeUpdated?.(edge);
+      }
+    });
+    this._graphCallbacksAttached = true;
+  }
+
+  private _detachGraphCallbacks() {
+    if (!this._graphCallbacksAttached) {
+      return;
+    }
+    this._graph.updateProps({
+      onTransactionStart: undefined,
+      onTransactionEnd: undefined,
+      onNodeAdded: undefined,
+      onNodeRemoved: undefined,
+      onNodeUpdated: undefined,
+      onEdgeAdded: undefined,
+      onEdgeRemoved: undefined,
+      onEdgeUpdated: undefined
+    });
+    this._graphCallbacksAttached = false;
+  }
+
+  private _attachLayoutCallbacks() {
+    if (this._layoutCallbacksAttached) {
+      return;
+    }
+    this._layout.setProps({
+      onLayoutStart: this._onLayoutStart,
+      onLayoutChange: this._onLayoutChange,
+      onLayoutDone: this._onLayoutDone,
+      onLayoutError: this._onLayoutError
+    });
+    this._layoutCallbacksAttached = true;
+  }
+
+  private _detachLayoutCallbacks() {
+    if (!this._layoutCallbacksAttached) {
+      return;
+    }
+    this._layout.setProps({
+      onLayoutStart: undefined,
+      onLayoutChange: undefined,
+      onLayoutDone: undefined,
+      onLayoutError: undefined
+    });
+    this._layoutCallbacksAttached = false;
   }
 }