<!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>{{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">
    

    <!-- <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.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 -->
    
    <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.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;
        }
        svg.text.branch-support {
          display:none;
          color:#3973ac;
          font-size: x-small;
        }
        .hidden-graph{
          margin: 2em;
        }
        .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;
          border:none;
        }

        .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;
        }
        #current-table{
    background-color:white;
    /* border: 1px solid #333; */
    border-radius: 4px;
}
.tabulator-col-content {
  background-color:#3973ac;
}

#version-table .tabulator-col {
  color:white;
}

/*Theme the header*/
#current-table .tabulator-header {
    background-color:#3973ac;
    color:#fff;
}

/*Allow column header names to wrap lines*/
#current-table .tabulator-header .tabulator-col,
#current-table .tabulator-header .tabulator-col-row-handle {
    white-space: normal;
    background-color: #3973ac;
}

/*Color the table rows*/
#current-table .tabulator-tableHolder .tabulator-table .tabulator-row{
    color:#fff;
    background-color: #666;
}

/*Color even rows*/
    #current-table .tabulator-tableHolder .tabulator-table .tabulator-row:nth-child(even) {
    background-color: #444;
}
     
      </style> 
  </head>
  <body>
    <header>
      <h1 class="left" style="margin:5px;">{{job_id}}</h1>
        <p class ="right" style="margin:5px;"> Data generated {{date}} by {{user}} </p>
        <hr>
    </header>
  <!-- Modals - individual isolates -->
    <!-- Modal for tables for each isolate -->
      <!-- 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>
          <ul>
          <li><h3 style="margin:6px;"> Download tree</h3></li>
          <p style="margin:10px;"> To download a newick file right click on tree and select export as newick</p>
          <li><h3 style="margin:6px;"> Isolate details</h3></li>
          <p style="margin:10px;"> Select an isolate node from the tree to see isolate specific details</p>
          <li><h3 style="margin:6px;"> SNP distances </h3></li>
          <p style="margin:10px;">Select the parent node to display pariwise SNP distances</p>
        </ul>
        </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>    
  <button type="button" class="btn btn-sm btn-outline-secondary version-button" id = "version"> Software versions </button>    
  <!-- <button type="button" class="btn btn-sm btn-outline-secondary" id = "nwk" ><span data-feather="arrow-down"> Download newick </button>         -->
</div>
<!-- div for summary table and phylogenetic tree -->
<div class= "container-fluid">
<!-- buttons -->
{% if phylo == 'phylo' %}
<button type="button" class="btn btn-primary btn-xlg btn-outline-primary btn-lg phylogeny-button">Phylogeny</button>
{% endif %}
{% for t,v in tables.items() %}
  <button type="button" class="btn btn-primary btn-xlg btn-outline-primary btn-lg detail-button {{v.link}}-button">{{v.name}}</button>
{% endfor %}

<div id = "software-versions" class = "versions" style = "display: none;">
  <table class="table" id = "version-table">     
    <thead>
      <tr>
        {{version_head}}
      </tr>
    </thead>
    <tbody>
      {{version_body}}
    </tbody>
  </table>
</div>
<div id = "empty-table"></div>
<div id="comment"></div>
<div id = "snp-distances-graph" class = "hidden-graph" style="display:none;">  <!-- placeholder for graphs  --> </div>
<div id = "snp-density-graph" class = "hidden-graph" style="display: none;">  <!-- placeholder for graphs  --> </div>
<div id="table-download" style="display: none;">
  <button type="button" class="btn btn-sm btn-outline-secondary csv-download-button" id = "download-csv"> download csv </button>    
  <!-- <button type="button" class="btn btn-sm btn-outline-secondary excel-download-button" id = "download-excel"> download xlsx </button>     -->
</div>  
<div id="current-table">
    <!-- placeholder for selected table = put selected table in this div -->    
  </div>
  <div id = "pan-svg" style = "display:none;margin:10px;">
    {{ pan_svg }}
  </div>

  <div id = "phylogeny">
    <button type="button" class="btn btn-sm btn-outline-secondary back-button" id = "step-back"> back </button>    
    <button type="button" class="btn btn-sm btn-outline-secondary reset-button" id = "reset-tree"> reset </button> 
    <button type="button" class="btn btn-sm btn-outline-secondary download-button" id = "download-tree"> download </button> 
    <button type="button" class="btn btn-sm btn-outline-secondary export-button" id = "export-tree"> export png </button> 
    <button type="button" class="btn btn-sm btn-outline-secondary search-tree-button" id = "get-iso" style="float: right;"> search </button>   
    <input type = "text" id = "search-iso" placeholder="Search for sample" style="float: right;">
       
    <div id="tree_string" style="display: none;">{{newick}}</div>
    <div id = "phylocanvas" style = "width: 100%; margin:5px; border: 1px solid lightgray;" ></div>
  </div>
    
  </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> -->
<!-- <script type="application/javascript" src="https://cdn.rawgit.com/phylocanvas/phylocanvas-quickstart/v2.8.1/phylocanvas-quickstart.js"></script> -->
<!-- <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src= "https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script> -->
<!-- <script src= "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script> -->


<script src="https://unpkg.com/@phylocanvas/phylocanvas.gl@latest/dist/bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script>

{% block script %}
<script>

var snp_distance_chart = {{ snp_distances | safe }};
      vegaEmbed('#snp-distances-graph', snp_distance_chart).then(function(result){
        // var epi_view = result.view;
      });

var snp_density_chart = {{ snp_density | safe }};
  vegaEmbed('#snp-density-graph', snp_density_chart).then(function(result){
  // var epi_view = result.view;
});

