{% extends 'tabbed.html' %}

{% block head %}
<title>BUSCO QC Dashboard</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/index.js" type="text/javascript"></script>
{% endblock %}

{% block tabcontent %}

<br>
<div class="row gx-2 mb-2">
    <div class="col-lg-12">
        <div class="card mb-2 border-muted">
            <div class="card-body p-3">
                <h5 class="card-title mb-3">BUSCO summary statistics</h5>
                <p class="card-text text-muted">
                    The table below shows the summary statistics of the BUSCO marker count
                    fractions for the categories
                    <b>Single</b>, <b>Duplicated</b>, <b>Fragmented</b>, <b>Missing</b>
                    {% if not comp_cont %}and {% else %}, {% endif %}<b>Complete</b>{% if comp_cont %}, <b>Completeness</b> {% if not unbinned %}and <b>Contamination</b>.{% else %}, <b>Contamination</b>
                    and <b>Unbinned contigs</b>.{% endif %}{% endif %} The statistics are calculated for the categories across <b>all MAGs</b> in <b>all samples</b>{% if unbinned %}, including the
                    percentage of <b>Unbinned contigs</b> per sample{% endif %}.
                </p>
                <table id="summaryTable" class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">% single</th>
                        <th scope="col">% duplicated</th>
                        <th scope="col">% fragmented</th>
                        <th scope="col">% missing</th>
                        <th scope="col">% complete</th>
                        {% if comp_cont %}
                            <th scope="col">% completeness</th>
                            <th scope="col">% contamination</th>
                        {% endif %}
                        {% if unbinned %}
                            <th scope="col">% unbinned contigs</th>
                        {% endif %}
                    </tr>
                </thead>
                <tbody>
                    <tr id="rowMinimum">
                      <th scope="row">Minimum</th>
                    </tr>
                    <tr id="rowMedian">
                      <th scope="row">Median</th>
                    </tr>
                    <tr id="rowMean">
                      <th scope="row">Mean</th>
                    </tr>
                    <tr id="rowMaximum">
                      <th scope="row">Maximum</th>
                    </tr>
                    <tr id="rowTotal">
                      <th scope="row">Total count</th>
                    </tr>
                </tbody>
                </table>
                <div class="mt-3 p-2" style="background-color: #f8f9fa; border-radius: 4px; font-size: 0.9em;">
                    <strong>Metric definitions:</strong>
                    <ul class="mb-0 mt-1" style="padding-left: 1.5rem;">
                        <li><strong>Single:</strong> genes found exactly once</li>
                        <li><strong>Duplicated:</strong> genes found more than once</li>
                        <li><strong>Fragmented:</strong> genes only partially recovered</li>
                        <li><strong>Missing:</strong> genes not found</li>
                        <li><strong>Complete:</strong> Single + Duplicated genes</li>
                        {% if comp_cont %}
                        <li><strong>Completeness:</strong> (100 - Missing) / Total genes</li>
                        <li><strong>Contamination:</strong> 100 x Duplicated / Complete genes</li>
                        {% endif %}
                        {% if unbinned %}
                        <li><strong>Unbinned contigs:</strong> Percentage of contigs not assigned to any MAG</li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="row gx-2" style="margin-bottom: 10px">
    <div class="col-lg-12">
        <div class="card mb-2 border-muted">
            <div class="collapse show" id="histogramsCollapse">
                <div class="card-body p-3">
                    <h5 class="card-title mb-3">Distribution of BUSCO marker gene counts</h5>
                    <div style="display:flex; align-items:center; gap: 12px; margin-bottom: 8px;">
                        <span class="header-inline">Sample:</span>
                        <select id="globalSampleSelect" class="form-select form-select-sm" style="width:auto">
                            <option value="All" selected>All</option>
                        </select>
                        <span class="header-inline">View:</span>
                        <select id="visualizationToggle" class="form-select form-select-sm" style="width:auto">
                            <option value="histograms">Histograms</option>
                            <option value="boxplots" selected>Box plots</option>
                        </select>
                        <div id="hidePointsContainer" class="form-check" style="display: flex; align-items: center; margin-left: 8px;">
                            <input class="form-check-input" type="checkbox" id="hidePointsCheckbox" style="margin-top: 0;">
                            <label class="form-check-label" for="hidePointsCheckbox" style="margin-left: 4px; white-space: nowrap;">Hide points</label>
                        </div>
                    </div>
                    <p id="visualizationDescription" class="card-text text-muted">
                        The box plots below show distributions of BUSCO marker count fractions and assembly metrics.
                        Each box shows the median, quartiles, and outliers for each category. Individual data points
                        are overlaid with low transparency. Use the sample filter to highlight a specific sample
                        across all box plots. Switch between histograms and box plots using the view toggle.
                    </p>
                    <div class="col-lg-12" id="summaryHistogramsMarkers">
                        <div id="plotMarkers" class="square-chart-grid" style="margin-top: 5px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row gx-2" style="margin-bottom: 10px">
    {% if comp_cont %}
    <div class="col-lg-6">
        <div class="card h-100 mb-2 border-muted">
            <div class="card-body p-3" style="display: block;">
                <h5 class="card-title mb-3">Completeness vs. contamination</h5>
                <p class="card-text text-muted">
                    Relationship between BUSCO completeness and contamination for each bin.
                </p>
                <div id="scatterPlotDiv" style="margin-top: 5px; width: 100%;"></div>
            </div>
        </div>
    </div>
    {% endif %}
    <div class="col-lg-6">
        <div class="card h-100 mb-2 border-muted">
            <div class="card-body p-3" style="display: block;">
                <h5 class="card-title mb-3">Distribution of unbinned contigs</h5>
                {% if unbinned %}
                <p class="card-text text-muted">
                    Distribution of unbinned contigs across all samples.
                </p>
                <div id="plotUnbinned" style="margin-top: 5px; width: 100%;"></div>
                {% else %}
                <div style="display: flex; align-items: center; justify-content: center;">
                    <p style="font-style: italic; margin: 0; color: #6c757d;">No data available</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

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

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

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

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

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

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

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

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

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

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

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

<script type="text/javascript">
    // Pass template variables to JavaScript
    {% if comp_cont %}
    window.buscoUpperX = {{ upper_x }};
    window.buscoUpperY = {{ upper_y }};
    {% endif %}
</script>

{% endblock %}

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