Skip to content

Commit

Permalink
Merge pull request #34 from cmbi/analytics_and_help_page
Browse files Browse the repository at this point in the history
Analytics and help page
  • Loading branch information
laurensvdwiel committed Oct 29, 2018
2 parents f493d09 + 7d46a94 commit 1e83626
Show file tree
Hide file tree
Showing 5 changed files with 297 additions and 8 deletions.
3 changes: 3 additions & 0 deletions metadome/presentation/web/routes.py
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,9 @@ def about():
def method():
return render_template('method.html')

@bp.route('/help', methods=['GET'])
def help_page():
return render_template('help.html')

@bp.route('/visualization_error/<transcript_id>/', methods=['GET'])
def visualization_error(transcript_id):
Expand Down
39 changes: 34 additions & 5 deletions metadome/presentation/web/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,28 @@
<!-- Needed for ownership verification in Google -->
<meta name="google-site-verification" content="kH6XbXRGjfsUufCNeykbKHPK9DfQebMHAVdgHYzxVII" />

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-127082123-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-127082123-1');
</script>

<script>
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");

});
});
</script>

<link rel="icon" type="image/png"
href="{{ url_for('static', filename='img/favicon.png') }}">
<link rel="stylesheet"
Expand All @@ -36,7 +58,7 @@
</a>
</div>

<div class="navbar-menu">
<div id='navbar_menu' class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item">
<a class="link is-info" href="{{ url_for('web.dashboard') }}">Start
Expand All @@ -49,18 +71,25 @@

<div class="navbar-end">
<div class="navbar-item">
<a class="link is-info" href="{{ url_for('web.about') }}">About
MetaDome</a>
<a class="link is-info" href="{{ url_for('web.help_page') }}">Help</a>
</div>
<div class="navbar-item">
<a class="link is-info" href="{{ url_for('web.about') }}">About</a>
</div>
<div class="navbar-item">
<a class="link is-info" href="{{ url_for('web.method') }}">Methods</a>
</div>
<div class="navbar-item">
<a class="link is-info" href="{{ url_for('web.contact') }}">Contact
us</a>
<a class="link is-info" href="{{ url_for('web.contact') }}">Contact us</a>
</div>
</div>
</div>

<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</nav>
<section class="hero is-primary" style="background-color: #006991;">
<div class="hero-body">
Expand Down
256 changes: 256 additions & 0 deletions metadome/presentation/web/templates/help.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
{% extends "base.html" %} {% block content %}

<!-- Staring definition of site content -->
<section class="section">
<div class="box">
<section class="section">
<div class='content'>
<h1 class="title" style="color: #00AFDC;">Help</h1>

<h3 class="title" style="color: #00AFDC;">Tutorial</h3>
<p>
To get more familiar with the using MetaDome and all of it's functionality
we strongly advise to <a href="{{ url_for('web.dashboard') }}?tour=true">
start the tour</a>. If you feel that any questions are not addressed in the
FAQ below, please <a href="{{ url_for('web.contact') }}">contact us</a>.
</p>

<h3 class="title" style="color: #00AFDC;">Privacy</h3>
<p>
This section outlines the ways in which the MetaDome website handles information about users.
This should not be read as a legal document, but as a description of how we handle information
that could be considered sensitive.
</p>
<div class="label">Sensitive data</div>
<p>
MetaDome does not save any data that a user may provide. The visualization
of MetaDome occurs client-side (in your local browser) and is not
accessible to us. This means we can not know which genes, transcripts,
domains, and positions you are interested in.
</p>

<div class="label">Personalized tracking</div>
<p>
MetaDome makes use of <a href="http://www.google.com/analytics/"
target="_blank">Google analytics</a> (GA) to help us analyze how users
navigate the various site-pages.
GA uses a single-pixel "web bug" image, which is served from every
page, a javascript script that collects information about each request,
and cookies that maintain information about your usage of the site between
visits. You can read more about how GA works on the GA
<a href="http://www.google.com/analytics/" target="_blank">website</a>,
which includes a <a class="ext" href="http://code.google.com/apis/analytics/docs/concepts/gaConceptsOverview.html">
detailed description</a> of how traffic is tracked and analysed.
<br><br>
We use the information generated by GA purely to assess the usefulness
and popularity of different features of the site. We have configured GA
to not provide the ability to track individual users' usage of the site.
However, GA does provides a high-level anonymized overview of the traffic that passes
through the site, including such information as the approximate geographical
location of users, how often and for how long they visited the site, etc.
<br><br>
We will never (and will not allow any third party to) use the
information by the GA to track or to collect any Personally
Identifiable Information of visitors to our site.
Neither will we will link, or seek to link, an IP address
with the identity of a computer user.
<br><br>
If you have any concerns about our use of Google analytics, please
feel free to <a href="{{ url_for('web.contact') }}">contact us</a>.
</p>