var version_table = new Tabulator("#version-table", {});

$("button.version-button").click(function(){
  $("#software-versions").show();
  $("#comment").empty();
  $("#phylogeny").hide();
  // $("#download-csv").hide();
  $("#current-table").empty();
  $("#snp-distances-graph").hide();
  $("#snp-density-graph").hide();
  $('#pan-svg').hide();
  $("#empty-table").empty();
});

$("button.phylogeny-button").click(function(){
  $("#current-table").empty();
  $("#table-download").hide();
  $("#phylogeny").show();
  $("#comment").empty();
  $("#software-versions").hide();
  $("#snp-distances-graph").hide();
  $("#snp-density-graph").hide();
  $('#pan-svg').hide();
  $("#empty-table").empty();
});

$("button.detail-button").click(function(){
  console.log('button clicked');
  $("#table-download").show();
  $("#snp-distances-graph").hide();
  $('#pan-svg').hide();
  $("#snp-density-graph").hide();
  var section = $(this).text().replace(/\s/g,'-').toLowerCase();
  console.log(section);
  var table_dict = {{tables | tojson}};
  var column_dict = {{ columns | tojson }};
  var comment = {{ comment | tojson }}
  console.log(table_dict[section]);
  console.log(column_dict[section]);
  console.log(column_dict[section].length);
  $("#phylogeny").hide();
  $("#software-versions").hide();
  $("#current-table").empty();
  $("#comment").empty();
  $("#empty-table").empty();
  $("#comment").append("<p style='margin:5px;'><em>" + comment[section] + "</em></p>");
  if(section == 'snp-distances') {
    $("#snp-distances-graph").show();
  }
  if(section == 'core-genome'){
    
    $("#snp-density-graph").show();
  }
  if(section == 'pan-genome'){
    $('#pan-svg').show();
  }
  //create Tabulator on DOM element with id "example-table"
  if(column_dict[section].length > 1){
    var table = new Tabulator("#current-table", {
    pagination:"local",
    paginationSize:25,
    paginationSizeSelector:true,
    movableColumns:true,
    // height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    data:table_dict[section]['table'], //assign data to table
    layout:"fitColumns", //fit columns to width of table (optional)
    columns:column_dict[section],
    // rowClick:function(e, row){ //trigger an alert message when the row is clicked
    // 	console.log("Row " + row.getData().id + " Clicked!!!!");
    // },
    });
    $("#download-csv").click(function(){
      console.log('clicking download button')
        table.download("csv", "data.csv", {delimiter:","});
      });
    // $("#download-excel").click(function(){
    //   table.download("xlsx", section + ".xlsx", {sheetName:$(this).text()});
    // });
  } else {
    console.log("No results available for " + section);
    $("#comment").empty();
    $("#empty-table").append("<p><b>No data available for " + section + "</b></p>");
}
      
});
  


  var tree_root = ["1"];
  var num_nodes = {{num_isos}};
  $("#phylocanvas").height(num_nodes*40);
  var tree_string = document.getElementById('tree_string').innerHTML;
  console.log(tree_string);
  var tree = new phylocanvas.PhylocanvasGL(
                  document.querySelector("#phylocanvas"),
                    { 
                      // size: document.querySelector("#phylocanvas").getBoundingClientRect(),
                      source: tree_string,
                      type: phylocanvas.TreeTypes.Rectangular,
                      nodeSize:6,
                      showLabels: true,
                      showLeafLabels: true,
                      alignLabels:true,
                      interactive:true
                    },
                  );
  // tree.alignLabels;
  // console.log(tree.handleClick(tree.getHighlightedNode()));
  // console.log(tree.getGraphWithoutLayout());

  $("#phylocanvas").hover(function(){
    console.log("phylocanvas hover");
    console.log();
    var hn = tree.getHighlightedNode();
    console.log(hn);
  });

  $("#phylocanvas").click(function(event){
    console.log('phylocanvas clicked');
    var hn = tree.getHighlightedNode();
    // console.log(hn);
    // console.log(hn.id);
    tree.setRoot(hn.id);
    tree_root.push(hn.id);
    console.log(tree_root);
  });


  $("#step-back").click(function(){
    console.log(tree_root);
    
    var n = tree_root.pop(-1);
    console.log(n);
    
    tree.setRoot(n);
  });

  $("#reset-tree").click(function(){
    
    tree.setRoot("1");
  });

  
  function downloadString(text, fileType, fileName) {
      var blob = new Blob([text], { type: fileType });

      var a = document.createElement('a');
      a.download = fileName;
      a.href = URL.createObjectURL(blob);
      a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      setTimeout(function() { URL.revokeObjectURL(a.href); }, 1500);
    }

  $("#download-tree").click(function(){
    console.log('downloading newick');
    var nwk_download = tree.exportNewick();
    var filename = 'bohra.nwk'
    downloadString(nwk_download,'text',filename);
  });

  $("#export-tree").click(function(){
    console.log('export');
    var png = tree.exportPNG();
    var filename = 'bohra.png';
    var download = document.createElement('a');
    download.href = png;
    download.download = filename;
    download.click();
  });

  $("#get-iso").click(function(){
    var i = $("#search-iso").val();
    console.log(i);

    var leaves = tree.getGraphWithoutLayout().leaves
    $.each(leaves, function(idx, val){
      if (val.id == i){
        tree.highlightNode(val);
      }
    })
  });
</script>
{% endblock %}
<script>
feather.replace()
</script>
</body>
</html>