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

package/src/core/interaction-manager.ts

@@ -2,33 +2,49 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {EDGE_STATE, NODE_STATE, ValueOf} from './constants';
+import type {EdgeState, NodeState} from './constants';
 import {Edge} from '../graph/edge';
 import {Node} from '../graph/node';
 import {GraphEngine} from './graph-engine';
+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 {
   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: Node, 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);
     });
@@ -93,6 +109,7 @@ export class InteractionManager {
     return this._lastInteraction;
   }
 
+  // eslint-disable-next-line max-statements, complexity
   onClick(info, event): void {
     const {object} = info;
 
@@ -101,12 +118,55 @@ export class InteractionManager {
     }
 
     if (object.isNode) {
+      const node = object as Node;
+      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 ((object as 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();
       }
@@ -124,12 +184,12 @@ 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;
+          ? 'selected'
+          : 'default';
       setNodeState(lastHoveredNode, newState);
     }
     // trigger the callback if exists
@@ -140,7 +200,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 Node, 'hover');
     // trigger the callback if exists
     if (this.nodeEvents.onMouseEnter) {
       this.nodeEvents.onMouseEnter(info);
@@ -204,7 +264,7 @@ export class InteractionManager {
     const y = Math.min(Math.max(coordinates[1], bounds[1]), bounds[3]);
     this.engine.lockNodePosition(info.object, x, y);
 
-    setNodeState(info.object, NODE_STATE.DRAGGING);
+    setNodeState(info.object, '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);
+    setNodeState(info.object, 'default');
     this.engine.unlockNodePosition(info.object);
   }
 }

package/src/graph/edge.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 // Basic data structure of an edge
-import {EDGE_STATE} from '../core/constants';
+import type {EdgeState} from '../core/constants';
 import {Node} from './node';
 
 export interface EdgeOptions {
@@ -36,7 +36,7 @@ export class Edge {
   /** Nodes at either end of this edge. */
   private readonly _connectedNodes: Record<string, Node> = {};
   /** Edge state. */
-  public state = EDGE_STATE.DEFAULT;
+  public state: EdgeState = 'default';
 
   /**
    * The constructor
@@ -119,17 +119,17 @@ export class Edge {
 
   /**
    * Set edge state
-   * @param state - one of EDGE_STATE
+   * @param state - the new interaction state for the edge
    */
-  setState(state: string): void {
+  setState(state: EdgeState): void {
     this.state = state;
   }
 
   /**
    * Get edge state
-   * @returns state - one of EDGE_STATE
+   * @returns state - the current interaction state for the edge
    */
-  getState(): string {
+  getState(): EdgeState {
     return this.state;
   }
 

package/src/graph/graph.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {log} from '../utils/log';
+import {warn} from '../utils/log';
 import {Cache} from '../core/cache';
 import {Edge} from './edge';
 import {Node} from './node';
@@ -157,7 +157,7 @@ export class Graph extends EventTarget {
     const targetNode = this.findNode(edge.getTargetNodeId());
 
     if (!sourceNode || !targetNode) {
-      log.warn(`Unable to add edge ${edge.id},  source or target node is missing.`)();
+      warn(`Unable to add edge ${edge.id},  source or target node is missing.`);
       return;
     }
 
@@ -194,7 +194,7 @@ export class Graph extends EventTarget {
   removeNode(nodeId: string | number): void {
     const node = this.findNode(nodeId);
     if (!node) {
-      log.warn(`Unable to remove node ${nodeId} - doesn't exist`)();
+      warn(`Unable to remove node ${nodeId} - doesn't exist`);
       return;
     }
     // remove all edges connect to this node from map
@@ -232,7 +232,7 @@ export class Graph extends EventTarget {
   removeEdge(edgeId: string | number): void {
     const edge = this.findEdge(edgeId);
     if (!edge) {
-      log.warn(`Unable to remove edge ${edgeId} - doesn't exist`)();
+      warn(`Unable to remove edge ${edgeId} - doesn't exist`);
       return;
     }
     const sourceNode = this.findNode(edge.getSourceNodeId());
@@ -261,7 +261,7 @@ export class Graph extends EventTarget {
   getConnectedEdges(nodeId: string | number): Edge[] {
     const node = this.findNode(nodeId);
     if (!node) {
-      log.warn(`Unable to find node ${nodeId} - doesn't exist`)();
+      warn(`Unable to find node ${nodeId} - doesn't exist`);
       return [];
     }
     return node.getConnectedEdges();
@@ -275,7 +275,7 @@ export class Graph extends EventTarget {
   getNodeSiblings(nodeId: string | number): Node[] {
     const node = this.findNode(nodeId);
     if (!node) {
-      log.warn(`Unable to find node ${nodeId} - doesn't exist`)();
+      warn(`Unable to find node ${nodeId} - doesn't exist`);
       return [];
     }
     return node.getSiblingIds().map((siblingNodeId) => this.findNode(siblingNodeId));
@@ -289,7 +289,7 @@ export class Graph extends EventTarget {
   getDegree(nodeId: string | number): number {
     const node = this.findNode(nodeId);
     if (!node) {
-      log.warn(`Unable to find node ${nodeId} - doesn't exist`)();
+      warn(`Unable to find node ${nodeId} - doesn't exist`);
       return 0;
     }
     return node.getDegree();

package/src/graph/node.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {NODE_STATE, ValueOf} from '../core/constants';
+import type {NodeState} from '../core/constants';
 import {Edge} from './edge';
 
 /** Properties for creating a new node */
@@ -23,7 +23,7 @@ export class Node {
   /** List edges. */
   private _connectedEdges: Record<string, Edge> = {};
   /** Interaction state of the node. */
-  public state: ValueOf<typeof NODE_STATE> = NODE_STATE.DEFAULT;
+  public state: NodeState = 'default';
   /** Can the node be selected? */
   private _selectable: boolean;
   /** Should the state of this node affect the state of the connected edges? */
@@ -150,17 +150,17 @@ export class Node {
 
   /**
    * Set node state
-   * @param state - one of NODE_STATE
+   * @param state - the new interaction state of the node
    */
-  setState(state: ValueOf<typeof NODE_STATE>): void {
+  setState(state: NodeState): void {
     this.state = state;
   }
 
   /**
    * Get node state
-   * @returns state - one of NODE_STATE
+   * @returns state - the current interaction state of the node
    */
-  getState(): ValueOf<typeof NODE_STATE> {
+  getState(): NodeState {
     return this.state;
   }
 

package/src/index.ts

@@ -10,21 +10,44 @@ export {Edge} from './graph/edge';
 export {GraphEngine} from './core/graph-engine';
 
 // graph-layers layouts
-export type {GraphLayoutState} from './core/graph-layout';
+export type {
+  GraphLayoutProps,
+  GraphLayoutState,
+  GraphLayoutEventDetail
+} from './core/graph-layout';
 export {GraphLayout} from './core/graph-layout';
 
-export {SimpleLayout} from './layouts//simple-layout';
+export {SimpleLayout} from './layouts/simple-layout';
 export {D3ForceLayout} from './layouts/d3-force/d3-force-layout';
+export {D3DagLayout} from './layouts/d3-dag/d3-dag-layout';
 export {GPUForceLayout} from './layouts/gpu-force/gpu-force-layout';
-export {RadialLayout as _RadialLayout} from './layouts/experimental/radial-layout';
-export {ForceMultiGraphLayout as _MultigraphLayout} from './layouts/experimental/force-multi-graph-layout';
-export {HivePlotLayout as _HivePlotLayout} from './layouts/experimental/hive-plot-layout';
+export {RadialLayout} from './layouts/experimental/radial-layout';
+export {ForceMultiGraphLayout} from './layouts/experimental/force-multi-graph-layout';
+export {HivePlotLayout} from './layouts/experimental/hive-plot-layout';
 
-export {NODE_STATE, NODE_TYPE, EDGE_TYPE, EDGE_DECORATOR_TYPE, MARKER_TYPE} from './core/constants';
+export type {Marker, NodeState, NodeType, EdgeType, EdgeDecoratorType, LayoutState} from './core/constants';
 
 // deck.gl components
 export {GraphLayer} from './layers/graph-layer';
 export {EdgeLayer} from './layers/edge-layer';
+export {StyleEngine} from './style/style-engine';
+export {GraphStyleEngine} from './style/graph-style-engine';
+export type {
+  GraphStylesheet,
+  GraphStylesheetInput,
+  GraphStylesheetParsed,
+  GraphStyleAttributeReference,
+  GraphStyleScale,
+  GraphStyleScaleType,
+  GraphStyleValue
+} from './style/graph-style-engine';
+export {GraphStylesheetSchema} from './style/graph-style-engine';
+export {
+  DEFAULT_GRAPH_LAYER_STYLESHEET,
+  type GraphLayerStylesheet,
+  type GraphLayerEdgeStyle,
+  type GraphLayerNodeStyle
+} from './style/graph-layer-stylesheet';
 
 // Widgets
 
@@ -40,3 +63,5 @@ export {log} from './utils/log';
 // DEPRECATED
 export {createGraph} from './loaders/create-graph';
 export {JSONLoader} from './loaders/simple-json-graph-loader';
+
+export {MARKER_TYPE, NODE_STATE,EDGE_STATE,NODE_TYPE,EDGE_TYPE,EDGE_DECORATOR_TYPE,LAYOUT_STATE} from './_deprecated/old-constants';

package/src/layers/common-layers/marker-layer/marker-list.ts

@@ -2,67 +2,65 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-/* eslint-disable */
-export const MarkerList = {
-  'bell-filled': 'bell-filled',
-  bell: 'bell',
-  'bookmark-filled': 'bookmark-filled',
-  bookmark: 'bookmark',
-  'cd-filled': 'cd-filled',
-  cd: 'cd',
-  checkmark: 'checkmark',
-  'circle-check-filled': 'circle-check-filled',
-  'circle-check': 'circle-check',
-  'circle-filled': 'circle-filled',
-  'circle-i-filled': 'circle-i-filled',
-  'circle-i': 'circle-i',
-  'circle-minus-filled': 'circle-minus-filled',
-  'circle-minus': 'circle-minus',
-  'circle-plus-filled': 'circle-plus-filled',
-  'circle-plus': 'circle-plus',
-  'circle-questionmark-filled': 'circle-questionmark-filled',
-  'circle-questionmark': 'circle-questionmark',
-  'circle-slash-filled': 'circle-slash-filled',
-  'circle-slash': 'circle-slash',
-  'circle-x-filled': 'circle-x-filled',
-  'circle-x': 'circle-x',
-  circle: 'circle',
-  'diamond-filled': 'diamond-filled',
-  diamond: 'diamond',
-  'flag-filled': 'flag-filled',
-  flag: 'flag',
-  gear: 'gear',
-  'heart-filled': 'heart-filled',
-  heart: 'heart',
-  'location-marker-filled': 'location-marker-filled',
-  'location-marker': 'location-marker',
-  'octagonal-star-filled': 'octagonal-star-filled',
-  'octagonal-star': 'octagonal-star',
-  'person-filled': 'person-filled',
-  person: 'person',
-  'pin-filled': 'pin-filled',
-  pin: 'pin',
-  'plus-small': 'plus-small',
-  plus: 'plus',
-  'rectangle-filled': 'rectangle-filled',
-  rectangle: 'rectangle',
-  'star-filled': 'star-filled',
-  star: 'star',
-  'tag-filled': 'tag-filled',
-  tag: 'tag',
-  'thumb-down-filled': 'thumb-down-filled',
-  'thumb-down': 'thumb-down',
-  'thumb-up': 'thumb-up',
-  'thumb_up-filled': 'thumb_up-filled',
-  'triangle-down-filled': 'triangle-down-filled',
-  'triangle-down': 'triangle-down',
-  'triangle-left-filled': 'triangle-left-filled',
-  'triangle-left': 'triangle-left',
-  'triangle-right-filled': 'triangle-right-filled',
-  'triangle-right': 'triangle-right',
-  'triangle-up-filled': 'triangle-up-filled',
-  'triangle-up': 'triangle-up',
-  'x-small': 'x-small',
-  x: 'x'
-};
-/* eslint-enable */
+/** Supported marker types */
+export type Marker =
+  | 'bell-filled'
+  | 'bell'
+  | 'bookmark-filled'
+  | 'bookmark'
+  | 'cd-filled'
+  | 'cd'
+  | 'checkmark'
+  | 'circle-check-filled'
+  | 'circle-check'
+  | 'circle-filled'
+  | 'circle-i-filled'
+  | 'circle-i'
+  | 'circle-minus-filled'
+  | 'circle-minus'
+  | 'circle-plus-filled'
+  | 'circle-plus'
+  | 'circle-questionmark-filled'
+  | 'circle-questionmark'
+  | 'circle-slash-filled'
+  | 'circle-slash'
+  | 'circle-x-filled'
+  | 'circle-x'
+  | 'circle'
+  | 'diamond-filled'
+  | 'diamond'
+  | 'flag-filled'
+  | 'flag'
+  | 'gear'
+  | 'heart-filled'
+  | 'heart'
+  | 'location-marker-filled'
+  | 'location-marker'
+  | 'octagonal-star-filled'
+  | 'octagonal-star'
+  | 'person-filled'
+  | 'person'
+  | 'pin-filled'
+  | 'pin'
+  | 'plus-small'
+  | 'plus'
+  | 'rectangle-filled'
+  | 'rectangle'
+  | 'star-filled'
+  | 'star'
+  | 'tag-filled'
+  | 'tag'
+  | 'thumb-down-filled'
+  | 'thumb-down'
+  | 'thumb-up'
+  | 'thumb_up-filled'
+  | 'triangle-down-filled'
+  | 'triangle-down'
+  | 'triangle-left-filled'
+  | 'triangle-left'
+  | 'triangle-right-filled'
+  | 'triangle-right'
+  | 'triangle-up-filled'
+  | 'triangle-up'
+  | 'x-small'
+  | 'x';