
{% extends "shared/d3_base.html" %}




{% block custom_css %}



<style type="text/css" media="screen">


    #container {
        /*max-width: 400px;*/
        height: 800px;
        margin: auto;
    }

</style>


{% endblock custom_css %}






{% block main_content %}


    {% if TOTAL_CLASSES %}
    <div class="row">
        <h3>Classes ({{TOTAL_CLASSES}})</h3>
        <div class="col-md-12" id="graph_classes">


        </div>


    </div>
    {% endif %}
    
    <div id="container"></div>

    <p>Double click on a node to see its properties.</p>





{% endblock main_content %}




{% block extra_footer %}

Visualization developed with <a class="greylink" href="https://github.com/jacomyal/sigma.js">sigma.js</a>.

{% endblock extra_footer %}





{% block the_javascript %}



    {# JAVASCRIPT #}

    <script type="text/javascript" src="{{STATIC_URL}}libs/sigma/sigma.min.js"></script>

    <script type="text/javascript" src="{{STATIC_URL}}libs/sigma/plugins/sigma.parsers.json.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}libs/sigma/plugins/sigma.layout.forceAtlas2.min.js"></script>

    <script type="text/javascript" src="{{STATIC_URL}}libs/jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}libs/jquery/jquery.slidereveal.min.js"></script>
    
    

    {% include 'shared/js_slidereveal.html' %}


   <script>
    // these are just some preliminary settings
    var g = {
        nodes: [],
        edges: []
    };

    var DATA_LOCAL = {{JSON_DATA_CLASSES|safe}};


    // Create new Sigma instance in graph-container div (use your div name here)
    s = new sigma({
        graph: DATA_LOCAL,
        container: 'container',
        renderer: {
            container: document.getElementById('container'),
            type: 'canvas'
        },
        settings: {
            doubleClickEnabled: false,
            minNodeSize: 5,
            maxNodeSize: 30,
            labelSize: "proportional",
            labelThreshold: 10,
            enableEdgeHovering: true,
            edgeHoverColor: 'edge',
            defaultEdgeHoverColor: '#000',
            edgeHoverSizeRatio: 5,
            edgeHoverExtremities: true
          }
    });

    // ? this runs the force atlas, but the rendering is not smooth!

    s.refresh();
    s.startForceAtlas2();

    // show info on click
	s.bind('doubleClickNode', function(e) {
        var nodeId = e.data.node.id;
		console.log(nodeId);
		showpanel(nodeId); 
	});


    </script>



{% endblock the_javascript %}



