Commit 87ce29a8 authored by Nijveen, Harm's avatar Nijveen, Harm
Browse files

various fixes

parent baa8debd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/jquery-ui.min.css' %}" type="text/css"/>
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery-ui.min.js' %}"></script>
<title>eQTL visualization and investigation</title>
</head>
<body>
<header>
<div>
<!--<div id="logo" style="width:226px;height:35px;float:left;"><img src="{% static 'cistrans/image/wur.png' %}" style="max-width:100%;max-height:100%;"></div>-->
</div>
</header> <!-- /#banner -->
{% block content %} {% endblock %}
</body>
</html>
......@@ -6,7 +6,6 @@
<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"/>
<link rel="stylesheet" href="{% static 'css/cistrans.css' %}" type="text/css"/>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
<script type="text/javascript" src="{% static 'js/d3-tip.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
......@@ -15,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</a></li>
<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
......@@ -28,19 +27,6 @@
</li>
<li><a href="/AraQTL/?mode=correlation">Correlation</a></li>
<li><a href="/AraQTL/?mode=coregulation">Marker</a></li>
<form class="navbar-form navbar-left" action="/AraQTL/multiplot/" method="get">
<input title="Type your query here" id="query" name="query" type="text" class="form-control"
placeholder="Search..." {% if query %} value="{{ query }}" {% endif %}>
<select title="Select an experiment" class="form-control" id="experiment_name"
name="experiment_name">
{% for experiment in experiments %}
<option value="{{ experiment.experiment_name }}" {% if experiment.experiment_name == experiment_name %} selected {% endif %}>
{{ experiment.experiment_name }}
</option>
{% endfor %}
<option value="all" {% if experiment_name == "all" %} selected {% endif %}>all</option>
</select>
</form>
</ul>
</div>
</div>
......@@ -364,12 +350,7 @@ Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{ thld}} {% els
probeaxes = svg.append("g").attr("id", "probe_data_axes").attr("class", "probe_data");
trans = data.spot[probe_data.probe.toUpperCase()].transcript;
var link_pre;
if (data["spec"] == "Arabidopsis Thaliana"){
link_pre = "http://plants.ensembl.org/Arabidopsis_thaliana/Gene/Summary?g=";
}
if (data["spec"] == "Caenorhabditis Elegans"){
link_pre = "http://www.wormbase.org/species/c_elegans/gene/";
}
link_pre = "/AraQTL/multiplot/?query=";
var hyper_link = link_pre+ trans;
if (trans !== null) {
titletxt += " (" + trans + ")";
......@@ -481,7 +462,7 @@ Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{ thld}} {% els
}).on("mouseout", function(d) {
return markercounttip.hide();
}).on("click", function(d) {
location.href="http://www.bioinformatics.nl/AraQTL/coregulation/?experiment_name={{ experiment_name }}&marker="+d+"&thld={{ lodthld }}";
location.href="/AraQTL/coregulation/?experiment_name={{ experiment_name }}&marker="+d+"&thld={{ lodthld }}";
});
svg.call(eqtltip);
......@@ -526,22 +507,6 @@ Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{ thld}} {% els
</script>
{% else %}
<form action="" method="get">
Experiment name:
<select id = "experiment_name" name = "experiment_name">
{% for experiment in experiments %}
<option value = "{{ experiment }}">{{ experiment }}</option>
{% endfor %}
</select>
LOD threshold:<input type="text" id = "thld" title ="Using default adjusted LOD threshold using FDR control at 0.05 if leaving this field blank" name = "thld" placeholder ="Optional"/>
<input type="submit" id="cistrans_submit" class = "btn_analysis" value="QTL plot" />
</form>
<script type="text/javascript" src="{% static 'cistrans/js/session.js' %}"></script>
{% endif %}
{% endblock %}
import json
import os
from experiment.Arabidopsis import Arabidopsis
from experiment.Celegans import Celegans
from django.shortcuts import render,render_to_response,HttpResponse
from django.shortcuts import render,render_to_response
from django.conf import settings
from main.models import ArraySpot,Experiment,Transcript,Marker, Species, Chromosome, GeneInfo
from main.models import ArraySpot,Experiment,Marker, Chromosome, GeneInfo
from main.parser import outputJSON
# Create your views here.
......@@ -55,7 +52,7 @@ def getSpecies(exp):
return species_name
def getMarkerPos(exp,marker):
return Marker.objects.get(experiment__experiment_name = exp,name = marker).marker_start
return Marker.objects.get(experiment__experiment_name = exp,name = marker).start
def getMarkerNames(experiment_name):
return Marker.objects.filter(experiment__experiment_name = experiment_name).values_list("name", flat=True)
......@@ -129,7 +126,7 @@ def outputJson(experiment_name,qtl_file,thld,output):
marker_list_dic = {}
marker_queryset_list = getMarkerObjects(experiment_name)
for m in marker_queryset_list:
m_info ={'chr':m.chromosome,'start':int(m.start)}
m_info ={'chr':m.chromosome.name,'start':int(m.start)}
marker_list_dic[m.name.encode('ascii','ignore')] = m_info
output_dic['pmark'] = marker_list_dic
......@@ -137,11 +134,11 @@ def outputJson(experiment_name,qtl_file,thld,output):
spots_list = ArraySpot.objects.filter(experiment__experiment_name = experiment_name)
spots_dic = {}
for spot in spots_list:
geneInfo = GeneInfo.objects.get(gene_id= spot)
if geneInfo.start !='' and geneInfo.chr !='' :
spots_dic[spot.spot_id] = {'chr':geneInfo.chr,'start':int(geneInfo.start),'end':int(geneInfo.end),'ref':geneInfo.ref_id,'transcript':geneInfo.transcript_name}
geneInfo = GeneInfo.objects.get(gene_id= spot.spot_id)
if geneInfo.start and geneInfo.chr:
spots_dic[spot.spot_id] = {'chr':geneInfo.chr,'start':int(geneInfo.start),'end':int(geneInfo.end),'ref':geneInfo.gene_id,'transcript':geneInfo.gene_id}
else:
spots_dic[spot.spot_id] = {'chr':'1','start':0,'end':0,'ref':geneInfo.ref_id,'transcript':geneInfo.gene_name}
spots_dic[spot.spot_id] = {'chr':'1','start':0,'end':0,'ref':geneInfo.gene_id,'transcript':geneInfo.gene_id}
output_dic['spot'] = spots_dic
with open(in_path) as fi:
......
{% extends 'base.html' %}
{% block content %}
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/multiexperimentplot.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/coregulation.css' %}" type="text/css"/>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
<script type="text/javascript" src="{% static 'js/d3-tip.js' %}"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script>
$(function(){
$(document).tooltip();
});
</script>
<div class="back2main" onclick="location.href='/AraQTL/';"> main menu </div>
<center>
<h3>Shared peaks</h3>
<i>Show genes that have a LOD score at the selected marker above the threshold</i>
</center>
{% if experiment_name %}
<form action="" method="get">
Experiment:
<select id="experiment_name" name="experiment_name">
{% for experiment in experiments %}
<option value= "{{ experiment }}" {%if experiment == experiment_name %} selected {% endif %}>{{ experiment }}</option>
{% endfor %}
</select>
Marker :<input type="text" id="marker" title ="select a marker" name="marker" value ="{{ marker }}"/>
LOD threshold:<input type="text" id="thld" title ="default adjusted LOD threshold using FDR control at 0.05 " name="thld" value="{{ lodthld }} "/>
<input type="submit" id="coregulation_submit" class="btn_analysis" value="Show genes" />
</form>
<div id ="multiexperimentplot"></div>
<div id="genes" align="center">
<p>
<input class="search" placeholder="Search" />
<table cellspacing='0'>
<tr>
<th class="sort" data-sort="gene_name">Transcript&nbsp;ID (count={{ gene_list|length }})</th>
<th class="sort" data-sort="lodscore">LOD score</th>
<th>Description</th></tr>
<tbody class="list">
{% for gene in gene_list %}
<tr><td class="gene_name"><A href="/AraQTL/multiexperimentplot/?gene_name={{ gene.transcript_name|upper }}" TARGET="_blank">{{ gene.transcript_name }}</a></td>
<td class="lodscore">{{ gene.LOD|floatformat:2 }}</td>
<td class="description" align=left>{{ gene.description }}</td></tr>
{% endfor %}
</tbody>
</table>
<script src="http://listjs.com/no-cdn/list.js"></script>
</div>
<script type="text/javascript">
var options = {
valueNames: [ 'gene_name', 'lodscore', 'description' ]
};
var userList = new List('genes', options);
(function() {
var draw;
draw = function(data) {
var altpink, axislabels, bigRad, bottom, c, checkerboard, chrGap, chrLowXScale, chrXScale, chrYScale, chrindex,
ci, cj, cur, darkGray, darkblue, darkgreen, darkred, draw_probe, g, gene, h, hLegend, i, j, labelcolor, legend,
left, leftLegend, lightGray, m, maincolor, martip, maxlod, newg, nodig, onedig, p, pad, pink, probe, purple,
right, rightLegend, svg, tickHeight, titlecolor, top, topLegend, totalChrLength, totalh, totalw, twodig,
w, wLegend, 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, _ref4, _ref5, _ref8, _ref9, _s;
totalw = 1000;
totalh = 400;
chrGap = 8;
bigRad = 8;
pad = {
left: 60,
top: 40,
right: 40,
bottom: 40,
inner: 10
};
left = 60;
right = 760;
leftLegend = right + 10;
top = 41;
topLegend = 41;
bottom = 341;
h = 300;
hLegend = 200;
w = 700;
wLegend = 300;
//NUMBER FORMATING//////////////////
nodig = d3.format(".0f");
onedig = d3.format(".1f");
twodig = d3.format(".2f");
//END///////////////////////////////
//SET DEFAULT COLOR/////////////////
lightGray = d3.rgb(230, 230, 230);
darkGray = d3.rgb(200, 200, 200);
darkblue = "darkslateblue";
darkgreen = "darkslateblue";
pink = "hotpink";
altpink = "#E9CFEC";
purple = "#8C4374";
darkred = "crimson";
labelcolor = "black";
titlecolor = "blue";
maincolor = "darkblue";
//END///////////////////////////////
svg = d3.select("div#multiexperimentplot").append("svg").attr("width", totalw).attr("height", totalh);
svg.append("rect").attr("x", left).attr("y", top).attr("height", h).attr("width", w).attr("class", "innerBox");
svg.append("rect").attr("x", leftLegend).attr("y", topLegend).attr("height", hLegend).attr("width", wLegend).attr("class", "innerBox");
//#######################end 1###################################################
//###########################2.define chessboard layout##########################
checkerboard = svg.append("g").attr("id", "checkerboard");// define plot as checkerboard
legend = svg.append("g").attr("id", "legend");// define legend
//########## Calculate total chromosome length (in bp) SUM #########
totalChrLength = 0;
_ref = data.chrnames; //{"chr" : {"1": {"start": 3631,"end": 30425192}...}
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
c = _ref[_i];
//chromosome length in cM
data.chr[c].length_bp = data.chr[c].end - data.chr[c].start;
totalChrLength += data.chr[c].length_bp;
}
//#################################end###############################
//################################lower plot chess board box property############################
chrLowXScale = {};
cur = Math.round(pad.left + chrGap / 2); // (60+8/2)
_ref4 = data.chrnames;
for (_k = 0, _len4 = _ref4.length; _k < _len4; _k++) {
c = _ref4[_k];
data.chr[c].start_lowerXpixel = cur; // 64
// 64 + round(900-8*nr_chr/total_chr_length*chr_cM)
data.chr[c].end_lowerXpixel = cur + Math.round((w - chrGap * data.chrnames.length) / totalChrLength * data.chr[c].length_bp);
chrLowXScale[c] = d3.scale.linear().domain([data.chr[c].start, data.chr[c].end]).range([data.chr[c].start_lowerXpixel, data.chr[c].end_lowerXpixel]);
cur = data.chr[c].end_lowerXpixel + chrGap; // each loop cursor move to the end position +2
}
//#####################################end#######################################
//###################draw chess board layout for lower plot#################
_ref5 = data.chrnames;
for (i = _p = 0, _len5 = _ref5.length; _p < _len5; i = ++_p) {
ci = _ref5[i];
if (i % 2 === 0) {
checkerboard.append("rect").
attr("x", data.chr[ci].start_lowerXpixel - chrGap / 2).
attr("width", data.chr[ci].end_lowerXpixel - data.chr[ci].start_lowerXpixel + chrGap).
attr("y", top).
attr("height", h).
attr("stroke", "none").
attr("fill", darkGray).
style("pointer-events", "none");
}
}
//###################################end#########################################
//#########################draw axis of plot###########################
//################################### X axis #######################################
axislabels = svg.append("g").attr("id", "axislabels").style("pointer-events", "none");
//################################### END #######################################
//################################### Y axis #######################################
//################# x axis text of plot################
axislabels.append("g").attr("id", "bottomX").selectAll("empty").data(data.chrnames).enter().append("text").text(function(d) {
return d;
}).attr("x", function(d) {
return (data.chr[d].start_lowerXpixel + data.chr[d].end_lowerXpixel) / 2;
}).attr("y", bottom + pad.bottom * 0.3).attr("fill", labelcolor);
//################################### END #######################################
//############################### add x-axis name #######################################
axislabels.append("text").text("Marker position").
attr("x", (left + right) / 2).
attr("y", bottom + pad.bottom * 0.75).
attr("fill", titlecolor).
attr("text-anchor", "middle");
//############################### add Y-axis name #######################################
xloc = left - pad.left * 0.65;
yloc = (top + bottom) / 2;
axislabels.append("text").text("LOD score").
attr("x", xloc).
attr("y", yloc).
attr("transform", "rotate(270," + xloc + "," + yloc + ")").
style("text-anchor", "middle").
attr("fill", titlecolor);
//################################### END #######################################
//marker tooltip//////////////////////
martip = d3.tip().attr("class", "d3-tip")
.offset([-10, 0])
.html(function(y,z) {
return "marker: " +y + " (" + z + ")<br><i>click for genes peaking here</i>";
})
//end/////////////////////////////////
cur = 0;
_ref8 = data.chrnames;
for (_q = 0, _len8 = _ref8.length; _q < _len8; _q++) {
c = _ref8[_q];
_ref9 = data.pmarknames[c];
for (_r = 0, _len9 = _ref9.length; _r < _len9; _r++) {
p = _ref9[_r];
data.pmark[p].index = cur;
cur++
}
}
//######################draw dot plot#########################
draw_plot = function(error, probe_data_set) {
if (error) throw error;
var chr, curves, ensembl, lod, lodcurve, lodcurve_yScale, colors,
markerClick, minlod,minlod_marker,maxlod_marker, meanmarks, mgi,
pos, probeaxes, ticks, title, titletxt, xlink, yaxis, probe_data,
_len10, _len11, _len12, _len13, _ref10, _ref11, _ref12,_ref13, _s, _t, _u, _v;
probe_data = probe_data_set[0]
maxlod = -1;
maxlod_marker = null;
_ref10 = data.markers;
for (_s = 0, _len10 = _ref10.length; _s < _len10; _s++) {
m = _ref10[_s];
_ref13 = probe_data_set
for (_v = 0, _len13 = _ref13.length; _v < _len13; _v++) {
lod = probe_data_set[_v].lod[data.pmark[m].index];
if (maxlod < lod) {
maxlod = lod;
maxlod_marker = m;
}
}
}
//############################map y axis range to the width of the lower plot#############################
lodcurve_yScale = d3.scale.linear().domain([0, maxlod * 1.05]).range([bottom, top]);//540,620
//add a container to group objects, in this case add y axis of lower plot
yaxis = svg.append("g").attr("class", "probe_data").attr("id", "loweryaxis");
ticks = lodcurve_yScale.ticks(6);
yaxis.selectAll("empty").data(ticks).enter().append("line").attr("y1", function(d) {
return lodcurve_yScale(d);
}).attr("y2", function(d) {
return lodcurve_yScale(d);
}).attr("x1", left).attr("x2", right).attr("stroke", "white").attr("stroke-width", "1");
yaxis.selectAll("empty").data(ticks).enter().append("text").text(function(d) {
if (maxlod > 10) { // for the sacle of y axis of lower plot
return nodig(d);
} else {
return onedig(d); // if maxlod<10: rescale y axis with one digit numbers
}
}).attr("y", function(d) {
return lodcurve_yScale(d);
}).attr("x", left - pad.left * 0.1).style("text-anchor", "end").attr("fill", labelcolor);
lodcurve = function(c,i) {
return d3.svg.line().x(function(p) {
return chrLowXScale[c](data.pmark[p].start);
}).y(function(p) {
return lodcurve_yScale(probe_data_set[i].lod[data.pmark[p].index]);
});
};
//#######################################end#################################################
//########## draw legend #########
colors = d3.scale.category10();
_ref13 = probe_data_set;
for (_v = 0, _len13 = _ref13.length; _v < _len13; _v++) {
legend.append("line").
attr("x1",leftLegend + 10).
attr("y1",topLegend + 18*_v + 15).
attr("x2",leftLegend + 40).
attr("y2",topLegend + 18*_v + 15).
attr("class", "thickline").
attr("stroke", colors(_v));
legend.append("text").text(probe_data_set[_v].probe).
attr("x", leftLegend + 50).
attr("y", topLegend + 18*_v+ 15).
style("text-anchor", "start").
attr("fill", titlecolor);
}
//#################################end###############################
curves = svg.append("g").attr("id", "curves").attr("class", "probe_data");
_ref11 = data.chrnames;
_ref13 = probe_data_set;
for (_v = 0, _len13 = _ref13.length; _v < _len13; _v++) {
for (_t = 0, _len11 = _ref11.length; _t < _len11; _t++) {
c = _ref11[_t];
curves.append("path").datum(data.pmarknames[c]).
attr("d", lodcurve(c,_v)).
attr("class", "thickline").
attr("stroke", colors(_v)).
style("pointer-events", "none").attr("fill", "none");
}
}
probeaxes = svg.append("g").attr("id", "probe_data_axes").attr("class", "probe_data");
titletxt = "{{ marker }} ("+ data.pmark["{{ marker }}"].chr + ":" + data.pmark["{{ marker }}"].start + ")";
probeaxes.append("text").text(titletxt).
attr("x", (left + right) / 2).
attr("y", top - pad.top / 2).
attr("fill", maincolor).style("font-size", "18px");
svg.append("rect").
attr("class", "probe_data").
attr("x", left).
attr("y", top).
attr("height", h).
attr("width", w).
attr("class", "outerBox");
svg.append("circle").attr("class", "probe_data").
attr("id", "probe_circle").
attr("cx", chrLowXScale[data.pmark["{{ marker }}"].chr](data.pmark["{{ marker }}"].start)).
attr("cy", top).
attr("r", bigRad).
attr("fill", pink).
attr("stroke", darkblue).
attr("stroke-width", 1).
attr("opacity", 1);
//############# Calculate the number of markers and save to markerClick with default value of 0 ###################
markerClick = {};
_ref12 = data.markers;
for (_u = 0, _len12 = _ref12.length; _u < _len12; _u++) {
m = _ref12[_u];
markerClick[m] = 0;
}
//########################## end ############################
_ref13 = probe_data_set;
svg.call(martip)
{% for gene in gene_list|slice:":10" %}
svg.append("g").
attr("id", "markerCircle").
attr("class", "probe_data").selectAll("empty").
data(data.markers).enter().append("circle").
attr("class", "probe_data").attr("id", function(td) {
return "marker_" + td;
}).attr("cx", function(td) {
return chrLowXScale[data.pmark[td].chr](data.pmark[td].start);
}).attr("cy", function(td) {
return lodcurve_yScale(probe_data_set[{{ forloop.counter0 }}].lod[data.pmark[td].index]);
}).attr("r", bigRad).attr("fill", purple).attr("stroke", "none").attr("stroke-width", "2").attr("opacity", 0).on("mouseover", function(td) {
if (!markerClick[td]) {
d3.select(this).attr("opacity", 1);
}
return martip.show(td,probe_data_set[{{ forloop.counter0 }}].probe);
}).on("mouseout", function(td) {
d3.select(this).attr("opacity", markerClick[td]);
return martip.hide();
}).on("click", function(d) {
location.href="/AraQTL/coregulation/?experiment_name={{ experiment_name }}&marker="+d;
});
//end draw LOD score plot
{% endfor %}
};
data_set = [];
queue()
{% for gene in gene_list|slice:":10" %}
.defer(d3.json,"../media/data/{{ experiment_name }}/probe/{{ gene.transcript_name|upper }}.json")
{% endfor %}
.awaitAll(draw_plot);
};
d3.json("../media/data/{{ experiment_name }}/lod.json", draw);
}).call(this);
</script>
{% else %}
<form action="" method="get">
Experiment:<select id="experiment_name" name="experiment_name">
{% for experiment in experiments %}
<option value= "{{ experiment }}">{{ experiment }}</option>
{% endfor %}
</select>
Marker :<input type="text" id="marker" title ="select a marker" name="marker" value ="MSAT3117"/>
LOD threshold:<input type="text" id="thld" title ="default adjusted LOD threshold using FDR control at 0.05" name="thld" placeholder ="Optional"/>
<input type="submit" id="coregulation_submit" class="btn_analysis" value="Show genes" />
</form>
{% endif %}
{% endblock %}
......@@ -6,10 +6,10 @@
<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"/>
<link rel="stylesheet" href="{% static 'css/multiexperimentplot.css' %}" type="text/css"/>