12 Adjacency Graph Builder Demo

Building a graph with the AdjacencyGraphBuilder

In this tutorial step we show how to use AdjacencyGraphBuilder to build a graph from data, where the relationship information between the nodes is part of the node data entry.

The data

Consider the following list of data objects, which represents a basic organization chart. In this example, every data object has an id and optionally a colleagues property. The colleagues property, if available, contains a list with the ids of the colleagues of the associated node object.

{
  id: '0',
  position: 'Chief Executive Officer',
  name: 'Eric Joplin',
  colleagues: ['0_0', '0_1']
},
{
  id: '0_0',
  position: 'Chief Executive Assistant',
  name: 'Gary Roberts',
  colleagues: ['0_0_0', '0_0_1']
},
{
  id: '0_0_0',
  position: 'Senior Executive Assistant',
  name: 'Alexander Burns'
},
{
  id: '0_0_1',
  position: 'Junior Executive Assistant',
  name: 'Linda Newland'
},
{
  id: '0_1',
  position: 'Vice President of Production',
  name: 'Amy Kain',
  colleagues: ['0_1_0']
},
{ id: '0_1_0', position: 'Production Supervisor', name: 'Kathy Maxwell' }

Building the graph

In the first step, we instantiate the AdjacencyGraphBuilder and configure an instance of AdjacencyNodesSource.

const adjacencyGraphBuilder = new AdjacencyGraphBuilder(graph)

const adjacencyNodesSource = adjacencyGraphBuilder.createNodesSource(
  nodesData,
  (item) => item.id
)

In the second step, we configure the colleagues or successors on the AdjacencyNodesSource. For edge creation, we use an EdgeCreator with a default configuration.

adjacencyNodesSource.addSuccessorIds(
  (data) => data.colleagues,
  new EdgeCreator({ defaults: graph.edgeDefaults })
)

Finally, we add labels to the graph building process by providing a label binding for the NodesSource's NodeCreator.

adjacencyNodesSource.nodeCreator.createLabelBinding({
  text: (dataItem) => dataItem.name
})

Note	AdjacencyGraphBuilder supports the same labeling functionality as the GraphBuilder.

In this tutorial step, we built a graph with AdjacencyGraphBuilder using the ids provided by the data entries for the calculation of successors. Of course, it is also possible to define predecessors similarly.

Yet another functionality of AdjacencyGraphBuilder is to use predecessor/successor sources. See the Developer’s Guide section about AdjacencyGraphBuilder for an in-depth discussion.

Note	Please have a look in this tutorial step’s demo code in `adjacency-graph-building.ts` and play around with the different ways to import business data.