<!DOCTYPE html>

{% load static %}


<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/calipho-sib/feature-viewer/v1.0.0/dist/feature-viewer.min.css">
<script src="https://cdn.jsdelivr.net/gh/calipho-sib/feature-viewer@v1.0.6/dist/feature-viewer.bundle.js">

</script>

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

{% load custom_tags %}
{% include "chlamdb/header.html" %}

</head>


<body>


{% if not menu %}
	<div class="container-fluid" id="container_no_margin" height="100%">
{% else %}
	<div class="container-fluid" id="main_container">
{% endif %}

  <div class="row">
    <div id="wrapper">
      <div id="page-content-wrapper">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12">

          {% if menu %}
              {% include "chlamdb/menu.html" %}
          {% endif %}
          {% if not valid_id %}
              <div class="alert alert-warning" role="alert" style="width:50%"><a>Unknown accession! Accept protein ids, locus tags and orthogroup IDs</a></div>
              <p>
         {% else %}

            <ul id="tabs" class="nav nav-tabs">

                <li class="active">
					<a href="#main_tab" data-toggle="tab">Overview</a>
				</li>

                <li>
					<a href="#tab3" data-toggle="tab">Sequences</a>
				</li>

				{% if feature_type == "CDS" and n_homologues > 1 %}
                <li>
					<a href="#homologs_tab" data-toggle="tab">
				 	Homologs <span class="badge">{{n_homologues}}</span><br>
					</a>
				</li>
                <li>
					<a href="#phylogenetic_distrib" data-toggle="tab">Phylogenetic distribution</a>
				</li>

                {% if n_homologues >= 2 %}
                <li>
					<a href="#og_phylogeny" data-toggle="tab" >Orthogroup phylogeny</a>
				</li>
                {% endif %}

				{% endif %}


				{% if optional2status|keyvalue:"BLAST_database" and n_refseq_homologs > 0 %}
					<li>
						<a href="#refseq_homologs_tab" data-toggle="tab">
							RefSeq homologs <span class="badge">{{n_refseq_homologs}}</span>
						</a>
					</li>
				{% endif %}

				{% if optional2status|keyvalue:"BLAST_swissprot" and n_swissprot_hits > 0 %}
					<li>
						<a href="#swissprot_homologs_tab" data-toggle="tab">
							SwissProt homologs <span class="badge">{{n_swissprot_hits}}</span>
						</a>
					</li>
				{% endif %}

				{% if has_refseq_phylo and optional2status|keyvalue:"BBH_phylogenies" %}
                    <li><a href="#refseq_phylogeny" data-toggle="tab">RefSeq best hits phylogeny  </a></li>
                {% endif %}
            </ul>

            <div id="my-tab-content" class="tab-content">

				  <div class="tab-pane" id="homologs_tab">
					  {% include "chlamdb/homologs.html" %}
				  </div>

				  <div class="tab-pane" id="phylogenetic_distrib">
					  <h3>Distribution of the homologs in the orthogroup {{og_id|safe}} </h3>

						<div class="tab-pane active" id="tab1">
						  <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">Help</h3>
							  </div>
							  <p style="margin: 10px 10px 10px 10px; line-height: 180%">
							  Number of homologs in each genome (first column) and amino-acid identity of the closest homolog (second column).
							  </p>
						  </div>

						  <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>
				  </div>


				  <div class="tab-pane" id="og_phylogeny">
						<h3>Phylogeny of {{og_id|safe}} </h3>
						  <a download="profile.svg" class="btn" href="{% static og_phylogeny %}">
							  <i class="fa fa-download"></i> Download SVG</a>

						  <a download="alignment.faa" class="btn" href="{% static og_alignment %}">
							  <i class="fa fa-download"></i> Download alignment file</a>
					

						<div class="tab-pane active" id="tab1">
						  <object type="image/svg+xml" data="{% static og_phylogeny %}"></object>
						</div>
				  </div>

				  <div class="tab-pane" id="refseq_phylogeny">
					  <h3>Phylogeny of the RefSeq best hits of {{og_id|safe}}</h3>
						<div class="tab-pane active" id="tab1">
						  <object type="image/svg+xml" data="{% static best_hits_phylogeny %}"></object>
						  <a download="profile.svg" class="btn" href="{% static best_hits_phylogeny %}"><i class="fa fa-download"></i> Download SVG</a>
						</div>
				  </div>

				<div class="tab-pane" id="swissprot_homologs_tab">
					<div class="col-md-12 col-lg-10" style="padding-top:20px">

					<table id="blast_swissprot_table" class="table">
					  <thead>
						<tr>
							{% for entry in swissprot_headers %}
							<th> {{entry}} </th>
							{% endfor %}
						</tr>
					  </thead>
					  <tbody>
						  {% for values in swissprot_blast_data %}
						  <tr>
							  {% for entry in values %}
							      {% if forloop.counter0 == 0 %}
								      <td><a href="https://www.uniprot.org/uniprot/{{entry|safe}}">{{entry|safe}}</a></td>
								  {% else %}
								      <td>{{entry|safe}}</td>
								  {% endif %}
							  
							  {% endfor %}
						  </tr>
						  {%  endfor %}
					  </tbody>
					</table>
					</div>
				</div>

				
				<div class="tab-pane" id="refseq_homologs_tab">
					<br>
					<ul>
					 <li>Number of RefSeq hits: {{n_refseq_homologs}} </li>
					</ul>
					<table id="blast_nr_table" class="table">
					  <thead>
						<tr>
							{% for entry in refseq_headers %}
							<th> {{entry}} </th>
							{% endfor %}
						</tr>
					  </thead>
					  <tbody>
						  {% for values in blast_data %}
						  <tr>
							  {% for entry in values %}
							  <td>{{entry|safe}}</td>
							  {% endfor %}
						  </tr>
						  {%  endfor %}
					  </tbody>
					</table>
				</div>

                <div class="tab-pane active" id="main_tab" style="padding-left: 15px;padding-top:20px">
                        <div class="col-md-12 col-lg-4">
                          <div class="container-fluid">
                            <div class="row">
                              <div class="panel panel-default">
                                <div class="panel-heading">
                                  <h3 class="panel-title">General</h3>
                                </div>
                                  <table id="panel_table" class="table table-striped" style="width: 100%">

                                      <tr>
                                          <th>Source</th>
                                          <td>{{organism}}</td>
                                      </tr>
                                      <tr>
                                          <th>Locus tag</th>
                                          <td>{{locus_tag}}</td>
                                      </tr>

									  <tr>
										  <th> Feature type </th>
										  <td> {{feature_type}} </td>
									  </tr>

                                      <th>Gene</th>
                                          <td>{{gene}}</td>
                                      </tr>

									  <tr>
									  <th>Product</th>
										  <td>{{prot}}</td>
									  </tr>

                                      <tr>
                                          <th>Location</th>
                                          <td>{{start}} - {{end}} (strand: {{strand}})</td>
                                      </tr>

                                      <tr>
                                          <th>Length</th>
										  {% if sequence_type == "CDS" %}
											  <td>{{nucl_length}} (nucleotides) / {{length}} (amino acids)</td>
										  {% else %}
											  <td>{{nucl_length}} (nucleotides)</td>
										  {% endif %}
                                      </tr>
                                      
                                  </table>
                              </div>
                            </div>

						{% if sequence_type == "CDS" %}
                           <div class="row">
                             <div class="panel panel-default">
                               <div class="panel-heading">
                                 <h3 class="panel-title">Orthology</h3>
                               </div>

                                 <table class="table table-striped" style="width: 100%">
                                   <tr>
                                       <th>Orthogroup</th>
                                       <td>{{og_id|safe}}</td>
                                       <td></td>
                                   </tr>
                                   <th>Orthogroup size <a href="#" data-delay='{"show":"50", "hide":"1000"}' data-toggle="tooltip"
										   title='Total number of homologs in the whole database'>
										   <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a></th>
                                       <td>{{og_size}}</td>
                                       <td></td>
                                   </tr>
								   <tr>
                                   <th>N. genomes <a href="#" data-delay='{"show":"50", "hide":"1000"}' data-toggle="tooltip"
										   title='Number of genomes encoding one or several homologs of this protein. See the tab "homologs" for details'>
										   <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
									   </a></th>
                                       <td>{{og_num_genomes}}</td>
                                       <td></td>
                                   </tr>
                                </table>
                             </div>
                           </div>
						 {% endif %}

                        </div> <!-- fluid container -->
                      </div> <!-- first column -->
                      <div class="col-md-12 col-lg-8">

						  <div class=row>
						<div class="panel panel-default">
							  <div class="panel-heading">
								<h3 class="panel-title">Genomic region</h3>
							  </div>
                            <div class="row" style="height:100px; display:flex; justify-content:center; align-items:center; margin-bottom:30px">
								<div id="test_d3_genomic_region">
								</div>
                            </div>


						  </div>
						  </div>

					{%if ko_pathway_data or ko_module_data %}
					  <div class="row">
						<div class="panel panel-default">
						  <div class="panel-heading">
							<h3 class="panel-title">Pathways/Modules <a href="#" data-delay='{"show":"50", "hide":"3000"}' data-toggle="tooltip" title="Data obtained based on PRIAM and KofamScan"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a></h3>
						  </div>
						  <table class="table table-striped" style="width: 100%">

							  {%if ko_pathway_data %}

								  {% for pathway in ko_pathway_data %}
									  <tr>
										  <td>Pathway</td>
										  <td><a href="{% url 'KEGG_mapp_ko' pathway.1 %}" target="_top">{{pathway.1}}</a> <a href="#" data-delay='{"show":"50", "hide":"1000"}' data-toggle="tooltip" title="Click on the pathway id to get the list and distribution of identified proteins in the database."><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a></td>
										  <td>{{pathway.2}}</td>
										  <td>{{pathway.3}}</td>
									  </tr>
								  {% endfor %}


							  {% endif %}
							  {%if ko_module_data %}

								  {% for module in ko_module_data %}
									  <tr>
										  <td>Module</td>
										  <td><a href="{% url 'KEGG_module_map' module.0 %}" target="_top">{{module.0}}</a> <a href="#" data-delay='{"show":"50", "hide":"1000"}' data-toggle="tooltip" title="Click on module id to get the list and distribution of identified proteins in the database."><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>
										  <td>{{module.1}}</td>
										  <td>{{module.2}}</td>
									  </tr>
								  {% endfor %}
							  {% endif %}
						  </table>
						</div>
					  </div>

					{% endif %}

					 {% if cog_entries|length > 0 %}
						<div class="row">
						  <div class="panel panel-default">
							<div class="panel-heading">
							  <h3 class="panel-title">COG annotation(s)</h3>
							</div>
								<table class="table table-striped" style="width: 100%">
									<thead>

										  <tr>
											  {% for h in cog_header %}
												  <th> {{h|safe}} </th>
											  {% endfor %}
										  </tr>
									</thead>

									<tbody>
										{% for row in cog_entries %}
										<tr>
											{% for entry in row %}
											<td> {{ entry|safe }}</td>
											{% endfor %}
										</tr>
										{% endfor %}
									</tbody>

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

					 {% if pfam_def|length > 0 %}
					 	<div class="row">
							<div class="panel panel-default">
								<div class="panel-heading">
								  <h3 class="panel-title">Domains</h3>
								</div>
								<div id="div_features">
								</div>

								<table id="panel_table" class="table table-striped" style="width: 100%">
								{% for val in pfam_def %}
								<tr>
									<th>{{val.0|safe}}</th>
									<td>{{val.1}}</td>
								</tr>
								{% endfor %}
								</table>
							</div>
						</div>
					 {% endif %}

					 {% if ko_entries|length > 0 %}
						<div class="row">
						  <div class="panel panel-default">
							<div class="panel-heading">
							  <h3 class="panel-title">Kegg Ortholog annotation(s)</h3>
							</div>
							<table class="table table-striped" style="width: 100%">
								<thead>
								  <tr>
									  {% for entry in ko_header %}
									  	<th> {{entry|safe}} </th>
									  {% endfor %}
								  </tr>
								</thead>
								<tbody>
									{% for row in ko_entries %}
										<tr>
											{% for e in row %}
												<td> {{e|safe}}</td>
											{% endfor %}
										</tr>
									{% endfor %}
								</tbody>
							</table>
						  </div>
						</div>
					  {% endif %}

                    </div> <!-- second column -->
                </div> <!-- first tab -->


                <div class="tab-pane" id="tab3" width="100%" height="100%">
                  <div class="row" style="padding-top:15px;">
                    <div class="col-lg-6">

					{% if sequence_type == "CDS" %}
                      <div class="row">
                        <div class="panel panel-default">
                          <div class="panel-heading">
                            <h3 class="panel-title">Protein Sequence</h3>
                          </div>
                          <div class="panel-body">
                            <p style="word-wrap: break-word;" class="text-justify">{{translation}}</p>
                          </div>
                        </div>
                      </div>
					{% endif %}

                      <div class="row">

                        <div class="panel panel-default">
                          <div class="panel-heading">
                            <h3 class="panel-title">Flanking regions ( +/- flanking 50bp)</h3>
                          </div>
                          <div class="panel-body">
                            <p style="word-wrap: break-word;" class="text-justify">{{ seq|safe }}</p>
                          </div>
                        </div>
                      </div>

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

