Cytoscape multiple layouts

Cytoscape multiple layouts

by shiv_veerashetty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.9/cytoscape.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.layout/1.4.3/jquery.layout.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-undo-redo.js"></script>
<script src="https://unpkg.com/numeric/numeric-1.2.6.js"></script>
<script src="https://unpkg.com/layout-base/layout-base.js"></script>
<script src="https://unpkg.com/cose-base/cose-base.js"></script>
<script src="https://unpkg.com/cytoscape-layout-utilities/cytoscape-layout-utilities.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-expand-collapse.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-fcose.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/dagre.js"></script>
<script src="https://cytoscape.org/cytoscape.js-dagre/cytoscape-dagre.js"></script>
<script src="https://cytoscape.org/cytoscape.js-automove/cytoscape-automove.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-cose-bilkent.js"></script>
<script src="https://unpkg.com/[email protected]/klay.js"></script>
<script src="https://cytoscape.org/cytoscape.js-klay/cytoscape-klay.js"></script>
<div id="cy">
</div>

CSS

#cy {
  width: 100%;
  height: 800px;
  border: 1px solid #aaa;
}

JavaScript

var nodes = []

//Add Routers
noOfRouters = 10
_.each(_.range(1,noOfRouters), o => {
  nodes.push(
    {
      "data": {
        "id": "R"+o,
        "name": "R"+o,
        "reposition": "no"
      }
    })
})

//Add Dummy Hypervisors & HyperVisors, VSwitch, vms
noOfHypervisors = 5
_.each(_.range(1,noOfHypervisors), h => {
  nodes.push(
    {
      "data": {
        "id": "H"+h,
        "name": "H"+h,
        "reposition": "relative",
        "type": "hypervisor"
      }
    })
  //Add Random VSwitches
  _.each(_.range(1,3), vs => {
    nodes.push(
      {
        "data": {
          "id": "H"+h+"-"+"VS"+vs,
          "name": "H"+h+"-"+"VS"+vs,
          "reposition": "relative",
          "father": "H"+h
        }
      })
    _.each(_.range(1,5), vm => {
      nodes.push(
        {
          "data": {
            "id": "H"+h+"-"+"VS"+vs+"-"+"VM"+vm,
            "name": "H"+h+"-"+"VS"+vs+"VM"+vm,
            "reposition": "relative",
            "father": "H"+h
          }
        })
    })
  })
})

var links = [
  {
    data: {
      "source": "R1",
      "target": "R1"
    }
  },
  {
    data: {
      "source": "R1",
      "target": "R3"
    }
  },
  {
    data: {
      "source": "R1",
      "target": "R4"
    }
  },
  {
    data: {
      "source": "R4",
      "target": "R7"
    }
  },
  {
    data: {
      "source": "R9",
      "target": "R1"
    }
  },
  {
    data: {
      "source": "R6",
      "target": "R3"
    }
  },
  {
    data: {
      "source": "R1",
      "target": "H1"
    }
  },
  {
    data: {
      "source": "R8",
      "target": "H2-VS1-VM2"
    }
  }
]

//Add Hyperisor to VSwitch Links
_.each(_.range(1,noOfHypervisors), h=>{
  _.each(_.range(1,3), vs=>{
    links.push({
      data: {
        "source": "H"+h,
        "target": "H"+h+"-"+"VS"+vs
      }
    })
  })
})
var data = {
  nodes: nodes,
  edges: links
}


$(function() {
  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),

    boxSelectionEnabled: false,
   ...