<!DOCTYPE html>


<html>
<head>
{% load static %}
    {% load custom_tags %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
{% include "chlamdb/header.html" %}
{% load crispy_forms_tags %}
</head>
<body>

  <div class="container-fluid" id="main_container">
    <div class="row">
      <div id="wrapper">
          <div id="page-content-wrapper">
            {% include "chlamdb/menu.html" %}
            <div class="row">
              <div class="col-lg-12">

                <div id="content">


                    <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, 'blastnr_info', 'search');" class="btn btn-success">Export to Excel</a>

                                <a download="biodb_extract.csv" href="#" onclick="return ExcellentExport.csv(this, 'blastnr_info');" class="btn btn-success">Export to CSV</a>
                                <a href="{% url 'circos_main' %}{{circos_url}}" style="background-color:#DCFFF0;color:black;padding:2px;border:1px solid black;"">Show on circular map (takes some time)</a>

                                <br/>
                            </div>
                                    <table id="blastnr_info" class="display">
                                        <thead>
                                            <tr>
                                                <th></th>

                                                <th>Locus</th>
                                                <th>C</th>
                                                <th>COGn</th>
                                                <th>KO</th>
                                                <th>Pathways</th>
                                                <th>Modules</th>
                                                <th>Interpro</th>
                                                <th>Gene</th>
                                                <th>nH</th>
                                                <th>nG</th>
                                                <th>TM</th>
                                                <th>SP</th>
                                                <th>Product</th>
                                                <t>Hit</th>
                                                <th>KD</th>
                                                <th>KD</th>
                                                <th>Organism</th>
                                                <th>Identity</th>
                                                <th>E-value</th>
                                                <th>Bacteria</th>
                                                <th>Eukaryota</th>
                                                <th>Archae</th>
                                                <th>Viruses</th>
                                                <th>TOTAL</th>


                                            </tr>
                                        </thead>
                                        <tbody>

                                            {%for values in locus2annot%}
                                            <tr>
                                                <td>{{values.0}}</td>
                                                <td><a href="{% url 'locusx' values.2 True %}" target="_top">{{values.2}}</a></td>
                                                <td><a href="http://www.ncbi.nlm.nih.gov/protein/{{values.3}}" target="_top">{{locus_tag2cog_catego|keyvalue:values.2}}</a></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_name|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>
                                                {% with locus_tag2blastnr_BBH|keyvalue:values.2 as blastnr_data %}
                                                <td><a href="http://www.ncbi.nlm.nih.gov/protein/{{blastnr_data.0}}">{{blastnr_data.0}}</a></td>
                                                <td>{{blastnr_data.1|first}}</td>
                                                <td><a href="https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id={{blastnr_data.3}}" target="_top">{{blastnr_data.2}}</a></td>
                                                <td>{{blastnr_data.5}}</td>
                                                <td>{{blastnr_data.4}}</td>
                                                {% endwith %}
                                                {% with locus2superkingdom_counts|keyvalue:values.2 as kingdom %}
                                                <td>{{kingdom|keyvalue:"Bacteria"}}</td>
                                                <td>{{kingdom|keyvalue:"Eukaryota"}}</td>
                                                <td>{{kingdom|keyvalue:"Archaea"}}</td>
                                                <td>{{kingdom|keyvalue:"Viruses"}}</td>
                                                <td>{{kingdom|keyvalue:"TOTAL"}}</td>
                                                {% endwith %}

                                            </tr>

                                            {%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>
    </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();
                });

        </script>

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

  $(document).ready(function() {
  $('#blastnr_info').DataTable( {
  "paging":   true,
  "ordering": true,
  "info":     false
  } );
  } );
</script>
</html>
