Address review comments

Author: Kobzol

site/static/compare.html

@@ -262,7 +262,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                             </span>
                         </span>
                     </div>
-                    <input type="checkbox" v-model="filter.showNonRelevant" style="margin-left: 20px;" />
+                    <input type="checkbox" v-model="filter.nonRelevant" style="margin-left: 20px;" />
                 </div>
                 <div class="section">
                     <div class="section-heading"><span>Display raw data</span>
@@ -285,7 +285,8 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                     <span class="tooltip" style="margin-right: 1em;">?
                         <span class="tooltiptext">
                             The table shows summaries of regressions, improvements and all changes
-                            amongst the filtered benchmarks.
+                            calculated from data that is currently visible (data that passes the
+                            active filters).
                         </span>
                     </span>
                 </div>

site/static/compare/script.js

@@ -9,7 +9,7 @@ function findQueryParam(name) {
 function createDefaultFilter() {
     return {
         name: null,
-        showNonRelevant: false,
+        nonRelevant: false,
         profile: {
             check: true,
             debug: true,
@@ -107,7 +107,7 @@ const app = Vue.createApp({
                 let nameFilter = filter.name && filter.name.trim();
                 nameFilter = !nameFilter || name.includes(nameFilter);
 
-                const relevanceFilter = filter.showNonRelevant ? true : testCase.isRelevant;
+                const relevanceFilter = filter.nonRelevant ? true : testCase.isRelevant;
 
                 return (
                     profileFilter(testCase.profile) &&
@@ -391,18 +391,34 @@ app.component('test-cases-table', {
 const SummaryPercentValue = {
     props: {
         value: Number,
+        padWidth: {
+            type: Number,
+            default: null
+        }
     },
     template: `
-<span>{{ value.toFixed(2) }}%</span>
-`
+<span><span v-html="padSpaces" />{{ formattedValue }}%</span>
+`,
+    computed: {
+        formattedValue() {
+            return `${this.signIfPositive(this.value)}${this.value.toFixed(2)}`;
+        },
+        padSpaces() {
+            let value = this.formattedValue;
+            if (value.length < this.padWidth) {
+                return "&nbsp;".repeat(this.padWidth - value.length);
+            }
+            return "";
+        }
+    }
 };
 const SummaryRange = {
     props: {
         range: Array,
     },
     template: `
 <div v-if="range.length > 0">
-  [<SummaryPercentValue :value="range[0]" />, <SummaryPercentValue :value="range[1]" />]    
+  [<SummaryPercentValue :value="range[0]" :padWidth="6" />, <SummaryPercentValue :value="range[1]" :padWidth="6" />]
 </div>
 <div v-else>-</div>
 `, components: {SummaryPercentValue}
@@ -422,29 +438,29 @@ app.component('summary-table', {
     template: `
 <table class="summary-table">
     <thead>
+      <th><!-- icon --></th>
       <th>Range</th>
       <th>Mean</th>
       <th>Count</th>
-      <th><!-- icon --></th>
     </thead>
     <tbody>
         <tr class="positive">
+            <td title="Regresions">❌</td>
             <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 title="Regresions">❌</td>
         </tr>
         <tr class="negative">
+            <td title="Improvements">✅</td>
             <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 title="Improvements">✅</td>
         </tr>
         <tr>
+            <td title="All changes">✅,❌</td>
             <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>
-            <td></td>
         </tr>
     </tbody>
 </table>
@@ -537,9 +553,6 @@ function computeSummary(testCases) {
                 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);