{% extends "layout.html" %}
{% block breadcrumbs %}
<li>{{ screen.name }}</li>
<li>results</li>
{% if condition != "default" %}
<li>{{ condition }}</li>
{% endif %}
<li class="active">{{ selection }}</li>
{% endblock %}
{% block content %}

<div class="modal fade" id="modal-igv">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Open IGV</h4>
            </div>
            <div class="modal-body">
                <p>
                    VISPR allows you to display read counts and positions of sgRNAs in IGV.
                    You can open IGV directly via JAVA Web Start (not recommended on Mac OS)
                    or download an installable instance.
                </p>
                <p>
                    Once an IGV instance is open, you can select to load the current results with the "Load data" button below.
                    Finally, you can jump to each target via the
                    <span class="glyphicon glyphicon-equalizer"></span> buttons.
                </p>
            </div>
            <div class="modal-footer">
                <div class="btn-group">
                    <a href="http://www.broadinstitute.org/igv/projects/current/igv.php" class="btn btn-default">Open via JAVA Web Start</a>
                    <a href="https://www.broadinstitute.org/igv/download" class="btn btn-default" target="_blank">Download</a>
                    <a id="load-igv" href="http://127.0.0.1:60151/load?file={{ request.url_root }}igv/session/{{ screen.name }}.xml" class="btn btn-default">Load data</a>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-gorilla">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">GO term enrichment with GOrilla</h4>
            </div>
            <div class="modal-body">
                <p>
                    Perform a GO term enrichment of the currently displayed table
                    with the GOrilla web service.

                </p>
            </div>
            <div class="modal-footer">
                <form method="post" enctype="multipart/form-data" target="_blank" action="http://cbl-gorilla.cs.technion.ac.il/servlet/GOrilla" name="gorilla">
                    <input type="hidden" name="application" value="gorilla">
                    <input type="hidden" name="species" value="{{ screen.species.upper() }}">
                    <input type="hidden" name="run_mode" value="{{ gorilla_mode }}">
                    <input type="hidden" name="db" value="all">
                    <input type="hidden" name="target_set" value="{{ gorilla_targets }}">
                    <input type="hidden" name="background_set" value="{{ gorilla_background }}">
                    <input type="hidden" name="output_revigo" value="true">
                    <div class="form-group">
                        <label for="pvalue_thresh">maximum enrichment p-value</label>
                        <select class="selectpicker" name="pvalue_thresh">
                            <option value="0.001" selected>0.001</option>
                            <option value="0.0001">0.0001</option>
                            <option value="0.00001">1e-05</option>
                            <option value="0.000001">1e-06</option>
                            <option value="0.0000001">1e-07</option>
                            <option value="0.00000001">1e-08</option>
                            <option value="0.000000001">1e-09</option>
                            <option value="0.0000000001">1e-10</option>
                            <option value="0.00000000001">1e-11</option>
                        </select>
                        <div class="btn-group">
                            <button type="submit" class="btn btn-default">OK</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <h4 class="panel-heading">Target results</h4>
        <table id="targets" class="table table-striped">
            <thead>
                <th data-dynatable-column="target">target</th>
                {% if has_rna_info %}
                <th style="display: none" data-dynatable-column="locus">Locus</th>
                {% endif %}
                <th data-dynatable-column="score">score</th>
                <th data-dynatable-column="p-value">p-value</th>
                <th data-dynatable-column="fdr">FDR</th>
                <th style="text-align: right;" data-dynatable-no-sort="true">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" data-placeholder="false" type="button" id="table-menu" data-toggle="dropdown" aria-expanded="false"><span class="glyphicon-menu-hamburger glyphicon"></span> <span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="table-menu">
                        {% if screen.is_genes and control_targets %}
                            <li role="presentation" class="dropdown-header">Control genes</li>
                            <li role="presentation"><input type="radio" id="control-hide" name="controls" value="hide"><label for="control-hide">hide</label></li>
                            <li role="presentation"><input type="radio" id="control-show" name="controls" value="show" checked><label for="control-show">show</label></li>
                            <li role="presentation"><input type="radio" id="control-show-only" name="controls" value="show-only"><label for="control-show-only">show only</label></li>
                        {% endif %}
                            <li role="presentation" class="dropdown-header">Table</li>
                            <li role="presentaiton"><a role="menuitem" tabindex="-1" href="/tbl/targets/txt/{{ screen.name }}/{{ condition }}/{{ selection }}?{{ table_args|safe }}" download="{{ screen.name }}.{{ condition }}.{{ selection.replace(" ", "-") }}.txt">Download</a></li>
                        {% if gorilla %}
                            <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="modal" data-target="#modal-gorilla" href="#">GO enrichment</a></li>
                        {% endif %}
                        {% if has_rna_info %}
                            <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="modal" data-target="#modal-igv" href="#">IGV</a></li>
                        {% endif %}
                            <li role="presentation" class="dropdown-header">Selection</li>
                            <li role="presentation"><a id="btn-genemania" role="menuitem" tabindex="-1" href="#">Show in GeneMANIA</a></li>
                            <li role="presentation"><a id="btn-deselect" role="menuitem" tabindex="-1" href="#">Deselect all</a></li>
                        </ul>
                    </div>
                </th>
            <thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                <h4 class="panel-heading">Distributions</h4>
                <div class="text-center">
                    <div id="pval-plot" class="plot" data-toggle="popover" data-desc="{{ captions["p-values"] }}"></div>
                    <div id="pval-hist-plot" class="plot" data-toggle="popover" data-placement="left" data-desc="{{ captions["p-value-hist"] }}"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h4 class="panel-heading">gRNAs</h4>
                    <div class="form-group form-inline text-right">
                        <label for="choose-samples">Samples</label>
                        <select id="choose-samples" class="selectpicker" multiple>
                            {% for sample in samples %}
                            <option selected>{{ sample }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div id="rna-plot" class="parcoords" style="width: 100%; height: 300px;"></div>
            </div>
        </div>
    </div>
</div>

<script>

var plt_pval = null;
var plt_rna = null;
var selected = {};
var rna_dimensions = null;
var rna_dimensions_aux = ["efficiency", "chrom pos", "rna"];

function get_selected() {
    var targets = [];
    for(target in selected) {
        targets.push(target);
    }
    return targets;
}


vg.parse.spec("/plt/pvals/{{ screen.name }}/{{ condition }}/{{ selection }}", function(chart) {
    plt_pval = vega_draw(chart, "#pval-plot");
});


function update_pval_highlights() {
    var selected = get_selected();
    if(selected.length == 0) {
        plt_pval.data({ "highlight": [] });
        plt_pval.update();
    }
    else {
        d3.json("/tbl/pvals_highlight/{{ screen.name }}/{{ condition }}/{{ selection }}/" + selected.join("|"), function(error, json) {
            plt_pval.data({ "highlight": [] });
            plt_pval.update();
            plt_pval.data(
                { "highlight": json }
            );
            plt_pval.update();
        });
    }
}

function clear_pval_highlights() {
    plt_pval.data({"highlight": []});
    plt_pval.update();
}

function highlight_targets_init() {
    // highlight the first 5 targets
    $(".btn-select-target:lt(5)").each(function(idx, e) {
        var target = $(e).attr("name");
        selected[target] = true;
    });
}

function update_dimensions() {
    var sel = [];
    $("#choose-samples option:selected").each(function() {
        sel.push($(this).text());
    });
    var new_dimensions = [];
    rna_dimensions.forEach(function(d) {
        if(sel.indexOf(d) != -1 || rna_dimensions_aux.indexOf(d) != -1) {
            new_dimensions.push(d);
        }
    });
    sel.forEach(function(d) {
        if(new_dimensions.indexOf(d) == -1) {
            new_dimensions.push(d);
        }
    });
    rna_dimensions = new_dimensions;
    plt_rna.dimensions(rna_dimensions);
}

vg.parse.spec("/plt/pvalhist/{{ screen.name }}/{{ condition }}/{{ selection }}", function(chart) {
    vega_draw(chart, "#pval-hist-plot");
});

var dt = $("#targets").dynatable({
    dataset: {
        ajax: true,
        ajaxUrl: "/tbl/targets/json/{{ screen.name }}/{{ condition }}/{{ selection }}?{{ table_args|safe }}",
        ajaxOnLoad: true,
        perPageDefault: 10,
        records: [],
        inputs: {
            paginationClass: 'pagination',
            paginationActiveClass: 'active',
            paginationDisabledClass: 'disabled'
        }
    }
});
var filters = $("#dynatable-query-search-targets").addClass("form-control").css("margin-right", "2px").parent();
filters.addClass("form-inline").css("margin-right", "8px");

{% if control_targets %}
{% if hide_control_targets %}
$("#control-hide").click();
{% endif %}
$("input[name=controls]").change(function() {
    var mode = $(this).val();
    if(mode == "show") {
        $.get("/set/control_targets_mode/show", function() {
            dt.data('dynatable').process();
        });
    }
    else if(mode == "hide") {
        $.get("/set/control_targets_mode/hide", function() {
            dt.data('dynatable').process();
        });
    }
    else if(mode == "show-only") {
        $.get("/set/control_targets_mode/show-only", function() {
            dt.data('dynatable').process();
        });
    }
});
{% endif %}

$("#dynatable-per-page-targets").addClass("selectpicker");

dt.on("dynatable:beforeUpdate", function() {
    $('[data-toggle="tooltip"]').tooltip("hide");
});

// Perform actions when paging the table.
dt.on("dynatable:afterUpdate", function() {
    {% if screen.is_genes %}
    $("#targets tr td:first-child").each(function(idx, cell) {
        var target = $(cell).html();
        $(cell).html(
            '<a target="_blank" href="http://www.ensembl.org/{{ screen.species }}/Gene/Summary?g=' +
            target + '">' + target + '</a>'
        );
    });
    {% endif %}

    $("#targets tr td:last-child").each(function(idx, cell) {
        var target = $(cell).parent().children(":first").children(":first").html();
        $(cell).html('<div class="btn-group" role="group"></div>');

        var group = $(cell).find('.btn-group')
            .append('<button type="button" class="btn btn-default btn-plt-rnas" ' +
                `name="${target}" data-toggle="tooltip" title="Show RNA counts.">` +
                '<span class="glyphicon glyphicon-stats"></span></button>')
            .append('<button type="button" class="btn btn-default btn-select-target"' +
                `name="${target}" data-toggle="tooltip" title="Select target ` +
                'and highlight in p-value plot.">' +
                '<span class="glyphicon glyphicon-ok"></span></button>');

        {% if has_rna_info %}
        var locus = $(cell).parent().children(":eq(1)").html();
        if(locus) {
            group.prepend('<a class="btn btn-default btn-show-igv" ' +
                'data-toggle="tooltip" title="Show in IGV (an instance ' +
                'of IGV can be opened in the menu at the top of this column)." ' +
                `href="http://127.0.0.1:60151/goto?locus=${locus}">` +
                '<span class="glyphicon glyphicon-equalizer"></span></a>');
        }
        {% endif %}
    });

    highlight_targets_init();
    highlight_targets_init = function() {};
    {% if table_args %}
    update_pval_highlights();
    {% endif %}

    // Display parallel coordinates plot of RNA counts.
    $(".btn-plt-rnas").click(function() {
        var target = $(this).attr("name");

        $(".btn-plt-rnas").removeClass("active");
        $(this).addClass("active");

        d3.json("/tbl/rnas/{{ screen.name }}/" + target, function(error, data) {
            if (error) return console.warn(error);
            $("#rna-plot").empty();

            var names = data.map(function(rec) { return rec.rna });
            var colors = d3.scale.category10().domain(names);

            plt_rna = d3.parcoords(
                    {
                        dimensionTitleRotation: -45,
                    }
                )("#rna-plot")
                .data(data)
                .margin({ top: 80, left: 80, bottom: 12, right: 0 })
                .height(Math.max(data.length * 12, 300))
                .color(function(record) { return colors(record.rna) })
                .render();

            if(rna_dimensions == null) {
                rna_dimensions = plt_rna.dimensions();
            }

            update_dimensions();

            var max_count = 0;
            rna_dimensions.forEach(function(d) {
                if(rna_dimensions_aux.indexOf(d) == -1) {
                    max_count = Math.max(max_count, d3.max(data, function(rec) { return rec[d] }));
                }
            });
            rna_dimensions.forEach(function(d) {
                if(rna_dimensions_aux.indexOf(d) == -1) {
                    plt_rna.scale(d, [0, max_count]);
                }
            });

            plt_rna.on("render", function() {
                rna_dimensions = plt_rna.dimensions();
                plt_rna.svg.selectAll("text").style("font-size", "10px");
                $("#rna-plot svg .axis > :contains(rna)").css("opacity", "0");
                $("#rna-plot svg .axis > :contains(rna)").parent().find(".domain").css("opacity", "0");
                $("#rna-plot svg .axis > :contains(rna)").parent().find(".tick line").css("opacity", "0");
                $("#rna-plot svg .axis .label").attr("text-anchor", "left");
            });

            plt_rna.createAxes()
                .brushMode("1D-axes")
                .reorderable()
                .interactive()
                .render();
        });
    });

    // Display gene in hockey stick and update "selected".
    $(".btn-select-target").click(function() {
        var target = $(this).attr("name");

        if(!$(this).hasClass("active")) {
            $(this).addClass("active");
            selected[target] = true;
            update_pval_highlights();
        }
        else {
            $(this).removeClass("active");
            delete selected[target];
            $(this).blur();
            update_pval_highlights();
        }
    });

    for(target in selected) {
        $("button.btn-select-target[name=" + target + "]").addClass("active");
    }

    $(".btn-plt-rnas:first").click();
    $('[data-toggle="tooltip"]').tooltip({container: 'body', trigger: "hover"});
});

$(".btn-show-igv").click(function() {
    $(this).focusout();
    $(this).tooltip('hide');
});

// Show selected genes in GeneMANIA.
$("#btn-genemania").click(function() {
    var url = "http://genemania.org/link?o={{ screen.species.lower() }}&g=";
    window.open(encodeURI(url + get_selected().join("|")), '_blank');
});

// Deselect all genes.
$("#btn-deselect").click(function() {
    for(target in selected) {
        delete selected[target];
    }
    clear_pval_highlights();
    $(".btn-select-target").removeClass("active");
});

$("#choose-samples").change(update_dimensions);



</script>
{% endblock %}