Improve summary

Author: rylev

site/static/compare.html

@@ -208,20 +208,18 @@
             text-align: center;
         }
 
+        #summary {
+            border: 1px dashed;
+            padding: 4px;
+            border-radius: 6px;
+        }
+
         .summary {
             display: flex;
             justify-content: center;
             align-items: center;
             width: 20%;
         }
-
-        #summary .improvement {
-            border: 1px solid green;
-        }
-
-        #summary .regression {
-            border: 1px solid red;
-        }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 </head>
@@ -364,7 +362,8 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                         <span class="tooltip">?
                             <span class="tooltiptext">
                                 Whether to filter out all benchmarks that do not show significant changes. A significant
-                                change is any change above 0.2% for non-noisy benchmarks and 1.0% for noisy ones.
+                                change is any change greater than or equal to 0.2% for non-noisy benchmarks and above
+                                1.0% for noisy ones.
                             </span>
                         </span>
                     </div>
@@ -373,11 +372,11 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
             </div>
         </fieldset>
         <div v-if="data" id="content" style="margin-top: 15px">
-            <template v-for="summaryPair in Object.entries(summary)">
-                <div id="summary" style="display: flex;">
-                    <span style="font-weight: bold;width: 20%;">{{ summaryPair[0] }}:</span>
-                    <div style="display: flex; justify-content: center; width: 80%;"
-                        v-bind="{ class: summaryClass(summaryPair[1]) }">
+            <div id="summary">
+                <div v-for="summaryPair in Object.entries(summary)" style="display: flex;">
+                    <span style="font-weight: bold; width: 30%; margin-left: 15%; text-transform: capitalize;">{{
+                        summaryPair[0] }}:</span>
+                    <div style="display: flex; justify-content: flex-end; width: 80%; margin-right: 15%;">
                         <span class="summary positive">
                             {{summaryPair[1].regressions.toString().padStart(3, "&nbsp;")}}
                             <svg style="width:18px;height:18px" viewBox="0 0 24 24">
@@ -402,7 +401,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                         </span>
                     </div>
                 </div>
-            </template>
+            </div>
             <table id="benches" class="compare">
                 <template v-for="bench in benches">
                     <tbody>
@@ -424,7 +423,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                                     <a
                                         v-bind:href="percentLink(data.b.commit, data.a.commit, bench.name, run.casename)">
                                         <span v-bind:class="percentClass(run.percent)">
-                                            {{ run.percent }}%{{run.isDodgy ? "?" : ""}}
+                                            {{ run.percent.toFixed(2) }}%{{run.isDodgy ? "?" : ""}}
                                         </span>
                                     </a>
                                 </td>
@@ -537,11 +536,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                             if (!datumB) {
                                 continue;
                             }
-                            let percent = (100 * (datumB - datumA) / datumA).toFixed(1);
-                            if (percent === "-0.0") {
-                                percent = "0.0";
-                            }
-
+                            let percent = (100 * (datumB - datumA) / datumA);
                             let isDodgy = false;
                             if (data.variance) {
                                 let variance = data.variance[name + "-" + key];
@@ -565,11 +560,10 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                         Object.keys(data.a.data).
                             filter(n => filter.name && filter.name.trim() ? n.includes(filter.name.trim()) : true).
                             map(name => {
-                                const variants = toVariants(name).filter(v => filter.showOnlySignificant ? isSignificant(v) : true);
+                                const variants = toVariants(name).filter(v => filter.showOnlySignificant ? isSignificant(v.percent, v.isDodgy) : true);
                                 const pcts = variants.map(field => parseFloat(field.percent));
                                 const maxPct = Math.max(...pcts).toFixed(1);
                                 const minPct = Math.min(...pcts).toFixed(1);
-                                const maxCasenameLen = Math.max(...variants.map(f => f.casename.length));
                                 if (variants.length > 0) {
                                     variants[0].first = true;
                                 }
@@ -579,7 +573,6 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                                     variants,
                                     maxPct,
                                     minPct,
-                                    maxCasenameLen,
                                 };
                             }).
                             filter(b => b.variants.length > 0);
@@ -654,23 +647,17 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                             if (!datumB) {
                                 continue;
                             }
-                            let scenarioKind = scenario.substr(0, (scenario.indexOf(":") + 1 || scenario.length + 1) - 1);
-                            result[scenarioKind] ||= { ...newCount }
                             let percent = 100 * ((datumB - datumA) / datumA);
                             const isDodgy = this.isDodgy(benchmarkAndProfile, scenario);
-                            const threshold = isDodgy ? 1.0 : 0.2;
-                            if (percent > threshold) {
+                            if (percent > 0 && isSignificant(percent, isDodgy)) {
                                 result.all.regressions += 1;
                                 result.filtered.regressions += filtered[benchmarkAndProfile]?.[scenario] || 0;
-                                result[scenarioKind].regressions += 1;
-                            } else if (percent < -threshold) {
+                            } else if (percent < 0 && isSignificant(percent, isDodgy)) {
                                 result.all.improvements += 1;
                                 result.filtered.improvements += filtered[benchmarkAndProfile]?.[scenario] || 0;
-                                result[scenarioKind].improvements += 1;
                             } else {
                                 result.all.unchanged += 1;
                                 result.filtered.unchanged += filtered[benchmarkAndProfile]?.[scenario] || 0;
-                                result[scenarioKind].unchanged += 1;
                             }
                         }
                     }
@@ -742,27 +729,16 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                     variance = this.data.variance[benchmarkAndProfile + "-" + scenario];
                     return (variance?.description?.type ?? "Normal") != "Normal";
                 },
-                summaryClass(summary) {
-                    if (summary.unchanged > Math.max(summary.improvements, summary.regressions)) {
-                        return '';
-                    }
-                    if (summary.improvements > summary.regressions) {
-                        return 'improvement';
-                    } else {
-                        return 'regression';
-                    }
-                }
             },
         });
 
-        function isSignificant(variant) {
-            const percent = Math.abs(variant.percent);
-            if (variant.isDodgy) {
-                return percent > 1.0;
+        function isSignificant(percent, isNoisy) {
+            const perAbs = Math.abs(percent);
+            if (isNoisy) {
+                return perAbs > 1.0;
             } else {
-                return percent >= 0.2;
+                return perAbs >= 0.2;
             }
-
         }
 
         function toggleFilters(id, toggle) {