Cytoscape demo

by Rishi Kumar

HTML

<script src="https://cdn.rawgit.com/cpettitt/dagre/master/dist/dagre.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/master/cytoscape-dagre.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/master/dist/dagre.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.8.2/cytoscape.min.js"></script>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.5.4/cytoscape.min.js"></script> -->

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.21/cytoscape.min.js"></script> -->

<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/master/cytoscape-dagre.js"></script>
<div id="cy"></div>

CSS

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

JavaScript

$(function () { // on dom ready

let cy = cytoscape({
  container: document.getElementById('cy'),

  layout: {
   name: 'dagre',
    nodeSep: 1, 
    edgeSep: undefined, 
    rankSep: 20,
    rankDir: 'BT',
    ranker: 'tight-tree'
  },
  
  style: [{
        selector: 'node',
        css: {
            'content': 'data(uiProp.name)',
            'text-max-width': '150px',
            'text-valign': 'bottom',
            'text-halign': 'center',
            'font-family': 'Roboto',
            'font-size': '10px',
            'font-weight': '600',
            'text-wrap': 'ellipsis'
        }
    },
    {
        selector: 'node.displayNone',
        css: {
            'display': 'none'
        }
    },
    {
        selector: "node.child-nodes",
        css: {
            'background-clip': 'none',
            'background-opacity': 1,
            'font-size': '10px',
            'min-zoomed-font-size': '10px',
            'background-color': 'red',
            'shape': 'rectangle'
        }
    },
    {
        selector: '$node > node',
        css: {
            'text-valign': 'top',
            'text-halign': 'left'
        }
    },
    {
        selector: 'edge',
        style: {
            'width': '1px',
            'arrow-scale': 1,
            'curve-style': 'taxi',
            //'curve-style': 'bezier',
            'line-color': 'data(uiProp.linkColor)',
            'target-arrow-color': 'data(uiProp.linkColor)',
            'target-arrow-fill': 'filled',
            'target-arrow-shape': 'triangle',
            'source-endpoint': 'outside-to-node',
            'target-endpoint': 'outside-to-node',
            'source-distance-from-node': '10px',
            'target-distance-from-node': '10px',
            "taxi-direction": "auto",
            "taxi-turn": 20,
            "taxi-turn-min-distance": 5
        }
    },
    {
        selector: 'node.parent',
        css: {
            "text-background-opacity": 1,
            "text-margin-x":...