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

dashboard/bower.json

@@ -17,7 +17,8 @@
     "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"
+    "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

@@ -369,3 +369,10 @@ Tags on Home Page design
 .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]);*/
@@ -310,7 +312,7 @@ angular.module('dgc.lineage').controller('Lineage_ioController', ['$element', '$
 
             // 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)