azkaban-developers

diff --git a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
index 4ef618d..3b494dc 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
@@ -16,7 +16,7 @@
 
 
  	## Graph view.
-
+#*
 		<div class="container-full container-fill" id="graphView">
 			<div class="row row-offcanvas row-offcanvas-left">
 				<div class="col-xs-6 col-sm-3 sidebar-offcanvas graph-sidebar">
@@ -39,3 +39,29 @@
 				</div>
 			</div>
 		</div>
+*#
+
+		<div class="container-full container-fill" id="graphView">
+				<div class="glyphicon glyphicon-th-list" id="openJobList" title="Open Job List Panel"></div>
+				<div class="sidebar-offcanvas graph-sidebar">
+					<div class="panel panel-default" id="joblistpanel">
+						<div class="panel-heading">
+							<div id="closebtn" title="Close Panel"><span class="glyphicon glyphicon-remove"> </span></div>
+							<div id="inputboxpanel">
+								<input id="filter" type="text" placeholder="Job Filter" class="form-control input-sm">
+							</div>
+						</div>
+						<div id="joblist"></div>
+						<div class="panel-footer">
+							<button type="button" class="btn btn-sm btn-default" id="resetPanZoomBtn">Reset Pan Zoom</button>
+							<button type="button" class="btn btn-sm btn-default" id="autoPanZoomBtn" data-toggle="button">Auto Pan Zoom</button>
+						</div>
+					</div><!-- /.panel -->
+				</div><!-- /.col-sidebar -->
+				<div class="col-content">
+					<div id="svgDiv" class="well well-clear well-sm">
+						<svg id="flow-graph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed">
+						</svg>
+					</div>
+				</div>
+		</div>
\ No newline at end of file

diff --git a/src/less/azkaban-graph.less b/src/less/azkaban-graph.less
index 93fb36c..6228c30 100644
--- a/src/less/azkaban-graph.less
+++ b/src/less/azkaban-graph.less
@@ -1,6 +1,12 @@
 .nodebox {
   text {
     pointer-events: none;
+  	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
   }
 
   image {

diff --git a/src/less/flow.less b/src/less/flow.less
index b8dde8e..0600e60 100644
--- a/src/less/flow.less
+++ b/src/less/flow.less
@@ -1,12 +1,30 @@
+html,body {
+  height: 100%;
+}
+
 #svgDiv {
   height: 100%;
 }
 
+#graphView {
+   -moz-user-select: none;
+   -khtml-user-select: none;
+   -webkit-user-select: none;
+   user-select: none;
+}
+
 #flow-graph {
   width: 100%;
   height: 100%;
 }
 
+#headertabs {
+   -moz-user-select: none;
+   -khtml-user-select: none;
+   -webkit-user-select: none;
+   user-select: none;
+}
+
 #flow-executing-graph {
   width: 100%;
   height: 500px;
@@ -154,13 +172,48 @@ td {
 }
 
 .graph-sidebar {
-  height: 100%;
-  overflow-y: auto;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+}
+
+#inputboxpanel {
+	width: 206px;
+	margin: 0px;
+}
+
+#closebtn {
+	float: right;
+	color: #CCC;
+	padding: 5px 0px;
+	
+	&:hover {
+	  color: #666;
+	}
+}
+
+#joblistpanel {
+	height: 100%;
+	
+	.panel-heading {
+		padding-right: 10px;
+	}
+}
+
+#openJobList {
+	position: absolute;
+	margin: 10px;
+	color: #CCC;
+	
+	&:hover {
+		color: #666;
+	}
 }
 
 // TODO: Rename this as #job-list
 #joblist {
-  height: 100%;
+  overflow-y: auto;
+  height: calc(~"100% - 102px");
 }
 ul.tree-list {
   list-style-type: none;
@@ -186,7 +239,8 @@ li.tree-list-item {
     position: relative;
     display: block;
     border-bottom-width: 0;
-    padding: 10px 15px;
+    padding: 5px 15px;
+	font-size: 8pt;
 
     &:hover,
     &:focus {

diff --git a/src/web/js/azkaban/util/svg-navigate.js b/src/web/js/azkaban/util/svg-navigate.js
index 6fcb7cd..47280e7 100644
--- a/src/web/js/azkaban/util/svg-navigate.js
+++ b/src/web/js/azkaban/util/svg-navigate.js
@@ -71,7 +71,6 @@
 		}
 		var target = evt.target;
 		
-		
 		var leftOffset = 0;
 		var topOffset = 0;
 		if (!target.marker) {
@@ -105,9 +104,12 @@
 		target.zoomIndex = zoomLevel;
 		var scale = target.zoomLevels[zoomLevel];
 		
-		var y = evt.layerY;
-		var x = evt.layerX;
+		var y = evt.offsetY;
+		var x = evt.offsetX;
 
+		evt.stopPropagation();
+        evt.preventDefault();
+		
 		scaleGraph(target, scale, x, y);
 	}
 	
@@ -134,7 +136,7 @@
 		}
 		retransform(target);
 	}
-	
+
 	this.translateDeltaGraph = function(target, x, y) {
 		target.translateX += x;
 		target.translateY += y;

diff --git a/src/web/js/azkaban/view/flow.js b/src/web/js/azkaban/view/flow.js
index b5466c4..48a6b84 100644
--- a/src/web/js/azkaban/view/flow.js
+++ b/src/web/js/azkaban/view/flow.js
@@ -423,7 +423,7 @@ $(function() {
 	});
 	
   jobsListView = new azkaban.JobListView({
-		el: $('#jobList'), 
+		el: $('#joblistpanel'), 
 		model: graphModel, 
 		contextMenuCallback: jobClickCallback
 	});

diff --git a/src/web/js/azkaban/view/job-list.js b/src/web/js/azkaban/view/job-list.js
index b615cb5..93a0f6b 100644
--- a/src/web/js/azkaban/view/job-list.js
+++ b/src/web/js/azkaban/view/job-list.js
@@ -25,7 +25,8 @@ azkaban.JobListView = Backbone.View.extend({
 		"click #resetPanZoomBtn": "handleResetPanZoom",
 		"click #autoPanZoomBtn": "handleAutoPanZoom",
 		"contextmenu li.listElement": "handleContextMenuClick",
-		"click .expandarrow": "handleToggleMenuExpand"
+		"click .expandarrow": "handleToggleMenuExpand",
+		"click #closebtn" : "handleClose"
 	},
 	
 	initialize: function(settings) {
@@ -34,6 +35,8 @@ azkaban.JobListView = Backbone.View.extend({
 		this.model.bind('change:graph', this.render, this);
 		this.model.bind('change:update', this.handleStatusUpdate, this);
 		
+		$("#openJobList").click(this.handleOpen);
+		
 		this.filterInput = $(this.el).find("#filter");
 		this.list = $(this.el).find("#joblist");
 		this.contextMenu = settings.contextMenuCallback;
@@ -329,5 +332,12 @@ azkaban.JobListView = Backbone.View.extend({
 		// Using $().hasClass('active') does not use here because it appears that
 		// this is called before the Bootstrap toggle completes.
 		this.model.set({"autoPanZoom": $(target).hasClass('btn-info')});
+	},
+	
+	handleClose: function(evt) {
+		$("#joblistpanel").fadeOut();
+	},
+	handleOpen: function(evt) {
+		$("#joblistpanel").fadeIn();
 	}
 });