Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(152)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: tools/telemetry/support/html_output/results-template.html

Issue 1523743002: [Telemetry] 'Time'/'Memory' buttons added to results.html dynamically for available result types. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Code review updates Created 5 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: tools/telemetry/support/html_output/results-template.html
diff --git a/tools/telemetry/support/html_output/results-template.html b/tools/telemetry/support/html_output/results-template.html
index 3801aded5dca0a034389a590b4fabcd265dd5eb1..b7359b242e5bda1cfceb5d61159dfdaa4cac546d 100644
--- a/tools/telemetry/support/html_output/results-template.html
+++ b/tools/telemetry/support/html_output/results-template.html
@@ -249,7 +249,7 @@ td.missingReference {
</head>
<body onload="init()">
<div style="padding: 0 10px; white-space: nowrap;">
-Result <span id="time-memory" class="checkbox"><span class="checked">Time</span><span>Memory</span></span>
+Result <span id="time-memory" class="checkbox"></span>
Reference <span id="reference" class="checkbox"></span>
Style <span id="scatter-line" class="checkbox"><span class="checked">Scatter</span><span>Line</span></span>
<span class="checkbox"><span class="checked" id="undelete">Undelete</span></span><br>
@@ -314,13 +314,13 @@ function TestResult(metric, values, associatedRun, std, degreesOfFreedom) {
values = [];
}
- this.test = function () { return metric; }
- this.values = function () { return values.map(function (value) { return metric.scalingFactor() * value; }); }
- this.unscaledMean = function () { return Statistics.sum(values) / values.length; }
- this.mean = function () { return metric.scalingFactor() * this.unscaledMean(); }
- this.min = function () { return metric.scalingFactor() * Statistics.min(values); }
- this.max = function () { return metric.scalingFactor() * Statistics.max(values); }
- this.confidenceIntervalDelta = function () {
+ this.test = function() { return metric; }
+ this.values = function() { return values.map(function(value) { return metric.scalingFactor() * value; }); }
+ this.unscaledMean = function() { return Statistics.sum(values) / values.length; }
+ this.mean = function() { return metric.scalingFactor() * this.unscaledMean(); }
+ this.min = function() { return metric.scalingFactor() * Statistics.min(values); }
+ this.max = function() { return metric.scalingFactor() * Statistics.max(values); }
+ this.confidenceIntervalDelta = function() {
if (std !== undefined) {
return metric.scalingFactor() * Statistics.confidenceIntervalDeltaFromStd(0.95, values.length,
std, degreesOfFreedom);
@@ -328,26 +328,26 @@ function TestResult(metric, values, associatedRun, std, degreesOfFreedom) {
return metric.scalingFactor() * Statistics.confidenceIntervalDelta(0.95, values.length,
Statistics.sum(values), Statistics.squareSum(values));
}
- this.confidenceIntervalDeltaRatio = function () { return this.confidenceIntervalDelta() / this.mean(); }
+ this.confidenceIntervalDeltaRatio = function() { return this.confidenceIntervalDelta() / this.mean(); }
this.percentDifference = function(other) {
if (other === undefined) {
return undefined;
}
return (other.unscaledMean() - this.unscaledMean()) / this.unscaledMean();
}
- this.isStatisticallySignificant = function (other) {
+ this.isStatisticallySignificant = function(other) {
if (other === undefined) {
return false;
}
var diff = Math.abs(other.mean() - this.mean());
return diff > this.confidenceIntervalDelta() && diff > other.confidenceIntervalDelta();
}
- this.run = function () { return associatedRun; }
+ this.run = function() { return associatedRun; }
}
function TestRun(entry) {
this.id = function() { return entry['buildTime'].replace(/[:.-]/g,''); }
- this.label = function () {
+ this.label = function() {
if (labelKey in localStorage)
return localStorage[labelKey];
return entry['label'];
@@ -390,9 +390,9 @@ function PerfTestMetric(name, metric, unit, isImportant) {
}
}
- this.name = function () { return name + ':' + metric; }
+ this.name = function() { return name + ':' + metric; }
this.isImportant = isImportant;
- this.isMemoryTest = function () {
+ this.isMemoryTest = function() {
return (unit == 'kb' ||
unit == 'KB' ||
unit == 'MB' ||
@@ -400,21 +400,21 @@ function PerfTestMetric(name, metric, unit, isImportant) {
unit == 'count' ||
!metric.indexOf('V8.'));
}
- this.addResult = function (newResult) {
+ this.addResult = function(newResult) {
testResults.push(newResult);
cachedUnit = null;
cachedScalingFactor = null;
}
- this.results = function () { return testResults; }
+ this.results = function() { return testResults; }
this.scalingFactor = function() {
computeScalingFactorIfNeeded();
return cachedScalingFactor;
}
- this.unit = function () {
+ this.unit = function() {
computeScalingFactorIfNeeded();
return cachedUnit;
}
- this.biggerIsBetter = function () {
+ this.biggerIsBetter = function() {
if (window.unitToBiggerIsBetter == undefined) {
window.unitToBiggerIsBetter = {};
var units = JSON.parse(document.getElementById('units-json').textContent);
@@ -531,7 +531,7 @@ function createPlot(container, test, useLargeLinePlots) {
attachLinePlots(test, section.children('.line-plots'), useLargeLinePlots);
var tooltip = section.children('.tooltip');
- plotContainer.bind('plothover', function (event, position, item) {
+ plotContainer.bind('plothover', function(event, position, item) {
if (item) {
var postfix = item.series.id ? ' (' + item.series.id + ')' : '';
tooltip.html(item.datapoint[1].toPrecision(4) + postfix);
@@ -541,10 +541,10 @@ function createPlot(container, test, useLargeLinePlots) {
} else
tooltip.hide();
});
- plotContainer.mouseout(function () {
+ plotContainer.mouseout(function() {
tooltip.hide();
});
- plotContainer.click(function (event) {
+ plotContainer.click(function(event) {
event.preventDefault();
minIsZero = !minIsZero;
attachPlot(test, plotContainer, minIsZero);
@@ -587,7 +587,7 @@ function attachLinePlots(test, container, useLargeLinePlots) {
xaxis: {min: -0.5, max: values.length - 0.5},
points: {show: (values.length < 2) ? true : false}});
}
- $.plot(container.children().last(), [values.map(function (value, index) { return [index, value]; })], options);
+ $.plot(container.children().last(), [values.map(function(value, index) { return [index, value]; })], options);
}
if (!attachedPlot)
container.children().remove();
@@ -647,23 +647,23 @@ function attachLinePlotLabels(test, container) {
function attachPlot(test, plotContainer, minIsZero) {
var results = test.results();
- var values = results.reduce(function (values, result, index) {
+ var values = results.reduce(function(values, result, index) {
var newValues = result.values();
- return newValues ? values.concat(newValues.map(function (value) { return [index, value]; })) : values;
+ return newValues ? values.concat(newValues.map(function(value) { return [index, value]; })) : values;
}, []);
var plotData = [$.extend(true, {}, subpointsPlotOptions, {data: values})];
- plotData.push({id: '&mu;', data: results.map(function (result, index) { return [index, result.mean()]; }), color: plotColor});
+ plotData.push({id: '&mu;', data: results.map(function(result, index) { return [index, result.mean()]; }), color: plotColor});
- var overallMax = Statistics.max(results.map(function (result, index) { return result.max(); }));
- var overallMin = Statistics.min(results.map(function (result, index) { return result.min(); }));
+ var overallMax = Statistics.max(results.map(function(result, index) { return result.max(); }));
+ var overallMin = Statistics.min(results.map(function(result, index) { return result.min(); }));
var margin = (overallMax - overallMin) * 0.1;
var currentPlotOptions = $.extend(true, {}, mainPlotOptions, {yaxis: {
min: minIsZero ? 0 : overallMin - margin,
max: minIsZero ? overallMax * 1.1 : overallMax + margin}});
currentPlotOptions.xaxis.max = results.length - 0.5;
- currentPlotOptions.xaxis.ticks = results.map(function (result, index) { return [index, result.run().label()]; });
+ currentPlotOptions.xaxis.ticks = results.map(function(result, index) { return [index, result.run().label()]; });
$.plot(plotContainer, plotData, currentPlotOptions);
}
@@ -690,11 +690,70 @@ function setUpSortClicks(runs)
});
}
+function buildButtonHTMLFromButtonNames(buttonNames, activeButton) {
petrcermak 2015/12/17 11:17:15 nit: s/activeButton/activeButtonName/ (this way it
petrcermak 2015/12/17 11:17:15 This function requires too much work on the part o
picksi 2015/12/21 17:01:11 Done.
+ var buttonHTML = "";
+ for (var button in buttonNames) {
petrcermak 2015/12/17 11:17:15 You should *never* iterate over an array in JS lik
picksi 2015/12/21 17:01:12 I find your version a little dense, but I've used
+ var buttonName = buttonNames[button];
+ var classType = buttonName === activeButton ? 'class=checked' : '';
petrcermak 2015/12/17 11:17:15 supernit: I think "classAttribute" is more precise
picksi 2015/12/21 17:01:11 Done.
+ buttonHTML += '<span ' + classType + '>' + buttonName + '</span>';
petrcermak 2015/12/17 11:17:15 nit: This will result in "<span >" for inactive bu
picksi 2015/12/21 17:01:11 Done.
+ }
+ return buttonHTML;
+}
+
+function TestTypeSelector(tests) {
+ this.buttonNames = this.generateButtonHTML(tests);
petrcermak 2015/12/17 11:17:15 This should be called "testTypeNames". You use its
picksi 2015/12/21 17:01:11 Done.
+}
+
+TestTypeSelector.prototype = {
+ recognizers: {
petrcermak 2015/12/17 11:17:15 I've just realized that you do modify the list of
picksi 2015/12/21 17:01:12 Done.
+ 'Time': function(test) { return test.isMemoryTest(); },
petrcermak 2015/12/17 11:17:15 style: It's usually discouraged to vertically alig
picksi 2015/12/21 17:01:12 Done.
+ 'Memory': function(test) { return !test.isMemoryTest(); }
+ },
+
petrcermak 2015/12/17 11:17:15 Please change this to a setter: set testTypeName(
picksi 2015/12/21 17:01:12 Done.
+ setTestTypeByName: function(testType) {
+ this.recognizerDelegate = this.recognizers[testType];
+ },
+
+ shouldShowTest: function(test) {
petrcermak 2015/12/17 11:17:15 This function seems to be an unnecessary proxy to
picksi 2015/12/21 17:01:12 This is cool! JS is awesome in its weirdness.
+ return this.recognizerDelegate(test);
+ },
+
+ generateButtonHTML: function(tests) {
petrcermak 2015/12/17 11:17:15 This function does not generate HTML code anymore,
picksi 2015/12/21 17:01:11 D'Oh. Done!
+ var buttonNames = [];
+
+ for (var buttonName in this.recognizers) {
+ this.setTestTypeByName(buttonName)
+ for (var testName in tests) {
+ var test = tests[testName];
+ if (this.shouldShowTest(test)) {
+ // This is a test that is recognized so add a checkbox for it.
+ buttonNames.push(buttonName);
+ break;
+ }
+ }
+ }
+
+ if (buttonNames.length == 0) {
petrcermak 2015/12/17 11:17:15 nit: s/==/===/
+ // Add 'no results' button if there are no results
+ var newButtonName = 'No Results';
+ this.recognizers[newButtonName] = function(){return false;};
petrcermak 2015/12/17 11:17:15 nit: spaces in function
picksi 2015/12/21 17:01:12 Done.
+ buttonNames.push(newButtonName);
+ } else if (buttonNames.length > 1) {
+ // If we have more than one test add an 'all' button.
+ var newButtonName = 'All';
+ this.recognizers[newButtonName] = function(){return true;};
petrcermak 2015/12/17 11:17:15 ditto
picksi 2015/12/21 17:01:12 Done.
+ buttonNames.push(newButtonName);
+ }
+
+ return buttonNames;
+ }
+};
+
var topLevelRows;
var allTableRows;
-function createTable(tests, runs, shouldIgnoreMemory, referenceIndex, useLargeLinePlots) {
- var resultHeaders = runs.map(function (run, index) {
+function displayTable(tests, runs, testTypeSelector, referenceIndex, useLargeLinePlots) {
+ var resultHeaders = runs.map(function(run, index) {
var header = '<th id="' + run.id() + '" ' +
'colspan=2 ' +
'title="' + run.description() + '">' +
@@ -749,10 +808,9 @@ function createTable(tests, runs, shouldIgnoreMemory, referenceIndex, useLargeLi
allTableRows = [];
testNames.forEach(function(testName) {
var test = tests[testName];
- if (test.isMemoryTest() === shouldIgnoreMemory) {
- return;
+ if (testTypeSelector.shouldShowTest(test)) {
+ allTableRows.push(new TableRow(runs, test, referenceIndex, useLargeLinePlots));
}
- allTableRows.push(new TableRow(runs, test, referenceIndex, useLargeLinePlots));
});
// Build a list of top level rows with attached children
@@ -828,10 +886,10 @@ function createTable(tests, runs, shouldIgnoreMemory, referenceIndex, useLargeLi
location.reload();
}
});
- $('#labelEditor').click(function (event) {
+ $('#labelEditor').click(function(event) {
event.stopPropagation();
});
- $('#labelEditor').mousedown(function (event) {
+ $('#labelEditor').mousedown(function(event) {
event.stopPropagation();
});
$('#labelEditor').select();
@@ -1343,7 +1401,7 @@ function init() {
var runs = [];
var metrics = {};
var deletedRunsById = {};
- $.each(JSON.parse(document.getElementById('results-json').textContent), function (index, entry) {
+ $.each(JSON.parse(document.getElementById('results-json').textContent), function(index, entry) {
var run = new TestRun(entry);
if (run.isHidden()) {
deletedRunsById[run.id()] = run;
@@ -1375,32 +1433,37 @@ function init() {
});
var useLargeLinePlots = false;
- var shouldIgnoreMemory= true;
var referenceIndex = 0;
- createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeLinePlots);
-
- $('#time-memory').bind('change', function (event, checkedElement) {
- shouldIgnoreMemory = checkedElement.textContent == 'Time';
- createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeLinePlots);
- });
-
- $('#scatter-line').bind('change', function (event, checkedElement) {
+ $('#scatter-line').bind('change', function(event, checkedElement) {
useLargeLinePlots = checkedElement.textContent == 'Line';
petrcermak 2015/12/17 11:17:15 You're creating a global variable here. Please pre
picksi 2015/12/21 17:01:11 Yes, this is nasty and is part of the original cod
- createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeLinePlots);
+ displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLinePlots);
});
- runs.map(function (run, index) {
+ runs.map(function(run, index) {
$('#reference').append('<span value="' + index + '"' + (index == referenceIndex ? ' class="checked"' : '') + ' title="' + run.description() + '">' + run.label() + '</span>');
})
- $('#reference').bind('change', function (event, checkedElement) {
+ $('#time-memory').bind('change', function(event, checkedElement) {
+ testTypeSelector.setTestTypeByName(checkedElement.textContent);
+ displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLinePlots);
+ });
+
+ $('#reference').bind('change', function(event, checkedElement) {
referenceIndex = parseInt(checkedElement.getAttribute('value'));
petrcermak 2015/12/17 11:17:15 Again, needs 'var'
picksi 2015/12/21 17:01:12 See comment about useLargeLineplots.
- createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeLinePlots);
+ displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLinePlots);
});
- $('.checkbox').each(function (index, checkbox) {
- $(checkbox).children('span').click(function (event) {
+ var testTypeSelector = new TestTypeSelector(metrics);
petrcermak 2015/12/17 11:17:15 I suggest that you move the whole initialization o
picksi 2015/12/21 17:01:11 Done.
+ var initialTestName = testTypeSelector.buttonNames[0];
petrcermak 2015/12/17 11:17:15 I can see that there is a certain benefit in setti
picksi 2015/12/21 17:01:12 OK. I've done a 360 on this. I've moved the HTML g
+ var buttonHTML = buildButtonHTMLFromButtonNames(testTypeSelector.buttonNames, initialTestName);
+ $('#time-memory').append(buttonHTML);
+
+ testTypeSelector.setTestTypeByName(initialTestName);
+ displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLinePlots);
+
+ $('.checkbox').each(function(index, checkbox) {
+ $(checkbox).children('span').click(function(event) {
if ($(this).hasClass('checked'))
return;
$(checkbox).children('span').removeClass('checked');
@@ -1414,7 +1477,7 @@ function init() {
if (runToUndelete) {
$('#undelete').html('Undelete ' + runToUndelete.label());
$('#undelete').attr('title', runToUndelete.description());
- $('#undelete').click(function (event) {
+ $('#undelete').click(function(event) {
runToUndelete.show();
undeleteManager.undeleteMostRecent();
location.reload();
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698