Mercurial > repos > frogs > frogs_3_1_0
view test-data/references/01-prepro-vsearch.html @ 0:59bc96331073 draft default tip
planemo upload for repository https://github.com/geraldinepascal/FROGS-wrappers/tree/v3.1.0 commit 08296fc88e3e938c482c631bd515b3b7a0499647
| author | frogs |
|---|---|
| date | Thu, 28 Feb 2019 10:14:49 -0500 |
| parents | |
| children |
line wrap: on
line source
<!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 <https://www.gnu.org/licenses/>. --> <html> <head> <title>FROGS Pre-process</title> <meta charset="UTF-8"> <meta name="version" content="r3.0-v1.0"> <!-- 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"></link> <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; } ul.nav-tabs { margin-bottom: 30px; } .page-item.active .page-link { z-index: 1; color: #fff; background-color: #8EADAC; border-color: #8EADAC; outline: none !important; box-shadow: none !important; } .btn { color: #fff; border:#8EADAC; background-color: #8EADAC; } .btn:focus, .btn:active { outline: none !important; box-shadow: none !important; } .btn:hover:enabled{ color: #fff; border:#648a89; background-color: #648a89; cursor:pointer !important; } .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; } /* ##### THEME FOR CHECKBOXES ##### */ .container { position: relative; padding-left: 0px; margin-bottom: 15px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .container input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #8EADAC; border-radius: 5px; opacity:0.65; } /* On mouse-over, add a grey background color */ .container:hover input ~ .checkmark { background-color: #648a89; } /* When the checkbox is checked, add a blue background */ .container input:checked ~ .checkmark { background-color: #8EADAC; opacity:1; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .container input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .container .checkmark:after { left: 7px; top: 3px; width: 6px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .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; } <!-- .selectpicker{ background-color:rgb(100, 138, 137,0.25); border-color:#8EADAC; } .selectpicker:hover{ background-color:rgb(100, 138, 137,0.25); border-color:#8EADAC; } --> option{ color:green } option:active, option:hover { outline: none !important; } /* make it red instead (with with same width and style) */ option:active, option:hover { box-shadow:red !important; outline-color: red !important; } select { -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; } select:hover { background-color:gren; } option:hover { background-color:yellow; } option { -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; color:blue; background-color:yellow; } </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/4.1.4/highcharts.js"></script> <script type="text/javascript" src="https://code.highcharts.com/4.1.4/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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></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 src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> <script type="text/javascript"> /* * HTMLTable.js 0.1.0 - HTMLTable Library * * Copyright (c) 2015 Escudie Frederic * Licensed under the MIT (https://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 (https://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=$(this).find("button");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"> 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; }; /** * 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 ; } Highcharts.setOptions({ colors : ['#8EADAC', '#DE9F73','#7cb5ec','#434348','#90ed7d','#f7a35c','#8085e9','#f15c80','#e4d354','#2b908f','#f45b5b','#91e8e1'] }); /** * Returns hash use to init HightChart line. * @param pTitle {String} The title of the chart. * @param pXTitle {String} The xAxis title. * @param pYTitle {String} The yAxis title. * @param pXCategories {Array} x scale labels. * @param pData {Array} The HightChart series. * @return {Hash} Parameters to use in Highchart's constructor. */ var lineplot_param = function(pTitle, pXTitle, pYTitle, pXCategories, pData) { return { chart: { type: 'line', zoomType: 'x', selectionMarkerFill: "rgb(222,159,115,0.25)" }, title: { text: pTitle }, xAxis: { title: { text: pXTitle } }, yAxis: { min: 0, title: { text: pYTitle } }, 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)', } } } } }, series: pData, tooltip: { formatter:function() { tooltip_head = '<b>Length ' + this.x + 'nt</b>' ; tooltip_body = '' ; for( var i=0 ; i<this.points.length ; i++) { tooltip_body += '' + '<tr>' + ' <td style="color:' + this.points[i].series.color +'">' + this.points[i].series.name + ': </td>' + ' <td> ' + numberDisplay(this.points[i].point.y) + ' </td>' + ' <td> seq</td>' + '</tr>' ; } return tooltip_head + '<table>' + tooltip_body + '</table>' ; }, shared: true, useHTML: true }, legend: { enabled: true }, credits: { enabled: false } }; } /** * Returns hash use to init HightChart column. * @param pTitle {String} The title of the chart. * @param pYTitle {String} The yAxis title. * @param pCategories {Array} x scale labels. * @param pSeries {Array} The HightChart series. * @param unity {String} Unity used in tooltip. * @return {Hash} Parameters to use in Highchart's constructor. */ // couleur des diapos : bleu #8EADAC, vert : #A2A32F, orange1 #C6792B , taupe #9A866C, orange pastel : #DE9F73 var histogram_param = function( pTitle, nb, pYTitle, pCategories, pSeries, unity ) { var param = { chart: { type: 'column' }, 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)', } } } } }, title: { text: pTitle }, subtitle: { text: 'starting from : ' + nb + ' sequences' }, xAxis: [{ categories: pCategories, crosshair: true, crosshair: { color: "rgb(142,173,172,0.25)" } }], yAxis: { min: 0, title: { text: pYTitle }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } }, plotLines:[{ color: "#A2A32F", width: 2, value: nb }] }, tooltip: { formatter: function() { var s = '<b> ' + this.x + '</b>' , sum = 0; $.each(this.points, function(i, point) { s += '<br/>'+ '<span style="color: ' + point.series.color + '"> ' + point.series.name +' : </span>'+ point.y + " " + unity; sum += point.y; } ); s += '<br/>total : '+ sum + ' (' + Number(Math.round(sum*100/nb + "e+2") + "e-2") + '%)' return s; }, shared: true, useHTML: true }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, style: { textShadow: false, color: (Highcharts.theme && Highcharts.theme.textColor) || 'white' } }, pointPadding: 0.2, borderWidth: 0 } }, credits: { enabled: false }, series: pSeries }; return param ; } /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // // Data // /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// var filters_categories = ["before process", "paired-end assembled", "with 5' primer", "with 3' primer", "with expected length", "without N"] ; /* Example: ["before process", "assembled", "with 5' primer", "with 3' primer", "with expected length", "without N"] */ var filters_by_sample = {"artificial combined": {"02": {"with expected length": 16204, "with 3' primer": 16204, "with 5' primer": 16204, "without N": 16204, "paired-end assembled": 16204}, "03": {"with expected length": 16123, "with 3' primer": 16123, "with 5' primer": 16123, "without N": 16123, "paired-end assembled": 16123}, "01": {"with expected length": 16107, "with 3' primer": 16107, "with 5' primer": 16107, "without N": 16107, "paired-end assembled": 16107}}, "before process": {"02": 30000, "03": 30000, "01": 30000}, "merged": {"02": {"with expected length": 13796, "with 3' primer": 13796, "with 5' primer": 13796, "without N": 13796, "paired-end assembled": 13796}, "03": {"with expected length": 13877, "with 3' primer": 13877, "with 5' primer": 13877, "without N": 13877, "paired-end assembled": 13877}, "01": {"with expected length": 13893, "with 3' primer": 13893, "with 5' primer": 13893, "without N": 13893, "paired-end assembled": 13893}}} ; /* Example: var filters_by_sample = { "artificial combined": { "sampleA": {"with 3' primer": 100, "without N": 100, "with 5' primer": 200, "assembled": 300}, "sampleB": {"with 3' primer": 0, "without N": 0, "with 5' primer": 0, "assembled": 0}}, "combined": { "sampleA": {"with expected length": 997, "with 3' primer": 997, "without N": 997, "with 5' primer": 997, "assembled": 1000}, "sampleB": {"with expected length": 634, "with 3' primer": 727, "without N": 619, "with 5' primer": 800, "assembled": 834}}, "before process": {"sampleA": 1300, "sampleB": 834} } ; */ var before_lengths_by_sample = {"02": {"319": 291, "318": 607, "423": 296, "335": 316, "334": 1, "337": 300, "336": 343, "331": 285, "333": 315, "332": 3, "272": 2, "274": 3, "275": 18, "276": 27, "277": 44, "278": 123, "365": 1, "320": 344, "322": 1, "345": 297, "346": 313, "347": 2, "324": 1244, "369": 1, "281": 617, "364": 324, "422": 1, "285": 659, "284": 297, "309": 298, "351": 1, "300": 287, "301": 323, "303": 300, "304": 605, "305": 1, "299": 613, "296": 879, "325": 1, "358": 297, "321": 616, "282": 912, "363": 2, "357": 2, "354": 2, "353": 303, "298": 1, "350": 329, "371": 2, "370": 315, "294": 310, "295": 1, "291": 321}, "03": {"319": 284, "318": 640, "338": 1, "335": 317, "334": 1, "337": 281, "336": 292, "331": 337, "330": 1, "333": 313, "271": 1, "272": 2, "274": 4, "275": 17, "276": 34, "277": 49, "278": 101, "345": 297, "320": 320, "322": 2, "323": 1, "346": 336, "321": 614, "324": 1159, "369": 2, "281": 610, "423": 294, "282": 940, "285": 658, "284": 325, "309": 282, "300": 327, "301": 294, "303": 334, "304": 656, "299": 629, "358": 282, "283": 1, "317": 1, "365": 2, "350": 305, "349": 2, "357": 2, "354": 1, "353": 319, "364": 322, "296": 938, "370": 343, "294": 302, "295": 2, "290": 1, "291": 299}, "01": {"319": 282, "318": 592, "335": 322, "334": 1, "337": 290, "336": 292, "331": 300, "330": 2, "333": 292, "332": 1, "272": 2, "274": 3, "275": 22, "276": 28, "277": 31, "278": 113, "323": 3, "320": 379, "322": 1, "345": 322, "346": 290, "321": 599, "324": 1279, "369": 1, "281": 613, "423": 293, "282": 960, "285": 603, "284": 305, "286": 1, "309": 314, "300": 327, "301": 297, "302": 1, "303": 302, "304": 591, "305": 1, "296": 972, "325": 1, "370": 337, "364": 308, "422": 1, "350": 322, "424": 1, "357": 1, "353": 328, "352": 1, "298": 1, "299": 634, "371": 1, "297": 1, "294": 301, "291": 319, "359": 2, "358": 307}} ; /* Example: { "sampleA": {"395": 1, "381": 192, "382": 1790, "383": 2903, "384": 1078, "385": 10536, "386": 18182, "387": 8613, "388": 1097, "389": 7}, "sampleB": {} } */ var after_lengths_by_sample = {"02": {"318": 1, "338": 2, "313": 313, "312": 297, "337": 315, "336": 1, "317": 329, "330": 2, "332": 1, "270": 300, "271": 605, "258": 321, "390": 296, "239": 2, "276": 298, "252": 659, "251": 297, "289": 1, "288": 616, "320": 303, "321": 2, "331": 324, "324": 2, "325": 297, "285": 607, "287": 344, "286": 291, "243": 27, "300": 315, "301": 1, "302": 316, "303": 343, "304": 300, "263": 879, "244": 44, "261": 310, "267": 287, "266": 613, "265": 1, "242": 18, "389": 1, "268": 323, "249": 912, "248": 617, "245": 123, "262": 1, "314": 2, "272": 1, "298": 285, "299": 3, "241": 3, "292": 1, "291": 1244}, "03": {"313": 336, "312": 297, "337": 343, "336": 2, "331": 322, "316": 2, "332": 2, "270": 334, "271": 656, "258": 299, "390": 294, "238": 1, "239": 2, "276": 282, "252": 658, "250": 1, "251": 325, "257": 1, "289": 2, "288": 614, "320": 319, "321": 1, "324": 2, "325": 282, "285": 640, "284": 1, "287": 320, "286": 284, "300": 313, "301": 1, "302": 317, "303": 292, "304": 281, "305": 1, "263": 938, "244": 49, "261": 302, "267": 327, "266": 629, "243": 34, "242": 17, "268": 294, "249": 940, "248": 610, "317": 305, "245": 101, "262": 2, "298": 337, "241": 4, "297": 1, "290": 1, "291": 1159}, "01": {"319": 1, "338": 1, "313": 290, "312": 322, "337": 337, "336": 1, "317": 322, "391": 1, "270": 302, "271": 591, "272": 1, "390": 293, "239": 2, "276": 314, "252": 603, "253": 1, "251": 305, "289": 1, "288": 599, "320": 328, "326": 2, "331": 308, "324": 1, "325": 307, "285": 592, "287": 379, "286": 282, "243": 28, "300": 292, "301": 1, "302": 322, "303": 292, "304": 290, "242": 22, "245": 113, "244": 31, "261": 301, "267": 327, "266": 634, "265": 1, "264": 1, "389": 1, "269": 1, "268": 297, "249": 960, "248": 613, "263": 972, "292": 1, "258": 319, "298": 300, "299": 1, "241": 3, "297": 2, "290": 3, "291": 1279}} ; /* Example: { "sampleA": {"395": 1, "381": 192, "382": 1790, "383": 2903, "384": 1078, "385": 10536, "386": 18182, "387": 8613, "388": 1097, "389": 7}, "sampleB": {} } */ /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // // Main // /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /** * Disables/enables buttons in datatable. */ var updateButtonState = function(){ $("#display-spl-lengths").prop( "disabled", false ); if( $('input[id^="filterBySample-chk-"]:checked').length == 0 ){ $("#display-spl-lengths").prop( "disabled", true ); } $("#display-after-spl-lengths").prop( "disabled", false ); if( $('input[id^="filterBySample-chk-"]:checked').length == 0 ){ $("#display-after-spl-lengths").prop( "disabled", true ); } } /** * Draws for the selected sample(s) the line chart that represents the number of sequences by sequence length. */ var setLengthsGraph = function(lengths_by_sample,title){ var selected_series = new Array(); $('input[id^="filterBySample-chk-"]').each( function(){ if( $(this).is(':checked')){ var sample_name = $(this).prop('id').substring(19, $(this).prop('id').length) ; // Find min and max for the sample var min_length = null ; var max_length = null ; for(seq_length in lengths_by_sample[sample_name]){ if( max_length === null ){ min_length = parseInt(seq_length) ; max_length = parseInt(seq_length) ; } else { min_length = Math.min( min_length, parseInt(seq_length) ); max_length = Math.max( max_length, parseInt(seq_length) ); } } // Complete data var sample_data = new Array(); if( max_length !== null ){ for( var curr_length = min_length ; curr_length <= max_length ; curr_length++ ){ if( lengths_by_sample[sample_name].hasOwnProperty(curr_length.toString()) ){ sample_data.push([ curr_length, lengths_by_sample[sample_name][curr_length.toString()] ]); } else { sample_data.push( [curr_length, null] ); } } } // Add serie selected_series.push({ "name": sample_name, "data": sample_data }); } }); // Draw chart $('#lengths-chart').highcharts( lineplot_param(title, "Length", "Nb sequences", null, selected_series) ); } /** * Draws the bar chart that represents the total number of sequences after each filter. */ var summaryLoad = function(){ var total_input = 0; var extended_data = new Array(); var non_overlapped_data = new Array(); for( var spl_name in filters_by_sample["merged"] ){ total_input += filters_by_sample["before process"][spl_name] ; for ( var cat_idx = 1 ; cat_idx < filters_categories.length ; cat_idx++ ){ var cat = filters_categories[cat_idx] ; if(extended_data.length <= cat_idx-1){ extended_data.push(0); non_overlapped_data.push(0); } if (cat in filters_by_sample["merged"][spl_name]){ extended_data[cat_idx-1] += filters_by_sample["merged"][spl_name][cat] ; }else{ extended_data[cat_idx-1] = extended_data[cat_idx-2] ; } if ("artificial combined" in filters_by_sample) { if ( cat in filters_by_sample["artificial combined"][spl_name] ){ non_overlapped_data[cat_idx-1] += filters_by_sample["artificial combined"][spl_name][cat] ; }else{ non_overlapped_data[cat_idx-1] = non_overlapped_data[cat_idx-2] ; } } } } var global_series = [ { name: 'merged', data: extended_data }] if ("artificial combined" in filters_by_sample) { global_series.push({name: 'artificial combined', data: non_overlapped_data}); } $('#filter-summary').highcharts( histogram_param('Summary', total_input, 'Nb sequences', filters_categories.slice(0-filters_categories.length+1), global_series, 'seq') ); } /** * Set the table that represents by sample the number of sequences after each filter. * Use key to select one subhashtable */ var sampleDetailsLoad = function(key, checkBox, tableId, distrib_length){ // Table titles if (checkBox){ var titles = [ '<label class="container"><input id="filterBySample-check-all" type="checkbox" value="1"><span class="checkmark"></span></label>', "Samples"]; }else{ var titles = ["Samples"]; } titles.push( '% kept' ); var filters = filters_by_sample[key] ; for( var sample_name in filters ){ if (checkBox) { var sample_data = ['<label class="container"><input id="filterBySample-chk-' + sample_name + '" type="checkbox" value="1"><span class="checkmark"></span></label>', sample_name]; }else{ var sample_data = [sample_name]; } var last_idx = 0; for ( var cat_idx = 0 ; cat_idx < filters_categories.length ; cat_idx++ ){ var cat = filters_categories[cat_idx] ; if ( cat in filters[sample_name]) { last_idx = cat_idx if (!( titles.includes(cat) )){ titles.push(cat); } sample_data.push( numberDisplay(filters[sample_name][cat]) ); } } var prct_kept = filters[sample_name][filters_categories[last_idx]]*100/filters[sample_name][filters_categories[1]] if (isNaN(prct_kept)){ prct_kept = 0 } if (checkBox) { sample_data.splice(2, 0, numberDisplay(prct_kept)); }else{ sample_data.splice(1, 0, numberDisplay(prct_kept)); } $('#'+tableId+' tbody').append( '<tr><td>' + sample_data.join("</td><td>") + '</td></tr>' ); } $('#'+tableId+' thead').append( '<tr><th>' + titles.join("</th><th>") + '</th></tr>' ); $('#'+tableId+' .title').attr( "colspan", titles.length ); $('#'+tableId+' tfoot th').each(function(){ $(this).attr( "colspan", titles.length ); }); // Check all management $('#filterBySample-check-all').on('change', function (e) { // Manage check all if( $(this).is(':checked') ){ $('input[id^="filterBySample-chk-"]').each( function(){ $(this).prop( 'checked', true ); }); } else { $('input[id^="filterBySample-chk-"]').each( function(){ $(this).prop( 'checked', false ); }); } }); $('input[id^="filterBySample-chk-"]').on('change', function (e) { // Uncheck select all when uncheck one sample if( !$(this).is(':checked') && $('#filterBySample-check-all').is(':checked') ){ $('#filterBySample-check-all').prop( 'checked', false ); } }); // Buttons enable/disable management $('input[id^="filterBySample-check-all"]').on( 'change', updateButtonState ); $('input[id^="filterBySample-chk-"]').on( 'change', updateButtonState ); // Datatable var start_col_idx = 0 if(checkBox){ start_col_idx = 1 } $('#'+tableId+'').DataTable({ //"sDom": '<"top"<"#'+tableId+'-export"><"clear">lf>rt<"bottom"ip><"clear">', dom: "<'#"+tableId+"-export'><'row'<'col-sm-5'l><'col-sm-7'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>", 'order': [[start_col_idx, 'asc']], "pagingType": "simple", 'columnDefs': [{ 'targets': [0], 'orderable': false }], "fnDrawCallback": updateButtonState }); // Datatable export $('#'+tableId+'-export').html( '<button id="btn-exp" class="btn"><span class="fa fa-download" aria-hidden="true"> CSV</span></button>' ); $('#'+tableId+'-export').addClass( 'dataTables_filter' ); if ( checkBox){ $('#'+tableId+'-export').datatableExport({ 'table_id': tableId, 'omitted_columns': [0] }); }else{ $('#'+tableId+'-export').datatableExport({ 'table_id': tableId, }); } // Add modal listener if (distrib_length){ $('#lengths-modal').on('shown.bs.modal', function (event) { var button = $(event.relatedTarget); // Button that triggered the modal var data_type = button.data('whatever'); if( data_type == "before-process" ){ setLengthsGraph(before_lengths_by_sample,"Amplicon length distribution before trimming and filtering"); } else { setLengthsGraph(after_lengths_by_sample,"Preprocessed Amplicon Length distribution"); } }); } } $(function() { // Remove alert $('#js-alert').remove(); $('#content').removeClass("hidden"); // Display summary summaryLoad(); // Display data by sample if ("merged" in filters_by_sample ){ sampleDetailsLoad("merged",true, "filterBySample-table-combined", true); }else{ $("#filterBySample-table-combined").remove(); } if ("artificial combined" in filters_by_sample ){ sampleDetailsLoad("artificial combined", false, "filterBySample-table-artificialCombined", false); }else{ $("#filterBySample-table-artificialCombined").prev("h2").remove(); $("#filterBySample-table-artificialCombined").remove(); } /*$("select").addClass("selectpicker"); $(".dataTables_length select").selectpicker({ style: 'btn-info', size: 2, width : '60px' }); $('.selectpicker').selectpicker('refresh'); //$('select').selectpicker('refresh'); */ }); </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"> <h2 class="pb-2-first mt-4 mb-2 border-bottom" style="margin-top: 1rem">Preprocess summary</h2> <div id="filter-summary"></div> <div id="filter-log"> <h2 class="pb-2 mt-4 mb-2 border-bottom">Details on merged sequences</h2> <table id="filterBySample-table-combined" class="table table-striped"> <thead> <!-- <tr> <th class="title">Filtering by sample : details on full length amplicon reads</th> </tr> --> </thead> <tbody></tbody> <tfoot> <tr> <th> <span class="table-action">With selection:</span> <button id="display-spl-lengths" class="btn table-action fusion-right" disabled data-toggle="modal" data-target="#lengths-modal" data-whatever="before-process" ><span class="fa fa-line-chart" aria-hidden="true"> Display amplicon lengths</span> </button> <button id="display-after-spl-lengths" class="btn table-action" disabled data-toggle="modal" data-target="#lengths-modal" data-whatever="after-process" ><span class="fa fa-line-chart" aria-hidden="true"> Display preprocessed amplicon lengths</span></button> </th> </tr> </tfoot> </table> <h2 class="pb-2 mt-4 mb-2 border-bottom">Details on artificial combined sequences</h2> <table id="filterBySample-table-artificialCombined" class="table table-striped"> <thead> </thead> <tbody></tbody> </table> </div> </div> <!-- Modals --> <div class="modal" id="lengths-modal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Amplicons lengths</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div id="lengths-chart"></div> </div> <div class="modal-footer"> <button class="btn table-action fusion-right" data-dismiss="modal"><span class="fa fa-close" aria-hidden="true"> Close</span> </button> </div> </div> </div> </div> </body> </html>