{% extends "base.html" %}
{% block title %}Hierarchy{% endblock %}
{% block content %}
<div class="page-head"><div>
  <div class="eyebrow">Design map</div>
  <h1>Module hierarchy</h1>
  <p class="lede">Each edge goes from a module to a module that it instantiates.</p>
</div></div>
<section class="card">
  {% if hierarchy_svg %}
  <figure class="graph graph-tall" data-zoom>{{ hierarchy_svg|safe }}
    <figcaption class="graph-tools">
      <button data-zoom-in>+</button><button data-zoom-out>-</button><button data-zoom-reset>reset</button>
      <span class="graph-hint">scroll or pinch to zoom · drag to move · click a node to open</span>
    </figcaption>
  </figure>
  {% else %}
  <p class="empty">Graphviz is not installed. Install it to get the graphs.</p>
  {% endif %}
  <p class="graph-legend muted">Blue: a module of {{ root_package }}. Purple: a top.
  Grey: a module of a dependency. Dashed: the tool did not find the module.</p>
</section>
{% endblock %}