<!DOCTYPE html>


<html>
<head>
  {% load static %}
  {% include "chlamdb/header.html" %}
</head>
<script src="https://d3js.org/d3.v4.js"></script>
<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="pan" %}
                
                  <br>
                  <p class="page-title"><b>Accumulation/rarefaction plot 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>

                  

              <form action='{% url "pan_genome" type %}' method="post">
                  {% csrf_token %}
                  {{ form.as_p }}
                  <input type="submit" value="Submit" />
              </form>


              </div>

              {% if envoi %}
              <div class="row" style="padding-top:30px; background-color: rgba(245, 245, 245, 0.986); margin-top: 2em">
              <div class="panel panel-success" style="margin: 1em;" >
                <div class="panel-heading" style="width:100%">
                  <h5 class="panel-title">Help to interpret the results
                </div>
                <p style="margin: 10px 10px 10px 10px">
				This plot shows the relationship between the number of {{type_txt}} and the number of genomes considered.

				<br>The <span style="color: #69b3a2;"><b>green</b></span> and the <span style="color: #5499c7;"><b>blue</b></span> lines are both based on a single random permutation of the selected genomes. The <span style="color: #69b3a2;"><b>green</b></span> line represent the total number of {{type_txt}} present in the first n genomes of the permutation. The <span style="color: #5499c7;"><b>blue</b></span> represents the number of {{type_txt}} shared by the first n genomes of the permutation.

				<br>The <span style="color:#FF6347;"><b>red</b></span> line shows the number of {{type_txt}} present in exactly n genomes. This plot do not depend on a permutation and it is possible to click on the points to get more detailed information.
				<br>

                </p>
            </div>
 

           <div class="tab-pane active" id="tab1" style="margin: 1em;">
				<div class="panel panel-success" style="width:100%; top: 200px; ">
					<div style="width: 1000px;" id="rarefaction_plot">
					</div>

					<div id="plot_type" style="display: flex; justify-content: space-around; width: 900px;">
						<div>
							<input style="margin-left" value="pangenome" type="radio" id="pangenome" name="plot_type" checked>
							<label for="pangenome">Total number of {{type_txt}}</label>
						</div>

						<div>
							<input style="center" type="radio" value="coregenome" id="coregenome" name="plot_type">
							<label for="coregenome">Number of shared {{type_txt}}</label>
						</div>

						<div>
							<input style="margin-right" type="radio" value="ortho_distrib" id="ortho_distrib" name="plot_type">
							<label for="ortho_distrib">Distribution of {{type_txt}}</label>
						</div>
					</div>
				</div>
			  </div>

			  <div id="download_svg">
			  </div>

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


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

</body>

<script>

var image_size_x = 900;

var data_count = {{ js_data_count |safe }};
var data_acc = {{ js_data_acc|safe }};
var data_core = {{ js_data_core| safe }};
var margins = {top: 10, bottom:80, left:100, right:100};

var width = image_size_x-margins.left-margins.right;
var height = 500-margins.bottom-margins.top;

var acc_color="#69b3a2";
var shared_color="#FF6347";
var core_color="#5499c7";

var x_scale = d3.scaleLinear().
	domain([1, data_count.length]).
	range([0, width]);

var y_scale_acc = d3.scaleLinear().
	domain([0.95*d3.min(data_acc), 1.05*d3.max(data_acc)]).
	range([height, 0]);

var y_scale_count = d3.scaleLinear().
	domain([0, 1.05*d3.max(data_count)]).
	range([height, 0]);

var y_scale_core = d3.scaleLinear().
	domain([0, 1.05*d3.max(data_core)]).
	range([height, 0]);


var svg = d3.select("#rarefaction_plot").
	append("svg").
	attr("id", "current_plot").
	attr("width", image_size_x).
	attr("height", height+margins.bottom+margins.top).
	append("g").
	attr("transform",
		"translate(" + margins.left + "," + margins.top +")");

svg.append("text").
	attr("text-anchor", "middle").
	attr("x", width/2).
	attr("y", height+margins.bottom/2).
	text("Number of genomes");


svg.append("text").
	attr("text-anchor", "middle").
	attr("x", -margins.left/2).
	attr("y", height/2).
	attr("transform", "rotate(-90," + -margins.left/2+ ","+height/2+")").
	attr("id", "y-axis-label").
	text("Number of {{type_txt}}");


svg.append("g").
	attr("transform", "translate(0,"+ height +")").
	call(d3.axisBottom(x_scale));


svg.append("g").
	attr("id", "axis_acc").
	call(d3.axisLeft(y_scale_acc));

