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

Cycle detection


Open in a new window. 
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
  </style>
</head>
<body>
  <div id="graph-container"></div>

<script>
'use strict';
var ogma = new Ogma({
  container: 'graph-container'
});

// show directions
ogma.styles.addEdgeRule({
  shape: 'arrow'
});

var removedEdges = [];

function showCycles () {
  var cycle = ogma.algorithms.detectCycle();
  if (cycle) {
    // highlight cycle
    var edges = cycle.getAdjacentEdges({ bothExtremities: true });
    cycle.addClass('cycle');
    edges.addClass('cycle');

    // break cycle after a delay
    setTimeout(function () {
      var edge = edges.get(0);

      // store edge to re-add it later
      removedEdges.push({
        source: edge.getSource().getId(),
        target: edge.getTarget().getId()
      });

      ogma.removeEdge(edges.get(0));
      cycle.removeClass('cycle');
      edges.removeClass('cycle');
      setTimeout(showCycles, 1000);
    }, 5000);
  } else {
    // no more cycles, re-add the removed edges
    ogma.addEdges(removedEdges);
    removedEdges = [];
    showCycles();
  }
}


ogma.parse.jsonFromUrl('files/cycles.json')
  .then(function(graph) {
    ogma.setGraph(graph);
  })
  .then(ogma.view.locateGraph)
  .then(showCycles);


// pulsing style for the cycles
ogma.createClass('cycle', {
  edgeAttributes: {
    color: 'red'
  },
  nodeAttributes: {
    color: 'red',
    pulse: {
      enabled: true,
      width: 10,
      startColor: 'inherit'
    }
  }
});

</script>
</body>
</html>