Add buttons to move between categories quickly to compare page

Author: Kobzol

site/static/compare.html

@@ -339,7 +339,11 @@ <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"
+                section-link="secondary"
+                :section-link-up="false"
+            ></test-cases-table>
             <hr />
             <test-cases-table
                 title="Secondary"
@@ -349,7 +353,11 @@ <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"
+                section-link="primary"
+                :section-link-up="true"
+            ></test-cases-table>
             <br />
             <hr />
             <div>

site/static/compare/script.js

@@ -335,7 +335,19 @@ 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,
+        sectionLink: String,
+        sectionLinkUp: Boolean
+    },
     methods: {
         detailedQueryLink(commit, testCase) {
             return `/detailed-query.html?commit=${commit.commit}&benchmark=${testCase.benchmark + "-" + testCase.profile}&scenario=${testCase.scenario}`;
@@ -363,8 +375,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 :title="'To ' + sectionLink + ' benchmarks'">
+    <a :href="'#' + sectionLink + '-benchmarks'">
+      <template v-if="sectionLinkUp">⮭</template>
+      <template v-else>⮯</template>
+    </a>
+  </span>
+</div>
 <div v-if="cases.length === 0" style="text-align: center;">
   No results
 </div>