{% extends 'base.html' %}

{% block head %}
<title>Collapsed Contig Abundance Distribution</title>
<script src="js/bootstrapMagic.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@5"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="js/index.js" type="text/javascript"></script>
<link href="css/styles.css" rel="stylesheet"/>
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="row" style="margin-top: 20px;">
    <div class="col-lg-12">
      <div class="card mb-4 border-muted" id="selector-card">
        <div class="card-body p-3">
          <div class="card-text text-muted">
            This visualization shows the distribution of contig abundances for all taxa detected in the provided sample set.
            Select a sample from the dropdown below to filter the histograms. Taxa are sorted by mean abundance (highest to lowest).
            You can also highlight a specific taxon to see its abundance distribution by selecting it from the dropdown.
          </div>
          <div class="row selector-row mb-10" style="margin-top: 10px; margin-bottom: 10px;">
            <div class="col-12">
              <div class="d-flex flex-row flex-wrap gap-3">
                <div class="selector-control">
                  <label for="sampleDropdown" class="form-label fw-bold">Sample:</label>
                  <select id="sampleDropdown" class="form-select custom-dropdown">
                    <!-- Options will be populated by JS -->
                  </select>
                </div>
                <div class="selector-control">
                  <label for="taxonDropdown" class="form-label fw-bold">Highlight Taxon:</label>
                  <select id="taxonDropdown" class="form-select custom-dropdown">
                    <!-- Options will be populated by JS -->
                  </select>
                </div>
                <div class="selector-control" style="flex: 1; min-width: 250px;">
                  <label for="taxaLimitSlider" class="form-label fw-bold">
                    Show top&nbsp;<span id="taxaLimitValue">20</span>&nbsp;taxa:
                  </label>
                  <input type="range" class="form-range" id="taxaLimitSlider" min="1" max="100" value="20">
                </div>
                <div class="selector-control">
                  <label class="form-label fw-bold">Sort by:</label>
                  <div class="d-flex gap-3">
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="sortBy" id="sortByAbundance" value="abundance" checked>
                      <label class="form-check-label" for="sortByAbundance">
                        Average abundance
                      </label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="sortBy" id="sortByCount" value="count">
                      <label class="form-check-label" for="sortByCount">
                        Contig count
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row mb-4">
        <div class="col-12">
          <div id="selection-stats" class="selection-stats-box">
            <small class="text-muted">Select taxon and sample to view statistics</small>
          </div>
        </div>
      </div>

      <div class="row dashboard-row justify-content-center">
        <div class="col-lg-12 mb-4" id="vega-histogram-container">
          <div class="plot-spinner" id="spinner-histogram">
            <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div>
          </div>
          <div id="histogram-grid"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // --- Data injected from Python ---
  window.samples = {{ samples | safe }};
  window.vegaAbundanceHistogramSpec = {{ vega_abundance_histogram_spec | safe }};
  window.meanAbundances = {{ mean_abundances | safe }};
</script>
{% endblock %}

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