Added tooltip, ui changes

bower.json

@@ -11,13 +11,15 @@
         "bootstrap": "~3.1.1",
         "angular-bootstrap": "~0.12.0",
         "angular-ui-router": "~0.2.13",
+        "d3": "~3.5.3",
+        "d3-tip": "~0.6.6",
         "lodash": "~3.0.0",
         "angular-ui-utils": "~0.1.1",
         "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": {
+    "resolutions": {
         "d3": "~3.5.3"
     }
 }

gruntfile.js

@@ -14,7 +14,7 @@ module.exports = function(grunt) {
             },
             js: {
                 files: ['public/**/*.js', '!public/lib/**', '!public/dist/**'],
-                tasks: ['jshint', 'shell']
+                tasks: ['shell']
             },
             html: {
                 files: ['public/**/*.html']

public/css/d3tip.css

+.d3-tip {
+    line-height: 1;
+    font-weight: bold;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    border-radius: 2px;
+}
+
+/* Creates a small triangle extender for the tooltip */
+.d3-tip:after {
+    box-sizing: border-box;
+    display: inline;
+    font-size: 10px;
+    width: 100%;
+    line-height: 1;
+    color: rgba(0, 0, 0, 0.8);
+    content: "\25BC";
+    position: absolute;
+    text-align: center;
+}
+
+/* Style northward tooltips differently */
+.d3-tip.n:after {
+    margin: -1px 0 0 0;
+    top: 100%;
+    left: 0;
+}
\ No newline at end of file

public/css/lineage.css

 .node circle {
     cursor: pointer;
-    stroke: #3182bd;
+    stroke: green;
     stroke-width: 2px;
-    fill: #c6dbef;
+    fill: #1cef3d;
 }
 
 .node circle.empty {
-    fill: #fd8d3c;
+    fill: #fdd916;
 }
 
 .node text {
@@ -17,6 +17,15 @@
 
 line.link {
     fill: none;
-    stroke: #9ecae1;
+    stroke: green;
     stroke-width: 2px;
+}
+
+.d3-tip pre {
+    max-width: 400px;
+}
+
+div.lineage {
+    border-bottom: 2px solid #006600;
+    margin-bottom: 30px;
 }
\ No newline at end of file

public/js/app.js

@@ -27,7 +27,7 @@ angular.module('dgc').factory('lodash', ['$window',
             renderErrors: $window.renderErrors
         };
     }
-]).run(['Global', 'NotificationService', 'lodash', function(Global, NotificationService, lodash) {
+]).run(['$rootScope', 'Global', 'NotificationService', 'lodash', 'd3', function($rootScope, Global, NotificationService, lodash, d3) {
     var errors = Global.renderErrors;
     if (angular.isArray(errors) || angular.isObject(errors)) {
         lodash.forEach(errors, function(err) {
@@ -41,4 +41,7 @@ angular.module('dgc').factory('lodash', ['$window',
         errors.timeout = false;
         NotificationService.error(errors);
     }
+    $rootScope.$on('$stateChangeStart', function() {
+        d3.selectAll('.d3-tip').remove();
+    });
 }]);

public/modules/details/views/details.html

@@ -3,7 +3,7 @@
         <h3>{{details.$id$.id}}</h3>
         <div class="lineage" data-ng-include="'/modules/lineage/views/lineage.html'"></div>
         <div class="wiki">
-            <section class="row" data-ng-repeat="(key,value) in details" data-ng-if="isString(value)" data-ng-include="'/modules/details/views/attribute.html'"></section>
+            <section data-ng-repeat="(key,value) in details" data-ng-if="isString(value)" data-ng-include="'/modules/details/views/attribute.html'"></section>
         </div>
     </div>
 </div>
\ No newline at end of file

public/modules/lineage/lineageController.js

@@ -30,6 +30,8 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
             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')
@@ -89,6 +91,16 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
         var link = svg.selectAll('.link'),
             node = svg.selectAll('.node');
 
+        /* Initialize tooltip */
+        var tooltip = d3.tip()
+            .attr('class', 'd3-tip')
+            .html(function(d) {
+                return '<pre class="alert alert-success">' + d.__tooltip + '</pre>';
+            });
+
+        /* Invoke the tip in the context of your visualization */
+        svg.call(tooltip);
+
         $scope.lineageData = LineageResource.get({
             id: $stateParams.id
         }, function(data) {
@@ -122,6 +134,7 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
                 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);

public/views/includes/foot.html

@@ -9,6 +9,7 @@
 <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 type="text/javascript" src="dist/app.min.js"></script>