Add data aggregations per profile, scenario and category to compare page

Author: Kobzol

site/static/compare.html

@@ -21,7 +21,7 @@
     <div id="app">
         <fieldset id="settings">
             <legend id="search-toggle" class="section-heading">Do another comparison<span
-                    id="search-toggle-indicator"></span></legend>
+                class="toggle-indicator" id="search-toggle-indicator"></span></legend>
             <div id="search-content">
                 <div id="commits" class="section">
                     <div class="section-heading">Commits</div>
@@ -83,8 +83,8 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                 <a v-bind:href="compareLink">🔎 compare commits</a>
             </div>
         </div>
-        <fieldset id="filters">
-            <legend id="filters-toggle" class="section-heading">Filters<span id="filters-toggle-indicator"></span>
+        <fieldset id="filters" class="collapsible-section">
+            <legend id="filters-toggle" class="section-heading">Filters<span class="toggle-indicator" id="filters-toggle-indicator"></span>
             </legend>
             <div id="filters-content" style="display: none;">
                 <div class="section">
@@ -277,10 +277,17 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                 <button @click="resetFilter">Reset filters</button>
             </div>
         </fieldset>
+        <fieldset id="aggregations" class="collapsible-section">
+            <legend id="aggregations-toggle" class="section-heading">Aggregations<span class="toggle-indicator" id="aggregations-toggle-indicator"></span>
+            </legend>
+            <div id="aggregations-content" v-if="data">
+                <aggregations :cases="testCases"></aggregations>
+            </div>
+        </fieldset>
         <p v-if="dataLoading && !data">Loading ...</p>
         <div v-if="data" id="content" style="margin-top: 15px">
             <div id="main-summary">
-                <summary-table :cases="filteredSummary"></summary-table>
+                <summary-table :summary="filteredSummary"></summary-table>
                 <div style="position: absolute; right: 5px; top: 5px;">
                     <span class="tooltip" style="margin-right: 1em;">?
                         <span class="tooltiptext">

site/static/compare/script.js

