timeline.html

Nico C├ęsar, 06/03/2020 11:01 PM

 
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>