in luigi/static/visualiser/js/graph.js [245:323]
DependencyGraph.prototype.renderGraph = function() {
var self = this;
$.each(this.graph.links, function(i, link) {
var line = $(svgElement("line"))
.attr("class","link")
.attr("x1", link.source.x)
.attr("y1", link.source.y)
.attr("x2", link.target.x)
.attr("y2", link.target.y)
.appendTo(self.svg);
});
$.each(this.graph.nodes, function(i, node) {
var g = $(svgElement("g"))
.addClass("node")
.attr("transform", "translate(" + node.x + "," + node.y +")")
.appendTo(self.svg);
$(svgElement("circle"))
.addClass("nodeCircle")
.attr("r", 7)
.attr("fill", statusColors[node.status])
.appendTo(g);
$(svgLink(node.trackingUrl))
.append(
$(svgElement("text"))
.text(escapeHtml(node.name))
.attr("y", 3))
.attr("class","graph-node-a")
.attr("data-task-status", node.status)
.attr("data-task-id", node.taskId)
.appendTo(g);
var titleText = node.name;
var content = $.map(node.params, function (value, name) { return escapeHtml(name + ": " + value); }).join("<br>");
g.attr("title", titleText)
.popover({
trigger: 'hover',
container: 'body',
html: true,
placement: 'top',
content: content
});
});
// Legend for Task status
var legend = $(svgElement("g"))
.addClass("legend")
.appendTo(self.svg);
$(svgElement("rect"))
.attr("x", -1)
.attr("y", -1)
.attr("width", legendWidth + "px")
.attr("height", legendMaxY + "px")
.attr("fill", "#FFF")
.attr("stroke", "#DDD")
.appendTo(legend);
var x = 0;
$.each(statusColors, function(key, color) {
var c = $(svgElement("circle"))
.addClass("nodeCircle")
.attr("r", 7)
.attr("cx", legendLineHeight)
.attr("cy", (legendLineHeight-4)+(x*legendLineHeight))
.attr("fill", color)
.appendTo(legend);
$(svgElement("text"))
.text(escapeHtml(key.charAt(0).toUpperCase() + key.substring(1).toLowerCase().replace(/_./gi, function (x) { return " " + x[1].toUpperCase(); })))
.attr("x", legendLineHeight + 14)
.attr("y", legendLineHeight+(x*legendLineHeight))
.appendTo(legend);
x++;
});
};