fix: delayed metrics spec load not retaining expression filters

web-admin/src/features/bookmarks/BookmarksFormDialog.svelte

@@ -42,7 +42,6 @@
     ExploreDashboardConfigProvider,
   } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
   import { onDestroy } from "svelte";
-  import { syncStoreWithSource } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
 
   let {
     organization,
@@ -77,13 +76,9 @@
     dashboardConfigProvider.yamlConfigProvider,
   );
 
-  // Always load from current state. This is the only route to overwrite bookmark state.
+  // Always load from current url state. This is the only route to overwrite bookmark state.
   // A future PR will improve this by adding `Replace` action, in that case this should only have bookmark's state.
-  syncStoreWithSource(
-    expressionFilterManager,
-    async (newUrlParams) => expressionFilterManager.setUrlParams(newUrlParams),
-    () => dashboardConfigProvider.metricsViewsProvider.ready,
-  );
+  expressionFilterManager.storeSync.setUrlParams(page.url.searchParams);
 
   let timeFilterState = $state<
     | {

web-admin/src/features/public-urls/CreatePublicURLForm.svelte

@@ -38,7 +38,6 @@
     ExploreDashboardConfigProvider,
   } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
   import { onDestroy } from "svelte";
-  import { syncStoreWithSource } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
 
   let {
     dashboardResource,
@@ -69,11 +68,7 @@
 
   // Always load from current state. This is the only route to overwrite bookmark state.
   // A future PR will improve this by adding `Replace` action, in that case this should only have bookmark's state.
-  syncStoreWithSource(
-    expressionFilterManager,
-    async (newUrlParams) => expressionFilterManager.setUrlParams(newUrlParams),
-    () => dashboardConfigProvider.metricsViewsProvider.ready,
-  );
+  expressionFilterManager.storeSync.setUrlParams(page.url.searchParams);
 
   const exprByMetricsView = $derived(expressionFilterManager.exprByMetricsView);
   const hasSomeFilter = $derived(Object.keys(exprByMetricsView).length > 0);

web-admin/tests/embeds.spec.ts

@@ -602,7 +602,7 @@ test.describe("Embeds", () => {
         );
 
         await recorder.expectContaining(
-          "tr=PT6H&compare_tr=rill-PP&f.bids_metrics=advertiser_name+IN+%28%27Instacart%27%29",
+          "tr=PT6H&compare_tr=rill-PP&f=advertiser_name+IN+%28%27Instacart%27%29",
         );
       });
     });

web-common/src/features/alerts/create-alert-utils.ts

@@ -82,7 +82,7 @@ export function getNewAlertInitialFiltersFormValues(
     metricsViewProvider,
     yamlConfigProvider,
   );
-  filters.setUrlParams(get(page).url.searchParams);
+  filters.storeSync.setUrlParams(get(page).url.searchParams);
 
   const timeControls = new TimeControls(metricsViewMetadata, {
     selectedTimeRange: exploreState.selectedTimeRange,

web-common/src/features/canvas/CanvasDashboardWrapper.svelte

@@ -9,8 +9,6 @@
   import { getMissingRequiredFilters } from "@rilldata/web-common/features/dashboards/filters/utils.ts";
   import MissingRequiredFiltersMessage from "@rilldata/web-common/features/dashboards/filters/MissingRequiredFiltersMessage.svelte";
   import { type Snippet } from "svelte";
-  import { syncStoreWithSource } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
-  import { goto } from "$app/navigation";
 
   const runtimeClient = useRuntimeClient();
   let instanceId = $derived(runtimeClient.instanceId);
@@ -47,16 +45,6 @@
       dashboardProvider,
     },
   } = $derived(getCanvasStore(canvasName, instanceId));
