in luigi/static/visualiser/js/visualiserApp.js [733:801]
function draw(isUpdate) {
for (var id in tasks) {
var task = tasks[id];
var className = task.status;
var html = "<div class='taskNode' data-task-id='" + task.taskId + "'>";
html += "<span class=status></span>";
html += "<span class=name>"+task.name+"</span>";
html += "<span class=queue><span class=counter>"+ task.status +"</span></span>";
html += "</div>";
g.setNode(task.taskId, {
labelType: "html",
label: html,
rx: 5,
ry: 5,
padding: 0,
class: className
});
if (task.inputQueue) {
for (var i = 0; i < task.inputQueue.length; i++) {
// Destination node may not be in tasks if this is an inverted graph
if (taskIdMap[task.inputQueue[i]] !== undefined) {
if (task.status === "DONE") {
var durations = getDurations(tasks, task.inputQueue);
var duration = durations[task.inputQueue[i]];
var oneDayInMilliseconds = 24 * 60 * 60 * 1000;
var durationLabel;
if (duration.getTime() < oneDayInMilliseconds) {
// Label task duration in stripped ISO format (hh:mm:ss.f)
durationLabel = duration.toISOString().substr(11, 12);
} else {
durationLabel = "> 24h";
}
g.setEdge(task.inputQueue[i], task.taskId, {
label: durationLabel,
width: 40
});
} else {
g.setEdge(task.inputQueue[i], task.taskId, {
width: 40
});
}
}
}
}
}
var styleTooltip = function(name, description) {
return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>";
};
inner.call(render, g);
if(paint){
// Zoom and scale to fit
var zoomScale = zoom.scale();
var graphWidth = g.graph().width + 80;
var graphHeight = g.graph().height + 40;
var width = parseInt(svg.style("width").replace(/px/, ""));
var height = parseInt(svg.style("height").replace(/px/, ""));
zoomScale = Math.min(width / graphWidth, height / graphHeight);
var translate = [(width/2) - ((graphWidth*zoomScale)/2), (height/2) - ((graphHeight*zoomScale)/2)];
zoom.translate(translate);
zoom.scale(zoomScale);
zoom.event(isUpdate ? svg.transition().duration(3000) : d3.select("#mysvg"));
}
inner.selectAll("g.node")
.attr("title", function(v) { return styleTooltip(v, getParam(tasks, v)); })
.each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });
}