{% comment %}

Metacell projection plot

Input:
- id: prefix used in the identifiers of all elements

{% endcomment %}

<div id="{{ id }}-plot-ui" class="row g-2 mb-4 align-items-end">
    <!-- Toggle visibility -->
    <div class="col-auto">
        <div class="d-flex justify-content-between align-items-center small">
            <label class="col-form-label">
                <i class="fa fa-eye"></i> View options
            </label>
        </div>

        <div class="btn-group d-flex" role="group">
            <input type="checkbox"
                   class="btn-check"
                   id="{{ id }}-cells"
                   autocomplete="off"
                   checked>
            <label class="btn btn-outline-primary" for="{{ id }}-cells">Cells</label>

            <input type="checkbox"
                   class="btn-check"
                   id="{{ id }}-metacells"
                   autocomplete="off"
                   checked>
            <label class="btn btn-outline-primary" for="{{ id }}-metacells">Metacells</label>

            <input type="checkbox"
                   class="btn-check"
                   id="{{ id }}-labels"
                   autocomplete="off">
            <label class="btn btn-outline-primary" for="{{ id }}-labels">Labels</label>

            <input type="checkbox"
                   class="btn-check"
                   id="{{ id }}-links"
                   autocomplete="off">
            <label class="btn btn-outline-primary" for="{{ id }}-links">Links</label>
        </div>
    </div>

    <!-- Color -->
    <div class="col-auto">
        <div class="d-flex justify-content-between align-items-center small">
            <label class="col-form-label">
                <i class="fa fa-paint-roller"></i>
                Color by
            </label>
        </div>

        <select id="projection-color"
                aria-label="Select a property for plot colouring"
                class="form-select form-select btn-outline-primary">
            <option {% if query.color == "cell_type" %}selected{% endif %}
                    value="cell_type">
                Cell type
            </option>
            <option {% if query.color == "cytotrace" %}selected{% endif %}
                    value="cytotrace">
                CytoTRACE
            </option>
            <option {% if query.color == "median_umis" %}selected{% endif %}
                    value="median_umis">
                Median UMIs
            </option>
            <option {% if query.color == "expression" or not query.color and gene %}selected{% endif %}
                    value="expression">
                Gene expression
            </option>
        </select>
    </div>

    <!-- Metacell selection -->
    <div class="col-auto">
        <div class="d-flex justify-content-between align-items-center small">
            <label class="col-form-label">
                <i class="fa fa-object-group"></i> Metacell selection
            </label>
            <i class="fa fa-circle-question"
               data-bs-toggle="tooltip"
               data-bs-placement="top"
               data-bs-title="Click and drag in the plot to select metacells"></i>
        </div>
        <div class="btn-group d-flex" role="group">
            <button type="button" class="btn btn-outline-primary" id="list_markers">List markers</button>
            <button type="button" class="btn btn-outline-primary" id="filter_heatmap">Filter heatmap</button>
        </div>
    </div>
</div>

{% include "../plot_container.html" with id=id ratio="16/9" %}

{% load static %}
<script type="module">
    import { initProjection } from "{% static 'app/dist/atlas/projection.js' %}";
    const gene = {% if gene %}"{{ gene }}"{% else %}null{% endif %};
    const colorBy = document.getElementById("projection-color").value;
    initProjection("{{ id }}", "{{ dataset.slug }}", "{{ dataset }}", colorBy, gene);
</script>