<style>
#description_field{
    width:100px;


}

</style>

</body>

{% csrf_token %}

<script>


$(document).ready(function() {
    $('#domains_table').DataTable( {
        dom: 't',
        "order": [[ 0, "desc" ]],
        "pageLength": 200
    } );
} );


$(document).ready(function() {
    $('#homologues_table').DataTable( {
        dom: 'Bfrtip',
        columnDefs: [
            {
                targets: 6,
                visible: true
            },
            {
                targets: 8,
                visible: true
            },
            {
                targets: 9,
                visible: true
            }
        ],
        buttons: [
            {
                extend: 'colvis',
                columns: ':not(.noVis)',
            },
            {
                extend: 'excel',
                title: 'homologs'
            },
            {
                extend: 'csv',
                title: 'homologs'
            }

        ],
        "pageLength": 10
    } );
} );


$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

{% if n_swissprot_hits > 0 %}
$(document).ready(function() {
	$('#blast_swissprot_table').DataTable( {
	  dom: 'lBfrtip',
	  buttons: [
		  {
			  extend: 'colvis',
			  columns: ':not(.noVis)',
		  },
		  {
			  extend: 'excel',
			  title: 'blast_swissprot'
		  },
		  {
			  extend: 'csv',
			  title: 'blast_swissprot'
		  }
	  ],
	  "paging":   true,
	  "ordering": true,
	  "info":     false,
	  } );
});
{% endif %}