<h1 class="title" style="color: #00AFDC;">Frequently Asked Questions</h1>

<h3 class="title" style="color: #00AFDC;">General questions</h3>
<div class="box">
<div class="label">What is MetaDome?</div>
<div class="box">
MetaDome is a fast and easy-to-use web server that offers an easily
accessible and unique perspective that enables researchers and
clinicians to interpret variants of unknown significance via
'meta-domains'; a concept that we have previously validated
(<a href="https://doi.org/10.1002/humu.23313" target="_blank">
L. Wiel et al. Human Mutation, 2017 </a>) which makes use of protein
domain homology within the human genome to transfer genetic variant
information across homologous domains. MetaDome can visualize
meta-domain information and gene-wide profiles of genetic tolerance.
</div>


<div class="label">How can I use MetaDome?</div>
<div class="box">
Analyses through MetaDome can be performed by querying a gene name
and desired transcript. The result is a visualization that a user
may interact with to highlight positions of their interest and
obtain more detailed information of those positions. This includes
regional tolerance to missense variation and the presence or absence
of variation at corresponding positions within homologous domains.
<br><br>
To get more familiar with the using MetaDome and all of it's functionality
we strongly advise to <a href="{{ url_for('web.dashboard') }}?tour=true">
start the tour</a>.
</div>

<div class="label">Can I use my smartphone or tablet to access MetaDome?</div>
<div class="box">
Although we recommend using a laptop/desktop with a compatible
browser for the best user experience, we designed the user interface
to be useable for mobile devices as well. If you encounter any problems or
see any possible improvements please
<a href="{{ url_for('web.contact') }}">contact us</a>.
</div>

<div class="label">What desktop browsers are compatible for MetaDome?</div>
<div class="box">
<p>
The MetaDome web server is developed and extensively tested using
<a href="https://www.google.com/chrome/">Google Chrome</a> and
<a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>. We
recommend using one of these browsers to access all functionality.
Here is a list of compatible and tested browsers:
</p>
<table class="table">
<thead>
<tr>
<th><abbr title="OS">OS</abbr></th>
<th><abbr title="Version">Version</abbr></th>
<th><abbr title="Chrome">Chrome</abbr></th>
<th><abbr title="Firefox">Firefox</abbr></th>
<th><abbr title="Microsoft Edge">Microsoft Edge</abbr></th>
<th><abbr title="Microsoft IE">Microsoft IE</abbr></th>
<th><abbr title="Safari">Safari</abbr></th>
</tr>
</thead>
<tbody>
<tr>
<th>Linux</th>
<td>Ubuntu 16.04 and 18.04</td>
<td>70.0</td>
<td>63.0</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
</tr>
<tr>
<th>MacOS</th>
<td>Mojave</td>
<td>70.0</td>
<td>63.0</td>
<td>n/a</td>
<td>n/a</td>
<td>Not supported</td>
</tr>
<tr>
<th>Windows</th>
<td>7 and 10</td>
<td>70.0</td>
<td>63.0</td>
<td>Not tested</td>
<td>Not supported</td>
<td>n/a</td>
</tr>
</tbody>
</table>
</div>

<div class="label">I have ran into a problem with MetaDome, what can I do?</div>
<div class="box">
Although we have extensively tested MetaDome and are constantly monitoring
the server for any downtime. If you do encounter problems or behaviour you
did not expect. We would highly appreciate it if you could
<a href="{{ url_for('web.contact') }}">contact us</a>.
</div>

<div class="label">On what data are the results in MetaDome based?</div>
<div class="box">
MetaDome combines data from various public resources. The underlying data
of MetaDome currently contains information from 56,319 human transcripts
(<a href="https://www.gencodegenes.org/" target="_blank">GENCODE</a>),
71,419 <a href="https://pfam.xfam.org/" target="_blank">Pfam</a>
protein domain instances, 12,164,292 population-based genetic variants from
<a href="http://gnomad.broadinstitute.org/">gnomAD</a>, and 34,076 pathogenic mutations from
<a href="https://www.ncbi.nlm.nih.gov/clinvar/" target="_blank">ClinVar</a>.
</div>

<div class="label">How often is the underlying data updated?</div>
<div class="box">
Currently MetaDome requires a manual reannotation of the underlying data.
In a future version of MetaDome is expected to schedule automatic downloading
of new data releases and automatic reannotation.
</div>


