azkaban-aplcache

diff --git a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
index 853549f..75d7122 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
@@ -58,6 +58,7 @@
 								</div>
 								<div id="list">
 								</div>
+								<div id="resetPanZoomBtn" class="btn5" >Reset Pan Zoom</div>
 							</div>
 							<div id="svgDiv" >
 								<svg id="svgGraph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed" >

diff --git a/src/web/css/azkaban.css b/src/web/css/azkaban.css
index 2959b80..65fa053 100644
--- a/src/web/css/azkaban.css
+++ b/src/web/css/azkaban.css
@@ -1005,6 +1005,11 @@ tr:hover td {
 	bottom: 120px;
 }
 
+#resetPanZoomBtn {
+	position: absolute;
+	bottom: 90px;
+}
+
 #filter {
 	width: 100%;
 }
@@ -1016,21 +1021,29 @@ tr:hover td {
 #list ul li {
 	margin: 4px 5px;
 	border-bottom: 1px solid #EEE;
+	cursor: pointer;
+}
+
+#list ul li:hover{
+	background-color: #E1E3E2;
+	color: #009FC9;
+}
+
+#list ul li.selected {
+	background-color: #009FC9;
+	color: #EEE;
 }
 
 #list ul li a {
 	font-size: 10pt;
 	margin-left: 5px;
-	cursor: pointer;
 }
 
 #list ul li a span {
 	background-color: #FF0;
+	color: black;
 }
 
-#list ul li a:hover {
-	color: #009FC9;
-}
 
 /* old styles */
 

diff --git a/src/web/js/azkaban.flow.view.js b/src/web/js/azkaban.flow.view.js
index c2e4d2f..71c11fc 100644
--- a/src/web/js/azkaban.flow.view.js
+++ b/src/web/js/azkaban.flow.view.js
@@ -38,10 +38,12 @@ azkaban.FlowTabView= Backbone.View.extend({
 var jobListView;
 azkaban.JobListView = Backbone.View.extend({
 	events: {
-		"keyup input": "filterJobs"
+		"keyup input": "filterJobs",
+		"click li": "handleJobClick",
+		"click #resetPanZoomBtn" : "handleResetPanZoom"
 	},
 	initialize: function(settings) {
-		this.model.bind('change:selected', this.changeSelected, this);
+		this.model.bind('change:selected', this.handleSelectionChange, this);
 		this.model.bind('change:graph', this.render, this);
 	},
 	filterJobs: function(self) {
@@ -102,6 +104,8 @@ azkaban.JobListView = Backbone.View.extend({
 		var data = this.model.get("data");
 		var nodes = data.nodes;
 		var edges = data.edges;
+		
+		this.listNodes = {}; 
 		if (nodes.length == 0) {
 			console.log("No results");
 			return;
@@ -127,9 +131,49 @@ azkaban.JobListView = Backbone.View.extend({
 			li.appendChild(a);
 			ul.appendChild(li);
 			li.jobid=nodeArray[i].id;
+			
+			this.listNodes[nodeArray[i].id] = li;
 		}
 		
 		$("#list").append(ul);
+	},
+	handleJobClick : function(evt) {
+		var jobid = evt.currentTarget.jobid;
+		if(!evt.currentTarget.jobid) {
+			return;
+		}
+		
+		if (this.model.has("selected")) {
+			var selected = this.model.get("selected");
+			if (selected == jobid) {
+				this.model.unset("selected");
+			}
+			else {
+				this.model.set({"selected": jobid});
+			}
+		}
+		else {
+			this.model.set({"selected": jobid});
+		}
+	},
+	handleSelectionChange: function(evt) {
+		if (!this.model.hasChanged("selected")) {
+			return;
+		}
+		
+		var previous = this.model.previous("selected");
+		var current = this.model.get("selected");
+		
+		if (previous) {
+			$(this.listNodes[previous]).removeClass("selected");
+		}
+		
+		if (current) {
+			$(this.listNodes[current]).addClass("selected");
+		}
+	},
+	handleResetPanZoom: function(evt) {
+		this.model.trigger("resetPanZoom");
 	}
 });
 
@@ -140,6 +184,7 @@ azkaban.SvgGraphView = Backbone.View.extend({
 	initialize: function(settings) {
 		this.model.bind('change:selected', this.changeSelected, this);
 		this.model.bind('change:graph', this.render, this);
+		this.model.bind('resetPanZoom', this.resetPanZoom, this);
 		
 		this.svgns = "http://www.w3.org/2000/svg";
 		this.xlinksn = "http://www.w3.org/1999/xlink";
@@ -199,11 +244,28 @@ azkaban.SvgGraphView = Backbone.View.extend({
 		}
 		
 		this.graphBounds = bounds;
-			
-		$("#svgGraph").svgNavigate("transformToBox", {x: bounds.minX, y: bounds.minY, width: (bounds.maxX - bounds.minX), height: (bounds.maxY - bounds.minY) });
+		this.resetPanZoom();
 	},
 	changeSelected: function(self) {
 		console.log("change selected");
+		var selected = this.model.get("selected");
+		var previous = this.model.previous("selected");
+		
+		if (previous) {
+			// Unset previous
+		}
+		
+		if (selected) {
+			//var g = document.getElementById();
+			var node = this.nodes[selected];
+			
+			var offset = 200;
+			var widthHeight = offset*2;
+			var x = node.sx - offset;
+			var y = node.sy - offset;
+			
+			$("#svgGraph").svgNavigate("transformToBox", {x: x, y: y, width: widthHeight, height: widthHeight});
+		}
 	},
 	drawEdge: function(self, edge) {
 		var svg = self.svgGraph;
@@ -289,6 +351,10 @@ azkaban.SvgGraphView = Backbone.View.extend({
 	calcScalePoint : function(pointObj) {
 		pointObj.sx = 50*pointObj.x;
 		pointObj.sy = 50*pointObj.y;
+	},
+	resetPanZoom : function(self) {
+		var bounds = this.graphBounds;
+		$("#svgGraph").svgNavigate("transformToBox", {x: bounds.minX, y: bounds.minY, width: (bounds.maxX - bounds.minX), height: (bounds.maxY - bounds.minY) });
 	}
 	
 });