Mercurial > repos > frogs > frogs_3_1_0

comparison test-data/references/06-affiliation.html @ 0:59bc96331073 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/geraldinepascal/FROGS-wrappers/tree/v3.1.0 commit 08296fc88e3e938c482c631bd515b3b7a0499647
author frogs
date Thu, 28 Feb 2019 10:14:49 -0500
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:59bc96331073
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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"></link>
25 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"></link>
26 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
27 <style type="text/css">
28 #js-alert {
29 width: 90%;
30 margin-right: auto;
31 margin-left: auto;
32 }
33 #content {
34 width: 90%;
35 margin-right: auto;
36 margin-left: auto;
37 }
38 .clear {
39 clear: both;
40 height: 0px;
41 width: 100%;
42 float: none !important;
43 }
44 ul.nav-tabs {
45 margin-bottom: 30px;
46 }
47 .page-item.active .page-link {
48 z-index: 1;
49 color: #fff;
50 background-color: #8EADAC;
51 border-color: #8EADAC;
52 outline: none !important;
53 box-shadow: none !important;
54 }
55 .btn {
56 color: #fff;
57 border:#8EADAC;
58 background-color: #8EADAC;
59 }
60 .btn:focus, .btn:active {
61 outline: none !important;
62 box-shadow: none !important;
63 }
64 .btn:hover:enabled{
65 color: #fff;
66 border:#648a89;
67 background-color: #648a89;
68 cursor:pointer !important;
69 }
70 .pb-2, .py-2 {
71 padding-bottom: 1.5rem !important;
72 margin-bottom: 2rem !important;
73 margin-top: 4rem !important;
74 }
75 .pb-2-first{
76 padding-bottom: 1.5rem !important;
77 margin-bottom: 2rem !important;
78 margin-top: 1rem !important;
79 }
80 /* ##### THEME FOR CHECKBOXES ##### */
81 .container {
82 position: relative;
83 padding-left: 0px;
84 margin-bottom: 15px;
85 cursor: pointer;
86 -webkit-user-select: none;
87 -moz-user-select: none;
88 -ms-user-select: none;
89 user-select: none;
90 }
91
92 /* Hide the browser's default checkbox */
93 .container input {
94 position: absolute;
95 opacity: 0;
96 cursor: pointer;
97 }
98
99 /* Create a custom checkbox */
100 .checkmark {
101 position: absolute;
102 top: 0;
103 left: 0;
104 height: 20px;
105 width: 20px;
106 background-color: #8EADAC;
107 border-radius: 5px;
108 opacity:0.65;
109 }
110
111 /* On mouse-over, add a grey background color */
112 .container:hover input ~ .checkmark {
113 background-color: #648a89;
114 }
115
116 /* When the checkbox is checked, add a blue background */
117 .container input:checked ~ .checkmark {
118 background-color: #8EADAC;
119 opacity:1;
120 }
121
122 /* Create the checkmark/indicator (hidden when not checked) */
123 .checkmark:after {
124 content: "";
125 position: absolute;
126 display: none;
127 }
128
129 /* Show the checkmark when checked */
130 .container input:checked ~ .checkmark:after {
131 display: block;
132 }
133
134 /* Style the checkmark/indicator */
135 .container .checkmark:after {
136 left: 7px;
137 top: 3px;
138 width: 6px;
139 height: 10px;
140 border: solid white;
141 border-width: 0 3px 3px 0;
142 -webkit-transform: rotate(45deg);
143 -ms-transform: rotate(45deg);
144 transform: rotate(45deg);
145 }
146 .highcharts-button > path{
147 stroke:#fff !important;
148 fill:#8EADAC !important;
149 }
150 g.highcharts-button{
151 cursor:pointer !important;
152 }
153 g.highcharts-button:hover{
154 color: #fff;
155 border:#648a89;
156 background-color: #648a89;
157 background-color: #648a89;
158 cursor:pointer !important;
159 }
160 <!--
161 .selectpicker{
162 background-color:rgb(100, 138, 137,0.25);
163 border-color:#8EADAC;
164 }
165 .selectpicker:hover{
166 background-color:rgb(100, 138, 137,0.25);
167 border-color:#8EADAC;
168 }
169 -->
170 option{
171 color:green
172 }
173 option:active, option:hover {
174 outline: none !important;
175 }
176
177 /* make it red instead (with with same width and style) */
178 option:active, option:hover {
179 box-shadow:red !important;
180 outline-color: red !important;
181 }
182 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; }
183
184 </style>
185 <!-- JS -->
186 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
187 <script type="text/javascript" src="https://code.highcharts.com/4.1.4/highcharts.js"></script>
188 <script type="text/javascript" src="https://code.highcharts.com/4.1.4/modules/exporting.js"></script>
189 <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
190 <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
191 <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>
192 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
193 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
194 <script type="text/javascript">
195 /*
196 * HTMLTable.js 0.1.0 - HTMLTable Library
197 *
198 * Copyright (c) 2015 Escudie Frederic
199 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
200 */
201 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};
202
203 /*
204 * dataTableExtractor.plugin.js 0.1.0 - datatableExport Library
205 *
206 * Copyright (c) 2015 Escudie Frederic
207 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
208 */
209 !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);
210 </script>
211 <script type="text/javascript">
212 Highcharts.SVGRenderer.prototype.symbols.download = function (x, y, w, h) {
213 var path = [
214 // Arrow stem
215 'M', x + w * 0.5, y,
216 'L', x + w * 0.5, y + h * 0.7,
217 // Arrow head
218 'M', x + w * 0.3, y + h * 0.5,
219 'L', x + w * 0.5, y + h * 0.7,
220 'L', x + w * 0.7, y + h * 0.5,
221 // Box
222 'M', x, y + h * 0.9,
223 'L', x, y + h,
224 'L', x + w, y + h,
225 'L', x + w, y + h * 0.9
226 ];
227 return path;
228 };
229
230 /**
231 * Returns the string representation of the number.
232 * @param pValue {Float} The number to process.
233 * @return {String} The string representation (example: 12856892.11111 => 12,856,892.11).
234 */
235 var numberDisplay = function( pValue ){
236 var new_val = "" ;
237 if( ("" + pValue + "").indexOf(".") != -1 ){
238 new_val = pValue.toFixed(2).replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
239 } else {
240 new_val = pValue.toFixed().replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
241 }
242 return new_val ;
243 }
244
245 /**
246 * Returns the HTML table representation of the data.
247 * @param pTitle {String} The title of the table.
248 * @param pCategories {Array} The title of each column.
249 * @param pData {Array} 2D matrix with row and column data.
250 * @return {String} The HTML table representation.
251 */
252 var table = function( pTitle, pCategories, pData ) {
253 // Header
254 var table_header = '' ;
255 var table_header_line = "" ;
256 for(var idx = 0 ; idx < pCategories.length ; idx++){
257 table_header_line += " <th>" + pCategories[idx] + "</th>\n" ;
258 }
259 table_header += " <tr>\n" + table_header_line + " </tr>\n" ;
260 table_header = " <thead>\n" + table_header + " </thead>\n" ;
261
262 // Body
263 var table_body = '' ;
264 for(var data_idx = 0 ; data_idx < pData.length ; data_idx++){
265 var table_body_row = "" ;
266 for(var category_idx = 0 ; category_idx < pCategories.length ; category_idx++){
267 if( typeof pData[data_idx][category_idx] === "number" ) {
268 table_body_row += " <td>" + numberDisplay(pData[data_idx][category_idx]) + "</td>\n" ;
269 } else {
270 table_body_row += " <td>" + pData[data_idx][category_idx] + "</td>\n" ;
271 }
272 }
273 table_body += " <tr>\n" + table_body_row + " </tr>\n" ;
274 }
275 table_body = " <tbody>\n" + table_body + " </tbody>\n" ;
276
277 return '<table class="table table-striped table-bordered">\n' + table_header + table_body + "</table>\n" ;
278 }
279
280 // couleur des diapos : bleu #8EADAC, vert : #A2A32F, orange1 #C6792B , taupe #9A866C, orange pastel : #DE9F73
281 var histogram_param = function( pTitle, pYTitle, pCategories, pSeries, unity ) {
282 var param = {
283 chart: {
284 type: 'column'
285 },
286 colors : [
287 '#8EADAC', '#DE9F73'
288 ] ,
289 exporting:{buttons: {contextButton: { symbol: 'download' }}},
290 buttons: {contextButton: {menuItems: ['downloadPNG', 'downloadSVG']}},
291 navigation: {
292 buttonOptions: {
293 theme: {
294 r: 4,
295 fill:'#8EADAC',
296 states: {
297 hover: {
298 fill: 'rgb(100, 138, 137)',
299 stroke:'#8EADAC'
300 },
301 select: {
302 stroke: '#8EADAC',
303 fill: 'rgb(100, 138, 137)',
304 }
305 }
306 }
307 }
308 },
309 title: {
310 text: pTitle
311 },
312 xAxis: {
313 categories: pCategories,
314 crosshair: true,
315 crosshair: {
316 color: "rgb(142,173,172,0.25)"
317 }
318 },
319 yAxis: {
320 min: 0,
321 title: {
322 text: pYTitle
323 }
324 },
325 tooltip: {
326 headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
327 pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
328 '<td style="padding:0"><b>{point.y} ' + unity + '</b></td></tr>',
329 footerFormat: '</table>',
330 shared: true,
331 useHTML: true
332 },
333 plotOptions: {
334 column: {
335 pointPadding: 0.2,
336 borderWidth: 0
337 }
338 },
339 credits: {
340 enabled: false
341 },
342 series: pSeries
343 };
344
345 return param ;
346 }
347
348 /**
349 * Returns hash use to init HightChart object (without 'type').
350 * @param pTitle {String} The title of the chart.
351 * @param pXTitle {String} The xAxis title.
352 * @param pYTitle {String} The yAxis title.
353 * @param pXCategories {Array} The title of each category (x scale labels).
354 * @param pData {Array} The HightChart series.
355 * @return {Hash} The hash.
356 * @warning This method use HightChart xAxis.categories.
357 */
358 // couleur des diapos : bleu #8EADAC, vert : #A2A32F, orange1 #C6792B , taupe #9A866C, orange pastel : #DE9F73
359 var chartplot = function( pTitle, pXTitle, pYTitle, pXCategories, pData ) {
360 var chart = {
361 title: {
362 text: pTitle
363 },
364 colors : [
365 '#8EADAC', '#DE9F73'
366 ] ,
367 exporting:{buttons: {contextButton: { symbol: 'download' }}},
368 buttons: {contextButton: {menuItems: ['downloadPNG', 'downloadSVG']}},
369 navigation: {
370 buttonOptions: {
371 theme: {
372 r: 4,
373 fill:'#8EADAC',
374 states: {
375 hover: {
376 fill: 'rgb(100, 138, 137)',
377 stroke:'#8EADAC'
378 },
379 select: {
380 stroke: '#8EADAC',
381 fill: 'rgb(100, 138, 137)',
382 }
383 }
384 }
385 }
386 },
387 xAxis: {},
388 yAxis: {
389 title: {
390 text: pYTitle
391 }
392 },
393 series: pData,
394 credits: {
395 enabled: false
396 }
397 }
398 if( pXCategories != null ){
399 chart['xAxis']['categories'] = pXCategories ;
400 }
401 if( pXTitle != null ){
402 chart['xAxis']['title'] = { text: pXTitle } ;
403 }
404 if( pData.length <= 1 ) {
405 chart['legend'] = {'enabled': false};
406 } else {
407 chart['legend'] = {'enabled': true};
408 }
409 return chart ;
410 }
411
412 var pie_param = function( pTitle, pData, unity ) {
413 var series = [{
414 type: 'pie',
415 name: unity,
416 data: pData
417 }]
418 var plot = chartplot( pTitle, null, null, null, series );
419 plot['tooltip'] = {
420 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
421 };
422 plot['plotOptions'] = {
423 pie: {
424 allowPointSelect: true,
425 cursor: 'pointer',
426 dataLabels: {
427 enabled: true,
428 format: '<b>{point.name}</b>: {point.y:,.0f}',
429 style: {
430 color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
431 }
432 }
433 }
434 };
435 return plot ;
436 };
437
438 $(function() {
439 var global_results = {"nb_clstr_with_affi": 86, "nb_clstr": 86, "nb_seq_ambiguous": [0, 0, 0, 0, 0, 0, 0, 0], "nb_seq": 45574, "nb_clstr_ambiguous": [0, 0, 0, 0, 0, 0, 0, 0], "nb_seq_with_affi": 45574} ;
440 var sample_results = {"02": {"nb_seq": 15140, "nb_seq_with_affi": 15140, "nb_clstr_with_affi": 86, "nb_clstr": 86}, "03": {"nb_seq": 15167, "nb_seq_with_affi": 15167, "nb_clstr_with_affi": 86, "nb_clstr": 86}, "01": {"nb_seq": 15267, "nb_seq_with_affi": 15267, "nb_clstr_with_affi": 86, "nb_clstr": 86}} ;
441 var taxonomy_ranks = ["Domain", "Phylum", "Class", "Order", "Family", "Genus", "Species"] ;
442
443 // Remove alert
444 $('#js-alert').remove();
445 $('#content').removeClass("hidden");
446
447 // Display summary
448 var std_color = Highcharts.getOptions().colors ;
449 Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
450 return {
451 radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
452 stops: [
453 [0, color],
454 [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
455 ]
456 };
457 });
458
459 var pie_series = [
460 ["With affiliation", global_results["nb_clstr_with_affi"]],
461 ["Without affiliation", (global_results["nb_clstr"] - global_results["nb_clstr_with_affi"])]
462 ]
463 $('#clstr-ratio-affi').highcharts( pie_param("OTUs affiliation", pie_series, 'OTUs') );
464
465 var pie_series = [
466 ["With affiliation", global_results["nb_seq_with_affi"]],
467 ["Without affiliation", (global_results["nb_seq"] - global_results["nb_seq_with_affi"])]
468 ]
469 $('#seq-ratio-affi').highcharts( pie_param("Sequences affiliation", pie_series, 'sequences') );
470
471 Highcharts.getOptions().colors = std_color ;
472
473 var histogram_series = [
474 {
475 'name': 'OTUs',
476 'data': global_results["nb_clstr_ambiguous"].map(function(num) {
477 var prct = (num/global_results["nb_clstr"])*10000/100 ;
478 return( parseFloat(numberDisplay(prct)) );
479 })
480 }, {
481 'name': 'Sequences',
482 'data': global_results["nb_seq_ambiguous"].map(function(num) {
483 var prct = (num/global_results["nb_seq"])*10000/100 ;
484 return( parseFloat(numberDisplay(prct)) );
485 })
486 }
487 ];
488 $('#clstr-multi-affi').highcharts( histogram_param('Multi-affiliation by taxonomic rank', '% of multi-affiliated', taxonomy_ranks, histogram_series, '%') );
489
490 // Display data by sample
491 var table_categories = [ 'Sample', 'Nb OTUs', '% OTUs affiliated by blast', 'Nb seq', '% seq affiliated by blast' ];
492 var table_series = new Array();
493 for( var sample_name in sample_results ){
494 table_series.push([
495 sample_name,
496 sample_results[sample_name]['nb_clstr'],
497 Math.round(((sample_results[sample_name]['nb_clstr_with_affi']/sample_results[sample_name]['nb_clstr'])*10000)/100),
498 sample_results[sample_name]['nb_seq'],
499 Math.round(((sample_results[sample_name]['nb_seq_with_affi']/sample_results[sample_name]['nb_seq'])*10000)/100)
500 ]);
501 };
502 $('#samples-details').append( table("Blast affiliation by sample", table_categories, table_series) );
503 $('#samples-details table').prop( 'id', 'details-table' );
504 $('#samples-details table').DataTable({
505 //"sDom": '<"top"<"#details-csv-export"><"clear">lf>rt<"bottom"ip><"clear">'
506 dom: "<'#details-csv-export'><'row'<'col-sm-5'l><'col-sm-7'f>>" +
507 "<'row'<'col-sm-12'tr>>" +
508 "<'row'<'col-sm-5'i><'col-sm-7'p>>",
509 "pagingType": "simple"
510 });
511 $('#details-csv-export').html( '<button class="btn btn-primary" ><span class="fa fa-download" aria-hidden="true"> CSV</span></button>' );
512 $('#details-csv-export').addClass( 'dataTables_filter' );
513 $('#details-csv-export').datatableExport({
514 'table_id': "details-table"
515 });
516 });
517 </script>
518 </head>
519 <body>
520 <p id="js-alert" class="alert alert-warning">
521 javascript is needed to display data.<br />
522 If you try to view this data on galaxy please contact your administrator to authorise javascript or download the file to view.
523 </p>
524 <div id="content" class="hidden">
525 <div id="global-summary">
526 <h2 class="pb-2-first mt-4 mb-2 border-bottom" style="margin-top: 1rem">Blast affiliation summary</h2>
527 <div class="row">
528 <div class="col-md-1"></div>
529 <div id="clstr-ratio-affi" class="col-md-5"></div>
530 <div id="seq-ratio-affi" class="col-md-5"></div>
531 <div class="col-md-1"></div>
532 </div>
533 <h2 class="pb-2 mt-4 mb-2 border-bottom">Blast multi-affiliation summary</h2>
534 <div class="row">
535 <div class="col-md-1"></div>
536 <div id="clstr-multi-affi" class="col-md-10"></div>
537 <div class="col-md-1"></div>
538 </div>
539 </div>
540 <div id="samples-details">
541 <h2 class="pb-2 mt-4 mb-2 border-bottom">Blast affiliation by sample</h2>
542 </div>
543 </div>
544 </body>
545 </html>