Persist filter and aggregations opened state in LocalStorage

Author: Kobzol

site/frontend/src/pages/compare/header/filters.vue

@@ -4,6 +4,8 @@ import {DataFilter} from "../types";
 import Tooltip from "../tooltip.vue";
 import {ref, toRaw, watch} from "vue";
 import {deepCopy} from "../../../utils/copy";
+import {PREF_FILTERS_OPENED} from "../prefs";
+import {createPersistedRef} from "../../../storage";
 
 const props = defineProps<{
   // When reset, set filter to this value
@@ -30,16 +32,12 @@ watch(
   {deep: true}
 );
 
-function updateOpened(opened: boolean) {
-  filterOpened.value = opened;
-}
-
-const filterOpened = ref(false);
+const opened = createPersistedRef(PREF_FILTERS_OPENED);
 </script>
 
 <template>
   <fieldset class="collapsible-section">
-    <Toggle :opened="filterOpened" @change="updateOpened">
+    <Toggle :opened="opened" @change="(value) => (opened = value)">
       <template #label>Filters</template>
       <template #content>
         <div>

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

@@ -163,15 +163,14 @@ async function loadCompareData(
   selector: CompareSelector,
   loading: Ref<boolean>
 ) {
-  const response: CompareResponse = await withLoading(loading, async () => {
+  data.value = await withLoading(loading, async () => {
     const params = {
       start: selector.start,
       end: selector.end,
       stat: selector.stat,
     };
     return await postMsgpack<CompareResponse>(COMPARE_DATA_URL, params);
   });
-  data.value = response;
   totalSummary.value = computeSummary(
     filterNonRelevant(
       defaultFilter,

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

@@ -0,0 +1,10 @@
+import {createStoredValue} from "../../storage";
+
+export const PREF_FILTERS_OPENED = createStoredValue(
+  "compare.filters-opened",
+  false
+);
+export const PREF_AGGREGATIONS_OPENED = createStoredValue(
+  "compare.aggregations-opened",
+  false
+);

site/frontend/src/pages/compare/summary/aggregations.vue

@@ -2,7 +2,8 @@
 import {computeSummary, SummaryGroup, TestCase} from "../data";
 import Toggle from "../toggle.vue";
 import SummaryTable from "./summary-table.vue";
-import {ref} from "vue";
+import {createPersistedRef} from "../../../storage";
+import {PREF_AGGREGATIONS_OPENED} from "../prefs";
 
 const props = defineProps<{
   cases: TestCase[];
@@ -21,7 +22,7 @@ function calculateSummary(
   return computeSummary(benchmarks);
 }
 
-const opened = ref(false);
+const opened = createPersistedRef(PREF_AGGREGATIONS_OPENED);
 </script>
 
 <template>

site/frontend/src/storage.ts

@@ -0,0 +1,74 @@
+import {ref, Ref, watch} from "vue";
+
+/**
+ * Value that is persisted in LocalStorage.
+ */
+class StoredValue<T> {
+  private _value: T;
+
+  constructor(private key: string, defaultValue: T) {
+    this._value = getFromStorage<T>(key) ?? defaultValue;
+  }
+
+  get value(): T {
+    return this._value;
+  }
+
+  store(value: T) {
+    this._value = value;
+    console.debug(`Changing local preference ${this.key} to ${value}`);
+    setToStorage(this.key, value);
+  }
+}
+
+function getFromStorage<T>(key: string): T | null {
+  try {
+    if (window.localStorage) {
+      const found = window.localStorage.getItem(key);
+      if (found !== null) {
+        try {
+          return JSON.parse(found) as T;
+        } catch (e) {
+          // Something weird is stored inside the storage key.
+          // We should better remove it.
+          window.localStorage.removeItem(key);
+          throw e;
+        }
+      }
+    }
+  } catch (e) {
+    console.error(`Error while loading \`${key}\` from local storage: ${e}`);
+  }
+  return null;
+}
+
+function setToStorage<T>(key: string, value: T) {
+  try {
+    if (window.localStorage) {
+      window.localStorage.setItem(key, JSON.stringify(value));
+    }
+  } catch (e) {
+    console.error(`Error while storing \`${key}\` to local storage: ${e}`);
+  }
+}
+
+const prefix = "rustc-perf.ui";
+
+export function createStoredValue<T>(
+  key: string,
+  defaultValue: T
+): StoredValue<T> {
+  return new StoredValue(`${prefix}.${key}`, defaultValue);
+}
+
+/**
+ * Creates a reactive variable whose state will be persisted to the passed
+ * `storedValue`.
+ */
+export function createPersistedRef<T>(storedValue: StoredValue<T>): Ref<T> {
+  const value = ref(storedValue.value) as Ref<T>;
+  watch(value, (newValue) => {
+    storedValue.store(newValue);
+  });
+  return value;
+}