{% 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@4.17.0"
        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>

<div class="row row-cols-1 row-cols-md-2 g-4">
    <div class="col-lg-12">
        <div class="card mt-3 h-100">
            <h5 class="card-header">Plot description</h5>
            <div class="card-body">
                <p>
                    All plots shown on this page display statistics generated
                    by CheckM
                    for <b>all the bins</b> from <b>all the samples</b>. To see
                    a subset of bins based
                    e.g. on completeness and/or contamination simply draw a
                    rectangle
                    surrounding the desired points in one of the two scatter
                    plots - the
                    corresponding bars will be shown in bottom plots and the
                    other samples
                    will be grayed out.
                </p>
                <div id="plot-controls"></div>

                <div style="align-items: center; display: flex">
                    <span class="header-inline">Downloads</span>
                    <div class="'col-lg-4">
                        <div aria-label="Basic outlined example"
                             class="btn-group"
                             role="group">
                            <a class="btn btn-outline-secondary"
                               href="results.tsv">CheckM report (tsv)</a>
                            <a class="btn btn-outline-secondary"
                               href="checkm_plots.zip">CheckM plots (zip)</a>
                            <a class="btn btn-outline-secondary disabled"
                               href="checkm_report.pdf">CheckM full report
                                (pdf)</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    {% if vega_plots_overview is defined %}
    <div class="col-lg-6">
        <div id="plot"></div>
    </div>
    {% else %}
    <p>Unable to generate the completeness plot</p>
    {% endif %}
</div>

{% if vega_plots_overview is defined %}
<script id="spec" type="application/json">
    {{
        vega_plots_overview
    }}
</script>

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

        const spec = JSON.parse(document.getElementById('spec').innerHTML);

        vegaEmbed('#plot', spec).then(function (result) {
            result.view.logLevel(vega.Warn);
            window.v = result.view;

            // move the sliders to the right
            const controls = document.getElementsByClassName('vega-bindings');
            document.getElementById('plot-controls').appendChild(controls[0])

        }).catch(function (error) {
            // From 'js-error-handler.html'
            handleErrors([error], $('#plot'));
        });

    });
</script>

{% endif %}

{% endblock %}

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