diff --git a/cistrans/templates/eQTL.html b/cistrans/templates/eQTL.html
index bb0dac31b7b5737ac372ddef4e7b21c507e2f3bc..567d15e9cb680e169f481731d425d6eeeb582f34 100644
--- a/cistrans/templates/eQTL.html
+++ b/cistrans/templates/eQTL.html
@@ -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 %}>
diff --git a/main/models.py b/main/models.py
index 9142297f6b336a96007249adcba06985efd1ba9d..ce78c211b124b61445a98e925f207528c4e375e9 100644
--- a/main/models.py
+++ b/main/models.py
@@ -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()
diff --git a/main/templates/FAQ.html b/main/templates/FAQ.html
index 32914fe4ef7eca195e47ad05f6d703e5bfe8e36e..4992cd26f510d566567d1b23d803fc8481448940 100644
--- a/main/templates/FAQ.html
+++ b/main/templates/FAQ.html
@@ -1 +1,8 @@
-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
diff --git a/main/templates/about.html b/main/templates/about.html
index effca1da32e44fabfc5731eee81f862c5fa4f9b2..d9b1a2c18eef872e57523babd94a8e17f8f39550 100644
--- a/main/templates/about.html
+++ b/main/templates/about.html
@@ -1,4 +1,15 @@
-<p>Arabidopsis eQTL resource
-<p>Created by Harm Nijveen & 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 & 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>
diff --git a/main/templates/index.html b/main/templates/index.html
index f88fd022610c8be74df90028aa28920fe7851d8d..f720eb7b88af5880ea48b1ef180f1eb9df830cdb 100644
--- a/main/templates/index.html
+++ b/main/templates/index.html
@@ -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 %}
diff --git a/main/templates/manual.html b/main/templates/manual.html
index 0c64ced0fa9cdd01aca51b356bd587597c50f4dc..541e6be46bc6fd751d5221bf4dfe7c1a0635ec49 100644
--- a/main/templates/manual.html
+++ b/main/templates/manual.html
@@ -1 +1,31 @@
-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
diff --git a/multiplot/templates/multiplot.html b/multiplot/templates/multiplot.html
index a729fcaa67b50328fff14ea64e7099307e598804..04dfdf1f796ba48dce0cc5fdbd98ece1ae79a860 100644
--- a/multiplot/templates/multiplot.html
+++ b/multiplot/templates/multiplot.html
@@ -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 %}>
diff --git a/static/css/main.css b/static/css/main.css
index 7b4d26966be5dd1e18ea7661b36a98807e9a4e75..3229fbdafa7ee6eaae679d6f7705235629ab2a88 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -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