Mercurial > repos > iuc > assembly_stats

comparison assembly-stats.html @ 0:9e4955725212 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/galaxyproject/tools-iuc/tree/master/tools/assembly-stats commit 28119c39c4b59a67f629c8ca569d58f4d2949c9c
author iuc
date Wed, 21 Jun 2023 09:26:46 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:9e4955725212
1 <html>
2 <head>
3 <title>assembly stats</title>
4 </head>
5 <body>
6 <link rel="stylesheet" type="text/css" href="css/circle-plot.css?v1">
7 <link rel="stylesheet" type="text/css" href="css/square-plot.css?v1">
8 <link rel="stylesheet" type="text/css" href="css/table.css?v1">
9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
10 <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
11 <script src="js/d3-tip.js"></script>
12 <script type="text/javascript" src="js/circle-plot.js?v1"></script>
13 <script type="text/javascript" src="js/square-plot.js?v1"></script>
14 <script type="text/javascript" src="js/table.js?v1"></script>
15 <style>
16 html, body {
17 padding: 0px;
18 margin: 0px;
19 overflow: hidden;
20 }
21
22 #assembly {
23 text-align: center;
24 position: fixed;
25 top: 0;
26 left: 0;
27 bottom: 0;
28 right: 0;
29 font-family: helvetica, arial, sans-serif;
30 font-size: 14pt;
31 overflow: hidden;
32 }
33
34 #assembly_stats {
35 height: 100%;
36 width: 100%;
37 }
38
39 .asm-tab-container {
40 position: relative;
41 width: 100%;
42 height: 34px;
43 text-align: center;
44 color: #555555;
45 background-color: #cccccc;
46 }
47
48 .asm-tab {
49 position: relative;
50 width: 33.33%;
51 height: 30px;
52 display: inline-block;
53 font-size: 12pt;
54 line-height: 30px;
55 margin-left: -2px;
56 margin-top: 2px;
57 border: solid 2px #555555;
58 border-top: none;
59 border-bottom: none;
60 cursor: pointer;
61 border-radius: 17px;
62 }
63
64 .asm-tab.active {
65 color: black;
66 margin-top: 0;
67 border: solid 2px #555555;
68 background-color: #bbbbbb;
69 }
70
71 .asm-tab:hover {
72 margin-top: 0;
73 border: solid 2px #555555;
74 }
75
76 .asm-plot-container {
77 position: relative;
78 width: 100%;
79 height: 90%;
80 text-align: center;
81 }
82
83 #assembly_stats_left {
84 position: relative;
85 width: 50%;
86 height: 90%;
87 float: left;
88 text-align: center;
89 }
90
91 #assembly_stats_right {
92 position: relative;
93 width: 50%;
94 height: 90%;
95 float: right;
96 text-align: center;
97 }
98 </style>
99
100 <div id="assembly_stats"></div>
101
102 <script>
103 var queries = window.location.href.replace(/^.+\?/, '').split('&');
104 var params = [];
105 queries.forEach(function (q) {
106 var parts = q.split('=');
107 if (!params[parts[0]]) params[parts[0]] = [];
108 params[parts[0]].push(parts[1]);
109 });
110
111 var assemblies = params['assembly'] || ['output'];
112 var path = params['path'] || 'json/';
113 if (params['altAssembly']) assemblies = assemblies.concat(params['altAssembly']);
114
115 var views = ['circle', 'cumulative', 'table']; // Les trois onglets à afficher
116 var defaultTab = 'circle'; // Onglet par défaut à afficher
117
118 var div = d3.select('div#assembly_stats');
119 var tab_container = div.append('div').attr('class', 'asm-tab-container');
120 var tabcount = 3; // Nombre d'onglets (circle, cumulative, table)
121 var tabwidth = 25; // Largeur de chaque onglet en pourcentage
122
123 for (var i = 0; i < tabcount; i++) {
124 var tab_div = tab_container.append('div')
125 .attr('class', function () {
126 if (views[i] === defaultTab) return 'asm-tab active';
127 return 'asm-tab';
128 })
129 .style('width', tabwidth + '%')
130 .text(views[i]);
131
132 tab_div.on('click', function () {
133 d3.selectAll('.asm-tab').classed('active', false);
134 d3.select(this).classed('active', true);
135
136 var view = d3.select(this).text();
137 var plot_container = d3.select('#asm-plot-container');
138
139 if (view === 'circle') {
140 plot_container.html('');
141 arr[0].drawPlot('asm-plot-container');
142 } else if (view === 'cumulative') {
143 plot_container.html('');
144 arr[0].squarePlot('asm-plot-container');
145 arr[0].addKey(assemblies);
146
147 setTimeout(function () {
148 arr.forEach(function (asm, index) {
149 if (index > 0) {
150 var data = asm.prepareLine();
151 arr[0].addLine(data, asm.name, asm);
152 }
153 });
154 }, 250);
155 } else if (view === 'table') {
156 plot_container.html('');
157 arr[0].drawTable('asm-plot-container');
158
159 setTimeout(function () {
160 arr.forEach(function (asm, index) {
161 if (index > 0) {
162 setTimeout(function () {
163 arr[0].addColumn(asm);
164 }, 250);
165 }
166 });
167 }, 250);
168 }
169 });
170 }
171
172 var plot_container = div.append('div').attr('class', 'asm-plot-container').attr('id', 'asm-plot-container');
173 document.title = assemblies[0] + ' assembly stats';
174 var arr = [];
175
176 assemblies.forEach(function (assembly, index) {
177 d3.json(path + assembly + '.assembly-stats.json', function (error, json) {
178 if (error) return console.warn(error);
179 arr[index] = new Assembly(json);
180 arr[index].name = assembly.replace('.', '_');
181
182 if (views[0] === 'cumulative') {
183 if (index === 0) {
184 arr[0].squarePlot('asm-plot-container');
185 arr[0].addKey(assemblies);
186 } else {
187 var data = arr[index].prepareLine();
188 setTimeout(function () {
189 arr[0].addLine(data, assembly, arr[index]);
190 }, 250);
191 }
192 } else if (views[0] === 'table') {
193 if (index === 0) {
194 arr[0].drawTable('asm-plot-container');
195 } else {
196 setTimeout(function () {
197 arr[0].addColumn(arr[index]);
198 }, 250);
199 }
200 } else {
201 arr[0].drawPlot('asm-plot-container');
202 }
203 });
204 });
205
206 function compare(asm1, asm2) {
207 if (!asm1) return;
208 if (!asm2) return;
209
210 plot_container
211 .append('div')
212 .attr('id', 'assembly_stats_left')
213 .append('p')
214 .text(assemblies[0]);
215
216 plot_container
217 .append('div')
218 .attr('id', 'assembly_stats_right')
219 .append('p')
220 .text(assemblies[1]);
221
222 var span = Math.max(asm1.assembly, asm2.assembly);
223 var longest = Math.max(asm1.scaffolds[0], asm2.scaffolds[0]);
224
225 asm1.drawPlot('assembly_stats_left', longest, span);
226 asm2.drawPlot('assembly_stats_right', longest, span);
227 }
228 </script>
229 </body>
230 </html>