Merge pull request #1593 from Kobzol/compare-page-filters

Fix compare page regression

Author: Kobzol

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

@@ -5,34 +5,34 @@ import {withLoading} from "../../utils/loading";
 import {renderPlots} from "./plots";
 import {BootstrapData, BootstrapSelector} from "./state";
 import {BOOTSTRAP_DATA_URL} from "../../urls";
-import {createUrlParams, getUrlParams, navigateToUrlParams} from "../../utils/navigation";
+import {createUrlWithAppendedParams, getUrlParams, navigateToUrlParams} from "../../utils/navigation";
 
 import {postJson} from "../../utils/requests";
 
 async function loadBootstrapData(selector: BootstrapSelector, loading: Ref<boolean>) {
-    const bootstrapData: BootstrapData = await withLoading(loading, () => postJson<BootstrapData>(BOOTSTRAP_DATA_URL, selector));
+  const bootstrapData: BootstrapData = await withLoading(loading, () => postJson<BootstrapData>(BOOTSTRAP_DATA_URL, selector));
 
-    // Wait for the UI to be updated, which also resets the plot HTML elements.
-    // Then draw the plots.
-    await nextTick();
-    renderPlots(bootstrapData, selector);
+  // Wait for the UI to be updated, which also resets the plot HTML elements.
+  // Then draw the plots.
+  await nextTick();
+  renderPlots(bootstrapData, selector);
 }
 
 function loadSelectorFromUrl(urlParams: Dict<string>): BootstrapSelector {
-    const start = urlParams["start"] ?? "";
-    const end = urlParams["end"] ?? "";
-    return {
-        start,
-        end,
-        min_seconds: 25
-    };
+  const start = urlParams["start"] ?? "";
+  const end = urlParams["end"] ?? "";
+  return {
+    start,
+    end,
+    min_seconds: 25
+  };
 }
 
 function updateSelection(params: SelectionParams) {
-    navigateToUrlParams(createUrlParams({
-        start: params.start,
-        end: params.end
-    }));
+  navigateToUrlParams(createUrlWithAppendedParams({
+    start: params.start,
+    end: params.end
+  }).searchParams);
 }
 
 const loading = ref(true);

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

@@ -3,18 +3,25 @@ import Toggle from "../toggle.vue";
 import {DataFilter} from "../types";
 import Tooltip from "../tooltip.vue";
 import {ref, toRaw, watch} from "vue";
+import {deepCopy} from "../../../utils/copy";
 
-const props = defineProps<{defaultFilter: DataFilter}>();
+const props = defineProps<{
+  // When reset, set filter to this value
+  defaultFilter: DataFilter,
+  // Initialize the filter with this value
+  initialFilter: DataFilter
+}>();
 const emit = defineEmits<{
   (e: "change", filter: DataFilter): void;
   (e: "export"): void;
 }>();
 
 function reset() {
-  filter.value = props.defaultFilter;
+  // We must not change the default filter
+  filter.value = deepCopy(props.defaultFilter);
 }
 
-let filter = ref({...props.defaultFilter});
+let filter = ref(deepCopy(props.initialFilter));
 watch(filter, (newValue, _) => {
   emit("change", toRaw(newValue));
 }, {deep: true});

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {createUrlWithParams, getUrlParams} from "../../../utils/navigation";
+import {createUrlWithAppendedParams, getUrlParams} from "../../../utils/navigation";
 
 const props = defineProps<{stat: string}>();
 
