{% extends "tabbed.html" %}

{% block head %}
<title>BUSCO Detailed View</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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@6" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm//vega-lite@6" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm//vega-embed@6" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/detailed_view.js" type="text/javascript"></script>
{% endblock %}

{% block tabcontent %}

<br>
<div class="row mb-4 mt-2">
  <div class="col-lg-12">
    <div class="card mb-2 border-muted">
      <div class="card-body p-3">
        <p class="card-text text-muted">
        The plot below shows all MAGs in a single view. 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. 
        You can choose the assembly statistic that you wish to display from the dropdown menu below.
        </p>
        <div id="plot-controls">
          <div class="d-flex flex-wrap align-items-center gap-3 mb-2">
            <div class="d-flex align-items-center">
              <label for="metricSelector" class="form-label mb-0 me-2">Assembly metric:</label>
              <select id="metricSelector" class="form-select form-select-sm" style="width: auto;">
                <option value="contigs_n50">Contig N50</option>
                <option value="scaffolds">Number of scaffolds</option>
              </select>
            </div>
          </div>
          <div class="d-flex flex-wrap align-items-center gap-3">
            <label class="form-label mb-0 me-2">Sort by:</label>
            <div class="d-flex align-items-center gap-1">
              <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="single" data-source="busco" title="Sort by Single (highest to lowest)">
                <div class="busco-legend-color" style="background-color: #2d718e; width: 14px; height: 14px; border-radius: 2px; margin-right: 4px;"></div>
                <span class="small">Single</span>
              </button>
              <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="duplicated" data-source="busco" title="Sort by Duplicated (highest to lowest)">
                <div class="busco-legend-color" style="background-color: #5499b5; width: 14px; height: 14px; border-radius: 2px; margin-right: 4px;"></div>
                <span class="small">Duplicated</span>
              </button>
              <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="fragmented" data-source="busco" title="Sort by Fragmented (highest to lowest)">
                <div class="busco-legend-color" style="background-color: #f2b134; width: 14px; height: 14px; border-radius: 2px; margin-right: 4px;"></div>
                <span class="small">Fragmented</span>
              </button>
              <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="missing" data-source="busco" title="Sort by Missing (highest to lowest)">
                <div class="busco-legend-color" style="background-color: #d32f2f; width: 14px; height: 14px; border-radius: 2px; margin-right: 4px;"></div>
                <span class="small">Missing</span>
              </button>
            </div>
            <div class="vr"></div>
            <div class="d-flex align-items-center gap-1">
              <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="contigs_n50" data-source="assembly" title="Sort by contig N50 (highest to lowest)">
                <span class="small">Contig N50</span>
              </button>
              <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="scaffolds" data-source="assembly" title="Sort by contigs (lowest to highest)">
                <span class="small">Contig count</span>
              </button>
            </div>
            <div class="vr"></div>
            <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="default" data-source="default" title="Reset to default order">
              <span class="small">Reset</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row g-0">
  <div class="col-8">
    <div id="buscoPlotContainer" class="plot-container">Loading BUSCO plot...</div>
  </div>
  <div class="col-4">
    <div id="assemblyPlotContainer" class="plot-container">Loading assembly plot...</div>
  </div>
</div>

<!-- Vega Specs -->
<script id="vega_busco_detailed_spec" type="application/json">
  {{ vega_busco_detailed_spec | safe }}
</script>

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

<!-- Data -->
<script id="detailed_data" type="application/json">
  {{ detailed_data | safe }}
</script>

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

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

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

{% endblock %}

{% block footer %}
{% endblock %}