<!DOCTYPE html>


<html>
<head>
{% load static %}
{% 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" %}

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

                  </form>


                  <div class="panel panel-success" style="width:80%; 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">Compare Cog categories between genomes. <br>
                          Click on bars to get the corresponding locus.<br>
                          Click on labels to get venn diagram of the category (max 6 species will be diplayed).<br>
                      </p>
                  </div>
                  <ol>
                      <li>Selection: <strong>{{n_missing_cog}}</strong> out of <strong>{{orthogroup_list|length}}</strong> orthogroups without any cogs: <a href="{% url "orthogroup_annotation" False %}{{no_cogs_url|safe}}">Show list</a></li>
                  </ol>

                  <div class="chart"></div>


          		<style type="text/css">

          			.axis path,
          			.axis line {
          				fill: none;
          				stroke: black;
          				shape-rendering: crispEdges;
          			}

          			.axis text {
          				font-family: sans-serif;
          				font-size: 11px;
          			}


          		</style>
          	<script type="text/javascript">

          			//Width and height
          			var w = 600;
          			var h = 600;
          			var padding = 40;

                      {{dataset|safe}}


          			//Create scale functions
          			var xScale = d3.scale.linear()
          								 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
          								 .range([padding, w - padding * 2]);

          			var yScale = d3.scale.linear()
          								 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
          								 .range([h - padding, padding]);

          			var rScale = d3.scale.linear()
          								 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
          								 .range([2, 5]);

          			//Define X axis
          			var xAxis = d3.svg.axis()
          							  .scale(xScale)
          							  .orient("bottom")
          							  .ticks(5);

          			//Define Y axis
          			var yAxis = d3.svg.axis()
          							  .scale(yScale)
          							  .orient("left")
          							  .ticks(5);

          			//Create SVG element
          			var svg = d3.select(".chart")
          						.append("svg")
          						.attr("width", w)
          						.attr("height", h);



          			//Create circles
          			var mycircle = svg.selectAll("circle")
          			   .data(dataset)
          			   .enter()
                         .append("g");



          			mycircle.append("circle")
          			   .attr("cx", function(d) {
          			   		return xScale(d[0]);
          			   })
          			   .attr("cy", function(d) {
          			   		return yScale(d[1]);
          			   })
          			   .attr("r", function(d) {
          			   		return 3;
          			   })
                         .on("click",drill)
                         .on('mouseover', function(d){
                              var nodeSelection = d3.select(this.parentNode);
                              nodeSelection.select("text").style("opacity", "1");
                          })
                         .on('mouseout', function(d){
                              var nodeSelection = d3.select(this.parentNode);
                              nodeSelection.select("text").style("opacity", "0");
                          });

                      function drill(d) {
                      var orthogroup = d[2]; //data object
                      window.open("/chlamdb/locusx/"  + orthogroup + "/True");
                  }
          			//Create labels

                      mycircle.append("text")
                         .attr("x", function(d) { return xScale(d[0]); })
                         .attr("y", function(d) { return yScale(d[1]); })
          			   .attr("font-family", "sans-serif")
          			   .attr("font-size", "11px")
          			   .attr("fill", "red")
                         .attr("opacity", "0")
                         .text(function(d) { return "  " + d[2] + " (" + d[0] + "," + d[1] + ")"; });



          			//Create X axis
          			svg.append("g")
          				.attr("class", "axis")
          				.attr("transform", "translate(0," + (h - padding) + ")")
          				.call(xAxis);



          			//Create Y axis
          			svg.append("g")
          				.attr("class", "axis")
          				.attr("transform", "translate(" + padding + ",0)")
          				.call(yAxis);

          			svg.append("line")
                          .attr("x1", xScale(0))
                          .attr("y1", yScale(0))
                          .attr("x2", xScale(6000))
                          .attr("y2", yScale(6000))
                          .attr("stroke-width", 2)
                          .attr("stroke", "red")
                          .attr("stroke-dasharray", "5,5");

          		</script>



              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
{% include "chlamdb/style_menu.html" %}
</html>
