Commit d391de48 authored by Hoogenboom, Jerry's avatar Hoogenboom, Jerry
Browse files

Improvements to Samplevis

* The legend items now have more descriptive names and also include the
  strand balance line.
* Added 5% to the X axis scale, to reassure people that they are really
  seeing the entire bar.
* The X axis scale limits are now rounded to a 'nice' number and
  includes a label for its ending tick mark.
* Added filter for a minimum number of reads per orientation.
* Strand bias line now becomes red if less than a certain percentage
  (default 25) of reads is on one strand, and a star is placed at the
  end of the allele's bar.
* Alleles can be selected (and deselectd) by clicking them (HTML only).
  * Selected alleles appear with a green italic allele name.
  * Data for selected alleles is summarised in a table at the bottom of
    the page. This is WIP and currently only includes the read total.
parent 1083919c
......@@ -43,12 +43,20 @@
div#vis {
position: absolute;
overflow: auto;
bottom: 0px;
bottom: 150px;
top: 0px;
right: 0px;
left: 0px;
text-align: right;
}
div#table {
position: absolute;
overflow: auto;
bottom: 0px;
height: 150px;
right: 0px;
left: 0px;
}
</style>
</head>
<body>
......@@ -81,10 +89,18 @@
<td>Require at least</td>
<td><input type="text" value="0.5" id="minP" size="3">% of highest allele per marker</td>
</tr>
<tr>
<td>Require at least</td>
<td><input type="text" value="0" id="minO" size="3"> reads in both orientations</td>
</tr>
<tr>
<td>Marker name</td>
<td><input type="text" id="markerFilter" size="20" title="Supports regular expression syntax: e.g., use '.*' to match anything."></td>
</tr>
<tr>
<td>Mark if less than</td>
<td><input type="text" value="25" id="minBias" size="3">% of the reads is on one strand</td>
</tr>
</table>
<table class="optiongroup">
<tr>
......@@ -118,6 +134,7 @@
</div>
</div>
<div id="vis"></div>
<div id="table"></div>
<script type="text/javascript">
var graph = false;
var fileName = "graph";
......@@ -127,6 +144,7 @@
if(document.getElementById("renderSVG").checked)
rendererName="svg";
graph = chart({el: "#vis", renderer: rendererName});
graph.onSignal("clickedAllele", updateTable);
graph.update();
document.getElementById("saveLink").style.display = "inline";
......@@ -224,6 +242,23 @@
return false;
}
//Data table update function.
function updateTable(){
if(!graph)
return;
var tabledata = "<table border=1 cellspacing=0><tr><th>Marker</th><th>Allele</th><th>Total reads</th></tr>";
graph.data("selectedAlleles").values().sort(function(a, b){
if(a.allele.name != b.allele.name)
return (a.allele.name > b.allele.name) - (a.allele.name < b.allele.name);
if(a.allele.allele != b.allele.allele)
return (a.allele.allele > b.allele.allele) - (a.allele.allele < b.allele.allele);
return a.allele.total - b.allele.total;
}).forEach(function(o){
tabledata += "<tr><td>" + o.allele.name + "</td><td>" + o.allele.allele + "</td><td>" + o.allele.total + "</td></tr>";
});
document.getElementById("table").innerHTML = tabledata + "</table>";
}
function onLoadSpec(has_data){
if(!has_data){
//Allow files to be dragged onto the page.
......@@ -293,10 +328,24 @@
if(setDataFormulaTransformValue("table", "amplitude_pct_threshold", value) && graph)
parse();
}, false);
document.getElementById("minO").addEventListener('change', function(){
var value = parseFloat(this.value);
if(isNaN(value))
return;
if(setDataFormulaTransformValue("table", "orientation_threshold", value) && graph)
parse();
}, false);
document.getElementById("markerFilter").addEventListener('change', function(){
if(setDataFormulaTransformValue("table", "filter_marker", "'" + this.value + "'") && graph)
parse();
}, false);
document.getElementById("minBias").addEventListener('change', function(){
var value = parseFloat(this.value);
if(isNaN(value))
return;
if(setDataFormulaTransformValue("table", "bias_threshold", value) && graph)
parse();
}, false);
//Toggle options visibility.
document.getElementById("optionsheader").addEventListener('click', function(){
......@@ -322,6 +371,8 @@
document.getElementById("subgraphoffset").value = getDataFormulaTransformValue("yscale", "subgraphoffset");
document.getElementById("minN").value = getDataFormulaTransformValue("table", "amplitude_threshold");
document.getElementById("minP").value = getDataFormulaTransformValue("table", "amplitude_pct_threshold");
document.getElementById("minO").value = getDataFormulaTransformValue("table", "orientation_threshold");
document.getElementById("minBias").value = getDataFormulaTransformValue("table", "bias_threshold");
if(has_data){
document.getElementById("options").style.display = "none";
parse();
......
......@@ -9,6 +9,7 @@
"type": "tsv",
"parse": {
"forward": "number",
"reverse": "number",
"total": "number",
"total_noise": "number",
"total_add": "number"
......@@ -65,6 +66,16 @@
"field": "amplitude_pct_threshold",
"expr": "0.5"
},
{
"type": "formula",
"field": "orientation_threshold",
"expr": "0"
},
{
"type": "formula",
"field": "bias_threshold",
"expr": "25"
},
{
"type": "formula",
"field": "amplitude_pct",
......@@ -72,7 +83,7 @@
},
{
"type": "filter",
"test": "datum.amplitude >= datum.amplitude_threshold && datum.amplitude_pct >= datum.amplitude_pct_threshold"
"test": "datum.amplitude >= datum.amplitude_threshold && datum.amplitude_pct >= datum.amplitude_pct_threshold && min(datum.forward, datum.reverse) >= datum.orientation_threshold"
},
{
"type": "formula",
......@@ -108,6 +119,21 @@
"field": "forwardpct",
"expr": "100.0 / datum.total * datum.forward"
},
{
"type": "formula",
"field": "xlow",
"expr": "min(0, datum.total_corr*1.05)"
},
{
"type": "formula",
"field": "xhigh",
"expr": "max(datum.total*1.05, datum.total_add*1.05)"
},
{
"type": "formula",
"field": "biasmark",
"expr": "50-abs(datum.forwardpct-50) < datum.bias_threshold? '★' : ''"
},
{
"type": "sort",
"by": ["name", "allele", "-total_add", "-total_corr", "-total"]
......@@ -214,14 +240,60 @@
"expr": "datum.offset + datum.barwidth*datum.count"
}
]
},
{
"name": "selectedAlleles",
"modify": [
{
"type": "toggle",
"signal": "clickedAllele",
"field": "allele"
}
],
"transform": [
{
"type": "filter",
"test": "datum.allele"
}
]
}
],
"signals": [
{
"name": "clickedAllele",
"verbose": true,
"streams": [
{"type": "@alleleSelector:click", "expr": "datum.thedatum"}
]
}
],
"predicates": [
{
"name": "isSelected",
"type": "in",
"item": {"arg": "allele"},
"data": "selectedAlleles",
"field": "allele"
}
],
"scales": [
{
"name": "b",
"type": "ordinal",
"range": ["black", "red"],
"domain": ["", "★"]
},
{
"name": "c",
"type": "ordinal",
"range": ["#5e3c99", "#b2abd2", "#fdb863", "#e66101"],
"domain": ["Shared base", "Correction removed", "Correction shared", "Correction added"]
"domain": ["Genuine reads", "Noise reads", "Noise/recovered overlap", "Recovered reads"]
},
{
"name": "d",
"type": "ordinal",
"range": ["transparent"],
"domain": ["— Strand balance"]
}
],
"marks": [
......@@ -247,6 +319,11 @@
"from": {
"data": "table",
"transform": [
{
"type": "formula",
"field": "thedatum",
"expr": "datum"
},
{
"type": "facet",
"groupby": ["name"]
......@@ -273,8 +350,9 @@
{
"name": "x",
"type": "linear",
"nice": true,
"range": "width",
"domain": {"field": ["total", "total_corr", "total_add"]}
"domain": {"field": ["xlow", "xhigh"]}
},
{
"name": "y",
......@@ -304,7 +382,12 @@
},
{
"type": "y",
"scale": "y"
"scale": "y",
"properties": {
"labels": {
"fill": {"value": "transparent"}
}
}
}
],
"legends": [
......@@ -317,6 +400,17 @@
"fillOpacity": {"value": 0.8}
}
}
},
{
"fill": "d",
"properties": {
"symbols": {
"stroke": {"value": "transparent"}
},
"labels": {
"x": {"value": 2}
}
}
}
],
"marks": [
......@@ -328,7 +422,7 @@
"x2": {"scale": "x", "field": "shared"},
"y": {"scale": "y", "field": "allele", "offset": 1},
"height": {"scale": "y", "band": true, "offset": -2},
"fill": {"scale": "c", "value": "Shared base"},
"fill": {"scale": "c", "value": "Genuine reads"},
"fillOpacity": {"value": 0.8}
}
}
......@@ -341,7 +435,7 @@
"x2": {"scale": "x", "field": "corr_decreased"},
"y": {"scale": "y", "field": "allele", "offset": 1},
"height": {"scale": "y", "band": true, "offset": -2},
"fill": {"scale": "c", "value": "Correction removed"},
"fill": {"scale": "c", "value": "Noise reads"},
"fillOpacity": {"value": 0.8}
}
}
......@@ -354,7 +448,7 @@
"x2": {"scale": "x", "field": "corr_shared"},
"y": {"scale": "y", "field": "allele", "offset": 1},
"height": {"scale": "y", "band": true, "offset": -2},
"fill": {"scale": "c", "value": "Correction shared"},
"fill": {"scale": "c", "value": "Noise/recovered overlap"},
"fillOpacity": {"value": 0.8}
}
}
......@@ -367,7 +461,7 @@
"x2": {"scale": "x", "field": "corr_increased"},
"y": {"scale": "y", "field": "allele", "offset": 1},
"height": {"scale": "y", "band": true, "offset": -2},
"fill": {"scale": "c", "value": "Correction added"},
"fill": {"scale": "c", "value": "Recovered reads"},
"fillOpacity": {"value": 0.8}
}
}
......@@ -402,13 +496,76 @@
"x2": {"scale": "x", "field": "total"},
"y": {"scale": "balance", "field": "forwardpct", "offset": -0.5},
"y2": {"scale": "balance", "field": "forwardpct", "offset": 0.5},
"fill": {"value": "black"}
"fill": {"scale": "b", "field": "biasmark"}
}
}
},
{
"type": "text",
"properties": {
"enter": {
"x": {"scale": "x", "field": "xhigh", "mult": 0.952381, "offset": 5},
"y": {"scale": "balance", "value": 50},
"baseline": {"value": "middle"},
"fill": {"scale": "b", "field": "biasmark"},
"text": {"field": "biasmark"}
}
}
},
{
"type": "text",
"properties": {
"enter": {
"x": {"value": -10},
"y": {"scale": "balance", "value": 50},
"baseline": {"value": "middle"},
"align": {"value": "right"},
"text": {"field": "allele"}
},
"update": {
"fill": {
"rule": [
{
"predicate": {
"name": "isSelected",
"allele": {"field": "thedatum"}
},
"value": "green"
},
{"value": "black"}
]
},
"fontStyle": {
"rule": [
{
"predicate": {
"name": "isSelected",
"allele": {"field": "thedatum"}
},
"value": "italic"
},
{"value": "normal"}
]
}
}
}
}
]
},
{
"name": "alleleSelector",
"type": "rect",
"properties": {
"enter": {
"x": {"value": 0},
"width": {"field": {"group": "width"}},
"y": {"scale": "y", "field": "allele"},
"height": {"scale": "y", "band": true},
"fill": {"value": "transparent"}
}
}
}
]
}
]
}
}
\ No newline at end of file
Markdown is supported
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