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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-navigator.js"></script>

<div id="cytoscape"></div>

CSS

#cytoscape {
  width: 100%;
  height: 650px;
  border: 1px solid #aaa;
}
.cytoscape-navigator{
	position: fixed;
	border: 1px solid #000;
	background: #fff;
	z-index: 99999;
	width: 400px;
	height: 400px;
	bottom: 0;
	right: 0;
	overflow: hidden;
}

.cytoscape-navigator > img{
	max-width: 100%;
	max-height: 100%;
}

.cytoscape-navigator > canvas{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 101;
}

.cytoscape-navigatorView{
	position: absolute;
	top: 0;
	left: 0;
	cursor: move;
	background: #B7E1ED;
	-moz-opacity: 0.50;
	opacity: 0.50;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
	z-index: 102;
}

.cytoscape-navigatorOverlay{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 103;
}

JavaScript

var nodes = []

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

//Add Dummy Hypervisors & HyperVisors, VSwitch, vms
noOfHypervisors = 6
_.each(_.range(1,noOfHypervisors), h => {
  nodes.push(
    {
      "data": {
        "id": "H"+h,
        "name": "H"+h,
        "subtype": "hypervisor",
        "type": "compute"
      }
    })
  //Add Random VSwitches
  _.each(_.range(1,3), vs => {
    nodes.push(
      {
        "data": {
          "id": "H"+h+"-"+"VS"+vs,
          "name": "H"+h+"-"+"VS"+vs,
          "type": "compute",
          "subtype": "vswitch",
          "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,
            "type": "compute",
            "subtype": "vm",
            "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:...