Render quick links with normal HTML instead of JS

This basically reverts c7f618f, and applies the quick link refresh logic also for the runtime tab. I didn't realize before that using JS for the links makes it impossible to quickly open multiple metrics in a new tab, which is quite useful.

Author: Kobzol

site/frontend/src/pages/compare/compile/compile-page.vue

@@ -161,6 +161,17 @@ function storeFilterToUrl(
 function updateFilter(newFilter: CompileBenchmarkFilter) {
   storeFilterToUrl(newFilter, defaultCompileFilter, getUrlParams());
   filter.value = newFilter;
+  refreshQuickLinks();
+}
+
+/**
+ * When the filter changes, the URL is updated.
+ * After that happens, we want to re-render the quick links component, because
+ * it contains links that are "relative" to the current URL. Changing this
+ * key ref will cause it to be re-rendered.
+ */
+function refreshQuickLinks() {
+  quickLinksKey.value += 1;
 }
 
 function exportData() {
@@ -169,6 +180,7 @@ function exportData() {
 
 const urlParams = getUrlParams();
 
+const quickLinksKey = ref(0);
 const filter = ref(loadFilterFromUrl(urlParams, defaultCompileFilter));
 
 const benchmarkMap = createCompileBenchmarkMap(props.data);
@@ -187,6 +199,7 @@ const filteredSummary = computed(() => computeSummary(comparisons.value));
 
 <template>
   <MetricSelector
+    :key="quickLinksKey"
     :quick-links="importantCompileMetrics"
     :selected-metric="selector.stat"
     :metrics="benchmarkInfo.compile_metrics"

site/frontend/src/pages/compare/metric-selector.vue

@@ -12,16 +12,15 @@ const props = defineProps<{
   metrics: string[];
 }>();
 
-function navigateToMetric(metric: string) {
+function createUrlForMetric(metric: string): URL {
   const params = {stat: metric};
-  const url = createUrlWithAppendedParams(params);
-  navigateToUrlParams(url.searchParams);
+  return createUrlWithAppendedParams(params);
 }
 
 function changeMetric(e: Event) {
   const target = e.target as HTMLSelectElement;
   const metric = target.value;
-  navigateToMetric(metric);
+  navigateToUrlParams(createUrlForMetric(metric).searchParams);
 }
 </script>
 
@@ -33,7 +32,7 @@ function changeMetric(e: Event) {
       :class="{active: props.selectedMetric === metric.metric}"
       :title="metric.description"
     >
-      <a href="#" @click.prevent="() => navigateToMetric(metric.metric)">{{
+      <a :href="createUrlForMetric(metric.metric).toString()">{{
         metric.label
       }}</a>
     </div>

site/frontend/src/pages/compare/runtime/runtime-page.vue

@@ -73,9 +73,22 @@ function storeFilterToUrl(
 function updateFilter(newFilter: RuntimeBenchmarkFilter) {
   storeFilterToUrl(newFilter, defaultRuntimeFilter, getUrlParams());
   filter.value = newFilter;
+  refreshQuickLinks();
+}
+
+/**
+ * When the filter changes, the URL is updated.
+ * After that happens, we want to re-render the quick links component, because
+ * it contains links that are "relative" to the current URL. Changing this
+ * key ref will cause it to be re-rendered.
+ */
+function refreshQuickLinks() {
+  quickLinksKey.value += 1;
 }
 
 const urlParams = getUrlParams();
+
+const quickLinksKey = ref(0);
 const filter = ref(loadFilterFromUrl(urlParams, defaultRuntimeFilter));
 
 const allComparisons = computed(() =>
@@ -92,6 +105,7 @@ const filteredSummary = computed(() => computeSummary(comparisons.value));
 
 <template>
   <MetricSelector
+    :key="quickLinksKey"
     :quick-links="importantRuntimeMetrics"
     :selected-metric="selector.stat"
     :metrics="benchmarkInfo.runtime_metrics"