Add buttons to move between categories quickly to compare page

Author: Kobzol

site/static/compare.html

@@ -339,7 +339,9 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                 :commit-b="data.b"
                 :stat="stat"
                 :before="before"
-                :after="after"></test-cases-table>
+                :after="after"
+                id="primary-benchmarks"
+            ></test-cases-table>
             <hr />
             <test-cases-table
                 title="Secondary"
@@ -349,7 +351,9 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                 :commit-b="data.b"
                 :stat="stat"
                 :before="before"
-                :after="after"></test-cases-table>
+                :after="after"
+                id="secondary-benchmarks"
+            ></test-cases-table>
             <br />
             <hr />
             <div>

site/static/compare/script.js

@@ -335,7 +335,17 @@ const app = Vue.createApp({
 });
 
 app.component('test-cases-table', {
-    props: ['cases', 'showRawData', 'commitA', 'commitB', 'before', 'after', 'title', 'stat'],
+    props: {
+        cases: Array,
+        showRawData: Boolean,
+        commitA: Object,
+        commitB: Object,
+        before: Date,
+        after: Date,
+        title: String,
+        stat: String,
+        id: String,
+    },
     methods: {
         detailedQueryLink(commit, testCase) {
             return `/detailed-query.html?commit=${commit.commit}&benchmark=${testCase.benchmark + "-" + testCase.profile}&scenario=${testCase.scenario}`;
@@ -363,8 +373,16 @@ app.component('test-cases-table', {
         },
     },
     template: `
-<div class="bench-table">
-<div class="category-title">{{ title }} benchmarks</div>
+<div class="bench-table" :id="id">
+<div class="category-title">
+  {{ title }} benchmarks
+  <span v-if="title == 'Primary'" title="To secondary benchmarks">
+    <a href="#secondary-benchmarks">⮯</a>
+  </span>
+  <span v-else title="To primary benchmarks">
+    <a href="#primary-benchmarks">⮭</a>
+  </span>
+</div>
 <div v-if="cases.length === 0" style="text-align: center;">
   No results
 </div>