{% comment %}

Heatmap plot of gene expression panel

Input:
- id: prefix used in the identifiers of all elements
- type: gene selection based on top 'markers' per metacell (default) or
  'gene-lists'

{% endcomment %}

{% load static %}

{% if type == "gene-lists" %}
    {% include "../modals/list_editor.html" with id="expression" type="gene_lists" %}
{% endif %}

<style>
    .w-250px {
        width: 250px;
    }

    .mt-35px {
        margin-top: 35px;
    }
</style>

<form novalidate action="#{{ id }}">
    <div class="row g-2 mb-4 align-items-start">
        <div class="col-auto">
            {% if type|default:"markers" == "markers" %}
                <div class="d-flex justify-content-between align-items-center small">
                    <label class="col-form-label">
                        <i class="fa fa-list-check"></i> Genes
                    </label>
                </div>

                <div class="btn-group" role="group">
                    <button type="button"
                            class="btn btn-outline-primary dropdown-toggle"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                            data-bs-auto-close="outside">
                        <span id="genes_label">5 markers per cluster</span>
                    </button>
                    <div class="dropdown-menu">
                        <div class="mx-4 mb-3 w-250px">
                            <div>
                                <label class="col-form-label">
                                    <small>Number of markers per cluster</small>
                                </label>
                                <input type="range"
                                       class="js-range-slider opacity-0"
                                       id="markers"
                                       name="markers"
                                       value="0"
                                       step="0.1">
                            </div>
                        </div>
                    </div>
                </div>
            {% elif type == "gene-lists" %}
                <div class="d-flex justify-content-between align-items-center small">
                    <label class="col-form-label">
                        <i class="fa fa-list-check"></i> Genes
                    </label>

                    <div class="d-flex gap-3">

                        <button type="button"
                                id="clear_selected_genes"
                                class="btn btn-link btn-sm d-block text-end"
                                onclick="document.getElementById('{{ id }}_gene_selection').tomselect.clear();">
                            Clear selection
                        </button>

                        <button type="button"
                                id="edit_gene_lists"
                                class="btn btn-link btn-sm d-block text-end"
                                data-bs-toggle="modal"
                                data-bs-target="#{{ id }}_gene_lists_editor">
                            Edit gene lists...
                        </button>
                    </div>
                </div>

                {% include "../select/gene.html" with id=id name="gene_lists" hash=id limit=10 multiple="true" selected=query.gene_lists class=" " width="400px" %}
            {% endif %}
        </div>

        <div class="col-auto">
            <div class="d-flex justify-content-between align-items-center small">
                <label class="col-form-label">
                    <i class="fa fa-list-check"></i> Metacells
                </label>
            </div>
            <div class="btn-group" role="group">
                <button type="button"
                        class="btn btn-outline-primary dropdown-toggle"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        data-bs-auto-close="outside">
                    <span id="metacells_filter">All metacells</span>
                </button>
                <div id="metacell_dropdown" class="dropdown-menu">
                    <div class="mx-4 mb-3 w-250px">

                        <div class="d-flex justify-content-between align-items-center small">
                            <label class="col-form-label">Filter metacells</label>
                            <button type="button"
                                    id="select_all_metacells"
                                    class="btn btn-link btn-sm d-block text-end"
                                    onclick="document.getElementById('metacells').tomselect.clear();">
                                Select all metacells
                            </button>
                        </div>

                        {% load string_extras %}
                        {% include "../select/metacell.html" with metacell_dict=metacell_dict selected=query.metacell_lists selected2=query.metacells placeholder="Select metacells" name="metacell_lists" %}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-auto">
            <div class="d-flex justify-content-between align-items-center small">
                <label class="col-form-label">
                    <i class="fa fa-filter"></i> Fold-change thresholds
                </label>
            </div>
            <div class="btn-group" role="group">
                <button type="button"
                        class="btn btn-outline-primary dropdown-toggle flat-right-border"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        data-bs-auto-close="outside">
                    FC ≥ <span id="fc_min_value">2</span>
                </button>
                <div class="dropdown-menu">
                    <div class="mx-4 mb-3 w-250px">
                        <label for="markers" class="col-form-label">
                            <small>Minimum fold-change</small>
                        </label>

                        <input type="range"
                               class="js-range-slider opacity-0"
                               id="fc_min"
                               name="fc_min"
                               value="0"
                               step="0.1">
                    </div>
                </div>

                <button type="button"
                        class="btn btn-outline-primary dropdown-toggle"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        data-bs-auto-close="outside">
                    Clip FC ≤ <span id="clip_log2_value">0</span>
                </button>
                <div class="dropdown-menu">
                    <div class="mx-4 mb-3 w-250px">
                        <label for="markers" class="col-form-label">
                            <small>Scale maximum fold-change</small>
                        </label>

                        <input type="range"
                               class="js-range-slider opacity-0"
                               id="clip_log2"
                               name="clip_log2"
                               value="0"
                               step="0.1">

                        <p class="mt-3 text-muted small">
                            <i class="fa fa-info-circle"></i> Lower limit of selection depends on minimum fold-change.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-auto">
            <button id="{{ id }}_submit" type="submit" class="btn btn-primary mt-35px">Apply</button>
        </div>
    </div>
</form>

<!-- Gene expression heatmap form -->
<script type="module">
    import { handleFormSubmit } from "{% static 'app/dist/atlas/expression_panel.js' %}";
    import { initMetacellSelectionUpdater } from "{% static 'app/dist/utils/metacell.js' %}";
    import { initRangeSlider } from "{% static 'app/dist/utils/range_slider.js' %}";

    document.addEventListener("DOMContentLoaded", () => {
        const select = document.querySelector("#metacells").tomselect;
        const metacellsFilter = document.querySelector("#metacells_filter");
        initMetacellSelectionUpdater(select, metacellsFilter);
    });

    initRangeSlider("#markers",
        { min: 1, max: 21, from: {{query.markers|default:5}} },
        ["#genes_label", undefined, " markers per cluster"]
    );

    initRangeSlider("#clip_log2",
        {
            min: 0, max: 6, step: 0.1, from: {{query.clip_log2|default:6}},
            from_min: 2, from_shadow: true
        },
        ["#clip_log2_value"]
    );

    initRangeSlider("#fc_min",
        { min: 0, max: 6, step: 0.1, from: {{query.fc_min|default:2}} },
        ["#fc_min_value", "#clip_log2"]
    );

    handleFormSubmit("{{id}}", "{{dataset.slug}}", "{{type}}");
</script>

<!-- Use column due to vega-lite's bug with containers for concatenated plots -->
{% if type|default:"markers" == "markers" or query.genes %}
    <div class="row">
        <div class="col-10 col-sm-11">{% include "../plot_container.html" with id=id ratio="16/9" %}</div>
    </div>

    <script type="module">
        import { loadExpressionData } from "{% static 'app/dist/atlas/expression_panel.js' %}";
        document.addEventListener("DOMContentLoaded", () => {
            loadExpressionData("{{id}}", "{{dataset.slug}}", "{{query.genes}}");
        });
    </script>
{% elif type == "gene-lists" and not query.genes %}
    <p class="text-muted">
        <i class="fa fa-circle-exclamation"></i>
        Select genes to render heatmap.
    </p>
{% endif %}