Implement a first-pass of tomography node hover

Not at all using Emeber's facilities and no clue how to do so with this.

ui/index.html

@@ -599,6 +599,7 @@
 
       {{ tomographyGraph tomography 336 }}
 
+      <p class="light small">Node: <span id="tomography-node-info"></span></p>
       <p class="light small">Minimum: {{ tomography.min }}ms</p>
       <p class="light small">Median: {{ tomography.median }}ms</p>
       <p class="light small">Maximum: {{ tomography.max }}ms</p>

ui/javascripts/app/helpers.js

@@ -94,6 +94,12 @@ function notify(message, ttl) {
 
 // Tomography
 
+// TODO: not sure how to how do to this more Ember.js-y
+function tomographyMouseOver(el) {
+  var buf = el.getAttribute('data-node') + ' - ' + el.getAttribute('data-distance') + 'ms';
+  document.getElementById('tomography-node-info').innerHTML = buf;
+}
+
 Ember.Handlebars.helper('tomographyGraph', function(tomography, size) {
 
   // This is ugly, but I'm working around bugs with Handlebars and templating
@@ -104,7 +110,12 @@ Ember.Handlebars.helper('tomographyGraph', function(tomography, size) {
   // if/when Handlebars fixes the underlying issues all of this can be cleaned
   // up drastically.
 
-  var max = Math.max.apply(null, tomography.distances);
+  var max = -999999999;
+  tomography.distances.forEach(function (d, i) {
+    if (d.distance > max) {
+      max = d.distance;
+    }
+  });
   var insetSize = size / 2 - 8;
   var buf = '' +
 '      <svg width="' + size + '" height="' + size + '">' +
@@ -129,8 +140,9 @@ Ember.Handlebars.helper('tomographyGraph', function(tomography, size) {
     // Re-set n to the filtered size
     n = distances.length;
   }
-  distances.forEach(function (distance, i) {
-    buf += '            <line transform="rotate(' + (i * 360 / n) + ')" y2="' + (-insetSize * (distance / max)) + '"></line>';
+  distances.forEach(function (d, i) {
+    buf += '            <line transform="rotate(' + (i * 360 / n) + ')" y2="' + (-insetSize * (d.distance / max)) + '" ' +
+      'data-node="' + d.node + '" data-distance="' + d.distance + '" onmouseover="tomographyMouseOver(this);"/>';
   });
   buf += '' +
 '          </g>' +

ui/javascripts/app/routes.js

@@ -284,6 +284,8 @@ App.NodesShowRoute = App.BaseRoute.extend({
     var dc = this.modelFor('dc');
     var token = App.get('settings.token');
 
+    var min = 999999999;
+    var max = -999999999;
     var sum = 0;
     var distances = [];
     dc.coordinates.forEach(function (node) {
@@ -291,24 +293,30 @@ App.NodesShowRoute = App.BaseRoute.extend({
         dc.coordinates.forEach(function (other) {
           if (node.Node != other.Node) {
             var dist = distance(node, other);
-            distances.push(dist);
+            distances.push({ node: other.Node, distance: dist });
             sum += dist;
+            if (dist < min) {
+              min = dist;
+            }
+            if (dist > max) {
+              max = dist;
+            }
           }
         });
-        distances.sort();
+        distances.sort(function (a, b) {
+          return a.distance - b.distance;
+        });
       }
     });
-    var min = Math.min.apply(null, distances);
     var n = distances.length;
     var halfN = Math.floor(n / 2);
     var median;
     if (n % 2) {
       // odd
-      median = distances[halfN];
+      median = distances[halfN].distance;
     } else {
-      median = (distances[halfN - 1] + distances[halfN]) / 2;
+      median = (distances[halfN - 1].distance + distances[halfN].distance) / 2;
     }
-    var max = Math.max.apply(null, distances);
 
     // Return a promise hash of the node and nodes
     return Ember.RSVP.hash({

ui/styles/base.scss

@@ -168,6 +168,10 @@ a {
 .tomography .lines line {
     stroke: $red;
 }
+.tomography .lines line:hover {
+    stroke: $gray-darker;
+    stroke-width: 2px;
+}
 .tomography .tick line {
     stroke: $gray-light;
 }