From 8e5b31f60841eb6e285ebdf98e7c85abed90cd52 Mon Sep 17 00:00:00 2001
From: Eric P Green <ericpgreen2@gmail.com>
Date: Wed, 18 Dec 2024 10:24:41 -0800
Subject: [PATCH 1/7] Add `refetchOnWindowFocus` to project status queries
 (#6287)

---
 .../ProjectGlobalStatusIndicator.svelte       |  7 ++++++-
 .../projects/status/ProjectParseErrors.svelte | 21 ++++++++++++++-----
 .../projects/status/ProjectResources.svelte   |  5 ++++-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/web-admin/src/features/projects/status/ProjectGlobalStatusIndicator.svelte b/web-admin/src/features/projects/status/ProjectGlobalStatusIndicator.svelte
index 6c6b34569f0..bc0a718d4f5 100644
--- a/web-admin/src/features/projects/status/ProjectGlobalStatusIndicator.svelte
+++ b/web-admin/src/features/projects/status/ProjectGlobalStatusIndicator.svelte
@@ -30,12 +30,17 @@
               .length > 0
           );
         },
+        refetchOnMount: true,
+        refetchOnWindowFocus: true,
       },
     },
   );
   $: hasResourceErrors = $hasResourceErrorsQuery.data;
 
-  $: projectParserQuery = useProjectParser(queryClient, instanceId);
+  $: projectParserQuery = useProjectParser(queryClient, instanceId, {
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+  });
   $: hasParseErrors =
     $projectParserQuery?.data?.projectParser.state.parseErrors.length > 0;
 </script>
diff --git a/web-admin/src/features/projects/status/ProjectParseErrors.svelte b/web-admin/src/features/projects/status/ProjectParseErrors.svelte
index eb1ec2ad4e8..ff32404d884 100644
--- a/web-admin/src/features/projects/status/ProjectParseErrors.svelte
+++ b/web-admin/src/features/projects/status/ProjectParseErrors.svelte
@@ -8,10 +8,21 @@
   import { createRuntimeServiceGetResource } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
 
-  $: projectParserQuery = createRuntimeServiceGetResource($runtime.instanceId, {
-    "name.kind": ResourceKind.ProjectParser,
-    "name.name": SingletonProjectParserName,
-  });
+  $: ({ instanceId } = $runtime);
+
+  $: projectParserQuery = createRuntimeServiceGetResource(
+    instanceId,
+    {
+      "name.kind": ResourceKind.ProjectParser,
+      "name.name": SingletonProjectParserName,
+    },
+    {
+      query: {
+        refetchOnMount: true,
+        refetchOnWindowFocus: true,
+      },
+    },
+  );
   $: ({ isLoading, isSuccess, data, error } = $projectParserQuery);
 
   $: parseErrors = data?.resource?.projectParser.state.parseErrors;
@@ -30,7 +41,7 @@
   {:else if isSuccess}
     {#if parseErrors && parseErrors.length > 0}
       <ul class="border rounded-sm">
-        {#each parseErrors as error}
+        {#each parseErrors as error (error.message)}
           <li
             class="flex gap-x-5 justify-between py-1 px-9 border-b border-gray-200 bg-red-50 font-mono last:border-b-0"
           >
diff --git a/web-admin/src/features/projects/status/ProjectResources.svelte b/web-admin/src/features/projects/status/ProjectResources.svelte
index 68e91debcbb..01e468c41c5 100644
--- a/web-admin/src/features/projects/status/ProjectResources.svelte
+++ b/web-admin/src/features/projects/status/ProjectResources.svelte
@@ -16,8 +16,10 @@
 
   let isReconciling = false;
 
+  $: ({ instanceId } = $runtime);
+
   $: resources = createRuntimeServiceListResources(
-    $runtime.instanceId,
+    instanceId,
     // All resource "kinds"
     undefined,
     {
@@ -30,6 +32,7 @@
           );
         },
         refetchOnMount: true,
+        refetchOnWindowFocus: true,
         refetchInterval: isReconciling ? 500 : false,
       },
     },

From 671a1a634c564c711ee053c52c4ec988e6ec3bdd Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Thu, 19 Dec 2024 11:06:18 +0530
Subject: [PATCH 2/7] fix: human readable params issues like special chars in
 filters and url history issues (#6301)

* Allow special chars in column names in filters

* Use time controls store in url params calcs

* Remove session store after navigating away from dashboard

* Fix bookmarks not being applied if the store was initialised

* PR comments
---
 web-admin/src/features/bookmarks/selectors.ts |   1 +
 .../dashboards/query-mappers/utils.ts         |   8 ++
 .../dashboards/stores/dashboard-stores.ts     |   2 -
 .../dashboards/stores/test-data/data.ts       |   1 +
 .../time-controls/time-control-store.ts       |  72 ++++++++---
 .../url-state/DashboardURLStateSync.svelte    | 115 ++++++++++++++----
 .../url-state/convertExploreStateToPreset.ts  |  46 +++----
 .../convertExploreStateToURLSearchParams.ts   | 102 ++++++++++------
 .../url-state/convertPresetToExploreState.ts  |   5 +
 .../url-state/explore-web-view-store.spec.ts  |  10 +-
 .../url-state/explore-web-view-store.ts       |  20 ++-
 .../url-state/filters/converters.ts           |  29 ++++-
 .../url-state/filters/expression.cjs          |   2 +-
 .../url-state/filters/expression.ne           |   2 +-
 .../url-state/filters/expression.spec.ts      |  44 +++++--
 .../url-state/getUpdatedUrlForExploreState.ts |  39 ------
 .../url-state/url-state-variations.spec.ts    |   7 ++
 17 files changed, 342 insertions(+), 163 deletions(-)
 delete mode 100644 web-common/src/features/dashboards/url-state/getUpdatedUrlForExploreState.ts

diff --git a/web-admin/src/features/bookmarks/selectors.ts b/web-admin/src/features/bookmarks/selectors.ts
index d870486ad62..026c7627edc 100644
--- a/web-admin/src/features/bookmarks/selectors.ts
+++ b/web-admin/src/features/bookmarks/selectors.ts
@@ -156,6 +156,7 @@ export function convertBookmarkToUrlSearchParams(
       ...exploreStateFromBookmark,
     } as MetricsExplorerEntity,
     exploreSpec,
+    undefined, // TODO
     defaultExplorePreset,
   );
 }
