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

package/src/core/graph-layout.ts

@@ -2,37 +2,74 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {Graph} from '../graph/graph';
-import type {Node} from '../graph/node';
-import type {Edge} from '../graph/edge';
+import type {Bounds2D} from '@math.gl/types';
+
+import type {Graph, NodeInterface, EdgeInterface} from '../graph/graph';
 
 import isEqual from 'lodash.isequal';
-import {EDGE_TYPE} from './constants';
+import {log} from '../utils/log';
 
 // the status of the layout
-export type GraphLayoutState = 'INIT' | 'START' | 'CALCULATING' | 'DONE' | 'ERROR';
+export type GraphLayoutState = 'init' | 'start' | 'calculating' | 'done' | 'error';
+
+export type GraphLayoutEventDetail = {
+  bounds: Bounds2D | null;
+};
+
+export type GraphLayoutProps = {
+  onLayoutStart?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutChange?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutDone?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutError?: (error?: unknown) => void;
+};
+
+
+export abstract class GraphLayout<
+  PropsT extends GraphLayoutProps = GraphLayoutProps
+> {
+  static defaultProps: Readonly<Required<GraphLayoutProps>> = {
+    onLayoutStart: undefined,
+    onLayoutChange: undefined,
+    onLayoutDone: undefined,
+    onLayoutError: undefined
+  };
+
+  get [Symbol.toStringTag](): string {
+    return 'GraphLayout';
+  }
 
-export type GraphLayoutOptions = {};
+  /** Extra configuration props of the layout. */
+  protected props: Required<PropsT>;
 
-/** All the layout classes are extended from this base layout class. */
-export class GraphLayout<
-  OptionsT extends GraphLayoutOptions = GraphLayoutOptions
-> extends EventTarget {
-  /** Name of the layout. */
-  protected readonly _name: string = 'GraphLayout';
-  /** Extra configuration options of the layout. */
-  protected _options: OptionsT;
+  /**
+   * Last computed layout bounds in local layout coordinates.
+   *
+   * Subclasses should update this value by overriding {@link _updateBounds}
+   * so it reflects the latest geometry before layout lifecycle events fire.
+   */
+  protected _bounds: Bounds2D | null = null;
 
   public version = 0;
-  public state: GraphLayoutState = 'INIT';
+  public state: GraphLayoutState = 'init';
 
   /**
    * Constructor of GraphLayout
-   * @param options extra configuration options of the layout
+   * @param props extra configuration props of the layout
    */
-  constructor(options: OptionsT) {
-    super();
-    this._options = options;
+  constructor(props: PropsT, defaultProps?: Required<PropsT>) {
+    this.props = {
+      ...GraphLayout.defaultProps,
+      ...defaultProps,
+      ...props
+    };
+  }
+
+  getProps(): PropsT {
+    return {...this.props};
+  }
+
+  setProps(props: Partial<PropsT>): void {
+    this.props = {...this.props, ...props};
   }
 
   /**
@@ -44,31 +81,20 @@ export class GraphLayout<
     if (!layout || !(layout instanceof GraphLayout)) {
       return false;
     }
-    return this._name === layout._name && isEqual(this._options, layout._options);
+    return this instanceof layout.constructor && isEqual(this.props, layout.props);
   }
 
-  /** virtual functions: will be implemented in the child class */
+  // Accessors
 
-  /** first time to pass the graph data into this layout */
-  initializeGraph(graph: Graph) {}
-  /** update the existing graph */
-  updateGraph(graph: Graph) {}
-  /** start the layout calculation */
-  start() {}
-  /** update the layout calculation */
-  update() {}
-  /** resume the layout calculation */
-  resume() {}
-  /** stop the layout calculation */
-  stop() {}
   /** access the position of the node in the layout */
-  getNodePosition(node: Node): [number, number] {
+  getNodePosition(node: NodeInterface): [number, number] {
     return [0, 0];
   }
+
   /** access the layout information of the edge */
-  getEdgePosition(edge: Edge) {
+  getEdgePosition(edge: EdgeInterface) {
     return {
-      type: EDGE_TYPE.LINE,
+      type: 'line',
       sourcePosition: [0, 0],
       targetPosition: [0, 0],
       controlPoints: []
@@ -81,66 +107,168 @@ export class GraphLayout<
    * @param  x    x coordinate
    * @param  y    y coordinate
    */
-  lockNodePosition(node: Node, x: number, y: number) {}
+  lockNodePosition(node: NodeInterface, x: number, y: number) {}
 
   /**
    * Unlock the node, the node will be able to move freely.
    * @param  {Object} node Node to be unlocked
    */
-  unlockNodePosition(node: Node) {}
+  unlockNodePosition(node: NodeInterface) {}
+
+  /** Returns the last computed layout bounds, if available. */
+  getBounds(): Bounds2D | null {
+    return this._bounds;
+  }
+
+    /** virtual functions: will be implemented in the child class */
+
+  /** first time to pass the graph data into this layout */
+  abstract initializeGraph(graph: Graph): void;
+  /** update the existing graph */
+  abstract updateGraph(graph: Graph): void;
+  /** start the layout calculation */
+  abstract start();
+  /** update the layout calculation */
+  abstract update();
+  /** resume the layout calculation */
+  abstract resume();
+  /** stop the layout calculation */
+  abstract stop();
+
 
   // INTERNAL METHODS
 
-  protected _updateState(state) {
+  /** Hook for subclasses to update bounds prior to emitting events. */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  protected _updateBounds(): void {}
+
+  /**
+   * Utility for subclasses to derive layout bounds from an iterable of [x, y] positions.
+   * @param positions Iterable of node positions.
+   * @returns Layout bounds for the supplied positions or `null` if none are finite.
+   */
+  protected _calculateBounds(
+    positions: Iterable<Readonly<[number, number]> | null | undefined>
+  ): Bounds2D | null {
+    let minX = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+
+    for (const position of positions) {
+      if (!position) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+      const [x, y] = position;
+      if (!Number.isFinite(x) || !Number.isFinite(y)) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x);
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y);
+    }
+
+    if (minX === Number.POSITIVE_INFINITY) {
+      return null;
+    }
+
+    return [
+      [minX, minY],
+      [maxX, maxY]
+    ];
+  }
+
+  /**
+   * Attempt to coerce an arbitrary value into a finite 2D point.
+   * @param value Candidate value that may represent a position.
+   * @returns Finite [x, y] tuple or null if the value cannot be interpreted.
+   */
+  protected _normalizePosition(value: unknown): [number, number] | null {
+    if (Array.isArray(value) && value.length >= 2) {
+      const [x, y] = value as [unknown, unknown];
+      if (this._isFiniteNumber(x) && this._isFiniteNumber(y)) {
+        return [x, y];
+      }
+      return null;
+    }
+
+    if (value && typeof value === 'object') {
+      const {x, y} = value as {x?: unknown; y?: unknown};
+      if (this._isFiniteNumber(x) && this._isFiniteNumber(y)) {
+        return [x, y];
+      }
+    }
+
+    return null;
+  }
+
+  private _isFiniteNumber(value: unknown): value is number {
+    return typeof value === 'number' && Number.isFinite(value);
+  }
+
+  protected _updateState(state: GraphLayoutState) {
     this.state = state;
     this.version += 1;
   }
 
   /** @fires GraphLayout#onLayoutStart */
   protected _onLayoutStart = (): void => {
-    this._updateState('CALCULATING');
+    log.log(0, `GraphLayout(${this}): start`)();
+    this._updateBounds();
+    this._updateState('calculating');
 
     /**
      * Layout calculation start.
      * @event GraphLayout#onLayoutChange
      * @type {CustomEvent}
      */
-    this.dispatchEvent(new CustomEvent('onLayoutStart'));
+    const detail: GraphLayoutEventDetail = {bounds: this._bounds};
+    this.props.onLayoutStart?.(detail);
   };
 
   /** @fires GraphLayout#onLayoutChange */
   protected _onLayoutChange = (): void => {
-    this._updateState('CALCULATING');
+    log.log(0, `GraphLayout(${this}): update`)();
+    this._updateBounds();
+    this._updateState('calculating');
 
     /**
      * Layout calculation iteration.
      * @event GraphLayout#onLayoutChange
      * @type {CustomEvent}
      */
-    this.dispatchEvent(new CustomEvent('onLayoutChange'));
+    const detail: GraphLayoutEventDetail = {bounds: this._bounds};
+    this.props.onLayoutChange?.(detail);
   };
 
   /** @fires GraphLayout#onLayoutDone */
   protected _onLayoutDone = (): void => {
-    this._updateState('DONE');
+    log.log(0, `GraphLayout(${this}): end`)();
+    this._updateBounds();
+    this._updateState('done');
 
     /**
      * Layout calculation is done.
      * @event GraphLayout#onLayoutDone
      * @type {CustomEvent}
      */
-    this.dispatchEvent(new CustomEvent('onLayoutDone'));
+    const detail: GraphLayoutEventDetail = {bounds: this._bounds};
+    this.props.onLayoutDone?.(detail);
   };
 
   /** @fires GraphLayout#onLayoutError */
   protected _onLayoutError = (): void => {
-    this._updateState('ERROR');
+    this._updateState('error');
 
     /**
      * Layout calculation went wrong.
      * @event GraphLayout#onLayoutError
      * @type {CustomEvent}
      */
-    this.dispatchEvent(new CustomEvent('onLayoutError'));
+    this.props.onLayoutError?.();
   };
 }

package/src/core/interaction-manager.ts

@@ -2,33 +2,48 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {EDGE_STATE, NODE_STATE, ValueOf} from './constants';
-import {Edge} from '../graph/edge';
-import {Node} from '../graph/node';
+import type {EdgeState, NodeState} from './constants';
 import {GraphEngine} from './graph-engine';
+import type {EdgeInterface, NodeInterface} from '../graph/graph';
+import {log} from '../utils/log';
+import {
+  resolveChainInteractionSource,
+  type ChainInteractionSource
+} from '../utils/collapsed-chains';
 
-const NODE_TO_EDGE_STATE_MAP: Record<ValueOf<typeof NODE_STATE>, ValueOf<typeof EDGE_STATE>> = {
-  [NODE_STATE.DEFAULT]: EDGE_STATE.DEFAULT,
-  [NODE_STATE.HOVER]: EDGE_STATE.HOVER,
-  [NODE_STATE.DRAGGING]: EDGE_STATE.DRAGGING,
-  [NODE_STATE.SELECTED]: EDGE_STATE.SELECTED
+export {resolveChainInteractionSource};
+export type {ChainInteractionSource};
+
+export function shouldToggleCollapsedChain(
+  isCollapsed: boolean,
+  source: ChainInteractionSource
+): boolean {
+  if (isCollapsed) {
+    return true;
+  }
+  return source === 'expanded-marker' || source === 'expanded-outline';
+}
+
+const NODE_TO_EDGE_STATE_MAP: Record<NodeState, EdgeState> = {
+  default: 'default',
+  hover: 'hover',
+  dragging: 'dragging',
+  selected: 'selected'
 };
 
-function shouldEdgeBeSelected(edge: Edge): boolean {
+function shouldEdgeBeSelected(edge: EdgeInterface): boolean {
   return edge
     .getConnectedNodes()
-    .some(
-      (node) => node.getState() === NODE_STATE.SELECTED && node.shouldHighlightConnectedEdges()
-    );
+    .some((node) => node.getState() === 'selected' && node.shouldHighlightConnectedEdges());
 }
 
-function setNodeState(node: Node, state: ValueOf<typeof NODE_STATE>) {
+function setNodeState(node: NodeInterface, state: NodeState) {
   node.setState(state);
   if (node.shouldHighlightConnectedEdges()) {
     node.getConnectedEdges().forEach((edge) => {
       let newEdgeState = NODE_TO_EDGE_STATE_MAP[state];
       if (shouldEdgeBeSelected(edge)) {
-        newEdgeState = EDGE_STATE.SELECTED;
+        newEdgeState = 'selected';
       }
       edge.setState(newEdgeState);
     });
@@ -39,7 +54,7 @@ interface EventMap {
   onClick?: (info: unknown, event: Event) => void;
   onHover?: (info: unknown) => void;
   onMouseEnter?: (info: unknown) => void;
-  onMouseLeave?: (node: Node) => void;
+  onMouseLeave?: (node: NodeInterface) => void;
   onDragStart?: (info: unknown) => void;
   onDrag?: (info: unknown) => void;
   onDragEnd?: (info: unknown) => void;
@@ -56,8 +71,8 @@ export interface InteractionManagerProps {
 export class InteractionManager {
   public notifyCallback: Function;
   private _lastInteraction = 0;
-  private _lastHoveredNode: Node | null = null;
-  private _lastSelectedNode: Node | null = null;
+  private _lastHoveredNode: NodeInterface | null = null;
+  private _lastSelectedNode: NodeInterface | null = null;
 
   public nodeEvents: EventMap = undefined!;
   public edgeEvents: EventMap = undefined!;
@@ -93,6 +108,7 @@ export class InteractionManager {
     return this._lastInteraction;
   }
 
+  // eslint-disable-next-line max-statements, complexity
   onClick(info, event): void {
     const {object} = info;
 
@@ -101,12 +117,55 @@ export class InteractionManager {
     }
 
     if (object.isNode) {
-      if ((object as Node).isSelectable()) {
+      const node = object as NodeInterface;
+      const chainId = node.getPropertyValue('collapsedChainId');
+      const collapsedNodeIds = node.getPropertyValue('collapsedNodeIds');
+      const representativeId = node.getPropertyValue('collapsedChainRepresentativeId');
+      const isCollapsed = Boolean(node.getPropertyValue('isCollapsedChain'));
+      const hasChainMetadata =
+        chainId !== null &&
+        chainId !== undefined &&
+        Array.isArray(collapsedNodeIds) &&
+        collapsedNodeIds.length > 1 &&
+        representativeId !== null &&
+        representativeId !== undefined;
+      const isRepresentative = hasChainMetadata && representativeId === node.getId();
+
+      if (hasChainMetadata && isRepresentative) {
+        const layout: any = this.engine?.props?.layout;
+        if (layout && typeof layout.toggleCollapsedChain === 'function') {
+          const interactionSource = resolveChainInteractionSource(info ?? null);
+
+          // eslint-disable-next-line max-depth
+          if (shouldToggleCollapsedChain(isCollapsed, interactionSource)) {
+            const action = isCollapsed ? 'expand' : 'collapse';
+            const chainIdStr = String(chainId);
+            log.log(
+              0,
+              `InteractionManager: ${action} chain ${chainIdStr} via ${interactionSource}`
+            );
+            // eslint-disable-next-line no-console
+            console.log(
+              `InteractionManager: ${action} chain ${chainIdStr} via ${interactionSource}`
+            );
+            layout.toggleCollapsedChain(chainIdStr);
+            this._lastInteraction = Date.now();
+            this.notifyCallback();
+            // eslint-disable-next-line max-depth
+            if (this.nodeEvents.onClick) {
+              this.nodeEvents.onClick(info, event);
+            }
+            return;
+          }
+        }
+      }
+
+      if (node.isSelectable()) {
         if (this._lastSelectedNode) {
-          setNodeState(this._lastSelectedNode, NODE_STATE.DEFAULT);
+          setNodeState(this._lastSelectedNode, 'default');
         }
-        setNodeState(object, NODE_STATE.SELECTED);
-        this._lastSelectedNode = object as Node;
+        setNodeState(node, 'selected');
+        this._lastSelectedNode = node;
         this._lastInteraction = Date.now();
         this.notifyCallback();
       }
@@ -116,7 +175,7 @@ export class InteractionManager {
       }
     }
 
-    if (object.isEdge && this.edgeEvents.onClick) {
+    if ((object as EdgeInterface).isEdge && this.edgeEvents.onClick) {
       this.edgeEvents.onClick(info, event);
     }
   }
@@ -124,12 +183,11 @@ export class InteractionManager {
   _mouseLeaveNode(): void {
     const lastHoveredNode = this._lastHoveredNode;
 
-    if (!(lastHoveredNode.isSelectable() && lastHoveredNode.getState() === NODE_STATE.SELECTED)) {
+    if (!(lastHoveredNode.isSelectable() && lastHoveredNode.getState() === 'selected')) {
       // reset the last hovered node's state
-      const newState =
-        this._lastSelectedNode !== null && this._lastSelectedNode.id === this._lastHoveredNode?.id
-          ? NODE_STATE.SELECTED
-          : NODE_STATE.DEFAULT;
+      const lastSelectedId = this._lastSelectedNode?.getId();
+      const lastHoveredId = this._lastHoveredNode?.getId();
+      const newState = lastSelectedId !== undefined && lastSelectedId === lastHoveredId ? 'selected' : 'default';
       setNodeState(lastHoveredNode, newState);
     }
     // trigger the callback if exists
@@ -140,7 +198,7 @@ export class InteractionManager {
 
   _mouseEnterNode(info): void {
     // set the node's state to hover
-    setNodeState(info.object as Node, NODE_STATE.HOVER);
+    setNodeState(info.object as NodeInterface, 'hover');
     // trigger the callback if exists
     if (this.nodeEvents.onMouseEnter) {
       this.nodeEvents.onMouseEnter(info);
@@ -163,7 +221,9 @@ export class InteractionManager {
 
     // hover over on a node
     if (info.object.isNode) {
-      const isSameNode = this._lastHoveredNode && this._lastHoveredNode.id === info.object.id;
+      const lastHoveredId = this._lastHoveredNode?.getId();
+      const currentId = (info.object as NodeInterface).getId();
+      const isSameNode = lastHoveredId !== undefined && lastHoveredId === currentId;
       // stay in the same node
       if (isSameNode) {
         return;
@@ -202,9 +262,9 @@ export class InteractionManager {
     const bounds = info.layer.context.viewport.getBounds(); // [minX, minY, maxX, maxY]
     const x = Math.min(Math.max(coordinates[0], bounds[0]), bounds[2]);
     const y = Math.min(Math.max(coordinates[1], bounds[1]), bounds[3]);
-    this.engine.lockNodePosition(info.object, x, y);
+    this.engine.lockNodePosition(info.object as NodeInterface, x, y);
 
-    setNodeState(info.object, NODE_STATE.DRAGGING);
+    setNodeState(info.object as NodeInterface, 'dragging');
     this._lastInteraction = Date.now();
     this.notifyCallback();
     if (this.nodeEvents.onDrag) {
@@ -219,7 +279,7 @@ export class InteractionManager {
     if (this.resumeLayoutAfterDragging) {
       this.engine.resume();
     }
-    setNodeState(info.object, NODE_STATE.DEFAULT);
-    this.engine.unlockNodePosition(info.object);
+    setNodeState(info.object as NodeInterface, 'default');
+    this.engine.unlockNodePosition(info.object as NodeInterface);
   }
 }