Skip to content

A
atlas
Commit 674d8073 by Vishal Kadam
Options

Added directed edges and process icon

parent c58482d7
Showing with 158 additions and 139 deletions
public/css/lineage.css
.node circle { g circle {
cursor: pointer; cursor: pointer;
stroke: green; stroke: green;
stroke-width: 2px; stroke-width: 2px;
fill: #1cef3d; fill: url(#process-image);
} }
.node circle.empty { g circle.empty {
fill: #fdd916; fill: #fdd916;
} }
.node text { .link {
font: 15px sans-serif;
pointer-events: none;
text-anchor: middle;
}
line.link {
fill: none; fill: none;
stroke: green; stroke: green;
stroke-width: 2px; stroke-width: 2px;
} }
g text {
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
.d3-tip pre { .d3-tip pre {
max-width: 400px; max-width: 400px;
} }
......
public/modules/lineage/lineageController.js
'use strict'; 'use strict';
angular.module('dgc.lineage').controller('LineageController', ['$element', '$scope', '$state', '$stateParams', 'LineageResource', 'd3', angular.module('dgc.lineage').controller('LineageController', ['$element', '$scope', '$state', '$stateParams', 'lodash', 'LineageResource', 'd3',
function($element, $scope, $state, $stateParams, LineageResource, d3) { function($element, $scope, $state, $stateParams, _, LineageResource, d3) {
function render(nodes) { $scope.lineageData = LineageResource.get({
var links = d3.layout.tree().links(nodes); id: $stateParams.id
// Restart the force layout. }, function(data) {
force.nodes(nodes) var nodes = {};
.links(links)
.start();
// Update links.
link = link.data(links, function(d) {
return d.target.__id;
});
link.exit().remove();
link.enter().insert('line', '.node')
.attr('class', 'link');
// Update nodes.
node = node.data(nodes, function(d) {
return d.__id;
});
node.exit().remove();
var nodeEnter = node.enter().append('g')
.attr('class', 'node')
.on('click', click)
.on('mouseover', tooltip.show)
.on('mouseout', tooltip.hide)
.call(force.drag);
nodeEnter.append('circle') function getNode(nodeId) {
.attr('class', function(d) { if (!nodes[nodeId]) {
return d.children ? '' : 'empty'; var node;
}).attr('r', 9); if (data.vertices[nodeId]) {
node = angular.copy(data.vertices[nodeId]);
node.__key = nodeId;
node.__name = node['hive_table.name'] || node.__key;
node.__tooltip = node['hive_table.description'] || node['HiveLineage.query'];
} else {
node = {};
node.__key = nodeId;
node.__tooltip = node.__name = nodeId + ', Node Missing';
}
nodes[nodeId] = node;
}
return nodes[nodeId];
}
nodeEnter.append('text') var edges = [],
.attr('dy', '2em') edgeTypes = [];
.text(function(d) {
//return d.name;
return d.__name || d.__key;
});
/*node.select('circle') angular.forEach(data.edges, function(edge) {
.style('fill', color);*/ /* Put the head (edge) inside tail (edge)
} * Tail is parent
* Head is child
* */
var parentNode = getNode(edge.tail);
edge.source = parentNode;
edge.target = getNode(edge.head);
function click(node) { parentNode.__hasChild = true;
$state.go('details', {
id: node.guid
}, {
location: 'replace'
});
}
function tick() { edge.__type = edge.label;
link.attr('x1', function(d) { edgeTypes.push(edge.label);
return d.source.x; edges.push(edge);
}).attr('y1', function(d) {
return d.source.y;
}).attr('x2', function(d) {
return d.target.x;
}).attr('y2', function(d) {
return d.target.y;
}); });
edgeTypes = _.uniq(edgeTypes);
render(nodes, edges, edgeTypes);
});
node.attr('transform', function(d) { function render(nodes, links, linkTypes) {
return 'translate(' + d.x + ',' + d.y + ')'; // Use elliptical arc path segments to doubly-encode directionality.
}); function click(node) {
} if (node.guid) {
$state.go('details', {
id: node.guid
}, {
location: 'replace'
});
}
}
var width = Math.max($element[0].offsetWidth, 960), function tick() {
height = Math.max($element[0].offsetHeight, 350); path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform);
}
var force = d3.layout.force() function linkArc(d) {
.linkDistance(200) var dx = d.target.x - d.source.x,
.charge(-120) dy = d.target.y - d.source.y,
.gravity(0.05) dr = Math.sqrt(dx * dx + dy * dy);
.size([width, height]) return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
.on('tick', tick); }
var svg = d3.select($element[0]).select('svg') function transform(d) {
.attr('width', width) return "translate(" + d.x + "," + d.y + ")";
.attr('height', height); }
var link = svg.selectAll('.link'), var width = Math.max($element[0].offsetWidth, 960),
node = svg.selectAll('.node'); height = Math.max($element[0].offsetHeight, 350);
/* Initialize tooltip */ var force = d3.layout.force()
var tooltip = d3.tip() .nodes(d3.values(nodes))
.attr('class', 'd3-tip') .links(links)
.html(function(d) { .size([width, height])
return '<pre class="alert alert-success">' + d.__tooltip + '</pre>'; .linkDistance(200)
}); .charge(-120)
.gravity(0.05)
.on("tick", tick)
.start();
/* Invoke the tip in the context of your visualization */ var svg = d3.select($element[0]).select('svg')
svg.call(tooltip); .attr("width", width)
.attr("height", height);
$scope.lineageData = LineageResource.get({ /* Initialize tooltip */
id: $stateParams.id var tooltip = d3.tip()
}, function(data) { .attr('class', 'd3-tip')
var nodes = {}; .html(function(d) {
return '<pre class="alert alert-success">' + d.__tooltip + '</pre>';
});
function getNode(nodeId) { /* Invoke the tip in the context of your visualization */
if (!nodes[nodeId] && data.vertices[nodeId]) { svg.call(tooltip);
nodes[nodeId] = angular.copy(data.vertices[nodeId]);
} // Per-type markers, as they don't inherit styles.
return nodes[nodeId]; var defs = svg.append("defs");
}
var imageDim = 10;
defs.append('svg:pattern')
.attr('id', 'process-image')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', imageDim)
.attr('height', imageDim)
.append('svg:image')
.attr('xlink:href', '/img/process.png')
.attr('x', 0)
.attr('y', 0)
.attr('width', imageDim)
.attr('height', imageDim);
defs.selectAll("marker")
.data(linkTypes)
.enter().append("marker")
.attr("id", function(d) {
return d;
})
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) {
return "link " + d.__type;
})
.attr("marker-end", function(d) {
return "url(#" + d.__type + ")";
});
angular.forEach(data.edges, function(node) { var circle = svg.append("g").selectAll("circle")
/* Put the head (node) inside tail (node) .data(force.nodes())
* Tail is parent .enter().append("circle")
* Head is child .on('click', click)
* */ .on('mouseover', tooltip.show)
var parentId = node.tail, .on('mouseout', tooltip.hide)
parentNode = getNode(parentId); .attr('class', function(d) {
if (!parentNode) { return d.__hasChild ? '' : 'empty';
console.log('Parent Node not found id', parentId); })
} else { .attr("r", function(d) {
var childId = node.head, return d.__hasChild ? 15 : 10;
childNode = getNode(childId); })
if (childNode) { .call(force.drag);
if (!parentNode.children) {
parentNode.children = [];
}
parentNode.children.push(childNode);
} else {
console.log('Child Node not found id', childId);
}
}
});
var id = 0, var text = svg.append("g").selectAll("text")
returnArray = []; .data(force.nodes())
.enter().append("text")
.attr('dy', '2em')
.text(function(d) {
return d.__name;
});
}
angular.forEach(nodes, function(node, key) {
node.__id = id++;
node.__key = key;
node.__name = node['hive_table.name'];
node.__tooltip = node['hive_table.description'] || node['HiveLineage.query'];
returnArray.push(node);
});
render(returnArray);
});
} }
]); ]);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment