ATLAS-406 Resizing lineage window – should be an anchor on a corner – like ppt…

dashboard/bower.json

 {
-    "name": "atlas-metadata",
-    "description": "Apache Atlas",
-    "version": "1.0.0-SNAPSHOT",
-    "devDependencies": {
-        "angular": "~1.2.15",
-        "angular-resource": "~1.2.15",
-        "angular-cookies": "~1.2.15",
-        "angular-route": "~1.2.15",
-        "angular-sanitize": "~1.2.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"
-    },
-    "resolutions": {
-        "d3": "~3.5.3"
-    }
+  "name": "atlas-metadata",
+  "description": "Apache Atlas",
+  "version": "1.0.0-SNAPSHOT",
+  "devDependencies": {
+    "angular": "~1.2.15",
+    "angular-resource": "~1.2.15",
+    "angular-cookies": "~1.2.15",
+    "angular-route": "~1.2.15",
+    "angular-sanitize": "~1.2.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",
+    "jquery-ui": "1.10.4"
+  },
+  "resolutions": {
+    "d3": "~3.5.3"
+  }
 }

dashboard/gruntfile.js

@@ -154,9 +154,7 @@ module.exports = function(grunt) {
                     'hosts': [{
                         'hostnames': ['*'],
                         'routes': {
-                            '/': distPath,
-                            //'/api': 'http://162.249.6.39:21000/api'
-                             '/api': 'http://ec2-52-25-142-7.us-west-2.compute.amazonaws.com:21000/api'
+                            '/': distPath
                         }
                     }]
                 }

dashboard/public/css/common.css

@@ -114,14 +114,14 @@ header ul.menuBar li a{
 header ul.menuBar li a>i {
     margin-right: 3px;
     font-size: 12px;
-} 
+}
 header ul.menuBar li a:hover{
     color: #fff;
     background: transparent;
-} 
+}
 header ul.menuBar li a:focus{
     background: transparent;
-} 
+}
 header ul.menuBar li.active a{
     color: #333333;
     background-color: #ffffff;
@@ -319,11 +319,11 @@ Tags on Home Page design
     -o-text-overflow: ellipsis;
     white-space: nowrap;
     text-transform: capitalize;
-    float: left; 
-    
+    float: left;
+
     background: lightblue !important;
     color: black !important;
-    margin: 4px !important; 
+    margin: 4px !important;
     padding-left: 7px !important;
     padding-right: 7px !important;
 }
@@ -335,7 +335,7 @@ Tags on Home Page design
     text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
     white-space: nowrap;
-    text-transform: capitalize; 
+    text-transform: capitalize;
 }
 .searchResultCount {
     max-width: 500px;
@@ -343,7 +343,7 @@ Tags on Home Page design
     overflow: hidden;
     text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
-    text-transform: capitalize; 
+    text-transform: capitalize;
 }
 
 .maxwidth125px {
@@ -361,11 +361,18 @@ Tags on Home Page design
 
 .tagAlign{
     text-align: center;
-} 
+}
 
 .h160 {
     height: 160px !important;
 }
 .tag-attr{
     font-weight:bold;
+}
+.zoom-buttons{
+   width:63px !important;
+}
+.graph{
+  overflow: hidden!important;
+
 }
\ No newline at end of file

dashboard/public/css/lineage.css

@@ -69,7 +69,7 @@ div.lineage {
 
 .lineage-viz {
     margin: 0 auto;
-    overflow: auto;
+    overflow: hidden;
     /*border: 1px solid #ddd;
     border-top: none;*/
 
@@ -78,6 +78,10 @@ div.lineage {
     margin: 5px;
     border-radius: 2px
 }
+
+.title-font{
+    font-size:12px!important;
+}
 /*.images {*/
     /*background-image: url("../img/process.png");*/
 /*}​*/

dashboard/public/index.html

@@ -36,6 +36,7 @@
   <link rel="stylesheet" href="/css/lineage.css">
   <link rel="stylesheet" href="/css/tags.css">
   <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css">
+    <link rel="stylesheet" href="/lib/jquery-ui/themes/ui-lightness/jquery-ui.css">
  </head>
 
 
@@ -68,6 +69,7 @@
 <script src="/lib/lodash/lodash.js"></script>
 <script src="/lib/d3/d3.js"></script>
 <script src="/lib/d3-tip/index.js"></script>
+<script src="/lib/jquery-ui/ui/jquery-ui.js"></script>
 
 <script src="/js/app.min.js"></script>
 </body>

dashboard/public/modules/lineage/lineage_ioController.js

@@ -131,6 +131,8 @@ angular.module('dgc.lineage').controller('Lineage_ioController', ['$element', '$
         }
 
         $scope.onReset = function() {
+            $scope.height = $scope.initialHeight;
+            angular.element('.lineage-viz').height($scope.height);
             renderGraph($scope.lineageData, {
                 eleObj: $element,
                 element: $element[0],
@@ -237,9 +239,8 @@ angular.module('dgc.lineage').controller('Lineage_ioController', ['$element', '$
         function renderGraph(data, container) {
             // ************** Generate the tree diagram  *****************
             var element = d3.select(container.element),
-                widthg = Math.max(container.width, 1100),
-                heightg = Math.max((window.innerHeight - 400), 500),
-
+                widthg = container.width || 1100,
+                heightg = container.height || Math.max((window.innerHeight - 400), 300),
                 totalNodes = 0,
                 maxLabelLength = 0,
                 selectedNode = null,
@@ -258,7 +259,8 @@ angular.module('dgc.lineage').controller('Lineage_ioController', ['$element', '$
 
 
             var viewerWidth = widthg - 15,
-                viewerHeight = heightg;
+                viewerHeight = heightg,
+                center = [viewerWidth / 2, viewerHeight / 2];
 
             var tree = d3.layout.tree().size([viewerHeight, viewerWidth]);
             /*.size([viewerHeight, viewerWidth]);   nodeSize([100, 200]);*/
@@ -308,9 +310,9 @@ angular.module('dgc.lineage').controller('Lineage_ioController', ['$element', '$
             // Sort the tree initially incase the JSON isn't in a sorted order.
             sortTree();
 
-            // Define the zoom function for the zoomable tree  
+            // Define the zoom function for the zoomable tree
             function zoom() {
-                svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+                d3.select('g').attr("transform", "translate(" + zoomListener.translate() + ")scale(" + zoomListener.scale() + ")");
             }
 
             // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
@@ -334,6 +336,7 @@ angular.module('dgc.lineage').controller('Lineage_ioController', ['$element', '$
                 .attr("height", viewerHeight)
                 .attr("class", "overlay")
                 .call(zoomListener)
+                .call(zoomListener.event)
                 .on("dblclick.zoom", function() {
                     return null;
                 })
@@ -708,6 +711,45 @@ angular.module('dgc.lineage').controller('Lineage_ioController', ['$element', '$
             var svgGroup = baseSvg.append("g")
                 .attr("transform", "translate(0,0)");
 
+            // Simplest possible buttons
+            var intervalID;
+
+            d3.selectAll('.zoom-buttons').on('mousedown', function(){
+                d3.event.preventDefault();
+                $scope.factor = (this.id === 'zoom_in') ? 1.1 : 1/1.1;
+                intervalID = setInterval(zoom_by, 40, $scope.factor);
+            }).on('mouseup', function(){
+                d3.event.preventDefault();
+                clearInterval(intervalID);
+                intervalID = undefined;
+            });
+
+            function zoom_by(factor){
+                var scale = zoomListener.scale(),
+                    extent = zoomListener.scaleExtent(),
+                    translate = zoomListener.translate(),
+                    x = translate[0], y = translate[1],
+                    target_scale = scale * factor;
+
+                // If we're already at an extent, done
+                if (target_scale === extent[0] || target_scale === extent[1]) { return false; }
+                // If the factor is too much, scale it down to reach the extent exactly
+                var clamped_target_scale = Math.max(extent[0], Math.min(extent[1], target_scale));
+                if (clamped_target_scale !== target_scale){
+                    target_scale = clamped_target_scale;
+                    factor = target_scale / scale;
+                }
+
+                // Center each vector, stretch, then put back
+                x = (x - center[0]) * factor + center[0];
+                y = (y - center[1]) * factor + center[1];
+
+                // Enact the zoom immediately
+                zoomListener.scale(target_scale)
+                    .translate([x,y]);
+                zoom();
+            }
+
             // Define the root
             root = data;
             root.x0 = viewerWidth / 2;
@@ -716,6 +758,11 @@ angular.module('dgc.lineage').controller('Lineage_ioController', ['$element', '$
             // Layout the tree initially and center on the root node.
             update(root);
             centerNode(root);
+            if(!$scope.initialHeight){
+                $scope.initialHeight = angular.element('.lineage-viz').height();
+            }
+            angular.element('.lineage-viz').resizable({minWidth:1150, maxWidth:1150, maxHeight: angular.element('.lineage-viz').height(), minHeight:50
+            });
             $scope.requested = false;
             var couplingParent1 = tree.nodes(root).filter(function(d) {
                 return d.name === 'cluster';

dashboard/public/modules/lineage/views/lineage_io.html

@@ -20,6 +20,8 @@
     <button type="button" class="btn btn-primary pull-right" ng-click="onReset()">
         Reset
     </button>
+    <button type="button" class="btn btn-primary zoom-buttons pull-right" id="zoom_out"><i class="fa fa-minus"></i></button>
+    <button type="button" class="btn btn-primary zoom-buttons pull-right" id="zoom_in"><i class="fa fa-plus"></i> </button>
     <div class="graph">
       <h4 data-ng-if="!requested && !lineageData" class="alignLineage">No lineage data found</h4>
       <i data-ng-if="requested" class="fa fa-spinner fa-spin fa-5x"></i>

release-log.txt

@@ -6,6 +6,7 @@ INCOMPATIBLE CHANGES:
 ATLAS-379 Create sqoop and falcon metadata addons (venkatnrangan,bvellanki,sowmyaramesh via shwethags)
 
 ALL CHANGES:
+ATLAS-406 Resizing lineage window – should be an anchor on a corner – like ppt for graphic (sanjayp via shwethags)
 ATLAS-432 QuickStart lineage is broken (yhemanth via shwethags)
 ATLAS-421 typo in Architecture.twiki (dbist13 via shwethags)
 ATLAS-387 Running quick_start without a valid atlas endpoint in configuration or argument prints a spurious success message (yhemanth via shwethags)