Mercurial > repos > frogs > frogs_2_0_0
view test-data/references/01-prepro.html @ 0:76c750c5f0d1 draft default tip
planemo upload for repository https://github.com/oinizan/FROGS-wrappers commit 0b900a51e220ce6f17c1e76292c06a5f4d934055-dirty
| author | frogs |
|---|---|
| date | Thu, 25 Oct 2018 05:01:13 -0400 |
| 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 <http://www.gnu.org/licenses/>. --> <html> <head> <title>FROGS Pre-process</title> <meta charset="UTF-8"> <meta name="version" content="1.2.1"> <!-- CSS --> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.css"></link> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></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; } </style> <!-- JS --> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="http://code.highcharts.com/4.1.4/highcharts.js"></script> <script type="text/javascript" src="http://code.highcharts.com/4.1.4/modules/exporting.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></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 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' }, title: { text: pTitle }, xAxis: { title: { text: pXTitle } }, yAxis: { min: 0, title: { text: pYTitle } }, 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. */ var histogram_param = function( pTitle, pYTitle, pCategories, pSeries, unity ) { var param = { chart: { type: 'column' }, title: { text: pTitle }, xAxis: { categories: pCategories, crosshair: true }, yAxis: { min: 0, title: { text: pYTitle } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y} ' + unity + '</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, credits: { enabled: false }, series: pSeries }; return param ; } /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // // Data // /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// var filters_categories = ["before process", "overlapped", "with expected length", "with 5' primer", "with 3' primer", "with expected length", "without N"] ; /* Example: ["before process", "overlapped", "with expected length", "with 5' primer", "with 3' primer", "with expected length", "without N"] */ var filters_by_sample = {"splA_01": [88684, 84138, 82277, 80896, 80638, 80630, 80630], "splA_02": [54167, 51359, 49979, 49063, 48917, 48917, 48917], "splA_03": [32386, 30735, 29964, 29396, 29304, 29304, 29304]} ; /* Example: { "sampleA": [90126, 90126, 90126, 89697, 89697, 89697, 89697], "sampleB": [213043, 209801, 0, 0, 0, 0, 0] } */ var before_lengths_by_sample = {"splA_01": {"407": 2140, "406": 1041, "405": 1271, "404": 959, "340": 32, "402": 985, "401": 487, "400": 374, "281": 2, "283": 3, "282": 3, "348": 30, "349": 27, "409": 2974, "408": 3016, "336": 25, "440": 244, "331": 25, "330": 15, "263": 4, "421": 3254, "261": 5, "267": 9, "456": 13, "265": 9, "264": 2, "269": 3, "268": 1, "423": 3013, "365": 30, "425": 5254, "424": 2313, "414": 442, "415": 755, "416": 385, "417": 149, "410": 686, "411": 249, "412": 493, "413": 468, "371": 30, "370": 26, "373": 28, "372": 26, "418": 215, "419": 424, "377": 32, "376": 28, "319": 14, "318": 15, "313": 12, "312": 6, "311": 7, "310": 7, "317": 10, "316": 14, "315": 14, "314": 5, "393": 4961, "392": 1897, "391": 1388, "390": 1728, "397": 127, "396": 158, "395": 298, "394": 2709, "278": 1, "279": 4, "399": 239, "398": 227, "457": 10, "379": 20, "378": 63, "256": 2, "429": 1476, "428": 1626, "447": 6085, "368": 40, "369": 28, "366": 33, "367": 30, "364": 18, "422": 1327, "362": 20, "363": 27, "427": 5948, "426": 2039, "308": 11, "309": 11, "449": 50, "448": 172, "298": 5, "300": 2, "301": 5, "302": 2, "303": 7, "304": 9, "305": 16, "445": 2243, "446": 2131, "380": 27, "381": 35, "382": 45, "383": 36, "384": 28, "385": 35, "386": 52, "387": 374, "388": 1457, "389": 2718, "443": 246, "444": 754, "306": 8, "295": 2, "360": 35, "296": 1, "420": 505, "374": 25, "290": 3, "438": 328, "439": 294, "436": 382, "437": 360, "434": 750, "299": 6, "432": 430, "433": 1099, "307": 7, "431": 670, "458": 23, "459": 16, "339": 24, "338": 25, "335": 22, "334": 19, "452": 12, "453": 13, "454": 17, "455": 11, "333": 27, "332": 19, "258": 3, "259": 2, "252": 2, "442": 160, "251": 1, "253": 2, "257": 3, "255": 2, "344": 24, "288": 3, "346": 26, "347": 25, "297": 6, "403": 1238, "341": 22, "342": 26, "343": 28, "460": 12, "289": 1, "270": 2, "271": 3, "285": 1, "272": 2, "284": 1, "273": 3, "276": 3, "277": 2, "361": 22, "292": 5, "375": 26, "355": 29, "441": 580, "322": 11, "323": 19, "320": 13, "321": 20, "326": 16, "327": 22, "324": 22, "325": 20, "328": 25, "329": 19, "352": 18, "450": 14, "293": 3, "435": 274, "291": 1, "451": 18, "357": 49, "356": 34, "345": 27, "354": 28, "353": 22, "430": 821, "351": 36, "350": 16, "337": 20, "358": 38, "359": 28, "266": 3}, "splA_02": {"407": 1189, "406": 640, "405": 706, "404": 635, "340": 16, "402": 671, "342": 18, "400": 255, "281": 3, "280": 2, "283": 2, "282": 5, "348": 22, "284": 5, "287": 3, "408": 1696, "336": 13, "440": 126, "331": 19, "330": 17, "263": 2, "421": 2279, "261": 3, "260": 4, "267": 7, "266": 1, "265": 6, "264": 2, "269": 1, "268": 4, "423": 1866, "365": 29, "425": 2750, "424": 1309, "414": 283, "378": 52, "416": 307, "417": 88, "410": 500, "411": 170, "412": 312, "413": 334, "371": 15, "370": 14, "373": 12, "295": 8, "418": 173, "374": 16, "290": 7, "376": 13, "319": 10, "318": 16, "313": 7, "312": 5, "311": 11, "310": 8, "317": 17, "316": 11, "315": 9, "314": 5, "393": 2840, "392": 1168, "391": 811, "390": 897, "397": 94, "396": 115, "395": 169, "277": 6, "399": 155, "398": 199, "379": 17, "415": 537, "256": 2, "429": 1038, "428": 1015, "447": 3589, "368": 13, "369": 17, "366": 30, "367": 12, "364": 27, "422": 734, "362": 11, "363": 15, "427": 3756, "426": 1256, "308": 11, "309": 6, "449": 37, "448": 113, "298": 2, "300": 5, "301": 2, "302": 8, "303": 5, "304": 5, "305": 8, "445": 1353, "446": 1345, "380": 14, "381": 11, "382": 22, "383": 19, "384": 12, "385": 20, "386": 31, "387": 162, "388": 827, "389": 1490, "443": 165, "444": 450, "294": 6, "306": 8, "333": 20, "372": 17, "360": 12, "296": 3, "420": 370, "419": 324, "377": 29, "438": 228, "439": 185, "436": 207, "437": 239, "434": 452, "299": 5, "432": 310, "433": 725, "307": 2, "431": 440, "458": 13, "459": 6, "339": 19, "338": 18, "450": 15, "334": 19, "452": 4, "453": 6, "454": 4, "455": 9, "456": 12, "457": 8, "258": 1, "259": 1, "252": 1, "442": 116, "251": 1, "253": 2, "257": 4, "254": 1, "255": 4, "344": 21, "288": 1, "346": 18, "347": 16, "297": 2, "403": 856, "341": 19, "401": 326, "343": 13, "460": 4, "289": 7, "270": 1, "271": 5, "272": 4, "349": 18, "273": 3, "409": 1770, "332": 13, "274": 2, "286": 5, "275": 5, "276": 2, "394": 1540, "361": 7, "292": 4, "375": 20, "355": 19, "441": 355, "322": 16, "323": 15, "320": 9, "321": 9, "326": 15, "327": 17, "324": 10, "325": 16, "328": 22, "329": 11, "335": 14, "352": 18, "293": 4, "435": 211, "262": 2, "291": 4, "451": 9, "357": 38, "356": 15, "345": 18, "354": 17, "353": 22, "430": 502, "351": 22, "350": 10, "337": 20, "359": 17, "358": 19}, "splA_03": {"407": 723, "406": 373, "405": 444, "404": 361, "340": 12, "402": 354, "401": 181, "400": 144, "281": 3, "280": 2, "283": 1, "282": 1, "348": 15, "349": 11, "409": 1106, "408": 1083, "336": 11, "440": 92, "331": 10, "330": 6, "263": 1, "366": 19, "261": 1, "260": 1, "267": 4, "456": 5, "265": 1, "367": 8, "269": 2, "457": 7, "423": 1114, "365": 11, "425": 1859, "424": 775, "414": 172, "415": 269, "416": 165, "417": 57, "410": 267, "411": 89, "412": 196, "413": 187, "371": 12, "370": 9, "373": 15, "372": 8, "418": 96, "419": 167, "377": 10, "376": 12, "319": 1, "318": 3, "313": 3, "311": 4, "310": 3, "317": 4, "316": 3, "315": 7, "314": 1, "393": 1739, "392": 740, "391": 499, "390": 636, "397": 44, "396": 64, "395": 114, "394": 1022, "278": 1, "279": 2, "399": 104, "398": 83, "379": 10, "378": 26, "256": 3, "429": 597, "428": 595, "447": 2139, "368": 9, "369": 9, "421": 1206, "420": 187, "364": 12, "422": 465, "362": 8, "363": 9, "427": 2140, "426": 714, "308": 10, "309": 3, "449": 14, "448": 68, "298": 3, "300": 1, "301": 2, "302": 1, "303": 3, "304": 5, "305": 9, "445": 842, "446": 803, "380": 9, "381": 15, "382": 9, "383": 14, "384": 11, "385": 13, "386": 19, "387": 111, "388": 471, "389": 969, "443": 92, "444": 267, "294": 2, "306": 1, "295": 2, "360": 14, "296": 1, "292": 2, "374": 12, "290": 2, "438": 144, "439": 102, "436": 135, "437": 133, "434": 271, "435": 110, "432": 171, "433": 380, "307": 3, "431": 277, "458": 10, "459": 6, "339": 12, "338": 12, "335": 10, "334": 9, "452": 4, "453": 3, "454": 7, "455": 3, "333": 13, "332": 6, "258": 1, "252": 1, "442": 64, "253": 4, "257": 3, "255": 2, "344": 6, "288": 1, "346": 14, "347": 11, "403": 474, "341": 6, "342": 9, "343": 11, "460": 4, "289": 2, "270": 1, "271": 3, "285": 1, "272": 1, "284": 4, "273": 3, "287": 1, "286": 1, "275": 1, "276": 2, "277": 4, "361": 2, "375": 10, "355": 12, "441": 241, "322": 6, "323": 8, "320": 8, "321": 7, "326": 6, "327": 7, "324": 8, "325": 7, "328": 14, "329": 4, "352": 9, "450": 7, "293": 4, "262": 1, "291": 4, "451": 6, "357": 20, "356": 12, "345": 13, "354": 11, "353": 10, "430": 311, "351": 15, "350": 4, "337": 9, "358": 15, "359": 9, "266": 1}} ; /* 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 = {"splA_01": {"357": 1707, "387": 304, "353": 10, "375": 3005, "348": 11, "393": 1723, "392": 5450, "391": 2070, "390": 3023, "397": 818, "396": 1494, "395": 1622, "394": 6216, "358": 1324, "399": 367, "398": 658, "354": 255, "414": 6477, "374": 2047, "415": 143, "352": 4, "355": 1348, "407": 208, "406": 288, "405": 306, "347": 5, "403": 366, "402": 267, "368": 442, "369": 951, "366": 195, "367": 347, "423": 3, "365": 213, "362": 287, "363": 142, "360": 5113, "426": 5, "401": 751, "356": 2790, "351": 8, "400": 1110, "370": 1231, "380": 462, "381": 398, "382": 768, "383": 375, "384": 122, "385": 192, "386": 403, "420": 3, "388": 3336, "389": 1202, "364": 116, "411": 596, "372": 1239, "359": 1642, "350": 7, "425": 12, "404": 352, "349": 28, "379": 477, "378": 199, "416": 44, "417": 8, "410": 206, "409": 132, "412": 2260, "413": 1843, "371": 926, "408": 590, "373": 980, "361": 2820, "418": 8, "419": 4, "377": 700, "376": 3076}, "splA_02": {"372": 694, "357": 894, "353": 8, "375": 1664, "348": 1, "393": 1070, "392": 2835, "391": 1196, "390": 1882, "397": 507, "396": 1056, "395": 1005, "394": 3915, "358": 730, "399": 277, "398": 420, "354": 103, "414": 3806, "374": 1166, "415": 101, "352": 4, "355": 788, "407": 112, "406": 183, "405": 227, "347": 3, "403": 209, "402": 196, "368": 306, "369": 652, "366": 141, "367": 222, "423": 4, "365": 182, "362": 148, "363": 103, "360": 2922, "426": 2, "401": 454, "356": 1490, "400": 742, "370": 845, "380": 326, "381": 259, "382": 528, "383": 306, "384": 75, "385": 150, "386": 283, "387": 222, "388": 2378, "389": 632, "364": 85, "411": 372, "422": 1, "359": 1021, "350": 1, "425": 4, "404": 219, "349": 15, "379": 302, "378": 152, "416": 31, "417": 9, "410": 138, "409": 100, "412": 1327, "413": 1195, "371": 604, "408": 360, "373": 588, "361": 1624, "418": 4, "419": 1, "377": 487, "376": 1853}, "splA_03": {"357": 624, "387": 120, "353": 2, "375": 1070, "348": 4, "393": 634, "392": 1909, "391": 706, "390": 1104, "397": 324, "396": 589, "395": 596, "394": 2213, "358": 475, "399": 146, "398": 261, "354": 64, "414": 2289, "374": 699, "415": 55, "352": 1, "355": 439, "407": 81, "406": 102, "405": 138, "347": 1, "403": 137, "402": 100, "368": 171, "369": 340, "366": 86, "367": 128, "423": 1, "365": 80, "362": 116, "363": 51, "360": 1812, "426": 2, "401": 269, "356": 976, "351": 4, "400": 390, "370": 471, "380": 183, "381": 162, "382": 266, "383": 154, "384": 50, "385": 79, "386": 155, "420": 1, "388": 1242, "389": 416, "364": 44, "411": 217, "372": 440, "359": 634, "425": 4, "404": 123, "349": 5, "379": 190, "378": 68, "416": 13, "417": 4, "410": 81, "409": 53, "412": 832, "413": 704, "371": 353, "408": 242, "373": 346, "361": 1050, "418": 1, "419": 2, "377": 268, "376": 1142}} ; /* 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").removeClass( "disabled" ); if( $('input[id^="filterBySample-chk-"]:checked').length == 0 ){ $("#display-spl-lengths").addClass( "disabled" ); } $("#display-after-spl-lengths").removeClass( "disabled" ); if( $('input[id^="filterBySample-chk-"]:checked').length == 0 ){ $("#display-after-spl-lengths").addClass( "disabled" ); } } /** * 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 global_data = new Array(); for( var spl_name in filters_by_sample ){ var nb_by_step = filters_by_sample[spl_name] ; for( var step_idx = 0 ; step_idx < filters_by_sample[spl_name].length ; step_idx++ ){ if( global_data.length < step_idx+1 ){ global_data.push(0); } global_data[step_idx] += nb_by_step[step_idx] ; } } var global_series = [{ name: 'All samples', data: global_data }]; $('#filter-summary').highcharts( histogram_param('Filtering summary', 'Nb sequences', filters_categories, global_series, 'seq') ); } /** * Set the table that represents by sample the number of sequences after each filter. */ var sampleDetailsLoad = function(){ // Table titles var titles = [ '<input id="filterBySample-check-all" type="checkbox" value="1">', "Samples" ]; titles.push( '% kept' ); for( var rank = 0 ; rank < filters_categories.length ; rank++ ){ titles.push( filters_categories[rank] ); } $('#filterBySample-table thead').append( '<tr><th>' + titles.join("</th><th>") + '</th></tr>' ); $('#filterBySample-table .title').attr( "colspan", titles.length ); $('#filterBySample-table tfoot th').each(function(){ $(this).attr( "colspan", titles.length ); }); // Table data for( var sample_name in filters_by_sample ){ var sample_data = ['<input id="filterBySample-chk-' + sample_name + '" type="checkbox" value="1">', sample_name] ; var prct_kept = filters_by_sample[sample_name][filters_categories.length-1]/filters_by_sample[sample_name][0]*100 sample_data.push( numberDisplay(prct_kept) ); for( var idx = 0 ; idx < filters_by_sample[sample_name].length ; idx++){ sample_data.push( numberDisplay(filters_by_sample[sample_name][idx]) ); } // Add row data $('#filterBySample-table tbody').append( '<tr><td>' + sample_data.join("</td><td>") + '</td></tr>' ); } // 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 $('#filterBySample-table').DataTable({ "sDom": '<"top"<"#filterBySample-csv-export"><"clear">lf>rt<"bottom"ip><"clear">', 'order': [[1, 'asc']], 'columnDefs': [{ 'targets': [0], 'orderable': false }], "fnDrawCallback": updateButtonState }); // Datatable export $('#filterBySample-csv-export').html( '<button class="btn btn-primary"><span class="glyphicon glyphicon-open-file" aria-hidden="true">CSV</span></button>' ); $('#filterBySample-csv-export').addClass( 'dataTables_filter' ); $('#filterBySample-csv-export').datatableExport({ 'table_id': "filterBySample-table", 'omitted_columns': [0] }); // Add modal listener $('#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 sampleDetailsLoad(); }); </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"></div> <div id="filter-log"> <table id="filterBySample-table" class="table table-striped"> <thead> <tr> <th class="title">Filtering by sample</th> </tr> </thead> <tbody></tbody> <tfoot> <tr> <th> <span class="table-action">With selection:</span> <button id="display-spl-lengths" class="btn btn-primary table-action fusion-right disabled" data-toggle="modal" data-target="#lengths-modal" data-whatever="before-process">Display amplicon lengths </button> <button id="display-after-spl-lengths" class="btn btn-primary table-action disabled" data-toggle="modal" data-target="#lengths-modal" data-whatever="after-process">Display preprocessed amplicon lengths</button> </th> </tr> </tfoot> </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"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Amplicons lengths</h4> </div> <div class="modal-body"> <div id="lengths-chart"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html>