Source code
Revision control
Copy as Markdown
Other Tools
ResultsDashboard = Utilities.createClass(
function(options, testData)
{
this._iterationsSamplers = [];
this._options = options;
this._results = null;
if (testData) {
this._iterationsSamplers = testData;
this._processData();
}
}, {
push: function(suitesSamplers)
{
this._iterationsSamplers.push(suitesSamplers);
},
_processData: function()
{
this._results = {};
this._results[Strings.json.results.iterations] = [];
var iterationsScores = [];
this._iterationsSamplers.forEach(function(iteration, index) {
var testsScores = [];
var testsLowerBoundScores = [];
var testsUpperBoundScores = [];
var result = {};
this._results[Strings.json.results.iterations][index] = result;
var suitesResult = {};
result[Strings.json.results.tests] = suitesResult;
for (var suiteName in iteration) {
var suiteData = iteration[suiteName];
var suiteResult = {};
suitesResult[suiteName] = suiteResult;
for (var testName in suiteData) {
if (!suiteData[testName][Strings.json.result])
this.calculateScore(suiteData[testName]);
suiteResult[testName] = suiteData[testName][Strings.json.result];
delete suiteData[testName][Strings.json.result];
testsScores.push(suiteResult[testName][Strings.json.score]);
testsLowerBoundScores.push(suiteResult[testName][Strings.json.scoreLowerBound]);
testsUpperBoundScores.push(suiteResult[testName][Strings.json.scoreUpperBound]);
}
}
result[Strings.json.score] = Statistics.geometricMean(testsScores);
result[Strings.json.scoreLowerBound] = Statistics.geometricMean(testsLowerBoundScores);
result[Strings.json.scoreUpperBound] = Statistics.geometricMean(testsUpperBoundScores);
iterationsScores.push(result[Strings.json.score]);
}, this);
this._results[Strings.json.score] = Statistics.sampleMean(iterationsScores.length, iterationsScores.reduce(function(a, b) { return a + b; }));
this._results[Strings.json.scoreLowerBound] = this._results[Strings.json.results.iterations][0][Strings.json.scoreLowerBound];
this._results[Strings.json.scoreUpperBound] = this._results[Strings.json.results.iterations][0][Strings.json.scoreUpperBound];
},
calculateScore: function(data)
{
var result = {};
data[Strings.json.result] = result;
var samples = data[Strings.json.samples];
var desiredFrameLength = 1000/60;
if (this._options["controller"] == "ramp30")
desiredFrameLength = 1000/30;
function findRegression(series, profile) {
var minIndex = Math.round(.025 * series.length);
var maxIndex = Math.round(.975 * (series.length - 1));
var minComplexity = series.getFieldInDatum(minIndex, Strings.json.complexity);
var maxComplexity = series.getFieldInDatum(maxIndex, Strings.json.complexity);
if (Math.abs(maxComplexity - minComplexity) < 20 && maxIndex - minIndex < 20) {
minIndex = 0;
maxIndex = series.length - 1;
minComplexity = series.getFieldInDatum(minIndex, Strings.json.complexity);
maxComplexity = series.getFieldInDatum(maxIndex, Strings.json.complexity);
}
var complexityIndex = series.fieldMap[Strings.json.complexity];
var frameLengthIndex = series.fieldMap[Strings.json.frameLength];
var regressionOptions = { desiredFrameLength: desiredFrameLength };
if (profile)
regressionOptions.preferredProfile = profile;
return {
minComplexity: minComplexity,
maxComplexity: maxComplexity,
samples: series.slice(minIndex, maxIndex + 1),
regression: new Regression(
series.data,
function (data, i) { return data[i][complexityIndex]; },
function (data, i) { return data[i][frameLengthIndex]; },
minIndex, maxIndex, regressionOptions)
};
}
var complexitySamples;
// Convert these samples into SampleData objects if needed
[Strings.json.complexity, Strings.json.complexityAverage, Strings.json.controller].forEach(function(seriesName) {
var series = samples[seriesName];
if (series && !(series instanceof SampleData))
samples[seriesName] = new SampleData(series.fieldMap, series.data);
});
var isRampController = ["ramp", "ramp30"].indexOf(this._options["controller"]) != -1;
var predominantProfile = "";
if (isRampController) {
var profiles = {};
data[Strings.json.controller].forEach(function(regression) {
if (regression[Strings.json.regressions.profile]) {
var profile = regression[Strings.json.regressions.profile];
profiles[profile] = (profiles[profile] || 0) + 1;
}
});
var maxProfileCount = 0;
for (var profile in profiles) {
if (profiles[profile] > maxProfileCount) {
predominantProfile = profile;
maxProfileCount = profiles[profile];
}
}
}
[Strings.json.complexity, Strings.json.complexityAverage].forEach(function(seriesName) {
if (!(seriesName in samples))
return;
var regression = {};
result[seriesName] = regression;
var regressionResult = findRegression(samples[seriesName], predominantProfile);
if (seriesName == Strings.json.complexity)
complexitySamples = regressionResult.samples;
var calculation = regressionResult.regression;
regression[Strings.json.regressions.segment1] = [
[regressionResult.minComplexity, calculation.s1 + calculation.t1 * regressionResult.minComplexity],
[calculation.complexity, calculation.s1 + calculation.t1 * calculation.complexity]
];
regression[Strings.json.regressions.segment2] = [
[calculation.complexity, calculation.s2 + calculation.t2 * calculation.complexity],
[regressionResult.maxComplexity, calculation.s2 + calculation.t2 * regressionResult.maxComplexity]
];
regression[Strings.json.complexity] = calculation.complexity;
regression[Strings.json.measurements.stdev] = Math.sqrt(calculation.error / samples[seriesName].length);
});
if (isRampController) {
var timeComplexity = new Experiment;
data[Strings.json.controller].forEach(function(regression) {
timeComplexity.sample(regression[Strings.json.complexity]);
});
var experimentResult = {};
result[Strings.json.controller] = experimentResult;
experimentResult[Strings.json.score] = timeComplexity.mean();
experimentResult[Strings.json.measurements.average] = timeComplexity.mean();
experimentResult[Strings.json.measurements.stdev] = timeComplexity.standardDeviation();
experimentResult[Strings.json.measurements.percent] = timeComplexity.percentage();
const bootstrapIterations = 2500;
var bootstrapResult = Regression.bootstrap(complexitySamples.data, bootstrapIterations, function(resampleData) {
var complexityIndex = complexitySamples.fieldMap[Strings.json.complexity];
resampleData.sort(function(a, b) {
return a[complexityIndex] - b[complexityIndex];
});
var resample = new SampleData(complexitySamples.fieldMap, resampleData);
var regressionResult = findRegression(resample, predominantProfile);
return regressionResult.regression.complexity;
}, .8);
result[Strings.json.complexity][Strings.json.bootstrap] = bootstrapResult;
result[Strings.json.score] = bootstrapResult.median;
result[Strings.json.scoreLowerBound] = bootstrapResult.confidenceLow;
result[Strings.json.scoreUpperBound] = bootstrapResult.confidenceHigh;
} else {
var marks = data[Strings.json.marks];
var samplingStartIndex = 0, samplingEndIndex = -1;
if (Strings.json.samplingStartTimeOffset in marks)
samplingStartIndex = marks[Strings.json.samplingStartTimeOffset].index;
if (Strings.json.samplingEndTimeOffset in marks)
samplingEndIndex = marks[Strings.json.samplingEndTimeOffset].index;
var averageComplexity = new Experiment;
var averageFrameLength = new Experiment;
var controllerSamples = samples[Strings.json.controller];
controllerSamples.forEach(function (sample, i) {
if (i >= samplingStartIndex && (samplingEndIndex == -1 || i < samplingEndIndex)) {
averageComplexity.sample(controllerSamples.getFieldInDatum(sample, Strings.json.complexity));
var smoothedFrameLength = controllerSamples.getFieldInDatum(sample, Strings.json.smoothedFrameLength);
if (smoothedFrameLength && smoothedFrameLength != -1)
averageFrameLength.sample(smoothedFrameLength);
}
});
var experimentResult = {};
result[Strings.json.controller] = experimentResult;
experimentResult[Strings.json.measurements.average] = averageComplexity.mean();
experimentResult[Strings.json.measurements.concern] = averageComplexity.concern(Experiment.defaults.CONCERN);
experimentResult[Strings.json.measurements.stdev] = averageComplexity.standardDeviation();
experimentResult[Strings.json.measurements.percent] = averageComplexity.percentage();
experimentResult = {};
result[Strings.json.frameLength] = experimentResult;
experimentResult[Strings.json.measurements.average] = 1000 / averageFrameLength.mean();
experimentResult[Strings.json.measurements.concern] = averageFrameLength.concern(Experiment.defaults.CONCERN);
experimentResult[Strings.json.measurements.stdev] = averageFrameLength.standardDeviation();
experimentResult[Strings.json.measurements.percent] = averageFrameLength.percentage();
result[Strings.json.score] = averageComplexity.score(Experiment.defaults.CONCERN);
result[Strings.json.scoreLowerBound] = result[Strings.json.score] - averageFrameLength.standardDeviation();
result[Strings.json.scoreUpperBound] = result[Strings.json.score] + averageFrameLength.standardDeviation();
}
},
get data()
{
return this._iterationsSamplers;
},
get results()
{
if (this._results)
return this._results[Strings.json.results.iterations];
this._processData();
return this._results[Strings.json.results.iterations];
},
get options()
{
return this._options;
},
_getResultsProperty: function(property)
{
if (this._results)
return this._results[property];
this._processData();
return this._results[property];
},
get score()
{
return this._getResultsProperty(Strings.json.score);
},
get scoreLowerBound()
{
return this._getResultsProperty(Strings.json.scoreLowerBound);
},
get scoreUpperBound()
{
return this._getResultsProperty(Strings.json.scoreUpperBound);
}
});
ResultsTable = Utilities.createClass(
function(element, headers)
{
this.element = element;
this._headers = headers;
this._flattenedHeaders = [];
this._headers.forEach(function(header) {
if (header.disabled)
return;
if (header.children)
this._flattenedHeaders = this._flattenedHeaders.concat(header.children);
else
this._flattenedHeaders.push(header);
}, this);
this._flattenedHeaders = this._flattenedHeaders.filter(function (header) {
return !header.disabled;
});
this.clear();
}, {
clear: function()
{
this.element.textContent = "";
},
_addHeader: function()
{
var thead = Utilities.createElement("thead", {}, this.element);
var row = Utilities.createElement("tr", {}, thead);
this._headers.forEach(function (header) {
if (header.disabled)
return;
var th = Utilities.createElement("th", {}, row);
if (header.title != Strings.text.graph)
th.innerHTML = header.title;
if (header.children)
th.colSpan = header.children.length;
});
},
_addBody: function()
{
this.tbody = Utilities.createElement("tbody", {}, this.element);
},
_addEmptyRow: function()
{
var row = Utilities.createElement("tr", {}, this.tbody);
this._flattenedHeaders.forEach(function (header) {
return Utilities.createElement("td", { class: "suites-separator" }, row);
});
},
_addTest: function(testName, testResult, options)
{
var row = Utilities.createElement("tr", {}, this.tbody);
this._flattenedHeaders.forEach(function (header) {
var td = Utilities.createElement("td", {}, row);
if (header.text == Strings.text.testName) {
td.textContent = testName;
} else if (typeof header.text == "string") {
var data = testResult[header.text];
if (typeof data == "number")
data = data.toFixed(2);
td.innerHTML = data;
} else
td.innerHTML = header.text(testResult);
}, this);
},
_addIteration: function(iterationResult, iterationData, options)
{
var testsResults = iterationResult[Strings.json.results.tests];
for (var suiteName in testsResults) {
this._addEmptyRow();
var suiteResult = testsResults[suiteName];
var suiteData = iterationData[suiteName];
for (var testName in suiteResult)
this._addTest(testName, suiteResult[testName], options, suiteData[testName]);
}
},
showIterations: function(dashboard)
{
this.clear();
this._addHeader();
this._addBody();
var iterationsResults = dashboard.results;
iterationsResults.forEach(function(iterationResult, index) {
this._addIteration(iterationResult, dashboard.data[index], dashboard.options);
}, this);
}
});
window.benchmarkRunnerClient = {
iterationCount: 1,
options: null,
results: null,
initialize: function(suites, options)
{
this.options = options;
},
willStartFirstIteration: function()
{
this.results = new ResultsDashboard(this.options);
},
didRunSuites: function(suitesSamplers)
{
this.results.push(suitesSamplers);
},
didRunTest: function(testData)
{
this.results.calculateScore(testData);
},
didFinishLastIteration: function()
{
benchmarkController.showResults();
}
};
window.sectionsManager =
{
showSection: function(sectionIdentifier, pushState)
{
var sections = document.querySelectorAll("main > section");
for (var i = 0; i < sections.length; ++i) {
document.body.classList.remove("showing-" + sections[i].id);
}
document.body.classList.add("showing-" + sectionIdentifier);
var currentSectionElement = document.querySelector("section.selected");
console.assert(currentSectionElement);
var newSectionElement = document.getElementById(sectionIdentifier);
console.assert(newSectionElement);
currentSectionElement.classList.remove("selected");
newSectionElement.classList.add("selected");
if (pushState)
history.pushState({section: sectionIdentifier}, document.title);
},
setSectionScore: function(sectionIdentifier, score, confidence)
{
document.querySelector("#" + sectionIdentifier + " .score").textContent = score;
if (confidence)
document.querySelector("#" + sectionIdentifier + " .confidence").textContent = confidence;
},
populateTable: function(tableIdentifier, headers, dashboard)
{
var table = new ResultsTable(document.getElementById(tableIdentifier), headers);
table.showIterations(dashboard);
}
};
window.benchmarkController = {
initialize: function()
{
benchmarkController.addOrientationListenerIfNecessary();
},
determineCanvasSize: function() {
var match = window.matchMedia("(max-device-width: 760px)");
if (match.matches) {
document.body.classList.add("small");
return;
}
match = window.matchMedia("(max-device-width: 1600px)");
if (match.matches) {
document.body.classList.add("medium");
return;
}
match = window.matchMedia("(max-width: 1600px)");
if (match.matches) {
document.body.classList.add("medium");
return;
}
document.body.classList.add("large");
},
addOrientationListenerIfNecessary: function() {
if (!("orientation" in window))
return;
this.orientationQuery = window.matchMedia("(orientation: landscape)");
this._orientationChanged(this.orientationQuery);
this.orientationQuery.addListener(this._orientationChanged);
},
_orientationChanged: function(match)
{
benchmarkController.isInLandscapeOrientation = match.matches;
if (match.matches)
document.querySelector(".start-benchmark p").classList.add("hidden");
else
document.querySelector(".start-benchmark p").classList.remove("hidden");
benchmarkController.updateStartButtonState();
},
updateStartButtonState: function()
{
document.getElementById("run-benchmark").disabled = !this.isInLandscapeOrientation;
},
_startBenchmark: function(suites, options, frameContainerID)
{
benchmarkController.determineCanvasSize();
var configuration = document.body.className.match(/small|medium|large/);
if (configuration)
options[Strings.json.configuration] = configuration[0];
benchmarkRunnerClient.initialize(suites, options);
var frameContainer = document.getElementById(frameContainerID);
var runner = new BenchmarkRunner(suites, frameContainer, benchmarkRunnerClient);
runner.runMultipleIterations();
sectionsManager.showSection("test-container");
},
startBenchmark: function()
{
var options = {
"test-interval": 30,
"display": "minimal",
"tiles": "big",
"controller": "ramp",
"kalman-process-error": 1,
"kalman-measurement-error": 4,
"time-measurement": "performance"
};
this._startBenchmark(Suites, options, "test-container");
},
showResults: function()
{
if (!this.addedKeyEvent) {
document.addEventListener("keypress", this.handleKeyPress, false);
this.addedKeyEvent = true;
}
var dashboard = benchmarkRunnerClient.results;
var score = dashboard.score;
var confidence = "±" + (Statistics.largestDeviationPercentage(dashboard.scoreLowerBound, score, dashboard.scoreUpperBound) * 100).toFixed(2) + "%";
sectionsManager.setSectionScore("results", score.toFixed(2), confidence);
sectionsManager.populateTable("results-header", Headers.testName, dashboard);
sectionsManager.populateTable("results-score", Headers.score, dashboard);
sectionsManager.populateTable("results-data", Headers.details, dashboard);
sectionsManager.showSection("results", true);
},
handleKeyPress: function(event)
{
switch (event.charCode)
{
case 27: // esc
benchmarkController.hideDebugInfo();
break;
case 106: // j
benchmarkController.showDebugInfo();
break;
case 115: // s
benchmarkController.selectResults(event.target);
break;
}
},
hideDebugInfo: function()
{
var overlay = document.getElementById("overlay");
if (!overlay)
return;
document.body.removeChild(overlay);
},
showDebugInfo: function()
{
if (document.getElementById("overlay"))
return;
var overlay = Utilities.createElement("div", {
id: "overlay"
}, document.body);
var container = Utilities.createElement("div", {}, overlay);
var header = Utilities.createElement("h3", {}, container);
header.textContent = "Debug Output";
var data = Utilities.createElement("div", {}, container);
data.textContent = "Please wait...";
setTimeout(function() {
var output = {
options: benchmarkRunnerClient.results.options,
data: benchmarkRunnerClient.results.data
};
data.textContent = JSON.stringify(output, function(key, value) {
if (typeof value === 'number')
return Utilities.toFixedNumber(value, 3);
return value;
}, 1);
}, 0);
data.onclick = function() {
var selection = window.getSelection();
selection.removeAllRanges();
var range = document.createRange();
range.selectNode(data);
selection.addRange(range);
};
var button = Utilities.createElement("button", {}, container);
button.textContent = "Done";
button.onclick = function() {
benchmarkController.hideDebugInfo();
};
},
selectResults: function(target)
{
target.selectRange = ((target.selectRange || 0) + 1) % 3;
var selection = window.getSelection();
selection.removeAllRanges();
var range = document.createRange();
switch (target.selectRange) {
case 0: {
range.selectNode(document.getElementById("results-score"));
break;
}
case 1: {
range.setStart(document.querySelector("#results .score"), 0);
range.setEndAfter(document.querySelector("#results-score"), 0);
break;
}
case 2: {
range.selectNodeContents(document.querySelector("#results .score"));
break;
}
}
selection.addRange(range);
}
};
window.addEventListener("load", function() { benchmarkController.initialize(); });