{% extends 'tabbed.html' %}

{% block head %}
<title>Contig QC Dashboard (Vega-Lite)</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>
<script src="https://cdn.jsdelivr.net/npm/vega-loader-arrow@0.3.2"></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="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3.0.0/dist/d3-scale-chromatic.min.js"></script>
<script src="js/index.js" type="text/javascript"></script>
<link href="css/styles.css" rel="stylesheet"/>
{% endblock %}

{% block tabcontent %}
<div class="container-fluid">
  <div class="row" style="margin-top: 20px;">
    <div class="col-lg-12">
      {% if has_metadata == 'true' %}
      <div class="card mb-4 border-muted" id="metadata-card">
        <div class="card-body p-3">
          <div class="card-text text-muted">
            This visualization shows contig quality metrics (length distribution, Nx curve, GC content, cumulative length) for all samples, grouped by metadata categories. Loading may take a while for large datasets. Changing categories in the dropdown may take a few seconds for the charts to update. Only categorical metadata are available in this visualization.
          </div>
          <div class="card-text text-muted" style="margin-top: 10px;">
            Pick a metadata category and value to filter the plots below:
          </div>
          <div class="row selector-row justify-content-left mb-10"  style="margin-top: 10px; margin-bottom: 10px;">
            <div class="col-auto">
              <label for="categoryDropdown" class="form-label fw-bold">Metadata category:</label>
              <select id="categoryDropdown" class="form-select custom-dropdown">
                <!-- Options will be populated by JS -->
              </select>
            </div>
            <div class="col-auto">
              <label for="valueDropdown" class="form-label fw-bold">Value:</label>
              <select id="valueDropdown" class="form-select custom-dropdown">
                <!-- Options will be populated by JS -->
              </select>
            </div>
          </div>
        </div>
      </div>
      {% endif %}

      <!-- Legend Card -->
      <div class="card mb-4 border-muted" id="custom-legend-card">
        <div class="card-body p-3">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="card-title text-muted mb-0">Click on the individual samples below to show/hide them:</h6>
            <div>
              <button type="button" class="btn btn-sm btn-outline-secondary me-1" id="selectAllLegendBtn">Select all</button>
              <button type="button" class="btn btn-sm btn-outline-secondary" id="unselectAllLegendBtn">Unselect all</button>
            </div>
          </div>
          <div id="custom-legend" style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
            <!-- Legend items will be populated by JavaScript -->
          </div>
        </div>
      </div>
      <!-- End of Legend Card -->

      <div class="mx-10">
        <div class="row dashboard-row justify-content-center">
          <div class="col-md-6 mb-4" id="vega-contig-length-container">
            <div class="plot-spinner" id="spinner-contig-length">
              <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div>
            </div>
            <div id="vega-contig-length"></div>
          </div>
          <div class="col-md-6 mb-4" id="vega-nx-curve-container">
            <div class="plot-spinner" id="spinner-nx-curve">
              <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div>
            </div>
            <div id="vega-nx-curve"></div>
          </div>
        </div>
        <div class="row dashboard-row justify-content-center">
          <div class="col-md-6 mb-4" id="vega-gc-content-container">
            <div class="plot-spinner" id="spinner-gc-content">
              <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div>
            </div>
            <div id="vega-gc-content"></div>
          </div>
          <div class="col-md-6 mb-4" id="vega-cumulative-length-container">
            <div class="plot-spinner" id="spinner-cumulative-length">
              <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div>
            </div>
            <div id="vega-cumulative-length"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // --- Data injected from Python ---
  let hasClientMetadata = {{ has_metadata | safe }};
  const categories = {{ categories | safe }};
  const values = {{ values | safe }};
  const sampleIdsByMetadata = {{ sample_ids_by_metadata | safe }};
  const vegaContigLengthSpec = {{ vega_contig_length_spec | safe }};
  const vegaNxCurveSpec = {{ vega_nx_curve_spec | safe }};
  const vegaGcContentSpec = {{ vega_gc_content_spec | safe }};
  const vegaCumulativeLengthSpec = {{ vega_cumulative_length_spec | safe }};
</script>
{% endblock %}

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