Skip to content

A
atlas
Commit 2b4ffc4e by Vishal Kadam
Options

Vishal: Transformation for using new lineage

parent aea51890
Showing with 126 additions and 86 deletions
dashboard/v2/public/js/app.js
......@@ -38,10 +38,6 @@ angular.module('dgc').factory('lodash', ['$window',
function($window) {
return $window.d3;
}
]).factory('dagreD3', ['$window',
function($window) {
return $window.dagreD3;
}
]).factory('Global', ['$window',
function($window) {
return {
......
dashboard/v2/public/modules/lineage/lineageController.js
......@@ -4,13 +4,13 @@
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* '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,
* 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.
......@@ -18,8 +18,8 @@
'use strict';
angular.module('dgc.lineage').controller('LineageController', ['$element', '$scope', '$state', '$stateParams', 'lodash', 'LineageResource', 'd3', 'dagreD3',
function($element, $scope, $state, $stateParams, _, LineageResource, d3, dagreD3) {
angular.module('dgc.lineage').controller('LineageController', ['$element', '$scope', '$state', '$stateParams', 'lodash', 'LineageResource', 'd3',
function($element, $scope, $state, $stateParams, _, LineageResource, d3) {
function getLineageData(tableData, callRender) {
LineageResource.get({
......@@ -62,99 +62,142 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
});
function transformData(metaData) {
var nodes = [];
var name, guid;
var nodeGuids = Object.keys(metaData.values.vertices);
for (var index in nodeGuids) {
name = metaData.values.vertices[nodeGuids[index]].values.name;
guid = nodeGuids[index];
nodes.push({
var edges = metaData.values.edges,
vertices = metaData.values.vertices,
nodes = {};
function getNode(guid) {
var vertex = {
guid: guid,
label: name,
shape: 'rect'
});
name: vertices.hasOwnProperty(guid) ? vertices[guid].values.name : 'Load Process-Added'
};
if (!nodes.hasOwnProperty(guid)) {
nodes[guid] = vertex;
}
var edges = [];
var parent;
var child;
var edgesParents = Object.keys(metaData.values.edges);
for (index in edgesParents) {
parent = edgesParents[index];
for (var j = 0; j < metaData.values.edges[parent].length; j++) {
child = metaData.values.edges[parent][j];
if (!metaData.values.vertices.hasOwnProperty(child)) {
nodes.push({
guid: child,
label: 'Load Process',
shape: 'circle'
});
return nodes[guid];
}
edges.push({
parent: parent,
child: child
function attachParent(edge, node) {
edge.forEach(function eachPoint(childGuid) {
var childNode = getNode(childGuid);
node.children = node.children || [];
node.children.push(childNode);
childNode.parent = node.guid;
});
}
/* Loop through all edges and attach them to correct parent */
for (var guid in edges) {
var edge = edges[guid],
node = getNode(guid);
/* Attach parent to each endpoint of edge */
attachParent(edge, node);
}
return {
nodes: nodes,
edges: edges
};
/* Return the first node w/o parent, this is root node*/
return _.find(nodes, function(node) {
return !node.hasOwnProperty('parent');
});
}
function renderGraph(data, container) {
// Create a new directed graph
var g = new dagreD3
.graphlib
.Graph()
.setGraph({
rankdir: 'LR'
});
// ************** Generate the tree diagram *****************
var element = d3.select(container.element),
width = Math.max(container.width, 960),
height = Math.max(container.height, 350);
// Automatically label each of the nodes
//g.setNode('DB (sales)', { label: 'Sales DB', width: 144, height: 100 })
//states.forEach(function(state) { g.setNode(state, { label: state }); });
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
};
width = width - margin.right - margin.left;
height = height - margin.top - margin.bottom;
var i = 0;
_.forEach(data.nodes, function(node) {
g.setNode(node.guid, {
label: node.label,
shape: node.shape
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.y, d.x];
});
var svg = element.select('svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.select('g')
.attr('transform',
'translate(' + margin.left + ',' + margin.top + ')');
var root = data;
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(source).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) {
d.y = d.depth * 180;
});
_.forEach(data.edges, function(edge) {
g.setEdge(edge.parent, edge.child, {
label: ''
// Declare the nodes…
var node = svg.selectAll('g.node')
.data(nodes, function(d) {
return d.id || (d.id = ++i);
});
// Enter the nodes.
var nodeEnter = node.enter().append('g')
.attr('class', 'node')
.attr('transform', function(d) {
return 'translate(' + d.y + ',' + d.x + ')';
});
// Set some general styles
g.nodes().forEach(function(v) {
var node = g.node(v);
node.rx = node.ry = 5;
nodeEnter.append('image')
.attr('xlink:href', function(d) {
return d.icon;
})
.attr('x', '-12px')
.attr('y', '-12px')
.attr('width', '24px')
.attr('height', '24px');
nodeEnter.append('text')
.attr('x', function(d) {
return d.children || d._children ?
(15) * -1 : +15;
})
.attr('dy', '.35em')
.attr('text-anchor', function(d) {
return d.children || d._children ? 'end' : 'start';
})
.text(function(d) {
return d.name;
})
.style('fill-opacity', 1);
// Declare the links…
var link = svg.selectAll('path.link')
.data(links, function(d) {
return d.target.id;
});
var element = d3.select(container.element),
width = Math.max(container.width, 960),
height = Math.max(container.height, 350),
inner = element.select('svg')
.attr('width', width)
.attr('height', height)
.select('g');
// Create the renderer
var render = new dagreD3.render();
// Run the renderer. This is what draws the final graph.
render(inner, g);
// Center the graph
//var initialScale = 0.75;
// zoom
// .translate([(container.attr('width') - g.graph().width * initialScale) / 2, 20])
// .scale(initialScale)
// .event(container);
//container.attr('height', g.graph().height * initialScale + 90);
// Enter the links.
link.enter().insert('path', 'g')
.attr('class', 'link')
//.style('stroke', function(d) { return d.target.level; })
.style('stroke', '#000')
.attr('d', diagonal);
}
update(root);
}
}
......
dashboard/v2/public/views/includes/foot.html
......@@ -25,8 +25,8 @@
<!-- Angular UI -->
<script type="text/javascript" src="/lib/angular-bootstrap/ui-bootstrap.js"></script>
<script type="text/javascript" src="/lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!--<script type="text/javascript" src="/lib/d3/d3.min.js"></script>
<script type="text/javascript" src="/lib/d3-tip/index.js"></script>-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<script type="text/javascript" src="/lib/d3/d3.min.js"></script>
<!--<script type="text/javascript" src="/lib/d3-tip/index.js"></script>-->
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>-->
<script type="text/javascript" src="dist/app.min.js"></script>
\ No newline at end of file
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