<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bohra {{job_id}}</title>
 
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Optional theme -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap-theme.min.css" rel="stylesheet">
    
    <!-- LOCAL STYLE -->
    <!-- <link href="job.css" rel="stylesheet"> -->

    <!-- Graphing library -->
    
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
  
    <!-- Icon -->
    <script src="https://unpkg.com/feather-icons"></script>
    <!-- Datatables -->
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
    <link href="https//cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel = "stylesheet">
    <!-- drag select jquery -->
    <script src="https://thibaultjanbeyer.github.io/DragSelect/ds.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        h2, h3 {
          padding:10px;
        }
        header {
                background-color: #3973ac;
                color: aliceblue;
        }
        
        .activeisolate {
          fill:#3973ac;
          font-size: larger;

        }
        @media (min-width: 768px) {
        .modal-xl {
        max-width: 90%; 
                }
        }

        .details {
                display: none;
        }
        .btn-outline-primary {
          color: #3973ac;
          border-color: #3973ac;
        }

        .btn-outline-primary:hover {
          background-color:  #3973ac;
          color: aliceblue;
        }

        .btn-outline-primary:not(:disabled):not(.disabled).active {
          background-color:  #3973ac;
          color: aliceblue;
        }

        #current-table {
          margin-top:20px;
        }

        .btn-outline-secondary {
          color: #3973ac;
          border-color: #3973ac;
        }

        .btn-outline-secondary:hover {
          background-color:  #3973ac;
          color: aliceblue;
        }

        .btn-outline-secondary:not(:disabled):not(.disabled).active {
          background-color:  #3973ac;
          color: aliceblue;
        }
        .page-link {
          color:#3973ac;
          
        }
        .page-item.active .page-link{
          background-color:  #3973ac;
          border-color:#3973ac;
          color: aliceblue;
        }

        
      </style> 
  </head>
  <body>
    <header>
      <h1 class="left">{{job_id}}</h1>
        <p class ="right"> Generated using Bohra microbial genomics pipeline {{date}} </p>
        <hr>
    </header>
  <!-- Modals - individual isolates -->
    <!-- Modal for tables for each isolate -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog modal-dialog-centered modal-xl" >
      <!-- Modal content-->
        <div class="modal-content">
            <h2 class="modal-title"> <!-- placeholder for isolate id --></h2>
            <h3 style= "color: #3973ac;">Summary Table</h3>
              <table id="" class="table table-striped table-bordered  modal-summary-table">
                  <thead>
                    <tr><!-- header of table -->
                          <th>Isolate</th>
                          <th>% Used</th>
                          <th>Coverage</th>
                          <th># Contigs</th>
                          <th>MLST</th>
                          <th>Species</th>
                    </tr>
                  </thead>
                  <tbody class='modal-body-summary-table'>

                  </tbody>
              </table>
            {% for t in td %}
            {% if t.type == 'table' %}
            <h3 style= "color: #3973ac;">{{ t.title }}</h3>
                <table id="" class="table table-striped table-bordered  modal-{{t.link}}">
                  <thead>{{ t.head }}</thead>
                  <tbody class='modal-body-{{t.link}}'>
                    
                  </tbody>
                </table>
            {% endif %}
            {% endfor %}          
          </div>
        </div>
      </div>
      <!-- modal for snp-distances -->
      <div class="modal fade" id="myModal2" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-xl" >
          <div class="modal-content">
            <h3 style= "color: #3973ac;"> SNP distances </h3>
              <table id="" class="table table-striped table-bordered  modal-selected-snps-table">
                          
              </table>
          </div>
        </div>
      </div>
  <!-- modal for help -->
    <div class="modal fade" id="myModal3" role="dialog">
      <div class="modal-dialog modal-dialog-centered modal" >
        <div class="modal-content">
          <h2 class="modal-title" style= "color: #3973ac; margin:3px;"> Information </h2>
          <hr>
          <h3 style="margin:6px;"> View branch support </h3>
          <p style="margin:10px;">Toggle branch support by selecting the <span data-feather="info"></span> icon above the tree.</p>
          <h3 style="margin:6px;"> Highlight tree tips </h3>
          <p style="margin:10px;">Toggle the isolates from the summary table to highlight their position in the tree</p>
          <h3 style="margin:6px;"> Isolate details </h3>
          <p style="margin:10px;">Select an isolate from the tree to see isolate specific details</p>
          <h3 style="margin:6px;"> SNP distances </h3>
          <p style="margin:10px;">Drag a box around a group of isolates that you would like to see SNP distances for</p>
        </div>
      </div>
    </div>

