Commit 253ff6cc authored by Nijveen, Harm's avatar Nijveen, Harm
Browse files

Added user help texts and various interface changes

parent 4e823dd1
......@@ -14,7 +14,7 @@
<div class="container-fluid">
<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 class="navbar-brand" href="/AraQTL" id="home_button">AraQTL</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Select an experiment">Experiment
<span class="caret"></span></a>
......@@ -61,16 +61,21 @@
<div id="explaintext">
<a href="#explain" class="explainlink">?</a>
<div id="explain" class="helptext">
A <i>cis</i>/<i>trans</i>-plot shows eQTLs with a certain LOD score on the X-axis for genes on the Y-axis.
On the diagonal are the so called <i>cis</i> eQTLs that map to the gene&apos;s own location.
By clicking on an eQTL, the eQTL profile of the corresponding gene is shows in the panel on the right.
Below the <i>cis</i>/<i>trans</i>-plot is a histogram of the number of eQTL peaks per marker.
A cis-trans plot shows eQTLs with a certain LOD score on the X-axis for genes on the Y-axis.
<br><br>
Blue dots indicate peaks with a positive LOD score, red dots indicate peaks with a negative LOD score.
<br><br>
By clicking on an eQTL, the eQTL profile of the corresponding gene is shown in the panel on the right.
<br><br>
On the diagonal are the so called &quot;<i>cis</i> eQTLs&quot; that map to the gene&apos;s own location.
<br><br>
Below the cis-trans plot is a histogram of the number of eQTL peaks per marker.
Clicking on a bar brings up the eQTL profiles for all genes with an eQTL at that location.
<br><br>
You can use the search box at the top to search for a specific AGI ID in the plot.
</div>
</div>
<div id="loading"></div>
<div id = "container">
<div id ="cistrans"></div>
<script type="text/javascript">
......@@ -106,7 +111,7 @@
right = [560,1100, 560, 1099];
top = [41,41,570, 300];
bottom = [540,241,670, 470];
h = [499,200,100,170];
h = [499,200,100,200];
w = [500,450,500,449];
//NUMBER FORMATING//////////////////
......@@ -272,7 +277,19 @@
}).attr("y", bottom[1] + pad.bottom * 0.3).attr("fill", labelcolor);
//################################### END #######################################
axislabels.append("text").text("Cis-trans plot")
.attr("x", (left[0] + right[0]) / 2)
.attr("y", top[1] - pad.bottom * 0.75)
.attr("fill", titlecolor)
.attr("text-anchor", "middle")
.attr("font-weight","bold");
axislabels.append("text").text("click on a dot to see the corresponding eQTL pattern")
.attr("x", (left[0] + right[0]) / 2).attr("y", top[1] - pad.bottom * 0.25)
.attr("fill", titlecolor)
.attr("text-anchor", "middle")
.attr("font-style", "italic");
//################################### X axis label text #######################################
//############################### add x-axis name upper left ##################################
axislabels.append("text").text("Marker position").attr("x", (left[0] + right[0]) / 2).attr("y", bottom[2] + pad.bottom * 0.75).attr("fill", titlecolor).attr("text-anchor", "middle");
......@@ -554,6 +571,12 @@
.attr("fill", titlecolor);
iLine++;
experimentinfo.append("text").text("LOD score threshold: {{ current_experiment.lodthld }}").attr("x", left[3]+10)
.attr("y", top[3] + 10 + 30*iLine)
.style("text-anchor", "start")
.attr("fill", titlecolor);
iLine++;
svg.call(eqtltip);
peaks = svg.append("g").attr("id", "peaks").selectAll("empty").data(data.peaks).enter().append("circle").attr("class", function(d) {
return "probe_" + d.spot; //d--->data(data.peaks) iteration of all object in peaks.
......@@ -599,6 +622,9 @@
{% endif %}
<script>
$('select#experiment_selector').change(function() {
loadingDIV = document.createElement('div');
loadingDIV.id = "loading";
document.body.appendChild(loadingDIV);
$('form#top_form').submit();
});
......
......@@ -32,7 +32,11 @@ def selectMarker(request):
if request.method == 'GET':
if request.GET.get('experiment_name') and request.GET.get('query'):
exp_name = request.GET.get('experiment_name')
query = request.GET.get('query')
query = request.GET.get('query').strip()
if not query:
return render_to_response('peakmarker.html', {'experiments': experiments})
lodthld = Experiment.objects.get(experiment_name=exp_name).lodthld
if request.GET.get('thld'):
......
......@@ -16,7 +16,7 @@
<div class="container-fluid">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-pills">
<li><a class="navbar-brand" href="/AraQTL">AraQTL<br>Home</a></li>
<li><a class="navbar-brand" href="/AraQTL" id="home_button">AraQTL</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Select an experiment">Experiment
<span class="caret"></span></a>
......@@ -95,7 +95,12 @@ genes.push({ "gene": "{{ gene.gene_id }}",
{% for gene in gene_list %}
<tr>
<td><input type="checkbox" name="gene_checkbox" value="{{ forloop.counter0 }}"{% if forloop.counter < 16 %} checked{% endif %}></td>
<td><A href="/AraQTL/multiplot/?query={{ gene.gene_id|upper }}" TARGET="_blank">{{ gene.gene_id }}</a></td>
<td>
<A href="/AraQTL/multiplot/?query={{ gene.gene_id|upper }}" TARGET="_blank"
title="Click to show QTL profiles for this gene in all experiments" >
{{ gene.gene_id }}
</a>
</td>
<td>{{ gene.gene_name }}</td>
<td>{{ gene.correlation|floatformat:2 }}</td>
<td colspan=2 align=left>{{ gene.description }}</td></tr>
......
......@@ -36,15 +36,25 @@ def correlation(request):
exp_name = request.GET.get('experiment_name')
else:
exp_name = experiments[0].experiment_name
gene_id = request.GET.get('query')
gene_id = request.GET.get('query').strip()
if not gene_id:
return render_to_response('correlation.html', {'experiments': experiments})
geneInfoList = GeneInfo.objects.filter(gene_id = gene_id, species__species_name = species_name)
if (geneInfoList.count() == 0):
ret = suggestions.views.suggest(gene_id, exp_name, "correlation")
if ret:
return ret
else:
return main.views.no_results(gene_id, "correlation")
if geneInfoList.count() == 0:
geneInfoList = GeneInfo.objects.filter(gene_name__iexact=gene_id)
if geneInfoList.count() == 0:
geneInfoList = GeneInfo.objects.filter(description__icontains=gene_id)
if geneInfoList.count() != 1:
ret = suggestions.views.suggest(gene_id, exp_name, "correlation")
if ret:
return ret
else:
return main.views.no_results(gene_id, "correlation")
geneInfo = geneInfoList[0]
queryGene = dict()
......
......@@ -12,7 +12,7 @@
<div class="container-fluid">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-pills">
<li><a class="navbar-brand" href="/AraQTL">AraQTL<br>Home</a></li>
<li><a class="navbar-brand" href="/AraQTL" id="home_button">AraQTL</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Select an experiment">Experiment
<span class="caret"></span></a>
......@@ -42,11 +42,18 @@
</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 locus</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 onclick="location.href='/AraQTL/multiplot/?query=AT1G21230&experiment_name=all';" class="first">
<span>All eQTL patterns for a single gene</span>
</div>
<div onclick="location.href='/AraQTL/cistrans/?experiment_name=Joosen_etal_2012';" class="second">
<span>Cis-trans plot per experiment</span>
</div>
<div onclick="location.href='/AraQTL/coregulation/?query=MSAT321&experiment_name=Joosen_etal_2012';" class="third">
<span>Genes peaking at a locus</span>
</div>
<div onclick="location.href='/AraQTL/correlation/?query=AT1G35614&corrthld=0.9&experiment_name=Joosen_etal_2012';" class="fourth">
<span>Correlated QTL patterns</span>
</div>
</div>
<div class="container">
<div id="queryBox">
......@@ -62,8 +69,7 @@
{% elif mode == "FAQ" %}
{% include "FAQ.html" %}
{% else %}
<h1>AraQTL</h1>
<form method="get"
<form method="get" id="queryform"
{% if mode == 'correlation' %}
action="/AraQTL/correlation/"
{% elif mode == 'coregulation' %}
......@@ -80,7 +86,7 @@
<textarea rows=3 cols=30 id="queryArea" name="query" title="Type your query"></textarea>
{% endif %}
<br>
<input type="submit" id="multiplot_submit" value="Query"/>
<input type="submit" id="multiplot_submit" value="Search"/>
<br>
<table id="table">
<thead>
......@@ -93,20 +99,28 @@
</tr>
</thead>
<tbody>
{% if mode == "multiplot" %}
<tr><td><input type="radio" name="experiment_name" value="all" checked></td><td colspan="5" align="left">
All (only for single genes)
</td></tr>
{% endif %}
{% for experiment in experiments %}
<tr>
<td>
<input type="radio"
name="experiment_name"
value="{{ experiment.experiment_name }}"
{% if forloop.counter == 1 %}checked{% endif %}
{% if mode != "multiplot" and forloop.counter == 1%}
checked
{% endif %}
>
</td>
<td><a href="/AraQTL/cistrans/?experiment_name={{ experiment.experiment_name }}">
<td><a href="/AraQTL/cistrans/?experiment_name={{ experiment.experiment_name }}"
title="Click for experiment overview with cis-trans plot">
{{ experiment.experiment_name }}
</a>
</td>
<td>{{ experiment.parental_strain }}</td>
<td>{{ experiment.parental_strain.split|join:"&nbsp;" }}</td>
<td>{{ experiment.plant_parts }}</td>
<td align="left">
<a href="http://www.ncbi.nlm.nih.gov/pubmed/{{ experiment.pubmed }}"
......@@ -119,29 +133,66 @@
<td align="left">
<a href="/AraQTL/media/data/{{ experiment.experiment_name }}/lod.txt"
target="_blank"
title="right click to save as..."
>
lod.txt
LOD&nbsp;scores
</a>
</td>
</tr>
{% endfor %}
{% if mode == "multiplot" %}
<tr><td><input type="radio" name="experiment_name" value="all"></td><td colspan="5" align="left">All (only for single gene IDs)</td></tr>
{% endif %}
</tbody>
</table>
{% endif %}
</div>
<div id="helpLinks">
<a href="#helptext1" class="helplink">What is AraQTL?</a>
<div id="helptext1" class="helptext"><i>Arabidopsis</i> workbench and database for eQTL analysis</div>
<a href="#helptext1" class="helplink">Getting started</a>
<div id="helptext1" class="helptext">
To view all eQTL profiles for a certain gene, type its name or ID in the text box
and click the <b>Search</b> button.
<br><br>
To see a cis-trans plot with all eQTL peaks for a certain experiment,
click on the experiment name.
<br><br>
You can search with a keyword to find genes and gene ontology (GO) categories.
<br><br>
Select the <a id="examples_link" href="#">examples</a> menu to see some example analysis with AraQTL.
</div>
<br>
<a href="#helptext2" class="helplink">Find correlating eQTL profiles</a>
<div id="helptext2" class="helptext">
Show all genes for which the eQTL profile correlates with that of the query gene above the set cut-off,
in the selected experiment.
<br><br>
Strongly correlating eQTL profiles could indicate that the genes are regulated by the same loci.
</div>
<br>
<a href="#helptext3" class="helplink">Query per locus</a>
<div id="helptext3" class="helptext">
Show the eQTL profiles of genes with a LOD score above the threshold at the selected locus in the selected
experiment.
<br><br>
A locus can be a marker, a gene name, gene id or a genomic position (i.e. 2:11095452).
</div>
<br>
<a href="#helptext2" class="helplink">What is an eQTL?</a>
<div id="helptext2" class="helptext">An eQTL is a genetic locus that was shown to affect the expression of the current gene</div>
<a href="#helptext4" class="helplink">What is AraQTL?</a>
<div id="helptext4" class="helptext">
AraQTL is the <i>Arabidopsis</i> workbench and database for eQTL analysis.
<br><br>
It allows easy access to the data of all published
<i>Arabidopsis thaliana</i> genetical genomics experiments.
</div>
<br>
<a href="#helptext3" class="helplink">How can I find information about my gene?</a>
<div id="helptext3" class="helptext">Enter the gene ID in the search box and press enter</div>
<a href="#helptext5" class="helplink">What is an eQTL?</a>
<div id="helptext5" class="helptext">
An eQTL is a genetic locus that was shown to affect the expression of the current gene.
<br><br>
eQTLs are the result of combining genomics with genetics, in "genetical genomics"
<a href="https://www.ncbi.nlm.nih.gov/pubmed/11418218">
Jansen and Nap <i>Trends in Genetics</i> 17(7):388-91 (2001)
</a>
</div>
</div>
</div>
<script>
......@@ -169,6 +220,7 @@
{% endif %}
$('#queryArea').val(textAreaDefaultText);
$('#queryArea').prop('title',textAreaDefaultText);
$('#examples_menu').click(function() {
if($('div#examples').is(":visible")){
$('div#examples').hide();
......@@ -177,8 +229,29 @@
}
});
$('#examples_link').click(function() {
if($('div#examples').is(":visible")){
$('div#examples').hide();
} else {
$('div#examples').show();
}
});
$('div#examples').hide();
$('form#queryform').submit(function(event) {
if($('#queryArea').val() == textAreaDefaultText) {
event.preventDefault();
}
});
{% if mode == 'correlation' %}
$("div#helptext2").show();
{% elif mode == 'coregulation' %}
$("div#helptext3").show();
{% else %}
$("div#helptext1").show();
{% endif %}
$(document).ready(function(e) {
$("a.helplink").click(function(e) {
......
......@@ -16,7 +16,7 @@
<div class="container-fluid">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-pills">
<li><a class="navbar-brand" href="/AraQTL/">AraQTL<br>Home</a></li>
<li><a class="navbar-brand" href="/AraQTL/" id="home_button">AraQTL</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Select an experiment">Experiment
<span class="caret"></span></a>
......@@ -27,7 +27,11 @@
</ul>
</li>
<li>
<a title="Search for correlating profiles" href="/AraQTL/correlation/{% if experiment_name != "all" %}?query={{ gene_info_list.0.gene_id }}&experiment_name={{ experiment_name }}{% endif %}">
{% if experiment_name != "all" %}
<a title="Search for correlating profiles" href="/AraQTL/correlation/?query={{ gene_info_list.0.gene_id }}&experiment_name={{ experiment_name }}">
{% else %}
<a title="Search for correlating profiles" href="/AraQTL/correlation/?query={{ gene.gene_id }}&experiment_name={{ experiments.0.experiment_name }}">
{% endif %}
Correlation
</a>
</li>
......
......@@ -91,12 +91,21 @@ def multiexperimentplot(request):
query = urllib2.unquote(query).strip().upper()
genes = ArraySpot.objects.filter(geneinfo__gene_id=query)
if genes.count() == 0:
ret = suggestions.views.index(request)
if ret:
return ret
gi = GeneInfo.objects.filter(gene_name__iexact=query)
if gi.count() == 0:
gi = GeneInfo.objects.filter(description__icontains=query)
if gi.count() == 1:
query = gi[0].gene_id
else:
return main.views.no_results(query,"multiplot")
ret = suggestions.views.index(request)
if ret:
return ret
else:
return main.views.no_results(query,"multiplot")
experiments4gene = Experiment.objects.filter(arrayspot__spot_id=query).values_list('experiment_name', flat=True)
......
......@@ -7,6 +7,7 @@ html, body, .container
body {
padding-top: 65px;
background-color: #FEFEFE;
}
p {
......@@ -22,7 +23,6 @@ p {
float: left;
width: 100%;
height: 5%;
background-color: white;
text-align:center;
}
......@@ -36,66 +36,91 @@ p {
.first {
float: left;
width: 50%;
height: 50%;
border-radius: 20px;
border: 1px solid #73AD21;
width: 48%;
height: 48%;
background-color: white;
text-align:center;
background-image: url("/AraQTL/static/image/multiQTL.png");
background-size: 70%;
background-position: 50% 10%;
background-position: 50% 40%;
background-repeat: no-repeat;
margin: 0 0;
margin: 1% 1%;
}
.first:hover {
background-color: coral;
border-radius: 20px;
border: 2px solid #73AD21;
background-color: #73AD21;
color: white;
}
.second{
float: left;
width: 50%;
height: 50%;
border-radius: 20px;
border: 1px solid #73AD21;
width: 48%;
height: 48%;
background-color: white;
text-align:center;
background-image: url("/AraQTL/static/image/cistrans.png");
background-size: 35%;
background-position: 50% 10%;
background-position: 50% 40%;
background-repeat: no-repeat;
margin: 1% 1%;
}
.second:hover {
background-color: coral;
border-radius: 20px;
border: 2px solid #73AD21;
background-color: #73AD21;
color: white;
}
.third{
float: right;
width: 50%;
height: 50%;
border-radius: 20px;
border: 1px solid #73AD21;
width: 48%;
height: 48%;
background-color: white;
text-align:center;
background-image: url("/AraQTL/static/image/coregulation.png");
background-size: 70%;
background-position: 50% 10%;
background-position: 50% 40%;
background-repeat: no-repeat;
margin: 1% 1%;
}
.third:hover {
background-color: coral;
border-radius: 20px;
border: 2px solid #73AD21;
background-color: #73AD21;
color: white;
}
.fourth {
float: right;
width: 50%;
height: 50%;
border-radius: 20px;
border: 1px solid #73AD21;
width: 48%;
height: 48%;
background-color: white;
text-align:center;
background-image: url("/AraQTL/static/image/correlation.png");
background-size: 70%;
background-position: 50% 10%;
background-position: 50% 40%;
background-repeat: no-repeat;
margin: 1% 1%;
}
.fourth:hover {
background-color: coral;
border-radius: 20px;
border: 2px solid #73AD21;
background-color: #73AD21;
color: white;
}
......@@ -103,6 +128,13 @@ p {
width:auto;
}
#home_button {
background-color: #73AD21;
color: white;
border-radius: 100px;
border: 2px solid #73AD21;
}
#queryArea {
color:lightgrey;
width: 30%;
......@@ -121,6 +153,7 @@ p {
#helpLinks {
float: left;
background: #F8F8F8;
width: 25%;
text-align:left;
border-radius: 20px;
......@@ -140,12 +173,23 @@ a.explainlink {
color: white;
border-radius: 100px;
border: 1px solid #73AF1;
background:#FF0000;
background: #73AD21;
padding: 5px;
}
input[type="submit"] {
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}
a.helplink {
font-weight: bold;
}
div.helptext {
color: red;
color: green;
background: white;
text-align:left;
display:none;
border-radius: 20px;
......@@ -360,6 +404,7 @@ a:hover { background: #B9EEEE; }
}
#examples {
background: #F8F8F8;
display: none;
border-radius: 20px;
border: 2px solid #73AD21;
......@@ -423,6 +468,11 @@ div#loading{
animation: spin 2s linear infinite;
}
#multiplot_submit {
color: white;
background: #73AD21;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
......
......@@ -12,7 +12,7 @@
<div class="container-fluid">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-pills">
<li><a class="navbar-brand" href="/AraQTL">AraQTL</a></li>
<li><a class="navbar-brand" href="/AraQTL" id="home_button">AraQTL</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Experiment
<span class="caret"></span></a>
......
......@@ -29,8 +29,9 @@ def suggest(query, experiment_name, mode):
go_results = GO.objects.raw(
"select * from main_go WHERE MATCH (name, definition) AGAINST ('%s' IN NATURAL LANGUAGE MODE)" % query)
for GOterm in go_results:
GOterms.append(GOterm)
if experiment_name != "all":
for GOterm in go_results:
GOterms.append(GOterm)
gene_results = GeneInfo.objects.raw(
"select * from main_geneinfo WHERE MATCH (gene_name, description) AGAINST ('%s' IN NATURAL LANGUAGE MODE)" % query)
......@@ -38,7 +39,14 @@ def suggest(query, experiment_name, mode):
for gene in gene_results:
genes.append(gene)