<!DOCTYPE html>


<html>
<head>

{% load custom_tags %}
{% load static %}
{% load crispy_forms_tags %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js" integrity="sha512-yocoLferfPbcwpCMr8v/B0AB4SWpJlouBwgE0D3ZHaiP1nuu5djZclFEIj9znuqghaZ3tdCMRrreLoM8km+jIQ==" crossorigin="anonymous"></script>

<script src="{% static 'js/circos.js' %}"></script>
{% include "chlamdb/header.html" %}

</head>

<body>

  <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" %}
                 <p class="page-title"><b>Circos plots indicating the presence/absence of homologous proteins in one or multiple other genomes </b><a href="https://zdb.readthedocs.io/en/latest/tutorial/website.html#genome-alignments" id="show-option" target="_blank"  title="Get a Circos plot to compare genomes (Targets) and visualize the presence/absence of homologous proteins according to the selected reference one (Circos reference)"><i class="fab fa-info-circle " style="size: 5em;" ></i></a></p></center>
 
                {% block content %}
				{% csrf_token %}
				{% crispy form %}
                {% endblock %}

              </div>

             
                  {% if envoi %}
                  <div class="row">
                    <div class="col-lg-12">
                      <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                        <br>
                        <div class="panel panel-success" style="width:100%; top: 200px ; margin: 10px 10px 10px 10px">
                          <div class="panel-heading" style="width:100%">
                              <h3 class="panel-title">Info about the analysis</h3>
                          </div>
                          <div style="padding-left:20px">
                            <br>
                         
                           <ul id="circos_ul" style="list-style-type:disc;">  
                                <li>The first outer circle (<span style="color: rgb(79, 188, 221);"><b>light-blue</b></span>/<span style="color: red;"><b>red</b></span>) is made of barplots indicating the frequency of each orthogroup in the selected genomes.</li>
                                <li>In the second circle the contigs of the reference genome are displayed (<span style="color: orangered;"><b>orange</b></span>/<span style="color: rgb(81, 190, 166);"><b>aquamarine</b></span>)</li>
                                <li>The third and fourth circles represent the forward and reverse strands and show open reading frames from the reference genome (in <span style="color: rgb(92, 92, 92)"><b>gray</b></span>)</li>
                                <ol>
                                    <li>rRNA are colored in <span style="color: rgb(200, 41, 248)"><b>pink</b></span></li>
                                </ol>
                                <li>Inner <span style="color: rgb(114, 22, 22);"><b>bordeaux</b></span>/<span style="color: rgb(79, 188, 221);"><b>light-blue</b></span> circle(s) indicate the presence(bordeaux scale)/absence(light blue) of homologous proteins in one or multiple other genomes</li>
                                <li>The inner circle (<span style="color: green;"><b>green</b></span>) indicate the GC content of each open reading frames of the reference genome</li> 
                                <br>
                                Click on features of the third circle (in <span style="color: rgb(92, 92, 92)"><b>gray</b></span>) to get detailed information about the corresponding locus.
                                <br>
                          </ul>
                        </div>
                      </div>
					  </ul>
					</div>
				  </div>
				  {% endif %}
              <div id='heatmapChart' class='chartclass'></div>

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

{% include "chlamdb/style_menu.html" %}



<script type="text/javascript">

{{js_code|safe}}

{% if envoi %}
/*
  $(document).ready(function(){
    d3.select("#download").append("button")
            .attr("type","button")
            .attr("class", "btn btn-primary btn-sm")
            .text("Download SVG")
            .on("click", function() {
				var svg_div = document.getElementById('heatmapChart');
				var svg = svg_div.getElementsByTagName('svg')[0];
				svgExport.downloadSvg(svg, "circos_plot");
            });
  });
  */
{% endif %}
</script>

</html>
