Commit 88c5e3f4 authored by Nijveen, Harm's avatar Nijveen, Harm
Browse files

Added help text on the pages

parent 70e37e1b
......@@ -58,12 +58,20 @@
{% if experiment_name %}
<div class="top"></div>
<div id="explaintext">
<a href="#explain" class="explainlink">Explain</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>
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.
</div>
</div>
<p id="loading">[Loading...]</p>
<div id = "container">
<div id ="cistrans"></div>
<script type="text/javascript">
(function() {
......@@ -93,12 +101,12 @@
inner: 10
};
left = [60,650, 60];
right = [560,1100, 560];
top = [41,41,570];
bottom = [540,241,670];
h = [499,200,100];
w = [500,450,500];
left = [60,650, 60, 650];
right = [560,1100, 560, 1100];
top = [41,41,570, 300];
bottom = [540,241,670, 670];
h = [499,200,100,370];
w = [500,450,500,500];
//NUMBER FORMATING//////////////////
nodig = d3.format(".0f");
......@@ -131,7 +139,8 @@
checkerboard = svg.append("g").attr("id", "checkerboard");// define left plot as checkerboard
checkerboard2 = svg.append("g").attr("id", "checkerboard2"); // define right plot as checkerboard2
markerhist = svg.append("g").attr("id", "markerhist"); // define information box
experimentinfo = svg.append("g").attr("id", "experimentinfo"); // define experiment information box
//########## Calculate total chromosome length (in bp) SUM #########
totalChrLength = 0;
_ref = data.chrnames; //{"chr" : {"1": {"start": 3631,"end": 30425192}...}
......@@ -462,6 +471,23 @@
}
}
// #### marker count histogram below the cistrans plot ####
histylabels = svg.append("g").attr("id", "histylabels").style("pointer-events", "none");
histylabels.append("text").text(maxMarkerSum).attr("x", left[2])
.attr("y", top[2])
.style("text-anchor", "end")
.attr("fill", labelcolor);
histylabels.append("text").text("0").attr("x", left[2])
.attr("y", bottom[2])
.style("text-anchor", "end")
.attr("fill", labelcolor);
xloc = left[2] - pad.left * 0.65;
yloc = (top[2] + bottom[2]) / 2;
histylabels.append("text").text("#eQTLs").attr("x", xloc).attr("y", yloc).attr("transform", "rotate(270," + xloc + "," + yloc + ")").style("text-anchor", "middle").attr("fill", titlecolor);
svg.call(markercounttip);
markers = svg.append("g").attr("id", "peaks").selectAll("empty").data(data.markers).enter().append("line").attr("class", function(d) {
return "marker_" + d;
......@@ -486,6 +512,39 @@
location.href="/AraQTL/coregulation/?experiment_name={{ experiment_name }}&query="+d+"&thld={{ lodthld }}";
});
experimentinfo = svg.append("g").attr("id", "experimentinfo").style("pointer-events", "none");
iLine = 0
experimentinfo.append("text").text("Experiment information").attr("x", left[3]+10)
.attr("y", top[3] + 10 + 30*iLine)
.style("text-anchor", "start")
.attr("fill", titlecolor);
iLine++;
experimentinfo.append("text").text("Experiment: {{ current_experiment.experiment_name }}").attr("x", left[3]+10)
.attr("y", top[3] + 10 + 30*iLine)
.style("text-anchor", "start")
.attr("fill", titlecolor);
iLine++;
experimentinfo.append("text").text("Cross: {{ current_experiment.parental_strain }}").attr("x", left[3]+10)
.attr("y", top[3] + 10 + 30*iLine)
.style("text-anchor", "start")
.attr("fill", titlecolor);
iLine++;
experimentinfo.append("text").text("Plant parts: {{ current_experiment.plant_parts }}").attr("x", left[3]+10)
.attr("y", top[3] + 10 + 30*iLine)
.style("text-anchor", "start")
.attr("fill", titlecolor);
iLine++;
experimentinfo.append("text").text("Publication: {{ current_experiment.reference }}").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.
......@@ -569,5 +628,16 @@
}
}
});
$(document).ready(function(e) {
$("a.explainlink").click(function(e) {
e.preventDefault();
var ab = $(this).attr("href");
if($(ab).is(':visible')) {
$(ab).hide();
} else {
$(ab).show();
}
});
});
</script>
{% endblock %}
......@@ -36,9 +36,11 @@ def eQTLPlotView(request):
output = 'lod%s.json' % thld
if not os.path.isfile(os.path.join(settings.MEDIA_ROOT, 'data', '%s' % exp_name, output)):
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,
'thld': thld,
'lodthld': lodthld,
'current_experiment': experiment,
'experiments': experiments})
else:
return render_to_response('eQTL.html', {'experiments': experiments})
......
......@@ -76,7 +76,10 @@ genes.push({ "gene": "{{ gene.gene_id }}",
</script>
<div id ="multiplot"></div>
<div id="container" align="center">
<p>
<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>
</div>
<table cellspacing='0'>
<tr>
<th><input type="checkbox" name="allgenes_checkbox" value="all"></th>
......@@ -146,6 +149,18 @@ genes.push({ "gene": "{{ gene.gene_id }}",
}
});
$(document).ready(function(e) {
$("a.explainlink").click(function(e) {
e.preventDefault();
var ab = $(this).attr("href");
if($(ab).is(':visible')) {
$(ab).hide();
} else {
$(ab).show();
}
});
});
</script>
{% endblock %}
......
......@@ -132,6 +132,17 @@
</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>
<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>
<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>
</div>
</div>
<script>
var textAreaDefaultText = "Type your query, i.e. AT1G01150, or GO:0004674, or ERECTA";
......@@ -167,6 +178,18 @@
});
$('div#examples').hide();
$(document).ready(function(e) {
$("a.helplink").click(function(e) {
e.preventDefault();
var ab = $(this).attr("href");
$(".helptext").hide();
$(ab).show();
});
});
</script>
{% endblock %}
......@@ -107,7 +107,12 @@ genes.push({ "gene": "{{ gene.gene_id }}",
</script>
<div id="container" align="center">
{% if experiment_name == "all" %}
<div id="explaintext">
<a href="#explain" class="explainlink">Explain</a>
<div id="explain" class="helptext">Plot of the eQTL profiles of the query gene in all experiments</div>
</div>
<table>
<tr>
<td>
......@@ -143,6 +148,10 @@ genes.push({ "gene": "{{ gene.gene_id }}",
</tr>
</table>
{% else %}
<div id="explaintext">
<a href="#explain" class="explainlink">Explain</a>
<div id="explain" class="helptext">Plot of the eQTL profiles of the query genes for the selected experiment</div>
</div>
<table id="table">
<thead>
<tr>
......@@ -209,6 +218,18 @@ genes.push({ "gene": "{{ gene.gene_id }}",
$('select#experiment_selector').change(function() {
$('form#top_form').submit();
});
$(document).ready(function(e) {
$("a.explainlink").click(function(e) {
e.preventDefault();
var ab = $(this).attr("href");
if($(ab).is(':visible')) {
$(ab).hide();
} else {
$(ab).show();
}
});
});
</script>
{% endblock %}
......@@ -111,18 +111,44 @@ p {
#queryBox {
float: left;
width: 100%;
width: 70%;
text-align:center;
border-radius: 20px;
border: 2px solid #73AD21;
margin: 20px;
margin: 5px;
padding: 15px;
}
#helpLinks {
float: left;
width: 25%;
text-align:left;
border-radius: 20px;
border: 2px solid #73AD21;
margin: 5px;
padding: 15px;
}
#explaintext {
float: left;
width: 100%;
text-align:left;
}
div.helptext {
color: red;
text-align:left;
display:none;
border-radius: 20px;
border: 2px solid #73AD21;
margin: 5px;
padding: 15px;
}
#experimentSelection {
float: left;
width: 100%;
border-radius: 20px;
border-radius: 20px;
border: 2px solid #73AD21;
}
......@@ -144,7 +170,7 @@ table a:hover {
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:10px;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:10px;
......@@ -370,4 +396,4 @@ div.paragraph {
margin: 5px;
padding: 5px;
width: 100%;
}
\ No newline at end of file
}
......@@ -6,6 +6,7 @@
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/main.css' %}" type="text/css" xmlns="http://www.w3.org/1999/html"/>
<script type="text/javascript" src="/AraQTL/static/js/bootstrap.min.js"></script>
<nav class="navbar navbar-nav navbar-fixed-top">
<div class="container-fluid">
......
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