diff --git a/web-admin/src/features/dashboards/query-mappers/utils.ts b/web-admin/src/features/dashboards/query-mappers/utils.ts
index 9168f2bb090..f2c14056076 100644
--- a/web-admin/src/features/dashboards/query-mappers/utils.ts
+++ b/web-admin/src/features/dashboards/query-mappers/utils.ts
@@ -1,5 +1,6 @@
 import { createInExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
+import { getTimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { PreviousCompleteRangeMap } from "@rilldata/web-common/features/dashboards/time-controls/time-range-mappers";
 import { convertExploreStateToURLSearchParams } from "@rilldata/web-common/features/dashboards/url-state/convertExploreStateToURLSearchParams";
 import { getDefaultExplorePreset } from "@rilldata/web-common/features/dashboards/url-state/getDefaultExplorePreset";
@@ -182,6 +183,7 @@ export async function getExplorePageUrl(
   const url = new URL(`${curPageUrl.protocol}//${curPageUrl.host}`);
   url.pathname = `/${organization}/${project}/explore/${exploreName}`;
 
+  const metricsViewSpec = metricsView?.metricsView?.state?.validSpec ?? {};
   const exploreSpec = explore?.explore?.state?.validSpec ?? {};
   const metricsViewName = exploreSpec.metricsView;
 
@@ -206,6 +208,12 @@ export async function getExplorePageUrl(
   url.search = convertExploreStateToURLSearchParams(
     exploreState,
     exploreSpec,
+    getTimeControlState(
+      metricsViewSpec,
+      exploreSpec,
+      fullTimeRange?.timeRangeSummary,
+      exploreState,
+    ),
     getDefaultExplorePreset(exploreSpec, fullTimeRange),
   );
   return url.toString();
diff --git a/web-common/src/features/dashboards/stores/dashboard-stores.ts b/web-common/src/features/dashboards/stores/dashboard-stores.ts
index 57a4b78f06b..51ef6a4168b 100644
--- a/web-common/src/features/dashboards/stores/dashboard-stores.ts
+++ b/web-common/src/features/dashboards/stores/dashboard-stores.ts
@@ -168,8 +168,6 @@ function syncDimensions(
 const metricsViewReducers = {
   init(name: string, initState: Partial<MetricsExplorerEntity> = {}) {
     update((state) => {
-      if (state.entities[name]) return state;
-
       state.entities[name] = getFullInitExploreState(name, initState);
 
       updateMetricsExplorerProto(state.entities[name]);
diff --git a/web-common/src/features/dashboards/stores/test-data/data.ts b/web-common/src/features/dashboards/stores/test-data/data.ts
index 18a707952ed..79a329a1d99 100644
--- a/web-common/src/features/dashboards/stores/test-data/data.ts
+++ b/web-common/src/features/dashboards/stores/test-data/data.ts
@@ -193,6 +193,7 @@ export const AD_BIDS_METRICS_3_MEASURES_DIMENSIONS: V1MetricsViewSpec = {
   table: AD_BIDS_SOURCE_NAME,
   measures: AD_BIDS_THREE_MEASURES,
   dimensions: AD_BIDS_THREE_DIMENSIONS,
+  timeDimension: AD_BIDS_TIMESTAMP_DIMENSION,
 };
 
 export const AD_BIDS_EXPLORE_INIT: V1ExploreSpec = {
diff --git a/web-common/src/features/dashboards/time-controls/time-control-store.ts b/web-common/src/features/dashboards/time-controls/time-control-store.ts
index e2c63267f52..ed8859ef762 100644
--- a/web-common/src/features/dashboards/time-controls/time-control-store.ts
+++ b/web-common/src/features/dashboards/time-controls/time-control-store.ts
@@ -30,6 +30,7 @@ import {
   type V1MetricsViewSpec,
   type V1MetricsViewTimeRangeResponse,
   V1TimeGrain,
+  type V1TimeRangeSummary,
 } from "@rilldata/web-common/runtime-client";
 import type { QueryObserverResult } from "@tanstack/svelte-query";
 import type { Readable } from "svelte/store";
@@ -68,6 +69,12 @@ export type TimeControlState = {
   ComparisonTimeRangeState;
 export type TimeControlStore = Readable<TimeControlState>;
 
+/**
+ * Returns a TimeControlState. Calls getTimeControlState internally.
+ *
+ * Consumers of this will have a QueryObserverResult for time range summary.
+ * They will need `isFetching` to wait for this response.
+ */
 export const timeControlStateSelector = ([
   metricsView,
   explore,
@@ -80,15 +87,13 @@ export const timeControlStateSelector = ([
   MetricsExplorerEntity,
 ]): TimeControlState => {
   const hasTimeSeries = Boolean(metricsView?.timeDimension);
-  const timeDimension = metricsView?.timeDimension;
   if (
     !metricsView ||
     !explore ||
     !metricsExplorer ||
     !timeRangeResponse ||
     !timeRangeResponse.isSuccess ||
-    !timeRangeResponse.data.timeRangeSummary?.min ||
-    !timeRangeResponse.data.timeRangeSummary?.max
+    !hasTimeSeries
   ) {
     return {
       isFetching: timeRangeResponse.isRefetching,
@@ -96,54 +101,85 @@ export const timeControlStateSelector = ([
     } as TimeControlState;
   }
 
+  const state = getTimeControlState(
+    metricsView,
+    explore,
+    timeRangeResponse.data?.timeRangeSummary,
+    metricsExplorer,
+  );
+  if (!state) {
+    return {
+      ready: false,
+      isFetching: false,
+    };
+  }
+
+  return {
+    ...state,
+    isFetching: false,
+    ready: true,
+  } as TimeControlState;
+};
+
+/**
+ * Generates TimeControlState
+ *
+ * Consumers of this will already have a V1TimeRangeSummary.
+ */
+export function getTimeControlState(
+  metricsViewSpec: V1MetricsViewSpec,
+  exploreSpec: V1ExploreSpec,
+  timeRangeSummary: V1TimeRangeSummary | undefined,
+  exploreState: MetricsExplorerEntity,
+) {
+  const hasTimeSeries = Boolean(metricsViewSpec.timeDimension);
+  const timeDimension = metricsViewSpec.timeDimension;
+  if (!hasTimeSeries || !timeRangeSummary?.max || !timeRangeSummary?.min)
+    return undefined;
+
   const allTimeRange = {
     name: TimeRangePreset.ALL_TIME,
-    start: new Date(timeRangeResponse.data.timeRangeSummary.min),
-    end: new Date(timeRangeResponse.data.timeRangeSummary.max),
+    start: new Date(timeRangeSummary.min),
+    end: new Date(timeRangeSummary.max),
   };
   const minTimeGrain =
-    (metricsView.smallestTimeGrain as V1TimeGrain) ||
+    (metricsViewSpec.smallestTimeGrain as V1TimeGrain) ||
     V1TimeGrain.TIME_GRAIN_UNSPECIFIED;
   const defaultTimeRange = isoDurationToFullTimeRange(
-    explore?.defaultPreset?.timeRange,
+    exploreSpec.defaultPreset?.timeRange,
     allTimeRange.start,
     allTimeRange.end,
-    metricsExplorer.selectedTimezone,
+    exploreState.selectedTimezone,
   );
 
   const timeRangeState = calculateTimeRangePartial(
-    metricsExplorer,
+    exploreState,
     allTimeRange,
     defaultTimeRange,
     minTimeGrain,
   );
   if (!timeRangeState) {
-    return {
-      ready: false,
-      isFetching: false,
-    };
+    return undefined;
   }
 
   const comparisonTimeRangeState = calculateComparisonTimeRangePartial(
-    explore,
-    metricsExplorer,
+    exploreSpec,
+    exploreState,
     allTimeRange,
     timeRangeState,
   );
 
   return {
-    isFetching: false,
     minTimeGrain,
     allTimeRange,
     defaultTimeRange,
     timeDimension,
-    ready: true,
 
     ...timeRangeState,
 
     ...comparisonTimeRangeState,
   } as TimeControlState;
-};
+}
 
 export function createTimeControlStore(ctx: StateManagers) {
   return derived(
diff --git a/web-common/src/features/dashboards/url-state/DashboardURLStateSync.svelte b/web-common/src/features/dashboards/url-state/DashboardURLStateSync.svelte
index 66a5ef45b64..4bbca009f62 100644
--- a/web-common/src/features/dashboards/url-state/DashboardURLStateSync.svelte
+++ b/web-common/src/features/dashboards/url-state/DashboardURLStateSync.svelte
@@ -1,13 +1,23 @@
 <script lang="ts">
-  import { afterNavigate, goto, replaceState } from "$app/navigation";
+  import { afterNavigate, beforeNavigate, goto } from "$app/navigation";
   import { page } from "$app/stores";
   import ErrorPage from "@rilldata/web-common/components/ErrorPage.svelte";
   import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
   import { metricsExplorerStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
   import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
-  import { convertExploreStateToURLSearchParams } from "@rilldata/web-common/features/dashboards/url-state/convertExploreStateToURLSearchParams";
-  import { updateExploreSessionStore } from "@rilldata/web-common/features/dashboards/url-state/explore-web-view-store";
-  import { getUpdatedUrlForExploreState } from "@rilldata/web-common/features/dashboards/url-state/getUpdatedUrlForExploreState";
+  import {
+    getTimeControlState,
+    type TimeControlState,
+  } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
+  import {
+    convertExploreStateToURLSearchParams,
+    getUpdatedUrlForExploreState,
+  } from "@rilldata/web-common/features/dashboards/url-state/convertExploreStateToURLSearchParams";
+  import {
+    clearExploreSessionStore,
+    hasSessionStorageData,
+    updateExploreSessionStore,
+  } from "@rilldata/web-common/features/dashboards/url-state/explore-web-view-store";
   import {
     createQueryServiceMetricsViewSchema,
     type V1ExplorePreset,
@@ -39,9 +49,42 @@
     metricsViewName,
   );
   $: ({ error: schemaError } = $metricsViewSchema);
-  $: ({ error } = $timeRangeSummaryStore);
+  $: ({ error, data: timeRangeSummaryResp } = $timeRangeSummaryStore);
   $: timeRangeSummaryError = error as HTTPError;
 
+  let timeControlsState: TimeControlState | undefined = undefined;
+  $: if (metricsSpec && exploreSpec && $dashboardStore) {
+    timeControlsState = getTimeControlState(
+      metricsSpec,
+      exploreSpec,
+      timeRangeSummaryResp?.timeRangeSummary,
+      $dashboardStore,
+    );
+  }
+
+  let prevUrl = "";
+
+  onMount(() => {
+    // in some cases afterNavigate is not always triggered
+    // so this is the escape hatch to make sure dashboard store gets initialised
+    setTimeout(() => {
+      if (!$dashboardStore) {
+        handleExploreInit(true);
+      }
+    });
+  });
+
+  beforeNavigate(({ from, to }) => {
+    if (!from || !to || from.url.pathname === to.url.pathname) {
+      // routing to the same path but probably different url params
+      return;
+    }
+
+    // session store is only used to save state for different views and not keep other params url
+    // so, we clear the store when we navigate away
+    clearExploreSessionStore(exploreName, extraKeyPrefix);
+  });
+
   afterNavigate(({ from, to, type }) => {
     if (
       // null checks
@@ -54,7 +97,8 @@
       return;
     }
 
-    const isInit = !$dashboardStore;
+    const isInit =
+      !$dashboardStore || !hasSessionStorageData(exploreName, extraKeyPrefix);
     if (isInit) {
       // When a user changes url manually and clears the params the `type` will be "enter"
       // This signal is used in handleExploreInit to make sure we do not use sessionStorage
@@ -63,11 +107,14 @@
       return;
     }
 
-    // Pressing back button and going to empty urls state should not restore from session store
+    // Pressing back button and going back to empty url state should not restore from session store
     const backButtonUsed = type === "popstate";
+    const skipSessionStorage =
+      backButtonUsed && $page.url.searchParams.size === 0;
+
     let partialExplore = partialExploreStateFromUrl;
     let shouldUpdateUrl = false;
-    if (exploreStateFromSessionStorage && !backButtonUsed) {
+    if (exploreStateFromSessionStorage && !skipSessionStorage) {
       partialExplore = exploreStateFromSessionStorage;
       shouldUpdateUrl = true;
     }
@@ -80,21 +127,42 @@
     );
     redirectUrl.search = getUpdatedUrlForExploreState(
       exploreSpec,
+      timeControlsState,
       defaultExplorePreset,
       partialExplore,
       $page.url.searchParams,
     );
-    prevUrl = redirectUrl.toString();
+    // update session store when back button was pressed.
+    if (backButtonUsed) {
+      updateExploreSessionStore(
+        exploreName,
+        extraKeyPrefix,
+        $dashboardStore,
+        exploreSpec,
+        timeControlsState,
+      );
+    }
 
-    if (!shouldUpdateUrl || redirectUrl.search === to.url.toString()) {
+    if (
+      !shouldUpdateUrl ||
+      redirectUrl.search === to.url.toString() ||
+      // redirect loop breaker
+      (prevUrl && prevUrl === redirectUrl.toString())
+    ) {
+      prevUrl = redirectUrl.toString();
       return;
     }
 
-    replaceState(redirectUrl, $page.state);
+    prevUrl = redirectUrl.toString();
+    void goto(redirectUrl, {
+      replaceState: true,
+      state: $page.state,
+    });
   });
 
-  let prevUrl = "";
   function handleExploreInit(isManualUrlChange: boolean) {
+    if (!exploreSpec || !metricsSpec) return;
+
     let initState: Partial<MetricsExplorerEntity> | undefined;
     let shouldUpdateUrl = false;
     if (exploreStateFromSessionStorage && !isManualUrlChange) {
@@ -122,7 +190,8 @@
     metricsExplorerStore.init(exploreName, initState);
     const redirectUrl = new URL($page.url);
     redirectUrl.search = getUpdatedUrlForExploreState(
-      exploreSpec!,
+      exploreSpec,
+      timeControlsState,
       defaultExplorePreset,
       initState,
       $page.url.searchParams,
@@ -132,7 +201,8 @@
       exploreName,
       extraKeyPrefix,
       get(metricsExplorerStore).entities[exploreName],
-      exploreSpec!,
+      exploreSpec,
+      timeControlsState,
     );
     prevUrl = redirectUrl.toString();
 
@@ -140,7 +210,12 @@
       return;
     }
 
-    replaceState(redirectUrl, $page.state);
+    // using `replaceState` directly messes up the navigation entries,
+    // `from` and `to` have the old url before being replaced in `afterNavigate` calls leading to incorrect handling.
+    void goto(redirectUrl, {
+      replaceState: true,
+      state: $page.state,
+    });
   }
 
   function gotoNewState() {
@@ -152,6 +227,7 @@
     u.search = convertExploreStateToURLSearchParams(
       $dashboardStore,
       exploreSpec,
+      timeControlsState,
       defaultExplorePreset,
     );
     const newUrl = u.toString();
@@ -165,6 +241,7 @@
       extraKeyPrefix,
       $dashboardStore,
       exploreSpec,
+      timeControlsState,
     );
   }
 
@@ -173,14 +250,6 @@
   $: if ($dashboardStore) {
     gotoNewState();
   }
-
-  onMount(() => {
-    setTimeout(() => {
-      if (!$dashboardStore) {
-        handleExploreInit(true);
-      }
-    });
-  });
 </script>
 
 {#if schemaError}
diff --git a/web-common/src/features/dashboards/url-state/convertExploreStateToPreset.ts b/web-common/src/features/dashboards/url-state/convertExploreStateToPreset.ts
index 450fe04a0d4..742d8eac425 100644
--- a/web-common/src/features/dashboards/url-state/convertExploreStateToPreset.ts
+++ b/web-common/src/features/dashboards/url-state/convertExploreStateToPreset.ts
@@ -5,6 +5,7 @@ import {
 } from "@rilldata/web-common/features/dashboards/pivot/types";
 import { createAndExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { toTimeRangeParam } from "@rilldata/web-common/features/dashboards/url-state/convertExploreStateToURLSearchParams";
 import { FromLegacySortTypeMap } from "@rilldata/web-common/features/dashboards/url-state/legacyMappers";
 import {
@@ -13,7 +14,6 @@ import {
   ToURLParamTimeDimensionMap,
   ToURLParamTimeGrainMapMap,
 } from "@rilldata/web-common/features/dashboards/url-state/mappers";
-import { inferCompareTimeRange } from "@rilldata/web-common/lib/time/comparisons";
 import { DashboardState_LeaderboardSortDirection } from "@rilldata/web-common/proto/gen/rill/ui/v1/dashboard_pb";
 import {
   V1ExploreComparisonMode,
@@ -24,6 +24,7 @@ import {
 export function convertExploreStateToPreset(
   exploreState: Partial<MetricsExplorerEntity>,
   exploreSpec: V1ExploreSpec,
+  timeControlsState: TimeControlState | undefined,
 ) {
   const preset: V1ExplorePreset = {};
 
@@ -38,7 +39,9 @@ export function convertExploreStateToPreset(
     );
   }
 
-  Object.assign(preset, getTimeRangeFields(exploreState, exploreSpec));
+  if (timeControlsState) {
+    Object.assign(preset, getTimeRangeFields(exploreState, timeControlsState));
+  }
 
   Object.assign(preset, getExploreFields(exploreState, exploreSpec));
 
@@ -51,40 +54,27 @@ export function convertExploreStateToPreset(
 
 function getTimeRangeFields(
   exploreState: Partial<MetricsExplorerEntity>,
-  exploreSpec: V1ExploreSpec,
+  timeControlsState: TimeControlState,
 ) {
   const preset: V1ExplorePreset = {};
 
-  if (exploreState.selectedTimeRange?.name) {
+  if (timeControlsState.selectedTimeRange?.name) {
     preset.timeRange = toTimeRangeParam(exploreState.selectedTimeRange);
   }
-  if (exploreState.selectedTimeRange?.interval) {
+  if (timeControlsState.selectedTimeRange?.interval) {
     preset.timeGrain =
-      ToURLParamTimeGrainMapMap[exploreState.selectedTimeRange.interval];
+      ToURLParamTimeGrainMapMap[timeControlsState.selectedTimeRange.interval];
   }
 
-  if (exploreState.showTimeComparison) {
-    if (exploreState.selectedComparisonTimeRange?.name) {
-      preset.compareTimeRange = toTimeRangeParam(
-        exploreState.selectedComparisonTimeRange,
-      );
-      preset.comparisonMode =
-        V1ExploreComparisonMode.EXPLORE_COMPARISON_MODE_TIME;
-    } else if (
-      !exploreState.selectedComparisonTimeRange &&
-      exploreState.selectedTimeRange?.name
-    ) {
-      // we infer compare time range if the user has not explicitly selected one but has enabled comparison
-      const inferredCompareTimeRange = inferCompareTimeRange(
-        exploreSpec.timeRanges,
-        exploreState.selectedTimeRange.name,
-      );
-      if (inferredCompareTimeRange) {
-        preset.compareTimeRange = inferredCompareTimeRange;
-        preset.comparisonMode =
-          V1ExploreComparisonMode.EXPLORE_COMPARISON_MODE_TIME;
-      }
-    }
+  if (
+    exploreState.showTimeComparison &&
+    timeControlsState.selectedComparisonTimeRange?.name
+  ) {
+    preset.compareTimeRange = toTimeRangeParam(
+      exploreState.selectedComparisonTimeRange,
+    );
+    preset.comparisonMode =
+      V1ExploreComparisonMode.EXPLORE_COMPARISON_MODE_TIME;
   }
 
   if (exploreState.selectedComparisonDimension !== undefined) {
diff --git a/web-common/src/features/dashboards/url-state/convertExploreStateToURLSearchParams.ts b/web-common/src/features/dashboards/url-state/convertExploreStateToURLSearchParams.ts
index 8a94f16bf77..5334190dde8 100644
--- a/web-common/src/features/dashboards/url-state/convertExploreStateToURLSearchParams.ts
+++ b/web-common/src/features/dashboards/url-state/convertExploreStateToURLSearchParams.ts
@@ -5,10 +5,12 @@ import {
 } from "@rilldata/web-common/features/dashboards/pivot/types";
 import { SortDirection } from "@rilldata/web-common/features/dashboards/proto-state/derived-types";
 import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { convertExpressionToFilterParam } from "@rilldata/web-common/features/dashboards/url-state/filters/converters";
 import { FromLegacySortTypeMap } from "@rilldata/web-common/features/dashboards/url-state/legacyMappers";
 import {
   FromActivePageMap,
+  FromURLParamViewMap,
   ToURLParamSortTypeMap,
   ToURLParamTDDChartMap,
   ToURLParamTimeDimensionMap,
@@ -20,7 +22,6 @@ import {
   arrayOrderedEquals,
   arrayUnorderedEquals,
 } from "@rilldata/web-common/lib/arrayUtils";
-import { inferCompareTimeRange } from "@rilldata/web-common/lib/time/comparisons";
 import {
   TimeComparisonOption,
   type TimeRange,
@@ -33,9 +34,46 @@ import {
   type V1ExploreSpec,
 } from "@rilldata/web-common/runtime-client";
 
+/**
+ * Sometimes data is loaded from sources other than the url.
+ * In that case update the URL to make sure the state matches the current url.
+ */
+export function getUpdatedUrlForExploreState(
+  exploreSpec: V1ExploreSpec,
+  timeControlsState: TimeControlState | undefined,
+  defaultExplorePreset: V1ExplorePreset,
+  partialExploreState: Partial<MetricsExplorerEntity>,
+  curSearchParams: URLSearchParams,
+) {
+  const newUrlSearchParams = new URLSearchParams(
+    convertExploreStateToURLSearchParams(
+      partialExploreState as MetricsExplorerEntity,
+      exploreSpec,
+      timeControlsState,
+      defaultExplorePreset,
+    ),
+  );
+  curSearchParams.forEach((value, key) => {
+    if (
+      key === ExploreStateURLParams.WebView &&
+      FromURLParamViewMap[value] === defaultExplorePreset.view
+    ) {
+      // ignore default view.
+      // since we do not add params equal to default this will append to the end of the URL breaking the param order.
+      return;
+    }
+    newUrlSearchParams.set(key, value);
+  });
+  return newUrlSearchParams.toString();
+}
+
 export function convertExploreStateToURLSearchParams(
   exploreState: MetricsExplorerEntity,
   exploreSpec: V1ExploreSpec,
+  // We have quite a bit of logic in TimeControlState to validate selections and update them
+  // Eg: if a selected grain is not applicable for the current grain then we change it
+  // But it is only available in TimeControlState and not MetricsExplorerEntity
+  timeControlsState: TimeControlState | undefined,
   preset: V1ExplorePreset,
 ) {
   const searchParams = new URLSearchParams();
@@ -50,10 +88,13 @@ export function convertExploreStateToURLSearchParams(
     );
   }
 
-  mergeSearchParams(
-    toTimeRangesUrl(exploreState, exploreSpec, preset),
-    searchParams,
-  );
+  // timeControlsState will be undefined for dashboards without timeseries
+  if (timeControlsState) {
+    mergeSearchParams(
+      toTimeRangesUrl(exploreState, exploreSpec, timeControlsState, preset),
+      searchParams,
+    );
+  }
 
   const expr = mergeMeasureFilters(exploreState);
   if (expr && expr?.cond?.exprs?.length) {
@@ -91,14 +132,17 @@ export function convertExploreStateToURLSearchParams(
 function toTimeRangesUrl(
   exploreState: MetricsExplorerEntity,
   exploreSpec: V1ExploreSpec,
+  timeControlsState: TimeControlState,
   preset: V1ExplorePreset,
 ) {
   const searchParams = new URLSearchParams();
 
-  if (shouldSetParam(preset.timeRange, exploreState.selectedTimeRange?.name)) {
+  if (
+    shouldSetParam(preset.timeRange, timeControlsState.selectedTimeRange?.name)
+  ) {
     searchParams.set(
       ExploreStateURLParams.TimeRange,
-      toTimeRangeParam(exploreState.selectedTimeRange),
+      toTimeRangeParam(timeControlsState.selectedTimeRange),
     );
   }
 
@@ -112,38 +156,24 @@ function toTimeRangesUrl(
     );
   }
 
-  if (exploreState.showTimeComparison) {
-    if (
-      (preset.compareTimeRange !== undefined &&
-        exploreState.selectedComparisonTimeRange !== undefined &&
-        exploreState.selectedComparisonTimeRange.name !==
-          preset.compareTimeRange) ||
-      preset.compareTimeRange === undefined
-    ) {
-      searchParams.set(
-        ExploreStateURLParams.ComparisonTimeRange,
-        toTimeRangeParam(exploreState.selectedComparisonTimeRange),
-      );
-    } else if (
-      !exploreState.selectedComparisonTimeRange?.name &&
-      exploreState.selectedTimeRange?.name
-    ) {
-      // we infer compare time range if the user has not explicitly selected one but has enabled comparison
-      const inferredCompareTimeRange = inferCompareTimeRange(
-        exploreSpec.timeRanges,
-        exploreState.selectedTimeRange.name,
-      );
-      if (inferredCompareTimeRange)
-        searchParams.set(
-          ExploreStateURLParams.ComparisonTimeRange,
-          inferredCompareTimeRange,
-        );
-    }
+  if (
+    exploreState.showTimeComparison &&
+    ((preset.compareTimeRange !== undefined &&
+      timeControlsState.selectedComparisonTimeRange !== undefined &&
+      timeControlsState.selectedComparisonTimeRange.name !==
+        preset.compareTimeRange) ||
+      preset.compareTimeRange === undefined)
+  ) {
+    searchParams.set(
+      ExploreStateURLParams.ComparisonTimeRange,
+      toTimeRangeParam(timeControlsState.selectedComparisonTimeRange),
+    );
   }
 
   const mappedTimeGrain =
-    ToURLParamTimeGrainMapMap[exploreState.selectedTimeRange?.interval ?? ""] ??
-    "";
+    ToURLParamTimeGrainMapMap[
+      timeControlsState.selectedTimeRange?.interval ?? ""
+    ] ?? "";
   if (mappedTimeGrain && shouldSetParam(preset.timeGrain, mappedTimeGrain)) {
     searchParams.set(ExploreStateURLParams.TimeGrain, mappedTimeGrain);
   }
diff --git a/web-common/src/features/dashboards/url-state/convertPresetToExploreState.ts b/web-common/src/features/dashboards/url-state/convertPresetToExploreState.ts
index c9c79f98ad4..9f89482dd36 100644
--- a/web-common/src/features/dashboards/url-state/convertPresetToExploreState.ts
+++ b/web-common/src/features/dashboards/url-state/convertPresetToExploreState.ts
@@ -158,6 +158,11 @@ function fromTimeRangesParams(
       // unset compare dimension
       partialExploreState.selectedComparisonDimension = "";
     }
+  } else if (
+    preset.comparisonMode ===
+    V1ExploreComparisonMode.EXPLORE_COMPARISON_MODE_TIME
+  ) {
+    partialExploreState.showTimeComparison = true;
   }
 
   if (preset.comparisonDimension) {
diff --git a/web-common/src/features/dashboards/url-state/explore-web-view-store.spec.ts b/web-common/src/features/dashboards/url-state/explore-web-view-store.spec.ts
index f7282ab131d..cf7c36a1bd7 100644
--- a/web-common/src/features/dashboards/url-state/explore-web-view-store.spec.ts
+++ b/web-common/src/features/dashboards/url-state/explore-web-view-store.spec.ts
@@ -28,6 +28,7 @@ import {
   applyMutationsToDashboard,
   type TestDashboardMutation,
 } from "@rilldata/web-common/features/dashboards/stores/test-data/store-mutations";
+import { getTimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { convertExploreStateToURLSearchParams } from "@rilldata/web-common/features/dashboards/url-state/convertExploreStateToURLSearchParams";
 import { convertPresetToExploreState } from "@rilldata/web-common/features/dashboards/url-state/convertPresetToExploreState";
 import {
@@ -326,10 +327,17 @@ function getUrlForWebView(
     explorePresetFromSessionStorage,
   );
 
+  const exploreState = partialExploreState as MetricsExplorerEntity;
   newUrl.search =
     convertExploreStateToURLSearchParams(
-      partialExploreState as MetricsExplorerEntity,
+      exploreState,
       AD_BIDS_EXPLORE_INIT,
+      getTimeControlState(
+        AD_BIDS_METRICS_3_MEASURES_DIMENSIONS,
+        AD_BIDS_EXPLORE_INIT,
+        AD_BIDS_TIME_RANGE_SUMMARY.timeRangeSummary,
+        exploreState,
+      ),
       defaultExplorePreset,
     ) + (additionalParams ?? "");
   return newUrl;
diff --git a/web-common/src/features/dashboards/url-state/explore-web-view-store.ts b/web-common/src/features/dashboards/url-state/explore-web-view-store.ts
index dbc55cffc06..1067e480b31 100644
--- a/web-common/src/features/dashboards/url-state/explore-web-view-store.ts
+++ b/web-common/src/features/dashboards/url-state/explore-web-view-store.ts
@@ -1,4 +1,5 @@
 import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { convertExploreStateToPreset } from "@rilldata/web-common/features/dashboards/url-state/convertExploreStateToPreset";
 import { FromActivePageMap } from "@rilldata/web-common/features/dashboards/url-state/mappers";
 import {
@@ -93,6 +94,7 @@ export function updateExploreSessionStore(
   prefix: string | undefined,
   exploreState: MetricsExplorerEntity,
   exploreSpec: V1ExploreSpec,
+  timeControlsState: TimeControlState | undefined,
 ) {
   const view = FromActivePageMap[exploreState.activePage];
   const key = getKeyForSessionStore(exploreName, prefix, view);
@@ -102,7 +104,11 @@ export function updateExploreSessionStore(
     SharedStateStoreKey,
   );
 
-  const preset = convertExploreStateToPreset(exploreState, exploreSpec);
+  const preset = convertExploreStateToPreset(
+    exploreState,
+    exploreSpec,
+    timeControlsState,
+  );
   const storedPreset: V1ExplorePreset = {};
   const sharedPreset: V1ExplorePreset = {
     ...preset,
@@ -184,3 +190,15 @@ export function getExplorePresetForWebView(
     return undefined;
   }
 }
+
+export function hasSessionStorageData(
+  exploreName: string,
+  prefix: string | undefined,
+) {
+  const sharedKey = getKeyForSessionStore(
+    exploreName,
+    prefix,
+    SharedStateStoreKey,
+  );
+  return !!sessionStorage.getItem(sharedKey);
+}
diff --git a/web-common/src/features/dashboards/url-state/filters/converters.ts b/web-common/src/features/dashboards/url-state/filters/converters.ts
index b1d892170c4..42c684f876d 100644
--- a/web-common/src/features/dashboards/url-state/filters/converters.ts
+++ b/web-common/src/features/dashboards/url-state/filters/converters.ts
@@ -13,6 +13,7 @@ export function convertFilterParamToExpression(filter: string) {
   return parser.results[0] as V1Expression;
 }
 
+const NonStandardName = /^[a-zA-Z][a-zA-Z0-9_]*$/;
 export function convertExpressionToFilterParam(
   expr: V1Expression,
   depth = 0,
@@ -21,12 +22,12 @@ export function convertExpressionToFilterParam(
 
   if ("val" in expr) {
     if (typeof expr.val === "string") {
-      return `'${expr.val}'`;
+      return escapeValue(expr.val);
     }
     return expr.val + "";
   }
 
-  if (expr.ident) return expr.ident;
+  if (expr.ident) return escapeColumnName(expr.ident);
 
   switch (expr.cond?.op) {
     case V1Operation.OPERATION_AND:
@@ -73,6 +74,7 @@ function convertInExpressionToFilterParam(expr: V1Expression, depth: number) {
 
   const column = expr.cond.exprs[0]?.ident;
   if (!column) return "";
+  const safeColumn = escapeColumnName(column);
 
   if (expr.cond.exprs[1]?.subquery?.having) {
     // TODO: support `NIN <subquery>`
@@ -80,14 +82,14 @@ function convertInExpressionToFilterParam(expr: V1Expression, depth: number) {
       expr.cond.exprs[1]?.subquery?.having,
       0,
     );
-    if (having) return `${column} having (${having})`;
+    if (having) return `${safeColumn} having (${having})`;
   }
 
   if (expr.cond.exprs.length > 1) {
     const vals = expr.cond.exprs
       .slice(1)
       .map((e) => convertExpressionToFilterParam(e, depth + 1));
-    return `${column} ${joiner} (${vals.join(",")})`;
+    return `${safeColumn} ${joiner} (${vals.join(",")})`;
   }
 
   return "";
@@ -107,3 +109,22 @@ function convertBinaryExpressionToFilterParam(
 
   return `${left} ${op} ${right}`;
 }
+
+function escapeColumnName(columnName: string) {
+  // if name doesnt have any special chars do not surround it by quotes.
+  // this makes the url more readable
+  if (NonStandardName.test(columnName)) return columnName;
+  const escapedColumnName = columnName
+    .replace(/\\/g, "\\\\")
+    .replace(/"/g, '\\"');
+  return `"${escapedColumnName}"`;
+}
+
+function escapeValue(value: string) {
+  const escapedValue = value
+    // TODO: this was a CodeQL suggestion. could this cause conflicts in values?
+    .replace(/\\/g, "\\\\")
+    .replace(/'/g, "\\'")
+    .replace(/\n/g, "\\n");
+  return `'${escapedValue}'`;
+}
diff --git a/web-common/src/features/dashboards/url-state/filters/expression.cjs b/web-common/src/features/dashboards/url-state/filters/expression.cjs
index 59db01f74bb..16a30709747 100644
--- a/web-common/src/features/dashboards/url-state/filters/expression.cjs
+++ b/web-common/src/features/dashboards/url-state/filters/expression.cjs
@@ -184,7 +184,7 @@ let ParserRules = [
     {"name": "compare_operator", "symbols": ["compare_operator$subexpression$5"], "postprocess": id},
     {"name": "compare_operator$subexpression$6", "symbols": [/[lL]/, /[tT]/, /[eE]/], "postprocess": function(d) {return d.join(""); }},
     {"name": "compare_operator", "symbols": ["compare_operator$subexpression$6"], "postprocess": id},
-    {"name": "column", "symbols": ["sqstring"], "postprocess": id},
+    {"name": "column", "symbols": ["dqstring"], "postprocess": id},
     {"name": "column$ebnf$1", "symbols": []},
     {"name": "column$ebnf$1", "symbols": ["column$ebnf$1", /[a-zA-Z0-9_]/], "postprocess": function arrpush(d) {return d[0].concat([d[1]]);}},
     {"name": "column", "symbols": [/[a-zA-Z]/, "column$ebnf$1"], "postprocess": ([fst, rest]) => [fst, ...rest].join("")},
diff --git a/web-common/src/features/dashboards/url-state/filters/expression.ne b/web-common/src/features/dashboards/url-state/filters/expression.ne
index edcee420c70..b07cf571921 100644
--- a/web-common/src/features/dashboards/url-state/filters/expression.ne
+++ b/web-common/src/features/dashboards/url-state/filters/expression.ne
@@ -46,7 +46,7 @@ compare_operator => "eq"i     {% id %}
                   | "lt"i     {% id %}
                   | "lte"i    {% id %}
 
-column     => sqstring                 {% id %}
+column     => dqstring                 {% id %}
             | [a-zA-Z] [a-zA-Z0-9_]:*  {% ([fst, rest]) => [fst, ...rest].join("") %}
 value      => sqstring                 {% id %}
             | int                      {% id %}
diff --git a/web-common/src/features/dashboards/url-state/filters/expression.spec.ts b/web-common/src/features/dashboards/url-state/filters/expression.spec.ts
index 831fb0a725f..3910c13ee6d 100644
--- a/web-common/src/features/dashboards/url-state/filters/expression.spec.ts
+++ b/web-common/src/features/dashboards/url-state/filters/expression.spec.ts
@@ -6,6 +6,7 @@ import {
   createSubQueryExpression,
 } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import {
+  convertExpressionToFilterParam,
   convertFilterParamToExpression,
   stripParserError,
 } from "@rilldata/web-common/features/dashboards/url-state/filters/converters";
@@ -19,18 +20,22 @@ describe("expression", () => {
     const Cases = [
       {
         expr: "country IN ('US','IN')",
-        expected_expression: createInExpression("country", ["US", "IN"]),
+        expectedExprString: "country IN ('US','IN')",
+        expectedExprObject: createInExpression("country", ["US", "IN"]),
       },
       {
         expr: "country IN ('US','IN') and state eq 'ABC'",
-        expected_expression: createAndExpression([
+        expectedExprString: "country IN ('US','IN') AND state eq 'ABC'",
+        expectedExprObject: createAndExpression([
           createInExpression("country", ["US", "IN"]),
           createBinaryExpression("state", V1Operation.OPERATION_EQ, "ABC"),
         ]),
       },
       {
         expr: "country IN ('US','IN') and state eq 'ABC' and lat gte 12.56",
-        expected_expression: createAndExpression([
+        expectedExprString:
+          "country IN ('US','IN') AND state eq 'ABC' AND lat gte 12.56",
+        expectedExprObject: createAndExpression([
           createInExpression("country", ["US", "IN"]),
           createBinaryExpression("state", V1Operation.OPERATION_EQ, "ABC"),
           createBinaryExpression("lat", V1Operation.OPERATION_GTE, 12.56),
@@ -38,7 +43,9 @@ describe("expression", () => {
       },
       {
         expr: "country IN ('US','IN') AND state eq 'ABC' OR lat gte 12.56",
-        expected_expression: createAndExpression([
+        expectedExprString:
+          "country IN ('US','IN') AND (state eq 'ABC' OR lat gte 12.56)",
+        expectedExprObject: createAndExpression([
           createInExpression("country", ["US", "IN"]),
           createOrExpression([
             createBinaryExpression("state", V1Operation.OPERATION_EQ, "ABC"),
@@ -48,7 +55,9 @@ describe("expression", () => {
       },
       {
         expr: "country not in ('US','IN') and (state eq 'ABC' or lat gte 12.56)",
-        expected_expression: createAndExpression([
+        expectedExprString:
+          "country NIN ('US','IN') AND (state eq 'ABC' OR lat gte 12.56)",
+        expectedExprObject: createAndExpression([
           createInExpression("country", ["US", "IN"], true),
           createOrExpression([
             createBinaryExpression("state", V1Operation.OPERATION_EQ, "ABC"),
@@ -58,7 +67,9 @@ describe("expression", () => {
       },
       {
         expr: "country NIN ('US','IN') and state having (lat gte 12.56)",
-        expected_expression: createAndExpression([
+        expectedExprString:
+          "country NIN ('US','IN') AND state having (lat gte 12.56)",
+        expectedExprObject: createAndExpression([
           createInExpression("country", ["US", "IN"], true),
           createSubQueryExpression(
             "state",
@@ -67,18 +78,33 @@ describe("expression", () => {
           ),
         ]),
       },
+      {
+        expr: `"coun tr.y" IN ('U\\'S','I\\nN') and "st ate" having ("la t" gte 12.56)`,
+        expectedExprString: `"coun tr.y" IN ('U\\'S','I\\nN') AND "st ate" having ("la t" gte 12.56)`,
+        expectedExprObject: createAndExpression([
+          // values converted to V1Expression do not have escaped chars
+          createInExpression("coun tr.y", ["U'S", "I\nN"]),
+          createSubQueryExpression(
+            "st ate",
+            ["la t"],
+            createBinaryExpression("la t", V1Operation.OPERATION_GTE, 12.56),
+          ),
+        ]),
+      },
     ];
 
     const compiledGrammar = nearley.Grammar.fromCompiled(grammar);
-    for (const { expr, expected_expression } of Cases) {
+    for (const { expr, expectedExprString, expectedExprObject } of Cases) {
       it(expr, () => {
         const parser = new nearley.Parser(compiledGrammar);
         parser.feed(expr);
         // assert that there is only match. this ensures unambiguous grammar.
         expect(parser.results).length(1);
 
-        expect(convertFilterParamToExpression(expr)).to.deep.eq(
-          expected_expression,
+        const exprObject = convertFilterParamToExpression(expr);
+        expect(exprObject).to.deep.eq(expectedExprObject);
+        expect(convertExpressionToFilterParam(exprObject)).toEqual(
+          expectedExprString,
         );
       });
     }
diff --git a/web-common/src/features/dashboards/url-state/getUpdatedUrlForExploreState.ts b/web-common/src/features/dashboards/url-state/getUpdatedUrlForExploreState.ts
deleted file mode 100644
index 69e512e008c..00000000000
--- a/web-common/src/features/dashboards/url-state/getUpdatedUrlForExploreState.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
-import { convertExploreStateToURLSearchParams } from "@rilldata/web-common/features/dashboards/url-state/convertExploreStateToURLSearchParams";
-import { FromURLParamViewMap } from "@rilldata/web-common/features/dashboards/url-state/mappers";
-import { ExploreStateURLParams } from "@rilldata/web-common/features/dashboards/url-state/url-params";
-import type {
-  V1ExplorePreset,
-  V1ExploreSpec,
-} from "@rilldata/web-common/runtime-client";
-
-/**
- * Sometimes data is loaded from sources other than the url.
- * In that case update the URL to make sure the state matches the current url.
- */
-export function getUpdatedUrlForExploreState(
-  exploreSpec: V1ExploreSpec,
-  defaultExplorePreset: V1ExplorePreset,
-  partialExploreState: Partial<MetricsExplorerEntity>,
-  curSearchParams: URLSearchParams,
-) {
-  const newUrlSearchParams = new URLSearchParams(
-    convertExploreStateToURLSearchParams(
-      partialExploreState as MetricsExplorerEntity,
-      exploreSpec,
-      defaultExplorePreset,
-    ),
-  );
-  curSearchParams.forEach((value, key) => {
-    if (
-      key === ExploreStateURLParams.WebView &&
-      FromURLParamViewMap[value] === defaultExplorePreset.view
-    ) {
-      // ignore default view.
-      // since we do not add params equal to default this will append to the end of the URL breaking the param order.
-      return;
-    }
-    newUrlSearchParams.set(key, value);
-  });
-  return newUrlSearchParams.toString();
-}
diff --git a/web-common/src/features/dashboards/url-state/url-state-variations.spec.ts b/web-common/src/features/dashboards/url-state/url-state-variations.spec.ts
index 5bbf80f892c..745e5e70f5c 100644
--- a/web-common/src/features/dashboards/url-state/url-state-variations.spec.ts
+++ b/web-common/src/features/dashboards/url-state/url-state-variations.spec.ts
@@ -42,6 +42,7 @@ import {
   applyMutationsToDashboard,
   type TestDashboardMutation,
 } from "@rilldata/web-common/features/dashboards/stores/test-data/store-mutations";
+import { getTimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { convertExploreStateToURLSearchParams } from "@rilldata/web-common/features/dashboards/url-state/convertExploreStateToURLSearchParams";
 import { convertURLToExploreState } from "@rilldata/web-common/features/dashboards/url-state/convertPresetToExploreState";
 import { getDefaultExplorePreset } from "@rilldata/web-common/features/dashboards/url-state/getDefaultExplorePreset";
@@ -363,6 +364,12 @@ describe("Human readable URL state variations", () => {
         url.search = convertExploreStateToURLSearchParams(
           get(metricsExplorerStore).entities[AD_BIDS_EXPLORE_NAME],
           explore,
+          getTimeControlState(
+            AD_BIDS_METRICS_3_MEASURES_DIMENSIONS,
+            explore,
+            AD_BIDS_TIME_RANGE_SUMMARY.timeRangeSummary,
+            get(metricsExplorerStore).entities[AD_BIDS_EXPLORE_NAME],
+          ),
           defaultExplorePreset,
         );
         expect(url.toString()).to.eq(expectedUrl);

From 86123e3a9826a54e373aceb7fd31d8e360c928f6 Mon Sep 17 00:00:00 2001
From: Brian Holmes <120223836+briangregoryholmes@users.noreply.github.com>
Date: Thu, 19 Dec 2024 07:35:17 -0500
Subject: [PATCH 3/7] fix: file conflict resolution (#6272)

* fix: file conflict resolution

* cleanup and janet feedback

* cleanup and test fixes

* cleanup and test fixes

* abstract diff bar and further cleanup

* correct property access

* reverting a file should never autosave

* remove comment

* fix comment inconsistency

* fix issue when saving a file with the same content

* extend autosave debounce

* no unsaved change fix

* type fixes
---
 package-lock.json                             |  15 ++
 web-common/package.json                       |   1 +
 .../src/components/button/Button.svelte       |  38 +--
 .../src/components/forms/FieldSwitcher.svelte |   4 +
 .../components/icons/LoadingSpinner.svelte    |  26 ++
 .../super-pill/components/Comparison.svelte   |   3 +-
 .../src/features/editor/Codespace.svelte      | 224 ++++++++----------
 web-common/src/features/editor/DiffBar.svelte |  46 ++++
 web-common/src/features/editor/Editor.svelte  |  93 ++++++--
 web-common/src/features/editor/config.ts      |   2 +-
 .../entity-management/async-save-state.ts     | 116 +++++++++
 .../entity-management/file-artifact.ts        | 179 ++++++++------
 .../entity-management/file-artifacts.ts       |  24 +-
 .../features/explores/ExploreEditor.svelte    |   2 -
 .../src/features/file-explorer/NavFile.svelte |  32 ++-
 .../metrics-views/editor/MetricsEditor.svelte |   1 -
 .../sources/editor/SourceEditor.svelte        |  22 +-
 .../visual-metrics-editing/Sidebar.svelte     |   6 +-
 .../CanvasDashboardWorkspace.svelte           |  18 +-
 .../workspaces/ExploreWorkspace.svelte        |   1 -
 .../workspaces/SourceWorkspace.svelte         |   7 +-
 .../workspaces/VisualExploreEditing.svelte    |  11 +-
 .../features/workspaces/VisualMetrics.svelte  |   4 +-
 .../src/layout/ApplicationHeader.svelte       |   6 +-
 .../workspace/WorkspaceEditorContainer.svelte |   2 +-
 .../time-controls-from-config.spec.ts         |   6 +-
 web-local/tests/sources.spec.ts               |   1 +
 web-local/tests/utils/commonHelpers.ts        |   2 +-
 28 files changed, 588 insertions(+), 304 deletions(-)
 create mode 100644 web-common/src/components/icons/LoadingSpinner.svelte
 create mode 100644 web-common/src/features/editor/DiffBar.svelte
 create mode 100644 web-common/src/features/entity-management/async-save-state.ts

diff --git a/package-lock.json b/package-lock.json
index 1c47d842fa3..923ba0b9806 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2698,6 +2698,20 @@
         "crelt": "^1.0.5"
       }
     },
+    "node_modules/@codemirror/merge": {
+      "version": "6.7.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/merge/-/merge-6.7.4.tgz",
+      "integrity": "sha512-9FpIFTgzkaxkZE93XKoFR6caAB6sCAfYCW2NT+atGEmdv/1Mt1ouxA+hKxGRYdMvdH9Ph0KMJtYnzEi+QCGAiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/highlight": "^1.0.0",
+        "style-mod": "^4.1.0"
+      }
+    },
     "node_modules/@codemirror/search": {
       "version": "6.5.6",
       "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz",
@@ -35244,6 +35258,7 @@
         "@codemirror/lang-yaml": "^6.1.1",
         "@codemirror/language": "^6.10.3",
         "@codemirror/lint": "^6.8.2",
+        "@codemirror/merge": "^6.7.4",
         "@codemirror/search": "^6.5.6",
         "@codemirror/state": "^6.4.1",
         "@codemirror/view": "^6.34.1",
diff --git a/web-common/package.json b/web-common/package.json
index 226629d4b46..774d9cc5dbe 100644
--- a/web-common/package.json
+++ b/web-common/package.json
@@ -25,6 +25,7 @@
     "@codemirror/lang-yaml": "^6.1.1",
     "@codemirror/language": "^6.10.3",
     "@codemirror/lint": "^6.8.2",
+    "@codemirror/merge": "^6.7.4",
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
diff --git a/web-common/src/components/button/Button.svelte b/web-common/src/components/button/Button.svelte
index 73bd65ab701..d6f01fab12b 100644
--- a/web-common/src/components/button/Button.svelte
+++ b/web-common/src/components/button/Button.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { builderActions, getAttrs, type Builder } from "bits-ui";
   import { createEventDispatcher } from "svelte";
+  import LoadingSpinner from "../icons/LoadingSpinner.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -40,6 +41,7 @@
   export let gray = false;
   export let danger = false;
   export let preload = true;
+  export let loadingCopy = "Loading";
   // needed to set certain style that could be overridden by the style block in this component
   export let forcedStyle = "";
 
@@ -78,6 +80,7 @@
   form={submitForm ? form : undefined}
   aria-label={label}
   {target}
+  aria-disabled={disabled}
   rel={target === "_blank" ? "noopener noreferrer" : rel}
   {...getAttrs(builders)}
   use:builderActions={{ builders }}
@@ -86,32 +89,9 @@
   {...href ? { "data-sveltekit-preload-data": preload } : {}}
 >
   {#if loading}
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="15"
-      height="15"
-      viewBox="0 0 24 24"
-    >
-      <path
-        fill="currentColor"
-        d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
-        opacity=".25"
-      />
-      <path
-        fill="currentColor"
-        d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
-      >
-        <animateTransform
-          attributeName="transform"
-          dur="0.75s"
-          repeatCount="indefinite"
-          type="rotate"
-          values="0 12 12;360 12 12"
-        />
-      </path>
-    </svg>
+    <LoadingSpinner size="15px" />
     {#if !square && !circle && !compact}
-      <span>Loading</span>
+      <span>{loadingCopy}</span>
     {/if}
   {:else}
     <slot />
@@ -340,6 +320,14 @@
     @apply text-red-600;
   }
 
+  .danger.subtle {
+    @apply bg-red-50 text-red-600;
+  }
+
+  .danger.subtle:hover {
+    @apply bg-red-100;
+  }
+
   /* SHAPE STYLES */
 
   .square,
diff --git a/web-common/src/components/forms/FieldSwitcher.svelte b/web-common/src/components/forms/FieldSwitcher.svelte
index 408d0d49e82..7ec949ec6e5 100644
--- a/web-common/src/components/forms/FieldSwitcher.svelte
+++ b/web-common/src/components/forms/FieldSwitcher.svelte
@@ -21,6 +21,10 @@
     @apply capitalize;
   }
 
+  button:hover:not(.selected) {
+    @apply bg-slate-50;
+  }
+
   .option-wrapper {
     @apply flex h-6 text-sm w-fit mb-1 rounded-[2px];
   }
diff --git a/web-common/src/components/icons/LoadingSpinner.svelte b/web-common/src/components/icons/LoadingSpinner.svelte
new file mode 100644
index 00000000000..c4b16783890
--- /dev/null
+++ b/web-common/src/components/icons/LoadingSpinner.svelte
@@ -0,0 +1,26 @@
+<script>
+  export let size = "1em";
+</script>
+
+<svg height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+    opacity=".25"
+  />
+  <path
+    d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
+    class="spinner"
+  />
+</svg>
+
+<style>
+  .spinner {
+    transform-origin: center;
+    animation: spinner_StKS 0.75s infinite linear;
+  }
+  @keyframes spinner_StKS {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>
diff --git a/web-common/src/features/dashboards/time-controls/super-pill/components/Comparison.svelte b/web-common/src/features/dashboards/time-controls/super-pill/components/Comparison.svelte
index 59eb3e0783b..aa70a0d862a 100644
--- a/web-common/src/features/dashboards/time-controls/super-pill/components/Comparison.svelte
+++ b/web-common/src/features/dashboards/time-controls/super-pill/components/Comparison.svelte
@@ -96,9 +96,10 @@
   }}
   typeahead={!showSelector}
 >
-  <DropdownMenu.Trigger asChild let:builder>
+  <DropdownMenu.Trigger asChild let:builder {disabled}>
     <button
       {disabled}
+      aria-disabled={disabled}
       use:builder.action
       {...builder}
       aria-label="Select time comparison option"
diff --git a/web-common/src/features/editor/Codespace.svelte b/web-common/src/features/editor/Codespace.svelte
index d6abcf8ed26..7603a10cbf4 100644
--- a/web-common/src/features/editor/Codespace.svelte
+++ b/web-common/src/features/editor/Codespace.svelte
@@ -1,101 +1,55 @@
+<script lang="ts" context="module">
+</script>
+
 <script lang="ts">
   import type { Extension } from "@codemirror/state";
   import { EditorState, Compartment } from "@codemirror/state";
-  import { EditorView } from "@codemirror/view";
+  import { EditorView, type ViewUpdate } from "@codemirror/view";
   import { onMount } from "svelte";
   import { base as baseExtensions } from "../../components/editor/presets/base";
   import { FileArtifact } from "../entity-management/file-artifact";
-  import { get } from "svelte/store";
-  import Button from "@rilldata/web-common/components/button/Button.svelte";
-  import * as AlertDialog from "@rilldata/web-common/components/alert-dialog/";
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { underlineSelection } from "./highlight-field";
+  import { MergeView } from "@codemirror/merge";
 
   export let fileArtifact: FileArtifact;
   export let extensions: Extension[] = [];
-  export let autoSave: boolean = true;
-  export let forceLocalUpdates: boolean = false;
   export let editor: EditorView | null = null;
-  export let debounceSave: () => void;
+  export let autoSave = true;
 
   const extensionCompartment = new Compartment();
 
-  let parent: HTMLElement;
-  let showWarning = false;
-  let saving = false;
-  let unsubscribers: Array<() => void> = [];
-
   const {
-    updateLocalContent,
-    localContent,
-    saveLocalContent,
+    editorContent,
     remoteContent,
-    revert,
-    onRemoteContentChange,
-    onLocalContentChange,
+    merging,
+    updateEditorContent,
+    onEditorContentChange,
   } = fileArtifact;
 
-  onMount(() => {
-    // Check if the file artifact has a local content
-    // If it does, we want to use that as the initial content
-    // Otherwise, we'll use the remote content
-    editor = new EditorView({
-      state: EditorState.create({
-        doc: $localContent ?? $remoteContent ?? undefined,
-        extensions: [
-          baseExtensions(),
-          extensionCompartment.of([]),
-          EditorView.updateListener.of(
-            ({ docChanged, state: { doc }, view: { hasFocus } }) => {
-              if (hasFocus && docChanged) {
-                updateLocalContent(doc.toString());
-
-                if (autoSave) debounceSave();
-              }
-            },
-          ),
-        ],
-      }),
-      parent,
-    });
+  let parent: HTMLElement;
+  let unsubscribers: Array<() => void> = [];
+  let mergeView: MergeView | null = null;
 
-    const unsubscribeRemoteContent = onRemoteContentChange(
-      (newRemoteContent, force) => {
-        if (editor && newRemoteContent !== null) {
-          if (editor.hasFocus && !force) return;
-          const local = get(localContent);
-          if (editor.state.doc.toString() === newRemoteContent) return;
-
-          if (local === null) {
-            updateEditorContent(newRemoteContent);
-          } else if (local !== newRemoteContent) {
-            showWarning = true;
-          }
-        }
-      },
-    );
-
-    const unsubscribeLocalContent = onLocalContentChange((content) => {
-      if (content === null && $remoteContent !== null) {
-        updateEditorContent($remoteContent);
-      } else if (
-        forceLocalUpdates &&
-        content !== null &&
-        editor &&
-        !editor.hasFocus
-      )
-        updateEditorContent(content);
-    });
+  $: if (editor) updateEditorExtensions(extensions);
+  $: if (fileArtifact) editor?.contentDOM.blur();
+
+  $: if (parent) {
+    if ($merging) {
+      mountMergeView();
+    } else {
+      mountEditor();
+    }
+  }
+
+  onMount(() => {
+    const unsubLocal = onEditorContentChange(dispatchEditorChange);
 
-    const unsubscribeHighlighter = eventBus.on("highlightSelection", (refs) => {
+    const unsubHighlighter = eventBus.on("highlightSelection", (refs) => {
       if (editor) underlineSelection(editor, refs);
     });
 
-    unsubscribers.push(
-      unsubscribeRemoteContent,
-      unsubscribeLocalContent,
-      unsubscribeHighlighter,
-    );
+    unsubscribers.push(unsubLocal, unsubHighlighter);
 
     return () => {
       editor?.destroy();
@@ -103,8 +57,49 @@
     };
   });
 
-  $: if (editor) updateEditorExtensions(extensions);
-  $: if (fileArtifact) editor?.contentDOM.blur();
+  function mountMergeView() {
+    editor?.destroy();
+
+    mergeView = new MergeView({
+      a: {
+        doc: $editorContent ?? "",
+        extensions: [
+          baseExtensions(),
+          ...extensions,
+          EditorView.editable.of(false),
+          EditorState.readOnly.of(true),
+        ],
+      },
+      b: {
+        doc: $remoteContent ?? "",
+        extensions: [
+          baseExtensions(),
+          ...extensions,
+
+          EditorView.editable.of(false),
+          EditorState.readOnly.of(true),
+        ],
+      },
+      parent,
+    });
+  }
+
+  function mountEditor() {
+    mergeView?.destroy();
+
+    editor = new EditorView({
+      state: EditorState.create({
+        doc: $editorContent ?? "",
+        extensions: [
+          baseExtensions(),
+
+          extensionCompartment.of([extensions]),
+          EditorView.updateListener.of(listener),
+        ],
+      }),
+      parent,
+    });
+  }
 
   function updateEditorExtensions(newExtensions: Extension[]) {
     editor?.dispatch({
@@ -113,7 +108,7 @@
     });
   }
 
-  function updateEditorContent(newContent: string) {
+  function dispatchEditorChange(newContent: string) {
     const existingSelection = editor?.state.selection.ranges[0];
 
     editor?.dispatch({
@@ -135,11 +130,21 @@
       },
     });
   }
+
+  function listener({
+    docChanged,
+    state: { doc },
+    view: { hasFocus },
+  }: ViewUpdate) {
+    if (hasFocus && docChanged) {
+      updateEditorContent(doc.toString(), true, autoSave);
+    }
+  }
 </script>
 
 <div
   bind:this={parent}
-  class="size-full"
+  class="size-full overflow-y-auto"
   on:click={() => {
     /** give the editor focus no matter where we click */
     if (!editor?.hasFocus) editor?.focus();
@@ -152,46 +157,23 @@
   tabindex="0"
 />
 
-<AlertDialog.Root bind:open={showWarning}>
-  <AlertDialog.Content>
-    <AlertDialog.Title>File update received remotely</AlertDialog.Title>
-    <AlertDialog.Description>
-      You have unsaved changes. Do you want to save them before accepting the
-      remote changes?
-    </AlertDialog.Description>
-
-    <AlertDialog.Footer>
-      <AlertDialog.Cancel asChild let:builder>
-        <Button
-          builders={[builder]}
-          type="secondary"
-          loading={saving}
-          large
-          on:click={async () => {
-            saving = true;
-            await saveLocalContent();
-            saving = false;
-            showWarning = false;
-          }}
-        >
-          Save local changes
-        </Button>
-      </AlertDialog.Cancel>
-
-      <AlertDialog.Action asChild let:builder>
-        <Button
-          builders={[builder]}
-          type="primary"
-          large
-          on:click={() => {
-            showWarning = false;
-            revert();
-            if ($remoteContent !== null) updateEditorContent($remoteContent);
-          }}
-        >
-          Accept remote changes
-        </Button>
-      </AlertDialog.Action>
-    </AlertDialog.Footer>
-  </AlertDialog.Content>
-</AlertDialog.Root>
+<style lang="postcss">
+  :global(.cm-mergeView) {
+    @apply h-full;
+  }
+
+  :global(.cm-editor) {
+    padding-top: 2px;
+  }
+
+  :global(.cm-mergeViewEditor) {
+    @apply overflow-y-auto;
+  }
+  :global(.cm-mergeViewEditors) {
+    @apply h-full;
+  }
+
+  :global(.cm-mergeViewEditor:first-of-type) {
+    @apply border-r;
+  }
+</style>
diff --git a/web-common/src/features/editor/DiffBar.svelte b/web-common/src/features/editor/DiffBar.svelte
new file mode 100644
index 00000000000..8aa32f564aa
--- /dev/null
+++ b/web-common/src/features/editor/DiffBar.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import Alert from "@rilldata/web-common/components/icons/Alert.svelte";
+
+  export let saving: boolean;
+  export let errorMessage: string | undefined;
+  export let onAcceptIncoming: () => void;
+  export let onAcceptCurrent: () => void;
+</script>
+
+<header class="flex w-full border-b">
+  <div class="border-r">
+    <h2 class="italic text-gray-400">Unsaved changes</h2>
+
+    <Button
+      type="subtle"
+      loading={saving}
+      loadingCopy="Saving"
+      danger={!!errorMessage && !saving}
+      disabled={saving}
+      on:click={onAcceptCurrent}
+    >
+      {#if errorMessage}
+        <Alert size="14px" />
+        {errorMessage} Try again.
+      {:else}
+        Accept current
+      {/if}
+    </Button>
+  </div>
+
+  <div>
+    <h2>Incoming content</h2>
+    <Button type="primary" on:click={onAcceptIncoming}>Accept incoming</Button>
+  </div>
+</header>
+
+<style lang="postcss">
+  h2 {
+    @apply text-sm font-semibold;
+  }
+
+  div {
+    @apply w-full p-1.5 pl-3 flex justify-between items-center;
+  }
+</style>
diff --git a/web-common/src/features/editor/Editor.svelte b/web-common/src/features/editor/Editor.svelte
index c6f44922f6b..7335d4d12be 100644
--- a/web-common/src/features/editor/Editor.svelte
+++ b/web-common/src/features/editor/Editor.svelte
@@ -15,12 +15,14 @@
   import TooltipShortcutContainer from "@rilldata/web-common/components/tooltip/TooltipShortcutContainer.svelte";
   import Shortcut from "@rilldata/web-common/components/tooltip/Shortcut.svelte";
   import MetaKey from "@rilldata/web-common/components/tooltip/MetaKey.svelte";
+  import * as AlertDialog from "@rilldata/web-common/components/alert-dialog/";
+  import Alert from "@rilldata/web-common/components/icons/Alert.svelte";
+  import DiffBar from "./DiffBar.svelte";
 
   export let fileArtifact: FileArtifact;
   export let extensions: Extension[] = [];
   export let autoSave = true;
   export let editor: EditorView;
-  export let forceLocalUpdates = false;
   export let forceDisableAutoSave = false;
   export let showSaveBar = true;
   export let refetchOnWindowFocus = true;
@@ -28,31 +30,38 @@
   export let onRevert: () => void = () => {};
 
   $: ({
-    hasUnsavedChanges,
     saveLocalContent,
-    revert,
-    localContent,
+    revertChanges,
+    merging,
+    editorContent,
     disableAutoSave,
+    inConflict,
+    saveState: { saving, error, resolve },
+    saveEnabled,
   } = fileArtifact);
 
   $: debounceSave = debounce(save, FILE_SAVE_DEBOUNCE_TIME);
 
+  $: disabled = !$saveEnabled;
+
   async function handleKeydown(e: KeyboardEvent) {
     if (e.key === "s" && (e.ctrlKey || e.metaKey)) {
       e.preventDefault();
+      if (disabled) return;
       await save();
     }
   }
 
-  async function save() {
-    const local = $localContent;
+  async function save(force = false) {
+    const local = $editorContent;
     if (local === null) return;
     onSave(local);
-    await saveLocalContent();
+    await saveLocalContent(force);
   }
 
   function revertContent() {
-    revert(); // Revert fileArtifact to remote content
+    revertChanges(); // Revert fileArtifact to remote content
+    resolve();
     onRevert(); // Call revert callback
   }
 
@@ -64,12 +73,19 @@
 <svelte:window on:keydown={handleKeydown} on:focus={handleRefocus} />
 
 <section>
+  {#if $merging}
+    <DiffBar
+      saving={$saving}
+      errorMessage={$error?.message}
+      onAcceptCurrent={() => save(true)}
+      onAcceptIncoming={revertContent}
+    />
+  {/if}
+
   <div class="editor-container">
     {#key fileArtifact}
       <Codespace
         {extensions}
-        {debounceSave}
-        {forceLocalUpdates}
         {fileArtifact}
         autoSave={!forceDisableAutoSave && !disableAutoSave && autoSave}
         bind:editor
@@ -77,18 +93,30 @@
     {/key}
   </div>
 
-  {#if showSaveBar}
+  {#if !$merging && showSaveBar}
     <footer>
       <div class="flex gap-x-3">
         {#if !autoSave || disableAutoSave || forceDisableAutoSave}
           <Tooltip distance={8} activeDelay={300}>
             <Button
               type="subtle"
-              disabled={!$hasUnsavedChanges}
-              on:click={save}
+              loading={$saving}
+              danger={!!$error && !$saving}
+              loadingCopy="Saving"
+              {disabled}
+              on:click={() => save()}
             >
-              <Check size="14px" />
-              Save
+              {#if $error}
+                <Alert size="14px" />
+              {:else}
+                <Check size="14px" />
+              {/if}
+
+              {#if $error}
+                {$error?.message} Try again.
+              {:else}
+                Save
+              {/if}
             </Button>
             <TooltipContent slot="tooltip-content">
               <TooltipShortcutContainer pad={false}>
@@ -100,11 +128,7 @@
             </TooltipContent>
           </Tooltip>
 
-          <Button
-            type="text"
-            disabled={!$hasUnsavedChanges}
-            on:click={revertContent}
-          >
+          <Button type="text" {disabled} on:click={revertContent}>
             <UndoIcon size="14px" />
             Revert changes
           </Button>
@@ -128,9 +152,36 @@
   {/if}
 </section>
 
+{#if $inConflict && !$merging}
+  <AlertDialog.Root open>
+    <AlertDialog.Content>
+      <AlertDialog.Title>File update detected</AlertDialog.Title>
+      <AlertDialog.Description>
+        This file has been modified by another application. Please resolve
+        conflicts with your unsaved changes before proceeding.
+      </AlertDialog.Description>
+
+      <AlertDialog.Footer>
+        <AlertDialog.Action asChild let:builder>
+          <Button
+            builders={[builder]}
+            type="primary"
+            large
+            on:click={() => {
+              merging.set(true);
+            }}
+          >
+            Resolve conflicts
+          </Button>
+        </AlertDialog.Action>
+      </AlertDialog.Footer>
+    </AlertDialog.Content>
+  </AlertDialog.Root>
+{/if}
+
 <style lang="postcss">
   .editor-container {
-    @apply size-full overflow-auto p-2 pb-0 flex flex-col;
+    @apply size-full overflow-auto p-0 pt-0 pb-0 flex flex-col;
   }
 
   footer {
diff --git a/web-common/src/features/editor/config.ts b/web-common/src/features/editor/config.ts
index 7c06c7928b0..bd055367e5e 100644
--- a/web-common/src/features/editor/config.ts
+++ b/web-common/src/features/editor/config.ts
@@ -2,4 +2,4 @@ export const FILES_WITHOUT_AUTOSAVE = ["/rill.yaml", "/.env"];
 
 export const DIRECTORIES_WITHOUT_AUTOSAVE = ["/connectors", "/sources"];
 
-export const FILE_SAVE_DEBOUNCE_TIME = 400;
+export const FILE_SAVE_DEBOUNCE_TIME = 650;
diff --git a/web-common/src/features/entity-management/async-save-state.ts b/web-common/src/features/entity-management/async-save-state.ts
new file mode 100644
index 00000000000..599e0a25156
--- /dev/null
+++ b/web-common/src/features/entity-management/async-save-state.ts
@@ -0,0 +1,116 @@
+import { get, writable } from "svelte/store";
+import { fileArtifacts } from "./file-artifacts";
+
+// This class creates a store that manages the state
+// of an async, multi-step save operation.
+// It is used to show loading/error state in relevant components
+
+// In Rill, saving a file is a multi-step process:
+// 1. Initiate the save operation via runtimeServicePutFile
+// 2. Receive (asynchronously) a FILE_EVENT_WRITE event from the server
+// 3. Re-fetch the file content and check for conflicts
+
+// Saving is not fully "resolved" until step 3 is complete,
+// but this happens in a different domain than step 1
+// As such, this class uses a deferred promise so that this process can be awaited
+// by the various functions that need to wait for the entire save operation to complete
+
+const REJECTION_TIMEOUT = 4000;
+const MIN_SAVE_TIME = 500;
+
+export class AsyncSaveState {
+  private asyncSavingStore = writable(false);
+  private errorStore = writable<null | Error>(null);
+  private promise: ReturnType<typeof this.createDeferred> | undefined;
+  private touchedStore = writable(false);
+
+  touched = {
+    subscribe: this.touchedStore.subscribe,
+  };
+
+  touch = (path: string) => {
+    const touched = get(this.touched);
+    if (touched) return;
+    this.touchedStore.set(true);
+    fileArtifacts.unsavedFiles.add(path);
+  };
+
+  untouch = (path: string) => {
+    const touched = get(this.touched);
+    if (!touched) return;
+    this.touchedStore.set(false);
+    fileArtifacts.unsavedFiles.delete(path);
+  };
+
+  saving = {
+    subscribe: this.asyncSavingStore.subscribe,
+  };
+
+  error = {
+    subscribe: this.errorStore.subscribe,
+  };
+
+  lastSaveTime = 0;
+
+  initiateSave = () => {
+    this.lastSaveTime = Date.now();
+    this.asyncSavingStore.set(true);
+
+    this.promise = this.createDeferred<void>();
+    return this.promise.promise;
+  };
+
+  resolve = () => {
+    this.promise?.resolve();
+
+    setTimeout(
+      () => {
+        this.asyncSavingStore.set(false);
+        this.errorStore.set(null);
+      },
+      Math.max(0, MIN_SAVE_TIME - (Date.now() - this.lastSaveTime)),
+    );
+
+    this.promise = undefined;
+  };
+
+  reject = (e: Error) => {
+    this.errorStore.set(e);
+    this.asyncSavingStore.set(false);
+    this.promise?.reject(e);
+
+    this.promise = undefined;
+  };
+
+  private createDeferred<T>(): {
+    promise: Promise<T>;
+    resolve: (value?: T | PromiseLike<T>) => void;
+    reject: (reason?: Error) => void;
+  } {
+    let resolve!: (value?: T | PromiseLike<T>) => void;
+    let reject!: (reason?: Error) => void;
+
+    const promise = new Promise<T>((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+
+    const timeoutId = setTimeout(() => {
+      reject(new Error("File save timed out."));
+    }, REJECTION_TIMEOUT);
+
+    const originalReject = reject;
+    reject = (reason?: Error) => {
+      clearTimeout(timeoutId);
+      originalReject(reason);
+    };
+
+    const originalResolve = resolve;
+    resolve = (value?: T | PromiseLike<T>) => {
+      clearTimeout(timeoutId);
+      originalResolve(value);
+    };
+
+    return { promise, resolve, reject };
+  }
+}
diff --git a/web-common/src/features/entity-management/file-artifact.ts b/web-common/src/features/entity-management/file-artifact.ts
index bcdd3a62257..eb12a2bd977 100644
--- a/web-common/src/features/entity-management/file-artifact.ts
+++ b/web-common/src/features/entity-management/file-artifact.ts
@@ -29,10 +29,12 @@ import {
 } from "svelte/store";
 import {
   DIRECTORIES_WITHOUT_AUTOSAVE,
+  FILE_SAVE_DEBOUNCE_TIME,
   FILES_WITHOUT_AUTOSAVE,
 } from "../editor/config";
-import { fileArtifacts } from "./file-artifacts";
 import { inferResourceKind } from "./infer-resource-kind";
+import { debounce } from "@rilldata/web-common/lib/create-debouncer";
+import { AsyncSaveState } from "./async-save-state";
 
 const UNSUPPORTED_EXTENSIONS = [
   // Data formats
@@ -57,6 +59,8 @@ const UNSUPPORTED_EXTENSIONS = [
   ".pptx",
 ];
 
+const EVENT_IGNORE_BUFFER = 1500;
+
 export class FileArtifact {
   readonly path: string;
   readonly resourceName = writable<V1ResourceName | undefined>(undefined);
@@ -64,19 +68,24 @@ export class FileArtifact {
     undefined,
   );
   readonly reconciling = writable(false);
-  readonly localContent: Writable<string | null> = writable(null);
+  readonly merging = writable(false);
+  readonly editorContent: Writable<string | null> = writable(null);
   readonly remoteContent: Writable<string | null> = writable(null);
-  readonly hasUnsavedChanges = writable(false);
+  readonly inConflict = writable(false);
+  readonly saveState = new AsyncSaveState();
+  readonly hasUnsavedChanges = this.saveState.touched;
+  readonly saveEnabled = derived(
+    [this.saveState.saving, this.hasUnsavedChanges],
+    ([saving, touched]) => !saving && touched,
+  );
   readonly fileExtension: string;
-  readonly ready: Promise<boolean>;
   readonly fileTypeUnsupported: boolean;
   readonly folderName: string;
   readonly fileName: string;
   readonly disableAutoSave: boolean;
   readonly autoSave: Writable<boolean>;
 
-  private remoteCallbacks = new Set<(content: string, force?: true) => void>();
-  private localCallbacks = new Set<(content: string | null) => void>();
+  private editorCallback: (content: string) => void = () => {};
 
   // Last time the state of the resource `kind/name` was updated.
   // This is updated in watch-resources and is used there to avoid
@@ -104,25 +113,9 @@ export class FileArtifact {
     this.fileTypeUnsupported = UNSUPPORTED_EXTENSIONS.includes(
       this.fileExtension,
     );
-
-    this.onRemoteContentChange((content) => {
-      const inferred = inferResourceKind(filePath, content);
-
-      if (inferred) this.inferredResourceKind.set(inferred);
-    });
   }
 
-  updateRemoteContent = (newContent: string, alert = true) => {
-    const hasNewContent = newContent !== get(this.remoteContent);
-    this.remoteContent.set(newContent);
-    if (alert && hasNewContent) {
-      for (const callback of this.remoteCallbacks) {
-        callback(newContent);
-      }
-    }
-  };
-
-  async fetchContent(invalidate = false) {
+  fetchContent = async (invalidate = false) => {
     const instanceId = get(runtime).instanceId;
     const queryParams = {
       path: this.path,
@@ -135,95 +128,131 @@ export class FileArtifact {
       Awaited<ReturnType<typeof runtimeServiceGetFile>>
     > = ({ signal }) => runtimeServiceGetFile(instanceId, queryParams, signal);
 
-    const { blob } = await queryClient.fetchQuery({
+    const { blob: fetchedContent } = await queryClient.fetchQuery({
       queryKey,
       queryFn,
       staleTime: Infinity,
     });
 
-    if (blob === undefined) {
+    if (fetchedContent === undefined) {
       throw new Error("Content undefined");
     }
 
-    this.updateRemoteContent(blob, true);
-  }
+    const currentRemoteContent = get(this.remoteContent);
+    const editorContent = get(this.editorContent);
 
-  updateLocalContent = (content: string | null, alert = false) => {
-    const hasUnsavedChanges = get(this.hasUnsavedChanges);
-    const autoSave = get(this.autoSave);
+    const remoteContentHasChanged = currentRemoteContent !== fetchedContent;
 
-    if (content === null) {
-      this.hasUnsavedChanges.set(false);
-      fileArtifacts.unsavedFiles.update((files) => {
-        files.delete(this.path);
-        return files;
-      });
-    } else if (!hasUnsavedChanges && !autoSave) {
-      this.hasUnsavedChanges.set(true);
-      fileArtifacts.unsavedFiles.update((files) => {
-        files.add(this.path);
-        return files;
-      });
+    this.saveState.resolve();
+
+    if (editorContent === fetchedContent) {
+      // This is the primary sequence that happens after saving
+      // Local content is not null, user initiates a save, we receive a FILE_WRITE event
+      // After fetching the remote content, it should match the local content
+      // So, we revert our local content store
+      this.resetConflictState();
+      this.saveState.untouch(this.path);
     }
 
-    this.localContent.set(content);
+    if (remoteContentHasChanged) {
+      this.remoteContent.set(fetchedContent);
+
+      const inferred = inferResourceKind(this.path, fetchedContent);
+
+      if (inferred) this.inferredResourceKind.set(inferred);
 
-    if (alert) {
-      for (const callback of this.localCallbacks) {
-        callback(content);
+      if (editorContent !== null) {
+        // This is the secondary sequence wherein a file is saved in an external editor
+        // We receive a FILE_EVENT_WRITE event and the remote content is different from local content
+        // This can also happen when a file is savedmand then edited
+        // in the application before the event is received
+        // In this case, we ignore updates that happen within 1.5 seconds of the last save
+        // If we receive an update after that period we can "safely" assume
+        // that the user has made conflicting changes externally
+        if (Date.now() - this.saveState.lastSaveTime > EVENT_IGNORE_BUFFER) {
+          this.inConflict.set(true);
+        }
+      } else {
+        this.updateEditorContent(fetchedContent, false, false, true);
       }
     }
+
+    return fetchedContent;
   };
 
-  onRemoteContentChange = (
-    callback: (content: string, force?: true) => void,
+  updateEditorContent = (
+    newContent: string,
+    fromEditor = false,
+    autoSave = get(this.autoSave),
+    firstLoad = false,
   ) => {
-    this.remoteCallbacks.add(callback);
-    return () => this.remoteCallbacks.delete(callback);
-  };
+    this.editorContent.set(newContent);
 
-  onLocalContentChange = (callback: (content: string | null) => void) => {
-    this.localCallbacks.add(callback);
-    return () => this.localCallbacks.delete(callback);
-  };
+    if (!firstLoad) {
+      this.saveState.touch(this.path);
+    }
+
+    if (autoSave) {
+      this.debounceSave(newContent);
+    }
 
-  revert = () => {
-    this.updateLocalContent(null, true);
+    if (fromEditor) return;
+
+    this.editorCallback(newContent);
   };
 
-  saveLocalContent = async () => {
-    const blob = get(this.localContent);
-    if (blob === null) return;
+  saveLocalContent = async (force = false) => {
+    const saveEnabled = get(this.saveEnabled);
 
-    await this.saveContent(blob);
+    if (!saveEnabled && !force) return;
+    await this.saveContent(get(this.editorContent) ?? "");
   };
 
   saveContent = async (blob: string) => {
     const instanceId = get(runtime).instanceId;
-    const key = getRuntimeServiceGetFileQueryKey(instanceId, {
-      path: this.path,
-    });
 
-    queryClient.setQueryData(key, {
-      blob,
-    });
+    // Optimistically update the query
+    queryClient.setQueryData(
+      getRuntimeServiceGetFileQueryKey(instanceId, {
+        path: this.path,
+      }),
+      {
+        blob,
+      },
+    );
 
     try {
+      const fileSavePromise = this.saveState.initiateSave();
+
       await runtimeServicePutFile(instanceId, {
         path: this.path,
         blob,
-      }).catch(console.error);
-
-      // Optimistically update the remote content
-      this.remoteContent.set(blob);
-      this.remoteCallbacks.forEach((cb) => cb(blob, true));
+      });
 
-      this.updateLocalContent(null);
-    } catch (e) {
-      console.error(e);
+      await fileSavePromise;
+    } catch {
+      this.saveState.reject(new Error("Unable to save file."));
     }
   };
 
+  debounceSave = debounce(this.saveContent, FILE_SAVE_DEBOUNCE_TIME);
+
+  onEditorContentChange = (callback: (content: string | null) => void) => {
+    this.editorCallback = callback;
+    return () => (this.editorCallback = () => {});
+  };
+
+  resetConflictState = () => {
+    this.merging.set(false);
+    this.inConflict.set(false);
+  };
+
+  revertChanges = () => {
+    this.updateEditorContent(get(this.remoteContent) ?? "", false, false);
+    this.saveState.untouch(this.path);
+    this.resetConflictState();
+  };
+
   updateResource(resource: V1Resource) {
     this.updateResourceNameIfChanged(resource);
     this.lastStateUpdatedOn = resource.meta?.stateUpdatedOn;
diff --git a/web-common/src/features/entity-management/file-artifacts.ts b/web-common/src/features/entity-management/file-artifacts.ts
index d7daa11a120..a51b5ce9be0 100644
--- a/web-common/src/features/entity-management/file-artifacts.ts
+++ b/web-common/src/features/entity-management/file-artifacts.ts
@@ -11,9 +11,31 @@ import type { QueryClient } from "@tanstack/svelte-query";
 import { derived, get, writable } from "svelte/store";
 import { FileArtifact } from "./file-artifact";
 
+class UnsavedFilesStore {
+  private unsavedFiles = writable(new Set<string>());
+
+  subscribe = this.unsavedFiles.subscribe;
+
+  delete = (filePath: string) => {
+    let deleted = false;
+    this.unsavedFiles.update((files) => {
+      deleted = files.delete(filePath);
+      return files;
+    });
+    return deleted;
+  };
+
+  add = (filePath: string) => {
+    this.unsavedFiles.update((files) => {
+      files.add(filePath);
+      return files;
+    });
+  };
+}
+
 export class FileArtifacts {
   private readonly artifacts: Map<string, FileArtifact> = new Map();
-  readonly unsavedFiles = writable(new Set<string>());
+  readonly unsavedFiles = new UnsavedFilesStore();
 
   async init(queryClient: QueryClient, instanceId: string) {
     const resources = await fetchResources(queryClient, instanceId);
diff --git a/web-common/src/features/explores/ExploreEditor.svelte b/web-common/src/features/explores/ExploreEditor.svelte
index b1c522855f4..98b0e304a61 100644
--- a/web-common/src/features/explores/ExploreEditor.svelte
+++ b/web-common/src/features/explores/ExploreEditor.svelte
@@ -12,7 +12,6 @@
   export let fileArtifact: FileArtifact;
   export let autoSave: boolean;
   export let lineBasedRuntimeErrors: LineStatus[];
-  export let forceLocalUpdates = false;
 
   let editor: EditorView;
 
@@ -21,7 +20,6 @@
 </script>
 
 <Editor
-  {forceLocalUpdates}
   bind:autoSave
   bind:editor
   onSave={(content) => {
diff --git a/web-common/src/features/file-explorer/NavFile.svelte b/web-common/src/features/file-explorer/NavFile.svelte
index 29d38e3c601..e4d4ab69377 100644
--- a/web-common/src/features/file-explorer/NavFile.svelte
+++ b/web-common/src/features/file-explorer/NavFile.svelte
@@ -36,6 +36,8 @@
   import ModelMenuItems from "../models/navigation/ModelMenuItems.svelte";
   import SourceMenuItems from "../sources/navigation/SourceMenuItems.svelte";
   import { PROTECTED_DIRECTORIES, PROTECTED_FILES } from "./protected-paths";
+  import Alert from "@rilldata/web-common/components/icons/Alert.svelte";
+  import LoadingSpinner from "@rilldata/web-common/components/icons/LoadingSpinner.svelte";
 
   export let filePath: string;
   export let onRename: (filePath: string, isDir: boolean) => void;
@@ -63,7 +65,9 @@
     hasUnsavedChanges,
     saveLocalContent,
     inferredResourceKind,
+    saveState: { saving, error },
   } = fileArtifact);
+
   $: resourceKind = ($resourceName?.kind ??
     $inferredResourceKind) as ResourceKind;
   $: padding = getPaddingFromPath(filePath);
@@ -97,7 +101,7 @@
   aria-label="{filePath} Nav Entry"
   class="w-full text-left pr-2 h-6 group flex justify-between gap-x-1 items-center hover:bg-slate-100"
   class:bg-slate-100={isCurrentFile}
-  class:opacity-50={$hasUnsavedChanges}
+  class:opacity-50={$hasUnsavedChanges || $saving}
 >
   <a
     class="w-full truncate flex items-center gap-x-1 font-medium {isProtectedDirectory ||
@@ -106,21 +110,27 @@
       : 'text-gray-900 hover:text-gray-900'}"
     href={`/files${filePath}`}
     {id}
-    class:italic={$hasUnsavedChanges}
+    class:italic={$hasUnsavedChanges || $saving}
     on:click={fireTelemetry}
     on:mousedown={handleMouseDown}
     style:padding-left="{padding}px"
   >
     <div class="flex-none">
-      <svelte:component
-        this={resourceKind
-          ? resourceIconMapping[resourceKind]
-          : filePath === "/.env" || filePath === "/rill.yaml"
-            ? Settings
-            : File}
-        size="14px"
-        color={resourceKind ? resourceColorMapping[resourceKind] : "#9CA3AF"}
-      />
+      {#if $saving}
+        <LoadingSpinner size="14px" />
+      {:else if $error}
+        <Alert size="14px" color="red" />
+      {:else}
+        <svelte:component
+          this={resourceKind
+            ? resourceIconMapping[resourceKind]
+            : filePath === "/.env" || filePath === "/rill.yaml"
+              ? Settings
+              : File}
+          size="14px"
+          color={resourceKind ? resourceColorMapping[resourceKind] : "#9CA3AF"}
+        />
+      {/if}
     </div>
     <span class="truncate w-full" class:text-red-600={$hasErrors}>
       {fileName}
diff --git a/web-common/src/features/metrics-views/editor/MetricsEditor.svelte b/web-common/src/features/metrics-views/editor/MetricsEditor.svelte
index 1ba4e47de30..f36dbf811f8 100644
--- a/web-common/src/features/metrics-views/editor/MetricsEditor.svelte
+++ b/web-common/src/features/metrics-views/editor/MetricsEditor.svelte
@@ -58,7 +58,6 @@
       }
     }}
     {fileArtifact}
-    forceLocalUpdates
     extensions={[
       metricsPlusSQL,
       placeholderElements.extension,
diff --git a/web-common/src/features/sources/editor/SourceEditor.svelte b/web-common/src/features/sources/editor/SourceEditor.svelte
index fca89bff859..09c04ff9ac6 100644
--- a/web-common/src/features/sources/editor/SourceEditor.svelte
+++ b/web-common/src/features/sources/editor/SourceEditor.svelte
@@ -11,7 +11,7 @@
   export let fileArtifact: FileArtifact;
   export let onSave: () => void = () => {};
 
-  $: ({ remoteContent, localContent } = fileArtifact);
+  $: ({ editorContent } = fileArtifact);
 
   let editor: EditorView;
 
@@ -24,19 +24,15 @@
   //  Handle errors
   $: if (editor)
     setLineStatuses(
-      mapParseErrorsToLines(allErrors, $localContent ?? $remoteContent ?? ""),
+      mapParseErrorsToLines(allErrors, $editorContent ?? ""),
       editor,
     );
 </script>
 
-<div class="editor flex flex-col h-full">
-  <div class="grow flex bg-white overflow-y-auto">
-    <Editor
-      {fileArtifact}
-      extensions={FileExtensionToEditorExtension[".yaml"]}
-      bind:editor
-      forceDisableAutoSave
-      onSave={handleUpdate}
-    />
-  </div>
-</div>
+<Editor
+  {fileArtifact}
+  extensions={FileExtensionToEditorExtension[".yaml"]}
+  bind:editor
+  forceDisableAutoSave
+  onSave={handleUpdate}
+/>
diff --git a/web-common/src/features/visual-metrics-editing/Sidebar.svelte b/web-common/src/features/visual-metrics-editing/Sidebar.svelte
index c695c7b1246..2d074c034d8 100644
--- a/web-common/src/features/visual-metrics-editing/Sidebar.svelte
+++ b/web-common/src/features/visual-metrics-editing/Sidebar.svelte
@@ -203,7 +203,7 @@
     ({ type }) => type && NUMERICS.has(type),
   );
 
-  $: ({ remoteContent, localContent, saveContent } = fileArtifact);
+  $: ({ editorContent, updateEditorContent } = fileArtifact);
 
   $: requiredPropertiesUnfilled = properties[type]
     .filter(({ optional, fields, selected }) => {
@@ -217,7 +217,7 @@
   );
 
   async function saveChanges() {
-    const parsedDocument = parseDocument($localContent ?? $remoteContent ?? "");
+    const parsedDocument = parseDocument($editorContent ?? "");
     let sequence = parsedDocument.get(type);
 
     if (!(sequence instanceof YAMLSeq) || sequence.items.length === 0) {
@@ -244,7 +244,7 @@
       items.push(newItem);
     }
 
-    await saveContent(parsedDocument.toString());
+    await updateEditorContent(parsedDocument.toString(), false, true);
 
     resetEditing();
 
diff --git a/web-common/src/features/workspaces/CanvasDashboardWorkspace.svelte b/web-common/src/features/workspaces/CanvasDashboardWorkspace.svelte
index 7ad2380c57e..7f9d2fd004f 100644
--- a/web-common/src/features/workspaces/CanvasDashboardWorkspace.svelte
+++ b/web-common/src/features/workspaces/CanvasDashboardWorkspace.svelte
@@ -66,9 +66,8 @@
     autoSave,
     path: filePath,
     fileName,
-    updateLocalContent,
-    localContent,
-    remoteContent,
+    updateEditorContent,
+    editorContent,
     hasUnsavedChanges,
   } = fileArtifact);
 
@@ -113,7 +112,7 @@
       dimensions: Vector;
     }>,
   ) {
-    const parsedDocument = parseDocument($localContent ?? $remoteContent ?? "");
+    const parsedDocument = parseDocument($editorContent ?? "");
     const items = parsedDocument.get("items") as any;
 
     const node = items.get(e.detail.index);
@@ -123,7 +122,7 @@
     node.set("x", e.detail.position[0]);
     node.set("y", e.detail.position[1]);
 
-    updateLocalContent(parsedDocument.toString(), true);
+    updateEditorContent(parsedDocument.toString());
 
     if ($autoSave) await updateComponentFile();
   }
@@ -136,7 +135,7 @@
       x: 0,
       y: 0,
     };
-    const parsedDocument = parseDocument($localContent ?? $remoteContent ?? "");
+    const parsedDocument = parseDocument($editorContent ?? "");
 
     const items = parsedDocument.get("items") as any;
 
@@ -146,7 +145,7 @@
       items.add(newComponent);
     }
 
-    updateLocalContent(parsedDocument.toString(), true);
+    updateEditorContent(parsedDocument.toString(), true);
 
     if ($autoSave) await updateComponentFile();
   }
@@ -161,7 +160,7 @@
   }
 
   async function deleteComponent(index: number) {
-    const parsedDocument = parseDocument($localContent ?? $remoteContent ?? "");
+    const parsedDocument = parseDocument($editorContent ?? "");
 
     const items = parsedDocument.get("items") as any;
 
@@ -169,7 +168,7 @@
 
     items.delete(index);
 
-    updateLocalContent(parsedDocument.toString(), true);
+    updateEditorContent(parsedDocument.toString(), true);
 
     if ($autoSave) await updateComponentFile();
   }
@@ -225,7 +224,6 @@
                 extensions={FileExtensionToEditorExtension[".yaml"]}
                 autoSave
                 showSaveBar={false}
-                forceLocalUpdates
                 onRevert={() => {
                   spec = structuredClone(spec);
                 }}
diff --git a/web-common/src/features/workspaces/ExploreWorkspace.svelte b/web-common/src/features/workspaces/ExploreWorkspace.svelte
index 8a6615a1a04..f2e3ff93957 100644
--- a/web-common/src/features/workspaces/ExploreWorkspace.svelte
+++ b/web-common/src/features/workspaces/ExploreWorkspace.svelte
@@ -109,7 +109,6 @@
         {exploreName}
         {fileArtifact}
         {lineBasedRuntimeErrors}
-        forceLocalUpdates
       />
     {:else if selectedView === "viz"}
       {#if mainError}
diff --git a/web-common/src/features/workspaces/SourceWorkspace.svelte b/web-common/src/features/workspaces/SourceWorkspace.svelte
index ff03c2062a4..1aa2df71d0d 100644
--- a/web-common/src/features/workspaces/SourceWorkspace.svelte
+++ b/web-common/src/features/workspaces/SourceWorkspace.svelte
@@ -155,7 +155,7 @@
           hasUnsavedChanges={$hasUnsavedChanges}
           hasErrors={$hasErrors}
           {isLocalFileConnector}
-          on:save-source={fileArtifact.saveLocalContent}
+          on:save-source={() => fileArtifact.saveLocalContent()}
           on:refresh-source={refresh}
           on:replace-source={replaceSource}
           on:create-model={handleCreateModelFromSource}
@@ -164,7 +164,10 @@
     </svelte:fragment>
   </WorkspaceHeader>
 
-  <div slot="body" class="editor-pane size-full overflow-hidden flex flex-col">
+  <div
+    slot="body"
+    class="editor-pane size-full overflow-hidden flex flex-col gap-y-0"
+  >
     <WorkspaceEditorContainer>
       {#key assetName}
         <SourceEditor {fileArtifact} {allErrors} />
diff --git a/web-common/src/features/workspaces/VisualExploreEditing.svelte b/web-common/src/features/workspaces/VisualExploreEditing.svelte
index 9eb71a1f4cd..26cebdd8e51 100644
--- a/web-common/src/features/workspaces/VisualExploreEditing.svelte
+++ b/web-common/src/features/workspaces/VisualExploreEditing.svelte
@@ -52,12 +52,11 @@
   export let switchView: () => void;
 
   $: ({ instanceId } = $runtime);
-  $: ({ localContent, remoteContent, saveContent, path, updateLocalContent } =
-    fileArtifact);
+  $: ({ editorContent, path, updateEditorContent } = fileArtifact);
 
   $: exploreSpec = exploreResource?.state?.validSpec;
 
-  $: parsedDocument = parseDocument($localContent ?? $remoteContent ?? "");
+  $: parsedDocument = parseDocument($editorContent ?? "");
 
   $: metricsViewsQuery = useFilteredResources(
     instanceId,
@@ -243,11 +242,7 @@
 
     killState();
 
-    if (autoSave) {
-      await saveContent(parsedDocument.toString());
-    } else {
-      updateLocalContent(parsedDocument.toString(), true);
-    }
+    updateEditorContent(parsedDocument.toString(), false, autoSave);
   }
 
   function killState() {
diff --git a/web-common/src/features/workspaces/VisualMetrics.svelte b/web-common/src/features/workspaces/VisualMetrics.svelte
index 4c1ff14552f..3efe791992a 100644
--- a/web-common/src/features/workspaces/VisualMetrics.svelte
+++ b/web-common/src/features/workspaces/VisualMetrics.svelte
@@ -96,10 +96,10 @@
 
   $: totalSelected = selected.measures.size + selected.dimensions.size;
 
-  $: ({ remoteContent, localContent, saveContent, getResource } = fileArtifact);
+  $: ({ editorContent, saveContent, getResource } = fileArtifact);
 
   // YAML Parsing
-  $: parsedDocument = parseDocument($localContent ?? $remoteContent ?? "");
+  $: parsedDocument = parseDocument($editorContent ?? "");
 
   $: raw = {
     measures: parsedDocument.get("measures"),
diff --git a/web-common/src/layout/ApplicationHeader.svelte b/web-common/src/layout/ApplicationHeader.svelte
index fb4d305c50b..9fabaaf7d4b 100644
--- a/web-common/src/layout/ApplicationHeader.svelte
+++ b/web-common/src/layout/ApplicationHeader.svelte
@@ -64,11 +64,11 @@
   async function submitTitleChange(editedTitle: string) {
     const artifact = fileArtifacts.getFileArtifact("/rill.yaml");
 
-    let content = get(artifact.localContent) ?? get(artifact.remoteContent);
+    let content = get(artifact.editorContent);
 
     if (!content) {
       await artifact.fetchContent();
-      content = get(artifact.localContent) ?? get(artifact.remoteContent);
+      content = get(artifact.remoteContent);
       if (!content) {
         return;
       }
@@ -77,7 +77,7 @@
 
     parsed.set("display_name", editedTitle);
 
-    artifact.updateLocalContent(parsed.toString(), true);
+    artifact.updateEditorContent(parsed.toString(), true);
     await artifact.saveLocalContent();
   }
 </script>
diff --git a/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte b/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
index fac72a08582..24d30a771bb 100644
--- a/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
+++ b/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
@@ -8,7 +8,7 @@
   export let showError = true;
 </script>
 
-<div class="flex flex-col size-full gap-y-1">
+<div class="flex flex-col size-full gap-y-1 overflow-y-auto">
   <div
     class="size-full border overflow-y-hidden rounded-[2px] bg-background flex flex-col items-center justify-center"
     class:!border-red-500={error}
diff --git a/web-local/tests/explores/time-controls-from-config.spec.ts b/web-local/tests/explores/time-controls-from-config.spec.ts
index c1079caf717..205d26f03f2 100644
--- a/web-local/tests/explores/time-controls-from-config.spec.ts
+++ b/web-local/tests/explores/time-controls-from-config.spec.ts
@@ -20,6 +20,7 @@ test.describe("time controls settings from explore preset", () => {
 `),
     );
 
+    await page.waitForTimeout(1000);
     // Preview
     await page.getByRole("button", { name: "Preview" }).click();
 
@@ -39,6 +40,7 @@ test.describe("time controls settings from explore preset", () => {
   comparison_mode: time
 `),
     );
+
     // Preview
     await page.getByRole("button", { name: "Preview" }).click();
 
@@ -176,7 +178,9 @@ test.describe("time controls settings from explore preset", () => {
     await expect(page.getByText("Facebook 68 -3 -4%")).toBeVisible();
 
     // Open the time comparison
-    await page.getByLabel("Select time comparison option").click();
+    await page
+      .getByLabel("Select time comparison option")
+      .click({ force: true });
     // Assert the options available
     await Promise.all(
       [
diff --git a/web-local/tests/sources.spec.ts b/web-local/tests/sources.spec.ts
index 94d8e04ce51..778bc6c57b4 100644
--- a/web-local/tests/sources.spec.ts
+++ b/web-local/tests/sources.spec.ts
@@ -79,6 +79,7 @@ path: ${TestDataPath}/non_existent_file.csv`;
     // Edit source path to an existent file
     const adImpressionsSource = `connector: local_file
 path: ${TestDataPath}/AdImpressions.tsv`;
+
     await updateCodeEditor(page, adImpressionsSource);
     await page.getByRole("button", { name: "Save" }).click();
 
diff --git a/web-local/tests/utils/commonHelpers.ts b/web-local/tests/utils/commonHelpers.ts
index fa98cc945fe..b66ce0dfd29 100644
--- a/web-local/tests/utils/commonHelpers.ts
+++ b/web-local/tests/utils/commonHelpers.ts
@@ -137,5 +137,5 @@ export async function updateCodeEditor(page: Page, code: string) {
     await page.keyboard.press("Control+A");
   }
   await page.keyboard.insertText(code);
-  await page.waitForTimeout(500);
+  await page.waitForTimeout(600);
 }

From 926baa06be3653e682f4a578b9f7e959e04dd417 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20Egelund-M=C3=BCller?= <b@egelund-muller.com>
Date: Thu, 19 Dec 2024 14:05:30 +0100
Subject: [PATCH 4/7] Add `namespace:` for resources (#6306)

---
 runtime/compilers/rillv1/parse_node.go  |  8 +++++
 runtime/compilers/rillv1/parser_test.go | 44 +++++++++++++++++++++++++
 runtime/compilers/rillv1/util.go        |  3 ++
 3 files changed, 55 insertions(+)

diff --git a/runtime/compilers/rillv1/parse_node.go b/runtime/compilers/rillv1/parse_node.go
index 8beea576f6d..0b6d0d973da 100644
--- a/runtime/compilers/rillv1/parse_node.go
+++ b/runtime/compilers/rillv1/parse_node.go
@@ -73,6 +73,9 @@ type commonYAML struct {
 	Kind *string `yaml:"kind"`
 	// Name is usually inferred from the filename, but can be specified manually.
 	Name string `yaml:"name"`
+	// Namespace is an optional value to group resources by.
+	// It currently just gets pre-pended to the resource name in the format `<namespace>/<name>`.
+	Namespace string `yaml:"namespace"`
 	// Refs are a list of other resources that this resource depends on. They are usually inferred from other fields, but can also be specified manually.
 	Refs []yaml.Node `yaml:"refs"`
 	// ParserConfig enables setting file-level parser config.
@@ -283,6 +286,11 @@ func (p *Parser) parseStem(paths []string, ymlPath, yml, sqlPath, sql string) (*
 		}
 	}
 
+	// If a namespace was provided in YAML, prepend it to the name.
+	if cfg != nil && cfg.Namespace != "" {
+		res.Name = cfg.Namespace + ":" + res.Name
+	}
+
 	// If resource kind is not set in YAML or SQL, try to infer it from the context
 	if res.Kind == ResourceKindUnspecified {
 		if strings.HasPrefix(paths[0], "/sources") {
diff --git a/runtime/compilers/rillv1/parser_test.go b/runtime/compilers/rillv1/parser_test.go
index 4feaaeb743b..200af087d30 100644
--- a/runtime/compilers/rillv1/parser_test.go
+++ b/runtime/compilers/rillv1/parser_test.go
@@ -2022,6 +2022,50 @@ refresh:
 	requireResourcesAndErrors(t, p, []*Resource{m1, m2}, nil)
 }
 
+func TestNamespace(t *testing.T) {
+	ctx := context.Background()
+	repo := makeRepo(t, map[string]string{
+		`rill.yaml`: ``,
+		`models/m1.yaml`: `
+type: model
+sql: SELECT 1
+`,
+		`explores/e1.yaml`: `
+type: explore
+namespace: foo
+metrics_view: missing
+`,
+	})
+
+	resources := []*Resource{
+		{
+			Name:  ResourceName{Kind: ResourceKindModel, Name: "m1"},
+			Paths: []string{"/models/m1.yaml"},
+			ModelSpec: &runtimev1.ModelSpec{
+				RefreshSchedule: &runtimev1.Schedule{RefUpdate: true},
+				InputConnector:  "duckdb",
+				InputProperties: must(structpb.NewStruct(map[string]any{"sql": `SELECT 1`})),
+				OutputConnector: "duckdb",
+			},
+		},
+		{
+			Name:  ResourceName{Kind: ResourceKindExplore, Name: "foo:e1"},
+			Paths: []string{"/explores/e1.yaml"},
+			Refs:  []ResourceName{{Kind: ResourceKindMetricsView, Name: "missing"}},
+			ExploreSpec: &runtimev1.ExploreSpec{
+				DisplayName:        "Foo: E1",
+				MetricsView:        "missing",
+				DimensionsSelector: &runtimev1.FieldSelector{Selector: &runtimev1.FieldSelector_All{All: true}},
+				MeasuresSelector:   &runtimev1.FieldSelector{Selector: &runtimev1.FieldSelector_All{All: true}},
+			},
+		},
+	}
+
+	p, err := Parse(ctx, repo, "", "", "duckdb")
+	require.NoError(t, err)
+	requireResourcesAndErrors(t, p, resources, nil)
+}
+
 func requireResourcesAndErrors(t testing.TB, p *Parser, wantResources []*Resource, wantErrors []*runtimev1.ParseError) {
 	// Check errors
 	// NOTE: Assumes there's at most one parse error per file path
diff --git a/runtime/compilers/rillv1/util.go b/runtime/compilers/rillv1/util.go
index 150c56056cc..4d98bdafe6e 100644
--- a/runtime/compilers/rillv1/util.go
+++ b/runtime/compilers/rillv1/util.go
@@ -18,6 +18,9 @@ func ToDisplayName(name string) string {
 	name = strings.ReplaceAll(name, "_", " ")
 	name = strings.ReplaceAll(name, "-", " ")
 
+	// Replace colons with colon-space.
+	name = strings.ReplaceAll(name, ":", ": ")
+
 	// Capitalize the first letter.
 	name = cases.Title(language.English).String(name)
 

From b742debb7fff205be15d57eb7e67d931d7876c13 Mon Sep 17 00:00:00 2001
From: Roy Endo <67675319+royendo@users.noreply.github.com>
Date: Thu, 19 Dec 2024 08:10:05 -0700
Subject: [PATCH 5/7] 0.52 release notes (#6204)

* 0.52 release notes

* bug fix and misc

* docs: feature stub

* docs: release gif

* fix: spelling

---------

Co-authored-by: Alexander Thor <alec.karlsson@gmail.com>
---
 docs/blog/0.52.md | 62 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 docs/blog/0.52.md

diff --git a/docs/blog/0.52.md b/docs/blog/0.52.md
new file mode 100644
index 00000000000..66282ec2f6c
--- /dev/null
+++ b/docs/blog/0.52.md
@@ -0,0 +1,62 @@
+---
+
+date: 2024-12-12
+image: https://github.com/rilldata/rill/assets/5587788/b30486f6-002a-445d-8a1b-955b6ec0066d
+
+---
+
+# Rill 0.52 - Visual Explore Editing, human readable URLs, env variables in the cloud and breadcrumbs!
+
+:::note
+⚡ Rill Developer is a tool that makes it effortless to transform your datasets with SQL and create fast, exploratory dashboards. Rill Cloud can then help to enable shared collaboration at scale.
+
+To [try out Rill Developer, check out these instructions](/home/install) and [join us over on Discord](https://bit.ly/3bbcSl9) to meet the team behind the product as well as other users. In addition, once you have a project set up in Rill Developer, you can then [deploy the project](/deploy/deploy-dashboard) and collaborate with others / invite your team members by [logging into Rill Cloud](https://ui.rilldata.com)!
+:::
+
+![release-0 52](<https://cdn.rilldata.com/docs/release-notes/release052.gif>)
+
+## Visual Explore Editing
+With our 0.51 release we introduced the ability to visually edit metrics and dimensions in the metrics view. Now we are extending the same capabilities also for Explore dashboards. So if you prefer a UX experience over editing yaml files directly then this is for you!
+
+## Human Readable URLs
+As you navigate around inside of a Rill dashboard what you see on the screen is always present in the URL so that you can easily share that URL with other users and they will see exactly what you are seeing on the screen. Previously we encoded this URL so that it was very hard to read, change or make updates to but with our 0.52 release the URL will now be fully human readable. This allows you to more easily embed a Rill dashboard into intranets and dynamically change what the user sees on the screen and when you get sent a link from someone it's easier to understand what the actual URL will show on the screen.
+
+## Environment Variables - Manage in Rill Cloud
+In Rill Cloud you can now visually manage your environment variables for a project. Add, update or delete them directly from Rill Cloud without having to fire up the Rill CLI. Change a password env variable and all your developers have to do is a rill env pull and they are up-to-date!
+
+## Project Breadcrumbs in Rill Developer
+As you are navigating around in Rill Developer you will now find breadcrumbs that shows you the associated resources so that you can quickly navigate between them as you are making changes. An early quality of life holiday present!
+
+## Bug Fixes and Misc
+- Added support for STS AssumeRole in Athena connector.
+- Support locate formatting using `d3_locale` in metrics view.
+- Added UI for Environment Variables in Rill Cloud.
+- Removed "Back to Home" from Embed Dashboards.
+- Improved Big number KPI formatting rules.
+- Default to UTC when no timezones are selected.
+- Environmental Variables are now available in security policies.
+- Port not required when connecting to Cloud OLAP URL.
+- Improved UI: Improved project user list UI.
+- Improved UI: Improved buttons to return to Explore main page.
+- Improved UX: Disable slack notification by default.
+- Improved UX: Refresh button should initiate incremental refresh where possible.
+- Improved UX: Support infinite query when listing org users and invites.
+- Improved UX: Offer to copy to clipboard CTA when creating public URL
+- Improved UX: Users able to drag and select multiple values to copy in pivot.
+- Improved UX: Add clear button on pivot header for rows and columns.
+- Improved UX: Added error handling for row access policies.
+- fixed Leaderboard column sorting behavior.
+- fixed `Select all` button in the dimension leaderboard.
+- fixed Scroll position in pivot table when loading new rows. 
+- fixed environmental overrides in rill.yaml.
+- fixed custom compare time ranges in reports or alerts.
+- fixed leaderboard header no label issue, defaults to name.
+- fixed case issues with bookmarks.
+- fixed autogenerated metric view indentation and default parameters.
+- fixed issue when switching dashboards based on the same metrics view in Rill Cloud.
+- fixed formatting in TDD when formatting is not defined, use humanize.
+- fixed issue in embed dashboard when pivot disabled, `Start pivot` still visible.
+- fixed issue where could not search by name in Org search.
+- fixed issue where limit was not being applied to exports.
+- fixed issue when disabling compare dimension in TDD not being respected.
+- fixed issue where ClickHouse would auto unnest in metrics view.

From d59498f5babb142740e141928a660432aae9064f Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Thu, 19 Dec 2024 22:22:57 +0530
Subject: [PATCH 6/7] Fix time ranges missing from bookmarks (#6314)

---
 .../BookmarksDropdownMenuContent.svelte       |  1 +
 web-admin/src/features/bookmarks/selectors.ts | 27 ++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/web-admin/src/features/bookmarks/BookmarksDropdownMenuContent.svelte b/web-admin/src/features/bookmarks/BookmarksDropdownMenuContent.svelte
index e0cfbe739a5..7d738ab2a65 100644
--- a/web-admin/src/features/bookmarks/BookmarksDropdownMenuContent.svelte
+++ b/web-admin/src/features/bookmarks/BookmarksDropdownMenuContent.svelte
@@ -80,6 +80,7 @@
     $schemaResp.data?.schema,
     $exploreState,
     defaultExplorePreset,
+    $metricsViewTimeRange.data?.timeRangeSummary,
   );
   $: filteredBookmarks = searchBookmarks(categorizedBookmarks, searchText);
 
diff --git a/web-admin/src/features/bookmarks/selectors.ts b/web-admin/src/features/bookmarks/selectors.ts
index 026c7627edc..cdba5a8f2ba 100644
--- a/web-admin/src/features/bookmarks/selectors.ts
+++ b/web-admin/src/features/bookmarks/selectors.ts
@@ -8,7 +8,10 @@ import { getDashboardStateFromUrl } from "@rilldata/web-common/features/dashboar
 import { useMetricsViewTimeRange } from "@rilldata/web-common/features/dashboards/selectors";
 import { useExploreState } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
 import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
-import { timeControlStateSelector } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
+import {
+  getTimeControlState,
+  timeControlStateSelector,
+} from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { convertExploreStateToURLSearchParams } from "@rilldata/web-common/features/dashboards/url-state/convertExploreStateToURLSearchParams";
 import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
 import { useExploreValidSpec } from "@rilldata/web-common/features/explores/selectors";
@@ -20,6 +23,7 @@ import {
   type V1ExploreSpec,
   type V1MetricsViewSpec,
   type V1StructType,
+  type V1TimeRangeSummary,
 } from "@rilldata/web-common/runtime-client";
 import type { QueryClient } from "@tanstack/query-core";
 import { derived, get, type Readable } from "svelte/store";
@@ -61,6 +65,7 @@ export function categorizeBookmarks(
   schema: V1StructType | undefined,
   exploreState: MetricsExplorerEntity,
   defaultExplorePreset: V1ExplorePreset,
+  timeRangeSummary: V1TimeRangeSummary | undefined,
 ) {
   const bookmarks: Bookmarks = {
     home: undefined,
@@ -76,6 +81,7 @@ export function categorizeBookmarks(
       schema ?? {},
       exploreState,
       defaultExplorePreset,
+      timeRangeSummary,
     );
     if (isHomeBookmark(bookmarkResource)) {
       bookmarks.home = bookmark;
@@ -143,6 +149,7 @@ export function convertBookmarkToUrlSearchParams(
   schema: V1StructType,
   exploreState: MetricsExplorerEntity | undefined,
   defaultExplorePreset: V1ExplorePreset,
+  timeRangeSummary: V1TimeRangeSummary | undefined,
 ) {
   const exploreStateFromBookmark = getDashboardStateFromUrl(
     bookmarkResource.data ?? "",
@@ -150,13 +157,19 @@ export function convertBookmarkToUrlSearchParams(
     exploreSpec,
     schema,
   );
+  const finalExploreState = {
+    ...(exploreState ?? {}),
+    ...exploreStateFromBookmark,
+  } as MetricsExplorerEntity;
   return convertExploreStateToURLSearchParams(
-    {
-      ...(exploreState ?? {}),
-      ...exploreStateFromBookmark,
-    } as MetricsExplorerEntity,
+    finalExploreState,
     exploreSpec,
-    undefined, // TODO
+    getTimeControlState(
+      metricsViewSpec,
+      exploreSpec,
+      timeRangeSummary,
+      finalExploreState,
+    ),
     defaultExplorePreset,
   );
 }
@@ -168,6 +181,7 @@ function parseBookmark(
   schema: V1StructType,
   exploreState: MetricsExplorerEntity,
   defaultExplorePreset: V1ExplorePreset,
+  timeRangeSummary: V1TimeRangeSummary | undefined,
 ): BookmarkEntry {
   const url = new URL(get(page).url);
   url.search = convertBookmarkToUrlSearchParams(
@@ -177,6 +191,7 @@ function parseBookmark(
     schema,
     exploreState,
     defaultExplorePreset,
+    timeRangeSummary,
   );
   return {
     resource: bookmarkResource,

From a00746a1daec5872b3bebf7c0117c75a322e163d Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Thu, 19 Dec 2024 23:03:30 +0530
Subject: [PATCH 7/7] Fix time range params vanishing on reloading (#6315)

---
 .../url-state/DashboardURLStateSync.svelte    | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/web-common/src/features/dashboards/url-state/DashboardURLStateSync.svelte b/web-common/src/features/dashboards/url-state/DashboardURLStateSync.svelte
index 4bbca009f62..4a0d7d775da 100644
--- a/web-common/src/features/dashboards/url-state/DashboardURLStateSync.svelte
+++ b/web-common/src/features/dashboards/url-state/DashboardURLStateSync.svelte
@@ -18,6 +18,7 @@
     hasSessionStorageData,
     updateExploreSessionStore,
   } from "@rilldata/web-common/features/dashboards/url-state/explore-web-view-store";
+  import { waitUntil } from "@rilldata/web-common/lib/waitUtils";
   import {
     createQueryServiceMetricsViewSchema,
     type V1ExplorePreset,
@@ -49,7 +50,11 @@
     metricsViewName,
   );
   $: ({ error: schemaError } = $metricsViewSchema);
-  $: ({ error, data: timeRangeSummaryResp } = $timeRangeSummaryStore);
+  $: ({
+    error,
+    data: timeRangeSummaryResp,
+    isLoading: timeRangeSummaryIsLoading,
+  } = $timeRangeSummaryStore);
   $: timeRangeSummaryError = error as HTTPError;
 
   let timeControlsState: TimeControlState | undefined = undefined;
@@ -63,13 +68,14 @@
   }
 
   let prevUrl = "";
+  let initializing = false;
 
   onMount(() => {
     // in some cases afterNavigate is not always triggered
     // so this is the escape hatch to make sure dashboard store gets initialised
     setTimeout(() => {
       if (!$dashboardStore) {
-        handleExploreInit(true);
+        void handleExploreInit(true);
       }
     });
   });
@@ -103,7 +109,7 @@
       // When a user changes url manually and clears the params the `type` will be "enter"
       // This signal is used in handleExploreInit to make sure we do not use sessionStorage
       const isManualUrlChange = type === "enter";
-      handleExploreInit(isManualUrlChange);
+      void handleExploreInit(isManualUrlChange);
       return;
     }
 
@@ -160,8 +166,9 @@
     });
   });
 
-  function handleExploreInit(isManualUrlChange: boolean) {
-    if (!exploreSpec || !metricsSpec) return;
+  async function handleExploreInit(isManualUrlChange: boolean) {
+    if (!exploreSpec || !metricsSpec || initializing) return;
+    initializing = true;
 
     let initState: Partial<MetricsExplorerEntity> | undefined;
     let shouldUpdateUrl = false;
@@ -187,7 +194,14 @@
       };
     }
 
+    await waitUntil(() => !timeRangeSummaryIsLoading);
     metricsExplorerStore.init(exploreName, initState);
+    timeControlsState ??= getTimeControlState(
+      metricsSpec,
+      exploreSpec,
+      timeRangeSummaryResp?.timeRangeSummary,
+      get(metricsExplorerStore).entities[exploreName],
+    );
     const redirectUrl = new URL($page.url);
     redirectUrl.search = getUpdatedUrlForExploreState(
       exploreSpec,