feat(benchmark): add ability to adjust sample quantity

Move creation of HTML elements into tree.html where possible.

Improve styling with bootstrap lib plus basic structuring of content.

Author: jeffbcross

benchmark/web/bootstrap.min.css

@@ -1,23 +1,17 @@
 var bp = window.bp = {};
 bp.steps = window.benchmarkSteps = [];
-bp.runState = {};
+bp.runState = {
+  numSamples: 10,
+  recentTimePerStep: {},
+  timesPerAction: {}
+};
 
-bp.setRunState = function (samples, iterations, ignoreCount) {
-  bp.runState.numSamples = samples;
+bp.setIterations = function (iterations) {
   bp.runState.iterations = iterations;
-  bp.runState.ignoreCount = ignoreCount;
-  bp.runState.recentTimePerStep = {};
-  bp.runState.timesPerAction = {};
 };
 
-bp.resetRunState = function() {
-  bp.runState = {
-    numSamples: 0,
-    iterations: 0,
-    ignoreCount: 0,
-    recentTimePerStep: {},
-    timesPerAction: {}
-  };
+bp.resetIterations = function() {
+  bp.runState.iterations = 0;
 };
 
 bp.interpolateHtml = function(string, list) {
@@ -42,17 +36,17 @@ bp.numMilliseconds = function() {
 bp.loopBenchmark = function () {
   if (bp.runState.iterations <= -1) {
     //Time to stop looping
-    bp.setRunState(10, 0);
+    bp.setIterations(0);
     bp.loopBtn.innerText = 'Loop';
     return;
   }
-  bp.setRunState(10, -1);
+  bp.setIterations(-1);
   bp.loopBtn.innerText = 'Pause';
   bp.runAllTests();
 };
 
 bp.onceBenchmark = function() {
-  bp.setRunState(10, 1);
+  bp.setIterations(1);
   bp.onceBtn.innerText = '...';
   bp.runAllTests(function() {
     bp.onceBtn.innerText = 'Once';
@@ -61,13 +55,27 @@ bp.onceBenchmark = function() {
 
 bp.twentyFiveBenchmark = function() {
   var twentyFiveBtn = bp.twentyFiveBtn;
-  bp.setRunState(20, 25);
+  bp.setIterations(25);
   twentyFiveBtn.innerText = 'Looping...';
   bp.runAllTests(function() {
     twentyFiveBtn.innerText = 'Loop 25x';
   }, 5);
 };
 
+bp.addSampleRange = function() {
+  bp.sampleRange = bp.container().querySelector('#sampleRange');
+  bp.sampleRange.value = Math.max(bp.runState.numSamples, 1);
+  bp.sampleRange.addEventListener('input', bp.onSampleRangeChanged);
+  bp.sampleRangeValue = bp.container().querySelector('#sampleRangeValue');
+  bp.sampleRangeValue.innerText = bp.runState.numSamples;
+};
+
+bp.onSampleRangeChanged = function (evt) {
+  var value = evt.target.value;
+  bp.runState.numSamples = parseInt(value, 10);
+  bp.sampleRangeValue.innerText = value;
+};
+
 bp.runTimedTest = function (bs) {
   if (typeof window.gc === 'function') {
     window.gc();
@@ -90,31 +98,23 @@ bp.runAllTests = function (done) {
   }
   else {
     bp.writeReport(bp.report);
-    bp.resetRunState();
+    bp.resetIterations();
     done && done();
   }
 }
 
-bp.padName = function (name) {
-  return name.length < 10 ?
-    ('         ' + name).slice(-10).replace(/ /g, '&nbsp;') :
-    name;
-};
-
 bp.generateReportPartial = function(name, avg, times) {
   return bp.interpolateHtml(
-      '<div>%0: avg-%1:<b>%2ms</b> [%3]ms</div>',
+      '<tr><td>%0</td><td class="average">%1ms</td><td>[%2]ms</td></tr>',
       [
-        bp.padName(name),
-        bp.runState.numSamples,
+        name,
         ('' + avg).substr(0,6),
         times.join(', ')
       ]);
 };
 
 bp.getAverage = function (times, runState) {
-  var avg = 0, ignoreCount = (runState && runState.ignoreCount) || 0;
-  times = times.slice(ignoreCount);
+  var avg = 0;
   times.forEach(function(x) { avg += x; });
   return avg / times.length;
 };
@@ -126,7 +126,7 @@ bp.writeReport = function(reportContent) {
 bp.getTimesPerAction = function(name) {
   var tpa = bp.runState.timesPerAction[name];
   if (!tpa) {
-    tpa = bp.runState.timesPerAction[name] =  {
+    tpa = bp.runState.timesPerAction[name] = {
       times: [], // circular buffer
       fmtTimes: [],
       nextEntry: 0
@@ -135,15 +135,27 @@ bp.getTimesPerAction = function(name) {
   return tpa;
 };
 
+bp.rightSizeTimes = function(times) {
+  var delta = times.length - bp.runState.numSamples;
+  if (delta > 0) {
+    return times.slice(delta);
+  }
+
+  return times;
+};
+
 bp.calcStats = function() {
   var report = '';
   bp.steps.forEach(function(bs) {
     var stepName = bs.name,
         timeForStep = bp.runState.recentTimePerStep[stepName],
         tpa = bp.getTimesPerAction(stepName),
         avg;
+
     tpa.fmtTimes[tpa.nextEntry] = ('' + timeForStep).substr(0,6);
+    tpa.fmtTimes = bp.rightSizeTimes(tpa.fmtTimes);
     tpa.times[tpa.nextEntry++] = timeForStep;
+    tpa.times = bp.rightSizeTimes(tpa.times);
     tpa.nextEntry %= bp.runState.numSamples;
     avg = bp.getAverage(tpa.times, bp.runState);
 
@@ -159,49 +171,37 @@ bp.container = function() {
   return bp._container;
 }
 
-bp.addButton = function(reference, text, handler) {
+bp.addButton = function(reference, handler) {
   var container = bp.container();
-  bp[reference] = document.createElement('button');
-  bp[reference].innerText = text;
-
+  bp[reference] = container.querySelector('button.' + reference);
   bp[reference].addEventListener('click', handler);
-
-  container.appendChild(bp[reference]);
 }
 
 bp.addLinks = function() {
   // Add links to everything
-  var linkDiv = document.createElement('div');
-  linkDiv.style['margin-bottom'] = '1.5em';
-  var linkHtml = [
-    '<style>',
-    '.bpLink { background: lightblue; padding: 1em }',
-    '</style>',
-    '<span class=bpLink>Benchmark Versions: </span>'
-  ].join('\n');
+  var linkDiv = bp.container().querySelector('.versionContent');
+  var linkHtml = '';
 
   [
     // Add new benchmark suites here
     ['tree.html', 'TreeComponent']
   ].forEach((function (link) {
-    linkHtml += bp.interpolateHtml('<a class=bpLink href=%0>%1</a>', link);
+    linkHtml += bp.interpolateHtml('<a href=%0>%1</a>', link);
   }));
 
   linkDiv.innerHTML = linkHtml;
-  bp.container().appendChild(linkDiv);
 };
 
 bp.addInfo = function() {
-  bp.infoDiv = document.createElement('div');
-  bp.infoDiv.style['font-family'] = 'monospace';
-  bp.container().appendChild(bp.infoDiv);
+  bp.infoDiv = bp.container().querySelector('tbody.info');
 };
 
 bp.onDOMContentLoaded = function() {
   bp.addLinks();
-  bp.addButton('loopBtn', 'Loop', bp.loopBenchmark);
-  bp.addButton('onceBtn', 'Once', bp.onceBenchmark);
-  bp.addButton('twentyFiveBtn', 'Loop 25x', bp.twentyFiveBenchmark);
+  bp.addButton('loopBtn', bp.loopBenchmark);
+  bp.addButton('onceBtn', bp.onceBenchmark);
+  bp.addButton('twentyFiveBtn', bp.twentyFiveBenchmark);
+  bp.addSampleRange();
   bp.addInfo();
 };