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

{% block head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css" />
<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="download" href="#">Download SVG</a></p>

                <nav>
                    <div class="nav nav-tabs card-header-tabs" role="tablist">
                        <a data-toggle="tab" role="tab" class="nav-item nav-link active" href="#geneset">Gene Set</a>
                        <a data-toggle="tab" role="tab" class="nav-item nav-link" href="#genes">Genes</a>
                        <a data-toggle="tab" role="tab" class="nav-item nav-link" href="#structure">Structure</a>
                        <a data-toggle="tab" role="tab" class="nav-item nav-link" href="#style">Style</a>
                    </div>
                </nav>

            </div>
            <div class="tab-content">
                <div class="tab-pane card-body fade show active" id="geneset" role="tabpanel">
                    <input class="form-control" id="chooseGeneSet" placeholder="Choose a Gene Set..." />
                    <br>
                    <hr>
                    <br>
                    <input class="form-control" id="findGeneSet" placeholder="Search for Gene Sets by Gene..." />
                </div>


                <div class="tab-pane card-body fade" id="genes" role="tabpanel">
                    <div contenteditable="true" class="form-control" id="chooseGenes" placeholder="Choose Genes..."></div>
                </div>


                <div class="tab-pane card-body fade" id="structure" role="tabpanel">
                    <div><input type="checkbox" id="reordering" value="reordering" checked><b><label for="reordering"> Reset Gene Order on each change. </label></b></div>

                    <br>
                    <div>
                        <b><label style="display: inline" for="minimum_nonzero">Only Show a Gene if at least <span id="X">0</span> samples have a non-zero value.</label></b>
                        <input type="range" id="minimum_nonzero" name="" min="0" max="10" step="1" value="0" style="position: relative; top: 3px; display: inline" onchange="$('#X').text(this.value)">
                    </div>

                    <br>
                    <div id="values">
                        <b><label>Show Gene Values of</label></b>
                        <div class="form-check"><input class="form-check-input" type="radio" name="values" value="counts" checked><label> Normalized Counts</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="values" value="zscore_stddev"><label> Z-Scores (Standard Deviations)</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="values" value="zscore_mad"><label> Z-Scores (Mean Absolute Deviation)</label></div>
                    </div>
                    <br>
                    <div id="scaling">
                        <b><label>Show Axis Scale Preset</label></b>
                        <div class="form-check"><input class="form-check-input" type="radio" name="scaling" value="absolute"><label> Absolute (no) Scaling</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="scaling" value="mean" checked><label> 2x Gene-wise mean</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="scaling" value="log"><label> log base 10 units</label></div>
                    </div>

                    <br>
                    <div id="sorting">
                        <b><label>Sort Genes by</label></b>
                        <div class="form-check"><input class="form-check-input" type="radio" name="sorting" value="complete" checked><label> Complete-Linkage Hierarchical Clustering and Optimal Leaf Ordering</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="sorting" value="pc1"><label> Principal Component 1 of genes in sample space</label></div>
                    </div>

                    <!-- <br>
                    <div><input type="checkbox" id="show_averages" value="show_averages"> Show <select class="category"></select> averages</div>

                    <br>
                    <div><input type="checkbox" id="only_show" value="only_show"> Only show certain <select class="category"></select></div>
                    <br>
                    <div><select id="only_show" class="selectpicker" multiple></select></div> -->
                </div>

                <div class="tab-pane card-body fade" id="style" role="tabpanel">
                    <div>
                        <b><label for="radius">Axis Spacing</label></b>
                        <input type="range" id="axis_spacing" name="" min="30" max="250" step="1" value="50">
                    </div>

                    <br>
                    <div><input type="checkbox" id="show_legends" value="show_legends"><b><label for="show_legends"> Show legends </label></b></div>

                    <hr>
                    <div><input type="checkbox" id="show_points" value="show_points" checked><b><label for="show_points"> Show Points </label></b></div>

                    <br>
                    <div>
                        <b><label for="radius">Point Radius</label></b>
                        <input type="range" id="radius" name="" min="2" max="20" step="0.1" value="2">
                    </div>
                    <div>
                        <b><label for="point_opacity">Point Opacity</label></b>
                        <input type="range" id="point_opacity" name="" min="0.1" max="10" step="0.1" value="1">
                    </div>

                    <br>
                    <div id="point_coloring_system">
                        <b><label>Color points</label></b>
                        <div class="form-check"><input class="form-check-input" type="radio" name="point_coloring_system" value="uniform"><label> Uniformly <input type="color" value="#333333" id="default_point_color"></label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="point_coloring_system" value="identity" checked><label> by Identity</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="point_coloring_system" value="class"><label> by <select class="category"></select></label></div>
                    </div>

                    <hr>
                    <div><input type="checkbox" id="show_lines" value="show_lines" checked><b><label for="show_lines"> Show Lines </label></b></div>
                    <div><input type="checkbox" id="show_halos" value="show_halos" checked><b><label for="show_halos"> Show Halos </label></b></div>

                    <br>
                    <div id="curve">
                        <b><label>Interpolate points by</label></b>
                        <div class="form-check"><input class="form-check-input" type="radio" name="curve" value="linear" checked><label> Straight Lines</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="curve" value="natural"><label> Natural Curve</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="curve" value="catmull"><label> CatmullRom Curve</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="curve" value="monotone"><label> MonotoneY Curve</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="curve" value="cardinal"><label> Cardinal Curve</label></div>
                    </div>

                    <br>
                    <div id="line_coloring_system">
                        <b><label>Color lines</label></b>
                        <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="uniform"><label> Uniformly <input type="color" value="#333333" id="default_line_color"></label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="identity" checked><label> by Identity</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="class"><label> by <select class="category"></select></label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="zscore_stddev"><label> by Z-Score (stddev) on a single gene...</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="zscore_mad"><label> by Z-Score (MAD) on a single gene...</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="pc1"><label> by Principal Component 1 of samples in gene space...</label></div>
                    </div>

                    &nbsp;&nbsp;&nbsp;&nbsp; ...along <input type="color" value="#0000cc" id="negative_color"> <input type="color" value="#c0c0c0" id="middle_color"> <input type="color" value="#cc0000" id="positive_color">


                    <br>
                    <br>
                    <div>
                        <b><label for="line_width">Line Width</label></b>
                        <input type="range" id="line_width" name="" min="0.1" max="10" step="0.1" value="1">
                    </div>
                    <div>
                        <b><label for="line_opacity">Line Opacity</label></b>
                        <input type="range" id="line_opacity" name="" min="0.01" max="1" step="0.01" value="1">
                    </div>
                    <div>
                        <b><label for="halo_width">Halo Width</label></b>
                        <input type="range" id="halo_width" name="" min="3" max="40" step="1" value="20">
                    </div>
                    <div>
                        <b><label for="halo_opacity">Halo Opacity</label></b>
                        <input type="range" id="halo_opacity" name="" min="0" max="0.6" step="0.01" value="0.1">
                    </div>

                    <br>
                    <div><input type="checkbox" id="dark_mode" value="dark_mode"><b><label for="dark_mode"> Dark Mode </label></b></div>
                </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">

class_categories = _.uniq(_.flatten(Object.values(classes).map(obj => Object.keys(obj))));
if (class_categories.length === 0) { $(".form-check-input[value='class']").remove(); }
else {
    class_categories.forEach(function(key) {
        $(".category").append($("<option></option>").attr("value", key.toString().replace(/\W/g,'')).text(key.toString()));
    });
}

$("#minimum_nonzero").attr('max', Object.keys(matrix).length);

braid = Braid(matrix, gene_sets, classes);


/////////////////////////////////////////////////////////////////////////////
             ///////    Select Gene Set / Genes   ///////
/////////////////////////////////////////////////////////////////////////////

var chooseGeneSet = document.getElementById("chooseGeneSet");
var chooseGeneSetform = new Awesomplete(chooseGeneSet, {
    list: Object.entries(gene_sets),
    maxItems: 30,
    replace: function (text) { this.input.value = text.label; }
});

var findGeneSet = document.getElementById("findGeneSet");
var findGeneSetform = new Awesomplete(findGeneSet, {
    list: Object.entries(gene_sets),
    maxItems: 1000,
    replace: function (text) { this.input.value = text.label; },
    filter: function (text, input) { return text.value.includes(input) || text.value.includes(input.toUpperCase()); }
});

function complete_selection(e) {
    selected_gene_set_name = e.text.label;
    selected_genes = e.text.value;
    braid.restart({'selected_gene_set_name':selected_gene_set_name, 'selected_genes':selected_genes});
    refresh_genes();
    chooseGeneSet.value = selected_gene_set_name; findGeneSet.value = selected_gene_set_name;
};

chooseGeneSet.addEventListener('awesomplete-selectcomplete', complete_selection);
findGeneSet.addEventListener('awesomplete-selectcomplete', complete_selection);


chooseGenes = $('#chooseGenes');
function refresh_genes() { chooseGenes.text(braid.get_sorted_gene_list().join(", ")); }

function manual_gene_list_edit(e) {
    new_list = $(this).text().split(/[\s,;\t\n]+/).filter(n => n);
    if (!array_shallow_equal(new_list, braid.get_sorted_gene_list())) {
        braid.restart({'selected_gene_set_name':'', 'selected_genes':new_list});
    }
}
manual_gene_list_edit_debounced = _.debounce(manual_gene_list_edit, 1000)
chooseGenes.on('input', manual_gene_list_edit_debounced);

// d3.on("drag", refresh_genes());  // need to somehow register a listener.

function values_scaling_radio_conflict() {

    if ($('input[name=scaling]:checked', '#structure').val() == 'log') {
        $('input[name=values][value=zscore_stddev]').attr('disabled', true);
        $('input[name=values][value=zscore_mad]').attr('disabled', true);
    } else { $('input[name=values]').attr('disabled', false); }

    if ($('input[name=values]:checked', '#structure').val()[0] == 'z') {
        $('input[name=scaling][value=log]').attr('disabled', true);
    } else { $('input[name=scaling]').attr('disabled', false); }

}

function dark_mode(dark) {
    if (dark) {
        $("#graph-container").addClass('dark');
        $(":root").addClass('invert');
    } else {
        $("#graph-container").removeClass('dark');
        $(":root").removeClass('invert');
    }
}

/////////////////////////////////////////////////////////////////////////////
                 ///////    Style Figure    ///////
/////////////////////////////////////////////////////////////////////////////

$("#reordering").change(                        function () { braid.set_reordering(this.checked) });
$("#minimum_nonzero").change(                   function () { braid.order({'minimum_nonzero_': parseInt(this.value)}); braid.render(); refresh_genes(); });
$("#values input:radio").change(                function () { braid.order({'values_': this.value}); braid.render(); values_scaling_radio_conflict(); refresh_genes(); });
$("#show_averages").change(                     function () { braid.render({'show_averages_': this.checked}); });
$("#scaling input:radio").change(               function () { braid.render({'scaling_': this.value}); values_scaling_radio_conflict(); refresh_genes(); });
$("#sorting input:radio").change(               function () { braid.order({'sorting_': this.value}); braid.render(); refresh_genes(); });
$("#show_legends").change(                      function () { braid.style({'show_legends_': this.checked}) });

$("#dark_mode").change(                         function () { dark_mode(this.checked); });
$("#axis_spacing").change(                      function () { braid.render({'axis_spacing_': parseInt(this.value)}) });
$("#show_points").change(                       function () { braid.style({'show_points_': this.checked}) });
$("#radius").change(                            function () { braid.style({'point_radius_': parseFloat(this.value)}) });
$("#point_opacity").change(                     function () { braid.style({'point_opacity_': parseFloat(this.value)}) });
$("#point_coloring_system input:radio").change( function () { braid.style({'point_coloring_system_': this.value}) });
$("#point_coloring_system .category").change(   function () { braid.style({'points_color_by_': this.value}) });
$("#default_point_color").change(               function () { braid.style({'default_point_color_': this.value}) });

$("#show_lines").change(                        function () { braid.style({'show_lines_': this.checked}) });
$("#show_halos").change(                        function () { braid.style({'show_halos_': this.checked}) });
$("#curve input:radio").change(                 function () { braid.style({'curve_': this.value}) });
$("#line_coloring_system input:radio").change(  function () { braid.style({'line_coloring_system_': this.value}) });
$("#line_coloring_system .category").change(    function () { braid.style({'lines_color_by_': this.value}) });
$("#default_line_color").change(                function () { braid.style({'default_line_color_': this.value}) });
$("#negative_color").change(                    function () { braid.style({'negative_color_': this.value}) });
$("#middle_color").change(                      function () { braid.style({'middle_color_': this.value}) });
$("#positive_color").change(                    function () { braid.style({'positive_color_': this.value}) });
$("#line_width").change(                        function () { braid.style({'line_width_': parseFloat(this.value)}) });
$("#line_opacity").change(                      function () { braid.style({'line_opacity_': parseFloat(this.value)}) });
$("#halo_width").change(                        function () { braid.style({'halo_width_': parseFloat(this.value)}) });
$("#halo_opacity").change(                      function () { braid.style({'halo_opacity_': parseFloat(this.value)}) });

/////////////////////////////////////////////////////////////////////////////
                 ///////    Download SVG    ///////
/////////////////////////////////////////////////////////////////////////////

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")
})

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


    </script>


{% endblock %}
