{% extends "bootstrap/base.html" %}

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

{% block head %}
    {{ super() }}
    <script src="https://kit.fontawesome.com/4c86883252.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
    <style>
        div.choices {
            margin-bottom: 0;
        }
        .nav-tabs {
            margin-bottom: 20px;
        }
    </style>
{% endblock %}

{% block content %}
<div class="container" style="margin-top: 30px;">
    <div class="col-md-offset-2 col-md-8 col-sm-offset-2 col-sm-8">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h2 style="margin-top: 10px; margin-bottom: 10px;">Gilda grounding
                    service</h2>
            </div>
            <div class="panel-body">
                <p>
                    The Gilda service (v{{ version }}) can be used to
                    identify identifiers for entity names.
                </p>
                <p>
                    There are two usage modes: <b>grounding</b> (also called <i>named
                    entity normalization</i> or <i>linking</i>) and <b>annotation</b>
                    (also called <i>named entity recognition</i>).
                </p>
                <ul>
                    <li>In the <i>Grounding</i> mode, the input text is assumed to
                        correspond to a single named entity.
                    </li>
                    <li>In the <i>Annotation</i> mode, a longer span of text is used as
                        input which may contain any number of named entities in it.
                    </li>
                </ul>
                <p>
                    For programmatic access, see the <a href="apidocs">API
                    documentation</a>
                    and the <a
                    href="https://github.com/gyorilab/gilda/blob/master/README.md">user
                    guide</a>
                    for more information.
                </p>
            </div>
        </div>
        <ul class="nav nav-tabs">
        {% set navigation_bar = [
        ('/', 'home', 'Grounding'),
        ('/ner', 'view_ner', 'Annotation')
        ] %}
        {% for href, id, caption in navigation_bar %}
            <li class="{% if request.path == href %}active{% endif %}">
                <a href="{{ url_for('ui.' + id) }}">{{ caption }}</a>
            </li>
        {% endfor %}
    </ul>
    {% block gcontent %}{% endblock %}
        <div class="well">
            <p>
                Gilda is developed by the
                <a href="https://gyorilab.github.io" target="_blank">Gyori Lab for Computational Biomedicine</a>
                at <a href="https://www.northeastern.edu" target="_blank">Northeastern University</a>.
                Its development is funded by DARPA grants HR00112220036. Point of contact:
                <a href="mailto:b.gyori@northeastern.edu">Benjamin M. Gyori</a>.
            </p>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

    <script>
        $(document).ready(function () {
            // see https://github.com/jshjohnson/Choices
            const organismSelect = new Choices('#organism-select');
        })
    </script>
{% endblock %}

{% macro render_species_modal() %}
<div class="modal fade" id="species-modal" tabindex="-1" role="dialog" aria-labelledby="speciesModalLabel"
             aria-hidden="true">
    <div class="modal-dialog" role="document">
        <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">Species Prioritization</h4>
            </div>
            <div class="modal-body">
                <p>
                    Species prioritization is applied in case matches are found to proteins from multiple
                    species (human, mouse, yeast, etc.). In case of matches to multiple species for a given
                    input, this (optional) input list is used to prioritize matches. The priority list can be
                    determined based on the user case or knowledge about the context in which the given entity
                    text appeared. The species list is adopted from UniProt's
                    <a href="https://www.uniprot.org/help/filter_options">popular organisms</a> list.
                </p>
            </div>
        </div>
    </div>
</div>
{% endmacro %}

{% macro render_form(form) %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Gilda grounding input</h3>
        </div>
        <div class="panel-body">
            <form class="form" method="POST" role="form">
                {{ wtf.form_field(form.text) }}
                {{ wtf.form_field(form.context) }}
                {{ wtf.form_field(form.organisms, class_="form-control") }}
                {{ wtf.form_field(form.submit, class="btn btn-primary") }}
            </form>
        </div>

        <div class="modal fade" id="context-modal" tabindex="-1" role="dialog" aria-labelledby="contextModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <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">Context Text</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                            There is no hard requirement for how much context should be (optionally) provided for
                            disambiguation. In practice, the context provided could be a sentence, a paragraph, or even
                            an entire article. While it is not required that the context contain the entity text being
                            grounded, in practice, context usually consists of text surrounding and including the
                            entity. Overall, given that disambiguation models integrated from Adeft as well as the
                            models made available independently by Gilda rely on word frequency-derived features, it is
                            generally helpful if context text contains terms characteristic to the given sense of the
                            ambiguous string. Additionally, since Adeft models have the ability to recognize defining
                            patterns (i.e., an explicit spelled out definition of an ambiguous acronym), any context
                            text containing such patterns is useful.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        {{ render_species_modal() }}
    </div>
{% endmacro %}


{% macro render_ner_form(form) %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Gilda annotation input</h3>
        </div>
        <div class="panel-body">
            <form class="form" method="POST" role="form">
                {{ wtf.form_field(form.text) }}
                {{ wtf.form_field(form.organisms, class_="form-control") }}
                {{ wtf.form_field(form.submit, class="btn btn-primary") }}
            </form>
        </div>
    </div>

    <script>
        function fillExample() {
            document.getElementById('text').value = 'Small G proteins are an extensive family of proteins that bind and hydrolyze GTP. They are ubiquitous inside cells, regulating a wide range of cellular processes. Recently, many studies have examined the role of small G proteins, particularly the Ras family of G proteins, in memory formation. Once thought to be primarily involved in the transduction of a variety of extracellular signals during development, it is now clear that Ras family proteins also play critical roles in molecular processing underlying neuronal and behavioral plasticity. We here review a number of recent studies that explore how the signaling of Ras family proteins contributes to memory formation. Understanding these signaling processes is of fundamental importance both from a basic scientific perspective, with the goal of providing mechanistic insights into a critical aspect of cognitive behavior, and from a clinical perspective, with the goal of providing effective therapies for a range of disorders involving cognitive impairments.';
        }
    </script>

    {{ render_species_modal() }}
{% endmacro %}