<div class="label">Is MetaDome still under construction?</div>
<div class="box">
MetaDome is final for its first release version. But we are still actively
attempting to improve MetaDome based on feedback. If you have any improvement
ideas, please <a href="{{ url_for('web.contact') }}">contact us</a>.
Current improvements that we are working on may be found
<a href="https://github.com/cmbi/metadome/issues">here</a>.
</div>

<div class="label">Why can I not select my gene / transcript for analysis?</div>
<div class="box">
For sake of high data quality we have limited the possible transcripts and genes
suitable for a MetaDome Analysis to the <a href="https://www.gencodegenes.org/" target="_blank">GENCODE</a>
Basic transcripts of which the translation is identically matched with a
<a href="http://www.uniprot.org/" target="_blank">SwissProt</a> protein
sequence. All GENCODE Basic transcripts are validated to be expressed as mRNA
and all SwissProt proteins are curated by experts.
</div>

<div class="label">I cannot find the domain that should be in my gene of interest?</div>
<div class="box">
All annotated protein domains in MetaDome result from
<a href="https://pfam.xfam.org/" target="_blank">Pfam</a>.
Pfam holds a strict notion on what a protein domain is and differs to
other protein domain annotation services. We have specifically chose Pfam,
as the underlying method is suitable to indicate homologously identical
positions across protein domains that can directly be used to transfer variant
information.
</div>

</div>

<h3 class="title" style="color: #00AFDC;">Interpretation of a MetaDome analysis</h3>
<div class="box">
<div class="label">Why are there black boxes in the meta-domain landscape?</div>
<div class="box">
The black boxes represent positions that cannot be aligned to the Pfam
domain consensus. For these positions we
cannot transfer variant information across homologous domains.
</div>

<div class="label">How is the tolerance landscape computed?</div>
<div class="box">
The tolerance is computed as a from missense over synonymous
variant count ratio, which is calculated in a sliding window manner to
provide a per-position indication of regional tolerance to missense variation.
The variants are based on gnomAD and corrected for codon composition.
For more information we suggest reading
<a href="{{ url_for('web.method') }}#tolerance_computation">"Computing genetic
tolerance and generating a tolerance landscape"</a>.
</div>

<div class="label">What do the tolerance landscape' colours indicate?</div>
<div class="box">
The colours are based on missense over synonymous ratio computations
over the entire protein for all proteins. Here the Yellow (or neutral)
is based on the average missense over synonymous ratio score that you
would obtain this way and the red (intolerant) and blue (tolerant) are
based on the top/bottom scores.
</div>

<div class="label">For meta-domain information in the positional information, what does the alignment coverage mean?</div>
<div class="box">
This corresponds to how many homologous positions are aligned to that
specific position. In general we would advise to maintain a minimum of
80% alignment coverage for high quality results.
</div>
</div>
</div>
</section>
</div>
</section>

{% endblock %} {% block js %} {% endblock %}
2 changes: 1 addition & 1 deletion metadome/presentation/web/templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h1 class="title" style="color: #00AFDC;">Welcome to MetaDome</h1>
<p>
Input your gene name and pick your transcript and MetaDome will collect and
combine available information to produce a tolerance landscape, annotate
<a href="https://pfam.xfam.org/" target="_blank">PFAM</a> domains and
<a href="https://pfam.xfam.org/" target="_blank">Pfam</a> domains and
pathogenic <a href="https://www.ncbi.nlm.nih.gov/clinvar/" target="_blank">
ClinVar</a> variants, and provide meta-domain variant annotation.
Complete with results, ability to edit and download all the information.
Expand Down
5 changes: 3 additions & 2 deletions metadome/presentation/web/templates/method.html
Original file line number Diff line number Diff line change
Expand Up @@ -112,14 +112,15 @@ <h1 class="title" style="color: #00AFDC;">Composing a meta-domain</h1>
</p>

<h1 class="title" style="color: #00AFDC;">Computing genetic tolerance and generating a tolerance landscape</h1>
<a name="tolerance_computation"></a>

<p>
We use the non-synonymous over synonymous ratio to quantify genetic tolerance in our Tolerance Landscape
visualization. In our setting this score is based on the single nucleotide missense and synonymous
variants (SNVs) from gnomAD in a protein-coding region. This score was corrected for the sequence
composition of the protein coding region based on the total possible missense and synonymous SNVs.
The generation of a Tolerance Landscape is a result of computing this ratio as a sliding window of size 10
over the entirety of the gene’s protein.
The generation of a Tolerance Landscape is a result of computing this ratio as a sliding window of 21
residues over the entirety of the protein of interest (e.g. calculated for ten residues left and right of each residue).
</p>

</div>
Expand Down

0 comments on commit 1e83626

Please sign in to comment.