{% extends "./atlas.html" %}

{% comment %}

List metacell markers for a given species

Features:
- Form to set metacells and fold-change thresholds
- Mockup table if no analyses is loaded
- Metacell markers filtered as per the user input:
    - Fetches via REST API
    - Table for the data
    - Download data button
    - Copy link to clipboard button

Input:
- species: Species object from `models.py`
- metacells: list of selected metacells
- metacell_dict: dictionary with available metacells to populate the select input
- query: query parameters to automatically filter metacells, fold-change values, etc.

{% endcomment %}

{% block title %}
    {{ dataset }} Markers
{% endblock title %}

{% block content %}

    {% load static %}
    {% include "../components/warning_alert.html" %}

    <div class="row">
        <div class="col-md-3">
            <form>
                <fieldset>
                    <legend class="h5">Cell selection</legend>
                    <div class="mb-3">
                        <label class="col-form-label" for="metacells">Metacells</label>
                        {% include "../components/select/metacell.html" with metacell_dict=metacell_dict selected=query.metacells %}
                    </div>
                </fieldset>

                <fieldset>
                    <legend class="h5">Fold-change</legend>
                    <div class="mb-3">
                        <label class="col-form-label" for="fc_min_type">
                            Min. fold-change <i class="fa fa-circle-question"
    data-bs-toggle="tooltip"
    data-bs-placement="right"
    data-bs-title="Minimum fold-change for gene filtering"></i>
                        </label>
                        <select class="form-select"
                                name="fc_min_type"
                                id="fc_min_type"
                                aria-label="Select example"
                                value="median">
                            <option value="mean"
                                    {% if query.fc_max_bg_type == 'mean' %}selected{% endif %}>
                                Mean
                            </option>
                            <option value="median"
                                    {% if query.fc_max_bg_type == 'median' %}selected{% endif %}>
                                Median
                            </option>
                        </select>
                    </div>

                    <input type="range"
                           class="js-range-slider"
                           id="fc_min"
                           name="fc_min"
                           value="{{ query.fc_min|default:2 }}"
                           step="0.1">

                    <hr>
                    <div class="mb-3">
                        <label class="col-form-label" for="fc_max_bg_type">
                            Max. fold-change (background) <i class="fa fa-circle-question"
    data-bs-toggle="tooltip"
    data-bs-placement="right"
    data-bs-title="Maximum fold-change in non-selected cells"></i>
                        </label>
                        <select class="form-select"
                                id="fc_max_bg_type"
                                name="fc_max_bg_type"
                                aria-label="Select example">
                            <option value="ignore"
                                    {% if query.fc_max_bg_type == 'ignore' %}selected{% endif %}>
                                Ignore
                            </option>
                            <option value="mean"
                                    {% if query.fc_max_bg_type == 'mean' %}selected{% endif %}>
                                Mean
                            </option>
                            <option value="median"
                                    {% if query.fc_max_bg_type == 'median' %}selected{% endif %}>
                                Median
                            </option>
                        </select>
                    </div>

                    <input type="range"
                           class="js-range-slider"
                           id="fc_max_bg"
                           name="fc_max_bg"
                           value="{{ query.fc_max_bg|default:3 }}"
                           step="0.1"
                           disabled>
                    <button type="submit" class="btn btn-primary my-3 w-100">List markers</button>
                </fieldset>
            </form>
        </div>
        <div class="col-md-9">
            {% if metacells %}
                <div class="row g-0 d-flex justify-content-end mb-3">
                    <div class="col-auto text-end text-muted form-control-sm">
                        Selected metacells: <span id="selected_metacells">None</span> <b>({{ metacells|length }} in total)</b>
                    </div>
                    <div class="col-auto">
                        {% load headings %}
                        {% clipboard_button id='markers' %}
                        {% data_dropdown id='markers' %}

                    </div>
                </div>
                <table id="markers_table" class="display w-100">
                </table>
            {% else %}
                {% include "../components/mockup/table.html" %}
            {% endif %}
        </div>
    </div>

    <script type="module">
        import { initRangeSlider } from "{% static 'app/dist/utils/range_slider.js' %}";
        initRangeSlider("#fc_min", { min: 0, max: 5, from: {{query.fc_min|default:2}}, step: 0.1 });
        const fx_max_bg_slider = initRangeSlider("#fc_max_bg", { min: 0, max: 5, from: {{query.fc_max_bg|default:3}}, step: 0.1 });

        import { handleFormSubmit, updateMetacellSelectionLabel, initMarkersTable, toggleMaxFCslider }
            from "{% static 'app/dist/atlas/markers.js' %}";

        // Hide slider depending on value of #fc_max_bg_type
        document.addEventListener('DOMContentLoaded', () => {
            const fc_max_bg_type = document.getElementById('fc_max_bg_type');
            toggleMaxFCslider(fc_max_bg_type, fx_max_bg_slider);
            fc_max_bg_type.addEventListener('change', (e) => {
                toggleMaxFCslider(e.target, fx_max_bg_slider);
            });
        });

        handleFormSubmit();
        updateMetacellSelectionLabel("{{metacells|join:', '}}");
        {% if metacells %}
            initMarkersTable(
                "{{dataset.slug}}",
                "{{query.metacells}}",
                "{{query.fc_min_type|default:'mean'}}",
                "{{query.fc_min|default:2}}",
                "{{query.fc_max_bg_type|default:'ignore'}}",
                "{{query.fc_max_bg|default:3}}",
            );
        {% endif %}
    </script>

{% endblock content %}