-  // svelte-ignore state_referenced_locally
-  syncStoreWithSource(
-    expressionFilterManager,
-    (newUrlParams) => {
-      let newSearch = newUrlParams.toString();
-      if (!newSearch) newSearch = "clear=true";
-      return goto("?" + newSearch);
-    },
-    () => expressionFilterManager.metricsViewsProvider.ready,
-  );
 
   $effect(() => {
     dashboardProvider.yamlConfigProvider.setEditable(builder);

web-common/src/features/canvas/CanvasFilterParamsSync.svelte

@@ -2,6 +2,7 @@
   import { getCanvasStore } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { page } from "$app/state";
+  import { untrack } from "svelte";
 
   /**
    * Applies the canvas state a `CanvasProvider` was given to that canvas's filter manager, once
@@ -31,16 +32,16 @@
     getCanvasStore(canvasName, runtimeClient.instanceId),
   );
 
-  // Mirrors the `effectiveUrl` the provider applied: the override when it has one,
-  // the page url otherwise.
-  let searchParams = $derived(
-    urlStateOverride === undefined
-      ? page.url.searchParams
-      : new URLSearchParams(urlStateOverride),
-  );
-
   $effect(() => {
-    if (!canvasEntity.dashboardProvider.metricsViewsProvider.ready) return;
-    canvasEntity.expressionFilterManager.setUrlParams(searchParams);
+    // Mirrors the `effectiveUrl` the provider applied: the override when it has one,
+    // the page url otherwise.
+    const searchParams =
+      urlStateOverride === undefined
+        ? page.url.searchParams
+        : new URLSearchParams(urlStateOverride);
+
+    untrack(() => {
+      canvasEntity.expressionFilterManager.storeSync.setUrlParams(searchParams);
+    });
   });
 </script>

web-common/src/features/canvas/inspector/filters/DimensionFiltersInput.svelte

@@ -7,7 +7,7 @@
     getParamKeyForMv,
   } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
   import VerticalExpressionFilters from "@rilldata/web-common/features/dashboards/filters/VerticalExpressionFilters.svelte";
-  import { syncStoreWithSource } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
+  import { onMount } from "svelte";
 
   let {
     id,
@@ -20,30 +20,28 @@
     excludedDimensions: Record<string, boolean>;
     updateLocalFilterString: (newFilterString: string) => void;
   } = $props();
-  // svelte-ignore state_referenced_locally
-  syncStoreWithSource(
-    localExpressionFilters,
-    async (newUrlParams) => {
-      localExpressionFilters.setUrlParams(newUrlParams);
-      updateLocalFilterString(
-        newUrlParams.get(
-          getParamKeyForMv(
-            localExpressionFilters.metricsViewsProvider.metricsViewNames[0],
-            false,
-          ),
-        ) ?? "",
-      );
-    },
-    () => localExpressionFilters.metricsViewsProvider.ready,
-    undefined,
-    true,
-  );
 
   let localFiltersEnabledOverride = $state(false);
 
   let localFiltersEnabled = $derived(
     localExpressionFilters.hasSomeFilter || localFiltersEnabledOverride,
   );
+
+  onMount(() => {
+    return localExpressionFilters.storeSync.on(
+      "internal-change",
+      (newUrlParams) => {
+        updateLocalFilterString(
+          newUrlParams.get(
+            getParamKeyForMv(
+              localExpressionFilters.metricsViewsProvider.metricsViewNames[0],
+              false,
+            ),
+          ) ?? "",
+        );
+      },
+    );
+  });
 </script>
 
 <div class="flex flex-col gap-y-2 pt-1">

web-common/src/features/canvas/stores/canvas-entity.ts

@@ -228,6 +228,7 @@ export class CanvasEntity {
       if (source && source === get(this.activeComponent)) return;
       this.clearActiveComponent();
     });
+    this.expressionFilterManager.storeSync.syncToUrl("clear=true");
 
     this.processSpec(this.spec);
   }
@@ -492,11 +493,7 @@ export class CanvasEntity {
     if (!isolated) {
       this.saveSnapshot(searchParams.toString());
     }
-    // Only sync when metricsViewsProvider has loaded. Once loaded sync is handled by syncStoreWithSource
-    // TODO: find a good common method of sync between explore and canvas once time filters is also unified
-    if (this.dashboardProvider.metricsViewsProvider.ready) {
-      this.expressionFilterManager.setUrlParams(searchParams);
-    }
+    this.expressionFilterManager.storeSync.setUrlParams(searchParams);
     this.timeManager.state.onUrlChange(searchParams);
     this.applyTabsFromURL(searchParams);
   };