Add new summary table to compare page

Author: Kobzol

site/static/compare.html

@@ -278,49 +278,16 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
         </fieldset>
         <p v-if="dataLoading && !data">Loading ...</p>
         <div v-if="data" id="content" style="margin-top: 15px">
-            <div id="summary">
-                <div style="display: flex; justify-content: end;">
+            <div id="main-summary">
+                <summary-table :cases="filteredSummary"></summary-table>
+                <div style="position: absolute; right: 5px; top: 5px;">
                     <span class="tooltip" style="margin-right: 1em;">?
                         <span class="tooltiptext">
-                            The percents show arithmetic mean amongst regressions, amongst improvements
-                            and finally amongst all benchmarks in each category (all benchmarks or
-                            filtered benchmarks).
+                            The table shows summaries of regressions, improvements and all changes
+                            amongst the filtered benchmarks.
                         </span>
                     </span>
                 </div>
-                <div v-for="summaryPair in Object.entries(summary)" class="summary-container">
-                    <span style="font-weight: bold; margin-left: 5px; text-transform: capitalize;">{{
-                        summaryPair[0] }}:</span>
-                    <div class="summary-values">
-                        <span class="summary summary-wide positive">
-                            {{summaryPair[1].regressions.toString().padStart(3, "&nbsp;")}}
-                            <svg style="width:18px;height:18px" viewBox="0 0 24 24">
-                                <path
-                                    d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z">
-                                </path>
-                            </svg>
-                            &nbsp;(+{{(summaryPair[1].regressions_avg).toFixed(2)}}%)
-                        </span>
-                        <span class="summary">
-                            {{summaryPair[1].unchanged.toString().padStart(3, "&nbsp;")}}
-                            <svg style="width:18px;height:18px" viewBox="0 0 24 24">
-                                <path d="M22,12L18,8V11H3V13H18V16L22,12Z"></path>
-                            </svg>
-                        </span>
-                        <span class="summary summary-wide negative">
-                            {{summaryPair[1].improvements.toString().padStart(3, "&nbsp;")}}
-                            <svg style="width:18px;height:18px" viewBox="0 0 24 24">
-                                <path
-                                    d="M16,18L18.29,15.71L13.41,10.83L9.41,14.83L2,7.41L3.41,6L9.41,12L13.41,8L19.71,14.29L22,12V18H16Z">
-                                </path>
-                            </svg>
-                            &nbsp;({{(summaryPair[1].improvements_avg).toFixed(2)}}%)
-                        </span>
-                        <span class="summary" v-bind:class="percentClass(summaryPair[1].average)">
-                            &nbsp;{{ signIfPositive(summaryPair[1].average) }}{{ (summaryPair[1].average).toFixed(2) }}%
-                        </span>
-                    </div>
-                </div>
             </div>
             <div v-if="data.new_errors.length">
                 <p><b>Newly broken benchmarks</b>:</p>

site/static/compare/script.js

