interpro.html

{% extends 'base.html' %}

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

    {% if interpro %}
    <h1><abbr title="Click to show help" href="{{ url_for('help.help_topic', topic='interpro_domain') }}" data-target="#helpModal">InterPro</abbr>:{{ interpro.label }}: <strong>{{ interpro.description }}</strong></h1>
    <br/>
    {% if interpro.clade_id %}
    <p>Specific for <strong>{{ interpro.clade.name}}</strong></p>
    {% endif %}
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p>There are <strong>{{ count }}</strong> sequences with this label.</p>
                    {% if count > 0 %}
                    <div id="canvas-holder" class="center-block">
                        <canvas id="chart-area" class="center-block" width="300" height="300"/>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {{ macro.sequence_pagination(url_for('interpro.interpro_sequences', interpro_id=interpro.id), count) }}

    {% endif %}
</div>

</div>
{% endblock %}

{% block extrajs %}
    <script src="{{ url_for('static', filename='js/planet_pagination.js') }}"></script>
    {% if count > 0 %}
    <script src="{{ url_for('static', filename='js/Chart.min.js') }}"></script>
	<script>
			$.getJSON( "{{ url_for('interpro.interpro_json_species', interpro_id=interpro.id) }}", function( data ) {
				var ctx = document.getElementById("chart-area").getContext("2d");
				window.myPie = new Chart(ctx).Doughnut(data, {animateRotate : false});
			});
	</script>
    {% endif %}
{% endblock %}