Drilldown API for grouping new

This example shows how to use the DrillDown api can be used to interactively explore the graph by replacing the nodes with grouped content. Each time you click on a node, the drilldown will open it and show the underlying nodes and edges.

index.tsindex.htmlstyles.css

import Ogma, { Node } from '@linkurious/ogma';

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

ogma.styles.addNodeRule({
  color: node =>
    node.getData('depth') === 1
      ? '#ccc'
      : node.getData('depth') === 2
        ? '#aaa'
        : '#777'
});
ogma.styles.addEdgeRule({
  color: '#ada'
});

/**
 * In a real world scenario, this function would
 * fetch the subnodes of a node from a server.
 */
async function fetchSubNodes(node: Node) {
  const id = node.getId();
  const nodes = [
    { id: `${id} - 1` },
    { id: `${id} - 2` },
    { id: `${id} - 3` },
    { id: `${id} - 4` }
  ];
  const edges = [
    {
      source: `${id} - 1`,
      target: `${id} - 2`
    },
    {
      source: `1 - 1`,
      target: `${id} - 2`
    }
  ];
  return Promise.resolve({ nodes, edges });
}
const drilldown = ogma.transformations.addDrillDown({
  onGetSubgraph: fetchSubNodes,
  duration: 1000,
  nodeGenerator: () => {
    return {
      data: {
        open: true
      }
    };
  },
  onGroupUpdate: (group, children) => {
    return ogma.layouts.force({ nodes: children, duration: 0 });
  },
  showContents: group => group.getData('open')
});
ogma.transformations.onGroupsUpdated(() => {
  return ogma.layouts.force({ duration: 0 });
});
ogma.events.on('doubleclick', ({ target }) => {
  if (!target || !target.isNode) return;
  if (target.isVirtual()) {
    return target.setData('open', !target.getData('open'));
  }
  if (target.getData('depth') > 2) return;
  drilldown.drill(target);
});

// load the base graph
(async () => {
  await ogma.setGraph({
    nodes: [{ id: 0 }, { id: 1 }, { id: 2 }],
    edges: [
      { source: 0, target: 1 },
      { source: 1, target: 2 },
      { source: 2, target: 0 }
    ]
  });
  await ogma.layouts.force({ locate: true });
})();

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

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

Drilldown API for grouping new ​

Drilldown API for grouping new