Appearance

  2. Examples
  3. Transformations

Easy Grouping new ​

transformationseasy-groupinglayoutgroupingvisual-grouping

Easy Grouping API Example ​

This example demonstrates the new easy-to-use grouping API in Ogma, featuring two powerful methods:

Features ​

1. NodeList.group() ​

Groups multiple nodes together into a meta-node with a simple method call. This example shows:

  • Grouping nodes by category (Technology, Finance, Healthcare, Education)
  • Grouping nodes by region (North, South, East, West)
  • Custom node generators to style grouped nodes
  • Toggle functionality to group/ungroup nodes

2. Node.addSubGraph() ​

Replaces a single node with a group containing a specified subgraph. This example shows:

  • Adding a small subgraph (3 nodes, 3 edges) to any selected node
  • Specifying a layout for the subgraph (force layout)
  • Creating hierarchical graph structures on-the-fly

Usage ​

  1. Group by Category: Click this button to group all nodes by their category attribute
  2. Group by Region: Click this button to group all nodes by their region attribute
  3. Add SubGraph: Select a single node, then click this button to replace it with a group containing a small subgraph
  4. Reset All: Clear all transformations and return to the original graph
  5. Inspect Groups: Click on any grouped node (purple) to see its sub-nodes logged in the console

API Reference ​

NodeList.group() ​

typescript
nodeList.group(options?: GroupByOptions): Promise<void>

Groups the nodes in the list together into a meta-node. Options include:

  • nodeGenerator: Function to customize the meta-node appearance
  • duration: Animation duration in milliseconds
  • padding: Padding around the grouped content
  • showContents: Whether to show the contents of the group

Node.addSubGraph() ​

typescript
node.addSubGraph(subGraph: RawGraph, layout?: SubLayout): Promise<void>

Replaces the node with a group containing the specified subgraph:

  • subGraph: The graph data (nodes and edges) to add inside the node
  • layout: Layout configuration for arranging the subgraph

Key Concepts ​

  • Virtual Nodes: Grouped nodes are marked as "virtual" and can be identified with node.isVirtual()
  • Sub-nodes: Access the nodes inside a group with node.getSubNodes()
  • Meta-nodes: The parent group of a node can be accessed with node.getMetaNode()

Learn More ​