{% extends "base.html" %}

{% block content %}
<section class="card">
  <h2>Dependency graph</h2>
  <div id="graph" class="graph-canvas"></div>
</section>

<script src="https://unpkg.com/vis-network@9.1.9/dist/vis-network.min.js"></script>
<script>
  const nodes = new vis.DataSet({{ nodes_json | safe }});
  const edges = new vis.DataSet({{ edges_json | safe }});
  const network = new vis.Network(
    document.getElementById("graph"),
    { nodes, edges },
    {
      layout: { improvedLayout: true },
      physics: { stabilization: true },
      edges: { arrows: "to" }
    }
  );
</script>
{% endblock %}