{% extends "base.html" %}

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

{% block styles %}
    {{ super() }}
    <link href="{{ url_for('static', filename='css/c3.min.css') }}" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block head %}
    {{ super() }}

    <script src="{{ url_for('static', filename='js/d3.3.5.17.min.js') }}" charset="utf-8"></script>
    <script src="{{ url_for('static', filename='js/c3.min.js') }}"></script>
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
    <script>
        // Initializes popover
        $(function () {
            $('[data-toggle="popover"]').popover({
                placement: 'top',
                trigger: 'hover'
            })
        })
    </script>
{% endblock %}

{% block title %}{{ network }} Summary: Compilation{% endblock %}

{% block content %}
    <a id="top"></a>
    <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('ui.view_networks') }}">Networks</a></li>
            <li><a href="{{ url_for('ui.view_network', network_id=network.id) }}">{{ network }}</a></li>
            <li class="active">Compilation</li>
        </ol>

        <div class="page-header">
            <h1>Compilation Summary of {{ network.name }}
                <small class="text-muted">{{ network.version }}</small>
            </h1>
        </div>

        {% if network_versions is defined and network_versions|length > 1 %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Versions
                        <span class="badge">{{ network_versions|length }}</span>
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <ul class="list-inline">
                        {% for network_version in network_versions %}
                            {% if network_version.id == network.id %}
                                <li>
                                    <a class="btn btn-info" role="button"
                                       href="{{ url_for('ui.view_summarize_compilation', network_id=network_version.id) }}">{{ network_version.version }}</a>
                                </li>
                            {% else %}
                                <li>
                                    <a class="btn btn-default" role="button"
                                       href="{{ url_for('ui.view_summarize_compilation', network_id=network_version.id) }}">{{ network_version.version }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Table of Contents</h3>
            </div>
            <div class="panel-body">
                <ol>
                    <li><a href="#namespaces">Namespaces</a></li>
                    <li><a href="#annotations">Annotations</a></li>

                    {% if unused_namespaces is defined and unused_namespaces|length > 0 %}
                        <li><a href="#unused-namespaces">Unused Namespaces</a></li>
                    {% endif %}

                    {% if unused_annotations is defined and unused_annotations|length > 0 %}
                        <li><a href="#unused-annotations">Unused Annotations</a></li>
                    {% endif %}

                    {% if graph.annotation_list|length > 0 %}
                        <li><a href="#list-annotations">Locally Defined Annotations</a></li>
                    {% endif %}

                    {% if unused_list_annotation_values is defined and unused_list_annotation_values|length > 0 %}
                        <li><a href="#unused-list-annotations">Unused Locally Defined Annotations</a></li>
                    {% endif %}

                    {% if syntax_errors|length > 0 %}
                        <li><a href="#graph-syntax-errors">Syntax Errors</a></li>
                    {% endif %}

                    {% if graph.warnings|length > 0 %}
                        <li><a href="#graph-warnings">Parser Warnings</a></li>
                    {% endif %}

                    {% if error_groups is defined and error_groups|length > 0 %}
                        <li><a href="#error-groups">Top Parser Warnings</a></li>
                    {% endif %}

                    {% if naked_names is defined and naked_names|length > 0 %}
                        <li><a href="#naked-names">Naked Names</a></li>
                    {% endif %}

                    {% if undefined_namespaces is defined and undefined_namespaces|length > 0 %}
                        <li><a href="#undefined-namespaces">Undefined Namespaces</a></li>
                    {% endif %}

                    {% if undefined_annotation is defined and undefined_annotations|length > 0 %}
                        <li><a href="#undefined-annotations">Undefined Annotations</a></li>
                    {% endif %}

                    {% if namespaces_with_incorrect_names is defined and namespaces_with_incorrect_names|length > 0 %}
                        <li><a href="#incorrect-namespaces">Namespaces with Incorrect Names</a></li>
                    {% endif %}
                </ol>
            </div>
        </div>

        <a id="namespaces"></a>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Namespaces
                    <a class="pull-right" href="#top">
                        <span class="glyphicon glyphicon-arrow-up"></span>
                    </a>
                </h3>
            </div>
            <div class="panel-body">
                <p>This section lists all of the namespaces that are defined in the original BEL script.</p>
                <dl class="dl-horizontal">
                    {% for key, value in graph.namespace_url.items()|sort %}
                        <dt>{{ key }}</dt>
                        <dd><a href="{{ value }}">{{ value }}</a></dd>
                    {% endfor %}
                </dl>
            </div>
        </div>

        {% if unused_namespaces is defined and unused_namespaces|length > 0 %}
            <a id="unused-namespaces"></a>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">Unused Namespaces
                        <span class="badge">{{ unused_namespaces|length }}</span>
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <p>The source BEL script contained references to the following namespaces, but they were never
                        used. It is suggested to delete their definitions from the BEL script to improve readability
                        and parsing speed.</p>
                    <ul class="row">
                        {% for unused_namespace in unused_namespaces|sort %}
                            <li class="col-lg-3 col-md-4 col-sm-6">{{ unused_namespace }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}

        <a id="annotations"></a>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Annotations
                    <a class="pull-right" href="#top">
                        <span class="glyphicon glyphicon-arrow-up"></span>
                    </a>
                </h3>
            </div>
            <div class="panel-body">
                <p>This section lists all of the annotations that are defined in the original BEL script.</p>
            </div>
            <table class="table table-hover table-responsive table-striped">
                <thead>
                <tr>
                    <th>Keyword</th>
                    <th>URL</th>
                    <th>Stratify</th>
                </tr>
                </thead>
                <tbody id="myTable">
                {% for key, value in graph.annotation_url.items()|sort %}
                    <tr>
                        <td>{{ key }}</td>
                        <td><a href="{{ value }}">{{ value }}</a></td>
                        <td>
                            <a href="{{ url_for('ui.view_summarize_stratified', network_id=network.id, annotation=key) }}">
                                View Stratified Summary
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        {% if unused_annotations is defined and unused_annotations|length > 0 %}
            <a id="unused-annotations"></a>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">Unused Annotations
                        <span class="badge">{{ unused_annotations|length }}</span>
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <p>The source BEL script contained references to the following annotations, but they were never
                        used. It is suggested to delete their definitions from the BEL script to improve readability
                        and parsing speed.</p>
                    <p><strong>Note:</strong> this may be due to errors occurring in all statements with these
                        annotations.</p>
                    <ul class="row">
                        {% for unused_annotation in unused_annotations|sort %}
                            <li class="col-lg-3 col-md-4 col-sm-6">
                                {{ unused_annotation }}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}

        {% if graph.annotation_list|length > 0 %}
            <a id="list-annotations"></a>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Locally Defined Annotations
                        <span class="badge">{{ graph.annotation_list|length }}</span>
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <p>
                        The source BEL script contained annotations defined as a list. Click each link to export
                        the list definition as a <code>BELANNO</code> file that can hosted externally to promote
                        re-usability and interoperability. After, you can replace the list definition in the source
                        BEL with a <code>SET ANNOTATION X AS URL "Y"</code> definition.
                    </p>
                    <ul class="row">
                        {% for list_annotation in graph.annotation_list %}
                            <li class="col-lg-3 col-md-4 col-sm-6">
                                <a href="{{ url_for('dbs.download_list_annotation', network_id=network.id, annotation=list_annotation) }}">
                                    {{ list_annotation }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}

        {% if unused_list_annotation_values is defined and unused_list_annotation_values|length > 0 %}
            <a id="unused-list-annotations"></a>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">Unused Locally Defined Annotations
                        <span class="badge">{{ unused_list_annotation_values|length }}</span>
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <p>The source BEL script contained the following list annotations, but no references to the
                        following values. It is suggested to prune these values from the list definitions. </p>
                    <p><strong>Note:</strong> this may be due to errors occurring in all statements with these
                        annotations.</p>
                </div>
                <table class="table table-hover table-responsive table-striped">
                    <thead>
                    <tr>
                        <th>Annotation</th>
                        <th>Values</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for annotation, values in unused_list_annotation_values.items()|sort %}
                        <tr>
                            <td>{{ annotation }}</td>
                            <td>
                                <ul class="row">
                                    {% for value in values %}
                                        <li class="col-lg-3 col-md-4 col-sm-6">
                                            {{ value }}
                                        </li>
                                    {% endfor %}
                                </ul>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}

        <!-- BEL Parser Errors -->
        {% if chart_3_data %}
            <a id="content-statistics"></a>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Warning Statistics
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div id="chart3"></div>
                        </div>

                    </div>
                </div>
            </div>
        {% endif %}

        {% if syntax_errors|length > 0 %}
            <a id="graph-syntax-errors"></a>
            <div class="panel panel-danger panel-table">
                <div class="panel-heading">
                    <h3 class="panel-title">Syntax Errors
                        <span class="badge">{{ syntax_errors|length }}</span>
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <table class="table table-hover table-responsive table-striped">
                    <thead>
                    <tr>
                        <th>Line</th>
                        <th>BEL</th>
                        <th>Message</th>
                    </tr>
                    </thead>
                    <tbody id="syntaxErrorTable">
                    {% for number, line, exc, _ in syntax_errors %}
                        <tr>
                            <td>{{ number }}</td>
                            <td><code>{{ line }}</code></td>
                            <td>{{ exc }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <div class="panel-footer">
                    <ul class="pagination pagination pagination-sm" style="margin:0;" id="syntaxErrorPager"></ul>
                </div>
            </div>
        {% endif %}

        {% if graph.warnings|length > 0 %}
            <a id="graph-warnings"></a>
            <div class="panel panel-danger panel-table">
                <div class="panel-heading">
                    <h3 class="panel-title">All Parser Warnings
                        <span class="badge">{{ graph.warnings|length }}</span>
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <p>A faceted table view of all parser warnings can be viewed and exported
                        from <a href="{{ url_for('ui.view_summarize_warnings', network_id=network.id) }}">here.</a>
                    </p>
                </div>
                <table class="table table-hover table-responsive table-striped">
                    <thead>
                    <tr>
                        <th>Line</th>
                        <th>BEL</th>
                        <th>Message</th>
                    </tr>
                    </thead>
                    <tbody id="myTable">
                    {% for number, line, exc, _ in graph.warnings %}
                        <tr>
                            <td>{{ number }}</td>
                            <td><code>{{ line }}</code></td>
                            <td>{{ exc }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <div class="panel-footer">
                    <ul class="pagination pagination pagination-sm" style="margin:0;" id="myPager"></ul>
                </div>
            </div>
        {% endif %}

        {% if error_groups is defined and error_groups|length > 0 %}
            <a id="error-groups"></a>
            <div class="panel panel-danger panel-table">
                <div class="panel-heading">
                    <h3 class="panel-title">Top Warnings
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <table class="table table-hover table-responsive table-striped">
                    <thead>
                    <tr>
                        <th>Error</th>
                        <th>Frequency</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for k, v in error_groups %}
                        {% if v > 1 %}
                            <tr>
                                <td><code>{{ k }}</code></td>
                                <td>{{ v }}</td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}

        {% if naked_names is defined and naked_names|length > 0 %}
            <a id="naked-names"></a>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">Naked Names
                        <span class="badge">{{ naked_names|length }}</span>
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <p>Names referenced without a namespace are antithetical to reproducible science and data
                        integration practices. The list of "naked names" can be downloaded
                        <a href="{{ url_for('dbs.download_naked_names', network_id=network.id) }}">here</a>
                        for further use with tools to help find the appropriate names.</p>
                </div>
            </div>
        {% endif %}

        {% if undefined_namespaces is defined and undefined_namespaces|length > 0 %}
            <a id="undefined-namespaces"></a>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">Undefined Namespaces
                        <span class="badge">{{ undefined_namespaces|length }}</span>
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <p>The source BEL script contained references to the following namespaces, but they were never
                        defined. Click the links to download them as enumerated namespaces, and update the BEL script
                        accordingly.</p>
                    <ul class="row">
                        {% for undefined_namespace in undefined_namespaces|sort %}
                            <li class="col-lg-3 col-md-4 col-sm-6">
                                <a href="{{ url_for('dbs.download_undefined_namespace', network_id=network.id, namespace=undefined_namespace) }}">
                                    {{ undefined_namespace }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}

        {% if undefined_annotation is defined and undefined_annotations|length > 0 %}
            <a id="undefined-annotations"></a>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">Undefined Annotations
                        <span class="badge">{{ undefined_annotations|length }}</span>
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <p>The source BEL script contained references to the following annotations, but they were never
                        defined.
                    </p>
                    <ul class="row">
                        {% for undefined_annotation in undefined_annotations|sort %}
                            <li class="col-lg-3 col-md-4 col-sm-6">
                                {{ undefined_annotation }}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}

        {% if namespaces_with_incorrect_names is defined and namespaces_with_incorrect_names|length > 0 %}
            <a id="incorrect-namespaces"></a>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">Namespaces with Incorrect Names
                        <span class="badge">{{ namespaces_with_incorrect_names|length }}</span>
                        <a class="pull-right" href="#top">
                            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <ul class="row">
                        {% for namespace in namespaces_with_incorrect_names %}
                            <li class="col-lg-3 col-md-4 col-sm-6">
                                <a href="{{ url_for('dbs.download_missing_namespace', network_id=network.id, namespace=namespace) }}">
                                    {{ namespace }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}


    </div>

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

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

    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>

    <script>
        $.fn.pageMe = function (opts) {
            var $this = this,
                defaults = {
                    perPage: 7,
                    showPrevNext: false,
                    hidePageNumbers: false
                },
                settings = $.extend(defaults, opts);

            var listElement = $this;
            var perPage = settings.perPage;
            var children = listElement.children();
            var pager = $('.pager');

            if (typeof settings.childSelector != "undefined") {
                children = listElement.find(settings.childSelector);
            }

            if (typeof settings.pagerSelector != "undefined") {
                pager = $(settings.pagerSelector);
            }

            var numItems = children.size();
            var numPages = Math.ceil(numItems / perPage);

            pager.data("curr", 0);

            if (settings.showPrevNext) {
                $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
            }

            var curr = 0;
            while (numPages > curr && (settings.hidePageNumbers === false)) {
                $('<li><a href="#" class="page_link">' + (curr + 1) + '</a></li>').appendTo(pager);
                curr++;
            }

            if (settings.showPrevNext) {
                $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
            }

            pager.find('.page_link:first').addClass('active');
            pager.find('.prev_link').hide();
            if (numPages <= 1) {
                pager.find('.next_link').hide();
            }
            pager.children().eq(1).addClass("active");

            children.hide();
            children.slice(0, perPage).show();

            pager.find('li .page_link').click(function () {
                var clickedPage = $(this).html().valueOf() - 1;
                goTo(clickedPage, perPage);
                return false;
            });
            pager.find('li .prev_link').click(function () {
                previous();
                return false;
            });
            pager.find('li .next_link').click(function () {
                next();
                return false;
            });

            function previous() {
                var goToPage = parseInt(pager.data("curr")) - 1;
                goTo(goToPage);
            }

            function next() {
                goToPage = parseInt(pager.data("curr")) + 1;
                goTo(goToPage);
            }

            function goTo(page) {
                var startAt = page * perPage,
                    endOn = startAt + perPage;

                children.css('display', 'none').slice(startAt, endOn).show();

                if (page >= 1) {
                    pager.find('.prev_link').show();
                } else {
                    pager.find('.prev_link').hide();
                }

                if (page < (numPages - 1)) {
                    pager.find('.next_link').show();
                } else {
                    pager.find('.next_link').hide();
                }

                pager.data("curr", page);
                pager.children().removeClass("active");
                pager.children().eq(page + 1).addClass("active");

            }
        };

        $(document).ready(function () {
            $('#syntaxErrorTable').pageMe({
                pagerSelector: '#syntaxErrorPager',
                showPrevNext: true,
                hidePageNumbers: false,
                perPage: 20
            });
            $('#myTable').pageMe({pagerSelector: '#myPager', showPrevNext: true, hidePageNumbers: false, perPage: 20});
        });
    </script>


    <script>
        {% if chart_3_data %}
            var chart3 = c3.generate({
                padding: {
                    top: 15,
                    left: 100
                },
                size: {
                    height: 350
                },
                bindto: '#chart3',
                data: {
                    x: 'x',
                    columns: {{ chart_3_data|safe}},
                    type: 'bar'
                },
                title: {
                    text: 'Warning Types'
                },
                axis: {
                    rotated: true,
                    x: {
                        type: 'category'
                    }
                },
                legend: {
                    show: false
                }
            });
        {% endif %}
    </script>
{% endblock %}
