Remove refresh hack for metric selector

Now the metric quick links will be triggered using JS and not as a normal HTML link, but as an advantage, we won't need to force refresh the component from the outside whenever the URL changes.

Author: Kobzol

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

@@ -126,20 +126,9 @@ function storeFilterToUrl(
   changeUrl(urlParams);
 }
 
-/**
- * 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 updateFilter(newFilter: CompileBenchmarkFilter) {
   storeFilterToUrl(newFilter, defaultCompileFilter, getUrlParams());
   filter.value = newFilter;
-  refreshQuickLinks();
 }
 
 function exportData() {
@@ -148,7 +137,6 @@ function exportData() {
 
 const urlParams = getUrlParams();
 
-const quickLinksKey = ref(0);
 const filter = ref(loadFilterFromUrl(urlParams, defaultCompileFilter));
 
 const benchmarkMap = createCompileBenchmarkMap(props.data);
@@ -166,11 +154,7 @@ const filteredSummary = computed(() => computeSummary(comparisons.value));
 </script>
 
 <template>
-  <MetricSelector
-    :metric="selector.stat"
-    :key="quickLinksKey"
-    :benchmark-info="benchmarkInfo"
-  />
+  <MetricSelector :metric="selector.stat" :benchmark-info="benchmarkInfo" />
   <Filters
     :defaultFilter="defaultCompileFilter"
     :initialFilter="filter"

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

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