JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/Linkurious/linkurious.js/develop/dist/sigma.min.js"></script>
<script src="https://rawgit.com/Linkurious/linkurious.js/develop/dist/plugins/sigma.plugins.tooltips.min.js"></script>
<script src="https://rawgit.com/Linkurious/linkurious.js/develop/dist/plugins/sigma.plugins.select.min.js"></script>
<script src="https://rawgit.com/Linkurious/linkurious.js/develop/dist/plugins/sigma.plugins.activeState.min.js"></script>
<script src="https://rawgit.com/Linkurious/linkurious.js/develop/dist/plugins/sigma.plugins.dragNodes.min.js"></script>
<script src="https://rawgit.com/Linkurious/linkurious.js/develop/dist/plugins/sigma.plugins.keyboard.min.js"></script>
<script src="https://rawgit.com/Linkurious/linkurious.js/develop/dist/plugins/sigma.plugins.animate.min.js"></script>
<script src="https://rawgit.com/Linkurious/linkurious.js/develop/dist/plugins/sigma.layouts.forceLink/worker.js"></script>
<script src="https://rawgit.com/Linkurious/linkurious.js/develop/dist/plugins/sigma.layouts.forceLink/supervisor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
<div id="container"></div>
<!--<div id="sidebar">This area is not a drop target.</div>-->

CSS

body {
      margin: 0;
    }
    #container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
  #graph-canvas-left{
      margin: 20px;
      position: relative;
      width: 400px;
      height: 400px;
      border: 2px solid black;
      overflow: hidden;
    }
    #graph-webgl-right{
      top: 0;
      bottom: 0;
      left: 50%;
      right: 0;
      position: absolute;
      border: 2px solid black;
      overflow: hidden;
      margin: 10px;
    }
    h1 {
      margin: 0.5em;
    }
    .sigma-tooltip {
      max-width: 240px;
      max-height: 280px;
      background-color: rgb(249, 247, 237);
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
      border-radius: 6px;
    }
    .sigma-tooltip-header {
      font-variant: small-caps;
      font-size: 120%;
      color: #437356;
      border-bottom: 1px solid #aac789;
      padding: 10px;
    }
    .sigma-tooltip-body {
      padding: 10px;
    }
    .sigma-tooltip-body th {
      color: #999;
      text-align: left;
    }
    .sigma-tooltip-footer {
      padding: 10px;
      border-top: 1px solid #aac789;
    }
    .sigma-tooltip > .arrow {
      border-width: 10px;
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }
    .sigma-tooltip.top {
      margin-top: -12px;
    }
    .sigma-tooltip.top > .arrow {
      left: 50%;
      bottom: -10px;
      margin-left: -10px;
      border-top-color: rgb(249, 247, 237);
      border-bottom-width: 0;
    }
    .sigma-tooltip.bottom {
      margin-top: 12px;
    }
    .sigma-tooltip.bottom > .arrow {
      left: 50%;
      top: -10px;
      margin-left: -10px;
      border-bottom-color: rgb(249, 247, 237);
      border-top-width: 0;
    }
    .sigma-tooltip.left {
      margin-left: -12px;
    }
    .sigma-tooltip.left > .arrow {
      top: 50%;
      right: -10px;
      margin-top: -10px;
      border-left-color: rgb(249, 247, 237);
     ...

JavaScript

(function() {
  // Let's first initialize sigma:
  //var s = new sigma('container');
  sigma.renderers.def = sigma.renderers.canvas;

  var s = new sigma({
    renderer: {
      container: document.getElementById('container'),
      type: 'canvas'
    },
    settings: {
      dragNodeStickiness: 0.01, //using for drag
      minNodeSize: 6,
      minEdgeSize: 3,
      maxEdgeSize: 3,
      autoCurveRatio: 1,
      autoCurveSortByDirection: true,
      animationsTime: 2000
    }
  });

  s.bind('clickNode', function(e) {
    var nodeId = e.data.node.id;
    console.log(nodeId);
    console.log(sigma);
    sigma.misc.animation.camera(
      s.camera, 
      {
        x: e.data.node[s.camera.readPrefix + 'x'], 
        y: e.data.node[s.camera.readPrefix + 'y'],
        ratio: 1
      }, 
      { duration: s.settings('animationsTime') }
    );
  });

  var tooltipConfig = {
    node: [{
      show: 'hovers',
      hide: 'hovers',
      cssClass: 'sigma-tooltip',
      position: 'top',
      autoadjust: true,
      template:
      '<div class="arrow"></div>' +
      '<div class="sigma-tooltip-header">{{label}}</div>' +
      '  <div class="sigma-tooltip-body">' +
      '    <table>' +
      '      <tr><th>Title</th><td>{{data.Title}}</td></tr>' +
      '      <tr><th>TelNum</th><td>{{data.TelNum}}</td></tr>' +
      '      <tr><th>FewId</th><td>{{data.FwdId}}</td></tr>' +
      '    </table>' +
      '  </div>'+
      '<div class="sigma-tooltip-footer">Number of connections: {{degree}}</div>',
      renderer: function(node, template) {
        // The function context is s.graph
        node.degree = this.degree(node.id);

        // Returns an HTML string:
        return Mustache.render(template, node);
      }
    }]
  };

  var tooltips = sigma.plugins.tooltips(s, s.renderers[0], tooltipConfig);
  // Instanciate the ActiveState plugin:
  var activeState = sigma.plugins.activeState(s);
  // Initialize the dragNodes plugin:
  var dragNodes = sigma.plugins.dragNodes(s,...