azkaban-developers

diff --git a/src/less/flow.less b/src/less/flow.less
index 565e73c..8ee150a 100644
--- a/src/less/flow.less
+++ b/src/less/flow.less
@@ -1,3 +1,8 @@
+#svgDiv {
+    height: 100%;
+    padding: 0px;
+}
+
 #graphView {
    -moz-user-select: none;
    -khtml-user-select: none;
@@ -5,6 +10,11 @@
    user-select: none;
 }
 
+#flow-graph {
+    width: 100%;
+    height: 100%;
+}
+
 #headertabs {
    -moz-user-select: none;
    -khtml-user-select: none;

diff --git a/src/web/js/azkaban/util/flow-loader.js b/src/web/js/azkaban/util/flow-loader.js
index b68dfb5..7c9cf29 100644
--- a/src/web/js/azkaban/util/flow-loader.js
+++ b/src/web/js/azkaban/util/flow-loader.js
@@ -151,9 +151,8 @@ var edgeClickCallback = function(event, model) {
 
 var graphClickCallback = function(event, model) {
 	console.log("Graph clicked callback");
-
-	var jobId = event.currentTarget.jobid;
-	var flowId = model.get("flowId");
+	var data = model.get("data");
+	var flowId = data.flow;
 	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowId;
 
 	var menu = [	

diff --git a/src/web/js/azkaban/util/svg-navigate.js b/src/web/js/azkaban/util/svg-navigate.js
index 8c3c7c8..0cae23e 100644
--- a/src/web/js/azkaban/util/svg-navigate.js
+++ b/src/web/js/azkaban/util/svg-navigate.js
@@ -14,8 +14,7 @@
  * the License.
  */
 
-(function($) {	
-
+(function($) {
 	var mouseUp = function(evt) {
 		if (evt.button > 1) {
 			return;
@@ -28,9 +27,9 @@
 	
 	var mouseDown = function(evt) {
 		if (evt.button > 1) {
-                        return;
-                }
-		//alert("mouseDown");
+			return;
+		}
+
 		var target = evt.target;
 		target.mx = evt.clientX;
 		target.my = evt.clientY;
@@ -49,28 +48,26 @@
 		if (target.mDown) {
 			var dx = evt.clientX - target.mx;
 			var dy = evt.clientY - target.my;
-			
+
 			evt.dragX = dx;
 			evt.dragY = dy;
 			mouseDrag(evt);
 		}
-		
+
 		target.mx = evt.clientX;
 		target.my = evt.clientY;
 	}
-	
+
 	var mouseDrag = function(evt) {
-		//alert("mouseDragged ");
 		translateDeltaGraph(evt.target, evt.dragX, evt.dragY);
 	}
 	
 	var mouseScrolled = function(evt) {
-		//alert("scroll");
 		if (!evt) {
 			evt = window.event;
 		}
-		var target = evt.target;
-		
+		var target = evt.currentTarget;
+
 		var leftOffset = 0;
 		var topOffset = 0;
 		if (!target.marker) {
@@ -80,7 +77,7 @@
 
 			target = target.farthestViewportElement;
 		}
-		
+
 		// Trackball/trackpad vs wheel. Need to accommodate
 		var delta = 0;
 		if (evt.wheelDelta) {
@@ -90,7 +87,7 @@
 			else {
 				delta = Math.floor(evt.wheelDelta / 120);
 			}
-		}
+		} 
 		else if (evt.detail) {
 			if (evt.detail > 0) {
 				delta = -Math.ceil(evt.detail / 3);
@@ -99,38 +96,43 @@
 				delta = -Math.floor(evt.detail / 3);
 			}
 		}
-		
+
 		var zoomLevel = boundZoomLevel(target, target.zoomIndex + delta);
 		target.zoomIndex = zoomLevel;
 		var scale = target.zoomLevels[zoomLevel];
-		
-		var y = evt.offsetY;
+
 		var x = evt.offsetX;
+		var y = evt.offsetY;
+		if (!x) {
+			var position = $(target.parentElement).position();
+			x = evt.layerX - position.left;
+			y = evt.layerY - position.top;
+		}
 
 		evt.stopPropagation();
 		evt.preventDefault();
 		
 		scaleGraph(target, scale, x, y);
 	}
-	
+
 	this.boundZoomLevel = function(target, level) {
 		if (level >= target.settings.zoomNumLevels) {
 			return target.settings.zoomNumLevels - 1;
 		}
-		else if (level <= 0 ) {
+		else if (level <= 0) {
 			return 0;
 		}
-		
+
 		return level;
 	}
-	
+
 	this.scaleGraph = function(target, scale, x, y) {
-		var sfactor = scale/target.scale;
+		var sfactor = scale / target.scale;
 		target.scale = scale;
-		
-		target.translateX = sfactor*target.translateX + x - sfactor*x;
-		target.translateY = sfactor*target.translateY + y - sfactor*y;
-		
+
+		target.translateX = sfactor * target.translateX + x - sfactor * x;
+		target.translateY = sfactor * target.translateY + y - sfactor * y;
+
 		if (target.model) {
 			target.model.trigger("scaled");
 		}
@@ -145,52 +147,55 @@
 		}
 		retransform(target);
 	}
-	
+
 	this.retransform = function(target) {
-		//$(target).children('g').attr("transform", "translate(" + target.translateX + "," + target.translateY + ") scale(" + target.scale + ")");
 		var gs = target.childNodes;
-		
-		var transformString = "translate(" + target.translateX + "," + target.translateY + ") scale(" + target.scale + ")";
+
+		var transformString = "translate(" + target.translateX + "," + target.translateY + 
+							  ") scale(" + target.scale + ")";
+
 		for (var i = 0; i < gs.length; ++i) {
 			var g = gs[i];
 			if (g.nodeName == 'g') {
 				g.setAttribute("transform", transformString);
 			}
 		}
-		
+
 		if (target.model) {
 			var obj = target.model.get("transform");
 			if (obj) {
 				obj.scale = target.scale;
 				obj.height = target.parentNode.clientHeight;
 				obj.width = target.parentNode.clientWidth;
-				
+
 				obj.x1 = target.translateX;
 				obj.y1 = target.translateY;
-				obj.x2 = obj.x1 + obj.width*obj.scale;
-				obj.y2 = obj.y1 + obj.height*obj.scale;
+				obj.x2 = obj.x1 + obj.width * obj.scale;
+				obj.y2 = obj.y1 + obj.height * obj.scale;
 			}
 		}
 	}
-	
+
 	this.resetTransform = function(target) {
 		var settings = target.settings;
 		target.translateX = settings.x;
 		target.translateY = settings.y;
-		
+
 		if (settings.x < settings.x2) {
 			var factor = 0.90;
-			
+
 			// Reset scale and stuff.
 			var divHeight = target.parentNode.clientHeight;
 			var divWidth = target.parentNode.clientWidth;
-			
+
 			var width = settings.x2 - settings.x;
 			var height = settings.y2 - settings.y;
-			var aspectRatioGraph = height/width;
-			var aspectRatioDiv = divHeight/divWidth;
-			
-			var scale = aspectRatioGraph > aspectRatioDiv ? (divHeight/height)*factor : (divWidth/width)*factor;
+			var aspectRatioGraph = height / width;
+			var aspectRatioDiv = divHeight / divWidth;
+
+			var scale = aspectRatioGraph > aspectRatioDiv 
+							? (divHeight / height) * factor 
+							: (divWidth / width) * factor;
 			target.scale = scale;
 		}
 		else {
@@ -198,7 +203,7 @@
 			target.scale = target.zoomLevels[target.zoomIndex];
 		}
 	}
-	
+
 	this.animateTransform = function(target, scale, x, y, duration) {
 		var zoomLevel = calculateZoomLevel(scale, target.zoomLevels);
 		target.fromScaleLevel = target.zoomIndex;
@@ -211,24 +216,24 @@
 		target.toY = y;
 		target.startTime = new Date().getTime();
 		target.endTime = target.startTime + duration;
-		
+
 		this.animateTick(target);
 	}
-	
+
 	this.animateTick = function(target) {
 		var time = new Date().getTime();
 		if (time < target.endTime) {
 			var timeDiff = time - target.startTime;
 			var progress = timeDiff / (target.endTime - target.startTime);
-			
-			//target.zoomIndex = Math.floor((target.toScaleLevel - target.fromScaleLevel)*progress) + target.fromScaleLevel;
-			//target.scale = target.zoomLevels[target.zoomIndex];
-			target.scale = (target.toScale - target.fromScale)*progress + target.fromScale;
-			target.translateX = (target.toX - target.fromX)*progress + target.fromX;
-			target.translateY = (target.toY - target.fromY)*progress + target.fromY;
+
+			target.scale = (target.toScale - target.fromScale) * progress + target.fromScale;
+			target.translateX = (target.toX - target.fromX) * progress + target.fromX;
+			target.translateY = (target.toY - target.fromY) * progress + target.fromY;
 			retransform(target);
-			setTimeout(function() {this.animateTick(target)}, 1);
-		}
+			setTimeout(function() {
+				this.animateTick(target)
+			}, 1);
+		} 
 		else {
 			target.zoomIndex = target.toScaleLevel;
 			target.scale = target.zoomLevels[target.zoomIndex];
@@ -237,23 +242,23 @@
 			retransform(target);
 		}
 	}
-	
+
 	this.calculateZoomScale = function(scaleLevel, numLevels, points) {
 		if (scaleLevel <= 0) {
 			return points[0];
-		}
+		} 
 		else if (scaleLevel >= numLevels) {
 			return points[points.length - 1];
 		}
 		var factor = (scaleLevel / numLevels) * (points.length - 1);
 		var floorIdx = Math.floor(factor);
 		var ceilingIdx = Math.ceil(factor);
-		
+
 		var b = factor - floorIdx;
-		
-		return b*(points[ceilingIdx] - points[floorIdx]) + points[floorIdx];
+
+		return b * (points[ceilingIdx] - points[floorIdx]) + points[floorIdx];
 	}
-	
+
 	this.calculateZoomLevel = function(scale, zoomLevels) {
 		if (scale >= zoomLevels[zoomLevels.length - 1]) {
 			return zoomLevels.length - 1;
@@ -261,7 +266,7 @@
 		else if (scale <= zoomLevels[0]) {
 			return 0;
 		}
-		
+
 		var i = 0;
 		// Plain old linear scan
 		for (; i < zoomLevels.length; ++i) {
@@ -270,28 +275,28 @@
 				break;
 			}
 		}
-		
+
 		if (i < 0) {
 			return 0;
 		}
-		
+
 		return i;
 	}
-	
-	var methods = {	
+
+	var methods = {
 		init : function(options) {
 			var settings = {
-				x: 0,
-				y: 0,
-				x2: 0,
-				y2: 0,
-				minX: -1000,
-				minY: -1000,
-				maxX: 1000,
-				maxY: 1000,
-				zoomIndex: 24,
-				zoomPoints: [0.1, 0.14, 0.2, 0.4, 0.8, 1, 1.6, 2.4, 4, 8, 16],
-				zoomNumLevels: 48
+				x : 0,
+				y : 0,
+				x2 : 0,
+				y2 : 0,
+				minX : -1000,
+				minY : -1000,
+				maxX : 1000,
+				maxY : 1000,
+				zoomIndex : 24,
+				zoomPoints : [ 0.1, 0.14, 0.2, 0.4, 0.8, 1, 1.6, 2.4, 4, 8, 16 ],
+				zoomNumLevels : 48
 			};
 			if (options) {
 				$.extend(settings, options);
@@ -300,16 +305,18 @@
 				var $this = $(this);
 				this.settings = settings;
 				this.marker = true;
-				
-				if (window.addEventListener) this.addEventListener('DOMMouseScroll', mouseScrolled, false);
+
+				if (window.addEventListener) {
+					this.addEventListener('DOMMouseScroll', mouseScrolled,false);
+				}
 				this.onmousewheel = mouseScrolled;
 				this.onmousedown = mouseDown;
 				this.onmouseup = mouseUp;
 				this.onmousemove = mouseMove;
 				this.onmouseout = mouseOut;
-				
+
 				this.zoomLevels = new Array(settings.zoomNumLevels);
-				for (var i = 0; i < settings.zoomNumLevels; ++i) {
+				for ( var i = 0; i < settings.zoomNumLevels; ++i) {
 					var scale = calculateZoomScale(i, settings.zoomNumLevels, settings.zoomPoints);
 					this.zoomLevels[i] = scale;
 				}
@@ -323,20 +330,20 @@
 			var y = arguments.y;
 			var factor = 0.9;
 			var duration = arguments.duration;
-			
+
 			var width = arguments.width ? arguments.width : 1;
 			var height = arguments.height ? arguments.height : 1;
-			
+
 			var divHeight = target.parentNode.clientHeight;
 			var divWidth = target.parentNode.clientWidth;
-			
-			var aspectRatioGraph = height/width;
-			var aspectRatioDiv = divHeight/divWidth;
-
-			var scale = aspectRatioGraph > aspectRatioDiv ? (divHeight/height)*factor : (divWidth/width)*factor;
-			//console.log("(" + x + "," + y + "," + width.toPrecision(4) + "," + height.toPrecision(4) + ")");
-			//console.log("(rg:" + aspectRatioGraph.toPrecision(3) + ",rd:" + aspectRatioDiv.toPrecision(3) + "," + scale.toPrecision(3) + ")");
-			
+
+			var aspectRatioGraph = height / width;
+			var aspectRatioDiv = divHeight / divWidth;
+
+			var scale = aspectRatioGraph > aspectRatioDiv 
+							? (divHeight / height) * factor
+							: (divWidth / width) * factor;
+
 			if (arguments.maxScale) {
 				if (scale > arguments.maxScale) {
 					scale = arguments.maxScale;
@@ -347,49 +354,53 @@
 					scale = arguments.minScale;
 				}
 			}
-			
+
 			// Center
-			var scaledWidth = width*scale;
-			var scaledHeight = height*scale;
-			
-			var sx = (divWidth - scaledWidth)/2 -scale*x;
-			var sy = (divHeight - scaledHeight)/2 -scale*y;
+			var scaledWidth = width * scale;
+			var scaledHeight = height * scale;
+
+			var sx = (divWidth - scaledWidth) / 2 - scale * x;
+			var sy = (divHeight - scaledHeight) / 2 - scale * y;
 			console.log("sx,sy:" + sx + "," + sy);
-			
+
 			if (duration != 0 && !duration) {
 				duration = 500;
 			}
-			
+
 			animateTransform(target, scale, sx, sy, duration);
 		},
 		attachNavigateModel : function(arguments) {
 			var $this = $(this);
 			var target = ($this)[0];
 			target.model = arguments;
-			
+
 			if (target.model) {
 				var obj = {};
 				obj.scale = target.scale;
 				obj.height = target.parentNode.clientHeight;
 				obj.width = target.parentNode.clientWidth;
-				
+
 				obj.x1 = target.translateX;
 				obj.y1 = target.translateY;
-				obj.x2 = obj.x1 + obj.height*obj.scale;
-				obj.y2 = obj.y1 + obj.width*obj.scale;
-				
-				target.model.set({transform : obj});
+				obj.x2 = obj.x1 + obj.height * obj.scale;
+				obj.y2 = obj.y1 + obj.width * obj.scale;
+
+				target.model.set({
+					transform : obj
+				});
 			}
 		}
 	};
-	
+
 	// Main Constructor
 	$.fn.svgNavigate = function(method) {
 		if (methods[method]) {
 			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-		} else if (typeof method === 'object' || !method) {
+		}
+		else if (typeof method === 'object' || !method) {
 			return methods.init.apply(this, arguments);
-		} else {
+		}
+		else {
 			$.error('Method ' + method + ' does not exist on svgNavigate');
 		}
 	};