@@ -35,10 +35,13 @@ const app = Vue.createApp({
         loadState(state => makeData(state, app));
 
         document.getElementById("filters-toggle").onclick = (e) => {
-            toggleFilters("filters-content", "filters-toggle-indicator");
+            toggleSection("filters-content", "filters-toggle-indicator");
         };
         document.getElementById("search-toggle").onclick = (e) => {
-            toggleFilters("search-content", "search-toggle-indicator");
+            toggleSection("search-content", "search-toggle-indicator");
+        };
+        document.getElementById("aggregations-toggle").onclick = (e) => {
+            toggleSection("aggregations-content", "aggregations-toggle-indicator");
         };
     },
     data() {
@@ -420,7 +423,7 @@ const SummaryRange = {
 <div v-if="range.length > 0">
   [<SummaryPercentValue :value="range[0]" :padWidth="6" />, <SummaryPercentValue :value="range[1]" :padWidth="6" />]
 </div>
-<div v-else>-</div>
+<div v-else style="text-align: center;">-</div>
 `, components: {SummaryPercentValue}
 };
 const SummaryCount = {
@@ -434,39 +437,94 @@ const SummaryCount = {
 };
 
 app.component('summary-table', {
-    props: ['cases'],
+    props: {
+        summary: Object,
+        withLegend: {
+            type: Boolean,
+            default: true
+        }
+    },
     template: `
 <table class="summary-table">
-    <thead>
+    <thead v-if="withLegend">
       <th><!-- icon --></th>
       <th>Range</th>
       <th>Mean</th>
       <th>Count</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" v-if="withLegend">❌</td>
+            <td><SummaryRange :range="summary.regressions.range" /></td>
+            <td><SummaryPercentValue :value="summary.regressions.average" /></td>
+            <td><SummaryCount :cases="summary.regressions.count" :benchmarks="summary.regressions.benchmarks" /></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" v-if="withLegend">✅</td>
+            <td><SummaryRange :range="summary.improvements.range" /></td>
+            <td><SummaryPercentValue :value="summary.improvements.average" /></td>
+            <td><SummaryCount :cases="summary.improvements.count" :benchmarks="summary.improvements.benchmarks" /></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 title="All changes" v-if="withLegend">❌,✅</td>
+            <td><SummaryRange :range="summary.all.range" /></td>
+            <td><SummaryPercentValue :value="summary.all.average" /></td>
+            <td><SummaryCount :cases="summary.all.count" :benchmarks="summary.all.benchmarks" /></td>
         </tr>
     </tbody>
 </table>
 `,
     components: {SummaryRange, SummaryPercentValue, SummaryCount}
 });
+
+app.component("aggregations", {
+    props: {
+        cases: Array
+    },
+    template: `
+<div>
+  <div class="aggregation-section">
+    <div class="header">Profile</div>
+    <div class="groups">
+      <div class="group" v-for="profile in ['check', 'debug', 'opt', 'doc']">
+        <div class="group-header">{{ profile }}</div>
+        <summary-table :summary="calculateSummary('profile', profile)" :withLegend="false"></summary-table>
+      </div>
+    </div>
+  </div>
+  <div class="aggregation-section">
+    <div class="header">Scenario</div>
+    <div class="groups">
+      <div class="group" v-for="scenario in ['full', 'incr-full', 'incr-unchanged', 'incr-patched']">
+        <div class="group-header">{{ scenario }}</div>
+        <summary-table :summary="calculateSummary('scenario', scenario)" :withLegend="false"></summary-table>
+      </div>
+    </div>
+  </div>
+  <div class="aggregation-section">
+    <div class="header">Category</div>
+    <div class="groups">
+      <div class="group" v-for="category in ['primary', 'secondary']">
+        <div class="group-header">{{ category }}</div>
+        <summary-table :summary="calculateSummary('category', category)" :withLegend="false"></summary-table>
+      </div>
+    </div>
+  </div>
+</div>
+`,
+    methods: {
+        calculateSummary(keyAttribute, keyValue) {
+            const benchmarks = [];
+            for (const benchmark of this.cases) {
+                if (benchmark[keyAttribute] === keyValue) {
+                    benchmarks.push(benchmark);
+                }
+            }
+            return computeSummary(benchmarks);
+        }
+    }
+});
+
 app.mixin({
     methods: {
         percentClass(pct) {
@@ -491,7 +549,7 @@ app.mixin({
     }
 });
 
-function toggleFilters(id, toggle) {
+function toggleSection(id, toggle) {
     let styles = document.getElementById(id).style;
     let indicator = document.getElementById(toggle);
     if (styles.display != "none") {
@@ -503,12 +561,9 @@ function toggleFilters(id, toggle) {
     }
 }
 
-toggleFilters("filters-content", "filters-toggle-indicator");
-toggleFilters("search-content", "search-toggle-indicator");
-
-function testCaseString(testCase) {
-    return testCase.benchmark + "-" + testCase.profile + "-" + testCase.scenario;
-}
+toggleSection("filters-content", "filters-toggle-indicator");
+toggleSection("search-content", "search-toggle-indicator");
+toggleSection("aggregations-content", "aggregations-toggle-indicator");
 
 /**
  * Computes summaries of improvements, regressions and all changes from the given `comparisons`.

site/static/compare/style.css

@@ -17,7 +17,7 @@ ul li input {
 
 }
 
-#search-toggle-indicator {
+.toggle-indicator {
     cursor: pointer;
 }
 
@@ -56,10 +56,6 @@ ul li input {
     margin-left: 52px;
 }
 
-#filters-toggle {
-    cursor: pointer;
-}
-
 .section-heading {
     font-size: 16px;
 }
@@ -68,7 +64,7 @@ ul li input {
     font-size: 16px;
 }
 
-#filters {
+.collapsible-section {
     border: 1px black;
     border-style: dotted;
     margin: 12px 0px;
@@ -308,3 +304,27 @@ input[type="checkbox"] {
     padding: 2px 5px;
     vertical-align: middle;
 }
+
+.aggregation-section > .header {
+    margin-top: 5px;
+    font-size: 16px;
+    text-align: center;
+}
+.aggregation-section > .groups {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+.aggregation-section .group {
+    min-width: 45%;
+    border: 1px dotted black;
+    padding: 5px;
+    margin: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.aggregation-section .group-header {
+    margin-bottom: 5px;
+    font-weight: bold;
+}