Commit 5010bbec authored by Jeroen Laros's avatar Jeroen Laros Committed by Vermaat
Browse files

New website layout by Landscape

parent b7c8fddd
......@@ -51,40 +51,91 @@ please mention
</p>
<p>
Project development is sponsored by
<a href="http://www.gen2phen.org" target="_blank">
<img src="{{ url_for('static', filename='images/gen_2_phen_logo_print.png') }}"
width="110"
height="50"
align="middle"
border="0"
alt="Eurogentest"></a>
and
<a href="http://www.nbic.nl" target="_blank">
<img src="{{ url_for('static', filename='images/nbic_logo.png') }}"
width="229"
height="50"
align="middle"
border="0"
alt="NBIC"></a>
and has been supported by
<a href="http://www.eurogentest.org" target="_blank">
<img src="{{ url_for('static', filename='images/Eurogentest.png') }}"
width="110"
height="50"
align="middle"
border="0"
alt="Eurogentest"></a>
and
<a href="http://www.commit-nl.nl/" target="_blank">
<img src="{{ url_for('static', filename='images/commit_logo.png') }}"
width="122"
height="50"
align="middle"
border="0"
alt="Dutch national program COMMIT"></a>
Sponsors:
</p>
<p>
We would like to thank the following organisations for their contribution to
the development of Mutalyzer.
</p>
<table cellspacing="10" class="table">
<tr>
<td>
<a href="http://www.gen2phen.org" target="_blank">
<img src="{{ url_for('static', filename='images/gen_2_phen_logo_print.png') }}"
width="110"
height="50"
align="middle"
border="0"
alt="Gen2Phen"
title="Gen2Phen"></a>
</td>
<td>
<a href="http://www.gen2phen.org">Gen2Phen project</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.nbic.nl" target="_blank">
<img src="{{ url_for('static', filename='images/nbic_logo.png') }}"
width="229"
height="50"
align="middle"
border="0"
alt="NBIC"
title="NBIC"></a>
</td>
<td>
<a href="http://www.nbic.nl">Netherlands Bioinformatics Centre</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.eurogentest.org" target="_blank">
<img src="{{ url_for('static', filename='images/Eurogentest.png') }}"
width="110"
height="50"
align="middle"
border="0"
alt="Eurogentest"
title="Eurogentest"></a>
</td>
<td>
<a href="http://www.eurogentest.org">EuroGentest</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.commit-nl.nl" target="_blank">
<img src="{{ url_for('static', filename='images/commit_logo.png') }}"
width="122"
height="50"
align="middle"
border="0"
alt="Dutch national program COMMIT"
title="Dutch national program COMMIT"></a>
</td>
<td>
<a href="http://www.commit-nl.nl">Dutch national program COMMIT</a>
</td>
</tr>
<tr>
<td>
<a href="http://wearelandscape.nl" target="_blank">
<img src="{{ url_for('static', filename='images/landscape_logo.png') }}"
height="50"
align="middle"
border="0"
alt="Landscape - Increasing Data Impact"
title="Landscape - Increasing Data Impact"></a>
</td>
<td>
<a href="http://wearelandscape.nl">Landscape - Increasing Data Impact</a>
</td>
</tr>
</table>
<p>
Some icons are copyright &copy;
<a href="http://p.yusukekamiyamane.com/">Yusuke Kamiyamane</a>.
......
This diff is collapsed.
......@@ -10,98 +10,101 @@
{% block content %}
<p>
<a href="#" onclick="toggle_visibility('help');">Toggle File Format Help</a>
</p>
<form action="{{ url_for('.batch_jobs_submit') }}" method="post" enctype="multipart/form-data">
<!-- BatchType -->
<div class="form-group">
<label>Batch job type</label>
<div class="radio">
<label><input onchange="return changeBatch(this);" type="radio" name="job_type" value="name-checker"{% if job_type == "name-checker" %} checked{% endif %} />Name Checker</label>
</div>
<div class="radio">
<label><input onchange="return changeBatch(this);" type="radio" name="job_type" value="syntax-checker"{% if job_type == "syntax-checker" %} checked{% endif %} />Syntax Checker</label>
</div>
<div class="radio">
<label><input onchange="return changeBatch(this);" type="radio" name="job_type" value="position-converter"{% if job_type == "position-converter" %} checked{% endif %} />Position Converter</label>
</div>
<div class="radio">
<label><input onchange="return changeBatch(this);" type="radio" name="job_type" value="snp-converter"{% if job_type == "snp-converter" %} checked{% endif %} />SNP Converter</label>
</div>
<div id="assembly_name_or_alias" style="display:none" class="form-group">
<label>Assembly</label>
<select name="assembly_name_or_alias" class="form-control">
{% for assembly in assemblies %}
<option value="{{ assembly.name }}"{% if assembly_name_or_alias in (assembly.name, assembly.alias) %} selected="selected"{% endif %}>{{ assembly.taxonomy_common_name }} &mdash; {{ assembly.name }}{% if assembly.alias %} ({{ assembly.alias }}){% endif %}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input name="email" type="email" class="form-control" placeholder="Email address" required value="{{ email }}">
</div>
<div class="form-group">
<label for="file">File</label>
<input type="file" name="file">
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
<a href="https://humgenprojects.lumc.nl/trac/mutalyzer/wiki/BatchCheckers" target="new" class="btn btn-default pull-right">Help</a>
<a href="#" onclick="toggle_visibility('help');" class="btn btn-default pull-right">File format help <span class="caret"></span></a>
</div>
</form>
<div id='help' style="display:none">
<p>The mutalyzer batch checker accepts the following file formats:
<h3>Help</h3>
<p>The mutalyzer batch checker accepts the following file formats:</p>
<ul>
<li>Tab delimited text file / CSV file</li>
<li>Microsoft Excel file</li>
<li>OpenOffice ODS file</li>
</ul>
<p>
The maximum file size is {{ max_file_size }} megabytes, and the maximum
length per entry (variant description) is 200 characters.
</p>
<h5>We accept two types of input files, you can download examples below</h5>
<h5>New Style <a href="{{ url_for('.downloads', filename='batchtestnew.txt') }}">Download Example File</a></h5>
<div style="padding-left:20px; width:400px">
<p>This file format has no header-row. Each row consists of one or
more tab delimited fields, where every field contains a single
variant description (or dbSNP rs number in case of the SNP Converter).
Note that all rows must have the same number of fields.</p>
<table>
<tr><td>AB026906.1:c.274G&gt;T</td></tr>
<tr><td>AL449423.14(CDKN2A_v002):c.5_400del</td></tr>
</table>
</div>
<h5>Old Style:
<a href="{{ url_for('.downloads', filename='batchtestold.txt') }}">Download Example File</a></h5>
<div style="padding-left:20px; width:400px">
We accept two types of input files, you can download examples below.
<h4>New Style</h4>
<p>This file format has no header-row. Each row consists of one or more tab delimited fields, where every field contains a single variant description (or dbSNP rs number in case of the SNP Converter). Note that all rows must have the same number of fields.</p>
<table class="table">
<tr><td>AB026906.1:c.274G&gt;T</td></tr>
<tr><td>AL449423.14(CDKN2A_v002):c.5_400del</td></tr>
</table>
<a href="{{ url_for('.downloads', filename='batchtestnew.txt') }}">Download new style example file</a>
<h4>Old Style</h4>
<p >This file format has a header-row, which consists of
three tab delimited fields. In each following row the
corressponding data is also tab delimited.</p>
<table>
<tr>
<td>AccNo</td><td>Genesymbol</td><td>Mutation</td>
</tr>
<table class="table">
<thead>
<th>AccNo</th>
<th>Genesymbol</th>
<th>Mutation</th>
</thead>
<tr>
<td>AB026906.1</td><td>SDHD</td><td>g.7872G>T</td>
</tr>
</table>
</div>
<h5>Output Format</h5>
<div style="padding-left:20px; width:400px">
<p>The output of a Mutalyzer Batch run is a tab delimited CSV file,
<a href="{{ url_for('.downloads', filename='batchtestold.txt') }}">Download old style example file</a>
<h4>Output Format</h4>
<p>
The output of a Mutalyzer Batch run is a tab delimited CSV file,
which has a header-row to clarify the results. We recommend opening
the file in a spreadsheet program, such as OpenOffice Calc or
Microsoft Excel.<BR />
Note that empty lines are removed from the batch input file.</p>
</div>
Note that empty lines are removed from the batch input file.
</p>
</div>
<table id="inputform">
<form action="{{ url_for('.batch_jobs_submit') }}" method="post" enctype="multipart/form-data">
<tr id="batchRow">
<td><b>BatchType</b></td>
<td>
<select id="job_type" name="job_type" onchange="return changeBatch(this)">
<option value="name-checker"{% if job_type == "name-checker" %} selected="selected"{% endif %}>Name Checker</option>
<option value="syntax-checker"{% if job_type == "syntax-checker" %} selected="selected"{% endif %}>Syntax Checker</option>
<option value="position-converter"{% if job_type == "position-converter" %} selected="selected"{% endif %}>Position Converter</option>
<option value="snp-converter"{% if job_type == "snp-converter" %} selected="selected"{% endif %}>SNP Converter</option>
</select>
</td>
</tr>
<tr>
<tr id="assembly_name_or_alias" style="display:none">
<td><b>Assembly</b></td>
<td>
<select name="assembly_name_or_alias">
{% for assembly in assemblies %}
<option value="{{ assembly.name }}"{% if assembly_name_or_alias in (assembly.name, assembly.alias) %} selected="selected"{% endif %}>{{ assembly.taxonomy_common_name }} &mdash; {{ assembly.name }}{% if assembly.alias %} ({{ assembly.alias }}){% endif %}</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<td><b>Email</b></td>
<td><input type="text" name="email" value="{{ email }}" style="width:200px"></td>
</tr>
<tr>
<td><b>File</b></td>
<td><input type="file" name="file" style="width:200px"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit">
<a href="https://humgenprojects.lumc.nl/trac/mutalyzer/wiki/BatchCheckers">Help</a>
</td>
</tr>
</form>
</table>
<script language="javascript">
oldload = window.onload
initpage = function() {
......@@ -113,15 +116,16 @@ window.onload = initpage;
</script>
{% if errors %}
<p>
<b>Errors:</b>
</p>
<div class="messages">
<div class="alert alert-danger">
<h4>Batch not started</h4>
<p>The batch process was not started due to the following errors:</p>
<ul>
{% for m in errors %}
<p class="{{ m.class }}" title="{{ m.level }} (origin: {{ m.origin
}})">{{ m.description }}</p>
<li class="{{ m.class }}" title="{{ m.level }} (origin: {{ m.origin
}})">{{ m.description }}</li>
{% endfor %}
</div>
</ul>
</div>
{% endif %}
{% if messages %}
......
......@@ -10,85 +10,88 @@
</p>
<p>
Extract the HGVS variant description from a reference sequence and an
observed sequence. For now, we require the user to fill in two
sequences. After the testing phase, we plan to use the underlying
algorithm for:
Extract the HGVS variant description from a reference sequence and an observed sequence. For now, we require the user to fill in two sequences. After the testing phase, we plan to use the underlying algorithm for:
</p>
<ul>
<li>
Disambiguation in the name checker. This will enable full support
for complex variants.
Disambiguation in the name checker. This will enable full support for complex variants.
</li>
<li>
Comparison of two reference sequences. Useful for migrating a
variant description to an other reference sequence.
Comparison of two reference sequences. Useful for migrating a variant description to an other reference sequence.
</li>
<li>
Implementation of a Reference Sequence Editor.
</li>
</ul>
<div style="border: 1px solid grey; background-color: aliceblue; padding: 20px;">
<form action="{{ url_for('.description_extractor') }}" method="get">
Please supply a reference sequence and an observed sequence.<br>
<br>
<div style="border: 1px solid grey; padding: 20px">
<b>Reference sequence:</b><br>
<br>
Example: <tt>ATGATGATCAGATACAGTGTGATACAGGTAGTTAGACAA</tt><br>
<br>
<input type="text" name="reference_sequence" value="{{ reference_sequence }}" style="width:100%"><br>
<input type="button" value="Clear field" onclick="clearField(this.form, 'reference_sequence');">
</div>
<br>
<div style="border: 1px solid grey; padding: 20px">
<b>Observed sequence:</b><br>
<br>
Example: <tt>ATGATTTGATCAGATACATGTGATACCGGTAGTTAGGACAA</tt><br>
<br>
<input type="text" name="variant_sequence" value="{{ variant_sequence }}" style="width:100%"><br>
<input type="button" value="Clear field" onclick="clearField(this.form, 'variant_sequence');">
</div>
<br>
<input type="submit" value="Submit">
<a href="https://humgenprojects.lumc.nl/trac/mutalyzer/wiki/DescriptionExtractor">Help</a>
</form>
</div>
<p>
Please supply a reference sequence and an observed sequence.
</p>
<form action="{{ url_for('.description_extractor') }}" method="get" class="form">
<div class="form-group">
<h3>Reference sequence</h3>
<p>Example: <code class="example-input">ATGATTTGATCAGATACATGTGATACCGGTAGTTAGGACAA</code></p>
<input type="text" name="reference_sequence" value="{{ reference_sequence }}" class="form-control form-pre example-target" placeholder="Reference sequence">
<!-- <input type="button" value="Clear field" onclick="clearField(this.form, 'reference_sequence');" class="btn"> -->
</div>
<div class="form-group">
<h3>Observed sequence</h3>
<p>Example: <code class="example-input-2">ATGATTTGATCAGATACATGTGATACCGGTAGTTAGGACAA</code></p>
<input type="text" name="variant_sequence" value="{{ variant_sequence }}" class="form-control form-pre example-target-2" placeholder="Observed sequence">
<!-- <input type="button" value="Clear field" onclick="clearField(this.form, 'variant_sequence');" class="btn"> -->
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default pull-right" value="Undo">
<a href="https://humgenprojects.lumc.nl/trac/mutalyzer/wiki/DescriptionExtractor" target="new" class="btn btn-default pull-right">Help</a>
</div>
</form>
{% if description %}
<h3>Variant Description Extractor results:</h3>
<div class="messages">
{% for m in messages %}
<p class="{{ m.class }}" title="{{ m.level }} (origin: {{ m.origin }})">{{ m.description }}</p>
{% endfor %}
<p>{{ summary }}</p>
</div>
<table class="table">
{% for m in messages %}
{% if m.class == "error" %}
<tr><td class="alert alert-danger" title="{{ m.level }} (origin: {{ m.origin }})">{{ m.description }}</td></tr>
{% elif m.class == "warning" %}
<tr><td class="warning" title="{{ m.level }} (origin: {{ m.origin }})">{{ m.description }}</td></tr>
{% endif %}
{% endfor %}
{% if summary == "0 Errors, 0 Warnings."%}
<tr><td class="success summary">{{ summary }}</td>
{% endif %}
</table>
{% if not errors %}
<p>
<b>Genomic description:</b>
</p>
<p>
<tt>g.{{ description }}</tt>
<pre>g.{{ description }}</pre>
</p>
<p>
<b>Overview of the raw variants:</b>
</p>
<table class="laTable">
<tr>
<td>Start</td>
<td>End</td>
<td>Type</td>
<td>Deleted</td>
<td>Inserted</td>
<td>Shift</td>
<td>Description</td>
</tr>
<table class="table">
<thead><tr>
<th>Start</th>
<th>End</th>
<th>Type</th>
<th>Deleted</th>
<th>Inserted</th>
<th>Shift</th>
<th>Description</th>
</tr></thead>
{% for raw_var in raw_vars %}
<tr>
<tbody>
<tr>
<td>{{ raw_var.start }}</td>
<td>{{ raw_var.end }}</td>
<td>{{ raw_var.type }}</td>
......@@ -97,6 +100,7 @@ algorithm for:
<td>{{ raw_var.shift }}</td>
<td>{{ raw_var.hgvs }}</td>
</tr>
</tbody>
{% endfor %}
</table>
{% endif %}
......
......@@ -16,61 +16,130 @@ nomenclature according to the
Different interfaces are provided to collect the information necessary
for the checks:
</p>
<div class="row">
<div class="col-md-12">
<div class="thumbnail thumb-home thumb-large">
<div class="caption">
<h3>Name Checker</h3>
<p>The Name Checker takes the complete sequence variant description as input and checks whether it is correct.</p>
<p>Example: <code class="example-input">AB026906.1:c.274G&gt;T</code></p>
<!-- <a href="{{ url_for('.name_checker') }}" class="btn btn-default btn-small btn-primary">Try
this</a> -->
<form class="form" action="{{ url_for('.name_checker') }}" method="get">
<div class="input-group">
<input class="form-control form-control-small form-pre example-target" type="text" name="description" value="{{ description }}" placeholder="Mutation name using HGVS format">
<span class="input-group-btn">
<input type="submit" class="btn btn-primary pull-right" value="Try the Name Checker">
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-1">
<div class="caption">
<h3>Syntax Checker</h3>
<p>The Syntax Checker takes the complete sequence variant description as input and checks whether the syntax is correct.</p>
<a href="{{ url_for('.syntax_checker') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-2">
<div class="caption">
<h3>Position Converter</h3>
<p>The Position Converter can convert chromosomal positions to transcript orientated positions and vice versa.</p>
<a href="{{ url_for('.position_converter') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-3">
<div class="caption">
<h3>SNP Converter</h3>
<p>The SNP Converter allows you to convert a dbSNP rsId to HGVS notation.</p>
<a href="{{ url_for('.snp_converter') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-4">
<div class="caption">
<h3>Name Generator</h3>
<p>The Name Generator is a user friendly interface that helps to make a valid HGVS variant description.</p>
<a href="{{ url_for('.name_generator') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-5">
<div class="caption">
<h3>Description Extractor</h3>
<p>The Description Extractor allows you to generate the HGVS variant description from a reference sequence and an observed sequence.</p>
<a href="{{ url_for('.description_extractor') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-6">
<div class="caption">
<h3>Reference File Loader</h3>
<p>The Reference File Loader allows you to load and use your own reference sequence.</p>
<a href="{{ url_for('.reference_loader') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-7">
<div class="caption">
<h3>Batch Checkers</h3>
<p>The Batch Checkers are interfaces that accept a list of inputs. These interfaces can be used for large quantities of checks is correct.</p>
<a href="{{ url_for('.batch_jobs') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-8">
<div class="caption">
<h3>Web services</h3>
<p>The Web services page provides instructions for the web services.</p>
<a href="{{ url_for('.webservices') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
</div>
</div>
</div>
</div>
<!--
<ul>
<li>
The <a href="{{ url_for('.name_checker') }}">Name Checker</a> takes the complete sequence
variant description as input and checks whether it is correct.
</li>
<li>
The <a href="{{ url_for('.syntax_checker') }}">Syntax Checker</a> takes the complete
sequence variant description as input and checks whether the syntax
is correct.
</li>
<li>
The <a href="{{ url_for('.position_converter') }}">Position Converter</a> can convert
chromosomal positions to transcript orientated positions and vice
versa.
</li>
<li>
The <a href="{{ url_for('.snp_converter') }}">SNP converter</a> allows you to convert a
dbSNP rsId to HGVS notation.
</li>
<li>
The <a href="{{ url_for('.name_generator') }}">Name Generator</a> is a user friendly
interface that helps to make a valid HGVS variant description.
</li>