Bug 1164891- Visualize the distribution of performance test results using Canvas API (#2530)

neutrino-custom/lint.js

@@ -93,7 +93,7 @@ module.exports = neutrino => {
                 globals: ['angular', '$', '_', 'treeherder', 'perf',
                     'treeherderApp', 'failureViewerApp', 'logViewerApp',
                     'userguideApp', 'admin', 'Mousetrap', 'jQuery', 'React',
-                    'hawk', 'jsonSchemaDefaults', 'SERVICE_DOMAIN'
+                    'hawk', 'jsonSchemaDefaults', 'SERVICE_DOMAIN', 'numeral'
                 ]
             }
         }));

package.json

@@ -33,6 +33,7 @@
     "neutrino-lint-base": "4.3.1",
     "neutrino-preset-react": "4.2.3",
     "ngreact": "0.4.0",
+    "numeral": "^2.0.6",
     "raw-loader": "0.5.1",
     "react": "15.3.2",
     "react-dom": "15.3.2",

ui/css/perf.css

@@ -449,3 +449,26 @@ td.alert-confidence {
 .alert-strike {
     text-decoration: line-through;
 }
+
+.compare-table-tooltip .tooltip-inner {
+  max-width: 280px;
+}
+
+.tooltip-table {
+  border: 1px solid white;
+  height: 20px;
+  margin-bottom: 5px;
+}
+
+.tooltip-table .value-column {
+  width: 35px;
+  border: 1px solid white;
+  align: center;
+  font-family: "Helvetica";
+  font-size: 11px;
+}
+
+.tooltip-table .distribution-column{
+  width: 200px;
+  border: 1px solid white;
+}

ui/entry-perf.js

@@ -21,6 +21,7 @@ require('angular-local-storage');
 require('mousetrap');
 require('bootstrap/dist/js/bootstrap');
 require('angular-ui-bootstrap');
+require('numeral');
 require('./vendor/angular-clipboard.js');
 // The jquery flot package does not seem to be updated on npm, so we use a local version:
 require('./vendor/jquery.flot.js');

ui/js/components/perf/compare.js

@@ -108,3 +108,36 @@ treeherder.component('compareError', {
         newRevision: '<'
     }
 });
+
+treeherder.component('distributionGraph', {
+    template:`
+        <table class = "tooltip-table"> 
+            <tr> 
+                <td class="value-column">{{$ctrl.minValue|abbreviatedNumber}}</td> 
+                <td class="distribution-column"><canvas id="distribution-graph-new" width="190" height="30"></canvas></td>  
+                <td class="value-column">{{$ctrl.maxValue|abbreviatedNumber}}</td> 
+            </tr>
+        </table>`,
+    bindings: {
+        replicates: '<'
+    },
+    controller: [function () {
+        let ctrl = this;
+        let cvs = document.getElementById("distribution-graph-new");
+        let ctx = cvs.getContext("2d");
+        cvs.setAttribute("id", "distribution-graph-current");
+        ctrl.maxValue = Math.max.apply(null, ctrl.replicates);
+        ctrl.minValue = Math.min.apply(null, ctrl.replicates);
+        if (ctrl.maxValue - ctrl.minValue > 1) {
+            ctrl.maxValue = Math.ceil(ctrl.maxValue*1.001);
+            ctrl.minValue = Math.floor(ctrl.minValue/1.001);
+        }
+        ctx.globalAlpha = 0.3;
+        ctrl.replicates.forEach((value) =>{
+            ctx.beginPath();
+            ctx.arc(180/(ctrl.maxValue - ctrl.minValue)*(value - ctrl.minValue) + 5, 18, 5, 0, 360);
+            ctx.fillStyle = 'white';
+            ctx.fill();
+        });
+    }]
+});

ui/js/filters.js

@@ -192,3 +192,8 @@ treeherder.filter('absoluteValue', function () {
         return Math.abs(input);
     };
 });
+
+treeherder.filter('abbreviatedNumber', ['numeral', function (numeral) {
+    return input =>
+        (input.toString().length <= 5) ? input : numeral(input).format('0.0a');
+}]);

ui/js/services/main.js

@@ -210,3 +210,8 @@ treeherder.factory('thExtendProperties', [
             return dest;
         };
     }]);
+
+treeherder.factory('numeral', [
+    function () {
+        return require('numeral');
+    }]);

ui/partials/perf/average.html

@@ -1,7 +1,6 @@
 <!-- Show standard deviation if >1 run -->
 <span class="detail-hint" ng-if="$ctrl.replicates.length > 1"
-      uib-tooltip="Runs: &lt; {{$ctrl.replicates.join(' ')}} &gt;
-        ({{$ctrl.stddev|displayNumber}} = {{$ctrl.stddevpct|displayNumber}}% standard deviation)">
+      uib-tooltip-template="'partials/perf/tooltipgraphs.html'" tooltip-class="compare-table-tooltip">
   {{$ctrl.value|displayNumber}} &#177; {{$ctrl.stddevpct|displayNumber}}%
 </span>
 <!-- View for only 1 run (no stddev) -->

ui/partials/perf/tooltipgraphs.html

@@ -0,0 +1,3 @@
+<div>Runs: &lt; {{$ctrl.replicates.join(' ')}} &gt; ({{$ctrl.stddev|displayNumber}} = {{$ctrl.stddevpct|displayNumber}}% standard deviation)</div>
+&nbsp
+<distribution-graph replicates="$ctrl.replicates"></distribution-graph>

yarn.lock

@@ -4343,6 +4343,10 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
+numeral@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
+
 oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"