{% extends "tabbed.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 tabcontent %}
<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>

<br>
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col-lg-12">
    <div class="card mt-3 h-10">
      <h5 class="card-header">Plot description</h5>
      <div class="card-body">
        <p>
          The left plot shows the results generated by BUSCO for <b>all MAGs</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>
          The right barplot shows assembly statistics calculated for each MAG 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>

        <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="busco_results.csv">BUSCO results (csv)</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mt-3 h-10">
      <h5 class="card-header">Plot controls</h5>
      <div class="card-body">
        <p>
        To prevent data overload, the samples are grouped into collapsible sections below. You can
        expand/collapse each section by clicking on the little arrow on the right side of the section header.
        Each section will contain a maximum of 100 MAGs.
        <br><br>
        If you want to find statistics for a specific sample, you can pick your sample from the dropdown below -
        this will find the appropriate section and expand it.
        <br><br>
        You can hover over the bars to obtain information about the lineage dataset used for each MAG,
        and the number of genes in each BUSCO category. Additionally, you can choose the assembly statistic
        that you wish to display from the dropdown menu included in every section.
        </p>
        <div id="plot-controls">
          <div style="align-items: center; display: flex;">
            <span class="header-inline">Find sample:</span>
            <div class="col-lg-4">
              <div class="btn-group" role="group">
                <div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="sampleSelector" data-bs-toggle="dropdown" aria-expanded="false">
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" id="sampleSelectorElements"></ul>
                </div>
                <button id="collapseAllButton" class="btn btn-outline-secondary" type="submit" style="white-space: nowrap;">Collapse all</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div id="plot">
      <div class="accordion" id="accordionSamples"></div>
    </div>
  </div>
</div>

<script id="vega_json" type="application/json">
  {{ vega_json | safe }}
</script>

<script type="text/javascript">
  function createAccordionItem(sampleFrom, sampleTo, show) {
    // Create elements
    const accordionItem = document.createElement('div');
    const accordionHeader = document.createElement('h2');
    const accordionButton = document.createElement('button');
    const accordionCollapse = document.createElement('div');
    const accordionBody = document.createElement('div');

    // Set attributes and content
    accordionItem.className = 'accordion-item';
    accordionHeader.className = 'accordion-header';
    // accordionHeader.id = 'headingOne';
    accordionButton.className = 'accordion-button';
    accordionButton.type = 'button';
    accordionButton.setAttribute('data-bs-toggle', 'collapse');
    accordionButton.setAttribute('data-bs-target', `#collapse-${sampleFrom}`);
    // accordionButton.setAttribute('aria-expanded', 'true');
    accordionButton.setAttribute('aria-controls', `collapse-${sampleFrom}`);
    accordionButton.textContent = `Samples ${sampleFrom} to ${sampleTo}`;
    accordionCollapse.id = `collapse-${sampleFrom}`;
    if (show) {
      accordionCollapse.className = 'accordion-collapse collapse show';
    } else {
      accordionCollapse.className = 'accordion-collapse collapse';
    }
    // accordionCollapse.setAttribute('aria-labelledby', 'headingOne');
    accordionCollapse.setAttribute('data-bs-parent', '#accordionSamples');
    accordionBody.className = 'accordion-body';
    accordionBody.id = `accordion-${sampleFrom}`;

    // Append elements
    accordionHeader.appendChild(accordionButton);
    accordionItem.appendChild(accordionHeader);
    accordionCollapse.appendChild(accordionBody);
    accordionItem.appendChild(accordionCollapse);

    return accordionItem;
  }

  function createDropdownItem(sampleName) {
    const listItem = document.createElement("li");
    const link = document.createElement("a");
    link.className = "dropdown-item";
    link.href = "#";
    link.textContent = sampleName;
    listItem.appendChild(link);
    return listItem;
  }

  function populateDropdown(spec) {
    const sampleSelector = document.getElementById("sampleSelectorElements");
    let samples = [];
    Object.entries(spec).forEach(
            ([_, specElement]) => {
              let sampleIds = specElement["ids"];
              samples = [...samples, ...sampleIds];
            }
    );
    console.log("All the samples:", samples);
    for (let i = 0; i < samples.length; i++) {
      const listItem = createDropdownItem(samples[i]);
      sampleSelector.appendChild(listItem);
    }
    document.getElementById("sampleSelector").textContent = samples[0];
  }

  function findFromValue(dictionary, sampleId) {
    for (let [key, value] of Object.entries(dictionary)) {
        if (value.ids.includes(sampleId)) {
            return value.counters.from;
        }
    }
    return null; // return null if the sampleId is not found in any sample_ids array
  }

  function handleDropdownClick(event, spec, collapsibles) {
    const sampleName = event.target.innerText; // Get value from dataset
    const fromValue = findFromValue(spec, sampleName);

    // Update the dropdown button text
    document.getElementById("sampleSelector").textContent = sampleName;

    // Hide all collapsibles
    collapsibles.forEach(collapsible => {
      collapsible.classList.remove("show");
    });

    // Show the selected collapsible (if a value is selected)
    if (fromValue) {
      const targetCollapsible = document.getElementById(`collapse-${fromValue}`);
      targetCollapsible.classList.add('show');
    }
  }

  $(document).ready(function () {
    // temporary hack to make it look good with Bootstrap 5
    adjustTagsToBS3()

    const spec = JSON.parse(document.getElementById('vega_json').textContent);
    let count = 0;
    Object.entries(spec).forEach(([_, specElement]) => {
      const sampleCounter = specElement["counters"];
      const sampleFrom = sampleCounter["from"];
      const sampleTo = sampleCounter["to"];

      if (count === 0) {
        document.getElementById("accordionSamples")
                .appendChild(createAccordionItem(sampleFrom, sampleTo, true));
      } else {
        document.getElementById("accordionSamples")
                .appendChild(createAccordionItem(sampleFrom, sampleTo, false));
      }
      count += 1;

      vegaEmbed(`#accordion-${sampleFrom}`, specElement["subcontext"]).then(
        function (result) {
          result.view.logLevel(vega.Warn);
          window.v = result.view;
        }
      ).catch(
        function (error) {
          handleErrors([error], $(`#accordion-${sampleFrom}`));
        }
      );
    });

    populateDropdown(spec);

    const dropdownMenu = document.getElementById("sampleSelectorElements");
    const collapsibles = document.querySelectorAll(".collapse.accordion-collapse");

    // Add event listener to the dropdown menu (ul)
    dropdownMenu.addEventListener('click', function(event) {
      handleDropdownClick(event, spec, collapsibles);
    });

    const collapseAllButton = document.getElementById("collapseAllButton");
    // Add event listener to thecollapse button
    collapseAllButton.addEventListener('click', function(event) {
      collapsibles.forEach(collapsible => {
        collapsible.classList.remove("show");
      });
    });

  });
</script>

{% endblock %}

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