<div id="help-button" style = "float:right;">
  <button type="button" class="btn btn-sm btn-outline-secondary zoom-button" id = "help" data-toggle="modal" data-target="#myModal3" data-placement="top" title="Select"> Helpful tips </button>      
</div>
<!-- div for summary table and phylogenetic tree -->
<div class= "container-fluid">
    
    
      <!-- <h2 style = "color: #3973ac">Phylogeny and summary of isolates</h2> -->
      {% for t in td %}
      {% if t.type == 'summary' %}
      <!-- <h2 style= "color: #3973ac; float:left;" class='summary-table-header'>Summary Table</h2> -->
      <button type="button" class="btn btn-primary btn-xlg btn-outline-primary summary-table-button" ><h3>{{t.title}}</h3></button>
      {% elif t.type == 'tree' %}
      <!-- <h2 style= "color: #3973ac; float:right;" class='phylogeny-table-header'>Phylogeny</h2> -->
      <button type="button" class="btn btn-primary btn-xlg btn-outline-primary phylogeny-button" ><h3>{{t.title}}</h3></button>
      {% endif %}
      {% endfor %}
      <div id="tablediv">
          
          <hr>
        {% for t in td %}
        
        {% if t.type == 'summary' %}
          <table id="" class="table table-striped table-bordered table-sortable summary-table" style="width: 100%;">
              
              <thead>
                <tr>{{t.head}}</tr>
              </thead>
              <tbody>{{t.body}}</tbody>
                  <!-- end of table body -->
          </table>
      </div>
      {% elif t.type == 'tree' %}
    <div id="{{t.link}}" >
      <!-- <p>{{message}}</p> -->
      
      <hr>
      <!-- button div -->
      <div id="brnch-sprt">
        <button type="button" class="btn btn-sm btn-outline-secondary" id = "sprt" ><span data-feather="info"> toggle branch suppor </button>      
      </div>
      <div id = "svg_div" style="overflow-y:scroll; height: 700px;">    
        {{ t.image }}
       </div>
        {% endif %}
        {% endfor %}
      
      
      
    </div>
  </div>
  <!-- full width for detail tables and graphs-->
  <div class="container-fluid">
    <!-- button row -->
    <h2 id="detail-tables" style= "color: #3973ac;">Details</h2>
    <!-- buttons to select data for display -->
    <div id="detail-selection-buttons">
    {% for t in td %}
    {% if t.type == 'table' %}
      <button type="button" class="btn btn-primary btn-lg btn-outline-primary detail-button" >{{t.title}}</button>
    {% elif t.type == 'matrix' %}
      <button type="button" class="btn btn-primary btn-lg btn-outline-primary detail-button" >{{t.title}}</button>
    {% elif t.type == 'tree' %}
    <button type="button" class="btn btn-primary btn-lg btn-outline-primary detail-button" >{{t.title}}</button>
    {% endif %}
    {% endfor %}
    </div>

    <div id = "snp-distances-graph" class = "hidden-graph">  <!-- placeholder for graphs  --> </div>
    <div id = "snp-density-graph" class = "hidden-graph">  <!-- placeholder for graphs  --> </div>

    <div id="current-table">
            <!-- placeholder for selected table = put selected table in this div -->    
    </div>
    <br>

    {% for t in td %}
    {% if t.type == 'table' %}
    <!-- these tables are hidden until needed - then placed in the current table div above -->
    <div class="table-responsive details">
      <!-- buttons for dowload -->
      <div id = "{{t.link}}">
        <h3>{{t.title}}</h3>  
        <table class="table table-striped table-bordered table-sortable detail-table">
          <thead>
            <tr><!-- header of table -->
              {{t.head}}
            </tr>
          </thead>
          <tbody>
            {{t.body}}
          </tbody>
                    <!-- end of table body -->
        </table>
      <!-- end of table -->
      </div>
    </div>
    {% elif t.type == 'matrix' %}
    <!-- these tables are hidden until needed - then placed in the current table div above -->
    <div class="table-responsive details">
      <!-- buttons for dowload -->
      <div id = "{{t.link}}">
        <h3>{{t.title}}</h3>  
        <table class="table table-striped table-bordered table-sortable detail-table">
          <thead>
            <tr><!-- header of table -->
              {{t.head}}
            </tr>
          </thead>
          <tbody>
            {{t.body}}
          </tbody>
                    <!-- end of table body -->
        </table>
      <!-- end of table -->
      </div>
    </div>
    {% elif t.type == 'pan' %}
    <!-- these tables are hidden until needed - then placed in the current table div above -->
    <div class="table-responsive details">
      <!-- buttons for dowload -->
      <div id = "{{t.link}}">
        <h3>{{t.title}}</h3>  
        <table class="table table-striped table-bordered table-sortable detail-table">
          <thead>
            <tr><!-- header of table -->
              {{t.head}}
            </tr>
          </thead>
          <tbody>
            {{t.body}}
          </tbody>
                    <!-- end of table body -->
        </table>
      <!-- end of table -->
      </div>
    </div>
    {{t.image}}

    
  
