JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//visjs.org/dist/vis.js"></script>
<link rel="stylesheet" href="//visjs.org/dist/vis.css">
<script src="//rawgit.com/brianreavis/selectize.js/master/dist/js/standalone/selectize.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//rawgit.com/brianreavis/selectize.js/master/dist/css/selectize.bootstrap3.css">
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//rawgit.com/ramnathv/d11bbe7627915dab838d/raw/fff6f0d1054d1e135515f2f48b26081773c09653/lotr.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"> </span>
          <span class="icon-bar"> </span>
          <span class="icon-bar"> </span>
        </button>
        <a class="navbar-brand" href="#">Network Analysis Tool</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
          <li id='tour'><a href="#">
              <span class='glyphicon glyphicon-play'></span> Tour
          </a></li>
          <li><a href="#">
              <span class='glyphicon glyphicon-cog'></span> About
           </a></li>
        </ul>
        <div id = 'controls'>
           <div class="col-md-6 pull-right" style='margin-top:8px;'>
               <select id='search' class='form-control'></select>
          </div>
       </div>
      </div>
    </div>
</div>

<div class="container-fluid" id='main'>
    <div class="row">
        <div class="col-xs-12">
                 <input type="range" min="0" max="30" value="1" step="1" />
           <button...

CSS

#mynetwork{
  width: 100%;
  height: 650px;
}

JavaScript

var allNodes, network;
var highlightActive = false;


/*
var nodes = [{"id":1, group: 1, "color": "red"},{"id":2, group: 1},{"id":3, group: 2},{"id":4, group: 2},{"id":5, group: 3, "color": null},{"id":6, group: 3},{"id":7, group: 3},{"id":8, group: 4},{"id":9, group: 4},{"id":10, group: 4}] 

var edges = [{"from":2,"to":10},{"from":9,"to":9},{"from":9,"to":5},{"from":3,"to":3},{"from":1,"to":3},{"from":8,"to":5},{"from":7,"to":5},{"from":9,"to":3}] 
*/

var opts = nodes.map(function(d){
  d.id = d.name
  d.label = d.name
  return {text: d.name || "Label " + d.id, value: d.id} 
})

//options.edges = {smooth: false}
options.layout = {randomSeed: 1234}
options.interaction = {navigationButtons: true}


$(document).ready(function(){
  $('body').attr("class", "application")
  addSearch("#search", options)
})

/*
nodes.forEach(function(n){
  n.group = 1
})
*/


var nodesDataset = new vis.DataSet(nodes);
var edgesDataset = new vis.DataSet(edges);

function addSearch(id, options){
  var $select = $(id).selectize({
     create: true,
     options: opts,
     placeholder: "Select nodes to view"
  })
  var selectize = $select[0].selectize
  selectize.on("change", function(x){
    if (x != ""){
      network.selectNodes(x.split(","))
      network.focus(x)
      neighbourhoodHighlight(network.getSelection())
    }
  })  
}


function redrawAll(){
  var data = {nodes: nodesDataset, edges: edgesDataset}
  var container = document.getElementById("mynetwork")
  network = new vis.Network(
    container, data, options
  )
  allNodes = nodesDataset.get({returnType:"Object"});
  for (var nodeId in allNodes){
    allNodes[nodeId]._color = allNodes[nodeId].color 
  }
  network.on("click", neighbourhoodHighlight);  
}



function neighbourhoodHighlight(params) {
    // if something is selected:
    if (params.nodes.length > 0) {
      highlightActive = true;
      var i,j;
      var selectedNode = params.nodes[0];
      var degrees = 2;

      // mark all nodes as hard to read.
     ...