JSFiddle - React, Tailwind, and code Playground

by bilbobaggins

HTML

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,fetch"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.1.3/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cola/1.6.0/cola.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cola/1.6.0/cytoscape-cola.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/1.6.5/cytoscape-cose-bilkent.j"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>



  <body>
    <h1>my example</h1>
    <div id="cy"></div>


  </body>
</html>

JavaScript

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

      layout: {
        // name: 'cose-bilkent',
        // animate: false,

        name: 'cola',
        flow: { axis: 'y', minSeparation: 40 },
        avoidOverlap: true,
        // alignment: function(d){
        //   if(d.hasClass("input")){
        //     return {'x': 0};
        //   }
        //   if(d.hasClass("output")){
        //     return {'x': 200};
        //   } else {
        //     console.log("not input");
        //   }
        //
        // }

        // name: 'dagre',
        // rankdir: 'LR',

      },
      style: [
        {
          selector: 'node',
          style: {
            'background-color': 'blue',
            'label': 'data(label)',
            'text-halign': 'center',
            'text-valign': 'center',
            'width': 'label',
            'height': 'label',
            'padding': '15px',
            'background-blacken': '-0.25',
            'border-style': 'solid',
            'border-width': '1',
            'border-color': 'black'
          }
        },
        {
          selector: ':parent',
          style: {
            // 'color': 'black',
            'font-weight': 'bold',
            'background-opacity': 0.075,
            'content': 'data(label)',
            'text-valign': 'top',

          }
        },

        {
          selector: 'edge',
          style: {
            'width': 3,
            'line-color': 'black',
            'target-arrow-shape': 'triangle',
            'target-arrow-color': 'black',
            'curve-style': 'bezier',
            // 'control-point-step-size': 40,
            'arrow-scale': 2
          }
        },
        {
          selector: '.input',
          style:{
            'background-color': 'green',
            'background-opacity': '0.3',
            'shape': 'polygon',
            'shape-polygon-points': '-1 1 -0.65 0 -1 -1 1 -1 1 1'
          }
        },
        {
          selector:...