Commit 4e823dd1 authored by Nijveen, Harm's avatar Nijveen, Harm
Browse files

Small changes to the interface, new option to download all AGIs

parent 7903ae3b
......@@ -16,7 +16,7 @@
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-brand" href="/AraQTL">AraQTL<br>Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Experiment
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Select an experiment">Experiment
<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
{% for experiment in experiments %}
......@@ -24,11 +24,11 @@
{% endfor %}
</ul>
</li>
<li><a href="/AraQTL/?mode=correlation">Correlation</a></li>
<li><a href="/AraQTL/?mode=coregulation">Marker</a></li>
<li><a href="/AraQTL/?mode=correlation" title="Search for correlating profiles">Correlation</a></li>
<li><a href="/AraQTL/?mode=coregulation" title="Search per locus">Locus</a></li>
<form class="navbar-form navbar-left" action="/AraQTL/cistrans/" id="top_form" method="get">
<input title="Type your query here" id="query" name="query" type="text" class="form-control"
placeholder="Search...">
<input title="Search for AGI identifiers in the cis-trans plot" id="query" name="query" type="text" class="form-control"
placeholder="Search the plot...">
<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 %}>
......@@ -59,16 +59,17 @@
{% if experiment_name %}
<div class="top"></div>
<div id="explaintext">
<a href="#explain" class="explainlink">Explain</a>
<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.<br>
On the diagonal are the so called <i>cis</i> eQTLs that map to the gene&quot;s own location.<br>
By clicking on an eQTL, the eQTL profile of the corresponding gene is shows in the panel on the right.<br>
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.
Clicking on a bar brings up the eQTL profiles for all genes with an eQTL at that location.
You can use the search box at the top to search for a specific AGI ID in the plot.
</div>
</div>
<p id="loading">[Loading...]</p>
<div id="loading"></div>
<div id = "container">
<div id ="cistrans"></div>
......@@ -79,7 +80,7 @@
var draw;
draw = function(data) {
var Zscale, allgenes, altpink, axislabels, bigRad, bottom, c, checkerboard, checkerboard2, chrGap, chrLowXScale, chrXScale, chrYScale, chrindex, ci, cj, cur, curXPixel, curYPixel, darkGray, darkblue, darkgreen, darkred, draw_probe, efftip, eqtltip, fasttime, g, gene, h, i, indtip, j, jitter, jitterAmount, labelcolor, left, lightGray, m, maincolor, martip, maxlod, newg, nodig, onedig, origGeneName, p, pad, peakRad, peaks, pink, probe, probesByGene, purple, right, slowtime, svg, tickHeight, titlecolor, top, totalChrLength, totalh, totalw, twodig, w, xloc, yloc, _i, _j, _k, _l, _len, _len1, _len10, _len2, _len3, _len4, _len5, _len6, _len7, _len8, _len9, _m, _n, _o, _p, _q, _r, _ref, _ref1, _ref10, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref11, _s;
d3.select("p#loading").remove();
d3.select("div#loading").remove();
var markerSums = {};
var maxMarkerSum = 0;
......@@ -604,6 +605,9 @@
$('input#thld').keypress(function(e) {
if(e.which == 13) {
loadingDIV = document.createElement('div');
loadingDIV.id = "loading";
document.body.appendChild(loadingDIV);
$('form#top_form').submit();
}
});
......@@ -614,27 +618,29 @@
attrStroke_width = 0;
attrOpacity = 0;
$('input#query').keypress(function(e) {
if(e.which == 13) {
spot = $('input#query').val()
probe = "circle.probe_" + spot;
if (selectedProbe.length > 0) {
d3.selectAll(selectedProbe).attr("r", attrR).attr("fill", attrFill).attr("stroke", attrStroke).attr("stroke-width", attrStroke_width).attr("opacity", attrOpacity);
selectedProbe = "";
}
$('input#query').keyup(function(e) {
spot = $('input#query').val().toUpperCase().trim();
probe = "circle.probe_" + spot;
if (selectedProbe.length > 0) {
d3.selectAll(selectedProbe).attr("r", attrR).attr("fill", attrFill).attr("stroke", attrStroke).attr("stroke-width", attrStroke_width).attr("opacity", attrOpacity);
selectedProbe = "";
}
if(!d3.select(probe).empty()) {
selectedProbe = probe;
d3Probe = d3.selectAll(probe);
attrR = d3Probe.attr("r");
attrFill = d3Probe.attr("fill");
attrStroke = d3Probe.attr("stroke");
attrStroke_width = d3Probe.attr("stroke-width");
attrOpacity = d3Probe.attr("opacity");
d3Probe.attr("r", 5).attr("fill", "hotpink").attr("stroke", "darkslateblue").attr("stroke-width", 1).attr("opacity", 1);
d3.json("../media/data/{{ experiment_name }}/probe/" + spot + ".json", draw_plot);
}
if(!d3.select(probe).empty()) {
$('input#query').css("color","#000");
selectedProbe = probe;
d3Probe = d3.selectAll(probe);
attrR = d3Probe.attr("r");
attrFill = d3Probe.attr("fill");
attrStroke = d3Probe.attr("stroke");
attrStroke_width = d3Probe.attr("stroke-width");
attrOpacity = d3Probe.attr("opacity");
d3Probe.attr("r", 5).attr("fill", "hotpink").attr("stroke", "darkslateblue").attr("stroke-width", 1).attr("opacity", 1);
d3.json("../media/data/{{ experiment_name }}/probe/" + spot + ".json", draw_plot);
} else {
$('input#query').css("color","#F00");
}
});
$(document).ready(function(e) {
$("a.explainlink").click(function(e) {
......
......@@ -34,7 +34,8 @@ def eQTLPlotView(request):
thld = ""
output = 'lod%s.json' % thld
if not os.path.isfile(os.path.join(settings.MEDIA_ROOT, 'data', '%s' % exp_name, output)):
full_path = os.path.join(settings.MEDIA_ROOT, 'data', '%s' % exp_name, output)
if not os.path.isfile(full_path) or os.stat(full_path).st_size == 0:
outputJson(exp_name, qtl_file, thld, output)
experiment = Experiment.objects.get(experiment_name=exp_name)
return render_to_response('eQTL.html', {'experiment_name': exp_name,
......
......@@ -64,8 +64,8 @@ def selectMarker(request):
closestMarker = utils.getClosestMarker(exp_name, chromosome, position)
if closestMarker:
marker_name = closestMarker.name
elif re.match("(chr)?(\d+):(\d+)$", query):
genomicLocation = re.match("(chr)?(\d+):(\d+)$", query)
elif re.match("(chr)?(\d+):(\d+)$", query,re.I):
genomicLocation = re.match("(chr)?(\d+):(\d+)$", query,re.I)
chromosome = genomicLocation.group(2)
position = genomicLocation.group(3)
closestMarker = utils.getClosestMarker(exp_name, chromosome, position)
......
......@@ -18,7 +18,7 @@
<ul class="nav nav-pills">
<li><a class="navbar-brand" href="/AraQTL">AraQTL<br>Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Experiment
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Select an experiment">Experiment
<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
{% for experiment in experiments %}
......@@ -26,14 +26,14 @@
{% endfor %}
</ul>
</li>
<li class="active"><a href="/AraQTL/?mode=correlation">Correlation</a></li>
<li><a href="/AraQTL/?mode=coregulation">Marker</a></li>
<li class="active"><a href="/AraQTL/?mode=correlation" title="Search for correlating profiles">Correlation</a></li>
<li><a href="/AraQTL/?mode=coregulation" title="Search per locus">Locus</a></li>
<form class="navbar-form navbar-left" action="/AraQTL/correlation/" method="get" id="top_form">
<input title="Type your query here" id="query" name="query" type="text" class="form-control"
<input title="Type your query here" id="query" rel="tooltip" name="query" type="text" class="form-control"
placeholder="Search..." {% if queryGene.id %} value="{{ queryGene.id }}" {% endif %}>
<input title="Correlation threshold" id="corrthld" name="corrthld" type="text" size="4" class="form-control"
<input title="Correlation threshold" id="corrthld" rel="tooltip" name="corrthld" type="text" size="4" class="form-control"
placeholder="" {% if corrthld %} value="{{ corrthld }}" {% endif %}>
<select title="Select an experiment" class="form-control" id="experiment_selector" name="experiment_name">
<select title="Select an experiment" class="form-control" id="experiment_selector" rel="tooltip" name="experiment_name">
{% for experiment in experiments %}
<option value="{{ experiment.experiment_name }}" {% if experiment.experiment_name == experiment_name %} selected {% endif %}>
{{ experiment.experiment_name }}
......@@ -74,11 +74,13 @@ genes.push({ "gene": "{{ gene.gene_id }}",
"experiment" : "{{ experiment_name }}"});
{% endfor %}
</script>
<div id ="multiplot"></div>
<div id ="multiplot"><div id="loading"></div></div>
<div id="container" align="center">
<div id="explaintext">
<a href="#explain" class="explainlink">Explain</a>
<div id="explain" class="helptext">This table shows all genes for which the eQTL profile correlates with the query gene, the query gene is in the first row</div>
<a href="#explain" class="explainlink">?</a>
<div id="explain" class="helptext">Show all genes for which the eQTL profile correlates with that of the query gene above the set cut-off, the query gene is in the first row.
Strongly correlating eQTL profiles could indicate that the genes are regulated by the same loci.</div>
</div>
<table cellspacing='0'>
<tr>
......@@ -163,6 +165,15 @@ genes.push({ "gene": "{{ gene.gene_id }}",
$(ab).show();
}
});
$('input#corrthld').tooltip({placement: 'bottom'}).tooltip('show');
//remove tooltip after 3 sec
setTimeout(function () {
$('input#corrthld').tooltip('hide');
}, 10000)
$('input#query').tooltip({placement: 'left'});
$('select#experiment_selector').tooltip({placement: 'bottom'});
});
</script>
......
......@@ -4,5 +4,8 @@
<li><i>How can I add studies to AraQTL?</i><br>
Send an email to araqtl@bioinformatics.nl
</li>
<li><i>Does AraQTL work in all browsers?</i><br>
In principle it should work on all browsers that support Javascript. We do recommend using Firefox, since AraQTL was extensively tested with that browser.
</li>
</ul>
</div>
\ No newline at end of file
</div>
......@@ -14,7 +14,7 @@
<ul class="nav nav-pills">
<li><a class="navbar-brand" href="/AraQTL">AraQTL<br>Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Experiment
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Select an experiment">Experiment
<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
{% for experiment in experiments %}
......@@ -24,9 +24,9 @@
</ul>
</li>
<li{% if mode == 'correlation' %} class="active"{% endif %}><a
href="/AraQTL/?mode=correlation">Correlation</a></li>
href="/AraQTL/?mode=correlation" title="Search for correlating profiles">Correlation</a></li>
<li{% if mode == 'coregulation' %} class="active"{% endif %}><a
href="/AraQTL/?mode=coregulation">Marker</a></li>
href="/AraQTL/?mode=coregulation" title="Search per locus">Locus</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Help
<span class="caret"></span></a>
......@@ -45,7 +45,7 @@
<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/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>
<div class="container">
......@@ -138,7 +138,7 @@
<div id="helptext1" class="helptext"><i>Arabidopsis</i> workbench and database for eQTL analysis</div>
<br>
<a href="#helptext2" class="helplink">What is an eQTL?</a>
<div id="helptext2" class="helptext">a genetic locus that was shown to affect the expression of the current gene</div>
<div id="helptext2" class="helptext">An eQTL is a genetic locus that was shown to affect the expression of the current gene</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>
......@@ -165,7 +165,7 @@
textAreaDefaultText = "Input a TAIR ID to find correlating genes";
{% endif %}
{% if mode == 'coregulation' %}
textAreaDefaultText = "Input marker name or genomic coordinate";
textAreaDefaultText = "Marker, gene or coordinate";
{% endif %}
$('#queryArea').val(textAreaDefaultText);
......
<div id="manual_text">
<div class="paragraph">
<h1>Manual</h1>
<h1>AraQTL</h1>
Download the <a href="/AraQTL/static/AraQTL_manual.pdf">AraQTL manual</a><br><br>
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.
......@@ -21,11 +22,11 @@ Currently it holds publicly available data of all published Arabidopsis eQTL stu
<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.
To find genes with an eQTL at the same locus 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
</div>
......@@ -4,4 +4,5 @@ from . import views
urlpatterns = [
url(r'^$', views.index, name='index'),
url(r'^AGI_list$', views.AGI_list, name='AGI_list'),
]
from django.shortcuts import render_to_response
from django.http import HttpResponse
from main.models import Experiment
from main.models import ArraySpot
import csv
def index(request):
experiments = Experiment.objects.filter(species__species_name="Arabidopsis thaliana")
......@@ -22,3 +26,15 @@ def no_results(query, mode):
'noresults': 1,
'mode': mode})
def AGI_list(request):
genelist = ArraySpot.objects.filter(experiment__species__species_name="Arabidopsis thaliana").values_list('spot_id', flat=True)
AGI_list = '\n'.join(genelist)
response = HttpResponse(content_type='text/plain')
response['Content-Disposition'] = 'attachment; filename="ARAQTL_AGI_list.txt"'
response.write(AGI_list)
return response
......@@ -18,7 +18,7 @@
<ul class="nav nav-pills">
<li><a class="navbar-brand" href="/AraQTL/">AraQTL<br>Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Experiment
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Select an experiment">Experiment
<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
{% for experiment in experiments %}
......@@ -27,13 +27,13 @@
</ul>
</li>
<li>
<a href="/AraQTL/correlation/{% if experiment_name != "all" %}?query={{ gene_info_list.0.gene_id }}&experiment_name={{ experiment_name }}{% endif %}">
<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 %}">
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 title="Search per locus" href="/AraQTL/coregulation/{% if experiment_name != "all" %}?query={{ gene_info_list.0.gene_id }}&experiment_name={{ experiment_name }}{% endif %}">
Locus
</a>
</li>
<form class="navbar-form navbar-left" action="" method="get" id="top_form">
......@@ -101,7 +101,7 @@ genes.push({ "gene": "{{ gene.gene_id }}",
{% endif %}
</script>
<div id ="multiplot"><p id="loading">Loading....</p></div>
<div id ="multiplot"><div id="loading"></div></div>
<script>
draw_qtl_plot();
</script>
......@@ -110,7 +110,7 @@ genes.push({ "gene": "{{ gene.gene_id }}",
{% if experiment_name == "all" %}
<div id="explaintext">
<a href="#explain" class="explainlink">Explain</a>
<a href="#explain" class="explainlink">?</a>
<div id="explain" class="helptext">Plot of the eQTL profiles of the query gene in all experiments</div>
</div>
<table>
......@@ -149,7 +149,7 @@ genes.push({ "gene": "{{ gene.gene_id }}",
</table>
{% else %}
<div id="explaintext">
<a href="#explain" class="explainlink">Explain</a>
<a href="#explain" class="explainlink">?</a>
<div id="explain" class="helptext">Plot of the eQTL profiles of the query genes for the selected experiment</div>
</div>
<table id="table">
......
......@@ -21,7 +21,7 @@ def multiplot(request):
species_short_name = Species.objects.get(species_name=species_name).short_name
if request.method == 'GET':
if request.GET.get('query'):
if 'query' in request.GET:
if request.GET.get('experiment_name'):
exp_name = request.GET.get('experiment_name')
else:
......@@ -30,6 +30,9 @@ def multiplot(request):
query = urllib2.unquote(query).strip()
query = re.sub(r'\s+', r' ', query)
if not query:
return main.views.no_results(query, "multiplot")
if exp_name == "all":
return multiexperimentplot(request)
......@@ -87,7 +90,6 @@ def multiexperimentplot(request):
query = request.GET.get('query')
query = urllib2.unquote(query).strip().upper()
genes = ArraySpot.objects.filter(geneinfo__gene_id=query)
if genes.count() == 0:
ret = suggestions.views.index(request)
......
......@@ -131,12 +131,21 @@ p {
#explaintext {
float: left;
width: 100%;
text-align:left;
width: 100%;
color: red;
}
a.explainlink {
color: white;
border-radius: 100px;
border: 1px solid #73AF1;
background:#FF0000;
padding: 5px;
}
div.helptext {
color: red;
color: red;
text-align:left;
display:none;
border-radius: 20px;
......@@ -257,6 +266,7 @@ table tr:hover td {
padding: 2px;
background: darkslateblue;
color: #fff;
z-index:10000;
}
......@@ -397,3 +407,23 @@ div.paragraph {
padding: 5px;
width: 100%;
}
div#loading{
text-align:center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -60px;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
\ No newline at end of file
......@@ -37,9 +37,9 @@ nav ul li {
nav ul li a {
padding: 20px;
color: rgba(0, 0, 0, 0.5);
color: rgba(0, 0, 0, 0.9);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
font-size: 25px;
font-size: 15px;
text-decoration: none;
display: block;
}
......
......@@ -7,7 +7,7 @@
# function that does all of the work
draw = (data) ->
d3.select("p#loading").remove()
d3.select("div#loading").remove()
d3.select("div#legend").style("opacity", 1)
d3.select("div#geneinput").style("opacity", 1)
......
......@@ -25,7 +25,7 @@
<li{% if mode == 'correlation' %} class="active"{% endif %}><a
href="/AraQTL/?mode=correlation">Correlation</a></li>
<li{% if mode == 'coregulation' %} class="active"{% endif %}><a
href="/AraQTL/?mode=coregulation">Marker</a></li>
href="/AraQTL/?mode=coregulation">Locus</a></li>
<form class="navbar-form navbar-left" action="/AraQTL/multiplot/" method="get" id="top_form">
<input title="Type your query here" id="query" name="query" type="text" class="form-control"
placeholder="Search...">
......
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