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>
<div id="cy">
</div>

CSS

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

JavaScript

$(function() {
  w = $("#cy").width();
  h = $("#cy").height();
  console.log(w)
  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),

    boxSelectionEnabled: false,
    autounselectify: true,
    style: [{
      selector: '.className',
      style: {
        'color': 'white',
        'shape': 'rectangle',
        'background-color': 'red',
        'content': 'data(id)',
        width: ele => `${ele.data("width")}`,
        height: ele => `${ele.data("height")}`

      }},{
        selector: '.router',
        style: {
          'color': 'black',
          'background-color': '#ccc',
          'content': 'data(id)',
          width: ele => `${ele.data("width")}`,
          height: ele => `${ele.data("height")}`

        }}],
    elements:{
      "nodes": [
        {
          "data": {
            "id": "N",
            "name": "N",
            "type": "NetworkDummy",
            "width": w,
            "height": h/2
          },
          "classes": "className"
        },
        {
          "data": {
            "id": "C",
            "name": "C",
            "type": "ComputeDummy",
            "width": w,
            "height": h/2
          },
          "classes": "className"
        },
        {
          "data": {
            "id": "R1",
            "name": "R1",
            "type": "NetworkDummy",
            "width": 10,
            "height": 10,
            "parent": "N"
          },
          "classes": "router"
        },
        {
          "data": {
            "id": "H1",
            "name": "H1",
            "type": "ComputeDummy",
            "width": 100,
            "height": 100,
            "parent": "C"
          },
          "classes": "router"
        }
      ],
      "edges": [

        {
          "data": {
            "source": "N",
            "target": "C"
          }
        }
      ]
    },
    ready: function() {

      cy = this;
      // Start - Layout Configuration
      var layout0 =...