</div>
    {% endif %}
    {% endfor %}
  </div>
        
<!-- Datatables (to sort tables) -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<!-- <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script> -->
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
{% block script %}
<script>
$(document).ready( function () {
// 

$("button.summary-table-button").click(function(){
  console.log('selected table');
  $("#tablediv").show();
  $("#phylogeny").hide();
});

$("button.phylogeny-button").click(function(){
  console.log('slected phylogeny');
  $("#tablediv").hide();
  $("#phylogeny").show();
});

$("#sprt").click(function() {
   $('.branch-support').toggle();
});
// highlioght tree tip based on row in table
$( "tr" ).click(function() {
        var isolaterow = $(this).find('td'); // this will access the clicked row.
        console.log(isolaterow);
        var isolateid = isolaterow.eq(0).text(); // get the first cell (isolate id)
        console.log(isolateid);
        //   $( "tr.tiplab" + isolateid ).toggleClass( "activeisolate" );
          $( "svg text." + isolateid ).toggleClass( "activeisolate" ); // change class of text here based on isolateid
});    
// modal of isolate specific data
$("text.tiplab").click(function(){
    var isolateid = $(this).text();
    var modaltables = {{modaltables | tojson}}; // jinja2 passing a list of tables
    console.log(isolateid);
//     need to set .modal-table to row with isolate id $('model-content').html(tablerow)
    $('.modal-title').html(isolateid + ' details');
    $('tr.' + isolateid).clone().appendTo('.modal-summary-table');
    // for each table in analysis generate a specific table
    $.each(modaltables, function(index, table){
      $('tr.' + isolateid + '-' + table).clone().appendTo('.modal-body-' + table);
    });      
    $("#myModal").modal();
  });

// for hover details
  $("text.tiplab").hover(function(){
  var isolateid = $(this).text();
  console.log(isolateid)
 // $('.btn-warning').tooltip({title: "Hooray", placement: "top"}); 
 console.log($('tr.' + isolateid).find("td").eq(2).html());
 console.log($('tr.' + isolateid).html());
 var info = isolateid + "\nContigs: " + $('tr.' + isolateid).find("td").eq(3).html() +"\nMLST: " +  $('tr.' + isolateid).find("td").eq(4).html() +"\nSpecies: " +  $('tr.' + isolateid).find("td").eq(5).html();
 $("text."+isolateid).tooltip({title: info, placement:"right"});
});
  

$("button.help").click(function(){
  $("#myModal3").modal();
});
// remove lines from table
$(function(){  
        $('#myModal').on('hidden.bs.modal', function (e) {
        var modaltables = {{modaltables | tojson}}; // jinja2 passing a list of tables
        console.log("Modal hidden");
        $('.modal-body-summary-table').html("");
        $.each(modaltables, function(index, table){
          $('.modal-body-' + table).html("");
        });
        
        });
});
$('table.summary-table').DataTable( {
      lengthMenu: [[10, 20, 40, 60, 80, 100 -1], [10, 20, 40, 60, 80, 100, "All"]],
      //scrollY: '50vh',
      scrollCollapse: true,
      paging: true,
      scrollX: true,
//       order: [[ -1, "Isolate" ]],
    } );
$('table.detail-table').DataTable( {
        //lengthMenu: [[10, 20, 40, 60, 80, 100 -1], [10, 20, 40, 60, 80, 100, "All"]],
        //scrollY: '50vh',
        scrollCollapse: true,
        paging: false,
        // scrollX: true,
        //       order: [[ -1, "Isolate" ]],
        } );

// get the pairwise snps from tree tips


// put the selected table in the selected detail div
$('button.detail-button').click(function(){
        // use the id of the button to find the class of the table to be inserted
       
        var section = $(this).text().replace(/\s+/g, '-').toLowerCase();
        console.log(section);     
          
        if (section == 'snp-distances'){
          // for snp-distances
            var x = {{snpdistances | tojson}};
            var max_x = Math.max(x);
            var bin_size = max_x / 100;
            var trace = {
                x: x,
                type: 'histogram',
                xbins : {
                  end:max_x,
                  size: bin_size,
                  start:0
                }
              };
            var layout = {
              xaxis:{
                title:"Distribution of pairwise SNP distances"
              },
              yaxis:{
                title:"Count"
              },
              
            };
            var data = [trace];
            Plotly.newPlot('snp-distances-graph', data, layout);
            // put selecte into current table
            var selected = $('#' + section).html();
            $('#current-table').html(selected);  
            $('#snp-density-graph').html("");     
        } else if (section == 'core-genome'){
          // put snp-density in here
            var x = {{ snpdensity | tojson}};
            // var y = {{genomebreaks | safe}};
            var max_x = Math.max(x);
            var bin_size = max_x / 100;
            var trace = {
                x: x,
                type: 'histogram',
                xbins : {
                  end:max_x,
                  size: bin_size,
                  start:0
                }
              };
            var layout = {
              xaxis:{
                title:"Genome Position (MB)"
              },
              yaxis:{
                title:"Count"
              },
              // put lines in here
              
            };
            var data = [trace];
            Plotly.newPlot('snp-density-graph', data, layout);
            // put selecte into current table
            var selected = $('#' + section).html();
            $('#current-table').html(selected);  
            $('#snp-distances-graph').html("");      
        } else {
          var selected = $('#' + section).html();
          $('#current-table').html(selected);     
          $('#snp-distances-graph').html("");
          $('#snp-density-graph').html("");
        }
        
        });

}); 




