<!DOCTYPE html>


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

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

<STYLE TYPE="text/css">

<!--

A:active{background:transparent;color:red}

-->
</STYLE>
<STYLE TYPE="text/css">
<!--
TD{font-family:Fixed,Courier,monospace;background-color:white;color:black;}
FONT.S0{background-color:#000000;color:#FFFFFF} FONT.T0{color:#000000} /* black */
FONT.S1{background-color:#ffffff;color:#000000} FONT.T1{color:#ffffff} /* white */
FONT.S2{background-color:#ff0000;color:#FFFFFF} FONT.T2{color:#ff0000} /* red */
FONT.S3{background-color:#00ff00;color:#000000} FONT.T3{color:#00ff00} /* green */
FONT.S4{background-color:#0000ff;color:#FFFFFF} FONT.T4{color:#0000ff} /* blue */
FONT.S5{background-color:#00ffff;color:#000000} FONT.T5{color:#00ffff} /* cyan */
FONT.S6{background-color:#ff00ff;color:#FFFFFF} FONT.T6{color:#ff00ff} /* magenta */
FONT.S7{background-color:#ffff00;color:#000000} FONT.T7{color:#ffff00} /* yellow */
FONT.S8{background-color:#6600cc;color:#FFFFFF} FONT.T8{color:#6600cc} /* purple */
FONT.S9{background-color:#0099ff;color:#FFFFFF} FONT.T9{color:#0099ff} /* dull-blue */
FONT.S10{background-color:#33cccc;color:#000000} FONT.T10{color:#33cccc} /* dark-green-blue */
FONT.S11{background-color:#00ffcc;color:#000000} FONT.T11{color:#00ffcc} /* medium-green-blue */
FONT.S12{background-color:#0033ff;color:#FFFFFF} FONT.T12{color:#0033ff} /* bright-blue */
FONT.S13{background-color:#009900;color:#FFFFFF} FONT.T13{color:#009900} /* dark-green */
FONT.S14{background-color:#33cc00;color:#000000} FONT.T14{color:#33cc00} /* bright-green */
FONT.S15{background-color:#ff3333;color:#FFFFFF} FONT.T15{color:#ff3333} /* orange */
FONT.S16{background-color:#cc6600;color:#FFFFFF} FONT.T16{color:#cc6600} /* orange-brown */
FONT.S17{background-color:#cc0000;color:#FFFFFF} FONT.T17{color:#cc0000} /* bright-red */
FONT.S18{background-color:#999999;color:#FFFFFF} FONT.T18{color:#999999} /* light-gray */
FONT.S19{background-color:#666666;color:#FFFFFF} FONT.T19{color:#666666} /* dark-gray */
FONT.S20{background-color:#ffffff;color:#000000} FONT.T20{color:#ffffff} /* gray0 */
FONT.S21{background-color:#eeeeee;color:#000000} FONT.T21{color:#eeeeee} /* gray1 */
FONT.S22{background-color:#dddddd;color:#000000} FONT.T22{color:#dddddd} /* gray2 */
FONT.S23{background-color:#cccccc;color:#000000} FONT.T23{color:#cccccc} /* gray3 */
FONT.S24{background-color:#bbbbbb;color:#FFFFFF} FONT.T24{color:#bbbbbb} /* gray4 */
FONT.S25{background-color:#aaaaaa;color:#FFFFFF} FONT.T25{color:#aaaaaa} /* gray5 */
FONT.S26{background-color:#999999;color:#FFFFFF} FONT.T26{color:#999999} /* gray6 */
FONT.S27{background-color:#888888;color:#FFFFFF} FONT.T27{color:#888888} /* gray7 */
FONT.S28{background-color:#777777;color:#FFFFFF} FONT.T28{color:#777777} /* gray8 */
FONT.S29{background-color:#666666;color:#FFFFFF} FONT.T29{color:#666666} /* gray9 */
FONT.S30{background-color:#555555;color:#FFFFFF} FONT.T30{color:#555555} /* gray10 */
FONT.S31{background-color:#444444;color:#FFFFFF} FONT.T31{color:#444444} /* gray11 */
FONT.S32{background-color:#333333;color:#FFFFFF} FONT.T32{color:#333333} /* gray12 */
FONT.S33{background-color:#222222;color:#FFFFFF} FONT.T33{color:#222222} /* gray13 */
FONT.S34{background-color:#111111;color:#FFFFFF} FONT.T34{color:#111111} /* gray14 */
FONT.S35{background-color:#000000;color:#FFFFFF} FONT.T35{color:#000000} /* gray15 */
FONT.S36{background-color:#e53319;color:#FFFFFF} FONT.T36{color:#e53319} /* clustal-red */
FONT.S37{background-color:#197fe5;color:#FFFFFF} FONT.T37{color:#197fe5} /* clustal-blue */
FONT.S38{background-color:#19cc19;color:#000000} FONT.T38{color:#19cc19} /* clustal-green */
FONT.S39{background-color:#19b2b2;color:#FFFFFF} FONT.T39{color:#19b2b2} /* clustal-cyan */
FONT.S40{background-color:#e57f7f;color:#FFFFFF} FONT.T40{color:#e57f7f} /* clustal-pink */
FONT.S41{background-color:#cc4ccc;color:#FFFFFF} FONT.T41{color:#cc4ccc} /* clustal-magenta */
FONT.S42{background-color:#cccc00;color:#000000} FONT.T42{color:#cccc00} /* clustal-yellow */
FONT.S43{background-color:#e5994c;color:#FFFFFF} FONT.T43{color:#e5994c} /* clustal-orange */
FONT.S44{background-color:#ffffff;color:#000000} FONT.T44{color:#ffffff} /* clustal-white */
FONT.S45{background-color:#999999;color:#FFFFFF} FONT.T45{color:#999999} /* clustal-light-gray */
FONT.S46{background-color:#666666;color:#FFFFFF} FONT.T46{color:#666666} /* clustal-dark-gray */
FONT.S47{background-color:#000000;color:#FFFFFF} FONT.T47{color:#000000} /* clustal-black */
FONT.S48{background-color:#ffffff;color:#000000} FONT.T48{color:#ffffff} /* clustal-white-print */
FONT.S49{background-color:#ffff00;color:#000000} FONT.T49{color:#ffff00} /* clustal-yellow-print */
FONT.S50{background-color:#6619e5;color:#FFFFFF} FONT.T50{color:#6619e5} /* clustal-violet-print */
FONT.S51{background-color:#e57f66;color:#FFFFFF} FONT.T51{color:#e57f66} /* clustal-red-print */
FONT.S52{background-color:#66e5e5;color:#000000} FONT.T52{color:#66e5e5} /* clustal-blue-print */
FONT.S53{background-color:#b299e5;color:#FFFFFF} FONT.T53{color:#b299e5} /* clustal-purple-print */
FONT.S54{background-color:#000000;color:#FFFFFF} FONT.T54{color:#000000} /* clustal-black-print */
FONT.S55{background-color:#e57f7f;color:#FFFFFF} FONT.T55{color:#e57f7f} /* clustal-pink-print */
FONT.S56{background-color:#19b2b2;color:#FFFFFF} FONT.T56{color:#19b2b2} /* clustal-cyan-print */
FONT.S57{background-color:#cc4ccc;color:#FFFFFF} FONT.T57{color:#cc4ccc} /* clustal-magenta-print */
FONT.S58{background-color:#e5994c;color:#FFFFFF} FONT.T58{color:#e5994c} /* clustal-orange-print */
FONT.S59{background-color:#19cc19;color:#000000} FONT.T59{color:#19cc19} /* clustal-green-print */
FONT.S60{background-color:#999999;color:#FFFFFF} FONT.T60{color:#999999} /* clustal-light-gray-print */
FONT.S61{background-color:#99b2b2;color:#FFFFFF} FONT.T61{color:#99b2b2} /* clustal-dark-gray-print */
FONT.S62{background-color:#ff1111;color:#FFFFFF} FONT.T62{color:#ff1111} /* nardi-red */
FONT.S63{background-color:#1155ff;color:#FFFFFF} FONT.T63{color:#1155ff} /* nardi-blue */
FONT.S64{background-color:#11dd11;color:#000000} FONT.T64{color:#11dd11} /* nardi-green */
FONT.S65{background-color:#11ffff;color:#000000} FONT.T65{color:#11ffff} /* nardi-cyan */
FONT.S66{background-color:#ffff11;color:#000000} FONT.T66{color:#ffff11} /* nardi-yellow */
FONT.S67{background-color:#ff7f11;color:#FFFFFF} FONT.T67{color:#ff7f11} /* nardi-orange */
FONT.S68{background-color:#ff11ff;color:#FFFFFF} FONT.T68{color:#ff11ff} /* nardi-pink */
FONT.S69{background-color:#6611cc;color:#FFFFFF} FONT.T69{color:#6611cc} /* nardi-purple */
FONT.S70{background-color:#197fe5;color:#FFFFFF} FONT.T70{color:#197fe5} /* nardi-dull-blue */
FONT.S71{background-color:#666666;color:#FFFFFF} FONT.T71{color:#666666} /* nardi-dark-gray */
FONT.S72{background-color:#999999;color:#FFFFFF} FONT.T72{color:#999999} /* nardi-light-gray */
FONT.S73{background-color:#90fe23;color:#000000} FONT.T73{color:#90fe23} /* lin-A */
FONT.S74{background-color:#fe5e2d;color:#FFFFFF} FONT.T74{color:#fe5e2d} /* lin-R */
FONT.S75{background-color:#2e3d2d;color:#FFFFFF} FONT.T75{color:#2e3d2d} /* lin-N */
FONT.S76{background-color:#00903b;color:#FFFFFF} FONT.T76{color:#00903b} /* lin-D */
FONT.S77{background-color:#004baa;color:#FFFFFF} FONT.T77{color:#004baa} /* lin-C */
FONT.S78{background-color:#864b00;color:#FFFFFF} FONT.T78{color:#864b00} /* lin-Q */
FONT.S79{background-color:#3fa201;color:#FFFFFF} FONT.T79{color:#3fa201} /* lin-E */
FONT.S80{background-color:#10fe68;color:#000000} FONT.T80{color:#10fe68} /* lin-G */
FONT.S81{background-color:#b2063b;color:#FFFFFF} FONT.T81{color:#b2063b} /* lin-H */
FONT.S82{background-color:#04ced9;color:#000000} FONT.T82{color:#04ced9} /* lin-I */
FONT.S83{background-color:#4972fe;color:#FFFFFF} FONT.T83{color:#4972fe} /* lin-L */
FONT.S84{background-color:#c4a100;color:#FFFFFF} FONT.T84{color:#c4a100} /* lin-K */
FONT.S85{background-color:#2a84dd;color:#FFFFFF} FONT.T85{color:#2a84dd} /* lin-M */
FONT.S86{background-color:#a60ade;color:#FFFFFF} FONT.T86{color:#a60ade} /* lin-F */
FONT.S87{background-color:#fe61fe;color:#FFFFFF} FONT.T87{color:#fe61fe} /* lin-P */
FONT.S88{background-color:#f7e847;color:#000000} FONT.T88{color:#f7e847} /* lin-S */
FONT.S89{background-color:#fefeb3;color:#000000} FONT.T89{color:#fefeb3} /* lin-T */
FONT.S90{background-color:#4a007f;color:#FFFFFF} FONT.T90{color:#4a007f} /* lin-W */
FONT.S91{background-color:#e903a8;color:#FFFFFF} FONT.T91{color:#e903a8} /* lin-Y */
FONT.S92{background-color:#5bfdfd;color:#000000} FONT.T92{color:#5bfdfd} /* lin-V */
FONT.S93{background-color:#90fe23;color:#000000} FONT.T93{color:#90fe23} /* find-A */
FONT.S94{background-color:#fe5e2d;color:#FFFFFF} FONT.T94{color:#fe5e2d} /* find-B */
FONT.S95{background-color:#2e3d2d;color:#FFFFFF} FONT.T95{color:#2e3d2d} /* find-C */
FONT.S96{background-color:#00903b;color:#FFFFFF} FONT.T96{color:#00903b} /* find-D */
FONT.S97{background-color:#004baa;color:#FFFFFF} FONT.T97{color:#004baa} /* find-E */
FONT.S98{background-color:#864b00;color:#FFFFFF} FONT.T98{color:#864b00} /* find-F */
FONT.S99{background-color:#3fa201;color:#FFFFFF} FONT.T99{color:#3fa201} /* find-G */
FONT.S100{background-color:#10fe68;color:#000000} FONT.T100{color:#10fe68} /* find-H */
FONT.S101{background-color:#b2063b;color:#FFFFFF} FONT.T101{color:#b2063b} /* find-I */
FONT.S102{background-color:#04ced9;color:#000000} FONT.T102{color:#04ced9} /* find-J */
FONT.S103{background-color:#4972fe;color:#FFFFFF} FONT.T103{color:#4972fe} /* find-K */
FONT.S104{background-color:#c4a100;color:#FFFFFF} FONT.T104{color:#c4a100} /* find-L */
FONT.S105{background-color:#2a84dd;color:#FFFFFF} FONT.T105{color:#2a84dd} /* find-M */
FONT.S106{background-color:#a60ade;color:#FFFFFF} FONT.T106{color:#a60ade} /* find-N */
FONT.S107{background-color:#fe61fe;color:#FFFFFF} FONT.T107{color:#fe61fe} /* find-O */
FONT.S108{background-color:#f7e847;color:#000000} FONT.T108{color:#f7e847} /* find-P */
FONT.S109{background-color:#fefeb3;color:#000000} FONT.T109{color:#fefeb3} /* find-Q */
FONT.S110{background-color:#4a007f;color:#FFFFFF} FONT.T110{color:#4a007f} /* find-R */
FONT.S111{background-color:#e903a8;color:#FFFFFF} FONT.T111{color:#e903a8} /* find-S */
FONT.S112{background-color:#5bfdfd;color:#000000} FONT.T112{color:#5bfdfd} /* find-T */
#container{font-size: 10px; line-height: 12px;}
#blast_res {font-size: 8px; line-height: 10px;}
body {
background-color: rgb(255, 255, 255); 
margin-top: 15em;

}

</STYLE>

<script type="text/javascript" src="{% static 'js/blaster.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></a>Blast a sequence of interest against the genomes of the database </b><a href="https://zdb.readthedocs.io/en/latest/tutorial/website.html#homology-search-blast" id="show-option" target="_blank"><i class="fab fa-info-circle " style="size: 5em;" ></i></a></p></center>
                  <hr class="lines-home">
         
                  <div class="panel panel-success">
                      <div class="panel-heading" style="width:100%">
                          <h3 class="panel-title">Help</h3>
                      </div>
                      <table class="table">
                          <tr><td>ffn </td><td> CDS nucleotide sequences</td></tr>
                          <tr><td>fna</td><td>genome sequence(s) </td></tr>
                          <tr><td>faa</td><td>protein sequences </td></tr>
                          <tr><td>blastn</td><td>dna sequence vs dna sequences database</td></tr>
                          <tr><td>blastp</td><td>protein sequence vs protein sequences database</td></tr>
                          <tr><td>blastx</td><td>translated dna sequence vs protein sequences database </td></tr>
                          <tr><td>tblastn</td><td>protein sequence vs translated nucleotide sequences database</td></tr>
                      </table>
		    </div>


		 
			<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>  The blast input can be either an amino-acid or a nucleotide sequence, or a set (one or more) of fasta sequences.
			</div>
                  
                  <form action="{% url "blast" %}" method="post">{% csrf_token %}
                    {{ form.as_p }} 
                    <input type="submit" value="Submit" />
                  </form>


                  {% if wrong_format %}
					  <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>
						  {{ error_message }}
					  </div>
                  {% endif %}


                  {% if envoi %}
				<br>
				  <div class="row" style="padding-top:1em ;background-color: rgba(245, 245, 245, 0.986)" >
                    <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 blast search generates two output pages according to the search parameters set up in the analysis:
                            <br><b>Details</b>: this page showa the graphical overview of blast hits identified on the genome(s) of interest colored according to the max score or E-value. Each hit is listed in the following table. It reportes the alignment scores and the contigs or locus tags of the match (Note that the locus tag is clickable and redirects you to a comphensive locus tag overview). 
							{% if phylo_distrib %}
							<br><b>Phylogenetic distribution</b>: Heatmap of the amino-acid/nucleotide identity of the best hit for each taxa.
							{% endif %}
                        </p>
                    </div>
                    {% include "chlamdb/venn_template_orthogroups.html" with series=series description_dico=orthogroup2description %}
                    </div>
                </div>
             {% if phylo_distrib %}
             <br>
				  	  <nav>
						  <ul id="tabs_blast" class="nav nav-tabs">
							  <li class="active">
								  <a href="#blast_details" data-toggle="tab">
									  Details
								  </a>
							  </li>
							  <li>
								  <a href="#phylo_distrib" data-toggle="tab">
									  Phylogenetic distribution
								  </a>
							  </li>
						  </ul>
					  </nav>
					  {% endif %}

					  	
					  <div class="tab-content">
						  <div class="tab-pane active" id="blast_details">

							  {% if js_out %}
								  <div id='snippetDiv'></div>
								  <div id="blast-multiple-alignments"></div> 
								  <div id="blast-alignments-table"></div> 
								  <div id="blast-single-alignment"></div> 
							  {% endif %}

							  {% if blast_result %} 
								  <h3>Result</h3>
								   <div id="blast_res">
								  {% autoescape off %}{{blast_result}}{% endautoescape %}</div>
							  {% elif blast_no_hits %}   
								  <h3>No hits</h3>
							  {% elif blast_err %}
									<h3>Error</h3>
									<pre id="blast_result">
									 {% autoescape off %}{{blast_err}}{% endautoescape %}
									</pre>
							  {% endif %}
						  </div>

						  {% if phylo_distrib %}
							  <div class="tab-pane" id="phylo_distrib">
								
								<br>
								  <object type="image/svg+xml" data="{% static asset_path %}">
								  </object>

								  <a download="profile.svg" class="btn" href="{% static asset_path %}">
									  <i class="fa fa-download"></i> Download SVG</a>
							  </div>
						  {% endif %}
					  </div>


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

<script>

var blasterjs = require("biojs-vis-blasterjs");

$(document).ready(function(){
    $.get( "{{asset_blast_path}}", function(text, status, xhr) {
        var tmp = String(text);
        var instance = new blasterjs({
             string: tmp,
             multipleAlignments: "blast-multiple-alignments",
             alignmentsTable: "blast-alignments-table",
             singleAlignment: "blast-single-alignment",
             blastType: "{{blastType}}"
        });
    }, 'text');
});

</script>
</html>

