Add quick links to important metrics to compare page

Author: Kobzol

site/static/compare.html

@@ -45,6 +45,16 @@
                 <input id="submit" type="submit" value="Submit" onclick="submitSettings(); return false;">
             </div>
         </fieldset>
+        <div class="quick-links">
+            <div>Quick links:</div>
+            <div v-for="metric in [
+                ['Instructions', 'instructions:u'],
+                ['Cycles', 'cycles:u'],
+                ['Max RSS', 'max-rss']
+            ]" :class="{ active: stat === metric[1] }">
+                <a :href="createUrlForMetric(metric[1])">{{ metric[0] }}</a>
+            </div>
+        </div>
         <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{{before}}</span> and
             <span id="after">{{after}}</span>
         </h2>

site/static/compare/script.js

@@ -325,6 +325,12 @@ const app = Vue.createApp({
             }
             return result;
         },
+        createUrlForMetric(metric) {
+            let start = findQueryParam("start");
+            let end = findQueryParam("end");
+
+            return createUrlFromParams(createSearchParamsForMetric(metric, start, end));
+        },
     },
 });
 
@@ -486,14 +492,23 @@ function makeData(state, app) {
     });
 }
 
-function submitSettings() {
-    let start = document.getElementById("start-bound").value;
-    let end = document.getElementById("end-bound").value;
-    let stat = getSelected("stats");
+function createSearchParamsForMetric(stat, start, end) {
     let params = new URLSearchParams();
     params.append("start", start);
     params.append("end", end);
     params.append("stat", stat);
+    return params.toString();
+}
+
+function createUrlFromParams(params) {
+    return window.location.protocol + "//" + window.location.host + window.location.pathname + "?" + params;
+}
+
+function submitSettings() {
+    let stat = getSelected("stats");
+    let start = document.getElementById("start-bound").value;
+    let end = document.getElementById("end-bound").value;
+    let params = createSearchParamsForMetric(stat, start, end);
     window.location.search = params.toString();
 }
 

site/static/compare/style.css

@@ -284,3 +284,15 @@ input[type="checkbox"] {
 .silent-link {
     color: inherit;
 }
+
+.quick-links {
+    display: flex;
+    flex-direction: row;
+    margin: 10px 0;
+}
+.quick-links div {
+    margin-right: 10px;
+}
+.quick-links .active {
+    font-weight: bold;
+}