Skip to content

A
atlas
Commit c4eebe0e by Shwetha GS
Options

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

ATLAS-406 Resizing lineage window – should be an anchor on a corner – like ppt for graphic (sanjayp via shwethags)
parent 0e81ceb4
Showing with 73 additions and 10 deletions
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)
......
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