Add category filter to compare page

Author: Kobzol

site/static/compare.html

@@ -106,29 +106,32 @@
             font-weight: bold;
         }
 
-        #states-list {
+        .states-list {
             display: flex;
             flex-direction: column;
             align-items: start;
             list-style: none;
             margin: 0;
             padding: 0;
         }
-        .section-scenarios {
+        .section-list-wrapper {
             flex-direction: column;
         }
 
         @media (min-width: 760px) {
-            #states-list {
-                justify-content: space-around;
+            .states-list {
+                justify-content: start;
                 flex-direction: row;
                 align-items: center;
                 width: 80%;
             }
-            .section-scenarios {
+            .section-list-wrapper {
                 flex-direction: row;
             }
         }
+        .states-list > li {
+            margin-right: 15px;
+        }
 
         .tooltip {
             position: relative;
@@ -349,7 +352,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                     <div class="section-heading">Filter</div>
                     <input id="filter" type="text" v-model="filter.name" />
                 </div>
-                <div class="section section-scenarios">
+                <div class="section section-list-wrapper">
                     <div class="section-heading">
                         <div style="width: 160px;">
                             <span>Scenarios</span>
@@ -360,7 +363,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                             </span>
                         </div>
                     </div>
-                    <ul id="states-list">
+                    <ul class="states-list">
                         <li>
                             <label>
                                 <input type="checkbox" id="build-full" v-model="filter.scenario.full" />
@@ -412,6 +415,42 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                         </li>
                     </ul>
                 </div>
+                <div class="section section-list-wrapper">
+                    <div class="section-heading">
+                        <div style="width: 160px;">
+                            <span>Categories</span>
+                            <span class="tooltip">?
+                                <span class="tooltiptext">
+                                    Select benchmarks based on their category (primary or secondary).
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                    <ul class="states-list">
+                        <li>
+                            <label>
+                                <input type="checkbox" v-model="filter.category.primary" />
+                                <span class="cache-label">primary</span>
+                            </label>
+                            <div class="tooltip">?
+                                <span class="tooltiptext">
+                                    Real-world benchmarks.
+                                </span>
+                            </div>
+                        </li>
+                        <li>
+                            <label>
+                                <input type="checkbox" v-model="filter.category.secondary" />
+                                <span class="cache-label">secondary</span>
+                            </label>
+                            <div class="tooltip">?
+                                <span class="tooltiptext">
+                                    Artificial benchmarks and stress-tests.
+                                </span>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
                 <div class="section">
                     <div class="section-heading"><span>Show only significant changes</span>
                         <span class="tooltip">?
@@ -663,6 +702,10 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                         incrFull: true,
                         incrUnchanged: true,
                         incrPatched: true
+                    },
+                    category: {
+                        primary: true,
+                        secondary: true
                     }
                 },
                 showRawData: false,
@@ -702,6 +745,12 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                         }
                     }
 
+                    function categoryFilter(category) {
+                        if (category === 'primary' && !filter.category.primary) return false;
+                        if (category === 'secondary' && !filter.category.secondary) return false;
+                        return true;
+                    }
+
                     function shouldShowTestCase(testCase) {
                         const name = `${testCase.benchmark} ${testCase.profile} ${testCase.scenario}`;
                         let nameFilter = filter.name && filter.name.trim();
@@ -711,7 +760,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
 
                         const magnitudeFilter = filter.filterVerySmall ? testCase.magnitude != "very small" : true;
 
-                        return scenarioFilter(testCase.scenario) && significanceFilter && nameFilter && magnitudeFilter;
+                        return scenarioFilter(testCase.scenario) && categoryFilter(testCase.category) && significanceFilter && nameFilter && magnitudeFilter;
                     }
 
                     let testCases =