<!DOCTYPE html>


<html>
<head>
{% load static %}
    {% load custom_tags %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
{% 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" %}



                  <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">Create circos plots indicating the presence(red scale)/absence(light blue) of homologous proteins in one or multiple other genomes. Click on the circos plot to open a new windows with clickable version of the plot.<br>
                      rRNA are colored in blue, tRNA in red.
                      </p>
                  </div>

                  <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                      <li class="active"><a href="#tab0" data-toggle="tab">List</a></li>
                      <li><a href="#tab1" data-toggle="tab">Cog categories</a></li>
                      <li><a href="#tab2" data-toggle="tab">cog counts</a></li>
                  </ul>
                  <div id="my-tab-content" class="tab-content">
                      <div class="tab-pane active" id="tab0">
                          <h3> Locus annotation </h3>
                          <div id="export_bouttons_groups">
                              <a download="biodb_extract.xls" href="#" onclick="return ExcellentExport.excel(this, 'cog_table', 'search');" class="btn btn-success">Export to Excel</a>

                              <a download="biodb_extract.csv" href="#" onclick="return ExcellentExport.csv(this, 'cog_table');" class="btn btn-success">Export to CSV</a>

                              <br/>
                          </div>
                                  <table class="display dataTable" id="genome_table">
                                      <thead>
                                          <tr>


                                              <th style="width:80px">Locus</th>
                                              <th style="width:60px">start</th>
                                              <th style="width:60px">end</th>
                                              <th style="width:10px">C</th>
                                              <th style="width:55px">KO</th>
                                              <th style="width:160px">Pathways</th>
                                              <th style="width:230px">Modules</th>
                                              <th style="width:230px">Interpro</th>
                                              <th id="entete_gene">Gene</th>
                                              <th id="entete_n">nH</th>
                                              <th id="entete_n">nG</th>
                                              <th id="entete_n">TM</th>
                                              <th id="entete_n">SP</th>
                                              <th id="entete_product">Product</th>


                                          </tr>
                                      </thead>
                                      <tbody>

                                          {%for data in ordered_data%}
                                          {%if data.4 == "assembly_gap"%}
                                          <tr bgcolor="red">

                                              <td bgcolor="red">GAP</td>
                                              <td bgcolor="red">{{data.2}}</td>
                                              <td bgcolor="red">{{data.3}}</td>
                                              <td bgcolor="red"></td>
                                              <td bgcolor="red"></td>
                                              <td bgcolor="red"></td>
                                              <td bgcolor="red"></td>
                                              <td bgcolor="red"></td>
                                              <td bgcolor="red"></td>
                                              <td bgcolor="red"></td>
                                              <td bgcolor="red"></td>
                                              <td bgcolor="red"></td>
                                              <td bgcolor="red"></td>
                                              <td bgcolor="red"></td>
                                          <tr>
                                          {% elif data.4 == "rRNA"%}
                                          <tr bgcolor="red">

                                              <td bgcolor="yellow">{{data.1}}</td>
                                              <td bgcolor="yellow">{{data.2}}</td>
                                              <td bgcolor="yellow">{{data.3}}</td>
                                              <td bgcolor="yellow"></td>
                                              <td bgcolor="yellow"></td>
                                              <td bgcolor="yellow"></td>
                                              <td bgcolor="yellow"></td>
                                              <td bgcolor="yellow"></td>
                                              <td bgcolor="yellow"></td>
                                              <td bgcolor="yellow"></td>
                                              <td bgcolor="yellow"></td>
                                              <td bgcolor="yellow"></td>
                                              <td bgcolor="yellow"></td>
                                              <td bgcolor="yellow">{{data.5}}</td>
                                          <tr>

                                          {% elif data.4 == "tRNA"%}
                                          <tr bgcolor="red">

                                              <td bgcolor="orange">{{data.1}}</td>
                                              <td bgcolor="orange">{{data.2}}</td>
                                              <td bgcolor="orange">{{data.3}}</td>
                                              <td bgcolor="orange"></td>
                                              <td bgcolor="orange"></td>
                                              <td bgcolor="orange"></td>
                                              <td bgcolor="orange"></td>
                                              <td bgcolor="orange"></td>
                                              <td bgcolor="orange"></td>
                                              <td bgcolor="orange"></td>
                                              <td bgcolor="orange"></td>
                                              <td bgcolor="orange"></td>
                                              <td bgcolor="orange"></td>
                                              <td bgcolor="orange">{{data.5}}</td>
                                          <tr>

                                          {% elif data.4 == "CDS"%}

                                          {% with locus2annot_dico|keyvalue:data.1 as values %}

                                          <tr>


                                              <td><a href="{% url 'locusx' values.2 True %}" target="_top">{{values.2}}</a></td>
                                              <td>{{data.2}}</td>
                                              <td>{{data.3}}</td>
                                              {% with locus_tag2cog_name|keyvalue:values.2 as name %}

                                                  {% if name == '-' %}
                                                      <td>{{locus_tag2cog_name|keyvalue:values.2}}</td>
                                                  {% else %}
                                                      <td><a href="{% url "fam" name 'cog'%}" target="_top">{{locus_tag2cog_catego|keyvalue:values.2}}</a></td>

                                                  {% endif %}
                                              {%endwith%}
                                              {% with locus_tag2ko|keyvalue:values.2 as oneko %}
                                                  {% if oneko == '-' %}
                                                      <td>{{locus_tag2ko|keyvalue:values.2}}</td>
                                                      <td>-</td>
                                                      <td>-</td>
                                                  {% else %}
                                                      <td><a href="{% url "fam" oneko 'ko'%}" target="_top">{{locus_tag2ko|keyvalue:values.2}}</a></td>
                                                      {% with ko2ko_pathways|keyvalue:oneko as name %}
                                                          {% if name == '-' %}
                                                              <td>-</td>
                                                          {% else %}
                                                              <td>{{name|safe}}</td>
                                                          {% endif %}
                                                      {%endwith%}
                                                      {% with ko2ko_modules|keyvalue:oneko as name %}
                                                          {% if name == '-' %}
                                                              <td>-</td>
                                                          {% else %}
                                                              <td>{{name|safe}}</td>
                                                          {% endif %}
                                                      {%endwith%}
                                                  {% endif %}


                                              {%endwith%}
                                              {% with locus2interpro|keyvalue:values.2 as interpro_data %}
                                              <td>
                                                  {% for one_interpro in interpro_data %}
                                                  {% if one_interpro.0 != '-' %}
                                                      <a href="{% url 'fam' one_interpro.0 'interpro' %}" target="_top">{{one_interpro.0}}</a> /
                                                  {%else%}
                                                      {{one_interpro.0}}
                                                  {%endif%}
                                                      {{one_interpro.1}} </br>
                                                  {% endfor %}
                                                  {%endwith%}
                                              </td>
                                              <td>{{values.7}}</td>
                                              <td>{{values.8}}</td>
                                              <td>{{values.9}}</td>
                                              <td>{{values.10}}</td>
                                              <td>{{values.11}}</td>
                                              <td>{{values.12}}</td>

                                          </tr>
                                          {%endwith%}
                                          {%endif%}
                                          {%endfor%}

                                      </tbody>
                                  </table>

                  </div>
                      <div class="tab-pane" id="tab1">

                          <div id="mydiv" style="float: left"></div>
                          <svg class="chart"></svg>
                      </div>

                      <div class="tab-pane" id="tab2">
                          <div id="mydiv2" style="float: left"></div>
                          <svg class="chart2"></svg>
                      </div>

                  </div>


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


        <script>

        var data = {
          labels: {{labels|safe}},
          series: {{series|safe}}
        };

        {{category_map|safe}}
        {{taxon_map|safe}}

        var chartWidth       = 390,
            barHeight        = 10,
            groupHeight      = barHeight * data.series.length,
            gapBetweenGroups = 10,
            spaceForLabels   = 590,
            spaceForLegend   = 290;

        // Zip the series data together (first values, second values, etc.)
        var zippedData = [];
        for (var i=0; i<data.labels.length; i++) {
          for (var j=0; j<data.series.length; j++) {
            zippedData.push(data.series[j].values[i]);
          }
        }

        // Color scale
        var color = d3.scale.category20();
        var chartHeight = barHeight * zippedData.length + gapBetweenGroups * data.labels.length;

        var x = d3.scale.linear()
            .domain([0, d3.max(zippedData)])
            .range([0, chartWidth]);

        var y = d3.scale.linear()
            .range([chartHeight + gapBetweenGroups, 0]);

        var yAxis = d3.svg.axis()
            .scale(y)
            .tickFormat('')
            .tickSize(0)
            .orient("left");

        // Specify the chart area and dimensions
        var chart = d3.select(".chart")
            .attr("width", spaceForLabels + chartWidth + spaceForLegend)
            .attr("height", chartHeight);

        // Create bars
        var bar = chart.selectAll("g")
            .data(zippedData)
            .enter().append("g")
            .attr("transform", function(d, i) {
              return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i/data.series.length))) + ")";
            }
            )
             //   Math.floor(i/data.series.length)
            .attr("taxon_id", function(d,i) { return (i % data.series.length) ; })
            .attr("category_id", function(d,i) { return (Math.floor(i/data.series.length)) ; });


        // Create rectangles of the correct width
        bar.append("rect")
            .attr("fill", function(d,i) { return color(i % data.series.length); })
            .attr("class", "bar")
            .attr("width", x)
            .attr("height", barHeight - 1)
            .on("click",drill);


        // Add text label in bar
        bar.append("text")
            .attr("x", function(d) { return x(-0.2); })
            .attr("y", barHeight / 2)
            .attr("fill", "red")
            .attr("dy", ".35em")
            .text(function(d) { return d; });




        // Draw labels
        bar.append("text")
            .attr("class", "label")
            .attr("x", function(d) { return - 40; })
            .attr("y", groupHeight / 2)
            .attr("dy", ".35em")
            .text(function(d,i) {
              if (i % data.series.length === 0)
                return (category_description[data.labels[Math.floor(i/data.series.length)]] + " (" +data.labels[Math.floor(i/data.series.length)] + ")");
              else
                return ""})
                // "/chlamdb/venn_cog/{{biodb}}/" + "/" + category + "{{circos_url|safe}}"
            //.on("click",drill2);

        function drill(d, i) {
            var category = data.labels[d3.select(this.parentNode).attr("category_id")]; //data object
            window.open("/chlamdb/get_orthogroup_multiple_cog/{{biodb}}/"  + category + "/{{orthogroups_url|safe}}");
        }
        function drill2(d,j) {
                var category = description2category[data.labels[d3.select(this.parentNode).attr("category_id")]]; //data object
                window.open("/chlamdb/cog_venn_subset/{{biodb}}/" + category + "{{circos_url|safe}}") };

        //bar.on("click", drill);


        chart.append("g")
              .attr("class", "y axis")
              .attr("transform", "translate(" + spaceForLabels + ", " + -gapBetweenGroups/2 + ")")
              .call(yAxis);

        // Draw legend
        var legendRectSize = 18,
            legendSpacing  = 4;

        var legend = chart.selectAll('.legend')
            .data(data.series)
            .enter()
            .append('g')
            .attr('transform', function (d, i) {
                var height = legendRectSize + legendSpacing;
                var offset = -gapBetweenGroups/2;
                var horz = spaceForLabels + chartWidth + 40 - legendRectSize;
                var vert = i * height - offset;
                return 'translate(' + horz + ',' + vert + ')';
            });

        legend.append('rect')
            .attr('width', legendRectSize)
            .attr('height', legendRectSize)
            .style('fill', function (d, i) { return color(i); })
            .style('stroke', function (d, i) { return color(i); });

        legend.append('text')
            .attr('class', 'legend')
            .attr('x', legendRectSize + legendSpacing)
            .attr('y', legendRectSize - legendSpacing)
            .text(function (d) { return d.label; });

        d3.select("#mydiv").append("button")
                .attr("type","button")
                .attr("class", "btn btn-primary btn-sm")
                .text("Download SVG")
                .on("click", function() {
                    // download the svg
                    downloadSVG();
                });

        </script>


        <style>

        /*
        .chart rect {
          fill: steelblue;
        }
        */
        .chart2 .legend {
          fill: black;
          font: 14px sans-serif;
          text-anchor: start;
          font-size: 12px;
        }

        .chart2 text {
          fill: black;
          font: 10px sans-serif;
          text-anchor: end;
        }

        .chart2 .label:hover {
          fill: red;
        }

        .chart2 .label {
          fill: black;
          font: 15px sans-serif;
          text-anchor: end;
        }


        .bar:hover {
          fill: brown;
        }

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


        </style>
        <style>

        /*
        .chart rect {
          fill: steelblue;
        }
        */
        .chart .legend {
          fill: black;
          font: 14px sans-serif;
          text-anchor: start;
          font-size: 12px;
        }

        .chart text {
          fill: black;
          font: 10px sans-serif;
          text-anchor: end;
        }

        .chart .label:hover {
          fill: red;
        }

        .chart .label {
          fill: black;
          font: 15px sans-serif;
          text-anchor: end;
        }


        .bar:hover {
          fill: brown;
        }

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


        </style>
        <script>

        var data = {
          labels: {{labels_counts|safe}},
          series: {{series_counts|safe}}
        };

        {{category_map|safe}}
        {{taxon_map|safe}}

        var chartWidth       = 390,
            barHeight        = 10,
            groupHeight      = barHeight * data.series.length,
            gapBetweenGroups = 10,
            spaceForLabels   = 590,
            spaceForLegend   = 290;

        // Zip the series data together (first values, second values, etc.)
        var zippedData = [];
        for (var i=0; i<data.labels.length; i++) {
          for (var j=0; j<data.series.length; j++) {
            zippedData.push(data.series[j].values[i]);
          }
        }

        // Color scale
        var color = d3.scale.category20();
        var chartHeight = barHeight * zippedData.length + gapBetweenGroups * data.labels.length;

        var x = d3.scale.linear()
            .domain([0, d3.max(zippedData)])
            .range([0, chartWidth]);

        var y = d3.scale.linear()
            .range([chartHeight + gapBetweenGroups, 0]);

        var yAxis = d3.svg.axis()
            .scale(y)
            .tickFormat('')
            .tickSize(0)
            .orient("left");

        // Specify the chart area and dimensions
        var chart = d3.select(".chart2")
            .attr("width", spaceForLabels + chartWidth + spaceForLegend)
            .attr("height", chartHeight);

        // Create bars
        var bar = chart.selectAll("g")
            .data(zippedData)
            .enter().append("g")
            .attr("transform", function(d, i) {
              return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i/data.series.length))) + ")";
            }
            )
             //   Math.floor(i/data.series.length)
            .attr("taxon_id", function(d,i) { return (i % data.series.length) ; })
            .attr("category_id", function(d,i) { return (Math.floor(i/data.series.length)) ; });


        // Create rectangles of the correct width
        bar.append("rect")
            .attr("fill", function(d,i) { return color(i % data.series.length); })
            .attr("class", "bar")
            .attr("width", x)
            .attr("height", barHeight - 1)
            .on("click",drill);


        // Add text label in bar
        bar.append("text")
            .attr("x", function(d) { return 0; })
            .attr("y", barHeight / 2)
            .attr("fill", "red")
            .attr("dy", ".35em")
            .text(function(d) { return d; });




        // Draw labels
        bar.append("text")
            .attr("class", "label")
            .attr("x", function(d) { return - 40; })
            .attr("y", groupHeight / 2)
            .attr("dy", ".35em")
            .text(function(d,i) {
              if (i % data.series.length === 0)
                return (category_description[data.labels[Math.floor(i/data.series.length)]] + " (" +data.labels[Math.floor(i/data.series.length)] + ")");
              else
                return ""})
                // "/chlamdb/venn_cog/{{biodb}}/" + "/" + category + "{{circos_url|safe}}"
            //.on("click",drill2);

        function drill(d, i) {
            var category = data.labels[d3.select(this.parentNode).attr("category_id")]; //data object
            window.open("/chlamdb/get_orthogroup_multiple_cog/{{biodb}}/"  + category + "/{{orthogroups_url|safe}}");
        }
        function drill2(d,j) {
                var category = description2category[data.labels[d3.select(this.parentNode).attr("category_id")]]; //data object
                window.open("/chlamdb/cog_venn_subset/{{biodb}}/" + category + "{{circos_url|safe}}") };

        //bar.on("click", drill);


        chart.append("g")
              .attr("class", "y axis")
              .attr("transform", "translate(" + spaceForLabels + ", " + -gapBetweenGroups/2 + ")")
              .call(yAxis);

        // Draw legend
        var legendRectSize = 18,
            legendSpacing  = 4;

        var legend = chart.selectAll('.legend')
            .data(data.series)
            .enter()
            .append('g')
            .attr('transform', function (d, i) {
                var height = legendRectSize + legendSpacing;
                var offset = -gapBetweenGroups/2;
                var horz = spaceForLabels + chartWidth + 40 - legendRectSize;
                var vert = i * height - offset;
                return 'translate(' + horz + ',' + vert + ')';
            });

        legend.append('rect')
            .attr('width', legendRectSize)
            .attr('height', legendRectSize)
            .style('fill', function (d, i) { return color(i); })
            .style('stroke', function (d, i) { return color(i); });

        legend.append('text')
            .attr('class', 'legend')
            .attr('x', legendRectSize + legendSpacing)
            .attr('y', legendRectSize - legendSpacing)
            .text(function (d) { return d.label; });

        d3.select("#mydiv2").append("button")
                .attr("type","button")
                .attr("class", "btn btn-primary btn-sm")
                .text("Download SVG")
                .on("click", function() {
                    // download the svg
                    downloadSVG();
                });

            $(document).ready(function() {
            $('#genome_table').DataTable( {
                "bSortClasses": false,
                dom: 'Bfrtip',
                buttons: [
                    'colvis'
                ]
                } );
            } );

        </script>



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