Commit 3a495653 authored by Hoogenboom, Jerry's avatar Hoogenboom, Jerry
Browse files

Updates to Samplevis HTML visualisations (mostly the tables)

* Added Noise column to the allele tables.
* Added number of reads before correction to the allele tables.
* Added raw numbers of reads to the Correction and Recovery columns of
  the allele tables.
* Fixed issue with Samplevis HTML visualisations in Firefox and Internet
  Explorer that caused an uncessesary horizontal scroll bar in the
  options panel.
parent 0065d2cb
...@@ -188,6 +188,18 @@ ...@@ -188,6 +188,18 @@
td.num { td.num {
text-align: right; text-align: right;
} }
td.lefthalf {
text-align: right;
border-right: none;
padding-right: 0px;
margin-right: 0px;
}
td.lefthalf+td {
border-left: none;
padding-left: 0px;
margin-left: 0px;
width: 1em !important;
}
td.wrap { td.wrap {
white-space: normal !important; white-space: normal !important;
width: 1em; width: 1em;
...@@ -398,6 +410,18 @@ ...@@ -398,6 +410,18 @@
.num { .num {
text-align: right; text-align: right;
} }
td.lefthalf {
text-align: right;
border-right: none;
padding-right: 0px;
margin-right: 0px;
}
td.lefthalf+td {
border-left: none;
padding-left: 0px;
margin-left: 0px;
width: 1em !important;
}
td.wrap { td.wrap {
white-space: normal !important; white-space: normal !important;
} }
...@@ -516,23 +540,23 @@ ...@@ -516,23 +540,23 @@
<div class="optionheader">Display options</div> <div class="optionheader">Display options</div>
<table> <table>
<tr> <tr>
<td colspan="2"><label for="graphwidth">Graph width</label></td> <td><label for="graphwidth">Graph width</label></td>
<td colspan="2"><label><input type="text" value="600" id="graphwidth" size="3" class="num"> px</label></td> <td><label><input type="text" value="600" id="graphwidth" size="3" class="num"> px</label></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><label for="barwidth">Bar width</label></td> <td><label for="barwidth">Bar width</label></td>
<td colspan="2"><label><input type="text" value="15" id="barwidth" size="3" class="num"> px</label></td> <td><label><input type="text" value="15" id="barwidth" size="3" class="num"> px</label></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><label for="subgraphoffset">Marker spacing</label></td> <td><label for="subgraphoffset">Marker spacing</label></td>
<td colspan="2"><label><input type="text" value="70" id="subgraphoffset" size="3" class="num"> px</label></td> <td><label><input type="text" value="70" id="subgraphoffset" size="3" class="num"> px</label></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><label for="subgraphoffset">Truncate sequences to</label></td> <td><label for="subgraphoffset">Truncate sequences to</label></td>
<td colspan="2"><label><input type="text" value="70" id="maxseqlen" size="3" class="num"> characters</label></td> <td><label><input type="text" value="70" id="maxseqlen" size="3" class="num"> characters</label></td>
</tr> </tr>
<tr> <tr>
<td colspan="4"> <td colspan="2">
<label> <label>
<input type="checkbox" id="splitmarkers" checked> <input type="checkbox" id="splitmarkers" checked>
Split markers Split markers
...@@ -540,7 +564,7 @@ ...@@ -540,7 +564,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="4"> <td colspan="2">
<label> <label>
<input type="checkbox" id="commonrange" disabled> <input type="checkbox" id="commonrange" disabled>
Common axis range Common axis range
...@@ -549,7 +573,7 @@ ...@@ -549,7 +573,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="4"> <td colspan="2">
<label> <label>
<input type="checkbox" id="sortstrbylength"> <input type="checkbox" id="sortstrbylength">
Sort STR alleles by length Sort STR alleles by length
...@@ -557,14 +581,20 @@ ...@@ -557,14 +581,20 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Axis scale</td> <td colspan="2">
<td colspan="2"><label><input type="radio" name="scale" value="linear" id="scaleLinear" checked> Linear</label></td> <table>
<td><label><input type="radio" name="scale" value="sqrt" id="scaleLog"> Square root</label></td> <tr>
</tr> <td>Axis scale</td>
<tr class="noprint"> <td><label><input type="radio" name="scale" value="linear" id="scaleLinear" checked> Linear</label></td>
<td>Renderer</td> <td><label><input type="radio" name="scale" value="sqrt" id="scaleLog"> Square root</label></td>
<td colspan="2"><label><input type="radio" name="renderer" value="svg" id="renderSVG" checked> SVG</label></td> </tr>
<td><label><input type="radio" name="renderer" value="canvas" id="renderCanvas"> Canvas</label></td> <tr class="noprint">
<td>Renderer</td>
<td><label><input type="radio" name="renderer" value="svg" id="renderSVG" checked> SVG</label></td>
<td><label><input type="radio" name="renderer" value="canvas" id="renderCanvas"> Canvas</label></td>
</tr>
</table>
</td>
</tr> </tr>
</table> </table>
</div> </div>
...@@ -1003,13 +1033,27 @@ function updateTable(i){ ...@@ -1003,13 +1033,27 @@ function updateTable(i){
table.setAttribute("class", "markertable"); table.setAttribute("class", "markertable");
table.style.minWidth = graphs[i].signal("width") + "px"; table.style.minWidth = graphs[i].signal("width") + "px";
var row = table.insertRow(); var row = table.insertRow();
var cell;
row.insertCell().appendChild(document.createTextNode("Marker")); row.insertCell().appendChild(document.createTextNode("Marker"));
row.insertCell().appendChild(document.createTextNode("Allele")); row.insertCell().appendChild(document.createTextNode("Allele"));
row.insertCell().appendChild(document.createTextNode("Reads")).parentNode.setAttribute("class", "num"); cell = row.insertCell();
cell.appendChild(document.createTextNode("Reads"));
cell.setAttribute("class", "num");
cell.setAttribute("colspan", "2");
row.insertCell().appendChild(document.createTextNode("PctOfHighest")).parentNode.setAttribute("class", "num"); row.insertCell().appendChild(document.createTextNode("PctOfHighest")).parentNode.setAttribute("class", "num");
row.insertCell().appendChild(document.createTextNode("PctOfMarker")).parentNode.setAttribute("class", "num"); row.insertCell().appendChild(document.createTextNode("PctOfMarker")).parentNode.setAttribute("class", "num");
row.insertCell().appendChild(document.createTextNode("PctCorrected")).parentNode.setAttribute("class", "num"); cell = row.insertCell();
row.insertCell().appendChild(document.createTextNode("PctRecovery")).parentNode.setAttribute("class", "num"); cell.appendChild(document.createTextNode("Correction"));
cell.setAttribute("class", "num");
cell.setAttribute("colspan", "2");
cell = row.insertCell();
cell.appendChild(document.createTextNode("Recovery"));
cell.setAttribute("class", "num");
cell.setAttribute("colspan", "2");
cell = row.insertCell();
cell.appendChild(document.createTextNode("Noise"));
cell.setAttribute("class", "num");
cell.setAttribute("colspan", "2");
row.insertCell().appendChild(document.createTextNode("PctForward")).parentNode.setAttribute("class", "num"); row.insertCell().appendChild(document.createTextNode("PctForward")).parentNode.setAttribute("class", "num");
row.insertCell().appendChild(document.createTextNode("Notes")); row.insertCell().appendChild(document.createTextNode("Notes"));
...@@ -1022,13 +1066,34 @@ function updateTable(i){ ...@@ -1022,13 +1066,34 @@ function updateTable(i){
row = table.insertRow(); row = table.insertRow();
row.insertCell().appendChild(document.createTextNode(datum.marker)); row.insertCell().appendChild(document.createTextNode(datum.marker));
row.insertCell().appendChild(document.createTextNode(datum.sequence)).parentNode.setAttribute("class", "wrap"); row.insertCell().appendChild(document.createTextNode(datum.sequence)).parentNode.setAttribute("class", "wrap");
row.insertCell().appendChild(document.createTextNode(datum.total_added.toFixed())).parentNode.setAttribute("class", "num"); row.insertCell().appendChild(document.createTextNode(
datum.total == datum.total_added? " " : (datum.total.toFixed() + " \u2192\u00a0")
)).parentNode.setAttribute("class", "lefthalf");
row.insertCell().appendChild(document.createTextNode(
datum.total_added.toFixed()
)).parentNode.setAttribute("class", "num");
row.insertCell().appendChild(document.createTextNode(datum.pct_of_max.toFixed(2) + "%")).parentNode.setAttribute("class", "num"); row.insertCell().appendChild(document.createTextNode(datum.pct_of_max.toFixed(2) + "%")).parentNode.setAttribute("class", "num");
row.insertCell().appendChild(document.createTextNode(datum.pct_of_sum.toFixed(2) + "%")).parentNode.setAttribute("class", "num"); row.insertCell().appendChild(document.createTextNode(datum.pct_of_sum.toFixed(2) + "%")).parentNode.setAttribute("class", "num");
var corrAmount = datum.total_added/datum.total*100-100; var corrAmount = datum.total_added/datum.total*100-100;
row.insertCell().appendChild(document.createTextNode((corrAmount < 0? "" : "+") + corrAmount.toFixed(2) + "%")).parentNode.setAttribute("class", "num"); row.insertCell().appendChild(document.createTextNode(
row.insertCell().appendChild(document.createTextNode((datum.total_add/datum.total_added*100).toFixed(2) + "%")).parentNode.setAttribute("class", "num"); (corrAmount < 0? "" : "+") + (datum.total_added-datum.total).toFixed()
var cell = row.insertCell(); )).parentNode.setAttribute("class", "lefthalf");
row.insertCell().appendChild(document.createTextNode(
"\u00a0(" + (corrAmount < 0? "" : "+") + corrAmount.toFixed(2) + "%)"
)).parentNode.setAttribute("class", "num");
row.insertCell().appendChild(document.createTextNode(
datum.total_add? datum.total_add.toFixed() : "0"
)).parentNode.setAttribute("class", "lefthalf");
row.insertCell().appendChild(document.createTextNode(
"\u00a0(" + (datum.total_add/datum.total_added*100).toFixed(2) + "%)"
)).parentNode.setAttribute("class", "num");
row.insertCell().appendChild(document.createTextNode(
datum.total_noise? datum.total_noise.toFixed() : "0"
)).parentNode.setAttribute("class", "lefthalf");
row.insertCell().appendChild(document.createTextNode(
"\u00a0(" + (datum.total_noise/datum.total*100).toFixed(2) + "%)"
)).parentNode.setAttribute("class", "num");
cell = row.insertCell();
cell.appendChild(document.createTextNode(datum.forwardpct.toFixed(2) + "%")); cell.appendChild(document.createTextNode(datum.forwardpct.toFixed(2) + "%"));
cell.setAttribute("class", "num"); cell.setAttribute("class", "num");
if(datum.biasmark !== "") if(datum.biasmark !== "")
......
To-do: To-do:
* Samplevis: * Samplevis:
* Add absolute number of reads before correction, noise reads, and recovered
reads to the tables in HTML visualisations.
* Option to choose complete table download (all columns, not all rows). * Option to choose complete table download (all columns, not all rows).
* Option to freely adjust the sorting (currently CE length toggle only). * Option to freely adjust the sorting (currently CE length toggle only).
* When we have them, add default values to table filtering (for reference). * When we have them, add default values to table filtering (for reference).
......
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