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

CSS

#cy {
  width: 1200px;
  height: 900px;
  border: 1px solid #aaa;
}

JavaScript

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

    boxSelectionEnabled: false,
    autounselectify: true,
    style: [{
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center',
        'shape': 'rectangle'
      }
    }, {
      selector: '$node > node',
      css: {
        'padding-top': '25px',
        'text-margin-y': '20',
        'text-margin-x': '50',
        'text-valign': 'top',
        'text-halign': 'left',
        'background-color': '#bbb'
      }
    }, {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    }, {
      selector: ':selected',
      css: {
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }
    }],
    elements:{"nodes":[{"data":{"id":"R1","name":"R1","type":"Router"}},{"data":{"id":"R2","name":"R2","type":"Router"}},{"data":{"id":"R3","name":"R3","type":"Router"}},{"data":{"id":"R4","name":"R4","type":"Router"}},{"data":{"id":"R5","name":"R5","type":"Router"}},{"data":{"id":"R6","name":"R6","type":"Router"}},{"data":{"id":"R7","name":"R7","type":"Router"}},{"data":{"id":"R8","name":"R8","type":"Router"}},{"data":{"id":"R9","name":"R9","type":"Router"}},{"data":{"id":"H1-D","name":"H1-D","type":"Hyperviser Dummy"}},{"data":{"id":"H1","name":"H1","type":"Hyperviser"}},{"data":{"id":"H1-S1","name":"H1-S1","type":"vswitch"}},{"data":{"id":"H1-S2","name":"H1-S2","type":"vswitch"}},{"data":{"id":"H1-S2-V1","name":"H1-S2-V1","type":"vm"}},{"data":{"id":"H1-S2-V2","name":"H1-S2-V2","type":"vm"}},{"data":{"id":"H1-S2-V3","name":"H1-S2-V3","type":"vm"}},{"data":{"id":"H1-S1-V1","name":"H1-S1-V1","type":"vm"}},{"data":{"id":"H1-S1-V2","name":"H1-S1-V2","type":"vm"}},{"data":{"id":"H1-S1-V3","name":"H1-S1-V3","type":"vm"}},{"data":{"id":"H2-D","name":"H2-D","type":"Hyperviser...