Mercurial > repos > iuc > assembly_stats
diff assembly-stats.html @ 0:9e4955725212 draft default tip
planemo upload for repository https://github.com/galaxyproject/tools-iuc/tree/master/tools/assembly-stats commit 28119c39c4b59a67f629c8ca569d58f4d2949c9c
| author | iuc |
|---|---|
| date | Wed, 21 Jun 2023 09:26:46 +0000 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/assembly-stats.html Wed Jun 21 09:26:46 2023 +0000 @@ -0,0 +1,230 @@ +<html> +<head> + <title>assembly stats</title> +</head> +<body> + <link rel="stylesheet" type="text/css" href="css/circle-plot.css?v1"> + <link rel="stylesheet" type="text/css" href="css/square-plot.css?v1"> + <link rel="stylesheet" type="text/css" href="css/table.css?v1"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> + <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> + <script src="js/d3-tip.js"></script> + <script type="text/javascript" src="js/circle-plot.js?v1"></script> + <script type="text/javascript" src="js/square-plot.js?v1"></script> + <script type="text/javascript" src="js/table.js?v1"></script> + <style> + html, body { + padding: 0px; + margin: 0px; + overflow: hidden; + } + + #assembly { + text-align: center; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + font-family: helvetica, arial, sans-serif; + font-size: 14pt; + overflow: hidden; + } + + #assembly_stats { + height: 100%; + width: 100%; + } + + .asm-tab-container { + position: relative; + width: 100%; + height: 34px; + text-align: center; + color: #555555; + background-color: #cccccc; + } + + .asm-tab { + position: relative; + width: 33.33%; + height: 30px; + display: inline-block; + font-size: 12pt; + line-height: 30px; + margin-left: -2px; + margin-top: 2px; + border: solid 2px #555555; + border-top: none; + border-bottom: none; + cursor: pointer; + border-radius: 17px; + } + + .asm-tab.active { + color: black; + margin-top: 0; + border: solid 2px #555555; + background-color: #bbbbbb; + } + + .asm-tab:hover { + margin-top: 0; + border: solid 2px #555555; + } + + .asm-plot-container { + position: relative; + width: 100%; + height: 90%; + text-align: center; + } + + #assembly_stats_left { + position: relative; + width: 50%; + height: 90%; + float: left; + text-align: center; + } + + #assembly_stats_right { + position: relative; + width: 50%; + height: 90%; + float: right; + text-align: center; + } + </style> + + <div id="assembly_stats"></div> + + <script> + var queries = window.location.href.replace(/^.+\?/, '').split('&'); + var params = []; + queries.forEach(function (q) { + var parts = q.split('='); + if (!params[parts[0]]) params[parts[0]] = []; + params[parts[0]].push(parts[1]); + }); + + var assemblies = params['assembly'] || ['output']; + var path = params['path'] || 'json/'; + if (params['altAssembly']) assemblies = assemblies.concat(params['altAssembly']); + + var views = ['circle', 'cumulative', 'table']; // Les trois onglets à afficher + var defaultTab = 'circle'; // Onglet par défaut à afficher + + var div = d3.select('div#assembly_stats'); + var tab_container = div.append('div').attr('class', 'asm-tab-container'); + var tabcount = 3; // Nombre d'onglets (circle, cumulative, table) + var tabwidth = 25; // Largeur de chaque onglet en pourcentage + + for (var i = 0; i < tabcount; i++) { + var tab_div = tab_container.append('div') + .attr('class', function () { + if (views[i] === defaultTab) return 'asm-tab active'; + return 'asm-tab'; + }) + .style('width', tabwidth + '%') + .text(views[i]); + + tab_div.on('click', function () { + d3.selectAll('.asm-tab').classed('active', false); + d3.select(this).classed('active', true); + + var view = d3.select(this).text(); + var plot_container = d3.select('#asm-plot-container'); + + if (view === 'circle') { + plot_container.html(''); + arr[0].drawPlot('asm-plot-container'); + } else if (view === 'cumulative') { + plot_container.html(''); + arr[0].squarePlot('asm-plot-container'); + arr[0].addKey(assemblies); + + setTimeout(function () { + arr.forEach(function (asm, index) { + if (index > 0) { + var data = asm.prepareLine(); + arr[0].addLine(data, asm.name, asm); + } + }); + }, 250); + } else if (view === 'table') { + plot_container.html(''); + arr[0].drawTable('asm-plot-container'); + + setTimeout(function () { + arr.forEach(function (asm, index) { + if (index > 0) { + setTimeout(function () { + arr[0].addColumn(asm); + }, 250); + } + }); + }, 250); + } + }); + } + + var plot_container = div.append('div').attr('class', 'asm-plot-container').attr('id', 'asm-plot-container'); + document.title = assemblies[0] + ' assembly stats'; + var arr = []; + + assemblies.forEach(function (assembly, index) { + d3.json(path + assembly + '.assembly-stats.json', function (error, json) { + if (error) return console.warn(error); + arr[index] = new Assembly(json); + arr[index].name = assembly.replace('.', '_'); + + if (views[0] === 'cumulative') { + if (index === 0) { + arr[0].squarePlot('asm-plot-container'); + arr[0].addKey(assemblies); + } else { + var data = arr[index].prepareLine(); + setTimeout(function () { + arr[0].addLine(data, assembly, arr[index]); + }, 250); + } + } else if (views[0] === 'table') { + if (index === 0) { + arr[0].drawTable('asm-plot-container'); + } else { + setTimeout(function () { + arr[0].addColumn(arr[index]); + }, 250); + } + } else { + arr[0].drawPlot('asm-plot-container'); + } + }); + }); + + function compare(asm1, asm2) { + if (!asm1) return; + if (!asm2) return; + + plot_container + .append('div') + .attr('id', 'assembly_stats_left') + .append('p') + .text(assemblies[0]); + + plot_container + .append('div') + .attr('id', 'assembly_stats_right') + .append('p') + .text(assemblies[1]); + + var span = Math.max(asm1.assembly, asm2.assembly); + var longest = Math.max(asm1.scaffolds[0], asm2.scaffolds[0]); + + asm1.drawPlot('assembly_stats_left', longest, span); + asm2.drawPlot('assembly_stats_right', longest, span); + } + </script> +</body> +</html>