|
<!doctype html>
|
|
<!--
|
|
~ Copyright 2013-2019, Centre for Genomic Regulation (CRG)
|
|
~
|
|
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
~ you may not use this file except in compliance with the License.
|
|
~ You may obtain a copy of the License at
|
|
~
|
|
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
~
|
|
~ Unless required by applicable law or agreed to in writing, software
|
|
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
~ See the License for the specific language governing permissions and
|
|
~ limitations under the License.
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<script type="text/javascript">
|
|
var prot = (("https:" == document.location.protocol) ? "https://" : "http://");
|
|
document.write(unescape("%3Cscript src='" + prot + "code.jquery.com/jquery-latest.min.js' type='text/javascript' %3E%3C/script%3E"));
|
|
document.write(unescape("%3Cscript src='" + prot + "d3js.org/d3.v3.min.js' charset='utf-8' type='text/javascript' %3E%3C/script%3E"));
|
|
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"));
|
|
</script>
|
|
<style type="text/css">
|
|
* {
|
|
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.axis path,
|
|
.axis line {
|
|
fill: none;
|
|
stroke: black;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.axis text {
|
|
font-size: 10px;
|
|
}
|
|
|
|
div#timeline g text {
|
|
font-size: 13px;
|
|
}
|
|
|
|
text.timeline-label {
|
|
font-size: 13px;
|
|
}
|
|
|
|
#timeline2 .axis {
|
|
transform: translate(0px,30px);
|
|
-ms-transform: translate(0px,30px); /* IE 9 */
|
|
-webkit-transform: translate(0px,30px); /* Safari and Chrome */
|
|
-o-transform: translate(0px,30px); /* Opera */
|
|
-moz-transform: translate(0px,30px); /* Firefox */
|
|
}
|
|
|
|
.coloredDiv {
|
|
height:20px; width:20px; float:left;
|
|
}
|
|
|
|
#footer {
|
|
padding-top: 3em; color: #bfbfbf; font-size: 13px;
|
|
}
|
|
|
|
#footer a:visited {
|
|
color: #bfbfbf;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
var handler=null;
|
|
// see https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20c
|
|
var colors = d3.scale.category20c().domain(d3.range(0,20)).range()
|
|
|
|
function c0(index) { return "#9c9c9c"; }
|
|
function c1(index) { return "#bdbdbd"; }
|
|
function c2(index) { return colors[index % 16]; } // <-- note: uses only the first 16 colors
|
|
|
|
var elapsed="27.8s"
|
|
var beginningMillis=1585312325250;
|
|
var endingMillis=1585312353012;
|
|
var data=[
|
|
{"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)}]},
|
|
{"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)}]},
|
|
{"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)}]},
|
|
{"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)}]},
|
|
{"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)}]},
|
|
{"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)}]},
|
|
{"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)}]},
|
|
{"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)}]},
|
|
{"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"}]},
|
|
{"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"}]},
|
|
{"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)}]}
|
|
]
|
|
|
|
|
|
function getTickFormat() {
|
|
var MIN = 1000 * 60
|
|
var HOUR = MIN * 60
|
|
var DAY = HOUR * 24
|
|
var delta = (endingMillis - beginningMillis)
|
|
|
|
if( delta < 2 * MIN ) {
|
|
return {
|
|
format: d3.time.format("%S"),
|
|
tickTime: d3.time.seconds,
|
|
tickInterval: 5,
|
|
tickSize: 6
|
|
}
|
|
}
|
|
|
|
if( delta < 2 * HOUR ) {
|
|
return {
|
|
format: d3.time.format("%M"),
|
|
tickTime: d3.time.minutes,
|
|
tickInterval: 5,
|
|
tickSize: 6
|
|
}
|
|
}
|
|
|
|
if( delta < 2 * DAY ) {
|
|
return {
|
|
format: d3.time.format("%H:%M"),
|
|
tickTime: d3.time.hours,
|
|
tickInterval: 1,
|
|
tickSize: 6
|
|
}
|
|
}
|
|
|
|
if( delta <= 7 * DAY ) {
|
|
return {
|
|
format: d3.time.format("%b %e %H:%M"),
|
|
tickTime: d3.time.hours,
|
|
tickInterval: 6,
|
|
tickSize: 6
|
|
}
|
|
}
|
|
|
|
return {
|
|
format: d3.time.format("%b %e"),
|
|
tickTime: d3.time.days,
|
|
tickInterval: 1,
|
|
tickSize: 6
|
|
}
|
|
}
|
|
|
|
function getLabelMargin(scale) {
|
|
$('<span class="labelSpan" style="display: none"></span>').appendTo('body');
|
|
|
|
var labelMargin = 0
|
|
$.each(data, function (key, value) {
|
|
labelMargin = Math.max(labelMargin, $('.labelSpan').html(value.label).width());
|
|
});
|
|
|
|
$('.labelSpan').remove();
|
|
|
|
return (labelMargin * scale);
|
|
}
|
|
|
|
function render() {
|
|
handler=null;
|
|
$("#timeline").empty()
|
|
$('#label_elapsed').text(elapsed)
|
|
$('#label_launch').text( d3.time.format('%d %b %Y %H:%M')(new Date(beginningMillis)) )
|
|
|
|
var width = $(window).width();
|
|
var chart = d3.timeline()
|
|
.stack() // toggles graph stacking
|
|
.margin({left:getLabelMargin(0.85), right:100, top:0, bottom:0})
|
|
.tickFormat( getTickFormat() )
|
|
.rowSeperators('#f5f5f5')
|
|
.showTimeAxisTick()
|
|
;
|
|
var svg = d3.select("#timeline").append("svg").attr("width", width).datum(data).call(chart);
|
|
}
|
|
|
|
function hrz() {
|
|
if( handler != null ) clearTimeout(handler)
|
|
handler = setTimeout(render, 150);
|
|
}
|
|
|
|
$(document).ready(render)
|
|
$(window).resize(hrz); // resize the applet on window resize
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<h3>Processes execution timeline</h3>
|
|
<p>
|
|
Launch time: <span id='label_launch'> </span><br>
|
|
Elapsed time: <span id='label_elapsed'> </span><br>
|
|
Legend: job wall time / memory usage (RAM) <span id='label_legend'> </span>
|
|
</p>
|
|
<div id="timeline"></div>
|
|
</div>
|
|
|
|
<div id='footer'>
|
|
Created with Nextflow -- <a href='http://www.nextflow.io' target='_blank'>http://nextflow.io</a>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var prot = (("https:" == document.location.protocol) ? "https://" : "http://");
|
|
document.write(unescape("%3Clink href='" + prot + "fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css' %3E%3C/link%3E"));
|
|
</script>
|
|
</body>
|
|
</html>
|
