{% 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> and <b>Annotation</b>. Grounding is also called
              named entity normalization or linking and it assumes that the input is a span
              of text corresponding to a named entity. Annotation is also called named
              entity recognition and works with a longer span of text as input that may contain
              any number of named entities in it.
          </p>
        <p>
        For programmatic access, see the <a href="apidocs">API documentation</a>
        and the <a href="https://github.com/indralab/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 W911NF-15-1-0544,
          W911NF-20-1-0255, and 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>

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