@@ -219,56 +219,9 @@ const app = Vue.createApp({
         stat() {
             return findQueryParam("stat") || "instructions:u";
         },
-        summary() {
-            // Create object with each test case that is not filtered out as a key
-            const filtered = this.testCases.reduce((sum, next) => {
-                sum[testCaseString(next)] = true;
-                return sum;
-            }, {});
-            const newCount = {
-                regressions: 0,
-                regressions_avg: 0,
-                improvements: 0,
-                improvements_avg: 0,
-                unchanged: 0,
-                average: 0
-            };
-
-            const addDatum = (result, datum, percent) => {
-                if (percent > 0 && datum.is_relevant) {
-                    result.regressions += 1;
-                    result.regressions_avg += percent;
-                } else if (percent < 0 && datum.is_relevant) {
-                    result.improvements += 1;
-                    result.improvements_avg += percent;
-                } else {
-                    result.unchanged += 1;
-                }
-                result.average += percent;
-            };
-
-            let result = {all: {...newCount}, filtered: {...newCount}}
-            for (let d of this.data.comparisons) {
-                const testCase = testCaseString(d)
-                const datumA = d.statistics[0];
-                const datumB = d.statistics[1];
-                let percent = 100 * ((datumB - datumA) / datumA);
-                addDatum(result.all, d, percent);
-                if (filtered[testCase]) {
-                    addDatum(result.filtered, d, percent);
-                }
-            }
-
-            const computeAvg = (result) => {
-                result.improvements_avg /= Math.max(result.improvements, 1);
-                result.regressions_avg /= Math.max(result.regressions, 1);
-                result.average /= Math.max(result.regressions + result.improvements + result.unchanged, 1);
-            };
-            computeAvg(result.all);
-            computeAvg(result.filtered);
-
-            return result;
-
+        // Returns summary of currently filtered data
+        filteredSummary() {
+            return computeSummary(this.testCases);
         },
         benchmarkMap() {
             if (!this.data) return {};
@@ -289,12 +242,6 @@ const app = Vue.createApp({
         prLink(pr) {
             return `https://github.com/rust-lang/rust/pull/${pr}`;
         },
-        signIfPositive(pct) {
-            if (pct >= 0) {
-                return "+";
-            }
-            return "";
-        },
         diffClass(diff) {
             let klass = "";
             if (diff > 1) {
@@ -433,6 +380,77 @@ app.component('test-cases-table', {
 </div>
 `
 });
+
+const SummaryPercentValue = {
+    props: {
+        value: Number,
+    },
+    template: `
+<span>{{ value.toFixed(2) }}%</span>
+`
+};
+const SummaryRange = {
+    props: {
+        range: Array,
+    },
+    template: `
+<div v-if="range.length > 0">
+  [<SummaryPercentValue :value="range[0]" />, <SummaryPercentValue :value="range[1]" />]    
+</div>
+<div v-else>-</div>
+`, components: {SummaryPercentValue}
+};
+const SummaryCount = {
+    props: {
+        cases: Number,
+        benchmarks: Number
+    },
+    template: `
+<span :title="cases + ' test case(s), ' + benchmarks + ' unique benchmark(s)'">{{ cases }} ({{ benchmarks }})</span>
+`
+};
+
+app.component('summary-table', {
+    props: ['cases'],
+    template: `
+<table class="summary-table">
+    <thead>
+      <th>Range</th>
+      <th>Mean</th>
+      <th>Count</th>
+      <th><!-- icon --></th>
+    </thead>
+    <tbody>
+        <tr class="positive">
+            <td><SummaryRange :range="cases.regressions.range" /></td>
+            <td><SummaryPercentValue :value="cases.regressions.average" /></td>
+            <td><SummaryCount :cases="cases.regressions.count" :benchmarks="cases.regressions.benchmarks" /></td>
+            <td>
+              <svg style="width:16px;height:16px" viewBox="0 0 24 24">
+                <path d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z"></path>
+              </svg>
+            </td>
+        </tr>
+        <tr class="negative">
+            <td><SummaryRange :range="cases.improvements.range" /></td>
+            <td><SummaryPercentValue :value="cases.improvements.average" /></td>
+            <td><SummaryCount :cases="cases.improvements.count" :benchmarks="cases.improvements.benchmarks" /></td>
+            <td>
+              <svg style="width:16px;height:16px" viewBox="0 0 24 24">
+                <path d="M16,18L18.29,15.71L13.41,10.83L9.41,14.83L2,7.41L3.41,6L9.41,12L13.41,8L19.71,14.29L22,12V18H16Z"></path>
+              </svg>
+            </td>
+        </tr>
+        <tr>
+            <td><SummaryRange :range="cases.all.range" /></td>
+            <td><SummaryPercentValue :value="cases.all.average" /></td>
+            <td><SummaryCount :cases="cases.all.count" :benchmarks="cases.all.benchmarks" /></td>
+        </tr>
+    </tbody>
+</table>
+`,
+    components: {SummaryRange, SummaryPercentValue, SummaryCount}
+});
 app.mixin({
     methods: {
         percentClass(pct) {
@@ -448,6 +466,12 @@ app.mixin({
             }
             return klass;
         },
+        signIfPositive(pct) {
+            if (pct >= 0) {
+                return "+";
+            }
+            return "";
+        },
     }
 });
 
@@ -470,6 +494,72 @@ function testCaseString(testCase) {
     return testCase.benchmark + "-" + testCase.profile + "-" + testCase.scenario;
 }
 
+/**
+ * Computes summaries of improvements, regressions and all changes from the given `comparisons`.
+ * Returns a dictionary {improvements, regressions, all}.
+ */
+function computeSummary(testCases) {
+    const regressions = {
+        values: [],
+        benchmarks: new Set(),
+    };
+    const improvements = {
+        values: [],
+        benchmarks: new Set(),
+    };
+    const all = {
+        values: [],
+        benchmarks: new Set(),
+    };
+
+    const handleTestCase = (items, testCase) => {
+        items.benchmarks.add(testCase.benchmark);
+        items.values.push(testCase.percent);
+    };
+
+    for (const testCase of testCases) {
+        if (testCase.percent > 0) {
+            handleTestCase(regressions, testCase);
+        } else if (testCase.percent < 0) {
+            handleTestCase(improvements, testCase);
+        }
+        handleTestCase(all, testCase);
+    }
+
+    const computeSummary = (data) => {
+        const values = data.values;
+        const benchmarks = data.benchmarks;
+
+        const count = values.length;
+        let range = [];
+        if (count > 0) {
+            range = [
+                Math.min.apply(null, values),
+                Math.max.apply(null, values),
+            ];
+            if (Math.abs(range[0]) > Math.abs(range[1])) {
+                range = [range[1], range[0]];
+            }
+        }
+
+        const sum = values.reduce((acc, item) => acc + item, 0);
+        const average = sum / Math.max(count, 1);
+
+        return {
+            count,
+            benchmarks: benchmarks.size,
+            average,
+            range,
+        }
+    };
+
+    return {
+        improvements: computeSummary(improvements),
+        regressions: computeSummary(regressions),
+        all: computeSummary(all)
+    };
+}
+
 function unique(arr) {
     return arr.filter((value, idx) => arr.indexOf(value) == idx);
 }

site/static/compare/style.css

@@ -232,10 +232,14 @@ input[type="checkbox"] {
     margin-top: 10px;
 }
 
-#summary {
+#main-summary {
     border: 1px dashed;
     padding: 4px;
     border-radius: 6px;
+
+    display: flex;
+    justify-content: center;
+    position: relative;
 }
 
 .summary-container {
@@ -296,3 +300,11 @@ input[type="checkbox"] {
 .quick-links .active {
     font-weight: bold;
 }
+
+.summary-table th {
+    text-align: center;
+}
+.summary-table td, .summary-table th {
+    padding: 2px 5px;
+    vertical-align: middle;
+}