clade.html

{% extends 'base.html' %}

{% block title %}
    {% if clade %}
        {{ clade.name }} clade
    {% else %}
        Clade overview
    {% endif %}
{% endblock %}

{% block container %}
{% import 'macros/pagination.html' as macro %}
<div class="top-pad">

    {% if clade %}
    <ol class="breadcrumb">
        <li><a href="{{ url_for('main.screen') }}">Home</a></li>
        <li>Clade</li>
        <li class="active"><strong>{{ clade.name }}</strong></li>
    </ol>
        <h1><strong>{{ clade.name }}</strong></h1>


        {% if clade.species_count > 1 %}
        <h3 class="banner-blue">Species Tree</h3>
        <div id="tree_panel">
        <div id='phylogram'></div>
        </div>
        {% endif %}
        {% set comma = joiner(", ") %}
        <p>Species in this clade ({{ clade.species_count }}):&nbsp;
        {%- for s in species -%}
        {{ comma() }}<em><a href="{{ url_for('species.species_view', species_id=s.id) }}">{{ s.name }}</a> ({{ s.code }})</em>
        {% endfor %}</p><br />


    {{ macro.pagination('Families', url_for('clade.clade_families', clade_id=clade.id), families_count, url_for('clade.clade_families_table', clade_id=clade.id), 'family') }}
    {{ macro.pagination('Interpro domains', url_for('clade.clade_interpro', clade_id=clade.id), interpro_count, url_for('clade.clade_interpro_table', clade_id=clade.id), 'interpro') }}
    {{ macro.pagination('Associations', url_for('clade.clade_associations', clade_id=clade.id), association_count, None, 'association') }}

    {% endif %}
</div>

</div>
{% endblock %}

{% block extrajs %}
    {% if clade %}
        {% if clade.species_count > 1 %}
            <script src="{{ url_for('static', filename='js/d3.v3.min.js') }}" type="text/javascript"></script>
            <script src="{{ url_for('static', filename='js/newick.js') }}" type="text/javascript"></script>
            <script src="{{ url_for('static', filename='js/d3.phylogram.js') }}" type="text/javascript"></script>
            <script>
              function draw_tree() {
                var newick = Newick.parse("{{ clade.newick_tree }}")
                var newickNodes = []
                function buildNewickNodes(node, callback) {
                  newickNodes.push(node)
                  if (node.branchset) {
                    for (var i=0; i < node.branchset.length; i++) {
                      buildNewickNodes(node.branchset[i])
                    }
                  }
                }
                buildNewickNodes(newick)

                d3.phylogram.build('#phylogram', newick, {
                  width: $('#tree_panel').width()-160,
                  height: {{ clade.species_count*30+30 }},
                  skipTicks: true
                });
              }

              function resize_tree() {
                  //clear div and redraw tree
                  $('#phylogram').empty();
                  draw_tree();
              }

              //Draw tree once the dom is ready
              $(function() {
                draw_tree();
              });

              var id;
              $( window ).resize(function() {
                    clearTimeout(id);
                    id = setTimeout(resize_tree, 50);
              });
            </script>
        {% endif %}
    {% endif %}
{% endblock %}