cytoscape.js , expand-collapse and requirejs

How to use cytoscape.js with requirejs using jquery and bootstrap

by downedcrane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-panzoom/2.4.0/cytoscape.js-panzoom.min.css">
<div class="jumbotron text-center">
  <h1> cytoscape.js + expand-collapse and requirejs </h1>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-8 cyto-container">

    </div>
  </div>
</div>

CSS

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

.cytoscape {
  height: 400px;
  width: 800px;
  position: absolute;
  left: 0;
  top: 0;
}

JavaScript

requirejs.config({
  paths: {
    'jquery': 'https://code.jquery.com/jquery-1.12.4.min',
    'cytoscape': 'https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.9/cytoscape.min',
    'cytoscape-panzoom': 'https://cdnjs.cloudflare.com/ajax/libs/cytoscape-panzoom/2.4.0/cytoscape-panzoom.min',
    'cytoscape-expand-collapse': 'https://cdn.rawgit.com/iVis-at-Bilkent/cytoscape.js-expand-collapse/master/cytoscape-expand-collapse',
    'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js',
  },
  shim: {
    'bootstrap': ['jquery']
  }
});


require(['jquery', 'cytoscape', 'cytoscape-panzoom','cytoscape-expand-collapse'], function($, cytoscape, panzoom, expandCollapse) {
  panzoom(cytoscape, $); // register extension
  expandCollapse( cytoscape, $ ); // register extension
  // render cytoscape example 
  var cyElement = $('<div/>').addClass('cytoscape').appendTo($('.cyto-container'));
  //
  $(function() {
   
   cyElement.cytoscape({
      boxSelectionEnabled: false,
      autounselectify: true,
      style: [{
        selector: 'node',
        css: {
          'content': 'data(id)',
          'text-valign': 'center',
          'text-halign': 'center'
        }
      }, {
        selector: '$node > node',
        css: {
          'padding-top': '10px',
          'padding-left': '10px',
          'padding-bottom': '10px',
          'padding-right': '10px',
          'text-valign': 'top',
          'text-halign': 'center',
          'background-color': '#bbb'
        }
      }, {
        selector: 'edge',
        css: {
          'target-arrow-shape': 'triangle',
          'curve-style': 'bezier'
        }
      }, {
        selector: ':selected',
        css: {
          'background-color': 'black',
          'line-color': 'black',
          'target-arrow-color': 'black',
          'source-arrow-color': 'black'
        }
      }],

      elements: {
        nodes: [
          { data: { id: 'a', parent: 'b' }, position: { x: 215, y: 85 } },
  ...