{% extends 'base.html' %}
{% load static %}
{% block content %}
<canvas id="springydemo" width="960" height="1000px"/>
{% endblock %}

{% block javascript %}
{{ block.super }}
<script src="{% static 'xchk_core/js/springy.js' %}"></script>
<script src="{% static 'xchk_core/js/springyui.js' %}"></script>
{{ graph|json_script:"graph" }}
<script>
$(window).on('load', function() {
  const data = JSON.parse(document.getElementById('graph').textContent);
  let graph = new Springy.Graph();
  let nodes = {}
  // dependency pair: object and a list of strings (node UID's)
  // object has title field and URL field
  // first make node objects for all dependents and their dependencies
  for (dependency_pair_idx in data) {
    let dependent = data[dependency_pair_idx][0]
    if (!(dependent.title in nodes)) {
	    // TODO: also set green / orange...
	    nodes[dependent.title] = graph.newNode({ label : dependent.title, url : dependent.url, color : dependent.locked ? '#aaaaaa' : '#000000', onclick : function() {
window.location.href = dependent.url
}});
    }
    for (dependency_idx in data[dependency_pair_idx][1]) {
      let dependency = data[dependency_pair_idx][1][dependency_idx]
      if (!(dependency.title in nodes)) {
	      nodes[dependency.title] = graph.newNode({ label : dependency.title, url : dependency.url, color : dependency.locked ? '#aaaaaa' : '#000000',onclick : function() {
window.location.href = dependency.url
} });
      }
    }
  }
  for (dependency_pair_idx in data) {
    let dependent = data[dependency_pair_idx][0]
    for (dependency_idx in data[dependency_pair_idx][1]) {
      let dependency = data[dependency_pair_idx][1][dependency_idx]
      graph.newEdge(nodes[dependency.title],nodes[dependent.title]);
    }
  }
  jQuery(function(){
    let springy = window.springy = jQuery('#springydemo').springy({
      graph: graph,
    });
  });
}); 
</script>
{% endblock %}