<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[196792] trunk/Websites/perf.webkit.org</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/196792">196792</a></dd>
<dt>Author</dt> <dd>rniwa@webkit.org</dd>
<dt>Date</dt> <dd>2016-02-18 18:44:34 -0800 (Thu, 18 Feb 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>The rows in the analysis results table should be expandable
https://bugs.webkit.org/show_bug.cgi?id=154427
Reviewed by Chris Dumez.
Added "(Expand)" link between rows that have hidden points. Upon click it inserts the hidden rows.
We insert around five rows at a time when there are hundreds of hidden points but we also avoid leaving
behind expandable rows of less than two rows.
Also fixed a bug in CustomizableTestGroupForm that getElementsById would throw in the shipping Safari
because getElementsById doesn't exist on Element.prototype by using class name instead.
* public/v3/components/analysis-results-viewer.js:
(AnalysisResultsViewer):
(AnalysisResultsViewer.prototype.setCurrentTestGroup): Removed superfluous call to render().
(AnalysisResultsViewer.prototype.setPoints): Always show the start and the end points.
(AnalysisResultsViewer.prototype.buildRowGroups):
(AnalysisResultsViewer.prototype._buildRowsForPointsAndTestGroups): Add an instance of ExpandableRow which
shows a "(Expand)" link to show hidden rows here.
(AnalysisResultsViewer.prototype._expandBetween): Added. Expands rows between two points.
(AnalysisResultsViewer.cssTemplate): Added rules for "(Expand)" links.
(AnalysisResultsViewer.ExpandableRow): Added.
(AnalysisResultsViewer.ExpandableRow.prototype.resultContent): Added. Overrides what's in the results column.
(AnalysisResultsViewer.ExpandableRow.prototype.heading): Added. Generates "(Expand)" link.
* public/v3/components/customizable-test-group-form.js:
(CustomizableTestGroupForm.prototype._computeRootSetMap): Use getElementsByClassName instead of
getElementById.
(CustomizableTestGroupForm.prototype._classForLabelAndRepository): Renamed from _idForLabelAndRepository.
(CustomizableTestGroupForm._constructRevisionRadioButtons): Set class name instead of id.
* public/v3/components/results-table.js:
(ResultsTable.prototype.render): Don't generate radio buttons to select a row when root set is missing;
e.g. for rows that show "(Expand)" links.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebsitesperfwebkitorgChangeLog">trunk/Websites/perf.webkit.org/ChangeLog</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3componentsanalysisresultsviewerjs">trunk/Websites/perf.webkit.org/public/v3/components/analysis-results-viewer.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3componentscustomizabletestgroupformjs">trunk/Websites/perf.webkit.org/public/v3/components/customizable-test-group-form.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3componentsresultstablejs">trunk/Websites/perf.webkit.org/public/v3/components/results-table.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebsitesperfwebkitorgChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/ChangeLog (196791 => 196792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/ChangeLog 2016-02-19 01:14:07 UTC (rev 196791)
+++ trunk/Websites/perf.webkit.org/ChangeLog 2016-02-19 02:44:34 UTC (rev 196792)
</span><span class="lines">@@ -1,5 +1,43 @@
</span><span class="cx"> 2016-02-18 Ryosuke Niwa <rniwa@webkit.org>
</span><span class="cx">
</span><ins>+ The rows in the analysis results table should be expandable
+ https://bugs.webkit.org/show_bug.cgi?id=154427
+
+ Reviewed by Chris Dumez.
+
+ Added "(Expand)" link between rows that have hidden points. Upon click it inserts the hidden rows.
+
+ We insert around five rows at a time when there are hundreds of hidden points but we also avoid leaving
+ behind expandable rows of less than two rows.
+
+ Also fixed a bug in CustomizableTestGroupForm that getElementsById would throw in the shipping Safari
+ because getElementsById doesn't exist on Element.prototype by using class name instead.
+
+ * public/v3/components/analysis-results-viewer.js:
+ (AnalysisResultsViewer):
+ (AnalysisResultsViewer.prototype.setCurrentTestGroup): Removed superfluous call to render().
+ (AnalysisResultsViewer.prototype.setPoints): Always show the start and the end points.
+ (AnalysisResultsViewer.prototype.buildRowGroups):
+ (AnalysisResultsViewer.prototype._buildRowsForPointsAndTestGroups): Add an instance of ExpandableRow which
+ shows a "(Expand)" link to show hidden rows here.
+ (AnalysisResultsViewer.prototype._expandBetween): Added. Expands rows between two points.
+ (AnalysisResultsViewer.cssTemplate): Added rules for "(Expand)" links.
+ (AnalysisResultsViewer.ExpandableRow): Added.
+ (AnalysisResultsViewer.ExpandableRow.prototype.resultContent): Added. Overrides what's in the results column.
+ (AnalysisResultsViewer.ExpandableRow.prototype.heading): Added. Generates "(Expand)" link.
+
+ * public/v3/components/customizable-test-group-form.js:
+ (CustomizableTestGroupForm.prototype._computeRootSetMap): Use getElementsByClassName instead of
+ getElementById.
+ (CustomizableTestGroupForm.prototype._classForLabelAndRepository): Renamed from _idForLabelAndRepository.
+ (CustomizableTestGroupForm._constructRevisionRadioButtons): Set class name instead of id.
+
+ * public/v3/components/results-table.js:
+ (ResultsTable.prototype.render): Don't generate radio buttons to select a row when root set is missing;
+ e.g. for rows that show "(Expand)" links.
+
+2016-02-18 Ryosuke Niwa <rniwa@webkit.org>
+
</ins><span class="cx"> Statistically significant A/B testing results should be color coded in details view
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=154414
</span><span class="cx">
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3componentsanalysisresultsviewerjs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/components/analysis-results-viewer.js (196791 => 196792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/components/analysis-results-viewer.js 2016-02-19 01:14:07 UTC (rev 196791)
+++ trunk/Websites/perf.webkit.org/public/v3/components/analysis-results-viewer.js 2016-02-19 02:44:34 UTC (rev 196792)
</span><span class="lines">@@ -11,6 +11,7 @@
</span><span class="cx"> this._shouldRenderTable = true;
</span><span class="cx"> this._additionalHeading = null;
</span><span class="cx"> this._testGroupCallback = null;
</span><ins>+ this._expandedPoints = new Set;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> setTestGroupCallback(callback) { this._testGroupCallback = callback; }
</span><span class="lines">@@ -18,7 +19,6 @@
</span><span class="cx"> setCurrentTestGroup(testGroup)
</span><span class="cx"> {
</span><span class="cx"> this._currentTestGroup = testGroup;
</span><del>- this.render();
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> setPoints(startPoint, endPoint)
</span><span class="lines">@@ -26,6 +26,9 @@
</span><span class="cx"> this._startPoint = startPoint;
</span><span class="cx"> this._endPoint = endPoint;
</span><span class="cx"> this._shouldRenderTable = true;
</span><ins>+ this._expandedPoints.clear();
+ this._expandedPoints.add(startPoint);
+ this._expandedPoints.add(endPoint);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> setTestGroups(testGroups)
</span><span class="lines">@@ -91,6 +94,11 @@
</span><span class="cx"> var self = this;
</span><span class="cx"> rowList.forEach(function (row, rowIndex) {
</span><span class="cx"> var matchingRootSets = rowToMatchingRootSets.get(row);
</span><ins>+ if (!matchingRootSets) {
+ console.assert(row instanceof AnalysisResultsViewer.ExpandableRow);
+ return;
+ }
+
</ins><span class="cx"> for (var entry of matchingRootSets) {
</span><span class="cx"> var testGroup = entry.testGroup();
</span><span class="cx">
</span><span class="lines">@@ -144,6 +152,7 @@
</span><span class="cx"> var pointAfterEnd = this._endPoint.series.nextPoint(this._endPoint);
</span><span class="cx"> var rootSetsWithPoints = new Set;
</span><span class="cx"> var pointIndex = 0;
</span><ins>+ var previousPoint;
</ins><span class="cx"> for (var point = this._startPoint; point && point != pointAfterEnd; point = point.series.nextPoint(point), pointIndex++) {
</span><span class="cx"> var rootSetInPoint = point.rootSet();
</span><span class="cx"> var matchingRootSets = [];
</span><span class="lines">@@ -154,12 +163,17 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if (!matchingRootSets.length && point != this._startPoint && point != this._endPoint)
</del><ins>+ var hasMatchingTestGroup = !!matchingRootSets.length;
+ if (!hasMatchingTestGroup && !this._expandedPoints.has(point))
</ins><span class="cx"> continue;
</span><span class="cx">
</span><span class="cx"> var row = new ResultsTableRow(pointIndex.toString(), rootSetInPoint);
</span><span class="cx"> row.setResult(point);
</span><span class="cx">
</span><ins>+ if (previousPoint && previousPoint.series.nextPoint(previousPoint) != point)
+ rowList.push(new AnalysisResultsViewer.ExpandableRow(this._expandBetween.bind(this, previousPoint, point)));
+ previousPoint = point;
+
</ins><span class="cx"> rowToMatchingRootSets.set(row, matchingRootSets);
</span><span class="cx"> rowList.push(row);
</span><span class="cx"> }
</span><span class="lines">@@ -170,7 +184,7 @@
</span><span class="cx">
</span><span class="cx"> for (var i = 0; i < rowList.length; i++) {
</span><span class="cx"> var row = rowList[i];
</span><del>- if (row.rootSet().equals(entry.rootSet())) {
</del><ins>+ if (!(row instanceof AnalysisResultsViewer.ExpandableRow) && row.rootSet().equals(entry.rootSet())) {
</ins><span class="cx"> rowToMatchingRootSets.get(row).push(entry);
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="lines">@@ -178,6 +192,9 @@
</span><span class="cx">
</span><span class="cx"> var groupTime = entry.rootSet().latestCommitTime();
</span><span class="cx"> for (var i = 0; i < rowList.length; i++) {
</span><ins>+ if (rowList[i] instanceof AnalysisResultsViewer.ExpandableRow)
+ continue;
+
</ins><span class="cx"> var rowTime = rowList[i].rootSet().latestCommitTime();
</span><span class="cx"> if (rowTime > groupTime) {
</span><span class="cx"> var newRow = new ResultsTableRow(null, entry.rootSet());
</span><span class="lines">@@ -190,6 +207,8 @@
</span><span class="cx"> // Missing some commits. Do as best as we can to avoid going backwards in time.
</span><span class="cx"> var repositoriesInNewRow = entry.rootSet().repositories();
</span><span class="cx"> for (var j = i; j < rowList.length; j++) {
</span><ins>+ if (rowList[j] instanceof AnalysisResultsViewer.ExpandableRow)
+ continue;
</ins><span class="cx"> for (var repository of repositoriesInNewRow) {
</span><span class="cx"> var newCommit = entry.rootSet().commitForRepository(repository);
</span><span class="cx"> var rowCommit = rowList[j].rootSet().commitForRepository(repository);
</span><span class="lines">@@ -222,7 +241,24 @@
</span><span class="cx"> if (this._testGroupCallback)
</span><span class="cx"> this._testGroupCallback(testGroup);
</span><span class="cx"> }
</span><ins>+
+ _expandBetween(pointBeforeExpansion, pointAfterExpansion)
+ {
+ console.assert(pointBeforeExpansion.series == pointAfterExpansion.series);
+ var indexBeforeStart = pointBeforeExpansion.seriesIndex;
+ var indexAfterEnd = pointAfterExpansion.seriesIndex;
+ console.assert(indexBeforeStart + 1 < indexAfterEnd);
</ins><span class="cx">
</span><ins>+ var series = pointAfterExpansion.series;
+ var increment = Math.ceil((indexAfterEnd - indexBeforeStart) / 5);
+ if (increment < 3)
+ increment = 1;
+ for (var i = indexBeforeStart + 1; i < indexAfterEnd; i += increment)
+ this._expandedPoints.add(series.findPointByIndex(i));
+ this._shouldRenderTable = true;
+ this.render();
+ }
+
</ins><span class="cx"> static htmlTemplate()
</span><span class="cx"> {
</span><span class="cx"> return `<section class="analysis-view">${ResultsTable.htmlTemplate()}</section>`;
</span><span class="lines">@@ -284,12 +320,37 @@
</span><span class="cx"> .analysis-view .stacking-block.better {
</span><span class="cx"> background: rgba(102, 102, 255, 0.5);
</span><span class="cx"> }
</span><ins>+
+ .analysis-view .point-label-with-expansion-link {
+ font-size: 0.7rem;
+ }
+ .analysis-view .point-label-with-expansion-link a {
+ color: #999;
+ text-decoration: none;
+ }
</ins><span class="cx"> `;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> ComponentBase.defineElement('analysis-results-viewer', AnalysisResultsViewer);
</span><span class="cx">
</span><ins>+AnalysisResultsViewer.ExpandableRow = class extends ResultsTableRow {
+ constructor(callback)
+ {
+ super(null, null);
+ this._callback = callback;
+ }
+
+ resultContent() { return ''; }
+
+ heading()
+ {
+ return ComponentBase.createElement('span', {class: 'point-label-with-expansion-link'}, [
+ ComponentBase.createLink('(Expand)', 'Expand', this._callback),
+ ]);
+ }
+}
+
</ins><span class="cx"> AnalysisResultsViewer.RootSetInTestGroup = class {
</span><span class="cx"> constructor(testGroup, rootSet)
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3componentscustomizabletestgroupformjs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/components/customizable-test-group-form.js (196791 => 196792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/components/customizable-test-group-form.js 2016-02-19 01:14:07 UTC (rev 196791)
+++ trunk/Websites/perf.webkit.org/public/v3/components/customizable-test-group-form.js 2016-02-19 02:44:34 UTC (rev 196792)
</span><span class="lines">@@ -42,8 +42,8 @@
</span><span class="cx"> for (var label in this._rootSetMap) {
</span><span class="cx"> var customRootSet = new CustomRootSet;
</span><span class="cx"> for (var repository of this._renderedRepositorylist) {
</span><del>- var id = CustomizableTestGroupForm._idForLabelAndRepository(label, repository);
- var revision = this.content().getElementById(id).value;
</del><ins>+ var className = CustomizableTestGroupForm._classForLabelAndRepository(label, repository);
+ var revision = this.content().getElementsByClassName(className)[0].value;
</ins><span class="cx"> console.assert(revision);
</span><span class="cx"> if (revision)
</span><span class="cx"> customRootSet.setRevisionForRepository(repository, revision);
</span><span class="lines">@@ -92,14 +92,14 @@
</span><span class="cx"> }))]));
</span><span class="cx"> }
</span><span class="cx">
</span><del>- static _idForLabelAndRepository(label, repository) { return label + '-' + repository.id(); }
</del><ins>+ static _classForLabelAndRepository(label, repository) { return label + '-' + repository.id(); }
</ins><span class="cx">
</span><span class="cx"> static _constructRevisionRadioButtons(rootSetMap, repository, rowLabel)
</span><span class="cx"> {
</span><del>- var id = this._idForLabelAndRepository(rowLabel, repository);
- var groupName = id + '-group';
</del><ins>+ var className = this._classForLabelAndRepository(rowLabel, repository);
+ var groupName = className + '-group';
</ins><span class="cx"> var element = ComponentBase.createElement;
</span><del>- var revisionEditor = element('input', {id: id});
</del><ins>+ var revisionEditor = element('input', {class: className});
</ins><span class="cx">
</span><span class="cx"> var nodes = [];
</span><span class="cx"> for (var labelToChoose in rootSetMap) {
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3componentsresultstablejs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/components/results-table.js (196791 => 196792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/components/results-table.js 2016-02-19 01:14:07 UTC (rev 196791)
+++ trunk/Websites/perf.webkit.org/public/v3/components/results-table.js 2016-02-19 02:44:34 UTC (rev 196792)
</span><span class="lines">@@ -33,6 +33,8 @@
</span><span class="cx"> var extraRepositories = [];
</span><span class="cx"> var repositoryList = this._computeRepositoryList(rowGroups, extraRepositories);
</span><span class="cx">
</span><ins>+ this._selectedRange = {};
+
</ins><span class="cx"> var barGraphGroup = new BarGraphGroup(this._valueFormatter);
</span><span class="cx"> var element = ComponentBase.createElement;
</span><span class="cx"> var self = this;
</span><span class="lines">@@ -46,10 +48,14 @@
</span><span class="cx"> var cells = [];
</span><span class="cx">
</span><span class="cx"> if (self._rangeSelectorLabels) {
</span><del>- self._selectedRange = {};
- for (var label of self._rangeSelectorLabels)
- cells.push(element('td', element('input',
- {type: 'radio', name: label, onchange: self._rangeSelectorClicked.bind(self, label, row)})));
</del><ins>+ for (var label of self._rangeSelectorLabels) {
+ var content = '';
+ if (row.rootSet()) {
+ content = element('input',
+ {type: 'radio', name: label, onchange: self._rangeSelectorClicked.bind(self, label, row)});
+ }
+ cells.push(element('td', content));
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (groupHeading !== undefined && !rowIndex)
</span></span></pre>
</div>
</div>
</body>
</html>