Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 28 deletions
fdstools/vis/samplevis/index.html
View file @ 3a495653
......@@ -188,6 +188,18 @@
td.num {
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 {
white-space: normal !important;
width: 1em;
......@@ -398,6 +410,18 @@
.num {
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 {
white-space: normal !important;
}
......@@ -516,23 +540,23 @@
<div class="optionheader">Display options</div>
<table>
<tr>
<td colspan="2"><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 for="graphwidth">Graph width</label></td>
<td><label><input type="text" value="600" id="graphwidth" size="3" class="num"> px</label></td>
</tr>
<tr>
<td colspan="2"><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 for="barwidth">Bar width</label></td>
<td><label><input type="text" value="15" id="barwidth" size="3" class="num"> px</label></td>
</tr>
<tr>
<td colspan="2"><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 for="subgraphoffset">Marker spacing</label></td>
<td><label><input type="text" value="70" id="subgraphoffset" size="3" class="num"> px</label></td>
</tr>
<tr>
<td colspan="2"><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 for="subgraphoffset">Truncate sequences to</label></td>
<td><label><input type="text" value="70" id="maxseqlen" size="3" class="num"> characters</label></td>
</tr>
<tr>
<td colspan="4">
<td colspan="2">
<label>
<input type="checkbox" id="splitmarkers" checked>
Split markers
......@@ -540,7 +564,7 @@
</td>
</tr>
<tr>
<td colspan="4">
<td colspan="2">
<label>
<input type="checkbox" id="commonrange" disabled>
Common axis range
......@@ -549,7 +573,7 @@
</td>
</tr>
<tr>
<td colspan="4">
<td colspan="2">
<label>
<input type="checkbox" id="sortstrbylength">
Sort STR alleles by length
......@@ -557,14 +581,20 @@
</td>
</tr>
<tr>
<td>Axis scale</td>
<td colspan="2"><label><input type="radio" name="scale" value="linear" id="scaleLinear" checked> Linear</label></td>
<td><label><input type="radio" name="scale" value="sqrt" id="scaleLog"> Square root</label></td>
</tr>
<tr class="noprint">
<td>Renderer</td>
<td colspan="2"><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>
<td colspan="2">
<table>
<tr>
<td>Axis scale</td>
<td><label><input type="radio" name="scale" value="linear" id="scaleLinear" checked> Linear</label></td>
<td><label><input type="radio" name="scale" value="sqrt" id="scaleLog"> Square root</label></td>
</tr>
<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>
</table>
</div>
......@@ -1003,13 +1033,27 @@ function updateTable(i){
table.setAttribute("class", "markertable");
table.style.minWidth = graphs[i].signal("width") + "px";
var row = table.insertRow();
var cell;
row.insertCell().appendChild(document.createTextNode("Marker"));
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("PctOfMarker")).parentNode.setAttribute("class", "num");
row.insertCell().appendChild(document.createTextNode("PctCorrected")).parentNode.setAttribute("class", "num");
row.insertCell().appendChild(document.createTextNode("PctRecovery")).parentNode.setAttribute("class", "num");
cell = row.insertCell();
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("Notes"));
......@@ -1022,13 +1066,34 @@ function updateTable(i){
row = table.insertRow();
row.insertCell().appendChild(document.createTextNode(datum.marker));
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_sum.toFixed(2) + "%")).parentNode.setAttribute("class", "num");
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((datum.total_add/datum.total_added*100).toFixed(2) + "%")).parentNode.setAttribute("class", "num");
var cell = row.insertCell();
row.insertCell().appendChild(document.createTextNode(
(corrAmount < 0? "" : "+") + (datum.total_added-datum.total).toFixed()
)).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.setAttribute("class", "num");
if(datum.biasmark !== "")
......
notes.txt
View file @ 3a495653
To-do:
* 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 freely adjust the sorting (currently CE length toggle only).
* 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