{% if pfam_def|length > 0 %}
window.onload = function() {
	var ft2 = new FeatureViewer("{{translation}}",
		"#div_features", 
		{
			showAxis: true,
			showSequence: false,
			brushActive: false,
			toolbar:false,
			bubbleHelp:true,
			zoomMax:1}
	);

	features = {{pfam_domains|safe}};

	for(fet in features) {
		let curr_fet = features[fet];
		ft2.addFeature(curr_fet);
	}
}
{% endif %}

$(document).ready(function() {
	$('#blast_nr_table').DataTable( {
	  dom: 'lBfrtip',
	  buttons: [
		  {
			  extend: 'colvis',
			  columns: ':not(.noVis)',
		  },
		  {
			  extend: 'excel',
			  title: 'plast_refseq'
		  },
		  {
			  extend: 'csv',
			  title: 'plast_refseq'
		  }
	  ],
	  "paging":   true,
	  "ordering": true,
	  "info":     false,
	  } );
});

$('.dropdown-toggle').dropdown()

function inIframe(){try{return window.self!==window.top}catch(e){return true}}


var genomic_region = {{genomic_region|safe}} ;
var window_size = {{window_size}};

createGenomicRegion(d3.select("#test_d3_genomic_region"), "genomic_region", [genomic_region],
	0, ["{{locus_tag}}"], window_size);

</script>

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

</html>
