<!DOCTYPE html>


<html>
<head>
{% load static %}
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}
{% include "chlamdb/header.html" %}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-network.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-network.min.css">

</head>

<body>
  <div class="container-fluid" id="main_container">
    <div class="row">
      <div id="wrapper">
          <div id="page-content-wrapper">
            <div class="row">
              <div class="col-lg-12">
                 {% include "chlamdb/menu.html" %}


                  <h3>Similarity Network</h3>
                <div id="config"></div>

                  <div id="mynetwork"></div>


              </div>
            </div>
          </div>
        </div>
    </div>
 </div>



<script type="text/javascript">

var nodes = {{node_list|safe}};
// create an array with edges
var edges = {{edge_list|safe}};

  var network;

  function redrawAll() {
    var container = document.getElementById('mynetwork');
    var options = {
      nodes: {
        shape: 'dot',
        scaling: {
          min: 1,
          max: 30
        },
        font: {
          size: 12,
          face: 'Tahoma'
        }
      },
      edges: {
        color:{inherit:true},
        width: 0.15,
        smooth: {
          type: 'continuous'
        }
      },
      interaction: {
        hideEdgesOnDrag: true,
        tooltipDelay: 200
      },
      physics: {
        stabilization: false,
        barnesHut: {
          gravitationalConstant: -80000,
          springConstant: 0.001,
          springLength: 200
        }
      },
      configure: {
        filter:function (option, path) {
          if (path.indexOf('physics') !== -1) {
            return true;
          }
          if (path.indexOf('smooth') !== -1 || option === 'smooth') {
            return true;
          }
          return false;
        },
        container: document.getElementById('config')
      },
      
    };

    var data = {nodes:nodes, edges:edges};
    // Note: data is coming from ./data/WorldCup2014.js
    network = new vis.Network(container, data, options);
  }

  redrawAll()

</script>



</body>
{% include "chlamdb/style_menu.html" %}


  <style type="text/css">
    #mynetwork {
      width: 800px;
      height: 800px;
      border: 1px solid lightgray;
    }
  </style>



</html>
