Add quick metrics switcher to compile page

Author: Kobzol

site/frontend/src/api.ts

@@ -8,6 +8,6 @@ export interface BenchmarkInfo {
   as_of: string | null;
 }
 
-export async function loadBenchmarkInfo() {
+export async function loadBenchmarkInfo(): Promise<BenchmarkInfo> {
   return await getJson<BenchmarkInfo>(INFO_URL);
 }

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import QuickLinks from "./quick-links.vue";
+import MetricSelector from "../metric-selector.vue";
 import Filters from "./filters.vue";
 import OverallSummary from "../summary/overall-summary.vue";
 import Aggregations from "./aggregations.vue";
@@ -15,10 +15,12 @@ import {
   createCompileBenchmarkMap,
   defaultCompileFilter,
 } from "./common";
+import {BenchmarkInfo} from "../../../api";
 
 const props = defineProps<{
   data: CompareResponse;
   selector: CompareSelector;
+  benchmarkInfo: BenchmarkInfo;
 }>();
 
 function loadFilterFromUrl(
@@ -164,7 +166,11 @@ const filteredSummary = computed(() => computeSummary(comparisons.value));
 </script>
 
 <template>
-  <QuickLinks :stat="selector.stat" :key="quickLinksKey" />
+  <MetricSelector
+    :metric="selector.stat"
+    :key="quickLinksKey"
+    :benchmark-info="benchmarkInfo"
+  />
   <Filters
     :defaultFilter="defaultCompileFilter"
     :initialFilter="filter"

site/frontend/src/pages/compare/compile/quick-links.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import {
+  createUrlWithAppendedParams,
+  navigateToUrlParams,
+} from "../../utils/navigation";
+import {BenchmarkInfo} from "../../api";
+
+const props = defineProps<{
+  metric: string;
+  benchmarkInfo: BenchmarkInfo;
+}>();
+
+function createMetric(
+  label: string,
+  metric: string,
+  description: string
+): {
+  label: string;
+  metric: string;
+  description: string;
+} {
+  return {label, metric, description};
+}
+
+function createUrlForMetric(metric: string): URL {
+  const params = {stat: metric};
+  return createUrlWithAppendedParams(params);
+}
+
+function changeMetric(e: Event) {
+  const target = e.target as HTMLSelectElement;
+  const metric = target.value;
+  navigateToUrlParams(createUrlForMetric(metric).searchParams);
+}
+
+const metrics = [
+  createMetric(
+    "Instructions",
+    "instructions:u",
+    "Number of executed instructions"
+  ),
+  createMetric("Cycles", "cycles:u", "Number of executed cycles"),
+  createMetric("Wall time", "wall-time", "Wall time"),
+  createMetric("Max RSS", "max-rss", "Peak memory usage (resident set size)"),
+  createMetric(
+    "Binary size",
+    "size:linked_artifact",
+    "Size of the generated binary artifact"
+  ),
+];
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="label">Select metric:</div>
+    <div
+      v-for="metric in metrics"
+      :class="{active: props.metric === metric.metric}"
+      :title="metric.description"
+    >
+      <a :href="createUrlForMetric(metric.metric).toString()">{{
+        metric.label
+      }}</a>
+    </div>
+    <select class="stats" @change="changeMetric">
+      <option
+        v-for="value in benchmarkInfo.stats"
+        :value="value"
+        :selected="value === metric"
+      >
+        {{ value }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 10px 0;
+
+  div {
+    margin-right: 10px;
+  }
+
+  .active {
+    font-weight: bold;
+  }
+
+  .label {
+    display: none;
+
+    @media (min-width: 600px) {
+      display: block;
+    }
+  }
+}
+</style>

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

@@ -156,7 +156,11 @@ loadCompareData(selector, loading);
         :runtime-summary="runtimeSummary"
       />
       <template v-if="activeTab === Tab.CompileTime">
-        <CompileBenchmarksPage :data="data" :selector="selector" />
+        <CompileBenchmarksPage
+          :data="data"
+          :selector="selector"
+          :benchmark-info="info"
+        />
       </template>
       <BootstrapTable v-if="activeTab === Tab.Bootstrap" :data="data" />
       <template v-if="runtimeDataAvailable && activeTab === Tab.Runtime">