{% extends 'base.html.j2' %}

{% block head %}
<style type="text/css">
    .tooltip {
        position: absolute;
        z-index: 10;
        background-color: #000;
        color: #fff;
        padding: 2px 7px;
        visibility: hidden;
        opacity: 0.75;
        border-radius: 3px;
    }

    .tooltip::after {
        content: " ";
        position: absolute;
        top: 14%;
        right: 100%; /* To the left of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent #000 transparent transparent;
    }

</style>

<title>{{ title }}</title>
{% endblock %}

{% block content %}

<div class="row flex-nowrap">
    <div class="col-md-4 col-12 menu">
        <div class="card">
            <div class="card-header">
                <a class="pull-right" role="button"><i class="fa" id="hide-show"></i></a>
                <h1><a href="index.html" class="link-unstyled">{{ title }}</a></h1>
                <p><a id="enrich" href="#">Enrich DE genes</a> | <a id="degenes" href="#">Download DE genes</a></p>

            </div>
            <div class="tab-content collapse show" id="collapsable">
                <div class="tab-pane fade show active card-body" id="" role="tabpanel">

                    <div class="row"><div class="col">
                        <div><b><label>Dataset</label></b></div>
                        <div class="form-group" id="datasets"></div>
                    </div></div>

                    <hr>
                    <label for="point_size">Point Size</label>
                    <input type="range" id="point_size" name="" min="0.5" max="4" step="0.1" value="2.0" style="position: relative; top: 3px;">
                    <br>
                    Colors:
                    <input type="color" value="#cccccc" id="bad_logFC_bad_q_color_picker">
                    <input type="color" value="#ee8822" id="good_logFC_bad_q_color_picker">
                    <input type="color" value="#eecc22" id="bad_logFC_good_q_color_picker">
                    <input type="color" value="#ee2222" id="good_logFC_good_q_color_picker">

                    <hr>
                    <input type="checkbox" id="show_text" name="show_text" value="show_text">
                    <label for="show_text">Show Gene Symbols</label>
                    <br>
                    <label for="font_size">Font Size</label>
                    <input type="range" id="font_size" name="" min="1" max="16" step="0.1" value="6" style="position: relative; top: 3px;" disabled>

                    <hr>
                    <input class="form-control" id="chooseGene" placeholder="Search for a gene" />

                </div>
            </div>
            <div class="card-footer">
                <small class="text-muted">This page generated by <a href="https://github.com/zfrenchee/Axial" target="_blank">Axial</a></small>
            </div>
        </div>
    </div>

    <div id="graph-container" class="col-md col-12"></div>

</div>

{% endblock %}

{% block scripts %}

{{ scripts_block }}

<script type="text/javascript">

Object.keys(names_and_differentials).forEach((name, i) => $("#datasets").append(
    `<div class="form-check">
        <input class="form-check-input" type="radio" name="datasets" value="${name}" id="${name}" ${i === 0 ? 'checked' : ''}>
        <label for="${name}">${name}</label>
    </div>`
));

volcano = Volcano(names_and_differentials);
volcano.restart();

/////////////////////////////////////////////////////////////////////////////
                 ///////    Figure Styling    ///////
/////////////////////////////////////////////////////////////////////////////

$('#hide-show').click(function(e) { $('.menu').toggleClass('hidden'); });

$("#bad_logFC_bad_q_color_picker").change(   function () {volcano.style({'bad_logFC_bad_q_color_': this.value}) });
$("#good_logFC_bad_q_color_picker").change(  function () {volcano.style({'good_logFC_bad_q_color_': this.value}) });
$("#bad_logFC_good_q_color_picker").change(  function () {volcano.style({'bad_logFC_good_q_color_': this.value}) });
$("#good_logFC_good_q_color_picker").change( function () {volcano.style({'good_logFC_good_q_color_': this.value}) });
$("#point_size").change(                     function () {volcano.style({'point_size_': parseFloat(this.value)}) });
$("#font_size").change(                      function () {volcano.style({'font_size_': parseFloat(this.value)}) });

$("#show_text").change(                      function () {volcano.style({'show_text_': this.checked});
    if (show_text) { $("#font_size").prop('disabled', false); } else { $("#font_size").prop('disabled', true); }
});

$("#datasets input:radio").change(           function () { volcano.restart({'dataset_': this.value}); });


/////////////////////////////////////////////////////////////////////////////
                 ///////    Find a Gene    ///////
/////////////////////////////////////////////////////////////////////////////

var input = document.getElementById("chooseGene");
var form = new Awesomplete(input, {
    list: volcano.genes(),
    maxItems: 30,
});
document.addEventListener('awesomplete-selectcomplete', function(e) { volcano.showTipOn(e.text.value) });


/////////////////////////////////////////////////////////////////////////////
                 ///////    Downloads    ///////
/////////////////////////////////////////////////////////////////////////////

// d3.select("#download").on("click", function() {
//     d3.select(this).attr("href", 'data:application/octet-stream;base64,' + btoa(unescape(encodeURIComponent(d3.select("#graph-container").html())))).attr("download", "plot.svg");
// })

$("#enrich").click(function(e) { GOrilla(volcano.DEgenes(), "{{ organism }}"); });

$("#degenes").click(function() { d3.select(this).attr("href", 'data:application/octet-stream;base64,' + btoa(volcano.DEgenes().join("\n"))).attr("download", "DE_Genes.txt") });

</script>


{% endblock %}

