{% 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;
        }
    </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 grounding service (v{{ version }}) can be used to
            identify structured identifiers for entity names.</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>
    {% 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 was funded by DARPA grants W911NF-15-1-0544 and
          W911NF-20-1-0255.
          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 NER 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 %}