{% extends "base.html" %}

{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/fixes.html" as fixes %}
{% import "bootstrap/utils.html" as util %}

{% block title %}Comparison{% endblock %}

{% block styles %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/d3.parcoords.css') }}">
    <style>
        #grid tbody tr:hover

    </style>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Summary of Experiments</h3>
            </div>
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>Identifier</th>
                    <th>Query</th>
                    <th>Permutations</th>
                    <th>Omic</th>
                    <th>Name</th>
                    <th>Description</th>
                </tr>
                </thead>
                <tbody>
                {% for experiment in experiments %}
                    <tr>
                        <td>
                            <a href="{{ url_for('analysis.view_experiment', experiment_id=experiment.id) }}">
                                {{ experiment.id }}
                            </a>
                        </td>
                        <td>
                            <a href="{{ url_for('ui.view_query', query_id=experiment.query.id) }}">
                                {{ experiment.query.id }}
                            </a>
                        </td>
                        <td>{{ experiment.permutations }}</td>
                        <td>{{ experiment.omic.id }}</td>
                        <td>{{ experiment.omic.source_name }}</td>
                        <td>{{ experiment.omic.description }}</td>
                        <td>
                            <a href="{{ url_for('analysis.view_experiment_comparison', experiment_ids=(experiments|rejectattr('id', 'equalto', experiment.id)|map(attribute='id')), clusters=clusters, normalize=normalize, seed=seed) }}">
                                Delete
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Comparison of Experiments

                    <div class="pull-right">
                        <small class="text-muted">
                            <a href="{{ url_for('analysis.download_experiment_comparison', experiment_ids=experiment_ids, clusters=clusters, normalize=normalize, seed=seed) }}">
                                Download Data as TSV
                            </a>
                        </small>
                    </div>
                </h3>
            </div>

            <div class="panel-body">
                <div id="example" class="parcoords" style="width:1100px; height:300px"></div>
                {% if clusters %}
                    <p>
                        K-Means clustering with <code>K={{ clusters }}</code> is enabled. Be aware that this is a
                        randomized algorithm and results
                        may not be consistent.
                    </p>
                {% endif %}
                {% if normalize %}
                    <p>
                        Data have been normalized by min/max.
                    </p>
                {% endif %}
            </div>
            <table id="grid" class="table table-striped table-hover"></table>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="{{ url_for('static', filename='js/d3.parcoords.js') }}"></script>
    <script>
        d3.tsv("{{ url_for('analysis.download_experiment_comparison', experiment_ids=experiment_ids, clusters=clusters, normalize=normalize, seed=seed) }}", function (data) {

            {% if clusters %}
                var c10 = d3.scale.category10();
            {% endif %}

            var parcoords = d3.parcoords()("#example")
                .data(data)
                .hideAxis(["Type", "Namespace", "Name"])
                .alpha(0.35)
                {% if clusters %}.color(function (d) {
                    return c10(d.Group);
                }){% endif %}
                .composite("darken")
                .mode("queue")
                .render()
                .brushMode("1D-axes");


            const columns = Object.keys(data[0]);

            var table = d3.select('#grid');
            var thead = table.append('thead');
            var tbody = table.append('tbody');

            thead.append('tr')
                .selectAll('th')
                .data(columns)
                .enter()
                .append('th')
                .text(function (d) {
                    return d
                });

            var rows = tbody.selectAll("tr")
                .data(data)
                .enter()
                .append("tr")
                .on({
                    "mouseover": function (d) {
                        parcoords.highlight([d])
                    },
                    "mouseout": parcoords.unhighlight
                });

            var cells = rows.selectAll("td")
                .data(function (row) {
                    return d3.range(Object.keys(row).length).map(function (column, i) {
                        return row[Object.keys(row)[i]];
                    });
                })
                .enter()
                .append("td")
                .text(function (d) {
                    return d;
                });

            parcoords.on("brush", function (d) {
                table
                    .datum(d.slice(0, 10))
                    .call(grid)
                    .selectAll(".row")
                    .on({
                        "mouseover": function (d) {
                            parcoords.highlight([d])
                        },
                        "mouseout": parcoords.unhighlight
                    });
            });
        });
    </script>
{% endblock %}

