{% 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@5.16.3" 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" style="justify-content: space-evenly; align-items: start;">
    <div class="row" style="margin-bottom: 10px">
        <div class="col-lg-12" style="margin: unset">
            <div class="card">
                <h5 class="card-header">BUSCO summary statistics</h5>
                <div class="card-body">
                    <p>
                        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>, and <b>Complete</b>, for <b>all MAGs</b>.
                    </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>
                        </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>
            </div>
        </div>
    </div>

    <div class="row" style="margin-bottom: 10px">
        <div class="col-lg-12">
            <div class="card">
                <h5 class="card-header">Distribution of BUSCO marker gene counts</h5>
                <div class="card-body">
                    <p>
                        The histograms in the first row below show distributions of BUSCO marker
                        count fractions across all MAGs for all the marker categories,
                        as represented in the table above.

                        The histograms in the second row show the distributions of assembly metrics
                        for all MAGs and can be used to evaluate the quality of the assembly.
                    </p>
                    <div class="col-lg-12" id="summaryHistogramsMarkers">
                        <div id="plotMarkers" style="margin-top: 5px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

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

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

<script type="text/javascript">
    $(document).ready(function () {
        // temporary hack to make it look good with Bootstrap 5
        adjustTagsToBS3()

        const summarySpec = JSON.parse(document.getElementById('summary_stats_json').textContent);
        console.log(summarySpec)

        const rows = ['rowMinimum', 'rowMedian', 'rowMean', 'rowMaximum', 'rowTotal'];
        const indices = ['min', 'median', 'mean', 'max', 'count'];
        const cols = ['single', 'duplicated', 'fragmented', 'missing', 'complete'];
        rows.forEach((rowId, index) => {
            let rowElement = document.getElementById(rowId)
            let colVals = summarySpec.data[index]
            console.log(colVals)
            cols.forEach((col) => {
                let td = document.createElement('td');
                td.textContent = colVals[col];
                rowElement.appendChild(td);
            })
        })

        const vegaSpecSummary = JSON.parse(document.getElementById('vega_summary_json').textContent);
        vegaEmbed("#plotMarkers", vegaSpecSummary).then(
            function (result) {
                result.view.logLevel(vega.Warn);
                window.v = result.view;
            }
        ).catch(
            function (error) {
                handleErrors([error], $("#plotMarkers"));
            }
        );
    });
</script>

{% endblock %}

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