Commit 72cffc6d authored by Penom Nom's avatar Penom Nom
Browse files

Add read graph.

parent 6c368985
......@@ -33,67 +33,27 @@ var i = 0 ;
$(function () {
$(".depth-stat-view-btn").click(function() {
//Set dialog window
// Set dialog window
$("#modal-label-tmpl").html("NG6 <small> " + $("#analyse_name").val() + "</small>");
$("#modal-body-tmpl").html('<div id="highcharts_container"></div>');
$("#modal-foot-tmpl").html('<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>');
$("#highcharts_container").css('max-width', '700px');
$("#ng6modal").css('width', 'auto');
//Retrieve values
var clustering_names = new Array() ;
var clustering_data = new Array() ;
$(":checked[id^=chk_sample_]").each(function(){
var index = $(this).attr("id").split("_")[2];
var min = parseFloat( $("#min_"+index).text() );
var lq = parseFloat( $("#lq_"+index).text() );
var median = parseFloat( $("#median_"+index).text() );
var uq = parseFloat( $("#uq_"+index).text() );
var max = parseFloat( $("#max_"+index).text() );
clustering_data.push( new Array(min, lq, median, uq, max) );
clustering_names.push( $("#sample_id_"+index).text() );
});
//Build chart
var chart = new Highcharts.Chart({
chart: {
type: 'boxplot',
renderTo: 'highcharts_container',
},
title: {
text: 'Clustering depths'
},
legend: {
enabled: false
},
xAxis: {
categories: clustering_names
},
yAxis: {
title: {
text: 'Depths'
}
},
series: [{
name: 'Depths',
data: clustering_data
}],
credits: {
enabled: false
},
});
// Build graph
build_depth_boxplot( 'highcharts_container' );
//Display
// Display
$("#ng6modal").modal();
})
$(".depth-hist-view-btn").click(function() {
//Set dialog window
// Set dialog window
$("#modal-label-tmpl").html("NG6 <small> " + $("#analyse_name").val() + "</small>");
$("#modal-body-tmpl").html('<div id="highcharts_container"></div>');
$("#modal-foot-tmpl").html(
'<button id="linear_scale" class="btn" aria-hidden="true">Linear scale</button>' +
'<button id="log_scale" class="btn btn-primary disabled" aria-hidden="true">Log scale</button>' +
/*'<button id="linear_scale" class="btn" aria-hidden="true">Linear scale</button>' +
'<button id="log_scale" class="btn btn-primary disabled" aria-hidden="true">Log scale</button>' +*/
'<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>'
);
$("#highcharts_container").css('width', '845px');
......@@ -104,22 +64,42 @@ $(function () {
build_depth_histogram( 'highcharts_container', 'logarithmic' );
// Add listeners
$("#linear_scale").click(function() {
$("#highcharts_container").hightcharts().yAxis[0].update({ type: 'linear' });
/*$("#linear_scale").click(function() {
$("#highcharts_container").empty();
build_depth_histogram( 'highcharts_container', 'linear' );
$("#linear_scale").attr("class", "btn btn-primary disabled");
$("#log_scale").attr("class", "btn");
$("#ng6modal").modal();
});
$("#log_scale").click(function() {
$("#highcharts_container").hightcharts().yAxis[0].update({ type: 'logarithmic' });
$("#highcharts_container").empty();
build_depth_histogram( 'highcharts_container', 'logarithmic' );
$("#linear_scale").attr("class", "btn");
$("#log_scale").attr("class", "btn btn-primary disabled");
});
$("#ng6modal").modal();
});*/
//Display
// Display
$("#ng6modal").modal();
});
$(".tree-view-btn").click(function() {
$(".reads-curve-view-btn").click(function() {
// Set dialog window
$("#modal-label-tmpl").html("NG6 <small> " + $("#analyse_name").val() + "</small>");
$("#modal-body-tmpl").html('<div id="highcharts_container"></div>');
$("#modal-foot-tmpl").html('<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>');
$("#highcharts_container").css('width', '845px');
$("#ng6modal").css('width', 'auto');
$("#ng6modal").css('margin-left', '-435px');
// Build graph
build_reads_curve( 'highcharts_container' );
// Display
$("#ng6modal").modal();
});
$(".linkage-tree-view-btn").click(function() {
//Set dialog window
$("#modal-label-tmpl").html("NG6 <small> " + $("#analyse_name").val() + "</small>");
$("#modal-body-tmpl").html('<div id="d3_container"></div>');
......@@ -189,28 +169,153 @@ $(function () {
return 1 + depth
}
/**
* Draws the boxplot of the clusters depths.
*/
function build_depth_boxplot( container ) {
//Retrieve values
var clustering_names = new Array() ;
var clustering_data = new Array() ;
$(":checked[id^=chk_sample_]").each(function(){
var index = $(this).attr("id").split("_")[2];
var min = parseFloat( $("#min_"+index).text() );
var lq = parseFloat( $("#lq_"+index).text() );
var median = parseFloat( $("#median_"+index).text() );
var uq = parseFloat( $("#uq_"+index).text() );
var max = parseFloat( $("#max_"+index).text() );
clustering_data.push( new Array(min, lq, median, uq, max) );
clustering_names.push( $("#sample_id_"+index).text() );
});
//Build chart
var chart = new Highcharts.Chart({
chart: {
type: 'boxplot',
renderTo: container,
},
title: {
text: 'Clustering depths'
},
legend: {
enabled: false
},
xAxis: {
categories: clustering_names
},
yAxis: {
title: {
text: 'Depths'
}
},
series: [{
name: 'Depths',
data: clustering_data
}],
credits: {
enabled: false
},
});
}
/**
* Draws the curve that represents the cumulative percentage of reads by the cluster depth.
*/
function build_reads_curve( container ) {
//Retrieve values
var counts_data = new Array() ;
var max_depth = 0 ;
$(":checked[id^=chk_sample_]").each(function(){
var curve_idx = counts_data.length ;
var index = $(this).attr("id").split("_")[2] ;
var nb_reads = parseInt($("#seq_"+index).text().replace(/\s+/g, '')) ;
var counts = $("#counts_"+index).val().split(",") ;
var depths = $("#depths_"+index).val().split(",") ;
counts_data.push(
{ name: $("#sample_id_"+index).text(),
data: new Array(),
pointStart: 1 }
);
max_depth = Math.max( max_depth, parseInt(depths[depths.length-1]) );
var previous_count = 0 ;
for (var i=0 ; i<counts.length ; i++) {
previous_count += parseInt(counts[i]) * parseInt(depths[i]) ;
cumulative_prct = (previous_count/nb_reads)*100
counts_data[curve_idx]["data"].push( new Array(parseInt(depths[i]), Math.round(cumulative_prct*100)/100) );
}
});
//Build chart
var chart = new Highcharts.Chart({
chart: {
type: 'area',
renderTo: container,
},
title: {
text: 'Cumulative reads proportion by cluster depth'
},
xAxis: {
title: {
text: 'Clusters depths'
},
tickInterval: Math.max(1, parseInt(max_depth/10))
},
yAxis: {
title: {
text: '% reads'
},
},
tooltip: {
formatter:function() {
tooltip_head = '<b>Depths <= ' + this.x + '</b>' ;
tooltip_body = '' ;
for( var i=0 ; i<this.points.length ; i++) {
var pcnt = (this.points[i].point.y / sum_data[this.points[i].series.name]) * 100;
tooltip_body += '<tr>' +
'<td style="color:' + this.points[i].series.color +'">' + this.points[i].series.name + ' : </td>' +
'<td> ' + this.points[i].point.y + '% </td>' +
'<td> reads</td>' +
'</tr>' ;
}
return tooltip_head + '<table>' + tooltip_body + '</table>' ;
},
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.1,
borderWidth: 0
}
},
series: counts_data,
credits: {
enabled: false
},
});
}
/**
* Draws the histogram that represents the number of clusters by the cluster depth.
*/
function build_depth_histogram( container, scale_type ) {
//Retrieve values
sum_data = new Array();
var max_depth = 0 ;
var counts_data = new Array() ;
$(":checked[id^=chk_sample_]").each(function(){
var hist_idx = counts_data.length ;
var index = $(this).attr("id").split("_")[2] ;
var counts = $("#counts_"+index).val().split(",") ;
var depths = $("#depths_"+index).val().split(",") ;
max_depth = Math.max( max_depth, parseInt(depths[depths.length-1]) );
var counts_at_scale = new Array();
counts_data.push(
{ name: $("#sample_id_"+index).text(),
data: new Array(),
pointStart: 1 }
);
for (var i=0 ; i<counts.length ; i++) {
while( counts_at_scale.length < parseInt(depths[i]) ) {
counts_at_scale.push(0) ;
}
counts_at_scale[counts_at_scale.length -1] = parseInt( counts[i] );
counts_data[hist_idx]["data"].push( new Array(parseInt(depths[i]), parseInt( counts[i] )) );
}
counts_data.push(
{ name: $("#sample_id_"+index).text(),
data: counts_at_scale,
pointStart: 1 }
);
sum_data[$("#sample_id_"+index).text()] = parseFloat( $("#count_"+index).text() );
});
......
......@@ -51,13 +51,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
{assign var="array_depths" value=","|explode:$sample_results["default"].depths}
{assign var="min" value=$array_depths[0]}
{assign var="max" value=$array_depths[count($array_depths)-1]}
<td id="count_{$i}">{$sample_results["default"].nb_observations}</td>
<td id="seq_{$i}">{$sample_results["default"].nb_sequences}</td>
<td id="count_{$i}">{$sample_results["default"].nb_observations|number_format:0:' ':' '}</td>
<td id="seq_{$i}">{$sample_results["default"].nb_sequences|number_format:0:' ':' '}</td>
<td id="min_{$i}">{$min}</td>
<td id="lq_{$i}">{$sample_results["default"].lower_quartile}</td>
<td id="median_{$i}">{$sample_results["default"].median}</td>
<td id="uq_{$i}">{$sample_results["default"].upper_quartile}</td>
<td id="max_{$i}">{$max}</td>
<td id="max_{$i}">{$max|number_format:0:' ':' '}</td>
</tr>
{$i = $i + 1}
{/foreach}
......@@ -68,7 +68,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
With selection :
<button type="button" class="btn multiple-selection-btn depth-stat-view-btn"><i class=" icon-signal"></i> Dispersion</button>
<button type="button" class="btn multiple-selection-btn depth-hist-view-btn"><i class=" icon-signal"></i> Depths</button>
<button type="button" class="btn single-selection-btn tree-view-btn"><i class=" icon-signal"></i> Linkages</button>
<button type="button" class="btn multiple-selection-btn reads-curve-view-btn"><i class=" icon-signal"></i> Reads</button>
<button type="button" class="btn single-selection-btn linkage-tree-view-btn"><i class=" icon-signal"></i> Linkages</button>
</th>
</tr>
</tfoot>
......
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