svg.append("g").
	attr("id", "axis_core").
	call(d3.axisLeft(y_scale_core));

svg.append("g").
	attr("id", "axis_distrib").
	call(d3.axisLeft(y_scale_count));

var enumerate = function(d) { 
	let arr = [];
	for(var i=0; i<d.length; i++) {
		arr.push([i+1, d[i]]);
	}
	return arr;
}


svg.append("path").
	attr("id", "data_acc_path").
	datum(enumerate(data_acc)).
	attr("fill", "none").
	attr("stroke", acc_color).
	attr("stroke-width", 1.5).
	attr("d", d3.line()
		.x(function(d) { return x_scale(d[0]); })
		.y(function(d) { return y_scale_acc(d[1]); })
	);

svg.append("path").
	attr("id", "data_distrib_path").
	datum(enumerate(data_count)).
	attr("fill", "none").
	attr("stroke", shared_color).
	attr("stroke-width", 1.5).
	attr("d", d3.line()
		.x(function(d) { return x_scale(d[0]); })
		.y(function(d) { return y_scale_count(d[1]); })
	);

svg.append("g").
	attr("id", "data_acc_points").
	selectAll("dot").
	data(enumerate(data_acc)).
	enter().
	append("circle").
	attr("cx", function(d) { return x_scale(d[0]); }).
	attr("cy", function(d) { return y_scale_acc(d[1]); }).
	attr("r", 3).
	attr("fill", acc_color);


svg.append("path").
	attr("id", "data_core_path").
	datum(enumerate(data_core)).
	attr("fill", "none").
	attr("stroke", core_color).
	attr("stroke-width", 1.5).
	attr("d", d3.line()
		.x(function(d) { return x_scale(d[0]); })
		.y(function(d) { return y_scale_core(d[1]); })
	);


svg.append("g").
	attr("id", "data_core_points").
	selectAll("dot").
	data(enumerate(data_core)).
	enter().
	append("circle").
	attr("cx", function(d) { return x_scale(d[0]); }).
	attr("cy", function(d) { return y_scale_core(d[1]); }).
	attr("r", 3).
	attr("fill", core_color);


svg.append("g").
	attr("id", "data_distrib_points").
	selectAll("dot").
	data(enumerate(data_count)).
	enter().
	append("circle").
	attr("cx", function(d) { return x_scale(d[0]); }).
	attr("cy", function(d) { return y_scale_count(d[1]); }).
	attr("r", 3).
	attr("fill", shared_color);


/*
To be added later

on("click", clicked);


function clicked(d) {
	var checked_val = $("input[name='plot_type']:checked").val();
	if(checked_val != "ortho_distrib") {
		return;
	}

	d3.select(this).attr("fill", "back");
} */


function change_plot() {
	var new_checked = $("input[name='plot_type']:checked").val();
	var is_pan = new_checked==="pangenome";
	var is_core = new_checked==="coregenome";
	var is_distrib = new_checked==="ortho_distrib";

	d3.select("#axis_acc").attr("visibility", is_pan? "visible" : "hidden");
	d3.select("#axis_distrib").attr("visibility", is_distrib? "visible" : "hidden");
	d3.select("#axis_core").attr("visibility", is_core? "visible" : "hidden");

	d3.select("#data_acc_path").attr("visibility", is_pan? "visible" : "hidden");
	d3.select("#data_acc_points").attr("visibility", is_pan? "visible" : "hidden");
	d3.select("#data_distrib_points").attr("visibility", is_distrib? "visible" : "hidden");
	d3.select("#data_distrib_path").attr("visibility", is_distrib? "visible" : "hidden");
	d3.select("#data_core_path").attr("visibility", is_core? "visible" : "hidden");
	d3.select("#data_core_points").attr("visibility", is_core? "visible" : "hidden");
}


d3.select("#plot_type").on("change", change_plot);
$(document).ready(change_plot);

d3.select("#download_svg").append("button")
  .attr("type","button")
  .attr("class", "btn btn-primary btn-sm")
  .text("Download SVG")
  .on("click", function() {
	var svg_elem = document.querySelector("#current_plot");
	var new_checked = $("input[name='plot_type']:checked").val();
	var is_pan = new_checked==="pangenome";
	var is_core = new_checked==="coregenome";
	var is_distrib = new_checked==="ortho_distrib";

	var filename = "";
	if(is_pan) {
		filename="pangenome_plot";
	} else if(is_core) {
		filename="core_genome_plot";
	} else if(is_distrib) {
		filename="distribution_plot";
	}
	svgExport.downloadSvg(svg_elem, filename);
  });

</script>

</html>
