{% extends "base.html" %}

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

{% block title %}Experiment {{ experiment.id }}{% endblock %}

{% block styles %}
    {{ super() }}
    <style>

        .bar rect {
            fill: steelblue;
        }

        .axis text {
            font: 10px sans-serif;
        }

        .axis path, .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

    </style>
{% endblock %}

{% block scripts %}
    {{ super() }}

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

        var data = {{ d3_data|safe }};

        var formatCount = d3.format(",.0f");

        var svg = d3.select("svg"),
            margin = {top: 20, right: 30, bottom: 30, left: 30},
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var x = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .rangeRound([0, width]);

        var bins = d3.histogram()
            .domain(x.domain())
            .thresholds(x.ticks(10))
            (data);

        var y = d3.scaleLinear()
            .domain([0, d3.max(bins, function (d) {
                return d.length;
            })])
            .range([height, 0]);

        var bar = g.selectAll(".bar")
            .data(bins)
            .enter().append("g")
            .attr("class", "bar")
            .attr("transform", function (d) {
                return "translate(" + x(d.x0) + "," + y(d.length) + ")";
            });

        bar.append("rect")
            .attr("x", 1)
            .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
            .attr("height", function (d) {
                return height - y(d.length);
            });

        bar.append("text")
            .attr("dy", ".75em")
            .attr("y", -20)
            .attr("x", (x(bins[0].x1) - x(bins[0].x0)) / 2)
            .attr("text-anchor", "middle")
            .text(function (d) {
                return formatCount(d.length);
            });

        g.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

    </script>

    <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>

    <script>
        $(document).ready(function () {
            const dataTableConfig = {
                dom: "<'row'<'col-sm-1'><'col-sm-2'l><'col-sm-3'f><'col-sm-4'B>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-4'i><'col-sm-8'p>>",
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ]
            };

            $("#results").DataTable(dataTableConfig);
        });
    </script>
{% endblock %}

{% block content %}
    <div class="container">
        {{ util.flashed_messages(dismissible=True, container=False) }}

        <ol class="breadcrumb">
            <li><a href="{{ url_for('ui.home') }}">Catalog</a></li>
            <li><a href="{{ url_for('analysis.view_experiments') }}">Experiment</a></li>
            <li class="active">{{ experiment.id }}</li>
        </ol>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Experiment {{ experiment.id }}

                    {% if current_user.is_authenticated and current_user.is_admin %}
                        <div class="pull-right">
                            <a href="{{ url_for('dbs.drop_experiment_by_id', experiment_id=experiment.id, next=url_for('ui.home')) }}">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                Delete
                            </a>
                        </div>
                    {% endif %}
                </h3>
            </div>
            <div class="panel-body">
                <dl class="dl-horizontal">
                    <dt>Created</dt>
                    <dd>{{ experiment.created }}</dd>
                    <dt>Type</dt>
                    <dd>{{ experiment.type }}</dd>
                    <dt>Permutations</dt>
                    <dd>{{ experiment.permutations }}</dd>
                    <dt>Public</dt>
                    <dd>
                        {% if experiment.public %}
                            <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
                        {% else %}
                            <span class="glyphicon glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
                        {% endif %}
                    </dd>
                </dl>
                <dl class="dl-horizontal">
                    <dt>Omic Identifier</dt>
                    <dd>
                        <a href="{{ url_for('analysis.view_omic', omic_id=experiment.omic_id) }}">
                            {{ experiment.omic.id }}
                        </a>
                    </dd>
                    <dt>Omic Source File</dt>
                    <dd>{{ experiment.omic.source_name }}</dd>
                    <dt>Omic Description</dt>
                    <dd>{{ experiment.omic.description }}</dd>
                </dl>
                <dl class="dl-horizontal">
                    <dt>Query Identifier</dt>
                    <dd>{{ experiment.query.id }} (
                        <a href="{{ url_for('ui.view_query', query_id=experiment.query.id) }}">
                            <span class="glyphicon glyphicon-signal" aria-hidden="true"></span> Summarize
                        </a> |
                        <a href="{{ url_for('ui.view_explorer_query', query_id=experiment.query.id) }}">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Explore
                        </a>
                        )
                    </dd>
                    <dt>Query Networks</dt>
                    <dd>
                        <ul>
                            {% for network in experiment.query.networks %}
                                <li>
                                    <a href="{{ url_for('ui.view_network', network_id=network.id) }}">
                                        {{ network }}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </dd>
                </dl>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Distribution</h3>
            </div>
            <div class="panel-body">
                <svg width="960" height="260"></svg>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Results</h3>
            </div>
            <table class="table table-striped table-responsive" id="results">
                <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    {% for column in columns %}
                        <th>{{ column }}</th>
                    {% endfor %}
                </tr>
                </thead>
                <tbody>
                {% for key, vals in data %}
                    <tr>
                        <td>{{ key[0] }}</td>
                        <td>{{ key[1] }}</td>
                        <td>{{ key[2] }}</td>
                        {% for val in vals %}
                            <td>{{ val }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% include "footer.html" %}
{% endblock %}


