Other versions of this documentation User manual Administration manual REST API documentation Ogma documentation Documentation home Linkurious website
All versions of this documentation
X

Neighbor generation


Open in a new window. 
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
    button { position: absolute; top:10px; left: 10px; }
  </style>
</head>
<body>
<div id="graph-container"></div>
<button id="btn" onclick="toggle()">Generate</button>
</body>
<script>
  'use strict';

  var ogma = new Ogma({
    container: 'graph-container',
    renderer: 'canvas',
    graph: {
      nodes: [
        {id: 0, data: {type: 'person', name: 'John Smith', country: 'USA'}, attributes: {x: 0, y: 0}},
        {id: 2, data: {type: 'person', name: 'James Brown', country: 'USA'}, attributes: {x: 60, y: 0}}
      ]
    }
  });

  var ICONS = {
    person: '\uf007',
    country: '\uf024'
  };

  var COLORS = {
    person: 'orange',
    country: 'dodgerblue'
  };

  ogma.styles.addRule({
    nodeAttributes: {
      text: function(node) {
        return node.getData('name');
      },
      color: function(node) {
        return COLORS[node.getData('type')];
      },
      icon: {
        content: function(node) {
          return ICONS[node.getData('type')];
        },
        font: 'FontAwesome'
      }
    }
  });

  var button = document.getElementById('btn');
  var transformation = null;

  function enableButton() {
    button.disabled = false;
    button.textContent = button.textContent === 'Generate' ? 'Undo' : 'Generate';
  }

  function toggle() {
    if (transformation) {
      transformation.destroy({duration: 500}).then(enableButton);
      button.disabled = true;
      transformation = null;
    } else {
      transformation = ogma.transformations.addNeighborGeneration({
        selector: function(node) {
          return node.getData('type') === 'person';
        },
        neighborIdFunction: function(node) {
          return node.getData('country');
        },
        nodeGenerator: function(countryName, nodes) {
          console.log('node created from nodes', nodes.getData('name'));

          return { data: { type: 'country', name: countryName } };
        },
        duration: 500
      });
      button.disabled = true;
      transformation.whenApplied().then(enableButton);
    }
  }
</script>
</html>