Store UI filter changes into the URL in compare page

Author: Kobzol

site/static/compare/script.js

@@ -1,5 +1,5 @@
 function findQueryParam(name) {
-    let params = new URLSearchParams(window.location.search.slice(1));
+    const params = new URLSearchParams(window.location.search.slice(1));
     return params.get(name);
 }
 
@@ -28,10 +28,11 @@ function createDefaultFilter() {
 
 /**
  * Loads the initial state of UI filters from URL parameters.
+ * Keep in sync with `storeFilterToUrl` and `createDefaultFilter`!
  */
 function initializeFilterFromUrl() {
     const defaultFilter = createDefaultFilter();
-    let params = new URLSearchParams(window.location.search.slice(1));
+    const params = new URLSearchParams(window.location.search.slice(1));
 
     function getBoolOrDefault(name, defaultValue) {
         const urlValue = params.get(name);
@@ -63,6 +64,43 @@ function initializeFilterFromUrl() {
     };
 }
 
+/**
+ * Stores the given filter parameters into URL, so that the current "view" can be shared with
+ * others easily.
+ */
+function storeFilterToUrl(filter) {
+    const defaultFilter = createDefaultFilter();
+    const params = new URLSearchParams(window.location.search);
+
+    function storeOrReset(name, value, defaultValue) {
+        if (value === defaultValue) {
+            if (params.has(name)) {
+                params.delete(name);
+            }
+        } else {
+            params.set(name, value);
+        }
+    }
+
+    storeOrReset("name", filter.name || null, defaultFilter.name);
+    storeOrReset("nonRelevant", filter.nonRelevant, defaultFilter.nonRelevant);
+    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(params));
+    }
+}
+
 const app = Vue.createApp({
     mounted() {
         const app = this;
@@ -86,6 +124,15 @@ const app = Vue.createApp({
             dataLoading: false
         }
     },
+    watch: {
+        // Every time the filter changes, update URL
+        filter: {
+            handler(newValue, oldValue) {
+                storeFilterToUrl(newValue);
+            },
+            deep: true
+        }
+    },
     computed: {
         notContinuous() {
             return !this.data.is_contiguous;
@@ -735,7 +782,9 @@ function createSearchParamsForMetric(stat, start, end) {
 }
 
 function createUrlFromParams(params) {
-    return window.location.protocol + "//" + window.location.host + window.location.pathname + "?" + params;
+    const url = new URL(window.location);
+    url.search = params;
+    return url.toString();
 }
 
 function submitSettings() {