Store compare page tab in URL

Author: Kobzol

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

@@ -2,7 +2,7 @@
 import {loadBenchmarkInfo} from "../../api";
 import AsOf from "../../components/as-of.vue";
 import {
-  createUrlFromParams,
+  changeUrl,
   createUrlWithAppendedParams,
   getUrlParams,
   navigateToUrlParams,
@@ -41,6 +41,21 @@ function loadSelectorFromUrl(urlParams: Dict<string>): CompareSelector {
   };
 }
 
+function loadTabFromUrl(urlParams: Dict<string>): Tab | null {
+  const tab = urlParams["tab"] ?? "";
+  if (tab == Tab.CompileTime) {
+    return Tab.CompileTime;
+  } else if (tab == Tab.Bootstrap) {
+    return Tab.Bootstrap;
+  }
+  return null;
+}
+
+function storeTabToUrl(urlParams: Dict<string>, tab: Tab) {
+  urlParams["tab"] = tab as string;
+  changeUrl(urlParams);
+}
+
 function loadFilterFromUrl(
   urlParams: Dict<string>,
   defaultFilter: DataFilter
@@ -141,10 +156,7 @@ function storeFilterToUrl(
     defaultFilter.category.secondary
   );
 
-  // Change URL without creating a history entry
-  if (history.replaceState) {
-    history.replaceState({}, null, createUrlFromParams(urlParams).toString());
-  }
+  changeUrl(urlParams);
 }
 
 async function loadCompareData(
@@ -246,10 +258,12 @@ const info = await loadBenchmarkInfo();
 const selector = loadSelectorFromUrl(urlParams);
 const filter = ref(loadFilterFromUrl(urlParams, defaultFilter));
 
-const tab: Ref<Tab> = ref(Tab.CompileTime);
+const initialTab: Tab = loadTabFromUrl(urlParams) ?? Tab.CompileTime;
+const tab: Ref<Tab> = ref(initialTab);
 
 function changeTab(newTab: Tab) {
   tab.value = newTab;
+  storeTabToUrl(getUrlParams(), newTab);
 }
 
 const data: Ref<CompareResponse | null> = ref(null);
@@ -273,6 +287,7 @@ loadCompareData(selector, loading);
       <Tabs
         @change-tab="changeTab"
         :data="data"
+        :initial-tab="initialTab"
         :compile-time-summary="totalSummary"
       />
       <template v-if="tab === Tab.CompileTime">

site/frontend/src/pages/compare/types.ts

@@ -68,6 +68,6 @@ export interface CompareResponse {
 }
 
 export enum Tab {
-  CompileTime,
-  Bootstrap,
+  CompileTime = "compile",
+  Bootstrap = "bootstrap",
 }

site/frontend/src/utils/navigation.ts

@@ -42,3 +42,13 @@ export function getUrlParams(): Dict<string> {
 export function navigateToUrlParams(params: URLSearchParams) {
   window.location.search = params.toString();
 }
+
+/**
+ * Changes the current URL without navigating away from the page and without
+ * creating a history entry.
+ */
+export function changeUrl(params: Dict<string>) {
+  if (history.replaceState) {
+    history.replaceState({}, null, createUrlFromParams(params).toString());
+  }
+}