Skip to content

Commit

Permalink
Merge pull request #90 from cthoyt/more-forms
Browse files Browse the repository at this point in the history
Add form to matches page
  • Loading branch information
bgyori authored Jan 3, 2023
2 parents be74335 + 22f9842 commit 2d215e5
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 143 deletions.
11 changes: 9 additions & 2 deletions gilda/app/app.py
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,15 @@ def home():
form = GroundForm()
if form.validate_on_submit():
matches = form.get_matches()
return render_template('matches.html', matches=matches, version=version,
text=form.text.data, context=form.context.data)
return render_template(
'matches.html',
matches=matches,
version=version,
text=form.text.data,
context=form.context.data,
# Add a new form that doesn't auto-populate
form=GroundForm(formdata=None),
)
return render_template('home.html', form=form, version=version)


Expand Down
89 changes: 85 additions & 4 deletions gilda/app/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,15 @@
{% 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">
Expand All @@ -27,9 +32,7 @@ <h2 style="margin-top: 10px; margin-bottom: 10px;">Gilda Grounding Service</h2>
</p>
</div>
</div>
<div class="panel panel-default">
{% block gcontent %}{% endblock %}
</div>
{% block gcontent %}{% endblock %}
<div class="well">
<p>Gilda is developed by <a href="https://indralab.github.io"
target="_blank">INDRA labs</a> which is part of the <a
Expand All @@ -44,3 +47,81 @@ <h2 style="margin-top: 10px; margin-bottom: 10px;">Gilda Grounding Service</h2>
</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_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>

<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>
</div>
{% endmacro %}
91 changes: 2 additions & 89 deletions gilda/app/templates/home.html
Original file line number Diff line number Diff line change
@@ -1,93 +1,6 @@
{% extends "base.html" %}

{% block head %}
{{ super() }}
<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 gcontent %}
<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>

<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="text-modal" tabindex="-1" role="dialog" aria-labelledby="textModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="textModalLabel">Text Modal Header</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>
Text modal main text
</p>
</div>
</div>
</div>
</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">
<h5 class="modal-title" id="contextModalLabel">Context text</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</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>

<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">
<h5 class="modal-title" id="speciesModalLabel">Species prioritization</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</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 "popular organisms" list (https://www.uniprot.org/help/filter_options).
</p>
</div>
</div>
</div>
</div>
{{ render_form(form) }}
{% endblock %}

102 changes: 54 additions & 48 deletions gilda/app/templates/matches.html
Original file line number Diff line number Diff line change
@@ -1,54 +1,60 @@
{% extends "base.html" %}

{% block gcontent %}
<div class="panel-heading">
<h3 class="panel-title">Gilda grounding results</h3>
</div>
<div class="panel-body">
<p>
Results for <code>{{ text }}</code>
{% if context %} with context
<i>{{ context }}</i>{% endif %}.
</p>
<p>
The table below contains the retrieved Groundings ordered by descreasing
score. The standard name for the entry is given in the Name column.
Additional groundings are provided for some entries where a match was
found to an equivalent term in a namespace different from the primary
grounding's.
</p>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Grounding</th>
<th>Name</th>
<th>Score</th>
<th>Additional Groundings</th>
</tr>
</thead>
<tbody>
{% for match in matches %}
<tr>
{% set match_curie = match.term.get_curie() %}
<td>
<a class="label label-primary" href="{{ match['url'] }}">
{{ match_curie }}
</a>
</td>
<td>{{ match['term']['entry_name'] }}</td>
<td class="text-right">{{ match['score'] | round(4)}}</td>
<td>
{% for xref_curie, xref_url in match.get_grounding_dict().items() %}
{% if xref_curie != match_curie %}
<a class="label label-info" href="{{ xref_url }}">
{{ xref_curie }}
</a>
{% if form is defined %}
{{ render_form(form) }}
{% endif %}

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Grounding Results for <code>{{ text }}</code></h3>
</div>
<div class="panel-body">
{% if context %}
<p>
Using context: <i>{{ context }}</i>
</p>
{% endif %}
<p>
The table below contains the retrieved Groundings ordered by decreasing
score. The standard name for the entry is given in the Name column.
Additional groundings are provided for some entries where a match was
found to an equivalent term in a namespace different from the primary
grounding's.
</p>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Grounding</th>
<th>Name</th>
<th>Score</th>
<th>Additional Groundings</th>
</tr>
</thead>
<tbody>
{% for match in matches %}
<tr>
{% set match_curie = match.term.get_curie() %}
<td>
<a class="label label-primary" href="{{ match['url'] }}">
{{ match_curie }}
</a>
</td>
<td>{{ match['term']['entry_name'] }}</td>
<td class="text-right">{{ match['score'] | round(4) }}</td>
<td>
{% for xref_curie, xref_url in match.get_grounding_dict().items() %}
{% if xref_curie != match_curie %}
<a class="label label-info" href="{{ xref_url }}">
{{ xref_curie }}
</a>
{% endif %}
{% endfor %}
</td>
</tr>
{% endfor %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</tbody>
</table>
</div>
{% endblock %}

0 comments on commit 2d215e5

Please sign in to comment.