(temp) facing error

site/frontend/src/pages/graphs/page.vue

@@ -4,6 +4,7 @@ import {withLoading} from "../../utils/loading";
 import {GraphData, GraphKind, GraphsSelector} from "../../graph/data";
 import DataSelector, {SelectionParams} from "./data-selector.vue";
 import {
+  changeUrl,
   createUrlWithAppendedParams,
   getUrlParams,
   navigateToUrlParams,
@@ -12,6 +13,8 @@ import {renderPlots} from "../../graph/render";
 import {BenchmarkInfo, loadBenchmarkInfo} from "../../api";
 import AsOf from "../../components/as-of.vue";
 import {loadGraphs} from "../../graph/api";
+import Tabs from "./tabs.vue";
+import {Tab} from "../../types";
 
 function loadSelectorFromUrl(urlParams: Dict<string>): GraphsSelector {
   const start = urlParams["start"] ?? "";
@@ -112,6 +115,28 @@ function updateSelection(params: SelectionParams) {
   );
 }
 
+function storeTabToUrl(urlParams: Dict<string>, tab: Tab) {
+  urlParams["tab"] = tab as string;
+  changeUrl(urlParams);
+}
+
+function loadTabFromUrl(urlParams: Dict<string>): Tab | null {
+  const tab = urlParams["tab"] ?? "";
+  const tabs = {
+    compile: Tab.CompileTime,
+    runtime: Tab.Runtime,
+  };
+  return tabs[tab] ?? null;
+}
+
+const initialTab: Tab = loadTabFromUrl(getUrlParams()) ?? Tab.CompileTime;
+const tab: Ref<Tab> = ref(initialTab);
+
+function changeTab(newTab: Tab) {
+  tab.value = newTab;
+  storeTabToUrl(getUrlParams(), newTab);
+}
+
 const info: BenchmarkInfo = await loadBenchmarkInfo();
 
 const loading = ref(true);
@@ -143,6 +168,7 @@ loadGraphData(selector, loading);
     <h3>This may take a while!</h3>
   </div>
   <div v-else>
+    <Tabs @change-tab="changeTab" :initial-tab="initialTab" />
     <div id="charts"></div>
     <div
       v-if="!hasSpecificSelection(selector)"

site/frontend/src/pages/graphs/tabs.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {Tab} from "../../types";
+import {ref, Ref} from "vue";
+import TabComponent from "../../components/tab.vue";
+
+const props = withDefaults(
+  defineProps<{
+    initialTab?: Tab;
+  }>(),
+  {
+    initialTab: Tab.CompileTime,
+  }
+);
+const emit = defineEmits<{
+  (e: "changeTab", tab: Tab): void;
+}>();
+
+function changeTab(tab: Tab) {
+  activeTab.value = tab;
+  emit("changeTab", tab);
+}
+
+const activeTab: Ref<Tab> = ref(props.initialTab);
+</script>
+
+<template>
+  <div class="wrapper">
+    <TabComponent
+      tooltip="Compilation time benchmarks: measure how long does it take to compile various crates using the compared rustc."
+      title="Compile-time"
+      :selected="activeTab === Tab.CompileTime"
+      @click="changeTab(Tab.CompileTime)"
+    >
+      <template v-slot:summary>
+        gargagfefefe
+      </template>
+    </TabComponent>
+    <TabComponent
+      tooltip="Runtime benchmarks: measure how long does it take to execute (i.e. how fast are) programs compiled by the compared rustc."
+      title="Runtime"
+      :selected="activeTab === Tab.Runtime"
+      @click="changeTab(Tab.Runtime)"
+    >
+      <template v-slot:summary>
+        feafa
+      </template>
+    </TabComponent>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+
+  @media (min-width: 600px) {
+    justify-content: center;
+    flex-direction: row;
+    align-items: normal;
+  }
+}
+</style>

site/frontend/src/types.ts

@@ -0,0 +1,6 @@
+export enum Tab {
+  CompileTime = "compile",
+  Runtime = "runtime",
+  Bootstrap = "bootstrap",
+  ArtifactSize = "artifact-size",
+}

site/frontend/templates/pages/graphs.html

@@ -43,6 +43,8 @@
         margin: 0;
     }
 </style>
+<link rel="stylesheet" type="text/css" href="scripts/graphs.css">
+
 {% endblock %}
 {% block content %}
 <div id="app"></div>