state_graph.js: Add focus hover for time

Adds an SVG rect element to the focus display and displays a tooltip
with the current time at the hovering mouse cursor.

BUG=b:150216354
TEST=Manually tested in browser

Change-Id: I3e23aae92ae36526799d57c5ec2ccfb6563c898c

state_graph.js

diff --git a/state_graph.js b/state_graph.js
index ca272e1..d8e3375 100644
--- a/state_graph.js
+++ b/state_graph.js
@@ -348,6 +348,15 @@
       .attr('class', 'focus')
       .attr('transform', 'translate(' + focusMargin.left + ',0)');
 
+  var focusHoverTarget = svg.append('rect')
+      .attr('width', width)
+      .attr('height', focusHeight)
+      .attr('fill', 'rgba(0, 0, 0, 0)')
+      .attr('stroke', 'none')
+      .on('mouseover', focusMouseOver)
+      .on('mousemove', focusMouseMove)
+      .on('mouseout', focusMouseOut);
+
   var context = svg.append('g')
       .attr('class', 'context')
       .attr('transform',
@@ -624,4 +633,28 @@
     }
     return ('zoom_' + i + ' suspends partial');
   }
+
+  let timeHover = null;
+  function focusMouseOver(d, i) {
+    timeHover = document.createElement('div');
+    timeHover.style.position = 'absolute';
+    document.body.appendChild(timeHover);
+  }
+  function focusMouseMove(d, i) {
+    const bounds = this.getClientRects()[0];
+    const rawX = d3.mouse(this)[0];
+    const xpos = rawX + bounds.left + window.scrollX;
+    const rawY = d3.mouse(this)[1];
+    const mouseOffset = 30;
+    const ypos = rawY + bounds.top + window.scrollY - mouseOffset;
+    const text = getXTickLabels(focusX.invert(rawX - focusMargin.left));
+    timeHover.style.left = xpos + 'px';
+    timeHover.style.top = ypos + 'px';
+    timeHover.innerHTML = text;
+  }
+  function focusMouseOut(d, i) {
+    timeHover.remove();
+    timeHover = null;
+  }
+
 }