Commit fad84abc authored by Magali Monnoye's avatar Magali Monnoye
Browse files

fichiers html et tsv

parent 72fe98cc
Pipeline #44518 canceled with stage
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!DOCTYPE html>
<!--
# Copyright (C) 2015 INRA
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<html>
<head>
<title>FROGS Remove Chimera</title>
<meta charset="UTF-8">
<meta name="version" content="3.2.2">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"></link>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"></link>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
#js-alert {
width: 90%;
margin-right: auto;
margin-left: auto;
}
#content {
width: 90%;
margin-right: auto;
margin-left: auto;
}
.clear {
clear: both;
height: 0px;
width: 100%;
float: none !important;
}
.page-item.active .page-link {
z-index: 1;
color: #fff;
background-color: #8EADAC;
border-color: #8EADAC;
}
.btn {
color: #fff;
border:#8EADAC;
background-color: #8EADAC;
}
.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
}
.btn:hover{
color: #fff;
border:#648a89;
background-color: #648a89;
}
.pb-2, .py-2 {
padding-bottom: 1.5rem !important;
margin-bottom: 2rem !important;
margin-top: 4rem !important;
}
.pb-2-first{
padding-bottom: 1.5rem !important;
margin-bottom: 2rem !important;
margin-top: 1rem !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{
color: #fff;
background-color: #8EADAF;
border-color: #dee2e6 #dee2e6 #fff;
}
a {
color: #8EAEAF;
}
a:hover{
color:#648a89;
}
.page-link{
color: #8EAEAF;
}
.page-link:hover{
}
.page-link:not(:disabled):not(.disabled) {
color: #8EAEAF;
}
.page-item.active .page-link {
color: #fff;
}
.highcharts-button > path{
stroke:#fff !important;
fill:#8EADAC !important;
}
g.highcharts-button{
cursor:pointer !important;
}
g.highcharts-button:hover{
color: #fff;
border:#648a89;
background-color: #648a89;
background-color: #648a89;
cursor:pointer !important;
}
</style>
<!-- JS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/8.2.0/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/8.2.0/modules/exporting.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
/*
* HTMLTable.js 0.1.0 - HTMLTable Library
*
* Copyright (c) 2015 Escudie Frederic
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
*/
function HTMLtable(e){var t,r,n=e,a=";";this.deleteColumns=function(e){for(var a=n.getElementsByTagName("tr"),o=0;o<a.length;o++){s=0;var i=a[o].getElementsByTagName("td");0==i.length&&(i=a[o].getElementsByTagName("th"));for(var v=0,s=0;s<t[1];s++)if(!r[o][s]){var f=i[v].getAttribute("colspan");if(null!=f)for(var m=0;f>m;m++){if(in_array(s+m,e)){var u=i[v].getAttribute("colspan");u-1==0?i[v].removeAttribute("colspan"):i[v].setAttribute("colspan",u-1)}if(null==i[v].getAttribute("colspan")){var h=i[v];a[o].removeChild(h),v--}}else if(in_array(s,e)){var h=i[v];a[o].removeChild(h),v--}v++}}l(),g()},this.filter=function(e,a){var l=new RegExp(e),g=new Array;null!=a&&a||(g.c0=!0);for(var o=n.getElementsByTagName("tr"),i=0;i<o.length;i++){f=0;var v=o[i].getElementsByTagName("td");if(0!=v.length)for(var s=0,f=0;f<t[1];f++)r[i][f]||(l.test(v[s].innerHTML)&&(g["c"+f]=!0),s++)}for(var m=new Array,u=0;u<t[1];u++)void 0===g["c"+u]&&m.push(u);this.deleteColumns(m)},this.getModel=function(){return n};var l=function(){for(var e=0,r=0,a=n.getElementsByTagName("tr"),l=0;l<a.length;l++){var g=0;e++;var o=a[l].getElementsByTagName("td");0==o.length&&(o=a[l].getElementsByTagName("th"));for(var i=0;i<o.length;i++){var v=o[i].getAttribute("colspan");g+=null==v?1:parseInt(v)}g>r&&(r=g)}t=new Array(2),t[0]=e,t[1]=r},g=function(){r=new Array(t[0]);for(var e=0;e<t[0];e++){r[e]=new Array(t[1]);for(var a=0;a<t[1];a++)r[e][a]=!1}for(var l=n.getElementsByTagName("tr"),g=0;g<l.length;g++){v=0;var o=l[g].getElementsByTagName("td");0==o.length&&(o=l[g].getElementsByTagName("th"));for(var i=0,v=0;v<t[1];v++)if(!r[g][v]){var s=0,f=0,m=o[i].getAttribute("rowspan");null!=m&&(s=parseInt(m)-1);var u=o[i].getAttribute("colspan");null!=u&&(f=parseInt(u)-1);for(var h=s;h>=0;h--)for(var y=f;y>=0;y--)(0!=h||0!=y)&&(r[g+h][v+y]=!0);i++}}};this.replace=function(e,a,l){var g=new RegExp(e);null==a&&(a=""),null==l&&(l="");for(var o=n.getElementsByTagName("tr"),i=0;i<o.length;i++){f=0;var v=o[i].getElementsByTagName("td");if(0!=v.length)for(var s=0,f=0;f<t[1];f++)if(!r[i][f]){var m=g.exec(v[s].innerHTML);null!=m&&(void 0===m[1]&&(m[1]=""),v[s].innerHTML=a+m[1]+l),s++}}},this.toCSV=function(){for(var e="",l=n.getElementsByTagName("tr"),g=0;g<l.length;g++){var o=l[g].getElementsByTagName("td");0==o.length&&(o=l[g].getElementsByTagName("th"));for(var i=0,v=0;v<t[1];v++)r[g][v]||(e+=o[i].innerHTML,i++),e+=a;e=e.substr(0,e.length-1)+"\n"}return e},l(),g()}var in_array=function(e,t){for(var r in t)if(t[r]==e)return!0;return!1};
/*
* dataTableExtractor.plugin.js 0.1.0 - datatableExport Library
*
* Copyright (c) 2015 Escudie Frederic
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
*/
!function(t){t.fn.datatableExport=function(a){var e={anchor_id:t(this).attr("id"),table_id:null,csv_separator:";",omitted_columns:[]},n=t.extend(e,a);if(!t(this).length)throw"The element where the datatableExport is called does not exist.";if(void 0==n.anchor_id)throw"The datatableExport plugin must be called on an element with id.";if(null==n.table_id)throw"You must set the table_id parameter in datatableExport plugin.";if(!t("#"+n.table_id))throw"The datatable '#"+n.table_id+"' cannot be retieve in DOM.";return this.each(function(){var a=t(this);a.on("click",function(){t.fn.datatableExport.csv(n.anchor_id,n.table_id,n.csv_separator,n.omitted_columns)})})},t.fn.datatableExport.cleanCellMarkup=function(a,e){t.parseHTML(e);t("#"+a).append('<div class="hidden data-tmp">'+e+"</div>"),t("#"+a+" .data-tmp").find("input").each(function(){var a="";a=t(this).is(":checkbox")?t(this).is(":checked")?"true":"false":t(this).val(),t(this).replaceWith(a)});var n=t("#"+a+" .data-tmp").text();return t("#"+a+" .data-tmp").remove(),n},t.fn.datatableExport.csv=function(a,e,n,i){var l="",r=t("#"+e).DataTable(),d=t("#"+e+" thead")[0],o=new HTMLtable(d.cloneNode(!0));o.deleteColumns(i),l+=o.toCSV();var c=r.rows().data();t.each(c,function(e,n){for(var r="",d=0;d<n.length;d++)-1==t.inArray(d,i)&&(r+='"'+t.fn.datatableExport.cleanCellMarkup(a,n[d])+'";');""!=r&&(r=r.slice(0,-1)),l+=r+"\n"}),t("#"+a+"-extract-csv").length||t("#"+a).append('<a id="'+a+'-extract-csv" href="data:text/csv;charset=UTF-8,'+encodeURI(l)+'" download="data.csv" style="display:none;"></a>'),t("#"+a+"-extract-csv")[0].click()}}(jQuery);
</script>
<script type="text/javascript">
/**
* Returns the string representation of the number.
* @param pValue {Float} The number to process.
* @return {String} The string representation (example: 12856892.11111 => 12,856,892.11).
*/
var numberDisplay = function( pValue ){
var new_val = "" ;
if( ("" + pValue + "").indexOf(".") != -1 ){
new_val = pValue.toFixed(2).replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
} else {
new_val = pValue.toFixed().replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
}
return new_val ;
}
/**
* Returns the HTML table representation of the data.
* @param pTitle {String} The title of the table.
* @param pCategories {Array} The title of each column.
* @param pData {Array} 2D matrix with row and column data.
* @return {String} The HTML table representation.
*/
var table = function( pTitle, pCategories, pData ) {
// Header
var table_header = '' ;
var table_header_line = "" ;
for(var idx = 0 ; idx < pCategories.length ; idx++){
table_header_line += " <th>" + pCategories[idx] + "</th>\n" ;
}
table_header += " <tr>\n" + table_header_line + " </tr>\n" ;
table_header = " <thead>\n" + table_header + " </thead>\n" ;
// Body
var table_body = '' ;
for(var data_idx = 0 ; data_idx < pData.length ; data_idx++){
var table_body_row = "" ;
for(var category_idx = 0 ; category_idx < pCategories.length ; category_idx++){
if( typeof pData[data_idx][category_idx] === "number" ) {
table_body_row += " <td>" + numberDisplay(pData[data_idx][category_idx]) + "</td>\n" ;
} else {
table_body_row += " <td>" + pData[data_idx][category_idx] + "</td>\n" ;
}
}
table_body += " <tr>\n" + table_body_row + " </tr>\n" ;
}
table_body = " <tbody>\n" + table_body + " </tbody>\n" ;
return '<table class="table table-striped table-bordered">\n' + table_header + table_body + "</table>\n" ;
}
/**
* Returns hash use to init HightChart object (without 'type').
* @param pTitle {String} The title of the chart.
* @param pXTitle {String} The xAxis title.
* @param pYTitle {String} The yAxis title.
* @param pXCategories {Array} The title of each category (x scale labels).
* @param pData {Array} The HightChart series.
* @return {Hash} The hash.
* @warning This method use HightChart xAxis.categories.
*/
var chartplot = function( pTitle, pXTitle, pYTitle, pXCategories, pData ) {
var chart = {
title: {
text: pTitle
},
xAxis: {},
yAxis: {
title: {
text: pYTitle
}
},
series: pData,
credits: {
enabled: false
},
exporting:{buttons: {contextButton: { symbol: 'download' }}},
buttons: {contextButton: {menuItems: ['downloadPNG', 'downloadSVG']}},
navigation: {
buttonOptions: {
theme: {
r: 4,
fill:'#8EADAC',
states: {
hover: {
fill: 'rgb(100, 138, 137)',
stroke:'#8EADAC'
},
select: {
stroke: '#8EADAC',
fill: 'rgb(100, 138, 137)',
}
}
}
}
}
}
if( pXCategories != null ){
chart['xAxis']['categories'] = pXCategories ;
}
if( pXTitle != null ){
chart['xAxis']['title'] = { text: pXTitle } ;
}
if( pData.length <= 1 ) {
chart['legend'] = {'enabled': false};
} else {
chart['legend'] = {'enabled': true};
}
return chart ;
}
var pie_param = function( pTitle, pData, unity ) {
var series = [{
type: 'pie',
name: unity,
data: pData
}]
var plot = chartplot( pTitle, null, null, null, series );
plot['tooltip'] = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
plot['plotOptions'] = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
useHTML : true,
formatter: function () {
return this.point.name + ' : ' + numberDisplay(this.point.y);
},
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
};
return plot ;
};
$(function() {
var detection_categories = ["Clusters kept", "Cluster abundance kept", "Chimeric clusters removed", "Chimeric abundance removed", "Abundance of the most abundant chimera removed", "Individual chimera detected", "Individual chimera abundance detected", "Abundance of the most abundant individual chimera detected"] ;
var detection_series = [{"name": "11_S1_L001", "data": [3240, 25853, 5627, 11945, 206, 5828, 12944, 206]}, {"name": "12_S9_L001", "data": [3067, 23066, 4901, 9199, 102, 5092, 10700, 346]}, {"name": "13_S17_L001", "data": [3648, 30564, 4284, 8037, 54, 4489, 8996, 54]}, {"name": "21_S25_L001", "data": [84, 128, 10, 10, 1, 14, 17, 2]}, {"name": "22_S33_L001", "data": [2949, 24863, 3165, 6299, 49, 3325, 7231, 52]}, {"name": "23_S41_L001", "data": [2858, 28730, 3257, 7519, 234, 3395, 8479, 234]}, {"name": "24_S49_L001", "data": [3195, 26869, 4852, 10086, 160, 5040, 11479, 208]}, {"name": "25_S57_L001", "data": [3791, 34192, 3074, 5859, 151, 3290, 7506, 213]}, {"name": "26_S65_L001", "data": [2976, 24908, 4310, 8734, 81, 4526, 10139, 194]}, {"name": "27_S73_L001", "data": [2771, 22819, 4070, 8615, 272, 4249, 9972, 272]}, {"name": "31_S81_L001", "data": [2928, 26789, 2780, 6298, 124, 2913, 7060, 124]}, {"name": "32_S89_L001", "data": [3390, 28420, 4561, 9206, 182, 4740, 10288, 233]}, {"name": "33_S2_L001", "data": [2918, 24112, 5079, 10661, 363, 5272, 12650, 549]}, {"name": "34_S18_L001", "data": [3362, 27573, 4632, 8648, 54, 4867, 10338, 115]}, {"name": "35_S10_L001", "data": [3321, 27650, 3610, 7329, 158, 3772, 8445, 164]}, {"name": "36_S26_L001", "data": [2325, 21654, 2217, 4574, 94, 2383, 5765, 212]}, {"name": "41_S34_L001", "data": [3050, 29873, 3268, 7773, 184, 3410, 8568, 184]}, {"name": "42_S42_L001", "data": [3429, 34002, 3755, 8394, 371, 3919, 9654, 371]}, {"name": "43_S50_L001", "data": [3973, 38904, 3880, 8670, 179, 4072, 10512, 432]}, {"name": "44_S58_L001", "data": [3956, 35774, 4706, 10874, 240, 4932, 12594, 287]}] ;
var remove_info = {"nb_removed": 55712, "nb_kept": 48711, "abundance_removed": 158730, "abundance_kept": 536743, "nb_ambiguous": 950, "abundance_ambiguous": 78784} ;
// Remove alert
$('#js-alert').remove();
$('#content').removeClass("hidden");
// Radializes colors
Highcharts.setOptions({
colors : ['#8EADAC', '#DE9F73'] ,
lang: {thousandsSep: ','}
});
Highcharts.SVGRenderer.prototype.symbols.download = function (x, y, w, h) {
var path = [
// Arrow stem
'M', x + w * 0.5, y,
'L', x + w * 0.5, y + h * 0.7,
// Arrow head
'M', x + w * 0.3, y + h * 0.5,
'L', x + w * 0.5, y + h * 0.7,
'L', x + w * 0.7, y + h * 0.5,
// Box
'M', x, y + h * 0.9,
'L', x, y + h,
'L', x + w, y + h,
'L', x + w, y + h * 0.9
];
return path;
};
/* Radial gradient ?*/
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.1).get('rgb')] // darken
]
};
});
// Display chimera remove data
var nb_filtered_data = [
['Kept', remove_info['nb_kept']],
['Removed', remove_info['nb_removed']]
];
$('#nb-filtered').highcharts( pie_param('Clusters', nb_filtered_data, 'Clusters') );
var abundance_filtered_data = [
['Kept', remove_info['abundance_kept']],
['Removed', remove_info['abundance_removed']]
];
$('#abundance-filtered').highcharts( pie_param('Abundance', abundance_filtered_data, 'Sequences') );
// Display chimera detection data
var table_categories = detection_categories.slice() ;
table_categories.unshift( "Sample" );
var table_series = new Array();
for( var spl_idx = 0 ; spl_idx < detection_series.length ; spl_idx++ ){
var nb_by_step = detection_series[spl_idx]['data'].slice() ;
nb_by_step.unshift( detection_series[spl_idx]['name'] );
table_series.push( nb_by_step );
};
$('#filter-log').append( table("Chimera detection by sample", table_categories, table_series) );
$('#filter-log table').prop( 'id', 'details-table' );
$('#filter-log table').DataTable({
dom: "<'#details-csv-export'><'row'<'col-sm-5'l><'col-sm-7'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
'lengthMenu': [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
});
$('#details-csv-export').html( '<button class="btn"><span class="fa fa-download" aria-hidden="true"> CSV</span></button>' );
$('#details-csv-export').addClass( 'dataTables_filter' );
$('#details-csv-export').datatableExport({
'table_id': "details-table"
});
});
</script>
</head>
<body>
<!-- Alert -->
<p id="js-alert" class="alert alert-warning">
javascript is needed to display data.<br />
If you try to view this data on galaxy please contact your administrator to authorise javascript or download the file to view.
</p>
<!-- Content -->
<div id="content" class="hidden">
<div id="filter-summary">
<h2 class="pb-2 mt-4 mb-2 border-bottom">Remove summary</h2>
<div class="row">
<div id="nb-filtered" class="col-md-6"></div>
<div id="abundance-filtered" class="col-md-6"></div>
</div>
</div>
<div id="filter-log">
<h2 class="pb-2 mt-4 mb-2 border-bottom">Chimera detection by sample</h2>
<p>Chimera are first detected by sample, and finally only clusters always detected as chimera in all samples including thoses clusters are removed.</p>
</div>
</div>
</body>
</html>
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