|
1
|
<!doctype html>
|
|
2
|
<!--
|
|
3
|
~ Copyright 2013-2019, Centre for Genomic Regulation (CRG)
|
|
4
|
~
|
|
5
|
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
~ you may not use this file except in compliance with the License.
|
|
7
|
~ You may obtain a copy of the License at
|
|
8
|
~
|
|
9
|
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
~
|
|
11
|
~ Unless required by applicable law or agreed to in writing, software
|
|
12
|
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
~ See the License for the specific language governing permissions and
|
|
15
|
~ limitations under the License.
|
|
16
|
-->
|
|
17
|
|
|
18
|
<html>
|
|
19
|
<head>
|
|
20
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
21
|
<script type="text/javascript">
|
|
22
|
var prot = (("https:" == document.location.protocol) ? "https://" : "http://");
|
|
23
|
document.write(unescape("%3Cscript src='" + prot + "code.jquery.com/jquery-latest.min.js' type='text/javascript' %3E%3C/script%3E"));
|
|
24
|
document.write(unescape("%3Cscript src='" + prot + "d3js.org/d3.v3.min.js' charset='utf-8' type='text/javascript' %3E%3C/script%3E"));
|
|
25
|
document.write(unescape("%3Cscript src='" + prot + "cdn.rawgit.com/nextflow-io/d3-timeline/82622c4cc35bac7283b3a317826b0709ac1ae476/src/d3-timeline.js' type='text/javascript' %3E%3C/script%3E"));
|
|
26
|
</script>
|
|
27
|
<style type="text/css">
|
|
28
|
* {
|
|
29
|
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
|
30
|
}
|
|
31
|
|
|
32
|
.axis path,
|
|
33
|
.axis line {
|
|
34
|
fill: none;
|
|
35
|
stroke: black;
|
|
36
|
shape-rendering: crispEdges;
|
|
37
|
}
|
|
38
|
|
|
39
|
.axis text {
|
|
40
|
font-size: 10px;
|
|
41
|
}
|
|
42
|
|
|
43
|
div#timeline g text {
|
|
44
|
font-size: 13px;
|
|
45
|
}
|
|
46
|
|
|
47
|
text.timeline-label {
|
|
48
|
font-size: 13px;
|
|
49
|
}
|
|
50
|
|
|
51
|
#timeline2 .axis {
|
|
52
|
transform: translate(0px,30px);
|
|
53
|
-ms-transform: translate(0px,30px); /* IE 9 */
|
|
54
|
-webkit-transform: translate(0px,30px); /* Safari and Chrome */
|
|
55
|
-o-transform: translate(0px,30px); /* Opera */
|
|
56
|
-moz-transform: translate(0px,30px); /* Firefox */
|
|
57
|
}
|
|
58
|
|
|
59
|
.coloredDiv {
|
|
60
|
height:20px; width:20px; float:left;
|
|
61
|
}
|
|
62
|
|
|
63
|
#footer {
|
|
64
|
padding-top: 3em; color: #bfbfbf; font-size: 13px;
|
|
65
|
}
|
|
66
|
|
|
67
|
#footer a:visited {
|
|
68
|
color: #bfbfbf;
|
|
69
|
text-decoration: underline;
|
|
70
|
}
|
|
71
|
</style>
|
|
72
|
<script type="text/javascript">
|
|
73
|
var handler=null;
|
|
74
|
// see https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20c
|
|
75
|
var colors = d3.scale.category20c().domain(d3.range(0,20)).range()
|
|
76
|
|
|
77
|
function c0(index) { return "#9c9c9c"; }
|
|
78
|
function c1(index) { return "#bdbdbd"; }
|
|
79
|
function c2(index) { return colors[index % 16]; } // <-- note: uses only the first 16 colors
|
|
80
|
|
|
81
|
var elapsed="27.8s"
|
|
82
|
var beginningMillis=1585312325250;
|
|
83
|
var endingMillis=1585312353012;
|
|
84
|
var data=[
|
|
85
|
{"label": "buildIndicesORF (YAL_CDS_w_250)", "times": [{"starting_time": 1585312326377, "ending_time": 1585312326458, "color":c1(0)}, {"starting_time": 1585312326458, "ending_time": 1585312327235, "color":c2(0), "label": "1.1s \/ 3.1 MB"}, {"starting_time": 1585312327235, "ending_time": 1585312327445, "color":c1(0)}]},
|
|
86
|
{"label": "cutAdapters (WT3AT)", "times": [{"starting_time": 1585312326385, "ending_time": 1585312326463, "color":c1(1)}, {"starting_time": 1585312326463, "ending_time": 1585312337377, "color":c2(1), "label": "11.1s \/ 179.4 MB"}, {"starting_time": 1585312337377, "ending_time": 1585312337494, "color":c1(1)}]},
|
|
87
|
{"label": "buildIndicesrRNA (yeast_rRNA)", "times": [{"starting_time": 1585312326397, "ending_time": 1585312326465, "color":c1(2)}, {"starting_time": 1585312326465, "ending_time": 1585312327153, "color":c2(2), "label": "915ms \/ 3.1 MB"}, {"starting_time": 1585312327153, "ending_time": 1585312327312, "color":c1(2)}]},
|
|
88
|
{"label": "cutAdapters (WTnone)", "times": [{"starting_time": 1585312326404, "ending_time": 1585312326467, "color":c1(1)}, {"starting_time": 1585312326467, "ending_time": 1585312335214, "color":c2(1), "label": "9.1s \/ 176.5 MB"}, {"starting_time": 1585312335214, "ending_time": 1585312335494, "color":c1(1)}]},
|
|
89
|
{"label": "hisat2rRNA (WTnone)", "times": [{"starting_time": 1585312335571, "ending_time": 1585312335595, "color":c1(3)}, {"starting_time": 1585312335595, "ending_time": 1585312343502, "color":c2(3), "label": "8.5s \/ 24.1 MB"}, {"starting_time": 1585312343502, "ending_time": 1585312344078, "color":c1(3)}]},
|
|
90
|
{"label": "hisat2rRNA (WT3AT)", "times": [{"starting_time": 1585312337530, "ending_time": 1585312337598, "color":c1(3)}, {"starting_time": 1585312337598, "ending_time": 1585312349333, "color":c2(3), "label": "11.8s \/ 24.3 MB"}, {"starting_time": 1585312349333, "ending_time": 1585312349367, "color":c1(3)}]},
|
|
91
|
{"label": "hisat2ORF (WTnone)", "times": [{"starting_time": 1585312344110, "ending_time": 1585312344179, "color":c1(4)}, {"starting_time": 1585312344179, "ending_time": 1585312346904, "color":c2(4), "label": "2.9s \/ 25.1 MB"}, {"starting_time": 1585312346904, "ending_time": 1585312347056, "color":c1(4)}]},
|
|
92
|
{"label": "trim5pMismatches (WTnone)", "times": [{"starting_time": 1585312347106, "ending_time": 1585312347157, "color":c1(5)}, {"starting_time": 1585312347157, "ending_time": 1585312347822, "color":c2(5), "label": "764ms \/ 36.2 MB"}, {"starting_time": 1585312347822, "ending_time": 1585312347870, "color":c1(5)}]},
|
|
93
|
{"label": "hisat2ORF (WT3AT)", "times": [{"starting_time": 1585312349389, "ending_time": 1585312349468, "color":c1(4)}, {"starting_time": 1585312349468, "ending_time": 1585312351378, "color":c2(4), "label": "2s \/ 24.9 MB"}]},
|
|
94
|
{"label": "trim5pMismatches (WT3AT)", "times": [{"starting_time": 1585312351368, "ending_time": 1585312351458, "color":c1(5)}, {"starting_time": 1585312351458, "ending_time": 1585312351934, "color":c2(5), "label": "515ms \/ 17.9 MB"}]},
|
|
95
|
{"label": "summarise", "times": [{"starting_time": 1585312351916, "ending_time": 1585312351984, "color":c1(6)}, {"starting_time": 1585312351984, "ending_time": 1585312351990, "color":c2(6), "label": "99ms \/ 0"}, {"starting_time": 1585312351990, "ending_time": 1585312352015, "color":c1(6)}]}
|
|
96
|
]
|
|
97
|
|
|
98
|
|
|
99
|
function getTickFormat() {
|
|
100
|
var MIN = 1000 * 60
|
|
101
|
var HOUR = MIN * 60
|
|
102
|
var DAY = HOUR * 24
|
|
103
|
var delta = (endingMillis - beginningMillis)
|
|
104
|
|
|
105
|
if( delta < 2 * MIN ) {
|
|
106
|
return {
|
|
107
|
format: d3.time.format("%S"),
|
|
108
|
tickTime: d3.time.seconds,
|
|
109
|
tickInterval: 5,
|
|
110
|
tickSize: 6
|
|
111
|
}
|
|
112
|
}
|
|
113
|
|
|
114
|
if( delta < 2 * HOUR ) {
|
|
115
|
return {
|
|
116
|
format: d3.time.format("%M"),
|
|
117
|
tickTime: d3.time.minutes,
|
|
118
|
tickInterval: 5,
|
|
119
|
tickSize: 6
|
|
120
|
}
|
|
121
|
}
|
|
122
|
|
|
123
|
if( delta < 2 * DAY ) {
|
|
124
|
return {
|
|
125
|
format: d3.time.format("%H:%M"),
|
|
126
|
tickTime: d3.time.hours,
|
|
127
|
tickInterval: 1,
|
|
128
|
tickSize: 6
|
|
129
|
}
|
|
130
|
}
|
|
131
|
|
|
132
|
if( delta <= 7 * DAY ) {
|
|
133
|
return {
|
|
134
|
format: d3.time.format("%b %e %H:%M"),
|
|
135
|
tickTime: d3.time.hours,
|
|
136
|
tickInterval: 6,
|
|
137
|
tickSize: 6
|
|
138
|
}
|
|
139
|
}
|
|
140
|
|
|
141
|
return {
|
|
142
|
format: d3.time.format("%b %e"),
|
|
143
|
tickTime: d3.time.days,
|
|
144
|
tickInterval: 1,
|
|
145
|
tickSize: 6
|
|
146
|
}
|
|
147
|
}
|
|
148
|
|
|
149
|
function getLabelMargin(scale) {
|
|
150
|
$('<span class="labelSpan" style="display: none"></span>').appendTo('body');
|
|
151
|
|
|
152
|
var labelMargin = 0
|
|
153
|
$.each(data, function (key, value) {
|
|
154
|
labelMargin = Math.max(labelMargin, $('.labelSpan').html(value.label).width());
|
|
155
|
});
|
|
156
|
|
|
157
|
$('.labelSpan').remove();
|
|
158
|
|
|
159
|
return (labelMargin * scale);
|
|
160
|
}
|
|
161
|
|
|
162
|
function render() {
|
|
163
|
handler=null;
|
|
164
|
$("#timeline").empty()
|
|
165
|
$('#label_elapsed').text(elapsed)
|
|
166
|
$('#label_launch').text( d3.time.format('%d %b %Y %H:%M')(new Date(beginningMillis)) )
|
|
167
|
|
|
168
|
var width = $(window).width();
|
|
169
|
var chart = d3.timeline()
|
|
170
|
.stack() // toggles graph stacking
|
|
171
|
.margin({left:getLabelMargin(0.85), right:100, top:0, bottom:0})
|
|
172
|
.tickFormat( getTickFormat() )
|
|
173
|
.rowSeperators('#f5f5f5')
|
|
174
|
.showTimeAxisTick()
|
|
175
|
;
|
|
176
|
var svg = d3.select("#timeline").append("svg").attr("width", width).datum(data).call(chart);
|
|
177
|
}
|
|
178
|
|
|
179
|
function hrz() {
|
|
180
|
if( handler != null ) clearTimeout(handler)
|
|
181
|
handler = setTimeout(render, 150);
|
|
182
|
}
|
|
183
|
|
|
184
|
$(document).ready(render)
|
|
185
|
$(window).resize(hrz); // resize the applet on window resize
|
|
186
|
</script>
|
|
187
|
</head>
|
|
188
|
|
|
189
|
<body>
|
|
190
|
<div>
|
|
191
|
<h3>Processes execution timeline</h3>
|
|
192
|
<p>
|
|
193
|
Launch time: <span id='label_launch'> </span><br>
|
|
194
|
Elapsed time: <span id='label_elapsed'> </span><br>
|
|
195
|
Legend: job wall time / memory usage (RAM) <span id='label_legend'> </span>
|
|
196
|
</p>
|
|
197
|
<div id="timeline"></div>
|
|
198
|
</div>
|
|
199
|
|
|
200
|
<div id='footer'>
|
|
201
|
Created with Nextflow -- <a href='http://www.nextflow.io' target='_blank'>http://nextflow.io</a>
|
|
202
|
</div>
|
|
203
|
|
|
204
|
<script type="text/javascript">
|
|
205
|
var prot = (("https:" == document.location.protocol) ? "https://" : "http://");
|
|
206
|
document.write(unescape("%3Clink href='" + prot + "fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css' %3E%3C/link%3E"));
|
|
207
|
</script>
|
|
208
|
</body>
|
|
209
|
</html>
|
