Filter nodes

This example shows how to filter nodes in the graph. It uses the addNodeFilter API to filter out companies which did not raise more than 300 million USD.

index.tsindex.htmlstyles.css

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

interface ND {
  categories: string[];
  properties: {
    funding_total: number;
  };
}

interface ED {}

const ogma = new Ogma<ND, ED>({
  container: 'graph-container'
});

let filter: NodeFilter<ND, ED>;
const graph = await Ogma.parse.jsonFromUrl<ND, ED>('files/solarCity.json');
await ogma.setGraph(graph);
await ogma.view.locateGraph();

// Show nodes of category COMPANY with funding total >= 300 millions
// and hide nodes with smaller funding total.
setTimeout(() => {
  filter = ogma.transformations.addNodeFilter(n => {
    return (
      n.getData('categories') &&
      n.getData('categories').includes('COMPANY') &&
      n.getData('properties.funding_total') > 300000000
    );
  });

  filter.whenApplied().then(() => {
    console.log('Filter done!');
  });
}, 1500);

// Clear the previously created filter
// filter.destroy();

(
  document.getElementById('toggle-filter') as HTMLButtonElement
).addEventListener('click', evt => {
  evt.preventDefault();
  filter.toggle();
});

html

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

    <link
      href="https://cdn.jsdelivr.net/npm/lucide-static@0.483.0/font/lucide.css"
      rel="stylesheet"
    />
    <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"
    />
    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <!-- we force the loading of the icon font -->
    <i class="icon-camera" style="color: rgba(0, 0, 0, 0)"></i>
    <div id="graph-container"></div>
    <button id="toggle-filter">Toggle filter</button>
    <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;
}

#toggle-filter {
  border-radius: 4px;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  position: absolute;
  top: 2em;
  right: 2em;
}

Filter nodes ​

Filter nodes