Merge pull request #1615 from Kobzol/ui-store-preferences

Store filter and aggregations state in LocalStorage

Author: Kobzol

site/frontend/src/pages/compare/header/data-selector.vue

@@ -37,11 +37,13 @@ function submitSettings() {
   const params = {start, end, stat};
   emit("change", params);
 }
+
+const opened = ref(false);
 </script>
 
 <template>
   <fieldset class="settings">
-    <Toggle>
+    <Toggle :opened="opened" @change="(value) => (opened = value)">
       <template #label>Do another comparison</template>
       <template #content>
         <div class="commits section">

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
@@ -29,11 +31,13 @@ watch(
   },
   {deep: true}
 );
+
+const opened = createPersistedRef(PREF_FILTERS_OPENED);
 </script>
 
 <template>
   <fieldset class="collapsible-section">
-    <Toggle :defaultOpened="false">
+    <Toggle :opened="opened" @change="(value) => (opened = value)">
       <template #label>Filters</template>
       <template #content>
         <div>
@@ -46,9 +50,8 @@ watch(
               <div style="width: 160px">
                 <span>Profiles</span>
                 <Tooltip
-                  >The different compilation profiles (check, debug, opt,
-                  doc).</Tooltip
-                >
+                  >The different compilation profiles (check, debug, opt, doc).
+                </Tooltip>
               </div>
             </div>
             <ul class="states-list">
@@ -84,9 +87,8 @@ watch(
                   <span class="cache-label">opt</span>
                 </label>
                 <Tooltip
-                  >Release build that produces as optimized code as
-                  possible.</Tooltip
-                >
+                  >Release build that produces as optimized code as possible.
+                </Tooltip>
               </li>
               <li>
                 <label>
@@ -125,9 +127,8 @@ watch(
                   <span class="cache-label">full</span>
                 </label>
                 <Tooltip
-                  >A non-incremental full build starting with empty
-                  cache.</Tooltip
-                >
+                  >A non-incremental full build starting with empty cache.
+                </Tooltip>
               </li>
               <li>
                 <label>
@@ -139,8 +140,8 @@ watch(
                   <span class="cache-label">incr-full</span>
                 </label>
                 <Tooltip
-                  >An incremental build starting with empty cache.</Tooltip
-                >
+                  >An incremental build starting with empty cache.
+                </Tooltip>
               </li>
               <li>
                 <label>
@@ -181,8 +182,8 @@ watch(
                 <span>Categories</span>
                 <Tooltip
                   >Select benchmarks based on their category (primary or
-                  secondary).</Tooltip
-                >
+                  secondary).
+                </Tooltip>
               </div>
             </div>
             <ul class="states-list">

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,6 +2,8 @@
 import {computeSummary, SummaryGroup, TestCase} from "../data";
 import Toggle from "../toggle.vue";
 import SummaryTable from "./summary-table.vue";
+import {createPersistedRef} from "../../../storage";
+import {PREF_AGGREGATIONS_OPENED} from "../prefs";
 
 const props = defineProps<{
   cases: TestCase[];
@@ -19,11 +21,13 @@ function calculateSummary(
   }
   return computeSummary(benchmarks);
 }
+
+const opened = createPersistedRef(PREF_AGGREGATIONS_OPENED);
 </script>
 
 <template>
   <fieldset class="collapsible-section">
-    <Toggle>
+    <Toggle :opened="opened" @change="(value) => (opened = value)">
       <template #label>Aggregations</template>
       <template #content>
         <div>

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

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import {ref} from "vue";
-
 const props = withDefaults(
   defineProps<{
-    defaultOpened?: boolean;
+    opened?: boolean;
   }>(),
   {
-    defaultOpened: false,
+    opened: false,
   }
 );
 
-const opened = ref(props.defaultOpened);
+const emit = defineEmits<{
+  (e: "change", opened: boolean): void;
+}>();
 </script>
 
 <template>
-  <legend class="toggle section-heading" @click="opened = !opened">
+  <legend class="toggle section-heading" @click="emit('change', !props.opened)">
     <slot name="label"></slot>
-    <span>{{ opened ? " ▼" : " ▶" }}</span>
+    <span>{{ props.opened ? " ▼" : " ▶" }}</span>
   </legend>
-  <div v-show="opened">
+  <div v-show="props.opened">
     <slot name="content"></slot>
   </div>
 </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;
+}