.. _nbcytoscaperst:

==============================================
Javascript library in a notebook: cytoscape.js
==============================================


.. only:: html

    **Links:** :download:`notebook <nb_cytoscape.ipynb>`, :downloadlink:`html <nb_cytoscape2html.html>`, :download:`PDF <nb_cytoscape.pdf>`, :download:`python <nb_cytoscape.py>`, :downloadlink:`slides <nb_cytoscape.slides.html>`, :githublink:`GitHub|_doc/notebooks/nb_cytoscape.ipynb|*`


Tries `cytoscape.js <http://js.cytoscape.org/>`__ in a notebook. The
example is taken from the gallery and more specifically the following
one
`cyjsSimpleDemoWithMagic.ipynb <https://github.com/paul-shannon/cyjs-jupyter/blob/master/self-contained-notebooks/javascriptOnly/cyjsSimpleDemoWithMagic.ipynb>`__.
A kind of tutorial is available at `Getting started with
Cytoscape.js <http://blog.js.cytoscape.org/2016/05/24/getting-started/>`__.

.. code:: ipython3

    from jyquickhelper import RenderJS
    css = None
    libs = [dict(path='http://www.xavierdupre.fr/js/cytoscape/cytoscape.min.js', name='cytoscape')]
    script = """
        
        var cy = cytoscape({
          container: document.getElementById('__ID__'),
          elements: {
             nodes: [
               {data: {id: 'a', name: 'Node A', type: 'big' }},
               {data: {id: 'b', name: 'Node B', type: 'little'}},
               ],
            edges: [
               {data: {source: 'a', target: 'b'}},
               {data: {source: 'b', target: 'a'}}
               ]
            },
      
         style: [
            {selector: 'node',
               style: {
                  'text-valign': 'center',
                  'text-halign': 'center',
                  'border-color': 'red',
                  'background-color': 'white',
                  'border-width': 1,
                  'label': 'data(name)',
                  'height': 100,  // defaults
                  'width': 100
                  }},
            {selector: "node[type='big']",
              style: {
                 'height': 150,
                 'width': 150,
                 'shape': 'roundrectangle'
                 }},
            {selector: "node[type='little']",
              style: {
                 'height': 50,
                 'width': 80
                 }},
            {selector: 'edge',
               style: {
                 'width': '1px',
                 'line-color': 'blue',
                 'target-arrow-shape': 'triangle',
                 'target-arrow-color': 'black',
                 'curve-style': 'bezier'
                 }}
             ],
                  
         ready: function(){
            console.log("small cyjs network ready");
            } // ready
           }); // cytoscape
    """
    jr = RenderJS(script, css=css, libs=libs, height='200px', width='500px')
    jr






.. raw:: html

    <div id="Mf061d65cc741463b895382a57902cacf-cont"><div id="Mf061d65cc741463b895382a57902cacf" style="width:500px;height:200px;"></div></div>
    <script>
    require.config({
    paths:{
    'cytoscape':'http://www.xavierdupre.fr/js/cytoscape/cytoscape.min',
    },
    });

    require(['cytoscape'], function(cytoscape) { 

        var cy = cytoscape({
          container: document.getElementById('Mf061d65cc741463b895382a57902cacf'),
          elements: {
             nodes: [
               {data: {id: 'a', name: 'Node A', type: 'big' }},
               {data: {id: 'b', name: 'Node B', type: 'little'}},
               ],
            edges: [
               {data: {source: 'a', target: 'b'}},
               {data: {source: 'b', target: 'a'}}
               ]
            },

         style: [
            {selector: 'node',
               style: {
                  'text-valign': 'center',
                  'text-halign': 'center',
                  'border-color': 'red',
                  'background-color': 'white',
                  'border-width': 1,
                  'label': 'data(name)',
                  'height': 100,  // defaults
                  'width': 100
                  }},
            {selector: "node[type='big']",
              style: {
                 'height': 150,
                 'width': 150,
                 'shape': 'roundrectangle'
                 }},
            {selector: "node[type='little']",
              style: {
                 'height': 50,
                 'width': 80
                 }},
            {selector: 'edge',
               style: {
                 'width': '1px',
                 'line-color': 'blue',
                 'target-arrow-shape': 'triangle',
                 'target-arrow-color': 'black',
                 'curve-style': 'bezier'
                 }}
             ],

         ready: function(){
            console.log("small cyjs network ready");
            } // ready
           }); // cytoscape
     });

    </script>




.. code:: ipython3

    print(jr._repr_html_())


.. parsed-literal::
    <div id="Mf061d65cc741463b895382a57902cacf-cont"><div id="Mf061d65cc741463b895382a57902cacf" style="width:500px;height:200px;"></div></div>
    <script>
    require.config({
    paths:{
    'cytoscape':'http://www.xavierdupre.fr/js/cytoscape/cytoscape.min',
    },
    });
    require(['cytoscape'], function(cytoscape) { 
        var cy = cytoscape({
          container: document.getElementById('Mf061d65cc741463b895382a57902cacf'),
          elements: {
             nodes: [
               {data: {id: 'a', name: 'Node A', type: 'big' }},
               {data: {id: 'b', name: 'Node B', type: 'little'}},
               ],
            edges: [
               {data: {source: 'a', target: 'b'}},
               {data: {source: 'b', target: 'a'}}
               ]
            },
         style: [
            {selector: 'node',
               style: {
                  'text-valign': 'center',
                  'text-halign': 'center',
                  'border-color': 'red',
                  'background-color': 'white',
                  'border-width': 1,
                  'label': 'data(name)',
                  'height': 100,  // defaults
                  'width': 100
                  }},
            {selector: "node[type='big']",
              style: {
                 'height': 150,
                 'width': 150,
                 'shape': 'roundrectangle'
                 }},
            {selector: "node[type='little']",
              style: {
                 'height': 50,
                 'width': 80
                 }},
            {selector: 'edge',
               style: {
                 'width': '1px',
                 'line-color': 'blue',
                 'target-arrow-shape': 'triangle',
                 'target-arrow-color': 'black',
                 'curve-style': 'bezier'
                 }}
             ],
         ready: function(){
            console.log("small cyjs network ready");
            } // ready
           }); // cytoscape
     });
    </script>