cytoscape.js and requirejs

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

by FirstBug

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 and requirejs </h1>
  <input type="text" value="\uf173" id="title">
</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',
    'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js',
  },
  shim: {
    'bootstrap': ['jquery']
  }
});


require(['jquery', 'cytoscape', 'cytoscape-panzoom'], function($, cytoscape, panzoom) {
  panzoom(cytoscape, $); // register extension
  // render cytoscape example 
  var cyElement = $('<div/>').addClass('cytoscape').appendTo($('.cyto-container'));
  $(function() {
    cyElement.cytoscape({
      layout: {
        name: 'cose',
        padding: 10,
        randomize: true
      },

      style: cytoscape.stylesheet()
        .selector('node')
        .css({
          'shape': 'circle',
          //'content': 'data(name)',
          'content': function(ele) {
            return (ele.data('name'));
          },
          'text-wrap': 'wrap',
          'width': 'label',
          'height': 'label',
          'padding-left': '10px',
          'padding-right': '10px',
          'padding-top': '10px',
          'padding-bottom': '10px',
          'font-family': 'FontAwesome, helvetica neue',
          'font-style': 'normal',
          'text-valign': 'center',
          'text-halign': 'center'
        })
        .selector(':selected')
        .css({
          'border-width': 3,
          'border-color': '#333'
        })
        .selector('edge')
        .css({
          'label': 'data(label)',
          'width': 3,
          'text-wrap': 'wrap',
          'line-color': '#ccc',
          'font-family': 'FontAwesome, helvetica neue',
          'font-style': 'normal',
        })
        .selector('edge.questionable')
        .css({
          'line-style': 'dotted',
          'target-arrow-shape': 'diamond'
        })
        .selector('.faded')
  ...