Skip to content

A
atlas
Commit 2b4ffc4e by Vishal Kadam
Options

Vishal: Transformation for using new lineage

parent aea51890
Showing with 130 additions and 90 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];
}
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;
}); });
} }
var edges = []; /* Loop through all edges and attach them to correct parent */
var parent; for (var guid in edges) {
var child; var edge = edges[guid],
var edgesParents = Object.keys(metaData.values.edges); node = getNode(guid);
for (index in edgesParents) {
parent = edgesParents[index]; /* Attach parent to each endpoint of edge */
for (var j = 0; j < metaData.values.edges[parent].length; j++) { attachParent(edge, node);
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,
child: child
});
}
} }
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' 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;
// Automatically label each of the nodes var tree = d3.layout.tree()
//g.setNode('DB (sales)', { label: 'Sales DB', width: 144, height: 100 }) .size([height, width]);
//states.forEach(function(state) { g.setNode(state, { label: state }); });
_.forEach(data.nodes, function(node) { var diagonal = d3.svg.diagonal()
g.setNode(node.guid, { .projection(function(d) {
label: node.label, return [d.y, d.x];
shape: node.shape
}); });
});
_.forEach(data.edges, function(edge) { var svg = element.select('svg')
g.setEdge(edge.parent, edge.child, { .attr('width', width + margin.right + margin.left)
label: '' .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;
}); });
});
// Set some general styles // Declare the nodes…
g.nodes().forEach(function(v) { var node = svg.selectAll('g.node')
var node = g.node(v); .data(nodes, function(d) {
node.rx = node.ry = 5; return d.id || (d.id = ++i);
}); });
var element = d3.select(container.element), // Enter the nodes.
width = Math.max(container.width, 960), var nodeEnter = node.enter().append('g')
height = Math.max(container.height, 350), .attr('class', 'node')
inner = element.select('svg') .attr('transform', function(d) {
.attr('width', width) return 'translate(' + d.y + ',' + d.x + ')';
.attr('height', height) });
.select('g');
nodeEnter.append('image')
// Create the renderer .attr('xlink:href', function(d) {
var render = new dagreD3.render(); return d.icon;
})
// Run the renderer. This is what draws the final graph. .attr('x', '-12px')
render(inner, g); .attr('y', '-12px')
.attr('width', '24px')
// Center the graph .attr('height', '24px');
//var initialScale = 0.75;
// zoom nodeEnter.append('text')
// .translate([(container.attr('width') - g.graph().width * initialScale) / 2, 20]) .attr('x', function(d) {
// .scale(initialScale) return d.children || d._children ?
// .event(container); (15) * -1 : +15;
//container.attr('height', g.graph().height * initialScale + 90); })
.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;
});
// 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 @@ ...@@ -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