Show warning for hidden tests on timeline.

Previously, tests hidden due to their small (< 2px) size would be
silently hidden from view, and navigating to a hidden test (via direct
link, search, or keyboard) would move the timeline to the correct
position, but would show only empty space, even though the details
panel would be updated. This adds a label and a warning message to the
details panel to inform users that the selected test is too small to
show in the view.

Additionally, when the selection is changed to a hidden item, any
previously-selected rect will now be properly restored to its original
color.

Change-Id: I3f6ee9313db64472ce8f6ce7d929c4d464f12ab5

app/js/directives/timeline-viewport.js

@@ -86,7 +86,7 @@ function timelineViewport($document) {
 
     var uncolor = function(rect) {
       if (!$document[0].contains(rect[0][0])) {
-        // we load the original colored rect so we can't unset its color,
+        // we lost the original colored rect so we can't unset its color,
         // force a full reload
         updateItems(timelineController.data);
         return;
@@ -166,7 +166,7 @@ function timelineViewport($document) {
         return {
           key: group.key,
           values: group.values.filter(function(e) {
-            if (xSelected(e.endDate) - xSelected(e.startDate) < 2) {
+            if (timelineController.hidden(e)) {
               return false;
             }
 
@@ -324,12 +324,18 @@ function timelineViewport($document) {
 
     scope.$on('postSelect', function(event, selection) {
       if (selection) {
-        // iterate over all rects to find match
-        itemGroups.selectAll('rect').each(function(d) {
-          if (d.name === selection.item.name) {
-            select(d3.select(this));
+        if (timelineController.hidden(selection.item)) {
+          if (selectedRect) {
+            uncolor(selectedRect);
           }
-        });
+        } else {
+          // iterate over all rects to find match
+          itemGroups.selectAll('rect').each(function(d) {
+            if (d.name === selection.item.name) {
+              select(d3.select(this));
+            }
+          });
+        }
       } else {
         select(null);
       }

app/js/directives/timeline.js

@@ -163,6 +163,15 @@ function timeline($log, datasetService, progressService) {
       return false;
     };
 
+    self.hidden = function(item) {
+      var width = self.axes.selection(item.endDate) -
+          self.axes.selection(item.startDate);
+      var hidden = width < 2;
+      item.hidden = hidden;
+
+      return hidden;
+    };
+
     var initData = function(raw) {
       self.dataRaw = raw;
 

app/views/directives/timeline-details.html

@@ -16,6 +16,11 @@
             <span class="label label-{{item | contextClass}}">
                 {{item.status}}
             </span>
+            &nbsp;
+            <span class="label label-default"
+                  ng-if="item.hidden">
+                hidden
+            </span>
         </h3>
     </div>
     <table class="table table-bordered table-hover table-striped">
@@ -42,6 +47,12 @@
             <td>End</td>
             <td>{{item.endDate | date:'medium'}}</td>
         </tr>
+        <tr ng-if="item.hidden" class="warning text-center">
+            <td colspan="2">
+                <fa name="exclamation-triangle"></fa>
+                This test executed too quickly to be visible above.
+            </td>
+        </tr>
     </table>
     <div class="panel-footer clearfix">
         <div class="btn-group pull-right">