@@ -14,7 +14,7 @@ function createMetric(label: string, stat: string, description: string): {
 function createUrlForMetric(stat: string): string {
   const params = getUrlParams();
   params["stat"] = stat;
-  return createUrlWithParams(params).toString();
+  return createUrlWithAppendedParams(params).toString();
 }
 
 const metrics = [

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import {loadBenchmarkInfo} from "../../api";
 import AsOf from "../../components/as-of.vue";
-import {createUrlParams, getUrlParams, navigateToUrlParams} from "../../utils/navigation";
+import {
+  createUrlFromParams,
+  createUrlWithAppendedParams,
+  getUrlParams,
+  navigateToUrlParams
+} from "../../utils/navigation";
 import {computed, Ref, ref} from "vue";
 import {withLoading} from "../../utils/loading";
 import {postMsgpack} from "../../utils/requests";
@@ -34,6 +39,72 @@ function loadSelectorFromUrl(urlParams: Dict<string>): CompareSelector {
   };
 }
 
+function loadFilterFromUrl(urlParams: Dict<string>, defaultFilter: DataFilter): DataFilter {
+  function getBoolOrDefault(name: string, defaultValue: boolean): boolean {
+    if (urlParams.hasOwnProperty(name)) {
+      return urlParams[name] === "true";
+    }
+    return defaultValue;
+  }
+
+  return {
+    name: urlParams["name"] ?? defaultFilter.name,
+    nonRelevant: getBoolOrDefault("nonRelevant", defaultFilter.nonRelevant),
+    showRawData: getBoolOrDefault("showRawData", defaultFilter.showRawData),
+    profile: {
+      check: getBoolOrDefault("check", defaultFilter.profile.check),
+      debug: getBoolOrDefault("debug", defaultFilter.profile.debug),
+      opt: getBoolOrDefault("opt", defaultFilter.profile.opt),
+      doc: getBoolOrDefault("doc", defaultFilter.profile.doc)
+    },
+    scenario: {
+      full: getBoolOrDefault("full", defaultFilter.scenario.full),
+      incrFull: getBoolOrDefault("incrFull", defaultFilter.scenario.incrFull),
+      incrUnchanged: getBoolOrDefault("incrUnchanged", defaultFilter.scenario.incrUnchanged),
+      incrPatched: getBoolOrDefault("incrPatched", defaultFilter.scenario.incrPatched)
+    },
+    category: {
+      primary: getBoolOrDefault("primary", defaultFilter.category.primary),
+      secondary: getBoolOrDefault("secondary", defaultFilter.category.secondary)
+    }
+  };
+}
+
+/**
+ * Stores the given filter parameters into URL, so that the current "view" can be shared with
+ * others easily.
+ */
+function storeFilterToUrl(filter: DataFilter, defaultFilter: DataFilter, urlParams: Dict<string>) {
+  function storeOrReset<T extends boolean | string>(name: string, value: T, defaultValue: T) {
+    if (value === defaultValue) {
+      if (urlParams.hasOwnProperty(name)) {
+        delete urlParams[name];
+      }
+    } else {
+      urlParams[name] = value.toString();
+    }
+  }
+
+  storeOrReset("name", filter.name || null, defaultFilter.name);
+  storeOrReset("nonRelevant", filter.nonRelevant, defaultFilter.nonRelevant);
+  storeOrReset("showRawData", filter.showRawData, defaultFilter.showRawData);
+  storeOrReset("check", filter.profile.check, defaultFilter.profile.check);
+  storeOrReset("debug", filter.profile.debug, defaultFilter.profile.debug);
+  storeOrReset("opt", filter.profile.opt, defaultFilter.profile.opt);
+  storeOrReset("doc", filter.profile.doc, defaultFilter.profile.doc);
+  storeOrReset("full", filter.scenario.full, defaultFilter.scenario.full);
+  storeOrReset("incrFull", filter.scenario.incrFull, defaultFilter.scenario.incrFull);
+  storeOrReset("incrUnchanged", filter.scenario.incrUnchanged, defaultFilter.scenario.incrUnchanged);
+  storeOrReset("incrPatched", filter.scenario.incrPatched, defaultFilter.scenario.incrPatched);
+  storeOrReset("primary", filter.category.primary, defaultFilter.category.primary);
+  storeOrReset("secondary", filter.category.secondary, defaultFilter.category.secondary);
+
+  // Change URL without creating a history entry
+  if (history.replaceState) {
+    history.replaceState({}, null, createUrlFromParams(urlParams).toString());
+  }
+}
+
 async function loadCompareData(selector: CompareSelector, loading: Ref<boolean>) {
   const response: CompareResponse = await withLoading(loading, async () => {
     const params = {
@@ -47,17 +118,24 @@ async function loadCompareData(selector: CompareSelector, loading: Ref<boolean>)
 }
 
 function updateSelection(params: SelectionParams) {
-  navigateToUrlParams(createUrlParams({
+  navigateToUrlParams(createUrlWithAppendedParams({
     start: params.start,
     end: params.end,
     stat: params.stat
-  }));
+  }).searchParams);
+}
+
+function updateFilter(newFilter: DataFilter) {
+  filter.value = newFilter;
+  storeFilterToUrl(newFilter, defaultFilter, getUrlParams());
 }
 
 function exportData() {
   exportToMarkdown(testCases.value);
 }
 
+const urlParams = getUrlParams();
+
 const defaultFilter: DataFilter = {
   name: null,
   nonRelevant: false,
@@ -87,8 +165,8 @@ const filteredSummary = computed(() => computeSummary(testCases.value));
 const loading = ref(false);
 
 const info = await loadBenchmarkInfo();
-const selector = loadSelectorFromUrl(getUrlParams());
-const filter = ref({...defaultFilter});
+const selector = loadSelectorFromUrl(urlParams);
+const filter = ref(loadFilterFromUrl(urlParams, defaultFilter));
 
 const data: Ref<CompareResponse | null> = ref(null);
 loadCompareData(selector, loading);
@@ -104,7 +182,9 @@ loadCompareData(selector, loading);
     </div>
     <div v-if="data !== null">
       <QuickLinks :stat="selector.stat" />
-      <Filters :defaultFilter="defaultFilter" @change="f => filter = f"
+      <Filters :defaultFilter="defaultFilter"
+               :initialFilter="filter"
+               @change="updateFilter"
                @export="exportData" />
       <OverallTable :summary="filteredSummary" />
       <Aggregations :cases="testCases" />

site/frontend/src/pages/detailed-query.ts

@@ -1,4 +1,4 @@
-import {createUrlWithParams, getUrlParams} from "../utils/navigation";
+import {createUrlWithAppendedParams, getUrlParams} from "../utils/navigation";
 import {postMsgpack} from "../utils/requests";
 import {SELF_PROFILE_DATA_URL} from "../urls";
 
@@ -158,7 +158,7 @@ function populate_data(data, state: Selector) {
       }
     }
     let inner = th.innerHTML;
-    th.innerHTML = `<a href="${createUrlWithParams(clickState).toString()}">${inner}</a>`;
+    th.innerHTML = `<a href="${createUrlWithAppendedParams(clickState).toString()}">${inner}</a>`;
   }
 
   if (!state.scenario.includes("incr-")) {