Demo: ElkJS partitioning setting to group nodes by type & ensure ordering. Example of visualizing complex networks

[cliffordfajardo]

Background Context

I needed to visualize a bunch of nodes and lay them out in a particular order from left to right and always guarentee they are in a specific order.

Conceptually, what I wanted was to group certain items by column/partition kind of like a Sankey diagram
Essentially I needed a way to tell Elkjs that some set of nodes belong to a certain column or partition like this:

It took me a long time to figure out how to do this so I'd figure other folks might find this helpful

How this works

You need to activate "partioning" inside of layoutOptions to activate this settings globally for your graph:

<Canvas 
   nodes={nodes}
   edges={edges}
   layoutOptions={{
    'elk.algorithm': 'layered',              // < ------------✅ 
    'elk.partitioning.activate': 'true',  // < ------------✅ 
  }}
/>

Then in your node objects you need to pass layoutOptions property with the ordering like this:

const nodes = [
  {
    id: 'node01',
    text: 'node01',
    className: 'blue-green',
    layoutOptions: {
      'partitioning.partition': 1, / < ------------✅ 
    },
  },
  {
    id: 'node02',
    text: 'node02',
    className: 'blue-green',
    layoutOptions: {
      'partitioning.partition':  2, // < ------------✅ 
    },
  },
]

Example Code / Visualization

I have a simpler example of the layout above in this stackblitz code sandbox:
https://stackblitz.com/edit/react-ts-mgkmmq?file=data%2Fedges.ts,data%2Fnodes.ts,App.tsx,data%2Findex.ts