Add key-listener to refactored timeline

This change adds a key-listener to navigate between test rectangles on
the timeline. When an out-of-view test is selected, the timeline will
refocus and bring it into view. Functionality for left and right arrow
keys is supported, up and down (to navigate between workers) key are
not supported, but may be added in a future patch.

Change-Id: I4a187a1c048d5e6552316d10db0c677432aa8f7e

app/js/directives/timeline.js

@@ -30,6 +30,10 @@ var parseWorker = function(tags) {
  * @ngInject
  */
 function timeline($log, datasetService) {
+
+  /**
+   * @ngInject
+   */
   var controller = function($scope) {
     var self = this;
     self.statusColorMap = statusColorMap;
@@ -130,6 +134,28 @@ function timeline($log, datasetService) {
       $scope.$broadcast('select', null);
     };
 
+    self.selectNextItem = function() {
+      if (self.selection) {
+        var worker = self.selection.item.worker;
+        if (self.selection.index < self.data[worker].values.length - 1) {
+          self.selectIndex(worker, (self.selection.index) + 1);
+          return true;
+        }
+      }
+      return false;
+    };
+
+    self.selectPreviousItem = function() {
+      if (self.selection) {
+        var worker = self.selection.item.worker;
+        if (self.selection.index > 0) {
+          self.selectIndex(worker, (self.selection.index) - 1);
+          return true;
+        }
+      }
+      return false;
+    };
+
     var initData = function(raw) {
       self.dataRaw = raw;
 
@@ -230,6 +256,19 @@ function timeline($log, datasetService) {
 
     scope.$on('windowResize', updateWidth);
     updateWidth();
+
+    d3.select(window)
+      .on("keydown", function() {
+        var code = d3.event.keyCode;
+        if (code == 37) {
+          ctrl.selectPreviousItem();
+        }
+        else if (code == 39) {
+          ctrl.selectNextItem();
+        }
+        scope.$apply();
+      });
+
   };
 
   return {