{% extends "base.html" %}

{% block extrahead %}
{{ super() }}
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<style type="text/css">
    #visjsnet {
        width: 100%;
        height: 500px;
        border-bottom: 1px solid lightgray;
    }
</style>
{% endblock %}


{% block content %}
   
<div id="visjsnet"></div>

<script type="text/javascript">
const data = create_network();

// all jinja injections should happen here because it allows to mock this function and test all the rest in isolation
function create_network() {

    // create an array with nodes
    const ds_nodes = new vis.DataSet([{"id": "1", "label": "1", "shape": "dot"}, {"id": "2", "label": "2", "shape": "dot"}, {"id": "3", "label": "3", "shape": "dot"}, {"id": "4", "label": "4", "shape": "dot"}, {"id": "5", "label": "5", "shape": "dot"}, {"id": "6", "label": "6", "shape": "dot"}, {"id": "7", "label": "7", "shape": "dot"}, {"id": "8", "label": "8", "shape": "dot"}, {"id": "9", "label": "9", "shape": "dot"}, {"id": "10", "label": "10", "shape": "dot"}, {"id": "11", "label": "11", "shape": "dot"}, {"id": "12", "label": "12", "shape": "dot"}, {"id": "13", "label": "13", "shape": "dot"}, {"id": "14", "label": "14", "shape": "dot"}, {"id": "15", "label": "15", "shape": "dot"}, {"id": "16", "label": "16", "shape": "dot"}, {"id": "17", "label": "17", "shape": "dot"}, {"id": "18", "label": "18", "shape": "dot"}, {"id": "19", "label": "19", "shape": "dot"}, {"id": "20", "label": "20", "shape": "dot"}, {"id": "21", "label": "21", "shape": "dot"}, {"id": "22", "label": "22", "shape": "dot"}, {"id": "23", "label": "23", "shape": "dot"}, {"id": "24", "label": "24", "shape": "dot"}, {"id": "25", "label": "25", "shape": "dot"}, {"id": "26", "label": "26", "shape": "dot"}, {"id": "27", "label": "27", "shape": "dot"}, {"id": "28", "label": "28", "shape": "dot"}, {"id": "29", "label": "29", "shape": "dot"}, {"id": "30", "label": "30", "shape": "dot"}, {"id": "31", "label": "31", "shape": "dot"}, {"id": "32", "label": "32", "shape": "dot"}, {"id": "33", "label": "33", "shape": "dot"}, {"id": "34", "label": "34", "shape": "dot"}, {"id": "35", "label": "35", "shape": "dot"}, {"id": "36", "label": "36", "shape": "dot"}, {"id": "37", "label": "37", "shape": "dot"}, {"id": "38", "label": "38", "shape": "dot"}, {"id": "39", "label": "39", "shape": "dot"}, {"id": "40", "label": "40", "shape": "dot"}, {"id": "41", "label": "41", "shape": "dot"}, {"id": "42", "label": "42", "shape": "dot"}, {"id": "43", "label": "43", "shape": "dot"}, {"id": "44", "label": "44", "shape": "dot"}, {"id": "45", "label": "45", "shape": "dot"}, {"id": "46", "label": "46", "shape": "dot"}, {"id": "47", "label": "47", "shape": "dot"}, {"id": "48", "label": "48", "shape": "dot"}, {"id": "49", "label": "49", "shape": "dot"}, {"id": "50", "label": "50", "shape": "dot"}]);

    // create an array with edges
    const ds_edges = new vis.DataSet([{"from": "1", "to": "2"}, {"from": "1", "to": "3"}, {"from": "1", "to": "4"}, {"from": "1", "to": "5"}, {"from": "1", "to": "6"}, {"from": "1", "to": "7"}, {"from": "1", "to": "8"}, {"from": "1", "to": "9"}, {"from": "1", "to": "10"}, {"from": "1", "to": "11"}, {"from": "1", "to": "12"}, {"from": "1", "to": "13"}, {"from": "1", "to": "14"}, {"from": "1", "to": "15"}, {"from": "1", "to": "16"}, {"from": "1", "to": "17"}, {"from": "1", "to": "18"}, {"from": "1", "to": "19"}, {"from": "1", "to": "20"}, {"from": "1", "to": "21"}, {"from": "1", "to": "22"}, {"from": "1", "to": "23"}, {"from": "1", "to": "24"}, {"from": "1", "to": "25"}, {"from": "1", "to": "26"}, {"from": "1", "to": "27"}, {"from": "1", "to": "28"}, {"from": "1", "to": "29"}, {"from": "1", "to": "30"}, {"from": "1", "to": "31"}, {"from": "1", "to": "32"}, {"from": "1", "to": "33"}, {"from": "1", "to": "34"}, {"from": "1", "to": "35"}, {"from": "1", "to": "36"}, {"from": "1", "to": "37"}, {"from": "1", "to": "38"}, {"from": "1", "to": "39"}, {"from": "1", "to": "40"}, {"from": "1", "to": "41"}, {"from": "1", "to": "42"}, {"from": "1", "to": "43"}, {"from": "1", "to": "44"}, {"from": "1", "to": "45"}, {"from": "1", "to": "46"}, {"from": "1", "to": "47"}, {"from": "1", "to": "48"}, {"from": "1", "to": "49"}, {"from": "1", "to": "50"}]);

    // create a network
    const container = document.getElementById('visjsnet');

    // provide the data in the vis format
    const data = {
        nodes: ds_nodes,
        edges: ds_edges
    };

    const options = {
        "height": "500px", 
        "width": "100%",
        "interaction": {
            "dragView": false, 
            "zoomView": false,
        }
    };
    
    const pyvisjs = {};

    return {
        network: new vis.Network(container, data, options),
        nodes: ds_nodes.get({ returnType: "Object" }),
        edges: ds_edges.get({ returnType: "Object" }),
        ds_nodes: ds_nodes,
        pyvisjs: pyvisjs,
    }
}
 

    </script>
{{ super() }}
{% endblock %}