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', ...@@ -38,10 +38,6 @@ angular.module('dgc').factory('lodash', ['$window',
function($window) { function($window) {
return $window.d3; return $window.d3;
} }
]).factory('dagreD3', ['$window',
function($window) {
return $window.dagreD3;
}
]).factory('Global', ['$window', ]).factory('Global', ['$window',
function($window) { function($window) {
return { return {
......
dashboard/v2/public/modules/lineage/lineageController.js
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
* distributed with this work for additional information * distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file * regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the * 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 * with the License. You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * 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. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
'use strict'; 'use strict';
angular.module('dgc.lineage').controller('LineageController', ['$element', '$scope', '$state', '$stateParams', 'lodash', 'LineageResource', 'd3', 'dagreD3', angular.module('dgc.lineage').controller('LineageController', ['$element', '$scope', '$state', '$stateParams', 'lodash', 'LineageResource', 'd3',
function($element, $scope, $state, $stateParams, _, LineageResource, d3, dagreD3) { function($element, $scope, $state, $stateParams, _, LineageResource, d3) {
function getLineageData(tableData, callRender) { function getLineageData(tableData, callRender) {
LineageResource.get({ LineageResource.get({
...@@ -62,99 +62,142 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco ...@@ -62,99 +62,142 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
}); });
function transformData(metaData) { function transformData(metaData) {
var nodes = []; var edges = metaData.values.edges,
var name, guid; vertices = metaData.values.vertices,
var nodeGuids = Object.keys(metaData.values.vertices); nodes = {};
for (var index in nodeGuids) {
name = metaData.values.vertices[nodeGuids[index]].values.name; function getNode(guid) {
guid = nodeGuids[index]; var vertex = {
nodes.push({
guid: guid, guid: guid,
label: name, name: vertices.hasOwnProperty(guid) ? vertices[guid].values.name : 'Load Process-Added'
shape: 'rect' };
}); if (!nodes.hasOwnProperty(guid)) {
nodes[guid] = vertex;
} }
return nodes[guid];
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'
});
} }
edges.push({
parent: parent, function attachParent(edge, node) {
child: child 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, /* Return the first node w/o parent, this is root node*/
edges: edges return _.find(nodes, function(node) {
}; return !node.hasOwnProperty('parent');
});
} }
function renderGraph(data, container) { function renderGraph(data, container) {
// Create a new directed graph // ************** Generate the tree diagram *****************
var g = new dagreD3 var element = d3.select(container.element),
.graphlib width = Math.max(container.width, 960),
.Graph() height = Math.max(container.height, 350);
.setGraph({
rankdir: 'LR'
});
// Automatically label each of the nodes var margin = {
//g.setNode('DB (sales)', { label: 'Sales DB', width: 144, height: 100 }) top: 20,
//states.forEach(function(state) { g.setNode(state, { label: state }); }); 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) { var tree = d3.layout.tree()
g.setNode(node.guid, { .size([height, width]);
label: node.label,
shape: node.shape 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) { // Declare the nodes…
g.setEdge(edge.parent, edge.child, { var node = svg.selectAll('g.node')
label: '' .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 nodeEnter.append('image')
g.nodes().forEach(function(v) { .attr('xlink:href', function(d) {
var node = g.node(v); return d.icon;
node.rx = node.ry = 5; })
.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), // Enter the links.
width = Math.max(container.width, 960), link.enter().insert('path', 'g')
height = Math.max(container.height, 350), .attr('class', 'link')
inner = element.select('svg') //.style('stroke', function(d) { return d.target.level; })
.attr('width', width) .style('stroke', '#000')
.attr('height', height) .attr('d', diagonal);
.select('g');
}
// Create the renderer
var render = new dagreD3.render(); update(root);
// 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);
} }
} }
......
dashboard/v2/public/views/includes/foot.html
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
<!-- Angular UI --> <!-- Angular UI -->
<script type="text/javascript" src="/lib/angular-bootstrap/ui-bootstrap.js"></script> <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/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/d3.min.js"></script>
<script type="text/javascript" src="/lib/d3-tip/index.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://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 src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>-->
<script type="text/javascript" src="dist/app.min.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