Commit 36e055d8 authored by Nijveen, Harm's avatar Nijveen, Harm
Browse files

changes to the home page

parent 2d460417
......@@ -15,7 +15,6 @@
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-brand" href="/AraQTL">AraQTL<br>Home</a></li>
<li><a href="{% static 'about.html' %}">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Experiment
<span class="caret"></span></a>
......@@ -31,8 +30,8 @@
<input title="LOD score threshold (numeric, one decimal)" id="thld"
pattern="[0-9]+([.][0-9])?"
name="thld" type="text"
size="4" class="form-control"
value="{% if thld %}{{ thld}}{% else %}{{ lodthld }}{% endif %}">
size="3" class="form-control"
value="{% if thld %}{{ thld|floatformat:-1}}{% else %}{{ lodthld|floatformat:-1 }}{% endif %}">
<select title="Select an experiment" class="form-control" id="experiment_selector" name="experiment_name">
{% for experiment in experiments %}
<option value="{{ experiment.experiment_name }}" {% if experiment.experiment_name == experiment_name %} selected {% endif %}>
......
......@@ -39,6 +39,7 @@ class Experiment(models.Model):
type_of_array = models.CharField(max_length=50)
sample_size = models.CharField(max_length=50)
parental_strain = models.CharField(max_length=50)
plant_parts = models.CharField(max_length=100)
reference = models.CharField(max_length=200)
pubmed = models.CharField(max_length=20)
pub_date = models.DateTimeField()
......
FAQ
\ No newline at end of file
<div id="FAQ_text">
<h1>FAQ</h1>
<ul>
<li><i>How can I add studies to AraQTL?</i><br>
Send an email to araqtl@bioinformatics.nl
</li>
</ul>
</div>
\ No newline at end of file
<p>Arabidopsis eQTL resource
<p>Created by Harm Nijveen &amp; Basten Snoek
<p>Using <a href="https://github.com/kbroman/d3examples/tree/master/cistrans">cistrans</a> code by Karl Broman
<div id="about_text">
<div class="paragraph">
<h1>About</h1>
AraQTL is a web-based workbench and database for expression quantitative trait loci (eQTL) investigation.<br>
It’s aim is to support the Arabidopsis and plant genetics community to utilities eQTL data in their research.<br>
<p></p>
Created by Harm Nijveen, Jiao Long &amp; Basten Snoek<br>
<p></p>
Collaborators: Wilco Ligterink, Joost Keurentjes, Henk Hilhorst, Jan Kammenga, Dick de Ridder, Oliver Loudet, Pjotr Prins<br>
<p></p>
Using <a href="https://github.com/kbroman/d3examples/tree/master/cistrans">cistrans</a> code by Karl Broman
</div>
</div>
......@@ -36,11 +36,18 @@
<li><a href="/AraQTL/?mode=FAQ">FAQ</a></li>
</ul>
</li>
<li><a id="examples_menu" href="#">Examples</a></li>
</ul>
</div>
</div>
</nav>
<div id="examples" >
<div onclick="location.href='/AraQTL/multiplot/?query=AT1G21230&experiment_name=all';" class="first"><p>All eQTL patterns for a single
gene</p></div>
<div onclick="location.href='/AraQTL/cistrans/?experiment_name=Joosen_etal_2012';" class="second"><p>Cis-trans plot per experiment</p></div>
<div onclick="location.href='/AraQTL/coregulation/?query=MSAT321&experiment_name=Joosen_etal_2012';" class="third"><p>Genes peaking at a marker</p></div>
<div onclick="location.href='/AraQTL/correlation/?query=AT1G35614&corrthld=0.9&experiment_name=Joosen_etal_2012';" class="fourth"><p>Correlated QTL patterns</p></div>
</div>
<div class="container">
<div id="queryBox">
{% if noresults %}
......@@ -55,6 +62,7 @@
{% elif mode == "FAQ" %}
{% include "FAQ.html" %}
{% else %}
<h1>AraQTL</h1>
<form method="get"
{% if mode == 'correlation' %}
action="/AraQTL/correlation/"
......@@ -99,7 +107,7 @@
</a>
</td>
<td>{{ experiment.parental_strain }}</td>
<td></td>
<td>{{ experiment.plant_parts }}</td>
<td align="left">
<a href="http://www.ncbi.nlm.nih.gov/pubmed/{{ experiment.pubmed }}"
title="{{ experiment.reference }}"
......@@ -122,14 +130,8 @@
{% endif %}
</tbody>
</table>
</form>
{% endif %}
</div>
<div onclick="location.href='/AraQTL/multiplot/?query=AT1G21230&experiment_name=all';" class="first"><p>All eQTL patterns for a single
gene</p></div>
<div onclick="location.href='/AraQTL/cistrans/?experiment_name=Joosen_etal_2012';" class="second"><p>Cis-trans plot per experiment</p></div>
<div onclick="location.href='/AraQTL/coregulation/?query=MSAT321&experiment_name=Joosen_etal_2012';" class="third"><p>Genes peaking at a marker</p></div>
<div onclick="location.href='/AraQTL/correlation/?query=AT1G35614&corrthld=0.9&experiment_name=Joosen_etal_2012';" class="fourth"><p>Correlated QTL patterns</p></div>
</div>
<script>
var textAreaDefaultText = "Type your query, i.e. AT1G01150, or GO:0004674, or ERECTA";
......@@ -156,6 +158,15 @@
{% endif %}
$('#queryArea').val(textAreaDefaultText);
$('#examples_menu').click(function() {
if($('div#examples').is(":visible")){
$('div#examples').hide();
} else {
$('div#examples').show();
}
});
$('div#examples').hide();
</script>
{% endblock %}
Help
\ No newline at end of file
<div id="manual_text">
<div class="paragraph">
<h1>Manual</h1>
AraQTL is a web-based workbench and database for expression quantitative trait loci (eQTL) investigation.<br>
It’s aim is to support the Arabidopsis and plant genetics community to utilities eQTL data in their research.<br>
Currently it holds publicly available data of all published Arabidopsis eQTL studies. At the moment 5 genome-wide eQTL-sets can be explored and compared. This data was obtained from multiple recombinant inbred line (RIL) populations, Ler X Cvi, Bay X Sha, Cvi x Col, Bur x Col and Tsu x Kas and collected from several different stages and plant parts, like seeds, seedlings, whole rosettes or specific leaves.
</div>
<div class="paragraph">
<a href="/AraQTL/cistrans/?experiment_name=Joosen_etal_2012"><img src="/AraQTL/static/image/cistrans.png" width="350" align="right"></a>
<h3>Cis/Trans Plot</h3>
To get a genome-wide overview of the distribution of eQTL Cis/Trans Plot is most frequently used (REFs). The position of the eQTL peak is plotted on the x-axis against the position the genes for which these eQTL peak were found. We provide a default eQTL peak significance threshold per experiment at FDR of 0.05 for quick visualisation and an option to manually adjust this threshold for further exploration. The diagonal line of points show the Cis-eQTLs whereas so called hotspots or transbands can be recognized as vertical lines of points.
This Cis/Trans plot has been made interactive by being able to select different experiment by a drop-down menu. Moreover the individual peaks (points in the Cis/Trans Plot) can be clicked to show the complete eQTL profile of the selected gene/peak. Lastly, the peak frequency per marker is show in the barplot below the Cis/Trans plot. Individual bars/markers can be clicked to obtain a figure and list with genes sharing a peak on the selected marker. </p>
</div>
<div class="paragraph">
<a href="/AraQTL/multiplot/?query=AT1G21230&experiment_name=all"><img src="/AraQTL/static/image/multiQTL.png" width="350" align="right"></a>
<h3>Gene eQTL profiles</h3>
In the “Gene eQTL profiles” window gene specific eQTL patterns between experiments can be compared. In this way experiment specific and co-occurring eQTLs can be easily recognised. Genes can be search and selected by a search box. The figure is interactive as points on the profile can be clicked which opens the window showing genes with an eQTL at the clicked marker in the selected experiment.
</div>
<div class="paragraph">
<a href="/AraQTL/coregulation/?query=MSAT321&experiment_name=Joosen_etal_2012"><img src="/AraQTL/static/image/coregulation.png" width="350" align="right"></a>
<h3>Shared peaks</h3>
To find genes with an eQTL at the same marker the “Shared peaks” window can be used. The profile of the ten genes with the highest LOD score is show in the figure and a list with all genes with a peak above the threshold is place below the figure. Experiment, marker and threshold can be selected.
</div>
<div class="paragraph">
<a href="/AraQTL/correlation/?query=AT1G35614&corrthld=0.9&experiment_name=Joosen_etal_2012"><img src="/AraQTL/static/image/correlation.png" width="350" align="right"></a>
<h3>Correlated eQTL profiles</h3>
Extending from co-location of eQTL peaks the “Correlating eQTL profiles” window can be used to find genes with a correlated eQTL profile. This shows genes highly likely controlled by the loci (genetic architecture). Experiment, gene and correlation threshold can be selected. Specific peaks in the figures can be clicked to find genes sharing eQTLs at the selected marker.
</div>
</div>
\ No newline at end of file
......@@ -26,8 +26,16 @@
{% endfor %}
</ul>
</li>
<li><a href="/AraQTL/correlation/{% if experiment_name == "all" %}?gene_id={{ gene.gene_id }}{% endif %}">Correlation</a></li>
<li><a href="/AraQTL/coregulation/">Marker</a></li>
<li>
<a href="/AraQTL/correlation/{% if experiment_name == "all" %}?query={{ gene.gene_id }}{% endif %}">
Correlation
</a>
</li>
<li>
<a href="/AraQTL/coregulation/{% if experiment_name != "all" %}?query={{ gene_info_list.0.gene_id }}&experiment_name={{ experiment_name }}{% endif %}">
Marker
</a>
</li>
<form class="navbar-form navbar-left" action="" method="get" id="top_form">
<input title="Type your query here" id="query" name="query" type="text" class="form-control"
placeholder="Search..." {% if query %} value="{{ query }}" {% endif %}>
......
......@@ -36,8 +36,8 @@ p {
.first {
float: left;
width: 25%;
height: 25%;
width: 50%;
height: 50%;
background-color: white;
text-align:center;
background-image: url("/AraQTL/static/image/multiQTL.png");
......@@ -53,8 +53,8 @@ p {
.second{
float: left;
width: 25%;
height: 25%;
width: 50%;
height: 50%;
background-image: url("/AraQTL/static/image/cistrans.png");
background-size: 35%;
background-position: 50% 10%;
......@@ -68,8 +68,8 @@ p {
.third{
float: right;
width: 25%;
height: 25%;
width: 50%;
height: 50%;
background-color: white;
text-align:center;
background-image: url("/AraQTL/static/image/coregulation.png");
......@@ -84,8 +84,8 @@ p {
.fourth {
float: right;
width: 25%;
height: 25%;
width: 50%;
height: 50%;
background-color: white;
text-align:center;
background-image: url("/AraQTL/static/image/correlation.png");
......@@ -115,8 +115,8 @@ p {
text-align:center;
border-radius: 20px;
border: 2px solid #73AD21;
margin: 25px;
padding: 25px;
margin: 20px;
padding: 15px;
}
#experimentSelection {
......@@ -295,7 +295,7 @@ a:hover { background: #B9EEEE; }
#container{
width: 100%;
text-aligh:center;
text-align:center;
}
#cistrans{
......@@ -306,7 +306,7 @@ a:hover { background: #B9EEEE; }
#noresults {
display: inline-block;
text-aligh:center;
text-align:center;
color: #F00;
}
......@@ -323,6 +323,18 @@ a:hover { background: #B9EEEE; }
color: #fff;
}
#examples {
display: none;
border-radius: 20px;
border: 2px solid #73AD21;
margin: 25px;
padding: 25px;
float: right;
height: 100%;
width: 100%;
text-align:center;
}
#task p{
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
font-size: 12px;
......@@ -339,3 +351,23 @@ h2{
width:auto;
}
div#about_text {
text-align:left;
}
div#manual_text {
text-align:left;
}
div#FAQ_text {
text-align:left;
}
div.paragraph {
display: inline-block;
border-radius: 20px;
border: 1px solid #73AD21;
margin: 5px;
padding: 5px;
width: 100%;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment