Mercurial > repos > frogs > frogs_3_1_0
diff test-data/references/01-prepro-flash.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 diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/test-data/references/01-prepro-flash.html Thu Feb 28 10:14:49 2019 -0500 @@ -0,0 +1,799 @@ +<!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": 12500, "with 3' primer": 12500, "with 5' primer": 12500, "without N": 12500, "paired-end assembled": 12500}, "03": {"with expected length": 12536, "with 3' primer": 12536, "with 5' primer": 12536, "without N": 12536, "paired-end assembled": 12536}, "01": {"with expected length": 12378, "with 3' primer": 12378, "with 5' primer": 12378, "without N": 12378, "paired-end assembled": 12378}}, "before process": {"02": 30000, "03": 30000, "01": 30000}, "merged": {"02": {"with expected length": 17500, "with 3' primer": 17500, "with 5' primer": 17500, "without N": 17500, "paired-end assembled": 17500}, "03": {"with expected length": 17464, "with 3' primer": 17464, "with 5' primer": 17464, "without N": 17464, "paired-end assembled": 17464}, "01": {"with expected length": 17622, "with 3' primer": 17622, "with 5' primer": 17622, "without N": 17622, "paired-end assembled": 17622}}} ; + /* 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, "338": 1, "423": 297, "335": 316, "334": 2, "337": 302, "336": 345, "331": 286, "333": 315, "332": 3, "270": 101, "271": 146, "272": 457, "274": 296, "275": 615, "276": 588, "277": 319, "278": 326, "279": 6, "289": 2, "365": 1, "320": 607, "322": 1, "345": 298, "346": 314, "347": 2, "324": 1244, "369": 1, "281": 625, "280": 10, "364": 326, "422": 1, "285": 662, "349": 2, "287": 5, "309": 299, "303": 300, "298": 7, "300": 287, "301": 325, "302": 7, "325": 2, "304": 606, "305": 1, "306": 7, "307": 1, "299": 959, "363": 3, "267": 18, "358": 298, "269": 27, "268": 9, "321": 620, "282": 1222, "296": 881, "284": 300, "357": 2, "354": 2, "353": 306, "351": 1, "350": 330, "371": 2, "370": 315, "294": 311, "295": 5, "292": 2, "293": 2, "290": 1, "291": 322}, "03": {"319": 288, "318": 640, "338": 1, "423": 294, "335": 317, "334": 1, "337": 282, "336": 292, "331": 338, "330": 4, "333": 313, "270": 66, "271": 126, "272": 450, "274": 292, "275": 592, "276": 629, "277": 319, "278": 290, "279": 1, "289": 2, "345": 297, "320": 600, "322": 3, "323": 2, "346": 336, "321": 617, "324": 1162, "369": 2, "281": 617, "280": 8, "364": 323, "282": 1264, "285": 660, "284": 331, "287": 5, "309": 282, "358": 282, "300": 327, "301": 295, "302": 4, "303": 335, "304": 656, "306": 1, "307": 3, "299": 894, "267": 26, "370": 344, "269": 36, "268": 20, "283": 1, "317": 1, "365": 4, "349": 5, "357": 2, "354": 1, "353": 319, "352": 1, "298": 6, "350": 305, "296": 939, "297": 2, "294": 303, "295": 3, "290": 4, "291": 299}, "01": {"319": 285, "318": 592, "335": 322, "334": 2, "337": 292, "336": 292, "331": 301, "330": 6, "333": 294, "332": 1, "270": 75, "271": 137, "272": 489, "274": 293, "275": 625, "276": 608, "277": 268, "278": 340, "296": 974, "289": 3, "345": 323, "320": 660, "364": 309, "322": 1, "323": 3, "346": 291, "347": 1, "324": 1280, "369": 1, "281": 619, "280": 5, "423": 293, "282": 1299, "285": 606, "284": 309, "287": 7, "286": 1, "309": 315, "283": 2, "300": 331, "301": 297, "302": 5, "303": 303, "304": 592, "305": 3, "306": 5, "307": 2, "363": 1, "267": 22, "325": 2, "370": 337, "269": 28, "268": 13, "321": 600, "422": 1, "359": 2, "350": 324, "292": 1, "424": 1, "357": 1, "353": 329, "352": 2, "298": 4, "299": 951, "371": 2, "297": 1, "349": 2, "358": 308, "294": 301, "293": 1, "290": 7, "291": 319}} ; + /* 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": {"151": 1, "216": 1, "318": 1, "213": 5, "210": 1, "211": 2, "313": 314, "312": 298, "337": 315, "242": 611, "317": 330, "330": 3, "193": 1, "332": 1, "270": 300, "271": 606, "258": 322, "259": 2, "238": 142, "239": 456, "276": 299, "226": 2, "252": 661, "235": 9, "236": 27, "251": 299, "250": 1, "265": 3, "198": 7, "234": 9, "237": 101, "272": 1, "249": 1219, "248": 621, "289": 1, "288": 620, "320": 306, "321": 2, "268": 325, "331": 326, "324": 2, "325": 298, "233": 9, "285": 607, "287": 607, "286": 291, "243": 588, "202": 4, "300": 315, "301": 2, "302": 316, "303": 345, "304": 302, "305": 1, "316": 1, "263": 881, "244": 308, "261": 311, "260": 2, "241": 294, "266": 959, "229": 4, "228": 1, "389": 1, "225": 4, "219": 4, "223": 11, "222": 10, "221": 6, "220": 9, "245": 316, "338": 2, "218": 2, "262": 5, "314": 2, "247": 1, "336": 1, "390": 297, "215": 1, "298": 286, "299": 3, "267": 287, "292": 2, "194": 7, "291": 1244}, "03": {"216": 5, "151": 3, "319": 1, "215": 2, "198": 4, "210": 3, "211": 2, "313": 336, "312": 297, "337": 344, "242": 588, "331": 323, "316": 2, "193": 3, "332": 4, "270": 335, "271": 656, "258": 299, "390": 294, "238": 122, "239": 448, "276": 282, "252": 658, "235": 20, "236": 36, "251": 326, "257": 1, "233": 8, "213": 5, "234": 18, "237": 66, "249": 1264, "248": 611, "289": 3, "288": 617, "320": 319, "321": 1, "268": 295, "324": 2, "325": 282, "250": 1, "170": 3, "285": 640, "284": 1, "287": 600, "286": 288, "243": 629, "202": 3, "300": 313, "301": 1, "302": 317, "303": 292, "304": 282, "305": 1, "245": 278, "244": 310, "261": 303, "267": 327, "266": 894, "229": 4, "264": 2, "226": 1, "225": 4, "219": 6, "223": 9, "222": 12, "221": 1, "220": 8, "317": 305, "263": 939, "262": 3, "265": 3, "336": 2, "228": 2, "298": 338, "241": 291, "297": 1, "194": 1, "290": 2, "291": 1162}, "01": {"216": 3, "215": 3, "213": 7, "210": 5, "211": 3, "218": 1, "289": 1, "288": 600, "285": 592, "287": 660, "286": 285, "263": 974, "261": 301, "260": 1, "267": 331, "266": 951, "265": 1, "264": 1, "269": 1, "268": 297, "298": 301, "299": 1, "297": 2, "292": 2, "290": 3, "291": 1280, "319": 2, "198": 4, "313": 291, "312": 323, "317": 324, "316": 1, "193": 2, "314": 1, "270": 303, "271": 592, "272": 3, "390": 293, "276": 315, "300": 294, "301": 2, "302": 322, "303": 292, "304": 292, "245": 325, "244": 262, "247": 1, "241": 292, "243": 608, "242": 623, "389": 1, "249": 1298, "248": 618, "338": 2, "337": 337, "336": 1, "331": 309, "330": 1, "258": 319, "259": 1, "252": 603, "253": 1, "250": 2, "251": 306, "257": 2, "170": 4, "194": 5, "229": 1, "228": 2, "226": 1, "225": 2, "223": 6, "222": 15, "220": 5, "391": 1, "151": 1, "238": 136, "239": 487, "234": 15, "235": 13, "236": 28, "237": 75, "233": 7, "320": 329, "326": 2, "324": 1, "325": 308, "202": 3}} ; + /* 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>