Added lineage graph

bower.json

@@ -16,5 +16,8 @@
         "font-awesome": "~4.2.0",
         "closure-compiler": "https://dl.google.com/closure-compiler/compiler-20140814.zip",
         "ng-closure-runner": "https://raw.github.com/angular/ng-closure-runner/v0.2.3/assets/ng-closure-runner.zip"
+    },
+    "dependencies": {
+        "d3": "~3.5.3"
     }
 }

public/css/lineage.css

+.node circle {
+    cursor: pointer;
+    stroke: #3182bd;
+    stroke-width: 2px;
+    fill: #c6dbef;
+}
+
+.node circle.empty {
+    fill: #fd8d3c;
+}
+
+.node text {
+    font: 15px sans-serif;
+    pointer-events: none;
+    text-anchor: middle;
+}
+
+line.link {
+    fill: none;
+    stroke: #9ecae1;
+    stroke-width: 2px;
+}
\ No newline at end of file

public/js/app.js

@@ -15,6 +15,10 @@ angular.module('dgc').factory('lodash', ['$window',
     function($window) {
         return $window._;
     }
+]).factory('d3', ['$window',
+    function($window) {
+        return $window.d3;
+    }
 ]).factory('Global', ['$window',
     function($window) {
         return {

public/modules/details/detailsModule.js

 'use strict';
 
-angular.module('dgc.details', []);
+angular.module('dgc.details', ['dgc.lineage']);

public/modules/details/views/details.html

 <div class="container" data-ng-controller="DetailsController">
     <div class="col-lg-12">
+        <h3>{{details.$id$.id}}</h3>
+        <br/>
         <tabset>
             <tab data-heading="Wiki">
-                <div data-ng-repeat="(key,value) in details" data-ng-if="isString(value)" ng-include="'/modules/details/views/attribute.html'"></div>
+                <div data-ng-repeat="(key,value) in details" data-ng-if="isString(value)" data-ng-include="'/modules/details/views/attribute.html'"></div>
             </tab>
-            <tab data-heading="Raw">
-                <pre>{{details | json}}</pre>
-            </tab>
-            <tab data-heading="Lineage">Graph will be here soon...</tab>
+            <tab data-heading="Lineage"><ng-include src="'/modules/lineage/views/lineage.html'"/></tab>
         </tabset>
     </div>
 </div>
\ No newline at end of file

public/modules/lineage/lineageController.js

+'use strict';
+
+angular.module('dgc.lineage').controller('LineageController', ['$element', '$scope', '$stateParams', 'LineageResource', 'd3',
+    function($element, $scope, $stateParams, LineageResource, d3) {
+
+        function render(nodes) {
+            var links = d3.layout.tree().links(nodes);
+            // Restart the force layout.
+            force.nodes(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)
+                .call(force.drag);
+
+            nodeEnter.append('circle')
+                .attr('class', function(d) {
+                    return d.children ? '' : 'empty';
+                }).attr('r', 9);
+
+            nodeEnter.append('text')
+                .attr('dy', '2em')
+                .text(function(d) {
+                    //return d.name;
+                    return d.__name || d.__key;
+                });
+
+            /*node.select('circle')
+             .style('fill', color);*/
+        }
+
+        function tick() {
+            link.attr('x1', function(d) {
+                return d.source.x;
+            }).attr('y1', function(d) {
+                return d.source.y;
+            }).attr('x2', function(d) {
+                return d.target.x;
+            }).attr('y2', function(d) {
+                return d.target.y;
+            });
+
+            node.attr('transform', function(d) {
+                return 'translate(' + d.x + ',' + d.y + ')';
+            });
+        }
+
+        var width = 960,
+            height = 600;
+
+        var force = d3.layout.force()
+            .linkDistance(200)
+            .charge(-120)
+            .gravity(0.05)
+            .size([width, height])
+            .on('tick', tick);
+
+        var svg = d3.select($element[0]).select('svg')
+            .attr('width', width)
+            .attr('height', height);
+
+        var link = svg.selectAll('.link'),
+            node = svg.selectAll('.node');
+
+        $scope.lineageData = LineageResource.get({
+            id: $stateParams.id
+        }, function(data) {
+            var nodes = {};
+
+            function getNode(nodeId) {
+                if (!nodes[nodeId]) {
+                    nodes[nodeId] = angular.copy(data.vertices[nodeId]);
+                }
+                return nodes[nodeId];
+            }
+
+            angular.forEach(data.edges, function(node) {
+                /* Put the head (node) inside tail (node)
+                 * Tail is parent
+                 * Head is child
+                 * */
+                var parentId = node.tail,
+                    parentNode = getNode(parentId);
+                if (!parentNode.children) {
+                    parentNode.children = [];
+                }
+                var childId = node.head;
+                parentNode.children.push(getNode(childId));
+            });
+
+            var id = 0,
+                returnArray = [];
+
+            angular.forEach(nodes, function(node, key) {
+                node.__id = id++;
+                node.__key = key;
+                node.__name = node['hive_table.name'];
+                returnArray.push(node);
+            });
+            render(returnArray);
+        });
+    }
+]);

public/modules/lineage/lineageModule.js

+'use strict';
+
+angular.module('dgc.lineage', []);

public/modules/lineage/lineageResource.js

+'use strict';
+
+angular.module('dgc.lineage').factory('LineageResource', ['$resource', function($resource) {
+    return $resource('/api/metadata/discovery/search/relationships/:id', {
+        depth: 3,
+        edgesToFollow: 'HiveLineage.sourceTables.0,HiveLineage.sourceTables.1,HiveLineage.sourceTables.2,HiveLineage.tableName'
+    });
+}]);

public/modules/lineage/views/lineage.html

+<div class="container" data-ng-controller="LineageController">
+    <svg></svg>
+</div>

public/modules/search/views/searchResult.html

@@ -4,5 +4,4 @@
         <div data-ng-if="typeAvailable()" data-ng-include="'/modules/search/views/types/'+result.type.toLowerCase()+'.html'"></div>
         <div data-ng-if="!typeAvailable()" data-ng-include="'/modules/search/views/types/guid.html'"></div>
     </li>
-
 </ul>
\ No newline at end of file

public/views/includes/foot.html

@@ -8,6 +8,7 @@
 <!-- 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="dist/app.min.js"></script>
 

public/views/includes/head.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="/css/common.css">
+    <link rel="stylesheet" href="/css/lineage.css">
 
     <!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>