Appearance

  2. Examples
  3. Layouts

Hierarchical sort siblings ​

layoutalgorithmshierarchical-layout

This example shows how you can make the hierarchical layout sort the sibling nodes.
It can be usefull to quickly see which nodes are important in the hierarchy.
Just pass to the layout the path to a datafield in your nodes and Ogma will do the rest
Ordering of siblings is guaranteed, but the general ordering from left to right is not, because we prioritize decrossing over ordering.

ts
import Ogma from '@linkurious/ogma';
import './styles.css';
import { GUI } from '@linkurious/ogma-ui-kit/gui';
import chroma from 'chroma-js';

const ogma = new Ogma({
  container: 'graph-container'
});

const colors = chroma.scale(['#FFD166', '#992535']).colors(10);

ogma.styles.addNodeRule({
  color: n => (n.getData('sIndex') ? colors[+n.getData('pos')] : undefined),
  text: {
    content: n => `${n.getData('sIndex') || ''}`,
    size: 18,
    minVisibleSize: 0,
    font: 'IBM Plex Sans'
  }
});
ogma.styles.addEdgeRule({
  width: 0.5
});

const options = {
  sortSiblings: true
};
const gui = new GUI();
gui
  .add(options, 'sortSiblings')
  .name('Sort siblings')
  .onChange(value => {
    layout(value);
  });

function layout(sortSiblings: boolean) {
  return ogma.layouts.hierarchical({
    levelDistance: 50,
    duration: 0,
    siblingIndex: sortSiblings ? 'sIndex' : undefined,
    locate: true
  });
}
const hasIndex = new Set([36, 8, 32, 35, 3, 2, 28, 27, 26, 1]);
const graph = await Ogma.parse.jsonFromUrl('files/dataflow-small.json');
let counter = 0;
graph.nodes.forEach((node, i) => {
  if (!hasIndex.has(i)) return;
  delete node.attributes;
  node.data = { sIndex: i, pos: counter++ };
});
await ogma.setGraph(graph);
await layout(options.sortSiblings);
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    <div id="graph-container"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>
css
:root {
  --base-font-family: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
  font-family: var(--base-font-family);
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}