Commit 276f94f2 authored by Nijveen, Harm's avatar Nijveen, Harm
Browse files

changing the startup page

parent 682f5caf
Pipeline #2018 skipped
......@@ -3,25 +3,118 @@
{% block content %}
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/main.css' %}" type="text/css"/>
<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="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/multiplot.js' %}"></script>
<script>
var textAreaDefaultText = "Type your query, i.e. AT1G01150, or GO:0004674, or AT1G35614 AT1G21230";
</script>
<div class="top">
<form action="multiplot" method="get">
Experiment: <select id="experiment_name" name="experiment_name">
{% for experiment in experiments %}
<option value= "{{ experiment }}">{{ experiment }}</option>
{% endfor %}
</select>
Query: <input type="textbox" id="query" title ="type your query" name="query" value="GO:0009965"/>
<input type="submit" id="multiplot_submit" class="btn_analysis" value="Query" />
<p><i>Show eQTL profiles for transcripts matching your query</i>
</form>
</div>
<nav class="navbar navbar-nav navbar-fixed-top">
<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 href="{% static 'about.html' %}">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Experiment
<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
{% for experiment in experiments %}
<li><a href="/AraQTL/cistrans/?experiment_name={{ experiment.experiment_name }}">{{ experiment.experiment_name }}</a></li>
{% endfor %}
</ul>
</li>
<li><a href="/AraQTL/correlation/">Correlation</a></li>
<li><a href="/AraQTL/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>
</nav>
<div class="container">
<div onclick="location.href='/AraQTL/multiexperimentplot/';" class="first"><p>Plot all eQTL patterns for a single gene</p></div>
<div onclick="location.href='/AraQTL/cistrans/';" class="second"><p>Show cistransplot per experiment</p></div>
<div onclick="location.href='/AraQTL/coregulation/';" class="third"><p>Find genes peaking at a marker</p></div>
<div onclick="location.href='/AraQTL/correlation/';" class="fourth"><p>Find correlated QTL patterns</p></div>
<div class="top">
</div>
<div id="queryBox">
<form action="/AraQTL/multiplot/" method="get">
<textarea rows=3 cols=30 id="queryArea" name="query" title="Type your query">Type your query, i.e. AT1G01150, or GO:0004674, or AT1G35614 AT1G21230</textarea>
<br>
<input type="submit" id="multiplot_submit" class="btn_analysis" value="Query"/>
<br>
<table id="table">
<thead>
<tr>
<th></th>
<th>Experiment</th>
<th>Cross</th>
<th>Plant parts</th>
<th>Publication</th>
</tr>
</thead>
<tbody>
{% for experiment in experiments %}
<tr>
<td>
<input type="radio"
name="experiment_radio"
value="{{ experiment.experiment_name }}"
{% if forloop.counter == 1 %}checked{% endif %}
>
</td>
<td><a href="/AraQTL/cistrans/?experiment_name={{ experiment.experiment_name }}">
{{ experiment.experiment_name }}
</a>
</td>
<td>{{ experiment.parental_strain }}</td>
<td></td>
<td align="left">
<a href="http://www.ncbi.nlm.nih.gov/pubmed/{{ experiment.pubmed }}"
title="{{ experiment.reference }}"
target="_blank"
>
{{ experiment.reference|truncatechars:60 }}
</a>
</td>
</tr>
{% endfor %}
<tr><td><input type="radio" name="experiment_radio" value="all"></td><td colspan="5" align="left">All</td></tr>
</tbody>
</table>
</form>
</div>
<div onclick="location.href='/AraQTL/multiexperimentplot/';" class="first"><p>All eQTL patterns for a single
gene</p></div>
<div onclick="location.href='/AraQTL/cistrans/';" class="second"><p>Cis-trans plot per experiment</p></div>
<div onclick="location.href='/AraQTL/coregulation/';" class="third"><p>Genes peaking at a marker</p></div>
<div onclick="location.href='/AraQTL/correlation/';" class="fourth"><p>Correlated QTL patterns</p></div>
</div>
<script>
$('textarea#queryArea').focus(function() {
if ($(this).val() == textAreaDefaultText) {
$(this).css("color","black");
$(this).val("");
}
});
$('textarea#queryArea').blur(function() {
if ($(this).val() == "") {
$(this).css("color","lightgrey");
$(this).val(textAreaDefaultText);
}
});
</script>
{% endblock %}
......@@ -5,5 +5,5 @@ from django.http import HttpResponse
from main.models import Experiment
def index(request):
experiments = Experiment.objects.filter(species__species_name = "Arabidopsis thaliana").values_list('experiment_name',flat=True)
experiments = Experiment.objects.filter(species__species_name = "Arabidopsis thaliana")
return render_to_response('index.html',{'experiments':experiments})
......@@ -6,7 +6,7 @@
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/multiexperimentplot.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/correlation.css' %}" type="text/css"/>
<!-- <link rel="stylesheet" href="{% static 'css/correlation.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>
......@@ -17,7 +17,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</a></li>
<li> <a class="navbar-brand" href="/AraQTL/">AraQTL</a></li>
<li><a href="{% static 'about.html' %}">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Experiment
......@@ -31,7 +31,7 @@
<li><a href="/AraQTL/correlation/">Correlation</a></li>
<li><a href="/AraQTL/coregulation/">Marker</a></li>
<form class="navbar-form navbar-left" action="" method="get">
<input title="Type your query here" id="query" name="query" type="text" class="form-control" placeholder="Search..." {%if query%} value ="{{ query }}" {% endif %}>
<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 }}" {%if experiment == experiment_name %} selected {% endif %}>{{ experiment }}</option>
......
......@@ -14,17 +14,25 @@ p {
}
.top {
float: center;
float: left;
width: 100%;
height: 5%;
background-color: white;
text-align:center;
}
.query {
float: left;
width: 100%;
height: 15%;
height: 70%;
background-color: white;
text-align:center;
}
.first {
float: left;
width: 50%;
height: 50%;
width: 25%;
height: 25%;
background-color: white;
text-align:center;
background-image: url("/AraQTL/static/image/multiQTL.png");
......@@ -40,8 +48,8 @@ p {
.second{
float: left;
width: 50%;
height: 50%;
width: 25%;
height: 25%;
background-image: url("/AraQTL/static/image/cistrans.png");
background-size: 35%;
background-position: 50% 10%;
......@@ -55,8 +63,8 @@ p {
.third{
float: right;
width: 50%;
height: 50%;
width: 25%;
height: 25%;
background-color: white;
text-align:center;
background-image: url("/AraQTL/static/image/coregulation.png");
......@@ -71,8 +79,8 @@ p {
.fourth {
float: right;
width: 50%;
height: 50%;
width: 25%;
height: 25%;
background-color: white;
text-align:center;
background-image: url("/AraQTL/static/image/correlation.png");
......@@ -85,3 +93,128 @@ p {
background-color: coral;
}
.dropdown-menu {
width:auto;
}
#queryArea {
color:lightgrey;
width: 30%;
}
#queryBox {
float: left;
width: 100%;
text-align:center;
border-radius: 20px;
border: 2px solid #73AD21;
margin: 25px;
padding: 25px;
}
#experimentSelection {
float: left;
width: 100%;
border-radius: 20px;
border: 2px solid #73AD21;
}
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:20px;
border:#ccc 1px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:10px 10px 20px 20px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top, #ededed, #ebebeb);
}
table th:first-child {
text-align: left;
padding-left:10px;
}
table tr:first-child th:first-child {
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
}
table tr:first-child th:last-child {
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
}
table tr {
text-align: left;
padding-left:10px;
}
table td:first-child {
text-align: left;
padding-left:10px;
border-left: 0;
}
table td {
padding:10px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
table tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
table tr:last-child td {
border-bottom:0;
}
table tr:last-child td:first-child {
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
}
table tr:hover td {
background: #f2f2f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}
\ No newline at end of file
......@@ -208,9 +208,9 @@ draw = (data) ->
markers_for_chromosome.sort((a,b)-> probe_data.lodscores[a].start - probe_data.lodscores[b].start)
curves.append("path")
.datum(markers_for_chromosome)
.attr("id",probe_data.gene+"-"+probe_data.experiment)
.attr("d", lodcurve(c,probe_data.lodscores))
.attr("class", "thickline")
.attr("id",probe_data.gene+"-"+probe_data.experiment)
.attr("stroke", lineColors(i))
.style("pointer-events", "none")
.attr("fill", "none")
......@@ -245,7 +245,7 @@ draw = (data) ->
# dots at markers on LOD curves
for probe_data in probe_data_set
do(probe_data)->
do(probe_data)->
svg.append("g").attr("id", "markerCircle").attr("class", "probe_data")
.selectAll("empty")
.data(d3.entries(probe_data.lodscores))
......@@ -274,6 +274,13 @@ draw = (data) ->
.on "click", (td) ->
location.href="/AraQTL/coregulation/?experiment_name="+probe_data.experiment+"&marker="+td.key
probeaxes = svg.append("g").attr("id", "probe_data_axes").attr("class", "probe_data")
probeaxes.append("text").text(titletxt)
.attr("x", (left + right) / 2)
.attr("y", top - pad.top / 2)
.attr("fill", maincolor).style("font-size", "18px")
for probe_data,i in probe_data_set
if i < maxLegendLines
legend.append("line")
......@@ -285,29 +292,31 @@ draw = (data) ->
.attr("stroke", lineColors(i))
linkUrl = ""
if i == maxLegendLines
if i == maxLegendLines
label = "..."
else if multiexperiment
else if multiexperiment
label = probe_data.experiment
else
label = probe_data.gene
label = probe_data.gene
linkUrl = data.url+label
probeaxes = svg.append("g").attr("id", "probe_data_axes").attr("class", "probe_data")
xlink = probeaxes.append("a").attr("xlink:href", linkUrl)
xlink.append("text")
.text(label)
.attr("x", leftLegend + 50)
.attr("y", topLegend + 18*i + 15)
.attr("fill", titlecolor)
.style("text-anchor", "start")
do(probe_data,i)->
xlink.append("text")
.text(label)
.attr("x", leftLegend + 50)
.attr("y", topLegend + 18*i + 15)
.attr("fill", titlecolor)
.style("text-anchor", "start")
.on "mouseover", () ->
svg.selectAll('path').attr("opacity", 0.1)
svg.selectAll('path#'+probe_data.gene+'-'+probe_data.experiment).attr("opacity", 1)
.on "mouseout", () ->
svg.selectAll('path').attr("opacity", 1)
if i == maxLegendLines
break
probeaxes.append("text").text(titletxt)
.attr("x", (left + right) / 2)
.attr("y", top - pad.top / 2)
.attr("fill", maincolor).style("font-size", "18px")
# black borders
svg.append("rect")
......
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