Implement a first-pass of tomography node hover

Not at all using Emeber's facilities and no clue how to do so with this.
ross · May 15, 2016 · a8370a0 · a8370a0
1 parent 811c77c
commit a8370a0
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 21 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -599,6 +599,7 @@ <h5>Network Tomography</h5>
 
       {{ 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">Average: {{ tomography.avg }}ms</p>
       <p class="light small">Maximum: {{ tomography.max }}ms</p>

diff --git a/ui/javascripts/app/helpers.js b/ui/javascripts/app/helpers.js
@@ -105,7 +105,12 @@ Ember.Handlebars.helper('tomographyGraph', function(tomography, size) {
   // up drastically.
 
   var n = tomography.n;
-  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 + '">' +
@@ -118,8 +123,9 @@ Ember.Handlebars.helper('tomographyGraph', function(tomography, size) {
 '            <circle class="border" r="' + insetSize + '"/>' +
 '          </g>' +
 '          <g class="lines">';
-  tomography.distances.forEach(function (distance, i) {
-    buf += '            <line transform="rotate(' + (i * 360 / n) + ')" y2="' + (-insetSize * (distance / max)) + '"></line>';
+  tomography.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);"></line>';
   });
   buf += '' +
 '          </g>' +

diff --git a/ui/javascripts/app/routes.js b/ui/javascripts/app/routes.js
@@ -261,46 +261,63 @@ App.ServicesShowRoute = App.BaseRoute.extend({
   }
 });
 
-function distance(a, b) {
-    a = a.Coord;
-    b = b.Coord;
-    var sum = 0;
-    for (var i = 0; i < a.Vec.length; i++) {
+// 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;
+}
+
+App.NodesShowRoute = App.BaseRoute.extend({
+  model: function(params) {
+
+    function distance(a, b) {
+      a = a.Coord;
+      b = b.Coord;
+      var sum = 0;
+      for (var i = 0; i < a.Vec.length; i++) {
         var diff = a.Vec[i] - b.Vec[i];
         sum += diff * diff;
-    }
-    var rtt = Math.sqrt(sum) + a.Height + b.Height;
+      }
+      var rtt = Math.sqrt(sum) + a.Height + b.Height;
 
-    var adjusted = rtt + a.Adjustment + b.Adjustment;
-    if (adjusted > 0.0) {
+      var adjusted = rtt + a.Adjustment + b.Adjustment;
+      if (adjusted > 0.0) {
         rtt = adjusted;
+      }
+
+      return Math.round(rtt * 100000.0) / 100.0;
     }
 
-    return Math.round(rtt * 100000.0) / 100.0;
-}
+    function sorter(a, b) {
+      return a.distance - b.distance;
+    }
 
-App.NodesShowRoute = App.BaseRoute.extend({
-  model: function(params) {
     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) {
       if (params.name == node.Node) {
         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(sorter);
       }
     });
-    var min = Math.min.apply(null, distances);
     var avg = sum / distances.length;
-    var max = Math.max.apply(null, distances);
 
     // Return a promise hash of the node and nodes
     return Ember.RSVP.hash({