<!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>[196463] 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/196463">196463</a></dd>
<dt>Author</dt> <dd>rniwa@webkit.org</dd>
<dt>Date</dt> <dd>2016-02-11 21:14:32 -0800 (Thu, 11 Feb 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Refine v3 UI's analysis task page
https://bugs.webkit.org/show_bug.cgi?id=154152
Reviewed by Chris Dumez.
This patch makes the following refinements to the analysis task page:
- Always show the relative different of in-progress A/B testing.
- Make the annotations (colored bars) in the chart open other analysis tasks.
- Order the A/B testing groups in the reverse chronological order.
- Select the time range corresponding to the current test group.
* public/v3/components/analysis-results-viewer.js:
(AnalysisResultsViewer.cssTemplate): Fixed the bug that pending and running testing groups are no longer
colored after <a href="http://trac.webkit.org/projects/webkit/changeset/196440">r196440</a>. Use a slightly more opaque color for currently running groups compared to pending ones.
* public/v3/components/chart-pane-base.js:
(ChartPaneBase.prototype.setMainSelection): Added.
(ChartPaneBase.prototype._openAnalysisTask): Moved the code from ChartPane._openAnalysisTask so that it can be
reused in both AnalysisTaskChartPane and ChartPane (in charts page).
(ChartPaneBase.prototype.router): Added. Overridden by each subclass.
* public/v3/components/test-group-results-table.js:
(TestGroupResultsTable.prototype.buildRowGroups): Always show the summary (relative difference of A to B) as
long as there are some results in each set.
* public/v3/models/test-group.js:
(TestGroup.prototype.compareTestResults): Always set .label and .fullLabel with the relative change as long as
there are some values. Keep using "pending" and "running" in .status since that would determine the color of
stacking blocks representing those A/B testing groups.
* public/v3/pages/analysis-task-page.js:
(AnalysisTaskChartPane):
(AnalysisTaskChartPane.prototype.setPage): Added.
(AnalysisTaskChartPane.prototype.router): Added.
(AnalysisTaskPage):
(AnalysisTaskPage.prototype.render): Show the list of A/B testing groups in the reverse chronological order.
Also set the main chart's selection to the time range of the current test group.
* public/v3/pages/chart-pane.js:
(ChartPane.prototype.router): Added.
(ChartPane.prototype._openAnalysisTask): Moved to ChartPaneBase.prototype._openAnalysisTask.</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="#trunkWebsitesperfwebkitorgpublicv3componentschartpanebasejs">trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3componentstestgroupresultstablejs">trunk/Websites/perf.webkit.org/public/v3/components/test-group-results-table.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3modelstestgroupjs">trunk/Websites/perf.webkit.org/public/v3/models/test-group.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3pagesanalysistaskpagejs">trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3pageschartpanejs">trunk/Websites/perf.webkit.org/public/v3/pages/chart-pane.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 (196462 => 196463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/ChangeLog 2016-02-12 03:24:49 UTC (rev 196462)
+++ trunk/Websites/perf.webkit.org/ChangeLog 2016-02-12 05:14:32 UTC (rev 196463)
</span><span class="lines">@@ -1,5 +1,49 @@
</span><span class="cx"> 2016-02-11 Ryosuke Niwa <rniwa@webkit.org>
</span><span class="cx">
</span><ins>+ Refine v3 UI's analysis task page
+ https://bugs.webkit.org/show_bug.cgi?id=154152
+
+ Reviewed by Chris Dumez.
+
+ This patch makes the following refinements to the analysis task page:
+ - Always show the relative different of in-progress A/B testing.
+ - Make the annotations (colored bars) in the chart open other analysis tasks.
+ - Order the A/B testing groups in the reverse chronological order.
+ - Select the time range corresponding to the current test group.
+
+ * public/v3/components/analysis-results-viewer.js:
+ (AnalysisResultsViewer.cssTemplate): Fixed the bug that pending and running testing groups are no longer
+ colored after r196440. Use a slightly more opaque color for currently running groups compared to pending ones.
+
+ * public/v3/components/chart-pane-base.js:
+ (ChartPaneBase.prototype.setMainSelection): Added.
+ (ChartPaneBase.prototype._openAnalysisTask): Moved the code from ChartPane._openAnalysisTask so that it can be
+ reused in both AnalysisTaskChartPane and ChartPane (in charts page).
+ (ChartPaneBase.prototype.router): Added. Overridden by each subclass.
+
+ * public/v3/components/test-group-results-table.js:
+ (TestGroupResultsTable.prototype.buildRowGroups): Always show the summary (relative difference of A to B) as
+ long as there are some results in each set.
+
+ * public/v3/models/test-group.js:
+ (TestGroup.prototype.compareTestResults): Always set .label and .fullLabel with the relative change as long as
+ there are some values. Keep using "pending" and "running" in .status since that would determine the color of
+ stacking blocks representing those A/B testing groups.
+
+ * public/v3/pages/analysis-task-page.js:
+ (AnalysisTaskChartPane):
+ (AnalysisTaskChartPane.prototype.setPage): Added.
+ (AnalysisTaskChartPane.prototype.router): Added.
+ (AnalysisTaskPage):
+ (AnalysisTaskPage.prototype.render): Show the list of A/B testing groups in the reverse chronological order.
+ Also set the main chart's selection to the time range of the current test group.
+
+ * public/v3/pages/chart-pane.js:
+ (ChartPane.prototype.router): Added.
+ (ChartPane.prototype._openAnalysisTask): Moved to ChartPaneBase.prototype._openAnalysisTask.
+
+2016-02-11 Ryosuke Niwa <rniwa@webkit.org>
+
</ins><span class="cx"> Add a script to process backlogs created while perf dashboard was in the maintenance mode
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=154140
</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 (196462 => 196463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/components/analysis-results-viewer.js 2016-02-12 03:24:49 UTC (rev 196462)
+++ trunk/Websites/perf.webkit.org/public/v3/components/analysis-results-viewer.js 2016-02-12 05:14:32 UTC (rev 196463)
</span><span class="lines">@@ -272,7 +272,10 @@
</span><span class="cx"> .analysis-view .stacking-block.unchanged {
</span><span class="cx"> background: rgba(128, 128, 128, 0.5);
</span><span class="cx"> }
</span><del>- .analysis-view .stacking-block.incomplete {
</del><ins>+ .analysis-view .stacking-block.pending {
+ background: rgba(204, 204, 51, 0.2);
+ }
+ .analysis-view .stacking-block.running {
</ins><span class="cx"> background: rgba(204, 204, 51, 0.5);
</span><span class="cx"> }
</span><span class="cx"> .analysis-view .stacking-block.worse {
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3componentschartpanebasejs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js (196462 => 196463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js 2016-02-12 03:24:49 UTC (rev 196462)
+++ trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js 2016-02-12 05:14:32 UTC (rev 196463)
</span><span class="lines">@@ -107,6 +107,12 @@
</span><span class="cx"> this._mainChart.setDomain(startTime, endTime);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ setMainSelection(selection)
+ {
+ if (this._mainChart)
+ this._mainChart.setSelection(selection);
+ }
+
</ins><span class="cx"> _overviewSelectionDidChange(domain, didEndDrag) { }
</span><span class="cx">
</span><span class="cx"> _mainSelectionDidChange(selection, didEndDrag)
</span><span class="lines">@@ -133,9 +139,15 @@
</span><span class="cx"> this.render();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _openAnalysisTask()
- { }
</del><ins>+ _openAnalysisTask(annotation)
+ {
+ var router = this.router();
+ console.assert(router);
+ window.open(router.url(`analysis/task/${annotation.task.id()}`), '_blank');
+ }
</ins><span class="cx">
</span><ins>+ router() { return null; }
+
</ins><span class="cx"> _openCommitViewer(repository, from, to)
</span><span class="cx"> {
</span><span class="cx"> this._mainChartStatus.setCurrentRepository(repository);
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3componentstestgroupresultstablejs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/components/test-group-results-table.js (196462 => 196463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/components/test-group-results-table.js 2016-02-12 03:24:49 UTC (rev 196462)
+++ trunk/Websites/perf.webkit.org/public/v3/components/test-group-results-table.js 2016-02-12 05:14:32 UTC (rev 196463)
</span><span class="lines">@@ -61,7 +61,7 @@
</span><span class="cx"> var endConfig = testGroup.labelForRootSet(rootSets[j]);
</span><span class="cx">
</span><span class="cx"> var result = this._testGroup.compareTestResults(rootSets[i], rootSets[j]);
</span><del>- if (result.status == 'pending' || result.status == 'running' || result.status == 'failed')
</del><ins>+ if (result.changeType == null)
</ins><span class="cx"> continue;
</span><span class="cx">
</span><span class="cx"> var row = new ResultsTableRow(`${startConfig} to ${endConfig}`, null);
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3modelstestgroupjs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/models/test-group.js (196462 => 196463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/models/test-group.js 2016-02-12 03:24:49 UTC (rev 196462)
+++ trunk/Websites/perf.webkit.org/public/v3/models/test-group.js 2016-02-12 05:14:32 UTC (rev 196463)
</span><span class="lines">@@ -107,30 +107,37 @@
</span><span class="cx"> console.assert(metric);
</span><span class="cx">
</span><span class="cx"> var result = {changeType: null, status: 'failed', label: 'Failed', fullLabel: 'Failed', isStatisticallySignificant: false};
</span><del>- if (beforeValues.length && afterValues.length) {
- var diff = afterMean - beforeMean;
- var smallerIsBetter = metric.isSmallerBetter();
- result.changeType = diff < 0 == smallerIsBetter ? 'better' : 'worse';
- result.label = Math.abs(diff / beforeMean * 100).toFixed(2) + '% ' + result.changeType;
- result.isStatisticallySignificant = Statistics.testWelchsT(beforeValues, afterValues);
- result.status = result.isStatisticallySignificant ? result.changeType : 'unchanged';
- }
</del><span class="cx">
</span><del>- if (!this.hasCompleted()) {
</del><ins>+ var hasCompleted = this.hasCompleted();
+ if (!hasCompleted) {
</ins><span class="cx"> if (this.hasStarted()) {
</span><span class="cx"> result.status = 'running';
</span><span class="cx"> result.label = 'Running';
</span><span class="cx"> result.fullLabel = 'Running';
</span><span class="cx"> } else {
</span><ins>+ console.assert(result.changeType === null);
</ins><span class="cx"> result.status = 'pending';
</span><span class="cx"> result.label = 'Pending';
</span><span class="cx"> result.fullLabel = 'Pending';
</span><span class="cx"> }
</span><del>- } else if (result.changeType) {
- var significance = result.isStatisticallySignificant ? 'significant' : 'insignificant';
- result.fullLabel = `${result.label} (statistically ${significance})`;
</del><span class="cx"> }
</span><span class="cx">
</span><ins>+ if (beforeValues.length && afterValues.length) {
+ var diff = afterMean - beforeMean;
+ var smallerIsBetter = metric.isSmallerBetter();
+ var changeType = diff < 0 == smallerIsBetter ? 'better' : 'worse';
+ var changeLabel = Math.abs(diff / beforeMean * 100).toFixed(2) + '% ' + changeType;
+ var isSignificant = Statistics.testWelchsT(beforeValues, afterValues);
+ var significanceLabel = isSignificant ? 'significant' : 'insignificant';
+
+ result.changeType = changeType;
+ result.label = changeLabel;
+ if (hasCompleted)
+ result.status = isSignificant ? result.changeType : 'unchanged';
+ result.fullLabel = `${result.label} (statistically ${significanceLabel})`;
+ result.isStatisticallySignificant = isSignificant;
+ }
+
</ins><span class="cx"> return result;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3pagesanalysistaskpagejs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js (196462 => 196463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js 2016-02-12 03:24:49 UTC (rev 196462)
+++ trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js 2016-02-12 05:14:32 UTC (rev 196463)
</span><span class="lines">@@ -1,6 +1,13 @@
</span><span class="cx">
</span><span class="cx"> class AnalysisTaskChartPane extends ChartPaneBase {
</span><del>- constructor() { super('analysis-task-chart-pane'); }
</del><ins>+ constructor()
+ {
+ super('analysis-task-chart-pane');
+ this._page = null;
+ }
+
+ setPage(page) { this._page = page; }
+ router() { return this._page.router(); }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> ComponentBase.defineElement('analysis-task-chart-pane', AnalysisTaskChartPane);
</span><span class="lines">@@ -21,6 +28,7 @@
</span><span class="cx"> this._errorMessage = null;
</span><span class="cx"> this._currentTestGroup = null;
</span><span class="cx"> this._chartPane = this.content().querySelector('analysis-task-chart-pane').component();
</span><ins>+ this._chartPane.setPage(this);
</ins><span class="cx"> this._analysisResultsViewer = this.content().querySelector('analysis-results-viewer').component();
</span><span class="cx"> this._analysisResultsViewer.setTestGroupCallback(this._showTestGroup.bind(this));
</span><span class="cx"> this._testGroupResultsTable = this.content().querySelector('test-group-results-table').component();
</span><span class="lines">@@ -166,7 +174,7 @@
</span><span class="cx"> return element('li', {class: 'test-group-list-' + group.id()}, link(group.label(), function () {
</span><span class="cx"> self._showTestGroup(group);
</span><span class="cx"> }));
</span><del>- }));
</del><ins>+ }).reverse());
</ins><span class="cx"> this._renderedCurrentTestGroup = null;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -182,6 +190,15 @@
</span><span class="cx"> element.classList.add('selected');
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ this._chartPane.setMainSelection(null);
+ if (this._currentTestGroup) {
+ var rootSetsInTestGroup = this._currentTestGroup.requestedRootSets();
+ var startTime = rootSetsInTestGroup[0].latestCommitTime();
+ var endTime = rootSetsInTestGroup[rootSetsInTestGroup.length - 1].latestCommitTime();
+ if (startTime != endTime)
+ this._chartPane.setMainSelection([startTime, endTime]);
+ }
+
</ins><span class="cx"> this.content().querySelector('.test-group-retry-button').textContent = this._currentTestGroup ? 'Retry' : 'Confirm the change';
</span><span class="cx">
</span><span class="cx"> var repetitionCount = this._currentTestGroup ? this._currentTestGroup.repetitionCount() : 4;
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3pageschartpanejs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/pages/chart-pane.js (196462 => 196463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/pages/chart-pane.js 2016-02-12 03:24:49 UTC (rev 196462)
+++ trunk/Websites/perf.webkit.org/public/v3/pages/chart-pane.js 2016-02-12 05:14:32 UTC (rev 196463)
</span><span class="lines">@@ -63,10 +63,7 @@
</span><span class="cx"> this._chartsPage.setMainDomainFromZoom(selection, this);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _openAnalysisTask(annotation)
- {
- window.open(this._chartsPage.router().url(`analysis/task/${annotation.task.id()}`), '_blank');
- }
</del><ins>+ router() { return this._chartsPage.router(); }
</ins><span class="cx">
</span><span class="cx"> _indicatorDidChange(indicatorID, isLocked)
</span><span class="cx"> {
</span></span></pre>
</div>
</div>
</body>
</html>