// for showing snp-distances of selected isolates from tree 
var ds = new DragSelect({
selectables: document.getElementsByClassName('tiplab'),
area: document.getElementById('phylogeny'),
callback: function(elements) {
        var selected = [0];
        console.log(elements.length);
        if (elements.length > 1){
                $.each(elements, function( index, value ) {
                        var cols = $('#snp-distances th:contains(' + value.innerHTML + ')');
                        var index = cols.index();
                        selected.push(index);
                        });
                console.log(selected);
                var table_head = "<thead>\n<tr>\n";
                var table_body = "<tbody>";
                $.each(selected, function( index, row){
                        var body_row = "<tr>";
                        $.each(selected, function(index, cell){
                                // console.log(" row " + row + " cell " + cell);
                                console.log($('#snp-distances tr:eq('+row+')')[0].cells[cell].innerHTML);
                                
                                if (row == 0) {
                                        body_row = body_row + "<th>" + $('#snp-distances tr:eq('+row+')')[0].cells[cell].innerHTML + "</th>\n";
                                } else  {
                                        body_row = body_row + "<td>" + $('#snp-distances tr:eq('+row+')')[0].cells[cell].innerHTML + "</td>\n";
                                }
                        });
                        body_row = body_row ;
                        if (row == 0) {
                                table_head = table_head + body_row + "</tr></thead>\n";
                        } else {
                      
                                table_body = table_body + body_row + "</tr>";
                        }
                });
                table_body = table_body + "</tbody>";
                // console.log(table_head);
                // console.log(table_body);
                var t = table_head + table_body;
                $('.modal-selected-snps-table').html(t);
                $("#myModal2").modal();
        } 
},

}); 

</script>
{% endblock %}
<script>
feather.replace()
</script>
</body>
</html>