JSFiddle - React, Tailwind, and code Playground

by dpmartin42

HTML

<script src="http://sigmajs.org/assets/js/sigma.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<div id="main">
    
    <div class="sigma-container">
        <div id="container"></div>
    </div>
    
    <div id="sidebar">
    </div>
    
    <div class="control-panel">
        <div class="move-up">
            <button type="button">
                <i class="icon-arrow-up"></i>
            </button>
        </div>
        <div class="move-down">
            <button type="button">
                <i class="icon-arrow-down"></i>
            </button>
        </div>
        <div class="move-left">
            <button type="button">
                <i class="icon-arrow-left"></i>
            </button>
        </div>
        <div class="move-right">
            <button type="button">
                <i class="icon-arrow-right"></i>
            </button>
        </div>
        
        <div class="zoom-in">
            <button type="button">
                <i class="icon-zoom-in"></i>
            </button>
        </div>
        
        <div class="zoom-out">
            <button type="button">
                <i class="icon-zoom-out"></i>
            </button>
        </div>
        
        <div class="refresh">
            <button type="button">
                <i class="icon-resize-full"></i>
            </button>
        </div>
        
        <div class="nameSearch">
            <button type="button">
                Search
            </button>
        </div>

        <div class="ui-widget">
          <label for="tags">Names: </label>
          <input id="tags">
        </div>
        
        <div class="checkbox">
            <input type="checkbox" name="cluster" value="false">Show clusters<br>
        </div>
      </div>



            
            
 </div>

CSS

body {
    margin: 0;
}
#container {
    float: left;
    height: 500px;
    width: 600px;
    border-right: 1px #ccc dashed;
}
#sidebar{
    float: left;
    left: 500px;

}

/* Control panel: */
.control-panel {
  color: #666;
  border-top: 1px #ccc dashed;
  border-right: 1px #ccc dashed;
  background: #fff;
  clear: both;
  height: 84px;
  width: 600px;
}
.move-up {
  position: absolute;
  top: 510;
  left: 475px;
  margin: 5px;
}
.move-down {
  position: absolute;
  top: 560px;
  left: 475px;
  margin: 5px;
}
.move-left {
  position: absolute;
  top: 530px;
  left: 450px;
  margin: 5px;
}
.move-right {
  position: absolute;
  top: 530px;
  left: 500px;
  margin: 5px;
}
.zoom-in {
  position: absolute;
  top: 500;
  left: 550px;
  margin: 5px;
}
.zoom-out {
  position: absolute;
  top: 560px;
  left: 550px;
  margin: 5px;
}
.refresh {
  position: absolute;
  top: 530px;
  left: 550px;
  margin: 5px;
}
.ui-widget {
  position: absolute;
  top: 510px;
  left: 35px;
  margin: 5px;
}
.checkbox {
  position: absolute;
  top: 550px;
  left: 35px;
  margin: 5px;
}
.nameSearch {
  position: absolute;
  top: 580px;
  left: 35px;
  margin: 5px;
}

JavaScript

$(function() {
    var availableTags = [
		{"label":"Hello"},
		{"label":"World"},
        ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });

// Let's first initialize sigma:
var s = new sigma('container');

// Then, let's add some data to display:
s.graph.addNode({
    // Main attributes:
    id: 'n0',
    label: 'Hello',
    // Display attributes:
    x: 0,
    y: 0,
    size: 1,
    color: '#10afe7'
})
.addNode({
    // Main attributes:
    id: 'n1',
    label: 'World',
    // Display attributes:
    x: 1,
    y: 1,
    size: 1,
    color: '#10afe7'
}).addEdge({
    id: 'e0',
    // Reference extremities:
    source: 'n0',
    target: 'n1',
    color: '#404041'  
});
        
// Finally, let's ask our sigma instance to refresh:
s.refresh();
          
// clear the sigma instance when the box is checked
// then just re-draw with the different colors        
        
$(document).ready(function(){
        $(":checkbox").change(function(){
        if($(this).attr("checked"))
        {
            s.graph.clear();
        
            s.graph.addNode({
                id: 'n0',
                label: 'Hello',
                x: 0,
                y: 0,
                size: 1,
                color: '#f00'
            }).addNode({
                id: 'n1',
                label: 'World',
                x: 1,
                y: 1,
                size: 1,
                color: '#00f'
            }).addEdge({
                id: 'e0',
                source: 'n0',
                target: 'n1'
            });
        
            s.refresh();

        }
        else
        {
        
           s.graph.clear();
        
           s.graph.addNode({
                id: 'n0',
                label: 'Hello',
                x: 0,
                y: 0,
                size: 1,
                color: '#10afe7'
            }).addNode({
                id: 'n1',
                label: 'World',
                x: 1,
                y: 1,
        ...