Mercurial > repos > frogs > frogs_2_0_0

comparison test-data/references/Blast_affiliation.html @ 0:76c750c5f0d1 draft default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
-1:000000000000 0:76c750c5f0d1
1 <!DOCTYPE html>
2 <!--
3 # Copyright (C) 2015 INRA
4 #
5 # This program is free software: you can redistribute it and/or modify
6 # it under the terms of the GNU General Public License as published by
7 # the Free Software Foundation, either version 3 of the License, or
8 # (at your option) any later version.
9 #
10 # This program is distributed in the hope that it will be useful,
11 # but WITHOUT ANY WARRANTY; without even the implied warranty of
12 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 # GNU General Public License for more details.
14 #
15 # You should have received a copy of the GNU General Public License
16 # along with this program. If not, see <http://www.gnu.org/licenses/>.
17 -->
18 <html>
19 <head>
20 <title>FROGS Affiliation</title>
21 <meta charset="UTF-8">
22 <meta name="version" content="1.0.2">
23 <!-- CSS -->
24 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.css"></link>
25 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
26 <style type="text/css">
27 #content {
28 width: 90%;
29 margin-right: auto;
30 margin-left: auto;
31 }
32 .clear {
33 clear: both;
34 height: 0px;
35 width: 100%;
36 float: none !important;
37 }
38 </style>
39 <!-- JS -->
40 <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
41 <script type="text/javascript" src="http://code.highcharts.com/4.1.4/highcharts.js"></script>
42 <script type="text/javascript" src="http://code.highcharts.com/4.1.4/modules/exporting.js"></script>
43 <script type="text/javascript" src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
44 <script type="text/javascript">
45 /*
46 * HTMLTable.js 0.1.0 - HTMLTable Library
47 *
48 * Copyright (c) 2015 Escudie Frederic
49 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
50 */
51 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};
52
53 /*
54 * dataTableExtractor.plugin.js 0.1.0 - datatableExport Library
55 *
56 * Copyright (c) 2015 Escudie Frederic
57 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
58 */
59 !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);
60 </script>
61 <script type="text/javascript">
62 /**
63 * Returns the string representation of the number.
64 * @param pValue {Float} The number to process.
65 * @return {String} The string representation (example: 12856892.11111 => 12,856,892.11).
66 */
67 var numberDisplay = function( pValue ){
68 var new_val = "" ;
69 if( ("" + pValue + "").indexOf(".") != -1 ){
70 new_val = pValue.toFixed(2).replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
71 } else {
72 new_val = pValue.toFixed().replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
73 }
74 return new_val ;
75 }
76
77 /**
78 * Returns the HTML table representation of the data.
79 * @param pTitle {String} The title of the table.
80 * @param pCategories {Array} The title of each column.
81 * @param pData {Array} 2D matrix with row and column data.
82 * @return {String} The HTML table representation.
83 */
84 var table = function( pTitle, pCategories, pData ) {
85 // Header
86 var table_header = ' <tr>\n<th colspan="' + pCategories.length + '">' + pTitle + '</th> </tr>\n' ;
87 var table_header_line = "" ;
88 for(var idx = 0 ; idx < pCategories.length ; idx++){
89 table_header_line += " <th>" + pCategories[idx] + "</th>\n" ;
90 }
91 table_header += " <tr>\n" + table_header_line + " </tr>\n" ;
92 table_header = " <thead>\n" + table_header + " </thead>\n" ;
93
94 // Body
95 var table_body = '' ;
96 for(var data_idx = 0 ; data_idx < pData.length ; data_idx++){
97 var table_body_row = "" ;
98 for(var category_idx = 0 ; category_idx < pCategories.length ; category_idx++){
99 if( typeof pData[data_idx][category_idx] === "number" ) {
100 table_body_row += " <td>" + numberDisplay(pData[data_idx][category_idx]) + "</td>\n" ;
101 } else {
102 table_body_row += " <td>" + pData[data_idx][category_idx] + "</td>\n" ;
103 }
104 }
105 table_body += " <tr>\n" + table_body_row + " </tr>\n" ;
106 }
107 table_body = " <tbody>\n" + table_body + " </tbody>\n" ;
108
109 return '<table class="table table-striped">\n' + table_header + table_body + "</table>\n" ;
110 }
111
112 var histogram_param = function( pTitle, pYTitle, pCategories, pSeries, unity ) {
113 var param = {
114 chart: {
115 type: 'column'
116 },
117 title: {
118 text: pTitle
119 },
120 xAxis: {
121 categories: pCategories,
122 crosshair: true
123 },
124 yAxis: {
125 min: 0,
126 title: {
127 text: pYTitle
128 }
129 },
130 tooltip: {
131 headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
132 pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
133 '<td style="padding:0"><b>{point.y} ' + unity + '</b></td></tr>',
134 footerFormat: '</table>',
135 shared: true,
136 useHTML: true
137 },
138 plotOptions: {
139 column: {
140 pointPadding: 0.2,
141 borderWidth: 0
142 }
143 },
144 credits: {
145 enabled: false
146 },
147 series: pSeries
148 };
149
150 return param ;
151 }
152
153 /**
154 * Returns hash use to init HightChart object (without 'type').
155 * @param pTitle {String} The title of the chart.
156 * @param pXTitle {String} The xAxis title.
157 * @param pYTitle {String} The yAxis title.
158 * @param pXCategories {Array} The title of each category (x scale labels).
159 * @param pData {Array} The HightChart series.
160 * @return {Hash} The hash.
161 * @warning This method use HightChart xAxis.categories.
162 */
163 var chartplot = function( pTitle, pXTitle, pYTitle, pXCategories, pData ) {
164 var chart = {
165 title: {
166 text: pTitle
167 },
168 xAxis: {},
169 yAxis: {
170 title: {
171 text: pYTitle
172 }
173 },
174 series: pData,
175 credits: {
176 enabled: false
177 }
178 }
179 if( pXCategories != null ){
180 chart['xAxis']['categories'] = pXCategories ;
181 }
182 if( pXTitle != null ){
183 chart['xAxis']['title'] = { text: pXTitle } ;
184 }
185 if( pData.length <= 1 ) {
186 chart['legend'] = {'enabled': false};
187 } else {
188 chart['legend'] = {'enabled': true};
189 }
190 return chart ;
191 }
192
193 var pie_param = function( pTitle, pData, unity ) {
194 var series = [{
195 type: 'pie',
196 name: unity,
197 data: pData
198 }]
199 var plot = chartplot( pTitle, null, null, null, series );
200 plot['tooltip'] = {
201 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
202 };
203 plot['plotOptions'] = {
204 pie: {
205 allowPointSelect: true,
206 cursor: 'pointer',
207 dataLabels: {
208 enabled: true,
209 format: '<b>{point.name}</b>: {point.y:,.0f}',
210 style: {
211 color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
212 }
213 }
214 }
215 };
216 return plot ;
217 };
218
219 $(function() {
220 var global_results = {"nb_clstr_with_affi": 10820, "nb_clstr": 12139, "nb_seq_ambiguous": [0, 0, 0, 0, 7209, 7258, 17901], "nb_seq": 72475, "nb_clstr_ambiguous": [0, 0, 0, 0, 532, 558, 2359], "nb_seq_with_affi": 61087} ;
221 var sample_results = {"sampleA_R1": {"nb_seq": 72475, "nb_seq_with_affi": 61087, "nb_clstr_with_affi": 10820, "nb_clstr": 12139}} ;
222 var taxonomy_ranks = ["Domain", "Phylum", "Class", "Order", "Family", "Genus", "Species"] ;
223
224 // Remove alert
225 $('#js-alert').remove();
226 $('#content').removeClass("hidden");
227
228 // Display summary
229 var std_color = Highcharts.getOptions().colors ;
230 Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
231 return {
232 radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
233 stops: [
234 [0, color],
235 [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
236 ]
237 };
238 });
239
240 var pie_series = [
241 ["With affiliation", global_results["nb_clstr_with_affi"]],
242 ["Without affiliation", (global_results["nb_clstr"] - global_results["nb_clstr_with_affi"])]
243 ]
244 $('#clstr-ratio-affi').highcharts( pie_param("OTUs affiliation", pie_series, 'OTUs') );
245
246 var pie_series = [
247 ["With affiliation", global_results["nb_seq_with_affi"]],
248 ["Without affiliation", (global_results["nb_seq"] - global_results["nb_seq_with_affi"])]
249 ]
250 $('#seq-ratio-affi').highcharts( pie_param("Sequences affiliation", pie_series, 'sequences') );
251
252 Highcharts.getOptions().colors = std_color ;
253
254 var histogram_series = [
255 {
256 'name': 'OTUs',
257 'data': global_results["nb_clstr_ambiguous"].map(function(num) {
258 var prct = (num/global_results["nb_clstr"])*10000/100 ;
259 return( parseFloat(numberDisplay(prct)) );
260 })
261 }, {
262 'name': 'Sequences',
263 'data': global_results["nb_seq_ambiguous"].map(function(num) {
264 var prct = (num/global_results["nb_seq"])*10000/100 ;
265 return( parseFloat(numberDisplay(prct)) );
266 })
267 }
268 ];
269 $('#clstr-multi-affi').highcharts( histogram_param('Multi-affiliation by taxonomic rank', '% of multi-affiliated', taxonomy_ranks, histogram_series, '%') );
270
271 // Display data by sample
272 var table_categories = [ 'Sample', 'Nb OTUs', '% OTUs affiliated by blast', 'Nb seq', '% seq affiliated by blast' ];
273 var table_series = new Array();
274 for( var sample_name in sample_results ){
275 table_series.push([
276 sample_name,
277 sample_results[sample_name]['nb_clstr'],
278 Math.round(((sample_results[sample_name]['nb_clstr_with_affi']/sample_results[sample_name]['nb_clstr'])*10000)/100),
279 sample_results[sample_name]['nb_seq'],
280 Math.round(((sample_results[sample_name]['nb_seq_with_affi']/sample_results[sample_name]['nb_seq'])*10000)/100)
281 ]);
282 };
283 $('#samples-details').append( table("Blast affiliation by sample", table_categories, table_series) );
284 $('#samples-details table').prop( 'id', 'details-table' );
285 $('#samples-details table').DataTable({
286 "sDom": '<"top"<"#details-csv-export"><"clear">lf>rt<"bottom"ip><"clear">'
287 });
288 $('#details-csv-export').html( '<button class="btn btn-primary"><span class="glyphicon glyphicon-open-file" aria-hidden="true">CSV</span></button>' );
289 $('#details-csv-export').addClass( 'dataTables_filter' );
290 $('#details-csv-export').datatableExport({
291 'table_id': "details-table"
292 });
293 });
294 </script>
295 </head>
296 <body>
297 <p id="js-alert" class="alert alert-warning">
298 javascript is needed to display data.<br />
299 If you try to view this data on galaxy please contact your administrator to authorise javascript or download the file to view.
300 </p>
301 <div id="content" class="hidden">
302 <div id="global-summary">
303 <h1 class="page-header">Blast affiliation summary</h1>
304 <div class="row">
305 <div class="col-md-1"></div>
306 <div id="clstr-ratio-affi" class="col-md-5"></div>
307 <div id="seq-ratio-affi" class="col-md-5"></div>
308 <div class="col-md-1"></div>
309 </div>
310 <div class="row">
311 <div class="col-md-1"></div>
312 <div id="clstr-multi-affi" class="col-md-10"></div>
313 <div class="col-md-1"></div>
314 </div>
315 </div>
316 <div id="samples-details">
317 <h1 class="page-header">Blast affiliation by sample</h1>
318 </div>
319 </div>
320 </body>
321 </html>