<!DOCTYPE html>


<html>
<head>
  {% load static %}
  {% include "chlamdb/header.html" %}
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.48.1/plotly.min.js"></script>
</head>

<div class="container-fluid" id="main_container">
  <div class="row">
    <div id="wrapper">
        <div id="page-content-wrapper">
          <div class="row">
            <div class="col-lg-12">
               {% include "chlamdb/menu.html" %}
               {% include "chlamdb/extract_nav_tabs_template.html" with type=type active_tab="heat" %}

                <br>
                    <p class="page-title"><b>Heatmap of the presence/absence of
                        {% if type == 'Pfam' %}
                        Pfam domains
                    {% elif type == 'COG' %}
                        COG categories
                    {% elif type == 'interpro'%}
                        Interpro Entries.
                    {% elif type == 'EC' %}
                        EC numbers. Based on PRIAM data. Partial EC are not considered.
                    {% elif type == 'ko' %}
                        Kegg orthologous groups (KO)
                    {% elif type == 'orthology' %}
                        orthologous groups
                    {% endif %}</b><a href="https://zdb.readthedocs.io/en/latest/tutorial/website.html#comparisons" id="show-option"  target="_blank"><i class="fab fa-info-circle " style="size: 5em;" ></i></a></p></center>
                

			{% if error %}
			  <div class="panel panel-danger" style="width:80%; top: 200px; margin: 10px 10px 10px 10px">
				  <div class="panel-heading" style="width:100%">
					  <h3 class="panel-title">{{ error_title }}</h3>
				  </div>

				  <div style="margin: 10px 10px 10px 10px">
				  {{ error_message }}
				  </div>
			  </div>
			{% endif %}


                <form action="{% url "plot_heatmap" type %}" method="post" id="heatmap-form" >

                    {% csrf_token %}
                    {{ form_venn.as_p }}
                    <input type="submit" name="venn" value="Show" id="venn_button" />

                </form>

            </div>


			{% if envoi_heatmap %}
            <div class="row" style="padding-top:30px ;background-color: rgba(245, 245, 245, 0.986); margin-top: 1em;" >
               
                 <div class="panel panel-success" style="margin:1em;">
                     <div class="panel-heading" style="width:100%">
                         <h5 class="panel-title">Help to interpret the results</h5>
                     </div>
                     <p style="margin: 10px 10px 10px 10px">
                        The heatmap displays the number of
                        {% if type == 'Pfam' %}
                        times a Pfam domain shared by the genomes of interest is found.
                    {% elif type == 'COG' %}
                        COGs found per each COG category shared by the genomes of interest.
                    {% elif type == 'ko' %}
                    Kegg entries found per each Kegg orthologous groups shared by the genomes of interest.
                    {% elif type == 'orthology' %}
                       homologs found per each Orthogroups shared by the genomes of interest.
                    {% endif %}
                    
                    Zooming into an area of interest you can visualize the presence/absence profile.
                    <br>In white when absent, in <span style="color: rgb(5, 98, 151)"><b>blue</b></span> present in one copy, and in <span style="color: rgb(200, 41, 248)"><b>pink</b></span> present in two or more copies.
                     </p>
                    </div>
                </div>
                

                <table class="sortable table" id="table_pfam" style="width: 90%; margin-left: 1em;"></table> 
                {{html_plot|safe}}
               </div>
            </div>
			{% endif %}

         </div>
       </div>
      </div>
    </div>
  </div>
</div>

{% include "chlamdb/style_menu.html" %}
</body>
</html>

