{% extends "base.html" %} {% block head %}
<title>Embedding Vega-Lite</title>
<script src="js/bootstrapMagic.js" type="text/javascript"></script>
<link href="css/styles.css" rel="stylesheet" />
<script type="text/javascript">
  // temporary hack to make it look good with Bootstrap 5
  removeBS3refs();
</script>
<script
  src="https://cdn.jsdelivr.net/npm//vega@5"
  type="text/javascript"
></script>
<script
  src="https://cdn.jsdelivr.net/npm//vega-lite@4.17.0"
  type="text/javascript"
></script>
<script
  src="https://cdn.jsdelivr.net/npm//vega-embed@6"
  type="text/javascript"
></script>
<link
  crossorigin="anonymous"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  integrity="sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs="
  rel="stylesheet"
/>
{% endblock %} {% block content %}
<script
  crossorigin="anonymous"
  integrity="sha256-9SEPo+fwJFpMUet/KACSwO+Z/dKMReF9q4zFhU/fT9M="
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
></script>

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col-lg-12">
    <div class="card mt-3 h-100">
      <h5 class="card-header">Plot description</h5>
      <div class="card-body">
        <p>
          The left plot shows the results generated by BUSCO for <b>all bins</b> and
          <b> samples</b>. "BUSCO attempts to provide a quantitative assessment
          of the completeness in terms of the expected gene content of a genome
          assembly, transcriptome, or annotated gene set. The results are
          simplified into categories of Complete and single-copy, Complete and
          duplicated, Fragmented, or Missing BUSCOs. BUSCO completeness results
          make sense only in the context of the biology of your organism". Visit the 
          <a
            href="https://busco.ezlab.org/busco_userguide.html#interpreting-the-results"
          >
            BUSCO User Guide </a
          >
          for more information. 
        </p>
        <p>
          Hoover over the graph to obtain information about the lineage dataset
          used for each bin, and the number of genes in each BUSCO category.
        </p>
        <p>
          The right barplot shows assembly statistics calculated for each bin using BBTools.
          Specifically, it displays the statistics computed by the <b>stats.sh</b> procedure from BBMap.
          View the 
          <a
            href="https://github.com/BioInfoTools/BBMap/blob/master/sh/stats.sh"
          >
            source code and documentation 
          </a>
          of stats.sh for more information.
        </p>
        <p>
          Choose the assembly statistic that you wish to display from the drop-down manu below the graphs.
          Hoover over the graph to show the numerical values that each bar represents.
        </p>

        <div style="align-items: center; display: flex">
          <span class="header-inline">Downloads</span>
          <div class="'col-lg-4">
            <div
              aria-label="Basic outlined example"
              class="btn-group"
              role="group"
            >
              <a
                class="btn btn-outline-secondary"
                href="all_batch_summeries.csv"
                >BUSCO batch summary for all samples (csv)</a
              >
              <a class="btn btn-outline-secondary" href="BUSCO_plots.zip"
                >BUSCO plots for all samples (zip)</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  {% if vega_plots_overview is defined %}
  <div class="col-lg-6">
    <div id="plot"></div>
    <div id="plot-controls"></div>
  </div>
  {% else %}
  <p>Unable to generate the completeness plot</p>
  {% endif %}
</div>

{% if vega_plots_overview is defined %}
<script id="spec" type="application/json">
  {{
      vega_plots_overview
  }}
</script>

<script type="text/javascript">
  $(document).ready(function () {

    const spec = JSON.parse(document.getElementById("spec").innerHTML);

    vegaEmbed("#plot", spec)
      .then(function (result) {
        result.view.logLevel(vega.Warn);
        window.v = result.view;

        // move the sliders to the right
        const controls = document.getElementsByClassName("vega-bindings");
        document.getElementById("plot-controls").appendChild(controls[0]);
      })
      .catch(function (error) {
        // From 'js-error-handler.html'
        handleErrors([error], $("#plot"));
      });
  });
</script>

{% endif %} {% endblock %} {% block footer %} {% set loading_selector =
'#loading' %} {% include 'js-error-handler.html' %} {% endblock %}
