<!DOCTYPE html>


<html>
<head>
{% load static %}
{% load crispy_forms_tags %}


<script type="text/javascript" src={% static 'js/genomic_region.js' %}>
</script>

<script type="text/javascript" src="{% static 'js/svg-export.min.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>Plot genomic features in the neighborhood of a target locus </b><a href="https://zdb.readthedocs.io/en/latest/tutorial/website.html#genome-alignments" id="show-option" target="_blank"  title="INPUT: locus tag or protein ID"><i class="fab fa-info-circle " style="size: 5em;" ></i></a></p></center>


                  
				  <div class="alert alert-info fade in" style="width:80%;  margin: 10px 10px 10px 10px">
					  <a href="#" class="close" data-dismiss="alert">&times;</a>
					  <strong>Note!</strong> If the target locus has no homolog in the selected genome(s), the plot cannot be drawn (it will only display the reference locus region).
				  </div>
<br>
				 


                  <div style="width: 100%;">
                    <div class="row">
                      <div  class="col-md-12" style="padding-left: 15px">
                        {% block content %}
						{% csrf_token %}
						{% crispy form %}
                        {% endblock %}
                      </div>
                    </div>

                    <div class="row">
                      <div  class="col-md-12 col-lg-12" style="padding-left: 15px">


            {% if error %}
				  <div class="alert alert-info fade in" style="width:80%;  margin: 10px 10px 10px 10px">
					  <a href="#" class="close" data-dismiss="alert">&times;</a>
					  <strong> Error: </strong>
					  <ul>
					  {% for error_msg in errors %}
						  <li> {{error_msg}} </li>
					  {% endfor %}
					  </ul>
				  </div>
          {% endif %}
          
            {% if envoi %}
            <div class="row" style="padding-top:1em ;background-color: rgba(245, 245, 245, 0.986)" >
              <br>
              <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 generated plot shows a genomic feature in the neighborhood of a target locus along the selected genomes. Links are coloured wiht a scale of gray reflecting the sequence identity:
                      dark gray for highly conserved, light grey for features with less identity. Click on the link to visualise the percentage of identity.                       <br> Homolog counts can be reordrered by clicking on column headers.<br>
                      <strong>Note!</strong> If the target locus has no homolog in the selected genome(s), the plot cannot be drown (it will only display the reference locus region).
                    </p>
                </div>
               </div>
               <br>
<button id="download_svg_button">Download SVG</button>

						  <div id="div_alignment">

						  </div>
					  {% endif %}
					</div>

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


<script>

{% if envoi %}

var regions = {{genomic_regions|safe}};
var to_highlight = {{to_highlight|safe}};
var connections = {{connections | safe}};
var window_size = {{window_size}};
var ident_range = [{{min_ident}}, {{max_ident}}];

createGenomicRegion(d3.select("#div_alignment"), "genomic_region", regions, connections,
	to_highlight, window_size, ident_range);

document.querySelector("#download_svg_button").onclick = function() {
	var svg_elem = document.querySelector("#genomic_region");
	svgExport.downloadSvg(svg_elem, "Genomic region");
};
{% endif %}

</script>

</html>
