diff --git a/package-lock.json b/package-lock.json
index 5e663ba0c277..2d3b3048a25e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13112,9 +13112,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.13",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.13.tgz",
-      "integrity": "sha512-BL2sTuHOdy0YT1lYieUxTw/QMtPBC3pmlJC6xk8BBYVv6vcw3SGdKemQ+Xsx9ik2F/lYDO9tqsFQH1r9PFuHKw==",
+      "version": "2.10.38",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.38.tgz",
+      "integrity": "sha512-31/02mVB4yuQU6adKk5SlY6m+mxDwUq5KZkyYgnLrrKl7TEm1+3PyDtDBz2kOv/wxZz41GHsvV1A/u6RmiyBvw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -13762,9 +13762,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001784",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001784.tgz",
-      "integrity": "sha512-WU346nBTklUV9YfUl60fqRbU5ZqyXlqvo1SgigE1OAXK5bFL8LL9q1K7aap3N739l4BvNqnkm3YrGHiY9sfUQw==",
+      "version": "1.0.30001799",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
+      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
       "dev": true,
       "funding": [
         {
diff --git a/web-admin/src/features/bookmarks/BookmarksFormDialog.svelte b/web-admin/src/features/bookmarks/BookmarksFormDialog.svelte
index 36c0bf9a2510..1a248967b2ec 100644
--- a/web-admin/src/features/bookmarks/BookmarksFormDialog.svelte
+++ b/web-admin/src/features/bookmarks/BookmarksFormDialog.svelte
@@ -8,7 +8,6 @@
   import { invalidateBookmarkQueries } from "@rilldata/web-admin/features/bookmarks/selectors.ts";
   import {
     type BookmarkEntry,
-    formatTimeRange,
     getBookmarkData,
   } from "@rilldata/web-admin/features/bookmarks/utils.ts";
   import ProjectAccessControls from "@rilldata/web-admin/features/projects/ProjectAccessControls.svelte";
@@ -20,16 +19,10 @@
   import Switch from "@rilldata/web-common/components/forms/Switch.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
-  import { deriveInterval } from "@rilldata/web-common/features/dashboards/time-controls/new-time-controls";
-  import { ExploreStateURLParams } from "@rilldata/web-common/features/dashboards/url-state/url-params";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors.ts";
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus.ts";
-  import {
-    V1TimeGrain,
-    type V1TimeRange,
-  } from "@rilldata/web-common/runtime-client";
+  import { type V1TimeRange } from "@rilldata/web-common/runtime-client";
   import { InfoIcon } from "lucide-svelte";
-  import type { Interval } from "luxon";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { defaults, superForm } from "sveltekit-superforms";
   import { yup } from "sveltekit-superforms/adapters";
@@ -43,6 +36,7 @@
   } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
   import { onDestroy } from "svelte";
   import { syncStoreWithSource } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
+  import { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
   let {
     organization,
@@ -72,11 +66,11 @@
     resourceKind === ResourceKind.Canvas
       ? new CanvasDashboardConfigProvider(runtimeClient, resourceName)
       : new ExploreDashboardConfigProvider(runtimeClient, resourceName);
+
   const expressionFilterManager = new ExpressionFilterManager(
     dashboardConfigProvider.metricsViewsProvider,
     dashboardConfigProvider.yamlConfigProvider,
   );
-
   // Always load from current state. This is the only route to overwrite bookmark state.
   // A future PR will improve this by adding `Replace` action, in that case this should only have bookmark's state.
   syncStoreWithSource(
@@ -85,6 +79,22 @@
     () => dashboardConfigProvider.metricsViewsProvider.ready,
   );
 
+  const timeFilterManager = new TimeFilterManager(
+    runtimeClient,
+    dashboardConfigProvider.metricsViewsProvider,
+    dashboardConfigProvider.yamlConfigProvider,
+    true,
+  );
+  // Always load from current state. This is the only route to overwrite bookmark state.
+  // A future PR will improve this by adding `Replace` action, in that case this should only have bookmark's state.
+  syncStoreWithSource(
+    timeFilterManager,
+    async (newUrlParams) => timeFilterManager.setUrlParams(newUrlParams),
+    () =>
+      timeFilterManager.ready &&
+      dashboardConfigProvider.metricsViewsProvider.ready,
+  );
+
   let timeFilterState = $state<
     | {
         queryTimeStart: string;
@@ -96,70 +106,6 @@
   >(undefined);
 
   let curUrlParams = $derived(page.url.searchParams);
-  $effect(() => void processTimeFromUrl());
-  async function processTimeFromUrl() {
-    const searchParamsObj = new URLSearchParams(curUrlParams);
-    const rangeExpression = searchParamsObj.get(
-      ExploreStateURLParams.TimeRange,
-    );
-    const timeRange = <V1TimeRange>{
-      expression: rangeExpression || "",
-    };
-
-    const timeZone =
-      searchParamsObj.get(ExploreStateURLParams.TimeZone) || "UTC";
-
-    try {
-      const promises =
-        dashboardConfigProvider.metricsViewsProvider.metricsViewNames.map(
-          (mvName) =>
-            deriveInterval(
-              timeRange.expression || "",
-              runtimeClient,
-              mvName,
-              timeZone,
-            ),
-        );
-
-      const intervals = await Promise.all(promises);
-      let intervalWithLatestEndPoint:
-        | {
-            interval: Interval;
-            grain?: V1TimeGrain | undefined;
-            error?: string;
-          }
-        | undefined;
-      intervals.forEach((response) => {
-        if (
-          !intervalWithLatestEndPoint ||
-          (response.interval.end && intervalWithLatestEndPoint.interval.end
-            ? response.interval.end > intervalWithLatestEndPoint.interval.end
-            : false)
-        ) {
-          intervalWithLatestEndPoint = response;
-        }
-      });
-
-      const start = intervalWithLatestEndPoint?.interval?.start?.toISO();
-      const end = intervalWithLatestEndPoint?.interval?.end?.toISO();
-
-      const grain =
-        (searchParamsObj.get(ExploreStateURLParams.TimeGrain) as V1TimeGrain) ||
-        intervalWithLatestEndPoint.grain ||
-        V1TimeGrain.TIME_GRAIN_MINUTE;
-
-      const selectedTimeRange = formatTimeRange(start, end, grain, timeZone);
-
-      timeFilterState = {
-        queryTimeStart: start,
-        queryTimeEnd: end,
-        displayTimeRange: timeRange,
-        selectedTimeRange,
-      };
-    } catch {
-      timeFilterState = undefined;
-    }
-  }
 
   const bookmarkCreator = createAdminServiceCreateBookmark();
   const bookmarkUpdater = createAdminServiceUpdateBookmark();
@@ -286,14 +232,10 @@
             {m.bookmark_filters_inherited()}
           </div>
         </Label>
-        {#if timeFilterState}
-          <ReadonlyExpressionFilters
-            {expressionFilterManager}
-            displayTimeRange={timeFilterState.displayTimeRange}
-            queryTimeStart={timeFilterState.queryTimeStart}
-            queryTimeEnd={timeFilterState.queryTimeEnd}
-          />
-        {/if}
+        <ReadonlyExpressionFilters
+          {expressionFilterManager}
+          {timeFilterManager}
+        />
       </div>
       <ProjectAccessControls {organization} {project}>
         <Select
diff --git a/web-admin/src/features/public-urls/CreatePublicURLForm.svelte b/web-admin/src/features/public-urls/CreatePublicURLForm.svelte
index 008d4f47bff5..c4db54157440 100644
--- a/web-admin/src/features/public-urls/CreatePublicURLForm.svelte
+++ b/web-admin/src/features/public-urls/CreatePublicURLForm.svelte
@@ -39,6 +39,7 @@
   } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
   import { onDestroy } from "svelte";
   import { syncStoreWithSource } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
+  import { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
   let {
     dashboardResource,
@@ -62,11 +63,11 @@
   const dashboardConfigProvider = isExplore
     ? new ExploreDashboardConfigProvider(runtimeClient, dashboardName)
     : new CanvasDashboardConfigProvider(runtimeClient, dashboardName);
+
   const expressionFilterManager = new ExpressionFilterManager(
     dashboardConfigProvider.metricsViewsProvider,
     dashboardConfigProvider.yamlConfigProvider,
   );
-
   // Always load from current state. This is the only route to overwrite bookmark state.
   // A future PR will improve this by adding `Replace` action, in that case this should only have bookmark's state.
   syncStoreWithSource(
@@ -75,6 +76,22 @@
     () => dashboardConfigProvider.metricsViewsProvider.ready,
   );
 
+  const timeFilterManager = new TimeFilterManager(
+    runtimeClient,
+    dashboardConfigProvider.metricsViewsProvider,
+    dashboardConfigProvider.yamlConfigProvider,
+    true,
+  );
+  // Always load from current state. This is the only route to overwrite bookmark state.
+  // A future PR will improve this by adding `Replace` action, in that case this should only have bookmark's state.
+  syncStoreWithSource(
+    timeFilterManager,
+    async (newUrlParams) => timeFilterManager.setUrlParams(newUrlParams),
+    () =>
+      timeFilterManager.ready &&
+      dashboardConfigProvider.metricsViewsProvider.ready,
+  );
+
   const exprByMetricsView = $derived(expressionFilterManager.exprByMetricsView);
   const hasSomeFilter = $derived(Object.keys(exprByMetricsView).length > 0);
 
@@ -82,13 +99,9 @@
     dashboardKind,
     expressionFilterManager,
   );
-  let {
-    fields,
-    sanitizedState,
-    droppedEphemeralMeasures,
-    queryTimeStart,
-    queryTimeEnd,
-  } = $derived($sanitisedFilterState);
+  let { fields, sanitizedState, droppedEphemeralMeasures } = $derived(
+    $sanitisedFilterState,
+  );
 
   const formId = "create-public-url-form";
 
@@ -250,8 +263,8 @@
         <div class="flex flex-col gap-2 my-2">
           <ReadonlyExpressionFilters
             {expressionFilterManager}
-            {queryTimeStart}
-            {queryTimeEnd}
+            {timeFilterManager}
+            hideTimePills
           />
         </div>
       </div>
diff --git a/web-common/src/features/alerts/AlertForm.svelte b/web-common/src/features/alerts/AlertForm.svelte
index 4e23ba5ab209..f832fbfe70c9 100644
--- a/web-common/src/features/alerts/AlertForm.svelte
+++ b/web-common/src/features/alerts/AlertForm.svelte
@@ -44,7 +44,6 @@
     isSomeFieldTainted,
   } from "@rilldata/web-common/features/alerts/utils.ts";
   import { getProtoFromDashboardState } from "@rilldata/web-common/features/dashboards/proto-state/toProto.ts";
-  import { useMetricsViewTimeRange } from "@rilldata/web-common/features/dashboards/selectors.ts";
   import { useExploreState } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores.ts";
   import type { ExploreState } from "@rilldata/web-common/features/dashboards/stores/explore-state.ts";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors.ts";
@@ -63,8 +62,8 @@
   import { defaults, superForm } from "sveltekit-superforms";
   import Button from "web-common/src/components/button/Button.svelte";
   import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
-  import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import { onDestroy } from "svelte";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
   export let onClose: () => void;
   export let onCancel: () => void;
@@ -90,13 +89,6 @@
   $: exploreSpec = $validExploreSpec.data?.explore ?? {};
   $: metricsViewName = exploreSpec.metricsView ?? "";
 
-  $: allTimeRangeResp = useMetricsViewTimeRange(
-    runtimeClient,
-    metricsViewName,
-    undefined,
-    queryClient,
-  );
-
   const exploreState =
     props.mode === "create"
       ? useExploreState(props.exploreName)
@@ -107,23 +99,17 @@
       ? createAdminServiceCreateAlert()
       : createAdminServiceEditAlert();
 
-  let filters: ExpressionFilterManager;
-  let timeControls: TimeControls;
+  let expressionFilterManager: ExpressionFilterManager;
+  let timeFilterManager: TimeFilterManager;
   let cleanup: (() => void) | undefined = undefined;
   $: {
     cleanup?.();
-    ({ filters, timeControls, cleanup } =
+    ({ expressionFilterManager, timeFilterManager, cleanup } =
       props.mode === "create"
-        ? getNewAlertInitialFiltersFormValues(
-            runtimeClient,
-            metricsViewName,
-            exploreName,
-            $exploreState!,
-          )
+        ? getNewAlertInitialFiltersFormValues(runtimeClient, metricsViewName)
         : getFiltersAndTimeControlsFromAggregationRequest(
             runtimeClient,
             metricsViewName,
-            exploreName,
             JSON.parse(
               props.alertSpec.queryArgsJson ||
                 (props.alertSpec.resolverProperties?.query_args_json as
@@ -131,10 +117,8 @@
                   | undefined) ||
                 "{}",
             ),
-            $allTimeRangeResp.data?.timeRangeSummary,
           ));
   }
-  $: ({ selectedComparisonTimeRange } = timeControls);
 
   const superFormInstance = superForm(
     defaults(initialValues, alertFormValidationSchema),
@@ -194,9 +178,8 @@
           queryArgsJson: JSON.stringify(
             getAlertQueryArgsFromFormValues(
               values,
-              filters.topLevelJoiner.expr[metricsViewName],
-              timeControls.toState(),
-              exploreSpec,
+              expressionFilterManager.topLevelJoiner.expr[metricsViewName],
+              timeFilterManager,
             ),
           ),
           metricsViewName: values.metricsViewName,
@@ -283,7 +266,7 @@
     // if the user came to the delivery tab and name was not changed then auto generate it
     const name = generateAlertName(
       $form,
-      $selectedComparisonTimeRange,
+      timeFilterManager.comparisonTimeRange,
       metricsViewSpec,
     );
     if (!name) return;
@@ -324,10 +307,18 @@
     </DialogTabs.List>
     <div class="p-3 bg-surface-subtle h-[600px] overflow-auto">
       <DialogTabs.Content {currentTabIndex} tabIndex={0} value={tabs[0]}>
-        <AlertDialogDataTab {superFormInstance} {filters} {timeControls} />
+        <AlertDialogDataTab
+          {superFormInstance}
+          {expressionFilterManager}
+          {timeFilterManager}
+        />
       </DialogTabs.Content>
       <DialogTabs.Content {currentTabIndex} tabIndex={1} value={tabs[1]}>
-        <AlertDialogCriteriaTab {superFormInstance} {filters} {timeControls} />
+        <AlertDialogCriteriaTab
+          {superFormInstance}
+          {expressionFilterManager}
+          {timeFilterManager}
+        />
       </DialogTabs.Content>
       <DialogTabs.Content {currentTabIndex} tabIndex={2} value={tabs[2]}>
         <AlertDialogDeliveryTab {superFormInstance} {exploreName} />
diff --git a/web-common/src/features/alerts/alert-preview-data.ts b/web-common/src/features/alerts/alert-preview-data.ts
index 8dca1bdbfa39..d26d1cc9a5f2 100644
--- a/web-common/src/features/alerts/alert-preview-data.ts
+++ b/web-common/src/features/alerts/alert-preview-data.ts
@@ -12,16 +12,11 @@ import {
   ComparisonPercentOfTotal,
 } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-entry";
 import { useExploreValidSpec } from "@rilldata/web-common/features/explores/selectors.ts";
-import type {
-  TimeControls,
-  TimeControlState,
-} from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
 import {
   createQueryServiceMetricsViewAggregation,
   queryServiceMetricsViewAggregation,
   type StructTypeField,
   TypeCode,
-  type V1ExploreSpec,
   type V1Expression,
   type V1MetricsViewAggregationRequest,
   type V1MetricsViewAggregationResponseDataItem,
@@ -35,6 +30,7 @@ import type {
   CreateQueryResult,
 } from "@tanstack/svelte-query";
 import { derived } from "svelte/store";
+import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export type AlertPreviewResponse = {
   rows: V1MetricsViewAggregationResponseDataItem[];
@@ -46,22 +42,14 @@ export function getAlertPreviewData(
   queryClient: QueryClient,
   formValues: AlertFormValues,
   expr: V1Expression | undefined,
-  timeControls: TimeControls,
+  timeFilterManager: TimeFilterManager,
 ): CreateQueryResult<AlertPreviewResponse> {
   return derived(
-    [
-      useExploreValidSpec(client, formValues.exploreName),
-      timeControls.getStore(),
-    ],
-    ([validExploreSpec, timeControlsState], set) =>
+    [useExploreValidSpec(client, formValues.exploreName)],
+    ([validExploreSpec], set) =>
       createQueryServiceMetricsViewAggregation(
         client,
-        getAlertPreviewQueryRequest(
-          formValues,
-          expr,
-          timeControlsState,
-          validExploreSpec.data?.explore ?? {},
-        ),
+        getAlertPreviewQueryRequest(formValues, expr, timeFilterManager),
         {
           query: getAlertPreviewQueryOptions(
             formValues,
@@ -76,25 +64,23 @@ export function getAlertPreviewData(
 function getAlertPreviewQueryRequest(
   formValues: AlertFormValues,
   expr: V1Expression | undefined,
-  timeControlArgs: TimeControlState,
-  exploreSpec: V1ExploreSpec,
+  timeFilterManager: TimeFilterManager,
 ): V1MetricsViewAggregationRequest {
   const req = getAlertQueryArgsFromFormValues(
     formValues,
     expr,
-    timeControlArgs,
-    exploreSpec,
+    timeFilterManager,
   );
 
   req.limit = "50"; // arbitrary limit to make sure we do not pull too much of data
-  if (!timeControlArgs.selectedTimeRange?.end) return req;
+  if (!timeFilterManager.timeEnd) return req;
 
+  // TODO: revisit this logic
   if (req.timeRange && !req.timeRange.expression) {
-    req.timeRange.end = timeControlArgs.selectedTimeRange.end.toISOString();
+    req.timeRange.end = timeFilterManager.timeEnd;
   }
   if (req.comparisonTimeRange && !req.comparisonTimeRange.expression) {
-    req.comparisonTimeRange.end =
-      timeControlArgs.selectedTimeRange.end.toISOString();
+    req.comparisonTimeRange.end = timeFilterManager.comparisonTimeEnd;
   }
   return req;
 }
diff --git a/web-common/src/features/alerts/create-alert-utils.ts b/web-common/src/features/alerts/create-alert-utils.ts
index 1a61a956c219..8922fc8bf2db 100644
--- a/web-common/src/features/alerts/create-alert-utils.ts
+++ b/web-common/src/features/alerts/create-alert-utils.ts
@@ -3,8 +3,6 @@ import { getSnoozeOptions } from "@rilldata/web-common/features/alerts/delivery-
 import type { AlertFormValues } from "@rilldata/web-common/features/alerts/form-utils.ts";
 import { getEmptyMeasureFilterEntry } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-entry.ts";
 import type { ExploreState } from "@rilldata/web-common/features/dashboards/stores/explore-state.ts";
-import { ExploreMetricsViewMetadata } from "@rilldata/web-common/features/dashboards/stores/ExploreMetricsViewMetadata.ts";
-import { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
 import { getInitialScheduleFormValues } from "@rilldata/web-common/features/scheduled-reports/time-utils.ts";
 import { V1Operation } from "@rilldata/web-common/runtime-client";
 import type { RuntimeClient } from "@rilldata/web-common/runtime-client/v2";
@@ -13,6 +11,7 @@ import { MetricsViewsProvider } from "@rilldata/web-common/features/metrics-view
 import { YAMLConfigProvider } from "@rilldata/web-common/features/dashboards/providers/YAMLConfigProvider.svelte.ts";
 import { page } from "$app/stores";
 import { get } from "svelte/store";
+import { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export function getNewAlertInitialFormValues(
   metricsViewName: string,
@@ -65,34 +64,29 @@ export function getNewAlertInitialFormValues(
 export function getNewAlertInitialFiltersFormValues(
   client: RuntimeClient,
   metricsViewName: string,
-  exploreName: string,
-  exploreState: Partial<ExploreState>,
 ) {
-  const metricsViewMetadata = new ExploreMetricsViewMetadata(
-    client,
-    metricsViewName,
-    exploreName,
-  );
-
   const metricsViewProvider = new MetricsViewsProvider(client, [
     metricsViewName,
   ]);
   const yamlConfigProvider = new YAMLConfigProvider();
-  const filters = new ExpressionFilterManager(
+
+  const expressionFilterManager = new ExpressionFilterManager(
+    metricsViewProvider,
+    yamlConfigProvider,
+  );
+  expressionFilterManager.setUrlParams(get(page).url.searchParams);
+
+  const timeFilterManager = new TimeFilterManager(
+    client,
     metricsViewProvider,
     yamlConfigProvider,
+    false,
   );
-  filters.setUrlParams(get(page).url.searchParams);
+  timeFilterManager.setUrlParams(get(page).url.searchParams);
 
-  const timeControls = new TimeControls(metricsViewMetadata, {
-    selectedTimeRange: exploreState.selectedTimeRange,
-    selectedComparisonTimeRange: exploreState.selectedComparisonTimeRange,
-    showTimeComparison: exploreState.showTimeComparison ?? false,
-    selectedTimezone: exploreState.selectedTimezone ?? "UTC",
-  });
   return {
-    filters,
-    timeControls,
+    expressionFilterManager,
+    timeFilterManager,
     cleanup: () => {
       metricsViewProvider.cleanup();
       yamlConfigProvider.cleanup?.();
diff --git a/web-common/src/features/alerts/criteria-tab/AlertDialogCriteriaTab.svelte b/web-common/src/features/alerts/criteria-tab/AlertDialogCriteriaTab.svelte
index d0ed016b781d..607846973cc7 100644
--- a/web-common/src/features/alerts/criteria-tab/AlertDialogCriteriaTab.svelte
+++ b/web-common/src/features/alerts/criteria-tab/AlertDialogCriteriaTab.svelte
@@ -4,13 +4,13 @@
   import AlertPreview from "@rilldata/web-common/features/alerts/criteria-tab/AlertPreview.svelte";
   import CriteriaGroup from "@rilldata/web-common/features/alerts/criteria-tab/CriteriaGroup.svelte";
   import type { AlertFormValues } from "@rilldata/web-common/features/alerts/form-utils";
-  import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import type { SuperForm } from "sveltekit-superforms/client";
   import type { ExpressionFilterManager } from "../../dashboards/filters/ExpressionFilterManager.svelte.ts";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
   export let superFormInstance: SuperForm<AlertFormValues>;
-  export let filters: ExpressionFilterManager;
-  export let timeControls: TimeControls;
+  export let expressionFilterManager: ExpressionFilterManager;
+  export let timeFilterManager: TimeFilterManager;
 
   $: ({ form } = superFormInstance);
 </script>
@@ -20,9 +20,13 @@
     description={m.alert_form_criteria_description()}
     title={m.alert_form_criteria_title()}
   >
-    <CriteriaGroup {superFormInstance} {timeControls} />
+    <CriteriaGroup {superFormInstance} {timeFilterManager} />
   </FormSection>
   <FormSection title={m.alert_form_criteria_preview_title()}>
-    <AlertPreview formValues={$form} {filters} {timeControls} />
+    <AlertPreview
+      formValues={$form}
+      {expressionFilterManager}
+      {timeFilterManager}
+    />
   </FormSection>
 </div>
diff --git a/web-common/src/features/alerts/criteria-tab/AlertPreview.svelte b/web-common/src/features/alerts/criteria-tab/AlertPreview.svelte
index 0dfbdae28d0e..382f200fa02d 100644
--- a/web-common/src/features/alerts/criteria-tab/AlertPreview.svelte
+++ b/web-common/src/features/alerts/criteria-tab/AlertPreview.svelte
@@ -6,21 +6,21 @@
   import { mapMeasureFilterToExpr } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-entry";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
-  import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import PreviewEmpty from "../PreviewEmpty.svelte";
   import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import type { DimensionTableRow } from "../../dashboards/dimension-table/dimension-table-types";
   import type { ExpressionFilterManager } from "../../dashboards/filters/ExpressionFilterManager.svelte.ts";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
   let {
     formValues,
-    filters,
-    timeControls,
+    expressionFilterManager,
+    timeFilterManager,
   }: {
     formValues: AlertFormValues;
-    filters: ExpressionFilterManager;
-    timeControls: TimeControls;
+    expressionFilterManager: ExpressionFilterManager;
+    timeFilterManager: TimeFilterManager;
   } = $props();
 
   const runtimeClient = useRuntimeClient();
@@ -30,8 +30,8 @@
       runtimeClient,
       queryClient,
       formValues,
-      filters.topLevelJoiner.expr[formValues.metricsViewName],
-      timeControls,
+      expressionFilterManager.topLevelJoiner.expr[formValues.metricsViewName],
+      timeFilterManager,
     ),
   );
 
diff --git a/web-common/src/features/alerts/criteria-tab/CriteriaForm.svelte b/web-common/src/features/alerts/criteria-tab/CriteriaForm.svelte
index d2007504bb3e..6286f43b11a5 100644
--- a/web-common/src/features/alerts/criteria-tab/CriteriaForm.svelte
+++ b/web-common/src/features/alerts/criteria-tab/CriteriaForm.svelte
@@ -8,21 +8,20 @@
   import type { AlertFormValues } from "@rilldata/web-common/features/alerts/form-utils";
   import { ephemeralMeasureToSpecMeasure } from "@rilldata/web-common/features/dashboards/ephemeral-measures/measure-mapping";
   import { useMetricsViewValidSpec } from "@rilldata/web-common/features/dashboards/selectors";
-  import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import { debounce } from "@rilldata/web-common/lib/create-debouncer";
   import { onMount } from "svelte";
   import { slide } from "svelte/transition";
   import type { SuperForm } from "sveltekit-superforms/client";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
   export let superFormInstance: SuperForm<AlertFormValues>;
-  export let timeControls: TimeControls;
+  export let timeFilterManager: TimeFilterManager;
   export let index: number;
 
   const runtimeClient = useRuntimeClient();
 
   $: ({ form, errors, validate } = superFormInstance);
-  $: ({ selectedComparisonTimeRange } = timeControls);
 
   $: metricsView = useMetricsViewValidSpec(
     runtimeClient,
@@ -51,7 +50,7 @@
 
   $: typeOptions = getTypeOptions(
     $form,
-    $selectedComparisonTimeRange,
+    timeFilterManager.comparisonTimeRange,
     selectedMeasure,
   );
 
diff --git a/web-common/src/features/alerts/criteria-tab/CriteriaGroup.svelte b/web-common/src/features/alerts/criteria-tab/CriteriaGroup.svelte
index a63f53179af5..5f4a05a24127 100644
--- a/web-common/src/features/alerts/criteria-tab/CriteriaGroup.svelte
+++ b/web-common/src/features/alerts/criteria-tab/CriteriaGroup.svelte
@@ -6,12 +6,12 @@
   import { CriteriaGroupOptions } from "@rilldata/web-common/features/alerts/criteria-tab/operations";
   import type { AlertFormValues } from "@rilldata/web-common/features/alerts/form-utils";
   import { getEmptyMeasureFilterEntry } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-entry";
-  import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import { Trash2Icon } from "lucide-svelte";
   import type { SuperForm } from "sveltekit-superforms/client";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
   export let superFormInstance: SuperForm<AlertFormValues>;
-  export let timeControls: TimeControls;
+  export let timeFilterManager: TimeFilterManager;
 
   $: ({ form } = superFormInstance);
 
@@ -51,7 +51,7 @@
             <Trash2Icon size="16px" />
           </button>
         </div>
-        <CriteriaForm {superFormInstance} {timeControls} {index} />
+        <CriteriaForm {superFormInstance} {timeFilterManager} {index} />
       </div>
     {/each}
     <Button type="tertiary" onClick={handleAddCriteria}
diff --git a/web-common/src/features/alerts/criteria-tab/getTypeOptions.ts b/web-common/src/features/alerts/criteria-tab/getTypeOptions.ts
index b10238d0ca53..1d28a549748e 100644
--- a/web-common/src/features/alerts/criteria-tab/getTypeOptions.ts
+++ b/web-common/src/features/alerts/criteria-tab/getTypeOptions.ts
@@ -10,7 +10,7 @@ import type { MetricsViewSpecMeasure } from "@rilldata/web-common/runtime-client
 
 export function getTypeOptions(
   formValues: AlertFormValues,
-  selectedComparisonTimeRange: DashboardTimeControls | undefined,
+  selectedComparisonTimeRange: string | undefined,
   selectedMeasure: MetricsViewSpecMeasure | undefined,
 ) {
   const options: {
@@ -21,11 +21,11 @@ export function getTypeOptions(
   }[] = [...MeasureFilterBaseTypeOptions];
 
   if (
-    selectedComparisonTimeRange?.name &&
-    selectedComparisonTimeRange?.name in TIME_COMPARISON
+    selectedComparisonTimeRange &&
+    selectedComparisonTimeRange in TIME_COMPARISON
   ) {
     const comparisonLabel =
-      TIME_COMPARISON[selectedComparisonTimeRange.name].label.toLowerCase();
+      TIME_COMPARISON[selectedComparisonTimeRange].label.toLowerCase();
     options.push(
       ...MeasureFilterComparisonTypeOptions.map((o) => {
         return {
diff --git a/web-common/src/features/alerts/data-tab/AlertDialogDataTab.svelte b/web-common/src/features/alerts/data-tab/AlertDialogDataTab.svelte
index 43bbde10c228..ab880441a5f0 100644
--- a/web-common/src/features/alerts/data-tab/AlertDialogDataTab.svelte
+++ b/web-common/src/features/alerts/data-tab/AlertDialogDataTab.svelte
@@ -3,7 +3,6 @@
   import type { AlertFormValues } from "@rilldata/web-common/features/alerts/form-utils";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
   import FiltersForm from "@rilldata/web-common/features/scheduled-reports/FiltersForm.svelte";
-  import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import { MetricsViewSpecMeasureType } from "@rilldata/web-common/runtime-client";
   import type { SuperForm } from "sveltekit-superforms/client";
   import FormSection from "../../../components/forms/FormSection.svelte";
@@ -12,10 +11,15 @@
   import { ephemeralMeasureToSpecMeasure } from "@rilldata/web-common/features/dashboards/ephemeral-measures/measure-mapping";
   import { useMetricsViewValidSpec } from "../../dashboards/selectors";
   import type { ExpressionFilterManager } from "../../dashboards/filters/ExpressionFilterManager.svelte.ts";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+  import {
+    DashboardConfigProvider,
+    ExploreDashboardConfigProvider,
+  } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
 
   export let superFormInstance: SuperForm<AlertFormValues>;
-  export let filters: ExpressionFilterManager;
-  export let timeControls: TimeControls;
+  export let expressionFilterManager: ExpressionFilterManager;
+  export let timeFilterManager: TimeFilterManager;
 
   const runtimeClient = useRuntimeClient();
 
@@ -26,6 +30,15 @@
   $: exploreName = $form["exploreName"];
   $: metricsView = useMetricsViewValidSpec(runtimeClient, metricsViewName);
 
+  let dashboardConfigProvider: DashboardConfigProvider;
+  $: {
+    dashboardConfigProvider?.cleanup?.();
+    dashboardConfigProvider = new ExploreDashboardConfigProvider(
+      runtimeClient,
+      exploreName,
+    );
+  }
+
   // Ephemeral measures have no spec entry; synthesize one so they can be
   // selected as the alert's measure.
   $: measureOptions = [
@@ -60,10 +73,9 @@
 <div class="flex flex-col gap-y-3">
   <FormSection title={m.alert_form_data_filters()}>
     <FiltersForm
-      {filters}
-      {metricsViewName}
-      {exploreName}
-      {timeControls}
+      {expressionFilterManager}
+      {timeFilterManager}
+      {dashboardConfigProvider}
       maxWidth={750}
     />
   </FormSection>
@@ -91,6 +103,10 @@
     title={m.alert_form_data_preview()}
     description={m.alert_form_data_preview_desc()}
   >
-    <DataPreview formValues={$form} {filters} {timeControls} />
+    <DataPreview
+      formValues={$form}
+      {expressionFilterManager}
+      {timeFilterManager}
+    />
   </FormSection>
 </div>
diff --git a/web-common/src/features/alerts/data-tab/DataPreview.svelte b/web-common/src/features/alerts/data-tab/DataPreview.svelte
index 0c3e03f7048f..d96d520c96ab 100644
--- a/web-common/src/features/alerts/data-tab/DataPreview.svelte
+++ b/web-common/src/features/alerts/data-tab/DataPreview.svelte
@@ -5,21 +5,21 @@
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
-  import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import PreviewEmpty from "../PreviewEmpty.svelte";
   import type { DimensionTableRow } from "../../dashboards/dimension-table/dimension-table-types";
   import type { ExpressionFilterManager } from "../../dashboards/filters/ExpressionFilterManager.svelte.ts";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
   let {
     formValues,
-    filters,
-    timeControls,
+    expressionFilterManager,
+    timeFilterManager,
   }: {
     formValues: AlertFormValues;
-    filters: ExpressionFilterManager;
-    timeControls: TimeControls;
+    expressionFilterManager: ExpressionFilterManager;
+    timeFilterManager: TimeFilterManager;
   } = $props();
 
   const runtimeClient = useRuntimeClient();
@@ -32,8 +32,8 @@
         ...formValues,
         criteria: [],
       },
-      filters.topLevelJoiner.expr[formValues.metricsViewName],
-      timeControls,
+      expressionFilterManager.topLevelJoiner.expr[formValues.metricsViewName],
+      timeFilterManager,
     ),
   );
 
diff --git a/web-common/src/features/alerts/form-utils.ts b/web-common/src/features/alerts/form-utils.ts
index 6ddae8793ccc..6d1a4d1f37f7 100644
--- a/web-common/src/features/alerts/form-utils.ts
+++ b/web-common/src/features/alerts/form-utils.ts
@@ -10,13 +10,11 @@ import { mapEphemeralMeasuresForRequest } from "@rilldata/web-common/features/da
 import type { EphemeralMeasureDef } from "@rilldata/web-common/features/dashboards/ephemeral-measures/types";
 import { sanitiseExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import {
-  mapSelectedComparisonTimeRangeToV1TimeRange,
-  mapSelectedTimeRangeToV1TimeRange,
+  mapTimeManagerComparisonRangeToV1TimeRange,
+  mapTimeManagerRangeToV1TimeRange,
 } from "@rilldata/web-common/features/dashboards/time-controls/time-range-mappers.ts";
-import type { TimeControlState } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
 import { getInitialScheduleFormValues } from "@rilldata/web-common/features/scheduled-reports/time-utils.ts";
 import type {
-  V1ExploreSpec,
   V1Expression,
   V1MetricsViewAggregationRequest,
   V1Operation,
@@ -24,6 +22,7 @@ import type {
 import type { ValidationErrors } from "sveltekit-superforms";
 import { yup, type ValidationAdapter } from "sveltekit-superforms/adapters";
 import { object, array, string } from "yup";
+import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export type AlertFormValues = {
   name: string;
@@ -51,17 +50,11 @@ export type AlertFormValues = {
 export function getAlertQueryArgsFromFormValues(
   formValues: AlertFormValues,
   expr: V1Expression | undefined,
-  timeControlArgs: TimeControlState,
-  exploreSpec: V1ExploreSpec,
+  timeFilterManager: TimeFilterManager,
 ): V1MetricsViewAggregationRequest {
-  const timeRange = mapSelectedTimeRangeToV1TimeRange(
-    timeControlArgs.selectedTimeRange,
-    timeControlArgs.selectedTimezone,
-    exploreSpec,
-  );
-  const comparisonTimeRange = mapSelectedComparisonTimeRangeToV1TimeRange(
-    timeControlArgs.selectedComparisonTimeRange,
-    timeControlArgs.showTimeComparison,
+  const timeRange = mapTimeManagerRangeToV1TimeRange(timeFilterManager);
+  const comparisonTimeRange = mapTimeManagerComparisonRangeToV1TimeRange(
+    timeFilterManager,
     timeRange,
   );
 
diff --git a/web-common/src/features/alerts/utils.ts b/web-common/src/features/alerts/utils.ts
index 5cc6e03a2a06..79ff9ccd0310 100644
--- a/web-common/src/features/alerts/utils.ts
+++ b/web-common/src/features/alerts/utils.ts
@@ -24,7 +24,7 @@ export function isSomeFieldTainted(taintedFields: TaintedFields<any>) {
 
 export function generateAlertName(
   formValues: AlertFormValues,
-  selectedComparisonTimeRange: DashboardTimeControls | undefined,
+  selectedComparisonTimeRange: string | undefined,
   metricsViewSpec: V1MetricsViewSpec,
 ) {
   const firstCriteria = formValues.criteria[0];
@@ -43,11 +43,11 @@ export function generateAlertName(
 
   let comparisonTitle = "";
   if (
-    selectedComparisonTimeRange?.name &&
-    selectedComparisonTimeRange?.name in TIME_COMPARISON
+    selectedComparisonTimeRange &&
+    selectedComparisonTimeRange in TIME_COMPARISON
   ) {
     const label =
-      TIME_COMPARISON[selectedComparisonTimeRange.name].label.toLowerCase();
+      TIME_COMPARISON[selectedComparisonTimeRange].label.toLowerCase();
     comparisonTitle = ` vs ${label}`;
   }
 
diff --git a/web-common/src/features/canvas/CanvasComponent.svelte b/web-common/src/features/canvas/CanvasComponent.svelte
index 755c1c8fc91f..454755ae95ba 100644
--- a/web-common/src/features/canvas/CanvasComponent.svelte
+++ b/web-common/src/features/canvas/CanvasComponent.svelte
@@ -8,6 +8,7 @@
 
 <script lang="ts">
   import { get } from "svelte/store";
+  import CanvasComponentSync from "@rilldata/web-common/features/canvas/CanvasComponentSync.svelte";
 
   // When false (the PDF export render), skip lazy-loading entirely: render
   // immediately and never touch the shared `visible` latch. Data still fetches
@@ -70,6 +71,8 @@
   $: allowBorder = !hideBorder.has(renderer);
 </script>
 
+<CanvasComponentSync {component} />
+
 <article
   bind:this={container}
   role="presentation"
diff --git a/web-common/src/features/canvas/CanvasComponentSync.svelte b/web-common/src/features/canvas/CanvasComponentSync.svelte
new file mode 100644
index 000000000000..3b1cdee3cde1
--- /dev/null
+++ b/web-common/src/features/canvas/CanvasComponentSync.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { BaseCanvasComponent } from "@rilldata/web-common/features/canvas/components/BaseCanvasComponent.ts";
+  import { syncStoreWithSource } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
+
+  let {
+    component,
+  }: {
+    component: BaseCanvasComponent;
+  } = $props();
+
+  // TODO: move to CanvasComponent after migrating it to svelte5
+  // svelte-ignore state_referenced_locally
+  syncStoreWithSource(
+    component.expressionFilters,
+    async () => component.syncExpressionFilters(),
+    () => component.expressionFilters.metricsViewsProvider.ready,
+  );
+  // svelte-ignore state_referenced_locally
+  syncStoreWithSource(
+    component.timeFilters,
+    async () => component.syncTimeFilters(),
+    () =>
+      component.expressionFilters.metricsViewsProvider.ready &&
+      component.timeFilters.ready,
+  );
+</script>
diff --git a/web-common/src/features/canvas/CanvasDashboardWrapper.svelte b/web-common/src/features/canvas/CanvasDashboardWrapper.svelte
index e292f81d6be4..70cd58b02a5b 100644
--- a/web-common/src/features/canvas/CanvasDashboardWrapper.svelte
+++ b/web-common/src/features/canvas/CanvasDashboardWrapper.svelte
@@ -44,6 +44,7 @@
       theme,
       exportMode,
       expressionFilterManager,
+      timeFilterManager,
       dashboardProvider,
     },
   } = $derived(getCanvasStore(canvasName, instanceId));
@@ -58,6 +59,17 @@
     () => expressionFilterManager.metricsViewsProvider.ready,
   );
 
+  // svelte-ignore state_referenced_locally
+  syncStoreWithSource(
+    timeFilterManager,
+    (newUrlParams) => {
+      let newSearch = newUrlParams.toString();
+      if (!newSearch) newSearch = "clear=true";
+      return goto("?" + newSearch);
+    },
+    () => timeFilterManager.ready,
+  );
+
   $effect(() => {
     dashboardProvider.yamlConfigProvider.setEditable(builder);
   });
diff --git a/web-common/src/features/canvas/LocalFiltersHeader.svelte b/web-common/src/features/canvas/LocalFiltersHeader.svelte
index 265d8c2263e7..ccd5729b23b3 100644
--- a/web-common/src/features/canvas/LocalFiltersHeader.svelte
+++ b/web-common/src/features/canvas/LocalFiltersHeader.svelte
@@ -1,62 +1,11 @@
 <script lang="ts">
   import Filter from "@rilldata/web-common/components/icons/Filter.svelte";
   import type { BaseCanvasComponent } from "@rilldata/web-common/features/canvas/components/BaseCanvasComponent";
-  import type { V1TimeRange } from "@rilldata/web-common/runtime-client";
   import ReadonlyExpressionFilters from "@rilldata/web-common/features/dashboards/filters/ReadonlyExpressionFilters.svelte";
 
   export let component: BaseCanvasComponent;
 
-  $: ({
-    specStore,
-    timeAndFilterStore,
-    localExpressionFilters,
-    localTimeControls,
-  } = component);
-
-  $: ({
-    showTimeComparisonStore,
-    interval: intervalStore,
-    rangeStore,
-    grainStore,
-    comparisonRangeStore,
-    comparisonIntervalStore,
-  } = localTimeControls);
-
-  $: showTimeComparison = $showTimeComparisonStore;
-  $: activeTimeGrain = $grainStore;
-
-  $: comparisonRange = $comparisonRangeStore;
-  $: comparisonInterval = $comparisonIntervalStore;
-
-  $: interval = $intervalStore;
-  $: selectedRangeAlias = $rangeStore;
-
-  $: selectedTimeRange = interval
-    ? {
-        name: selectedRangeAlias,
-        start: interval?.start.toJSDate(),
-        end: interval?.end.toJSDate(),
-        interval: activeTimeGrain,
-      }
-    : undefined;
-
-  // $: selectedTimeRange = $timeRangeStateStore?.selectedTimeRange;
-  $: displayComparisonTimeRange =
-    showTimeComparison && comparisonInterval && comparisonRange
-      ? <V1TimeRange>{
-          name: comparisonRange,
-          start: comparisonInterval.start.toISO(),
-          end: comparisonInterval.end.toISO(),
-          interval: activeTimeGrain,
-        }
-      : undefined;
-
-  $: displayTimeRange = {
-    ...$timeAndFilterStore.timeRange,
-    isoDuration: selectedTimeRange?.name,
-  };
-
-  $: hasTimeFilters = "time_filters" in $specStore && $specStore.time_filters;
+  $: ({ specStore, localExpressionFilters, localTimeFilters } = component);
 </script>
 
 {#if "metrics_view" in $specStore}
@@ -67,10 +16,7 @@
 
     <ReadonlyExpressionFilters
       expressionFilterManager={localExpressionFilters}
-      displayTimeRange={hasTimeFilters ? displayTimeRange : undefined}
-      {displayComparisonTimeRange}
-      queryTimeStart={selectedTimeRange?.start?.toISOString()}
-      queryTimeEnd={selectedTimeRange?.end?.toISOString()}
+      timeFilterManager={localTimeFilters}
       hasBoldTimeRange={false}
       chipLayout="scroll"
     />
diff --git a/web-common/src/features/canvas/components/BaseCanvasComponent.ts b/web-common/src/features/canvas/components/BaseCanvasComponent.ts
index 3a6b08b1f8af..3f10bc28a8b5 100644
--- a/web-common/src/features/canvas/components/BaseCanvasComponent.ts
+++ b/web-common/src/features/canvas/components/BaseCanvasComponent.ts
@@ -35,10 +35,12 @@ import type {
 } from "../stores/canvas-entity";
 import { TimeState } from "../stores/time-state";
 import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+import { dedupe } from "@rilldata/web-common/lib/arrayUtils.ts";
 
 export abstract class BaseCanvasComponent<T = ComponentSpec> {
   id: string;
-  // Local copoy of the canvas component resource
+  // Local copy of the canvas component resource
   resource: Writable<V1Resource | null> = writable(null);
   // Local copy of the spec (aka rendererProperties) for the component
   specStore: Writable<T>;
@@ -47,8 +49,15 @@ export abstract class BaseCanvasComponent<T = ComponentSpec> {
   // Widget specific dimension and measure filters
   localExpressionFilters: ExpressionFilterManager;
   // Widget specific time filters
+  localTimeFilters: TimeFilterManager;
+  // Widget specific time filters
   localTimeControls: TimeState;
 
+  // Final expression filter manager based on parent and local
+  expressionFilters: ExpressionFilterManager;
+  // Final time filter manager based on parent and local
+  timeFilters: TimeFilterManager;
+
   // Lazy-load latch: flipped true once the component scrolls into view, gating
   // its data query so off-screen components don't fetch.
   visible = writable(false);
@@ -157,15 +166,31 @@ export abstract class BaseCanvasComponent<T = ComponentSpec> {
         this.metricsViewName,
       );
 
+    this.localTimeFilters =
+      this.parent.timeFilterManager.createLocalFilterStore(
+        this.metricsViewName,
+      );
+
+    this.expressionFilters =
+      this.parent.expressionFilterManager.createLocalFilterStore(
+        this.metricsViewName,
+      );
+
+    this.timeFilters = this.parent.timeFilterManager.createLocalFilterStore(
+      this.metricsViewName,
+    );
+
     this.unsubscribeSpec = this.specStore.subscribe((spec) => {
       this.localExpressionFilters.setParamForMetricsView(
         this.metricsViewName,
         (spec["dimension_filters"] ?? "") as string,
       );
+      this.syncExpressionFilters();
 
-      this.localTimeControls.onUrlChange(
+      this.localTimeFilters.setUrlParams(
         new URLSearchParams(spec?.["time_filters"] ?? ""),
       );
+      this.syncTimeFilters();
     });
   }
 
@@ -186,6 +211,38 @@ export abstract class BaseCanvasComponent<T = ComponentSpec> {
     this.specStore.set(yamlSpec);
   }
 
+  public syncExpressionFilters() {
+    const globalExpr =
+      this.parent.expressionFilterManager.exprByMetricsView[
+        this.metricsViewName
+      ];
+    const localExpr =
+      this.localExpressionFilters.exprByMetricsView[this.metricsViewName];
+
+    let resolvedExpr: V1Expression | undefined;
+    if (globalExpr && localExpr) {
+      resolvedExpr = mergeFilters(globalExpr, localExpr);
+    } else {
+      resolvedExpr = globalExpr ?? localExpr;
+    }
+
+    this.expressionFilters.setExprForMetricsView(
+      this.metricsViewName,
+      resolvedExpr,
+      dedupe([
+        ...this.parent.expressionFilterManager.inList,
+        ...this.localExpressionFilters.inList,
+      ]),
+    );
+  }
+
+  public syncTimeFilters() {
+    const urlParams = this.localTimeFilters.timeRange
+      ? this.localTimeFilters.curParams
+      : this.parent.timeFilterManager.curParams;
+    this.timeFilters.setUrlParams(urlParams);
+  }
+
   // This will be deprecated eventually - bgh
   get timeAndFilterStore(): Readable<TimeAndFilterStore> {
     return derived(
diff --git a/web-common/src/features/canvas/components/charts/BaseChart.ts b/web-common/src/features/canvas/components/charts/BaseChart.ts
index 4ecc0c759fd3..f0be417b021e 100644
--- a/web-common/src/features/canvas/components/charts/BaseChart.ts
+++ b/web-common/src/features/canvas/components/charts/BaseChart.ts
@@ -17,7 +17,6 @@ import type {
 import type { CanvasStore } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
 import { transformChartSpecToPivotState } from "@rilldata/web-common/features/components/charts/explore-transformer";
 import type { ExploreState } from "@rilldata/web-common/features/dashboards/stores/explore-state";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { DashboardState_ActivePage } from "@rilldata/web-common/proto/gen/rill/ui/v1/dashboard_pb";
 import type {
   V1Expression,
@@ -47,6 +46,8 @@ import type {
 import Chart from "./CanvasChart.svelte";
 
 import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 // Base interface for all chart configurations
 export type BaseChartConfig = ComponentFilterProperties &
@@ -117,7 +118,8 @@ export abstract class BaseChart<
 
   abstract createChartDataQuery(
     ctx: CanvasStore,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible: Readable<boolean>,
   ): ChartDataQuery;
 
@@ -140,7 +142,7 @@ export abstract class BaseChart<
   getExploreTransformerProperties(): Partial<ExploreState> {
     const spec = get(this.specStore);
 
-    const timeGrain = get(this.timeAndFilterStore)?.timeGrain;
+    const timeGrain = this.timeFilters.timeGrain;
     const tddLink = getLinkStateForTimeDimensionDetail(spec, this.type);
 
     const comparisonChartTypes: ChartType[] = [
diff --git a/web-common/src/features/canvas/components/charts/CanvasChart.svelte b/web-common/src/features/canvas/components/charts/CanvasChart.svelte
index 83ca52626b80..95d71998175f 100644
--- a/web-common/src/features/canvas/components/charts/CanvasChart.svelte
+++ b/web-common/src/features/canvas/components/charts/CanvasChart.svelte
@@ -28,13 +28,19 @@
   $: ({ instanceId } = runtimeClient);
 
   $: ({
+    metricsViewName,
     specStore,
     parent: { name: canvasName, theme },
-    timeAndFilterStore,
+    expressionFilters,
+    timeFilters,
     chartType: type,
     dataEnabled: visible,
   } = component);
 
+  $: filterStore =
+    expressionFilters.getExprStoreForMetricsView(metricsViewName);
+  $: timeControlStore = timeFilters.getTimeControlStore();
+
   $: chartType = $type;
 
   $: store = getCanvasStore(canvasName, instanceId);
@@ -69,7 +75,8 @@
     store,
     component,
     chartSpec,
-    timeAndFilterStore,
+    filterStore,
+    timeControlStore,
     isThemeModeDark,
     visible,
   );
diff --git a/web-common/src/features/canvas/components/charts/custom-chart/CanvasCustomChart.svelte b/web-common/src/features/canvas/components/charts/custom-chart/CanvasCustomChart.svelte
index 8b92ff6177d2..3141deab3634 100644
--- a/web-common/src/features/canvas/components/charts/custom-chart/CanvasCustomChart.svelte
+++ b/web-common/src/features/canvas/components/charts/custom-chart/CanvasCustomChart.svelte
@@ -5,17 +5,29 @@
   import { clearComponentConversation } from "./chart-ai-agent";
   import type { CustomChartComponent, QueryFieldMeta } from "./index";
 
-  export let component: CustomChartComponent;
-  export let editable: boolean = false;
+  let {
+    component,
+    editable,
+  }: {
+    component: CustomChartComponent;
+    editable: boolean;
+  } = $props();
 
   onDestroy(() => {
     clearComponentConversation(component.id);
   });
 
-  $: ({ specStore, timeAndFilterStore } = component);
+  let { metricsViewName, specStore, expressionFilters, timeFilters } =
+    $derived(component);
 
-  $: hasValidSpec = component.isValid($specStore);
-  $: hasContent = component.hasContent($specStore);
+  let whereFilter = $derived(
+    expressionFilters.exprByMetricsView[metricsViewName],
+  );
+
+  let timeRange = $derived(timeFilters.apiTimeRange);
+
+  let hasValidSpec = $derived(component.isValid($specStore));
+  let hasContent = $derived(component.hasContent($specStore));
 
   function handleMetaChange(meta: Record<string, unknown> | undefined) {
     if (!meta?.fields || !Array.isArray(meta.fields)) {
@@ -30,8 +42,8 @@
   <CustomChartRenderer
     name={component.id}
     spec={$specStore.vega_spec}
-    whereFilter={$timeAndFilterStore?.where}
-    timeRange={$timeAndFilterStore?.timeRange}
+    {whereFilter}
+    {timeRange}
     metricsSQL={$specStore.metrics_sql}
     showDataTable={editable}
     onMetaChange={handleMetaChange}
diff --git a/web-common/src/features/canvas/components/charts/custom-chart/index.ts b/web-common/src/features/canvas/components/charts/custom-chart/index.ts
index 27b9471b31ee..a6fdef841014 100644
--- a/web-common/src/features/canvas/components/charts/custom-chart/index.ts
+++ b/web-common/src/features/canvas/components/charts/custom-chart/index.ts
@@ -111,7 +111,8 @@ export class CustomChartComponent extends BaseCanvasComponent<CustomChart> {
 
   getExploreTransformerProperties(): Partial<ExploreState> {
     const fields = get(this.queryFieldsMeta);
-    const timeAndFilter = get(this.timeAndFilterStore);
+    const whereFilter =
+      this.expressionFilters.exprByMetricsView[this.metricsViewName];
 
     const columns: PivotChipData[] = [];
     const rows: PivotChipData[] = [];
@@ -147,7 +148,7 @@ export class CustomChartComponent extends BaseCanvasComponent<CustomChart> {
     };
 
     return {
-      whereFilter: timeAndFilter?.where,
+      whereFilter,
       showTimeComparison: false,
       activePage: DashboardState_ActivePage.PIVOT,
       pivot,
diff --git a/web-common/src/features/canvas/components/charts/selector.ts b/web-common/src/features/canvas/components/charts/selector.ts
index e68b2fe426ac..72fe7ce2dd4c 100644
--- a/web-common/src/features/canvas/components/charts/selector.ts
+++ b/web-common/src/features/canvas/components/charts/selector.ts
@@ -5,22 +5,32 @@ import { getChartData } from "@rilldata/web-common/features/components/charts/da
 import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import type { Readable } from "svelte/store";
 import type { ChartDataResult } from "../../../components/charts/types";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 /**
  * Convenience wrapper for using getChartData with canvas context.
+ * @param ctx
+ * @param component
+ * @param config
+ * @param filterStore
+ * @param timeControlStore
  * @param themeModeStore - Reactive store tracking if theme mode is dark (for light/dark toggle)
+ * @param visible
  */
 export function getChartDataForCanvas(
   ctx: CanvasStore,
   component: BaseChart<CanvasChartSpec>,
   config: CanvasChartSpec,
-  timeAndFilterStore: Readable<TimeAndFilterStore>,
+  filterStore: Readable<ExpressionState>,
+  timeControlStore: Readable<TimeControlState>,
   themeModeStore: Readable<boolean>,
   visible: Readable<boolean>,
 ): Readable<ChartDataResult> {
   const chartDataQuery = component.createChartDataQuery(
     ctx,
-    timeAndFilterStore,
+    filterStore,
+    timeControlStore,
     visible,
   );
 
@@ -30,7 +40,7 @@ export function getChartDataForCanvas(
     getDomainValues: () => component.getChartDomainValues(),
     metricsView: ctx.canvasEntity.metricsView,
     themeStore: ctx.canvasEntity.theme,
-    timeAndFilterStore,
+    timeControlStore,
     themeModeStore,
   });
 }
diff --git a/web-common/src/features/canvas/components/charts/variants/CartesianChart.ts b/web-common/src/features/canvas/components/charts/variants/CartesianChart.ts
index 0760f6a83f3c..d089dab7f765 100644
--- a/web-common/src/features/canvas/components/charts/variants/CartesianChart.ts
+++ b/web-common/src/features/canvas/components/charts/variants/CartesianChart.ts
@@ -11,7 +11,6 @@ import {
   type FieldConfig,
 } from "@rilldata/web-common/features/components/charts/types";
 import { isMultiFieldConfig } from "@rilldata/web-common/features/components/charts/util";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import {
   MetricsViewSpecDimensionType,
   type V1MetricsViewSpec,
@@ -25,6 +24,8 @@ import type {
 import { BaseChart, type BaseChartConfig } from "../BaseChart";
 
 import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export type CartesianCanvasChartSpec = BaseChartConfig & CartesianChartSpecBase;
 
@@ -211,12 +212,14 @@ export class CartesianChartComponent extends BaseChart<CartesianCanvasChartSpec>
 
   createChartDataQuery(
     ctx: CanvasStore,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible: Readable<boolean>,
   ): ChartDataQuery {
     return this.provider.createChartDataQuery(
       ctx.runtimeClient,
-      timeAndFilterStore,
+      filterStore,
+      timeControlStore,
       visible,
     );
   }
diff --git a/web-common/src/features/canvas/components/charts/variants/CircularChart.ts b/web-common/src/features/canvas/components/charts/variants/CircularChart.ts
index bace189f69b4..18b332de485a 100644
--- a/web-common/src/features/canvas/components/charts/variants/CircularChart.ts
+++ b/web-common/src/features/canvas/components/charts/variants/CircularChart.ts
@@ -9,7 +9,6 @@ import {
   ChartSortType,
   type ChartFieldsMap,
 } from "@rilldata/web-common/features/components/charts/types";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import {
   MetricsViewSpecDimensionType,
   type V1MetricsViewSpec,
@@ -24,6 +23,8 @@ import type {
 import { BaseChart, type BaseChartConfig } from "../BaseChart";
 
 import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 const DEFAULT_COLOR_LIMIT = 20;
 const DEFAULT_SORT = ChartSortType.MEASURE_DESC;
@@ -122,12 +123,14 @@ export class CircularChartComponent extends BaseChart<CircularCanvasChartSpec> {
 
   createChartDataQuery(
     ctx: CanvasStore,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible: Readable<boolean>,
   ): ChartDataQuery {
     return this.provider.createChartDataQuery(
       ctx.runtimeClient,
-      timeAndFilterStore,
+      filterStore,
+      timeControlStore,
       visible,
     );
   }
diff --git a/web-common/src/features/canvas/components/charts/variants/ComboChart.ts b/web-common/src/features/canvas/components/charts/variants/ComboChart.ts
index 2517140b66aa..083fad40b41d 100644
--- a/web-common/src/features/canvas/components/charts/variants/ComboChart.ts
+++ b/web-common/src/features/canvas/components/charts/variants/ComboChart.ts
@@ -16,7 +16,6 @@ import {
   type PivotState,
 } from "@rilldata/web-common/features/dashboards/pivot/types";
 import type { ExploreState } from "@rilldata/web-common/features/dashboards/stores/explore-state";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { DashboardState_ActivePage } from "@rilldata/web-common/proto/gen/rill/ui/v1/dashboard_pb";
 import {
   MetricsViewSpecDimensionType,
@@ -33,6 +32,8 @@ import type {
 import { BaseChart, type BaseChartConfig } from "../BaseChart";
 
 import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export type ComboCanvasChartSpec = BaseChartConfig & ComboChartSpecBase;
 
@@ -198,12 +199,14 @@ export class ComboChartComponent extends BaseChart<ComboCanvasChartSpec> {
 
   createChartDataQuery(
     ctx: CanvasStore,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible: Readable<boolean>,
   ): ChartDataQuery {
     return this.provider.createChartDataQuery(
       ctx.runtimeClient,
-      timeAndFilterStore,
+      filterStore,
+      timeControlStore,
       visible,
     );
   }
@@ -282,7 +285,7 @@ export class ComboChartComponent extends BaseChart<ComboCanvasChartSpec> {
 
   override getExploreTransformerProperties(): Partial<ExploreState> {
     const spec = get(this.specStore);
-    const timeGrain = get(this.timeAndFilterStore)?.timeGrain;
+    const timeGrain = this.timeFilters.timeGrain;
 
     const columns: PivotChipData[] = [];
     const rows: PivotChipData[] = [];
diff --git a/web-common/src/features/canvas/components/charts/variants/FunnelChart.ts b/web-common/src/features/canvas/components/charts/variants/FunnelChart.ts
index f27afbcacc11..ccbc5b0a3e11 100644
--- a/web-common/src/features/canvas/components/charts/variants/FunnelChart.ts
+++ b/web-common/src/features/canvas/components/charts/variants/FunnelChart.ts
@@ -10,7 +10,6 @@ import {
   type ChartFieldsMap,
 } from "@rilldata/web-common/features/components/charts/types";
 import { isMultiFieldConfig } from "@rilldata/web-common/features/components/charts/util";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import {
   MetricsViewSpecDimensionType,
   type V1MetricsViewSpec,
@@ -25,6 +24,8 @@ import type {
 import { BaseChart, type BaseChartConfig } from "../BaseChart";
 
 import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 const DEFAULT_STAGE_LIMIT = 15;
 const DEFAULT_SORT = ChartSortType.Y_DESC;
@@ -232,12 +233,14 @@ export class FunnelChartComponent extends BaseChart<FunnelCanvasChartSpec> {
 
   createChartDataQuery(
     ctx: CanvasStore,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible: Readable<boolean>,
   ): ChartDataQuery {
     return this.provider.createChartDataQuery(
       ctx.runtimeClient,
-      timeAndFilterStore,
+      filterStore,
+      timeControlStore,
       visible,
     );
   }
diff --git a/web-common/src/features/canvas/components/charts/variants/HeatmapChart.ts b/web-common/src/features/canvas/components/charts/variants/HeatmapChart.ts
index 8103068d0d31..639bb473191d 100644
--- a/web-common/src/features/canvas/components/charts/variants/HeatmapChart.ts
+++ b/web-common/src/features/canvas/components/charts/variants/HeatmapChart.ts
@@ -8,7 +8,6 @@ import {
   ChartSortType,
   type ChartFieldsMap,
 } from "@rilldata/web-common/features/components/charts/types";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import {
   MetricsViewSpecDimensionType,
   type V1MetricsViewSpec,
@@ -23,6 +22,8 @@ import type {
 import { BaseChart, type BaseChartConfig } from "../BaseChart";
 
 import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 const DEFAULT_NOMINAL_LIMIT = 40;
 const DEFAULT_SORT = ChartSortType.COLOR_DESC;
@@ -133,12 +134,14 @@ export class HeatmapChartComponent extends BaseChart<HeatmapCanvasChartSpec> {
 
   createChartDataQuery(
     ctx: CanvasStore,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible: Readable<boolean>,
   ): ChartDataQuery {
     return this.provider.createChartDataQuery(
       ctx.runtimeClient,
-      timeAndFilterStore,
+      filterStore,
+      timeControlStore,
       visible,
     );
   }
diff --git a/web-common/src/features/canvas/components/charts/variants/ScatterPlotChart.ts b/web-common/src/features/canvas/components/charts/variants/ScatterPlotChart.ts
index 95139b724a5f..4914e8c838b2 100644
--- a/web-common/src/features/canvas/components/charts/variants/ScatterPlotChart.ts
+++ b/web-common/src/features/canvas/components/charts/variants/ScatterPlotChart.ts
@@ -8,7 +8,6 @@ import {
   type ChartDataQuery,
   type ChartFieldsMap,
 } from "@rilldata/web-common/features/components/charts/types";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import {
   MetricsViewSpecDimensionType,
   type V1MetricsViewSpec,
@@ -22,6 +21,8 @@ import type {
 import { BaseChart, type BaseChartConfig } from "../BaseChart";
 
 import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export type ScatterPlotCanvasChartSpec = BaseChartConfig &
   ScatterPlotChartSpecBase;
@@ -125,12 +126,14 @@ export class ScatterPlotChartComponent extends BaseChart<ScatterPlotCanvasChartS
 
   createChartDataQuery(
     ctx: CanvasStore,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible: Readable<boolean>,
   ): ChartDataQuery {
     return this.provider.createChartDataQuery(
       ctx.runtimeClient,
-      timeAndFilterStore,
+      filterStore,
+      timeControlStore,
       visible,
     );
   }
diff --git a/web-common/src/features/canvas/components/kpi-grid/KPIGrid.svelte b/web-common/src/features/canvas/components/kpi-grid/KPIGrid.svelte
index ad5ac82e7912..39885c78b00e 100644
--- a/web-common/src/features/canvas/components/kpi-grid/KPIGrid.svelte
+++ b/web-common/src/features/canvas/components/kpi-grid/KPIGrid.svelte
@@ -12,7 +12,8 @@
 
   $: ({
     specStore,
-    timeAndFilterStore,
+    expressionFilters,
+    timeFilters,
     parent: { name: canvasName },
     dataEnabled: visible,
   } = component);
@@ -68,14 +69,13 @@
     >
       {#each kpis as kpi, i (i)}
         <div class="min-h-32 kpi-wrapper">
-          {#if $timeAndFilterStore}
-            <KPIProvider
-              spec={kpi}
-              {timeAndFilterStore}
-              {canvasName}
-              visible={$visible}
-            />
-          {/if}
+          <KPIProvider
+            spec={kpi}
+            expressionFilterManager={expressionFilters}
+            timeFilterManager={timeFilters}
+            {canvasName}
+            visible={$visible}
+          />
         </div>
       {/each}
     </div>
diff --git a/web-common/src/features/canvas/components/kpi/KPIProvider.svelte b/web-common/src/features/canvas/components/kpi/KPIProvider.svelte
index daaea0736c53..4fd54606637b 100644
--- a/web-common/src/features/canvas/components/kpi/KPIProvider.svelte
+++ b/web-common/src/features/canvas/components/kpi/KPIProvider.svelte
@@ -6,7 +6,6 @@
     splitTimeSeriesMeasures,
   } from "@rilldata/web-common/features/dashboards/ephemeral-measures/measure-mapping";
   import { measureSupportsTotalsQuery } from "@rilldata/web-common/features/dashboards/state-managers/selectors/measures";
-  import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
   import { TIME_COMPARISON } from "@rilldata/web-common/lib/time/config";
   import { V1TimeGrain } from "@rilldata/web-common/runtime-client";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
@@ -14,189 +13,217 @@
     createQueryServiceMetricsViewAggregation,
     createQueryServiceMetricsViewTimeSeries,
   } from "@rilldata/web-common/runtime-client";
-  import { DateTime, Interval } from "luxon";
-  import type { Readable } from "svelte/store";
   import type { KPISpec } from ".";
   import { KPI } from ".";
   import { getCanvasStore } from "../../state-managers/state-managers";
   import { validateKPISchema } from "./selector";
-
-  export let spec: KPISpec;
-  export let timeAndFilterStore: Readable<TimeAndFilterStore>;
-  export let canvasName: string;
-  export let visible: boolean;
+  import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+
+  let {
+    spec,
+    canvasName,
+    expressionFilterManager,
+    timeFilterManager,
+    visible,
+  }: {
+    spec: KPISpec;
+    canvasName: string;
+    expressionFilterManager: ExpressionFilterManager;
+    timeFilterManager: TimeFilterManager;
+    visible: boolean;
+  } = $props();
 
   const client = useRuntimeClient();
 
-  $: ctx = getCanvasStore(canvasName, client.instanceId);
-  $: ({
+  let ctx = $derived(getCanvasStore(canvasName, client.instanceId));
+  let {
     metricsView: { getMeasureForMetricView },
-  } = ctx.canvasEntity);
+  } = $derived(ctx.canvasEntity);
 
-  $: ({
+  let {
     metrics_view: metricsViewName,
     measure: measureName,
     sparkline,
     comparison: comparisonOptions,
     hide_time_range: hideTimeRange,
-  } = spec);
+  } = $derived(spec);
+
+  let where = $derived(
+    expressionFilterManager.exprByMetricsView[metricsViewName],
+  );
 
-  $: ({
+  let {
+    interval,
+    apiTimeRange,
     timeGrain,
-    timeRange: { timeZone, start, end },
-    where,
+    timeZone,
+
     comparisonTimeRange,
-    showTimeComparison,
-    comparisonTimeRangeState,
+    apiComparisonTimeRange,
+    showComparison: showTimeComparison,
     hasTimeSeries,
-  } = $timeAndFilterStore);
+  } = $derived(timeFilterManager);
 
-  $: schema = validateKPISchema(ctx, spec);
-  $: ({ isValid } = $schema);
+  let schema = $derived(validateKPISchema(ctx, spec));
+  let { isValid } = $derived($schema);
 
-  $: ephemeralMeasures = ephemeralSpecsToDefs(spec.adhoc_measures);
-  $: ephemeralDef = ephemeralMeasures?.find((def) => def.name === measureName);
+  let ephemeralMeasures = $derived(ephemeralSpecsToDefs(spec.adhoc_measures));
+  let ephemeralDef = $derived(
+    ephemeralMeasures?.find((def) => def.name === measureName),
+  );
 
-  $: measureStore = getMeasureForMetricView(measureName, metricsViewName);
-  // ephemeral measures have no spec entry; synthesize one.
-  $: measure =
+  let measureStore = $derived(
+    getMeasureForMetricView(measureName, metricsViewName),
+  );
+  let measure = $derived(
     $measureStore ??
-    (ephemeralDef ? ephemeralMeasureToSpecMeasure(ephemeralDef) : undefined);
+      (ephemeralDef ? ephemeralMeasureToSpecMeasure(ephemeralDef) : undefined),
+  );
 
   // Measures with required dimensions (e.g. a rolling window ordered by the time
   // dimension) produce one value per dimension value and have no single total,
   // so we skip the totals queries; the KPI shows an explanatory hint instead.
   // The measure metadata must have loaded before we can tell, so the queries
   // also wait for it.
-  $: supportsTotal = !!measure && measureSupportsTotalsQuery(measure);
+  let supportsTotal = $derived(
+    !!measure && measureSupportsTotalsQuery(measure),
+  );
 
-  $: showSparkline = sparkline !== "none" && hasTimeSeries;
+  let showSparkline = $derived(sparkline !== "none" && hasTimeSeries);
 
-  $: showComparison = !!comparisonOptions?.length && showTimeComparison;
+  let showComparison = $derived(
+    !!comparisonOptions?.length && showTimeComparison,
+  );
 
-  $: comparisonLabel =
-    comparisonTimeRangeState?.selectedComparisonTimeRange?.name &&
-    (TIME_COMPARISON[comparisonTimeRangeState?.selectedComparisonTimeRange.name]
-      ?.label as string | undefined);
+  let comparisonLabel = $derived(
+    comparisonTimeRange &&
+      (TIME_COMPARISON[comparisonTimeRange]?.label as string | undefined),
+  );
 
-  $: queryMeasures = mapEphemeralMeasuresForRequest(
-    [{ name: measureName }],
-    ephemeralMeasures,
+  let queryMeasures = $derived(
+    mapEphemeralMeasuresForRequest([{ name: measureName }], ephemeralMeasures),
   );
-  $: ({ measureNames: tsMeasureNames, ephemeralMeasures: tsEphemeralMeasures } =
-    splitTimeSeriesMeasures([measureName], ephemeralMeasures));
-
-  $: totalQuery = createQueryServiceMetricsViewAggregation(
-    client,
-    {
-      metricsView: metricsViewName,
-      measures: queryMeasures,
-      timeRange: {
-        start,
-        end,
-        timeZone,
+  let { measureNames: tsMeasureNames, ephemeralMeasures: tsEphemeralMeasures } =
+    $derived(splitTimeSeriesMeasures([measureName], ephemeralMeasures));
+
+  let totalQuery = $derived(
+    createQueryServiceMetricsViewAggregation(
+      client,
+      {
+        metricsView: metricsViewName,
+        measures: queryMeasures,
+        timeRange: apiTimeRange,
+        where,
+        priority: 50,
       },
-      where,
-      priority: 50,
-    },
-    {
-      query: {
-        enabled:
-          isValid &&
-          supportsTotal &&
-          visible &&
-          (!hasTimeSeries || (!!start && !!end)),
+      {
+        query: {
+          enabled:
+            isValid &&
+            supportsTotal &&
+            visible &&
+            (!hasTimeSeries || (!!apiTimeRange.start && !!apiTimeRange.end)),
+        },
       },
-    },
+    ),
   );
 
-  $: comparisonTotalQuery = createQueryServiceMetricsViewAggregation(
-    client,
-    {
-      metricsView: metricsViewName,
-      measures: queryMeasures,
-      timeRange: comparisonTimeRange,
-      where,
-      priority: 50,
-    },
-    {
-      query: {
-        enabled:
-          comparisonTimeRange &&
-          showComparison &&
-          isValid &&
-          supportsTotal &&
-          !!start &&
-          !!end &&
-          visible,
+  let comparisonTotalQuery = $derived(
+    createQueryServiceMetricsViewAggregation(
+      client,
+      {
+        metricsView: metricsViewName,
+        measures: queryMeasures,
+        timeRange: apiComparisonTimeRange,
+        where,
+        priority: 50,
       },
-    },
-  );
-
-  $: primarySparklineQuery = createQueryServiceMetricsViewTimeSeries(
-    client,
-    {
-      metricsViewName,
-      measureNames: tsMeasureNames,
-      ephemeralMeasures: tsEphemeralMeasures,
-      timeStart: start,
-      timeEnd: end,
-      timeGranularity: timeGrain || V1TimeGrain.TIME_GRAIN_HOUR,
-      timeZone,
-      where,
-      priority: 10,
-    },
-    {
-      query: {
-        enabled: !!start && !!end && isValid && showSparkline && visible,
+      {
+        query: {
+          enabled:
+            apiComparisonTimeRange &&
+            showComparison &&
+            isValid &&
+            supportsTotal &&
+            !!apiTimeRange.start &&
+            !!apiTimeRange.end &&
+            visible,
+        },
       },
-    },
+    ),
   );
 
-  $: comparisonSparklineQuery = createQueryServiceMetricsViewTimeSeries(
-    client,
-    {
-      metricsViewName,
-      measureNames: tsMeasureNames,
-      ephemeralMeasures: tsEphemeralMeasures,
-      timeStart: comparisonTimeRange?.start,
-      timeEnd: comparisonTimeRange?.end,
-      timeGranularity: timeGrain || V1TimeGrain.TIME_GRAIN_HOUR,
-      timeZone,
-      where,
-      priority: 10,
-    },
-    {
-      query: {
-        enabled:
-          comparisonTimeRange &&
-          isValid &&
-          showSparkline &&
-          showComparison &&
-          visible,
+  let primarySparklineQuery = $derived(
+    createQueryServiceMetricsViewTimeSeries(
+      client,
+      {
+        metricsViewName,
+        measureNames: tsMeasureNames,
+        ephemeralMeasures: tsEphemeralMeasures,
+        timeStart: apiTimeRange.start,
+        timeEnd: apiTimeRange.end,
+        timeGranularity: timeGrain || V1TimeGrain.TIME_GRAIN_HOUR,
+        timeZone,
+        where,
+        priority: 10,
       },
-    },
+      {
+        query: {
+          enabled:
+            !!apiTimeRange.start &&
+            !!apiTimeRange.end &&
+            isValid &&
+            showSparkline &&
+            visible,
+        },
+      },
+    ),
   );
 
-  $: interval = Interval.fromDateTimes(
-    DateTime.fromISO(start ?? "").setZone(timeZone),
-    DateTime.fromISO(end ?? "").setZone(timeZone),
+  let comparisonSparklineQuery = $derived(
+    createQueryServiceMetricsViewTimeSeries(
+      client,
+      {
+        metricsViewName,
+        measureNames: tsMeasureNames,
+        ephemeralMeasures: tsEphemeralMeasures,
+        timeStart: apiComparisonTimeRange?.start,
+        timeEnd: apiComparisonTimeRange?.end,
+        timeGranularity: timeGrain || V1TimeGrain.TIME_GRAIN_HOUR,
+        timeZone,
+        where,
+        priority: 10,
+      },
+      {
+        query: {
+          enabled:
+            apiComparisonTimeRange &&
+            isValid &&
+            showSparkline &&
+            showComparison &&
+            visible,
+        },
+      },
+    ),
   );
 </script>
 
-<KPI
-  {measure}
-  {timeGrain}
-  {timeZone}
-  {showTimeComparison}
-  {hasTimeSeries}
-  {comparisonLabel}
-  {interval}
-  sparkline={spec.sparkline}
-  {hideTimeRange}
-  comparisonOptions={spec.comparison}
-  primaryTotalResult={$totalQuery}
-  comparisonTotalResult={$comparisonTotalQuery}
-  primarySparklineResult={$primarySparklineQuery}
-  comparisonSparklineResult={$comparisonSparklineQuery}
-/>
+{#if interval}
+  <KPI
+    {measure}
+    {timeGrain}
+    {timeZone}
+    {showTimeComparison}
+    {hasTimeSeries}
+    {comparisonLabel}
+    {interval}
+    sparkline={spec.sparkline}
+    {hideTimeRange}
+    comparisonOptions={spec.comparison}
+    primaryTotalResult={$totalQuery}
+    comparisonTotalResult={$comparisonTotalQuery}
+    primarySparklineResult={$primarySparklineQuery}
+    comparisonSparklineResult={$comparisonSparklineQuery}
+  />
+{/if}
diff --git a/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte b/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
index cf797ef839ea..eb7d7e50275b 100644
--- a/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
+++ b/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
@@ -30,7 +30,6 @@
   let leaderboardWrapperWidth = $state(0);
 
   let specStore = $derived(component.specStore);
-  let timeAndFilterStore = $derived(component.timeAndFilterStore);
   let leaderboardState = $derived(component.leaderboardState);
   let toggleSort = $derived(component.toggleSort);
   let dataEnabled = $derived(component.dataEnabled);
@@ -56,11 +55,18 @@
     validateLeaderboardSchema(leaderboardProperties, $metricsViewQuery),
   );
 
-  let showTimeComparison = $derived($timeAndFilterStore.showTimeComparison);
-  let comparisonTimeRange = $derived($timeAndFilterStore.comparisonTimeRange);
-  let timeRange = $derived($timeAndFilterStore.timeRange);
+  let { expressionFilters, timeFilters } = $derived(component);
 
-  let whereFilter = $derived($timeAndFilterStore.where);
+  let whereFilter = $derived(
+    expressionFilters.exprByMetricsView[metricsViewName],
+  );
+  let {
+    showComparison: showTimeComparison,
+    timeStart,
+    timeEnd,
+    apiTimeRange,
+    apiComparisonTimeRange,
+  } = $derived(timeFilters);
 
   let allDimensions = $derived(
     metricsViewSelectors.getDimensionsForMetricView(metricsViewName),
@@ -202,9 +208,9 @@
               filterExcludeMode={expressionFilterManager.sortedFilterManagers.dimensions.find(
                 (dfm) => dfm.name === dimension.name,
               )?.exclude ?? false}
-              {timeRange}
+              timeRange={apiTimeRange}
               comparisonTimeRange={showTimeComparison
-                ? comparisonTimeRange
+                ? apiComparisonTimeRange
                 : undefined}
               {dimension}
               allowExpandTable={false}
@@ -214,8 +220,8 @@
                 [metricsViewName],
                 whereFilter,
                 dimension.name,
-                timeRange.start,
-                timeRange.end,
+                timeStart,
+                timeEnd,
               )}
               isBeingCompared={false}
               formatters={measureFormatters}
diff --git a/web-common/src/features/canvas/components/markdown/util.ts b/web-common/src/features/canvas/components/markdown/util.ts
index 0bb22347f512..53e8c1cbc891 100644
--- a/web-common/src/features/canvas/components/markdown/util.ts
+++ b/web-common/src/features/canvas/components/markdown/util.ts
@@ -130,11 +130,11 @@ export function getResolveTemplatedStringQueryOptions(
       derived(
         [
           component.specStore,
-          component.timeAndFilterStore,
+          component.timeFilters.getTimeControlStore(),
           component.parent?.specStore ?? null,
           component.parent.timeManager.hasTimeSeriesStore,
         ],
-        ([spec, timeAndFilters, parentSpec, hasTimeSeries]) => {
+        ([spec, { apiTimeRange }, parentSpec, hasTimeSeries]) => {
           const content = spec?.content ?? "";
           const applyFormatting = spec?.apply_formatting === true;
           const needsTemplating = hasTemplatingSyntax(content);
@@ -144,7 +144,7 @@ export function getResolveTemplatedStringQueryOptions(
           const requestBody = buildRequestBody({
             content,
             applyFormatting,
-            timeRange: timeAndFilters?.timeRange,
+            timeRange: apiTimeRange,
             exprByMetricsView,
             metricsViews,
           });
@@ -154,7 +154,7 @@ export function getResolveTemplatedStringQueryOptions(
             !!content &&
             !!client.instanceId &&
             !!requestBody &&
-            (!hasTimeSeries || !!timeAndFilters?.timeRange);
+            (!hasTimeSeries || !!apiTimeRange);
 
           const body: QueryServiceResolveTemplatedStringBody =
             !enabled || !requestBody
diff --git a/web-common/src/features/canvas/components/pivot/index.ts b/web-common/src/features/canvas/components/pivot/index.ts
index a6fba2ef8006..e33a8d6051ba 100644
--- a/web-common/src/features/canvas/components/pivot/index.ts
+++ b/web-common/src/features/canvas/components/pivot/index.ts
@@ -191,7 +191,8 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
       this.parent,
       this.specStore,
       this.pivotState,
-      this.timeAndFilterStore,
+      this.expressionFilters.getExprStoreForFirstMetricsView(),
+      this.timeFilters.getTimeControlStore(),
       this.selfFilteredDimensions,
     );
 
diff --git a/web-common/src/features/canvas/components/pivot/util.ts b/web-common/src/features/canvas/components/pivot/util.ts
index 3b737bcbf7e1..7cca21c2a9eb 100644
--- a/web-common/src/features/canvas/components/pivot/util.ts
+++ b/web-common/src/features/canvas/components/pivot/util.ts
@@ -6,7 +6,6 @@ import {
   appendEphemeralSpecMeasures,
   ephemeralMeasureNameSet,
 } from "@rilldata/web-common/features/dashboards/ephemeral-measures/measure-mapping";
-import type { CanvasStore } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
 import { createPivotDataStore } from "@rilldata/web-common/features/dashboards/pivot/pivot-data-store";
 import {
   canEnablePivotComparison,
@@ -24,7 +23,6 @@ import {
   type PivotTimeConfig,
 } from "@rilldata/web-common/features/dashboards/pivot/types";
 import { createAndExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
 import {
   V1Operation,
@@ -41,6 +39,8 @@ import {
 } from "svelte/store";
 import type { CanvasEntity } from "../../stores/canvas-entity";
 import type { PivotSpec, TableSpec } from "./";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
 
 /**
  * Strips filters for the pivot's own dimensions from the where filter.
@@ -109,7 +109,8 @@ export function createPivotConfig(
   canvas: CanvasEntity,
   tableSpecStore: Readable<PivotSpec | TableSpec>,
   pivotState: Writable<PivotState>,
-  timeAndFilterStore: Readable<TimeAndFilterStore>,
+  filterStore: Readable<ExpressionState>,
+  timeControlStore: Readable<TimeControlState>,
   selfFilteredDimensions?: Readable<Set<string>>,
 ): Readable<PivotDataStoreConfig> {
   const selfFilteredStore = selfFilteredDimensions ?? readable(null);
@@ -119,34 +120,36 @@ export function createPivotConfig(
       canvas.specStore,
       tableSpecStore,
       pivotState,
-      timeAndFilterStore,
+      filterStore,
+      timeControlStore,
       selfFilteredStore,
     ],
     ([
       $canvasData,
       $tableSpec,
       $pivotState,
-      $timeAndFilterStore,
+      $filterState,
+      $timeControlState,
       $selfFiltered,
     ]) => {
-      const { timeRange, comparisonTimeRange, where } = $timeAndFilterStore;
+      const {
+        apiTimeRange,
+        apiComparisonTimeRange,
+        ready: timeReady,
+      } = $timeControlState;
       const metricsViewName = $tableSpec.metrics_view;
       const metricsView =
         $canvasData?.data?.metricsViews[metricsViewName]?.state?.validSpec;
-      const ready =
-        !!metricsViewName &&
-        !!metricsView &&
-        ($timeAndFilterStore.hasTimeSeries === false ||
-          ($timeAndFilterStore.hasTimeSeries === true &&
-            !!timeRange?.start &&
-            !!timeRange?.end));
+      const ready = !!metricsViewName && !!metricsView && timeReady;
 
       let queryWhere: V1Expression | undefined;
       if (!$selfFiltered || $selfFiltered.size === 0) {
-        queryWhere = where;
+        queryWhere = $filterState.expr;
       } else {
         // Only exclude dimensions the pivot itself applied via click-to-filter
-        queryWhere = excludeOwnDimensionFilters(where, [...$selfFiltered]);
+        queryWhere = excludeOwnDimensionFilters($filterState.expr, [
+          ...$selfFiltered,
+        ]);
       }
 
       return "columns" in $tableSpec
@@ -155,10 +158,10 @@ export function createPivotConfig(
             $pivotState,
             queryWhere,
             metricsView,
-            $timeAndFilterStore,
-            comparisonTimeRange,
+            $timeControlState,
+            apiComparisonTimeRange,
             pivotState,
-            timeRange,
+            apiTimeRange,
             ready,
           )
         : processPivot(
@@ -166,10 +169,10 @@ export function createPivotConfig(
             $pivotState,
             queryWhere,
             metricsView,
-            $timeAndFilterStore,
-            comparisonTimeRange,
+            $timeControlState,
+            apiComparisonTimeRange,
             pivotState,
-            timeRange,
+            apiTimeRange,
             ready,
           );
     },
@@ -181,7 +184,7 @@ export function processPivot(
   $pivotState: PivotState,
   where: V1Expression | undefined,
   metricsView: V1MetricsViewSpec | undefined,
-  $timeAndFilterStore: TimeAndFilterStore,
+  $timeControlState: TimeControlState,
   comparisonTimeRange: V1TimeRange | undefined,
   pivotState: Writable<PivotState>,
   timeRange: V1TimeRange,
@@ -207,7 +210,7 @@ export function processPivot(
 
   const enableComparison =
     canEnablePivotComparison($pivotState, comparisonTimeRange?.start) &&
-    $timeAndFilterStore.showTimeComparison;
+    !!$timeControlState.apiComparisonTimeRange;
 
   const ephemeralMeasures = ephemeralSpecsToDefs($tableSpec?.adhoc_measures);
   const ephemeralMeasureNames = ephemeralMeasureNameSet(ephemeralMeasures);
@@ -272,7 +275,7 @@ export function processFlat(
   $pivotState: PivotState,
   where: V1Expression | undefined,
   metricsView: V1MetricsViewSpec | undefined,
-  $timeAndFilterStore: TimeAndFilterStore,
+  $timeControlState: TimeControlState,
   comparisonTimeRange: V1TimeRange | undefined,
   pivotState: Writable<PivotState>,
   timeRange: V1TimeRange,
@@ -309,7 +312,7 @@ export function processFlat(
 
   const enableComparison =
     canEnablePivotComparison($pivotState, comparisonTimeRange?.start) &&
-    $timeAndFilterStore.showTimeComparison;
+    !!$timeControlState.apiComparisonTimeRange;
 
   const config: PivotDataStoreConfig = {
     ready,
@@ -420,40 +423,3 @@ export function tableFieldMapper(
     };
   });
 }
-
-export function memoizePivotConfig<
-  Store extends Readable<PivotDataStoreConfig>,
->(
-  storeGetter: (
-    ctx: CanvasStore,
-    metricsViewName: string,
-    tableSpecStore: Readable<TableSpec | PivotSpec>,
-    pivotState: Writable<PivotState>,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
-  ) => Store,
-) {
-  const cache = new Map<string, Store>();
-  return (
-    ctx: CanvasStore,
-    metricsViewName: string,
-    tableSpecStore: Readable<TableSpec | PivotSpec>,
-    pivotState: Writable<PivotState>,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
-  ): Store => {
-    return derived(tableSpecStore, ($tableSpec, set) => {
-      const key = JSON.stringify($tableSpec);
-      let store = cache.get(key);
-      if (!store) {
-        store = storeGetter(
-          ctx,
-          metricsViewName,
-          tableSpecStore,
-          pivotState,
-          timeAndFilterStore,
-        );
-        cache.set(key, store);
-      }
-      return store.subscribe(set);
-    }) as Store;
-  };
-}
diff --git a/web-common/src/features/canvas/explore-link/ExploreLink.svelte b/web-common/src/features/canvas/explore-link/ExploreLink.svelte
index 8aac5ee1af9e..dc1233acea5a 100644
--- a/web-common/src/features/canvas/explore-link/ExploreLink.svelte
+++ b/web-common/src/features/canvas/explore-link/ExploreLink.svelte
@@ -4,7 +4,6 @@
   import type { ComponentWithMetricsView } from "@rilldata/web-common/features/canvas/components/types";
   import { useExploreAvailability } from "@rilldata/web-common/features/explore-mappers/explore-validation";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
-  import { derived } from "svelte/store";
   import { useTransformCanvasToExploreState } from "./canvas-explore-transformer";
   import ExploreLink from "@rilldata/web-common/features/explores/explore-link/ExploreLink.svelte";
 
@@ -22,22 +21,20 @@
   // Check if component can be linked to explore
   $: exploreAvailability = useExploreAvailability(client, metricsViewName);
 
-  $: context = derived(
-    [exploreAvailability, component.timeAndFilterStore],
-    ([exploreAvailResp, timeAndFilterStore]) => ({
-      organization,
-      project,
-      exploreName: exploreAvailResp.exploreName ?? metricsViewName,
-      timeAndFilterStore,
-    }),
-  );
+  const expressionStore =
+    component.expressionFilters.getExprStoreForFirstMetricsView();
+  const timeControlStore = component.timeFilters.getTimeControlStore();
 
-  $: exploreState = useTransformCanvasToExploreState(component, $context);
+  $: exploreState = useTransformCanvasToExploreState(
+    component,
+    $expressionStore,
+    $timeControlStore,
+  );
 </script>
 
 {#if $exploreAvailability.isAvailable}
   <ExploreLink
-    exploreName={$context.exploreName ?? metricsViewName}
+    exploreName={$exploreAvailability.exploreName ?? metricsViewName}
     displayName={$exploreAvailability.displayName}
     {organization}
     {project}
diff --git a/web-common/src/features/canvas/explore-link/canvas-explore-transformer.ts b/web-common/src/features/canvas/explore-link/canvas-explore-transformer.ts
index fbfc1e908176..0a3f25c2683a 100644
--- a/web-common/src/features/canvas/explore-link/canvas-explore-transformer.ts
+++ b/web-common/src/features/canvas/explore-link/canvas-explore-transformer.ts
@@ -1,25 +1,18 @@
 import type { BaseCanvasComponent } from "@rilldata/web-common/features/canvas/components/BaseCanvasComponent";
 import type { ComponentWithMetricsView } from "@rilldata/web-common/features/canvas/components/types";
 import type { ExploreState } from "@rilldata/web-common/features/dashboards/stores/explore-state";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { transformTimeAndFiltersToExploreState } from "@rilldata/web-common/features/explores/explore-link/explore-state-transformer";
-
-export interface CanvasLinkContext {
-  organization?: string;
-  project?: string;
-  timeAndFilterStore: TimeAndFilterStore;
-  exploreName: string;
-}
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 /**
  *  Orchestrator function that transforms canvas component to explore state
  */
 export function useTransformCanvasToExploreState(
   component: BaseCanvasComponent<ComponentWithMetricsView>,
-  context: CanvasLinkContext,
+  expressionState: ExpressionState,
+  timeControlState: TimeControlState,
 ) {
-  const timeAndFilterStore = context.timeAndFilterStore;
-
   // if (!validateUserPermissions()) {
   //   throw createLinkError(
   //     "PERMISSION_ERROR",
@@ -31,7 +24,10 @@ export function useTransformCanvasToExploreState(
   const cTP = component.getExploreTransformerProperties?.();
 
   // Get global transformer properties from time and filter store
-  const gTP = transformTimeAndFiltersToExploreState(timeAndFilterStore);
+  const gTP = transformTimeAndFiltersToExploreState(
+    expressionState,
+    timeControlState,
+  );
 
   const partialExploreState: Partial<ExploreState> = {
     ...gTP,
diff --git a/web-common/src/features/canvas/filters/CanvasFilters.svelte b/web-common/src/features/canvas/filters/CanvasFilters.svelte
index c2ecae0450c5..0a286af5b387 100644
--- a/web-common/src/features/canvas/filters/CanvasFilters.svelte
+++ b/web-common/src/features/canvas/filters/CanvasFilters.svelte
@@ -1,13 +1,8 @@
 <script lang="ts">
-  import Calendar from "@rilldata/web-common/components/icons/Calendar.svelte";
-  import * as Tooltip from "@rilldata/web-common/components/tooltip-v2";
   import { getCanvasStore } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
-  import { getPanRangeForTimeRange } from "@rilldata/web-common/features/dashboards/state-managers/selectors/charts";
-  import SuperPill from "@rilldata/web-common/features/dashboards/time-controls/super-pill/SuperPill.svelte";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
-  import Metadata from "../../dashboards/time-controls/super-pill/components/Metadata.svelte";
-  import CanvasComparisonPill from "./CanvasComparisonPill.svelte";
   import ExpressionFilters from "../../dashboards/filters/ExpressionFilters.svelte";
+  import TimeFilters from "@rilldata/web-common/features/dashboards/time-controls/TimeFilters.svelte";
 
   let {
     maxWidth,
@@ -20,82 +15,20 @@
 
   const runtimeClient = useRuntimeClient();
 
-  let showDefaultItem = false;
-
   let {
     canvasEntity: {
-      timeManager: {
-        state: {
-          comparisonIntervalStore,
-          showTimeComparisonStore,
-          timeZoneStore,
-          canPanStore,
-          set,
-          rangeStore,
-          grainStore,
-          comparisonRangeStore,
-          interval: intervalStore,
-          minMaxTimeStamps,
-        },
-        hasTimeSeriesStore,
-        largestMinTimeGrain,
-        defaultTimeRangeStore,
-        timeRangeOptionsStore,
-        availableTimeZonesStore,
-        allowCustomRangeStore,
-        maxQueryTimeRangeStore,
-      },
+      dashboardProvider,
       expressionFilterManager,
+      timeFilterManager,
     },
   } = $derived(getCanvasStore(canvasName, runtimeClient.instanceId));
 
-  let selectedRange = $derived($rangeStore);
-  let interval = $derived($intervalStore);
-  let minTimeGrain = $derived($largestMinTimeGrain);
-
-  let timeStart = $derived(interval?.start.toUTC().toISO());
-  let timeEnd = $derived(interval?.end.toUTC().toISO());
-
-  let minMax = $derived($minMaxTimeStamps);
-
-  let hasTimeSeries = $derived($hasTimeSeriesStore);
-
-  let minDate = $derived(minMax?.min);
-  let maxDate = $derived(minMax?.max);
-  let showTimeComparison = $derived($showTimeComparisonStore);
-
-  let activeTimeZone = $derived($timeZoneStore);
-  let comparisonInterval = $derived($comparisonIntervalStore);
-  let comparisonRange = $derived($comparisonRangeStore);
-
-  let activeTimeGrain = $derived($grainStore);
-  let defaultTimeRange = $derived($defaultTimeRangeStore);
-  let availableTimeZones = $derived($availableTimeZonesStore);
-  let timeRanges = $derived($timeRangeOptionsStore);
-  let allowCustomTimeRange = $derived($allowCustomRangeStore);
-  let maxQueryTimeRange = $derived($maxQueryTimeRangeStore);
-
-  let canPan = $derived($canPanStore);
-
-  function onPan(direction: "left" | "right") {
-    if (!interval || !selectedRange) return;
-    const getPanRange = getPanRangeForTimeRange(
-      {
-        end: interval?.end.toJSDate(),
-        start: interval?.start.toJSDate(),
-        name: selectedRange,
-      },
-      activeTimeZone,
-    );
-    const panRange = getPanRange(direction);
-
-    if (!panRange) return;
-    const { start, end } = panRange;
-
-    if (!activeTimeGrain) return;
-
-    set.range(`${start.toISOString()},${end.toISOString()}`);
-  }
+  let {
+    hasTimeSeries,
+    timeStart,
+    timeEnd,
+    ready: timeControlsReady,
+  } = $derived(timeFilterManager);
 </script>
 
 <div
@@ -104,89 +37,25 @@
   style:max-width="{maxWidth}px"
 >
   {#if hasTimeSeries}
-    <div class="p-2 flex justify-between size-full py-0">
-      <div class="flex items-center size-full">
-        <div class="flex-none h-full pt-1.5 pointer-events-auto">
-          <Tooltip.Root delayDuration={0}>
-            <Tooltip.Trigger class="cursor-default">
-              <Calendar size="16px" />
-            </Tooltip.Trigger>
-            <Tooltip.Content side="bottom" sideOffset={10} class="z-50">
-              <Metadata
-                timeZone={activeTimeZone}
-                timeStart={minDate?.toJSDate()}
-                timeEnd={maxDate?.toJSDate()}
-              />
-            </Tooltip.Content>
-          </Tooltip.Root>
-        </div>
-        <div
-          class="flex flex-wrap gap-x-2 gap-y-1.5 pl-2 pointer-events-auto size-full pr-2"
-        >
-          <SuperPill
-            context={canvasName}
-            {minDate}
-            {maxDate}
-            selectedRangeAlias={selectedRange}
-            showPivot={false}
-            {minTimeGrain}
-            {defaultTimeRange}
-            {availableTimeZones}
-            {timeRanges}
-            complete={false}
-            {interval}
-            {timeStart}
-            {timeEnd}
-            {activeTimeGrain}
-            {activeTimeZone}
-            canPanLeft={canPan.left}
-            canPanRight={canPan.right}
-            watermark={undefined}
-            {allowCustomTimeRange}
-            {maxQueryTimeRange}
-            {showDefaultItem}
-            applyRange={(timeRange) => {
-              const string = `${timeRange.start.toISOString()},${timeRange.end.toISOString()}`;
-              set.range(string);
-            }}
-            onSelectRange={set.range}
-            onTimeGrainSelect={set.grain}
-            onSelectTimeZone={set.zone}
-            {onPan}
-          />
-          <CanvasComparisonPill
-            {minDate}
-            {maxDate}
-            {comparisonInterval}
-            {comparisonRange}
-            {interval}
-            {selectedRange}
-            {activeTimeGrain}
-            {activeTimeZone}
-            {minTimeGrain}
-            {showTimeComparison}
-            {allowCustomTimeRange}
-            onDisplayTimeComparison={set.comparison}
-            onSetSelectedComparisonRange={(range) => {
-              if (range.name === "CUSTOM_COMPARISON_RANGE") {
-                const stringRange = `${range.start.toISOString()},${range.end.toISOString()}`;
-                set.comparison(stringRange);
-              } else if (range.name) {
-                set.comparison(range.name);
-              }
-            }}
-          />
-        </div>
-      </div>
-    </div>
+    <TimeFilters
+      {timeFilterManager}
+      dashboardConfigProvider={dashboardProvider}
+      config={{
+        showTimeDimensionSelector: false,
+        showFullRange: false,
+        showWatermark: false,
+      }}
+      context="canvas"
+    />
   {/if}
 
   <div class="pointer-events-auto ml-2">
     <ExpressionFilters
+      dashboardConfigProvider={dashboardProvider}
       {expressionFilterManager}
       {timeStart}
       {timeEnd}
-      timeControlsReady={!hasTimeSeries || !!interval}
+      {timeControlsReady}
     />
   </div>
 </div>
diff --git a/web-common/src/features/canvas/stores/canvas-entity.ts b/web-common/src/features/canvas/stores/canvas-entity.ts
index e16d89b773f4..23e08ffd4b36 100644
--- a/web-common/src/features/canvas/stores/canvas-entity.ts
+++ b/web-common/src/features/canvas/stores/canvas-entity.ts
@@ -53,6 +53,7 @@ import { ExpressionFilterManager } from "@rilldata/web-common/features/dashboard
 import { convertExpressionToFilterParam } from "@rilldata/web-common/features/dashboards/url-state/filters/converters.ts";
 import { flattenExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils.ts";
 import { CanvasDashboardConfigProvider } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
+import { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export const lastVisitedState = new Map<string, string>();
 
@@ -90,9 +91,6 @@ export class CanvasEntity {
   // Tab groups keyed by their stable name, reused across spec updates so active-tab state survives.
   private tabGroups = new Map<string, TabGroup>();
 
-  // Time state controls
-  timeManager: TimeManager;
-
   // Metrics view selectors
   metricsView: MetricsViewSelectors;
   dashboardProvider: CanvasDashboardConfigProvider;
@@ -100,6 +98,10 @@ export class CanvasEntity {
   // Expression filter manager
   expressionFilterManager: ExpressionFilterManager;
 
+  // Time filter manager
+  timeManager: TimeManager;
+  timeFilterManager: TimeFilterManager;
+
   fileArtifact: FileArtifact | undefined;
 
   selectedComponent = writable<string | null>(null);
@@ -229,6 +231,13 @@ export class CanvasEntity {
       this.clearActiveComponent();
     });
 
+    this.timeFilterManager = new TimeFilterManager(
+      this.client,
+      this.dashboardProvider.metricsViewsProvider,
+      this.dashboardProvider.yamlConfigProvider,
+      false,
+    );
+
     this.processSpec(this.spec);
   }
 
@@ -496,6 +505,8 @@ export class CanvasEntity {
     // TODO: find a good common method of sync between explore and canvas once time filters is also unified
     if (this.dashboardProvider.metricsViewsProvider.ready) {
       this.expressionFilterManager.setUrlParams(searchParams);
+      if (this.timeFilterManager.ready)
+        this.timeFilterManager.setUrlParams(searchParams);
     }
     this.timeManager.state.onUrlChange(searchParams);
     this.applyTabsFromURL(searchParams);
diff --git a/web-common/src/features/components/charts/cartesian/CartesianChartProvider.ts b/web-common/src/features/components/charts/cartesian/CartesianChartProvider.ts
index 23ad6e40c8ae..383aafc97641 100644
--- a/web-common/src/features/components/charts/cartesian/CartesianChartProvider.ts
+++ b/web-common/src/features/components/charts/cartesian/CartesianChartProvider.ts
@@ -17,7 +17,6 @@ import {
 } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-entry";
 import { mergeFilters } from "@rilldata/web-common/features/dashboards/pivot/pivot-merge-filters";
 import { createInExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import type {
   MetricsViewSpecMeasure,
   V1Expression,
@@ -46,6 +45,8 @@ import {
   isSortByDelta,
   vegaSortToAggregationSort,
 } from "../query-util";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export type CartesianChartSpec = {
   metrics_view: string;
@@ -162,7 +163,8 @@ export class CartesianChartProvider {
 
   createChartDataQuery(
     client: RuntimeClient,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible?: Readable<boolean>,
   ): ChartDataQuery {
     const visibleStore = visible ?? readable(true);
@@ -219,28 +221,29 @@ export class CartesianChartProvider {
 
     // Create topN query for x dimension
     const topNXQueryOptionsStore = derived(
-      [timeAndFilterStore, visibleStore],
-      ([$timeAndFilterStore, $visible]) => {
+      [filterStore, timeControlStore, visibleStore],
+      ([$filterStore, $timeControlStore, $visible]) => {
+        const { expr } = $filterStore;
         const {
-          timeRange,
-          where,
+          apiTimeRange,
           hasTimeSeries,
-          comparisonTimeRange,
-          showTimeComparison,
-        } = $timeAndFilterStore;
+          apiComparisonTimeRange,
+          showComparison,
+        } = $timeControlStore;
+
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange) &&
+          canQueryWithTimeRange(hasTimeSeries, apiTimeRange) &&
           config.x?.type === "nominal" &&
           !Array.isArray(config.x?.sort) &&
           !!dimensionName;
 
-        const topNWhere = getFilterWithNullHandling(where, config.x);
+        const topNWhere = getFilterWithNullHandling(expr, config.x);
 
         const isComparisonActive =
-          showTimeComparison &&
-          !!comparisonTimeRange?.start &&
-          !!comparisonTimeRange?.end;
+          showComparison &&
+          !!apiComparisonTimeRange?.start &&
+          !!apiComparisonTimeRange?.end;
 
         let xAxisSort = this.resolveXAxisSort(
           config,
@@ -276,7 +279,7 @@ export class CartesianChartProvider {
                 },
               },
             ];
-            topNComparisonTimeRange = comparisonTimeRange;
+            topNComparisonTimeRange = apiComparisonTimeRange;
           }
         }
 
@@ -288,7 +291,7 @@ export class CartesianChartProvider {
             dimensions: [{ name: dimensionName }],
             sort: xAxisSort ? [xAxisSort] : undefined,
             where: topNWhere,
-            timeRange: hasTimeSeries ? timeRange : undefined,
+            timeRange: hasTimeSeries ? apiTimeRange : undefined,
             comparisonTimeRange: topNComparisonTimeRange,
             limit: limit?.toString(),
           },
@@ -305,19 +308,24 @@ export class CartesianChartProvider {
 
     // Create topN query for color dimension (skipped when explicit values are provided)
     const topNColorQueryOptionsStore = derived(
-      [timeAndFilterStore, visibleStore],
-      ([$timeAndFilterStore, $visible]) => {
-        const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
+      [filterStore, timeControlStore, visibleStore],
+      ([$filterStore, $timeControlStore, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, hasTimeSeries } = $timeControlStore;
         const enabled =
           $visible &&
           !hasExplicitColorValues &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange, requiresTimeRange) &&
+          canQueryWithTimeRange(
+            hasTimeSeries,
+            apiTimeRange,
+            requiresTimeRange,
+          ) &&
           hasColorDimension &&
           !!colorDimensionName &&
           !!colorLimit;
 
         const topNWhere = getFilterWithNullHandling(
-          where,
+          expr,
           typeof config.color === "object" ? config.color : undefined,
         );
 
@@ -331,7 +339,7 @@ export class CartesianChartProvider {
               ? [{ name: config.y.field, desc: true }]
               : undefined,
             where: topNWhere,
-            timeRange,
+            timeRange: apiTimeRange,
             limit: colorLimit?.toString(),
           },
           {
@@ -346,22 +354,32 @@ export class CartesianChartProvider {
     const topNColorQuery = createQuery(topNColorQueryOptionsStore);
 
     const queryOptionsStore = derived(
-      [timeAndFilterStore, topNXQuery, topNColorQuery, visibleStore],
-      ([$timeAndFilterStore, $topNXQuery, $topNColorQuery, $visible]) => {
+      [filterStore, timeControlStore, topNXQuery, topNColorQuery, visibleStore],
+      ([
+        $filterStore,
+        $timeControlStore,
+        $topNXQuery,
+        $topNColorQuery,
+        $visible,
+      ]) => {
+        const { expr } = $filterStore;
         const {
-          timeRange,
-          where,
+          apiTimeRange,
           timeGrain,
-          comparisonTimeRange,
-          showTimeComparison,
+          apiComparisonTimeRange,
+          showComparison,
           hasTimeSeries,
-        } = $timeAndFilterStore;
+        } = $timeControlStore;
         const topNXData = $topNXQuery?.data?.data;
 
         const topNColorData = $topNColorQuery?.data?.data;
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange, requiresTimeRange) &&
+          canQueryWithTimeRange(
+            hasTimeSeries,
+            apiTimeRange,
+            requiresTimeRange,
+          ) &&
           !!measures?.length &&
           !!dimensions?.length &&
           (hasColorDimension &&
@@ -377,7 +395,7 @@ export class CartesianChartProvider {
             : true);
 
         let combinedWhere: V1Expression | undefined = getFilterWithNullHandling(
-          where,
+          expr,
           config.x,
         );
 
@@ -439,8 +457,8 @@ export class CartesianChartProvider {
             .map((measureName) => {
               // Comparison values cannot be computed for ephemeral measures.
               if (
-                showTimeComparison &&
-                comparisonTimeRange?.start &&
+                showComparison &&
+                apiComparisonTimeRange?.start &&
                 !ephemeralNames.has(measureName)
               ) {
                 const result: V1MetricsViewAggregationMeasure[] = [
@@ -465,12 +483,12 @@ export class CartesianChartProvider {
             measures: withEphemeralMeasures(config, measuresWithComparison),
             dimensions,
             where: combinedWhere,
-            timeRange,
+            timeRange: apiTimeRange,
             comparisonTimeRange:
-              showTimeComparison &&
-              comparisonTimeRange?.start &&
-              comparisonTimeRange?.end
-                ? comparisonTimeRange
+              showComparison &&
+              apiComparisonTimeRange?.start &&
+              apiComparisonTimeRange?.end
+                ? apiComparisonTimeRange
                 : undefined,
             fillMissing: requiresTimeRange,
             limit: hasColorDimension || !limit ? "5000" : limit?.toString(),
diff --git a/web-common/src/features/components/charts/circular/CircularChartProvider.ts b/web-common/src/features/components/charts/circular/CircularChartProvider.ts
index 6df78e967c11..70f394080e53 100644
--- a/web-common/src/features/components/charts/circular/CircularChartProvider.ts
+++ b/web-common/src/features/components/charts/circular/CircularChartProvider.ts
@@ -10,7 +10,6 @@ import {
 import { isFieldConfig } from "@rilldata/web-common/features/components/charts/util";
 import { mergeFilters } from "@rilldata/web-common/features/dashboards/pivot/pivot-merge-filters";
 import { createInExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import type {
   V1Expression,
   V1MetricsViewAggregationDimension,
@@ -39,6 +38,8 @@ import {
   TOTAL_DOMAIN_KEY,
   type LabelsConfig,
 } from "./constants";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export type CircularChartSpec = {
   metrics_view: string;
@@ -85,7 +86,8 @@ export class CircularChartProvider {
 
   createChartDataQuery(
     client: RuntimeClient,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible?: Readable<boolean>,
   ): ChartDataQuery {
     const visibleStore = visible ?? readable(true);
@@ -113,17 +115,18 @@ export class CircularChartProvider {
 
     // Create topN query for color dimension
     const topNColorQueryOptionsStore = derived(
-      [timeAndFilterStore, visibleStore],
-      ([$timeAndFilterStore, $visible]) => {
-        const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
+      [filterStore, timeControlStore, visibleStore],
+      ([$filterStore, $timeControlStore, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, hasTimeSeries } = $timeControlStore;
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange) &&
+          canQueryWithTimeRange(hasTimeSeries, apiTimeRange) &&
           !!colorDimensionName &&
           config.color?.type === "nominal" &&
           !Array.isArray(config.color?.sort);
 
-        const topNWhere = getFilterWithNullHandling(where, config.color);
+        const topNWhere = getFilterWithNullHandling(expr, config.color);
 
         // drives the "Other" UI affordance
         const probeLimit = limit ? limit + 1 : undefined;
@@ -136,7 +139,7 @@ export class CircularChartProvider {
             dimensions: [{ name: colorDimensionName }],
             sort: colorSort ? [colorSort] : undefined,
             where: topNWhere,
-            timeRange,
+            timeRange: apiTimeRange,
             limit: probeLimit?.toString(),
           },
           {
@@ -153,15 +156,16 @@ export class CircularChartProvider {
     // The total query feeds the optional center-label total AND the
     // percent-of-total tooltip entry
     const totalQueryOptionsStore = derived(
-      [timeAndFilterStore, visibleStore],
-      ([$timeAndFilterStore, $visible]) => {
-        const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
+      [filterStore, timeControlStore, visibleStore],
+      ([$filterStore, $timeControlStore, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, hasTimeSeries } = $timeControlStore;
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange) &&
+          canQueryWithTimeRange(hasTimeSeries, apiTimeRange) &&
           !!config.measure?.field;
 
-        const totalWhere = getFilterWithNullHandling(where, config.color);
+        const totalWhere = getFilterWithNullHandling(expr, config.color);
 
         return getQueryServiceMetricsViewAggregationQueryOptions(
           client,
@@ -169,7 +173,7 @@ export class CircularChartProvider {
             metricsView: config.metrics_view,
             measures,
             where: totalWhere,
-            timeRange,
+            timeRange: apiTimeRange,
           },
           {
             query: {
@@ -183,9 +187,10 @@ export class CircularChartProvider {
     const totalQuery = createQuery(totalQueryOptionsStore);
 
     const otherQueryOptionsStore = derived(
-      [timeAndFilterStore, topNColorQuery, visibleStore],
-      ([$timeAndFilterStore, $topNColorQuery, $visible]) => {
-        const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
+      [filterStore, timeControlStore, topNColorQuery, visibleStore],
+      ([$filterStore, $timeControlStore, $topNColorQuery, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, hasTimeSeries } = $timeControlStore;
         const topNData = $topNColorQuery?.data?.data;
         const customSortValues = Array.isArray(config.color?.sort)
           ? config.color.sort
@@ -204,11 +209,11 @@ export class CircularChartProvider {
           showOther &&
           !!visibleValues &&
           visibleValues.length > 0 &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange) &&
+          canQueryWithTimeRange(hasTimeSeries, apiTimeRange) &&
           !!config.measure?.field &&
           !!colorDimensionName;
 
-        const baseWhere = getFilterWithNullHandling(where, config.color);
+        const baseWhere = getFilterWithNullHandling(expr, config.color);
         let otherWhere = baseWhere;
         if (enabled && colorDimensionName && visibleValues) {
           const notInExpr = createInExpression(
@@ -225,7 +230,7 @@ export class CircularChartProvider {
             metricsView: config.metrics_view,
             measures,
             where: otherWhere,
-            timeRange,
+            timeRange: apiTimeRange,
           },
           {
             query: {
@@ -240,31 +245,34 @@ export class CircularChartProvider {
 
     const queryOptionsStore = derived(
       [
-        timeAndFilterStore,
+        filterStore,
+        timeControlStore,
         topNColorQuery,
         totalQuery,
         otherQuery,
         visibleStore,
       ],
       ([
-        $timeAndFilterStore,
+        $filterStore,
+        $timeControlStore,
         $topNColorQuery,
         $totalQuery,
         $otherQuery,
         $visible,
       ]) => {
-        const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
+        const { expr } = $filterStore;
+        const { apiTimeRange, hasTimeSeries } = $timeControlStore;
         const topNColorData = $topNColorQuery?.data?.data;
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange) &&
+          canQueryWithTimeRange(hasTimeSeries, apiTimeRange) &&
           !!measures?.length &&
           (config.color?.type === "nominal" &&
           !Array.isArray(config.color?.sort)
             ? topNColorData !== undefined
             : true);
 
-        let combinedWhere = where;
+        let combinedWhere = expr;
         let topColorValues: string[] = [];
 
         // Apply topN filter for color dimension
@@ -286,7 +294,7 @@ export class CircularChartProvider {
             colorDimensionName,
             topColorValues,
           );
-          combinedWhere = mergeFilters(where, filterForTopColorValues);
+          combinedWhere = mergeFilters(expr, filterForTopColorValues);
         }
 
         // Store combinedWhere for use in BaseChart
@@ -300,7 +308,7 @@ export class CircularChartProvider {
             dimensions,
             where: combinedWhere,
             sort: colorSort ? [colorSort] : undefined,
-            timeRange,
+            timeRange: apiTimeRange,
             limit: limit?.toString(),
           },
           {
diff --git a/web-common/src/features/components/charts/combo/ComboChartProvider.ts b/web-common/src/features/components/charts/combo/ComboChartProvider.ts
index bece54ff3892..af354f2f9d79 100644
--- a/web-common/src/features/components/charts/combo/ComboChartProvider.ts
+++ b/web-common/src/features/components/charts/combo/ComboChartProvider.ts
@@ -9,7 +9,6 @@ import {
 } from "@rilldata/web-common/features/components/charts/types";
 import { mergeFilters } from "@rilldata/web-common/features/dashboards/pivot/pivot-merge-filters";
 import { createInExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import type {
   MetricsViewSpecMeasure,
   V1Expression,
@@ -32,6 +31,8 @@ import {
   getFilterWithNullHandling,
   vegaSortToAggregationSort,
 } from "../query-util";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 import { withEphemeralMeasures } from "../ephemeral-measures";
 
 export type MarkType = "bar" | "line";
@@ -89,7 +90,8 @@ export class ComboChartProvider {
 
   createChartDataQuery(
     client: RuntimeClient,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible?: Readable<boolean>,
   ): ChartDataQuery {
     const visibleStore = visible ?? readable(true);
@@ -111,18 +113,19 @@ export class ComboChartProvider {
     const requiresTimeRange = config.x?.type === "temporal";
 
     const xAxisQueryOptionsStore = derived(
-      [timeAndFilterStore, visibleStore],
-      ([$timeAndFilterStore, $visible]) => {
-        const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
+      [filterStore, timeControlStore, visibleStore],
+      ([$filterStore, $timeControlStore, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, hasTimeSeries } = $timeControlStore;
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange) &&
+          canQueryWithTimeRange(hasTimeSeries, apiTimeRange) &&
           !!dimensionName &&
           config?.x?.type === "nominal" &&
           !Array.isArray(config.x?.sort) &&
           !!config.y1?.field;
 
-        const xWhere = getFilterWithNullHandling(where, config.x);
+        const xWhere = getFilterWithNullHandling(expr, config.x);
 
         let limit = this.defaultNominalLimit.toString();
         if (config.x?.limit) {
@@ -147,7 +150,7 @@ export class ComboChartProvider {
             dimensions: [{ name: dimensionName }],
             sort: xAxisSort ? [xAxisSort] : undefined,
             where: xWhere,
-            timeRange,
+            timeRange: apiTimeRange,
             limit,
           },
           {
@@ -162,22 +165,26 @@ export class ComboChartProvider {
     const xAxisQuery = createQuery(xAxisQueryOptionsStore);
 
     const queryOptionsStore = derived(
-      [timeAndFilterStore, xAxisQuery, visibleStore],
-      ([$timeAndFilterStore, $xAxisQuery, $visible]) => {
-        const { timeRange, where, timeGrain, hasTimeSeries } =
-          $timeAndFilterStore;
+      [filterStore, timeControlStore, xAxisQuery, visibleStore],
+      ([$filterStore, $timeControlStore, $xAxisQuery, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, timeGrain, hasTimeSeries } = $timeControlStore;
         const xTopNData = $xAxisQuery?.data?.data;
 
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange, requiresTimeRange) &&
+          canQueryWithTimeRange(
+            hasTimeSeries,
+            apiTimeRange,
+            requiresTimeRange,
+          ) &&
           !!measures?.length &&
           (config.x?.type === "nominal" && !Array.isArray(config.x?.sort)
             ? xTopNData !== undefined
             : !!dimensionName);
 
         let combinedWhere: V1Expression | undefined = getFilterWithNullHandling(
-          where,
+          expr,
           config.x,
         );
 
@@ -222,7 +229,7 @@ export class ComboChartProvider {
             measures,
             dimensions,
             where: combinedWhere,
-            timeRange,
+            timeRange: apiTimeRange,
             fillMissing: requiresTimeRange,
             sort:
               config.x?.type === "temporal"
diff --git a/web-common/src/features/components/charts/data-provider.ts b/web-common/src/features/components/charts/data-provider.ts
index 7b0d86f32430..1158c4a758ce 100644
--- a/web-common/src/features/components/charts/data-provider.ts
+++ b/web-common/src/features/components/charts/data-provider.ts
@@ -1,5 +1,4 @@
 import { timeGrainToVegaTimeUnitMap } from "@rilldata/web-common/components/vega/util";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import type { MetricsViewSelectors } from "@rilldata/web-common/features/metrics-views/metrics-view-selectors";
 import { TIME_GRAIN } from "@rilldata/web-common/lib/time/config";
 import {
@@ -19,6 +18,8 @@ import type {
 } from "./types";
 import { resolveEphemeralMeasureSpec } from "./ephemeral-measures";
 import { adjustDataForTimeZone, getFieldsByType } from "./util";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export interface ChartDataDependencies<T extends ChartSpec = ChartSpec> {
   config: T;
@@ -26,7 +27,7 @@ export interface ChartDataDependencies<T extends ChartSpec = ChartSpec> {
   metricsView: MetricsViewSelectors;
   /** Theme colors (primary/secondary) - updates when theme changes */
   themeStore: CanvasEntity["theme"];
-  timeAndFilterStore: Readable<TimeAndFilterStore>;
+  timeControlStore: Readable<TimeControlState>;
   /** Reactive theme mode (light/dark toggle) - used in canvas context */
   themeModeStore?: Readable<boolean>;
   /** Static theme mode flag - used in standalone chart context */
@@ -47,7 +48,7 @@ export function getChartData<T extends ChartSpec = ChartSpec>(
     metricsView,
     themeStore,
     getDomainValues,
-    timeAndFilterStore,
+    timeControlStore,
     themeModeStore,
     isThemeModeDark: staticThemeModeDark,
   } = deps;
@@ -73,7 +74,7 @@ export function getChartData<T extends ChartSpec = ChartSpec>(
         config.metrics_view,
       );
     } else {
-      return getTimeDimensionDefinition(field.field, timeAndFilterStore);
+      return getTimeDimensionDefinition(field.field, timeControlStore);
     }
   });
 
@@ -84,12 +85,12 @@ export function getChartData<T extends ChartSpec = ChartSpec>(
   return derived(
     [
       chartDataQuery,
-      timeAndFilterStore,
+      timeControlStore,
       themeStore,
       modeStore,
       ...fieldReadableMap,
     ],
-    ([chartData, $timeAndFilterStore, theme, isThemeModeDark, ...fieldMap]) => {
+    ([chartData, $timeControlStore, theme, isThemeModeDark, ...fieldMap]) => {
       const fieldSpecMap = allFields.reduce(
         (acc, field, index) => {
           acc[field.field] =
@@ -112,21 +113,21 @@ export function getChartData<T extends ChartSpec = ChartSpec>(
 
       let data = chartData?.data?.data;
 
-      if (timeDimensions?.length && $timeAndFilterStore.timeGrain) {
+      if (timeDimensions?.length && $timeControlStore.timeGrain) {
         data = adjustDataForTimeZone(
           data,
           timeDimensions,
-          $timeAndFilterStore.timeRange.timeZone || "UTC",
+          $timeControlStore.timeZone || "UTC",
         );
       }
 
       const domainValues = getDomainValues();
-      const hasComparison = $timeAndFilterStore.showTimeComparison;
+      const hasComparison = $timeControlStore.showComparison;
       const waitingForTimeState =
-        $timeAndFilterStore.hasTimeSeries === undefined ||
-        ($timeAndFilterStore.hasTimeSeries === true &&
-          (!$timeAndFilterStore.timeRange?.start ||
-            !$timeAndFilterStore.timeRange?.end));
+        $timeControlStore.hasTimeSeries === undefined ||
+        ($timeControlStore.hasTimeSeries === true &&
+          (!$timeControlStore.apiTimeRange?.start ||
+            !$timeControlStore.apiTimeRange?.end));
 
       return {
         data: data || [],
@@ -151,10 +152,10 @@ export function getChartData<T extends ChartSpec = ChartSpec>(
 
 export function getTimeDimensionDefinition(
   field: string,
-  timeAndFilterStore: Readable<TimeAndFilterStore>,
+  timeControlStore: Readable<TimeControlState>,
 ): Readable<TimeDimensionDefinition> {
-  return derived(timeAndFilterStore, ($timeAndFilterStore) => {
-    const grain = $timeAndFilterStore?.timeGrain;
+  return derived(timeControlStore, ($timeControlStore) => {
+    const grain = $timeControlStore?.timeGrain;
     const displayName = "Time";
 
     if (grain) {
diff --git a/web-common/src/features/components/charts/funnel/FunnelChartProvider.ts b/web-common/src/features/components/charts/funnel/FunnelChartProvider.ts
index 699151e59a19..a104a62071d0 100644
--- a/web-common/src/features/components/charts/funnel/FunnelChartProvider.ts
+++ b/web-common/src/features/components/charts/funnel/FunnelChartProvider.ts
@@ -8,7 +8,6 @@ import {
 } from "@rilldata/web-common/features/components/charts/types";
 import { mergeFilters } from "@rilldata/web-common/features/dashboards/pivot/pivot-merge-filters";
 import { createInExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import type {
   V1Expression,
   V1MetricsViewAggregationDimension,
@@ -30,6 +29,8 @@ import {
   canQueryWithTimeRange,
   getFilterWithNullHandling,
 } from "../query-util";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 import { withEphemeralMeasures } from "../ephemeral-measures";
 
 export type FunnelMode = "width" | "order";
@@ -89,7 +90,8 @@ export class FunnelChartProvider {
 
   createChartDataQuery(
     client: RuntimeClient,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible?: Readable<boolean>,
   ): ChartDataQuery {
     const visibleStore = visible ?? readable(true);
@@ -135,17 +137,18 @@ export class FunnelChartProvider {
 
     // Create topN query for stage dimension
     const topNStageQueryOptionsStore = derived(
-      [timeAndFilterStore, visibleStore],
-      ([$timeAndFilterStore, $visible]) => {
-        const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
+      [filterStore, timeControlStore, visibleStore],
+      ([$filterStore, $timeControlStore, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, hasTimeSeries } = $timeControlStore;
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange) &&
+          canQueryWithTimeRange(hasTimeSeries, apiTimeRange) &&
           !!stageDimensionName &&
           !isMultiMeasure &&
           !Array.isArray(config.stage?.sort);
 
-        const topNWhere = getFilterWithNullHandling(where, config.stage);
+        const topNWhere = getFilterWithNullHandling(expr, config.stage);
 
         return getQueryServiceMetricsViewAggregationQueryOptions(
           client,
@@ -155,7 +158,7 @@ export class FunnelChartProvider {
             dimensions: [{ name: stageDimensionName }],
             sort: stageSort ? [stageSort] : undefined,
             where: topNWhere,
-            timeRange,
+            timeRange: apiTimeRange,
             limit: limit?.toString(),
           },
           {
@@ -170,13 +173,14 @@ export class FunnelChartProvider {
     const topNStageQuery = createQuery(topNStageQueryOptionsStore);
 
     const queryOptionsStore = derived(
-      [timeAndFilterStore, topNStageQuery, visibleStore],
-      ([$timeAndFilterStore, $topNStageQuery, $visible]) => {
-        const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
+      [filterStore, timeControlStore, topNStageQuery, visibleStore],
+      ([$filterStore, $timeControlStore, $topNStageQuery, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, hasTimeSeries } = $timeControlStore;
         const topNStageData = $topNStageQuery?.data?.data;
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange) &&
+          canQueryWithTimeRange(hasTimeSeries, apiTimeRange) &&
           !!measures?.length &&
           (isMultiMeasure || !!dimensions?.length) &&
           (!isMultiMeasure &&
@@ -186,7 +190,7 @@ export class FunnelChartProvider {
             : true);
 
         let combinedWhere: V1Expression | undefined = getFilterWithNullHandling(
-          where,
+          expr,
           isMultiMeasure ? undefined : config.stage,
         );
 
@@ -226,7 +230,7 @@ export class FunnelChartProvider {
             dimensions,
             where: combinedWhere,
             sort: stageSort ? [stageSort] : undefined,
-            timeRange,
+            timeRange: apiTimeRange,
             limit: limit?.toString(),
           },
           {
diff --git a/web-common/src/features/components/charts/heatmap/HeatmapChartProvider.ts b/web-common/src/features/components/charts/heatmap/HeatmapChartProvider.ts
index 709031628d77..287067741af9 100644
--- a/web-common/src/features/components/charts/heatmap/HeatmapChartProvider.ts
+++ b/web-common/src/features/components/charts/heatmap/HeatmapChartProvider.ts
@@ -9,7 +9,6 @@ import {
 } from "@rilldata/web-common/features/components/charts/types";
 import { mergeFilters } from "@rilldata/web-common/features/dashboards/pivot/pivot-merge-filters";
 import { createInExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import type {
   V1Expression,
   V1MetricsViewAggregationDimension,
@@ -31,6 +30,8 @@ import {
   getFilterWithNullHandling,
   vegaSortToAggregationSort,
 } from "../query-util";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 import { withEphemeralMeasures } from "../ephemeral-measures";
 
 export type HeatmapChartSpec = {
@@ -76,7 +77,8 @@ export class HeatmapChartProvider {
 
   createChartDataQuery(
     client: RuntimeClient,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible?: Readable<boolean>,
   ): ChartDataQuery {
     const visibleStore = visible ?? readable(true);
@@ -90,17 +92,18 @@ export class HeatmapChartProvider {
 
     // Create top level options store for X axis
     const xAxisQueryOptionsStore = derived(
-      [timeAndFilterStore, visibleStore],
-      ([$timeAndFilterStore, $visible]) => {
-        const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
+      [filterStore, timeControlStore, visibleStore],
+      ([$filterStore, $timeControlStore, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, hasTimeSeries } = $timeControlStore;
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange) &&
+          canQueryWithTimeRange(hasTimeSeries, apiTimeRange) &&
           !!config.x?.field &&
           config?.x?.type !== "temporal" &&
           !Array.isArray(config.x?.sort);
 
-        const xWhere = getFilterWithNullHandling(where, config.x);
+        const xWhere = getFilterWithNullHandling(expr, config.x);
 
         let limit = this.defaultNominalLimit.toString();
         if (config.x?.limit) {
@@ -121,7 +124,7 @@ export class HeatmapChartProvider {
             dimensions: [{ name: config.x?.field }],
             sort: xAxisSort ? [xAxisSort] : undefined,
             where: xWhere,
-            timeRange,
+            timeRange: apiTimeRange,
             limit,
           },
           {
@@ -135,17 +138,18 @@ export class HeatmapChartProvider {
 
     // Create top level options store for Y axis
     const yAxisQueryOptionsStore = derived(
-      [timeAndFilterStore, visibleStore],
-      ([$timeAndFilterStore, $visible]) => {
-        const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
+      [filterStore, timeControlStore, visibleStore],
+      ([$filterStore, $timeControlStore, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, hasTimeSeries } = $timeControlStore;
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange) &&
+          canQueryWithTimeRange(hasTimeSeries, apiTimeRange) &&
           !!config.y?.field &&
           config?.y?.type !== "temporal" &&
           !Array.isArray(config.y?.sort);
 
-        const yWhere = getFilterWithNullHandling(where, config.y);
+        const yWhere = getFilterWithNullHandling(expr, config.y);
 
         let limit = this.defaultNominalLimit.toString();
         if (config.y?.limit) {
@@ -166,7 +170,7 @@ export class HeatmapChartProvider {
             dimensions: [{ name: config.y?.field }],
             sort: yAxisSort ? [yAxisSort] : undefined,
             where: yWhere,
-            timeRange,
+            timeRange: apiTimeRange,
             limit,
           },
           {
@@ -182,16 +186,22 @@ export class HeatmapChartProvider {
     const yAxisQuery = createQuery(yAxisQueryOptionsStore);
 
     const queryOptionsStore = derived(
-      [timeAndFilterStore, xAxisQuery, yAxisQuery, visibleStore],
-      ([$timeAndFilterStore, $xAxisQuery, $yAxisQuery, $visible]) => {
-        const { timeRange, where, timeGrain, hasTimeSeries } =
-          $timeAndFilterStore;
+      [filterStore, timeControlStore, xAxisQuery, yAxisQuery, visibleStore],
+      ([
+        $filterStore,
+        $timeControlStore,
+        $xAxisQuery,
+        $yAxisQuery,
+        $visible,
+      ]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, timeGrain, hasTimeSeries } = $timeControlStore;
         const xTopNData = $xAxisQuery?.data?.data;
         const yTopNData = $yAxisQuery?.data?.data;
 
         const enabled =
           $visible &&
-          canQueryWithTimeRange(hasTimeSeries, timeRange) &&
+          canQueryWithTimeRange(hasTimeSeries, apiTimeRange) &&
           (config.x?.type === "nominal" && !Array.isArray(config.x?.sort)
             ? xTopNData !== undefined
             : true) &&
@@ -199,7 +209,7 @@ export class HeatmapChartProvider {
             ? yTopNData !== undefined
             : true);
 
-        let combinedWhere: V1Expression | undefined = where;
+        let combinedWhere: V1Expression | undefined = expr;
 
         let includedXValues: string[] = [];
         let includedYValues: string[] = [];
@@ -274,7 +284,7 @@ export class HeatmapChartProvider {
                 ? [{ name: config.x?.field, desc: true }]
                 : undefined,
             where: combinedWhere,
-            timeRange,
+            timeRange: apiTimeRange,
             limit: "5000", // Higher limit for heatmap to show more data points
           },
           {
diff --git a/web-common/src/features/components/charts/scatter/ScatterPlotChartProvider.ts b/web-common/src/features/components/charts/scatter/ScatterPlotChartProvider.ts
index 70380fab3e48..080b7891e39b 100644
--- a/web-common/src/features/components/charts/scatter/ScatterPlotChartProvider.ts
+++ b/web-common/src/features/components/charts/scatter/ScatterPlotChartProvider.ts
@@ -8,7 +8,6 @@ import type {
 import { isFieldConfig } from "@rilldata/web-common/features/components/charts/util";
 import { mergeFilters } from "@rilldata/web-common/features/dashboards/pivot/pivot-merge-filters";
 import { createInExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import type {
   V1Expression,
   V1MetricsViewAggregationDimension,
@@ -29,6 +28,8 @@ import {
   canQueryWithTimeRange,
   getFilterWithNullHandling,
 } from "../query-util";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 import { withEphemeralMeasures } from "../ephemeral-measures";
 
 export type ScatterPlotChartSpec = {
@@ -59,7 +60,8 @@ export class ScatterPlotChartProvider {
 
   createChartDataQuery(
     client: RuntimeClient,
-    timeAndFilterStore: Readable<TimeAndFilterStore>,
+    filterStore: Readable<ExpressionState>,
+    timeControlStore: Readable<TimeControlState>,
     visible?: Readable<boolean>,
   ): ChartDataQuery {
     const visibleStore = visible ?? readable(true);
@@ -108,14 +110,15 @@ export class ScatterPlotChartProvider {
       config.x?.type === "temporal" || config.y?.type === "temporal";
 
     const topNColorQueryOptionsStore = derived(
-      [timeAndFilterStore, visibleStore],
-      ([$timeAndFilterStore, $visible]) => {
-        const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
+      [filterStore, timeControlStore, visibleStore],
+      ([$filterStore, $timeControlStore, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, hasTimeSeries } = $timeControlStore;
         const enabled =
           $visible &&
           canQueryWithTimeRange(
             hasTimeSeries,
-            timeRange,
+            apiTimeRange,
             hasTemporalDimension,
           ) &&
           hasColorDimension &&
@@ -123,7 +126,7 @@ export class ScatterPlotChartProvider {
           !!colorLimit;
 
         const topNWhere = getFilterWithNullHandling(
-          where,
+          expr,
           isFieldConfig(config.color) ? config.color : undefined,
         );
 
@@ -137,7 +140,7 @@ export class ScatterPlotChartProvider {
               ? [{ name: config.y.field, desc: true }]
               : undefined,
             where: topNWhere,
-            timeRange,
+            timeRange: apiTimeRange,
             limit: colorLimit?.toString(),
           },
           {
@@ -152,16 +155,16 @@ export class ScatterPlotChartProvider {
     const topNColorQuery = createQuery(topNColorQueryOptionsStore);
 
     const queryOptionsStore = derived(
-      [timeAndFilterStore, topNColorQuery, visibleStore],
-      ([$timeAndFilterStore, $topNColorQuery, $visible]) => {
-        const { timeRange, where, timeGrain, hasTimeSeries } =
-          $timeAndFilterStore;
+      [filterStore, timeControlStore, topNColorQuery, visibleStore],
+      ([$filterStore, $timeControlStore, $topNColorQuery, $visible]) => {
+        const { expr } = $filterStore;
+        const { apiTimeRange, timeGrain, hasTimeSeries } = $timeControlStore;
         const topNColorData = $topNColorQuery?.data?.data;
         const enabled =
           $visible &&
           canQueryWithTimeRange(
             hasTimeSeries,
-            timeRange,
+            apiTimeRange,
             hasTemporalDimension,
           ) &&
           !!measures?.length &&
@@ -171,7 +174,7 @@ export class ScatterPlotChartProvider {
             : true);
 
         let combinedWhere: V1Expression | undefined = getFilterWithNullHandling(
-          where,
+          expr,
           config.dimension,
         );
 
@@ -209,7 +212,7 @@ export class ScatterPlotChartProvider {
             measures,
             dimensions: finalDimensions,
             where: combinedWhere,
-            timeRange,
+            timeRange: apiTimeRange,
             fillMissing: hasTemporalDimension,
             limit: "9999",
           },
diff --git a/web-common/src/features/dashboards/aggregation-request-utils.ts b/web-common/src/features/dashboards/aggregation-request-utils.ts
index 42db0c14e6d1..8bac9b37c62b 100644
--- a/web-common/src/features/dashboards/aggregation-request-utils.ts
+++ b/web-common/src/features/dashboards/aggregation-request-utils.ts
@@ -7,10 +7,9 @@ import { getAggregationDimensionFromFieldName } from "@rilldata/web-common/featu
 import { getComparisonRequestMeasures } from "@rilldata/web-common/features/dashboards/dashboard-utils.ts";
 import { MeasureModifierSuffixRegex } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-entry.ts";
 import { ComparisonModifierSuffixRegex } from "@rilldata/web-common/features/dashboards/pivot/types.ts";
-import type { TimeControlState } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
 import {
-  mapSelectedComparisonTimeRangeToV1TimeRange,
-  mapSelectedTimeRangeToV1TimeRange,
+  mapTimeManagerComparisonRangeToV1TimeRange,
+  mapTimeManagerRangeToV1TimeRange,
 } from "@rilldata/web-common/features/dashboards/time-controls/time-range-mappers.ts";
 import type {
   V1ExploreSpec,
@@ -19,6 +18,7 @@ import type {
   V1MetricsViewAggregationRequest,
   V1MetricsViewAggregationSort,
 } from "@rilldata/web-common/runtime-client";
+import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export type AggregationRequestUpdater = (
   aggregationRequest: V1MetricsViewAggregationRequest,
@@ -36,18 +36,12 @@ export function buildAggregationRequest(
 }
 
 export const aggregationRequestWithTimeRange = (
-  exploreSpec: V1ExploreSpec,
-  timeControlArgs: TimeControlState,
+  timeFilterManager: TimeFilterManager,
 ) => {
   return (aggregationRequest: V1MetricsViewAggregationRequest) => {
-    const timeRange = mapSelectedTimeRangeToV1TimeRange(
-      timeControlArgs.selectedTimeRange,
-      timeControlArgs.selectedTimezone,
-      exploreSpec,
-    );
-    const comparisonTimeRange = mapSelectedComparisonTimeRangeToV1TimeRange(
-      timeControlArgs.selectedComparisonTimeRange,
-      timeControlArgs.showTimeComparison,
+    const timeRange = mapTimeManagerRangeToV1TimeRange(timeFilterManager);
+    const comparisonTimeRange = mapTimeManagerComparisonRangeToV1TimeRange(
+      timeFilterManager,
       timeRange,
     );
     return {
diff --git a/web-common/src/features/dashboards/dashboard-fetch-mocks.ts b/web-common/src/features/dashboards/dashboard-fetch-mocks.ts
index 59481ec2c06b..ee5972b78972 100644
--- a/web-common/src/features/dashboards/dashboard-fetch-mocks.ts
+++ b/web-common/src/features/dashboards/dashboard-fetch-mocks.ts
@@ -7,6 +7,7 @@ import type {
   V1MetricsViewAggregationResponse,
   V1MetricsViewSpec,
   V1ResolveCanvasResponse,
+  V1ResolvedTimeRange,
   V1Resource,
   V1TimeRangeSummary,
 } from "@rilldata/web-common/runtime-client";
@@ -163,10 +164,25 @@ export class DashboardFetchMocks {
   ) {
     this.responses.set(
       `queries__metrics-views__time-ranges__${metricsViewName}`,
-      {
-        timeRanges: [{ start, end }],
-        resolvedTimeRanges: [{ expression: "PT6H", start, end }],
-      },
+      [{ expression: "PT6H", start, end }],
+    );
+  }
+
+  /**
+   * Mocks the intervals MetricsViewTimeRanges resolves rilltime expressions to, keyed by expression.
+   * The runtime does the resolving, so a test states the interval it expects for every expression
+   * its interactions can produce.
+   */
+  public mockResolvedRillTimes(
+    metricsViewName: string,
+    resolvedRillTimes: Record<string, V1ResolvedTimeRange>,
+  ) {
+    this.responses.set(
+      `queries__metrics-views__time-ranges__${metricsViewName}`,
+      Object.entries(resolvedRillTimes).map(([expression, tr]) => ({
+        expression,
+        ...tr,
+      })),
     );
   }
 
@@ -281,6 +297,17 @@ export class DashboardFetchMocks {
       } else {
         responseData = stored;
       }
+    } else if (
+      service === "QueryService" &&
+      method === "MetricsViewTimeRanges"
+    ) {
+      const resolvedTimeRanges: V1ResolvedTimeRange[] =
+        this.responses.get(
+          `queries__metrics-views__time-ranges__${parsed.metricsViewName}`,
+        ) ?? {};
+      responseData = {
+        resolvedTimeRanges,
+      };
     } else if (
       service === "QueryService" &&
       method === "MetricsViewAggregation"
diff --git a/web-common/src/features/dashboards/filters/ExpressionFilterManager.svelte.ts b/web-common/src/features/dashboards/filters/ExpressionFilterManager.svelte.ts
index f0ba78866877..8de1c59f99ee 100644
--- a/web-common/src/features/dashboards/filters/ExpressionFilterManager.svelte.ts
+++ b/web-common/src/features/dashboards/filters/ExpressionFilterManager.svelte.ts
@@ -25,6 +25,11 @@ import { getSortFilterManagers } from "@rilldata/web-common/features/dashboards/
 import { expandCompressedParams } from "@rilldata/web-common/features/dashboards/url-state/compression.ts";
 import type { UrlParamsStore } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
 
+export type ExpressionState = {
+  expr: V1Expression | undefined;
+  dimensionOnlyExpr: V1Expression | undefined;
+};
+
 /**
  * Filter managers for the chips in a filter bar.
  *
@@ -319,7 +324,6 @@ export class ExpressionFilterManager implements UrlParamsStore {
   }
 
   public getExprStoreForFirstMetricsView() {
-    // The name is read inside the store, since the metrics views only arrive once the specs load.
     return toStore(() => {
       const mvName = this.metricsViewsProvider.metricsViewNames[0];
       return {
@@ -330,10 +334,13 @@ export class ExpressionFilterManager implements UrlParamsStore {
   }
 
   public getExprStoreForMetricsView(mvName: string) {
-    return toStore(() => ({
-      expr: this.topLevelJoiner.expr[mvName],
-      dimensionOnlyExpr: this.topLevelJoiner.dimensionOnlyExpr[mvName],
-    }));
+    return toStore(
+      () =>
+        <ExpressionState>{
+          expr: this.topLevelJoiner.expr[mvName],
+          dimensionOnlyExpr: this.topLevelJoiner.dimensionOnlyExpr[mvName],
+        },
+    );
   }
 }
 
diff --git a/web-common/src/features/dashboards/filters/ExpressionFilters.svelte b/web-common/src/features/dashboards/filters/ExpressionFilters.svelte
index fb9041af026a..1543e25a0209 100644
--- a/web-common/src/features/dashboards/filters/ExpressionFilters.svelte
+++ b/web-common/src/features/dashboards/filters/ExpressionFilters.svelte
@@ -7,11 +7,11 @@
   import type { ExpressionFilterManager } from "./ExpressionFilterManager.svelte.ts";
   import AddExpressionFilterButton from "@rilldata/web-common/features/dashboards/filters/AddExpressionFilterButton.svelte";
   import AdvancedFilter from "@rilldata/web-common/features/dashboards/filters/AdvancedFilter.svelte";
+  import type { DashboardConfigProvider } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
 
   let {
     expressionFilterManager,
-    filteredMeasures,
-    filteredDimensions,
+    dashboardConfigProvider,
 
     timeEnd,
     timeStart,
@@ -21,10 +21,7 @@
     isUrlTooLongAfterInListFilter,
   }: {
     expressionFilterManager: ExpressionFilterManager;
-    // Explore spec can restrict the available dimension/measure vs metrics views.
-    // This is passed in explore context.
-    filteredDimensions?: string[];
-    filteredMeasures?: string[];
+    dashboardConfigProvider: DashboardConfigProvider;
 
     timeStart: string | undefined;
     timeEnd: string | undefined;
@@ -37,15 +34,17 @@
   /** the height of a row of chips */
   const ROW_HEIGHT = "26px";
 
-  let metricsViewsProvider = $derived(
-    expressionFilterManager.metricsViewsProvider,
+  let { metricsViewsProvider, yamlConfigProvider } = $derived(
+    dashboardConfigProvider,
   );
-  let yamlConfigProvider = $derived(expressionFilterManager.yamlConfigProvider);
+
+  let { restrictedMeasures, restrictedDimensions } =
+    $derived(yamlConfigProvider);
 
   let allDimensions = $derived(
-    filteredDimensions
+    restrictedDimensions
       ? metricsViewsProvider.dimensions.filter((d) =>
-          filteredDimensions.includes(d.name!),
+          restrictedDimensions.includes(d.name!),
         )
       : metricsViewsProvider.dimensions,
   );
@@ -65,18 +64,18 @@
 
   let excludedDimensions = $derived(
     Object.fromEntries(
-      filteredDimensions
+      restrictedDimensions
         ? metricsViewsProvider.dimensions
-            .filter((d) => !filteredDimensions.includes(d.name!))
+            .filter((d) => !restrictedDimensions.includes(d.name!))
             .map((m) => [m.name!, true])
         : [],
     ),
   );
   let excludedMeasures = $derived(
     Object.fromEntries(
-      filteredMeasures
+      restrictedMeasures
         ? metricsViewsProvider.measures
-            .filter((m) => !filteredMeasures.includes(m.name!))
+            .filter((m) => !restrictedMeasures.includes(m.name!))
             .map((m) => [m.name!, true])
         : [],
     ),
diff --git a/web-common/src/features/dashboards/filters/Filters.svelte b/web-common/src/features/dashboards/filters/Filters.svelte
index 9393813a10e0..ed5a41cff930 100644
--- a/web-common/src/features/dashboards/filters/Filters.svelte
+++ b/web-common/src/features/dashboards/filters/Filters.svelte
@@ -1,374 +1,53 @@
 <script lang="ts">
-  import Calendar from "@rilldata/web-common/components/icons/Calendar.svelte";
-  import { useMetricsViewTimeRange } from "@rilldata/web-common/features/dashboards/selectors.ts";
   import { DashboardStateSync } from "@rilldata/web-common/features/dashboards/state-managers/loaders/DashboardStateSync";
   import { isUrlTooLong } from "@rilldata/web-common/features/dashboards/url-state/url-length-limits";
-  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient.ts";
-  import type { TimeRange } from "@rilldata/web-common/lib/time/types";
-  import {
-    TimeComparisonOption,
-    TimeRangePreset,
-    type DashboardTimeControls,
-  } from "@rilldata/web-common/lib/time/types";
-  import {
-    V1TimeGrain,
-    type V1ExploreTimeRange,
-  } from "@rilldata/web-common/runtime-client";
-  import { invalidationForMetricsViewData } from "@rilldata/web-common/runtime-client/invalidation.ts";
-  import { DateTime, Duration, Interval } from "luxon";
   import { getStateManagers } from "../state-managers/state-managers";
-  import {
-    metricsExplorerStore,
-    useExploreState,
-  } from "../stores/dashboard-stores";
-  import ComparisonPill from "../time-controls/comparison-pill/ComparisonPill.svelte";
-  import {
-    CUSTOM_TIME_RANGE_ALIAS,
-    deriveInterval,
-  } from "../time-controls/new-time-controls";
-  import { allowedGrainsForInterval } from "@rilldata/web-common/lib/time/new-grains";
-  import SuperPill from "../time-controls/super-pill/SuperPill.svelte";
-  import { useTimeControlStore } from "../time-controls/time-control-store";
-  import { featureFlags } from "../../feature-flags";
-  import Timestamp from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components/Timestamp.svelte";
-  import { getDefaultTimeGrain } from "@rilldata/web-common/lib/time/grains";
-  import * as Tooltip from "@rilldata/web-common/components/tooltip-v2";
-  import Metadata from "../time-controls/super-pill/components/Metadata.svelte";
-  import { getValidComparisonOption } from "../time-controls/time-range-store";
-  import { getPinnedTimeZones } from "../url-state/getDefaultExplorePreset";
-  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
-  import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
-  import ExpressionFilters from "./ExpressionFilters.svelte";
+  import { metricsExplorerStore } from "../stores/dashboard-stores";
+  import ExpressionFilters from "@rilldata/web-common/features/dashboards/filters/ExpressionFilters.svelte";
   import { createAndExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils.ts";
   import { untrack } from "svelte";
   import type { ExploreState } from "@rilldata/web-common/features/dashboards/stores/explore-state";
   import { syncStoreWithSource } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
-
-  const { rillTime } = featureFlags;
-
-  let {
-    timeRanges,
-    metricsViewName,
-    hasTimeSeries,
-  }: {
-    timeRanges: V1ExploreTimeRange[];
-    metricsViewName: string;
-    hasTimeSeries: boolean;
-  } = $props();
+  import TimeFilters from "@rilldata/web-common/features/dashboards/time-controls/TimeFilters.svelte";
 
   const StateManagers = getStateManagers();
   const {
     exploreName,
-    validSpecStore,
-    selectors: {
-      dimensions: { timeDimensions },
-      pivot: { showPivot },
-      charts: { canPanLeft, canPanRight, getNewPanRange },
-    },
     dashboardStore,
+    dashboardConfigProvider,
     expressionFilterManager,
+    timeFilterManager,
   } = StateManagers;
 
+  let { metricsViewsProvider } = $derived(dashboardConfigProvider);
+
   syncStoreWithSource(
     expressionFilterManager,
     syncExpressionFilters,
-    () => expressionFilterManager.metricsViewsProvider.ready,
+    () => metricsViewsProvider.ready,
     undefined,
     // URL sync is managed by DashboardStateSync
     true,
   );
 
-  const timeControlsStore = useTimeControlStore(StateManagers);
-
-  const dashboardStateSync = DashboardStateSync.getFromContext();
-
-  let showDefaultItem = false;
-
-  const client = useRuntimeClient();
-
-  let timeRangeQuery = $derived(
-    useMetricsViewTimeRange(client, metricsViewName),
-  );
-
-  let timeRangeSummary = $derived($timeRangeQuery.data?.timeRangeSummary);
-
-  let watermark = $derived(timeRangeSummary?.watermark);
-
-  let maxQueryTimeRangeMillis = $derived(
-    Number($timeRangeQuery.data?.maxQueryTimeRangeMillis ?? 0),
-  );
-  let maxQueryTimeRange = $derived(
-    maxQueryTimeRangeMillis > 0
-      ? Duration.fromMillis(maxQueryTimeRangeMillis)
-      : undefined,
+  syncStoreWithSource(
+    timeFilterManager,
+    syncTimeFilters,
+    () => metricsViewsProvider.ready && timeFilterManager.ready,
+    undefined,
+    // URL sync is managed by DashboardStateSync
+    true,
   );
 
   let {
-    selectedTimeRange,
-    allTimeRange,
-    showTimeComparison,
-    selectedComparisonTimeRange,
-    minTimeGrain,
+    hasTimeSeries,
     timeStart,
     timeEnd,
+    timeDimension,
     ready: timeControlsReady,
-  } = $derived($timeControlsStore);
-
-  let exploreSpec = $derived($validSpecStore.data?.explore ?? {});
-  let metricsViewSpec = $derived($validSpecStore.data?.metricsView ?? {});
-
-  let exploreState = $derived(useExploreState($exploreName));
-  let activeTimeZone = $derived($exploreState?.selectedTimezone);
-
-  let selectedRangeAlias = $derived(
-    selectedTimeRange?.name === TimeRangePreset.CUSTOM
-      ? `${selectedTimeRange.start.toISOString()},${selectedTimeRange.end.toISOString()}`
-      : selectedTimeRange?.name,
-  );
-
-  let activeTimeGrain = $derived(selectedTimeRange?.interval);
-  let defaultTimeRange = $derived(exploreSpec.defaultPreset?.timeRange);
+  } = $derived(timeFilterManager);
 
-  let { selectedTimeDimension } = $derived($dashboardStore);
-
-  let availableTimeZones = $derived(getPinnedTimeZones(exploreSpec));
-
-  let allTimeRangeInterval = $derived(
-    allTimeRange
-      ? Interval.fromDateTimes(allTimeRange.start, allTimeRange.end)
-      : Interval.invalid("Invalid interval"),
-  );
-
-  let maybeInterval = $derived(
-    selectedTimeRange
-      ? Interval.fromDateTimes(
-          DateTime.fromJSDate(selectedTimeRange.start).setZone(activeTimeZone),
-          DateTime.fromJSDate(selectedTimeRange.end).setZone(activeTimeZone),
-        )
-      : allTimeRange
-        ? Interval.fromDateTimes(allTimeRange.start, allTimeRange.end)
-        : undefined,
-  );
-
-  let interval = $derived(maybeInterval?.isValid ? maybeInterval : undefined);
-
-  let baseTimeRange = $derived(
-    selectedTimeRange?.start &&
-      selectedTimeRange?.end && {
-        name: selectedTimeRange?.name,
-        start: selectedTimeRange.start,
-        end: selectedTimeRange.end,
-      },
-  );
-
-  let primaryTimeDimension = $derived(metricsViewSpec.timeDimension);
-
-  let timeDimensionOptions = $derived(
-    $timeDimensions.map((timeDim) => {
-      return {
-        value: timeDim.name!,
-        label: timeDim.displayName || timeDim.name!,
-        description: timeDim.description,
-      };
-    }),
-  );
-
-  let maybeMinDate = $derived(
-    allTimeRange?.start ? DateTime.fromJSDate(allTimeRange.start) : undefined,
-  );
-  let maybeMaxDate = $derived(
-    allTimeRange?.end ? DateTime.fromJSDate(allTimeRange.end) : undefined,
-  );
-
-  let minDate = $derived(maybeMinDate?.isValid ? maybeMinDate : undefined);
-  let maxDate = $derived(maybeMaxDate?.isValid ? maybeMaxDate : undefined);
-
-  async function onTimeDimensionSelect(column: string) {
-    // Capture time range name before any state changes
-    const timeRangeName = selectedTimeRange?.name;
-
-    await queryClient.cancelQueries({
-      predicate: (query) =>
-        invalidationForMetricsViewData(query, metricsViewName),
-    });
-
-    metricsExplorerStore.setTimeDimension($exploreName, column);
-
-    // Re-resolve the time range with the new time dimension
-    if (!timeRangeName) return;
-
-    const { interval, grain } = await deriveInterval(
-      timeRangeName,
-      client,
-      metricsViewName,
-      activeTimeZone,
-      column,
-    );
-
-    if (interval.isValid) {
-      const validInterval = interval as Interval<true>;
-      const baseTimeRange: TimeRange = {
-        name: timeRangeName,
-        start: validInterval.start.toJSDate(),
-        end: validInterval.end.toJSDate(),
-      };
-
-      selectRange(baseTimeRange, grain);
-    }
-  }
-
-  function onPan(direction: "left" | "right") {
-    const panRange = $getNewPanRange(direction);
-    if (!panRange) return;
-    const { start, end } = panRange;
-
-    const timeRange = {
-      name: CUSTOM_TIME_RANGE_ALIAS,
-      start: start,
-      end: end,
-    };
-
-    const comparisonTimeRange = {
-      name: TimeComparisonOption.CONTIGUOUS,
-    } as DashboardTimeControls; // FIXME wrong typecasting across application
-
-    if (!activeTimeGrain) return;
-    metricsExplorerStore.selectTimeRange(
-      $exploreName,
-      timeRange as TimeRange,
-      activeTimeGrain,
-      comparisonTimeRange,
-      metricsViewSpec,
-    );
-  }
-
-  async function onSelectRange(alias: string, tz = activeTimeZone) {
-    // If we don't have a valid time range, early return
-    if (!allTimeRange?.end) return;
-
-    // This should be returned by the API, but it is not yet implemented
-    const includesTimeZoneOffset = alias.includes("tz");
-
-    if (includesTimeZoneOffset) {
-      const timeZone = alias.match(/tz (.*)/)?.[1];
-
-      if (timeZone) metricsExplorerStore.setTimeZone($exploreName, timeZone);
-    }
-
-    await queryClient.cancelQueries({
-      predicate: (query) =>
-        invalidationForMetricsViewData(query, metricsViewName),
-    });
-
-    const { interval, grain } = await deriveInterval(
-      alias,
-      client,
-      metricsViewName,
-      tz,
-      selectedTimeDimension,
-    );
-
-    const allowedGrains = allowedGrainsForInterval(
-      interval,
-      minTimeGrain ?? V1TimeGrain.TIME_GRAIN_MINUTE,
-    );
-
-    const finalGrain =
-      activeTimeGrain && allowedGrains.includes(activeTimeGrain)
-        ? activeTimeGrain
-        : grain && allowedGrains.includes(grain)
-          ? grain
-          : allowedGrains[0];
-
-    if (interval.isValid) {
-      const validInterval = interval as Interval<true>;
-      const baseTimeRange: TimeRange = {
-        name: alias,
-        start: validInterval.start.toJSDate(),
-        end: validInterval.end.toJSDate(),
-      };
-
-      selectRange(baseTimeRange, finalGrain);
-    }
-  }
-
-  function makeTimeSeriesTimeRangeAndUpdateAppState(
-    timeRange: TimeRange,
-    timeGrain: V1TimeGrain,
-    /** we should only reset the comparison range when the user has explicitly chosen a new
-     * time range. Otherwise, the current comparison state should continue to be the
-     * source of truth.
-     */
-    comparisonTimeRange: DashboardTimeControls | undefined,
-  ) {
-    metricsExplorerStore.selectTimeRange(
-      $exploreName,
-      timeRange,
-      timeGrain,
-      comparisonTimeRange,
-      metricsViewSpec,
-    );
-  }
-
-  function selectRange(range: TimeRange, grain?: V1TimeGrain) {
-    const timeGrain =
-      grain ?? getDefaultTimeGrain(range.start, range.end).grain;
-
-    // Get valid option for the new time range
-    const validComparison =
-      allTimeRange &&
-      getValidComparisonOption(
-        exploreSpec.timeRanges,
-        range,
-        $exploreState.selectedComparisonTimeRange?.name as
-          | TimeComparisonOption
-          | undefined,
-        allTimeRange,
-
-        activeTimeZone,
-      );
-
-    makeTimeSeriesTimeRangeAndUpdateAppState(range, timeGrain, {
-      name: validComparison,
-    } as DashboardTimeControls);
-  }
-
-  async function onSelectTimeZone(timeZone: string) {
-    if (!interval?.isValid) return;
-
-    if (selectedRangeAlias === TimeRangePreset.CUSTOM) {
-      selectRange({
-        name: TimeRangePreset.CUSTOM,
-        start: interval.start
-          ?.setZone(timeZone, { keepLocalTime: true })
-          .toJSDate(),
-        end: interval.end
-          ?.setZone(timeZone, { keepLocalTime: true })
-          .toJSDate(),
-      });
-    } else if (selectedRangeAlias) {
-      // Trigger range selection so that MetricsViewTimeRanges is called with the new time zone
-      await onSelectRange(selectedRangeAlias, timeZone);
-    }
-    metricsExplorerStore.setTimeZone($exploreName, timeZone);
-  }
-
-  let usingRillTime = $derived(
-    !selectedRangeAlias?.startsWith("P") &&
-      !selectedRangeAlias?.startsWith("rill-"),
-  );
-
-  function onTimeGrainSelect(timeGrain: V1TimeGrain) {
-    if (usingRillTime && selectedRangeAlias) {
-      metricsExplorerStore.setTimeGrain($exploreName, timeGrain);
-    } else if (baseTimeRange) {
-      makeTimeSeriesTimeRangeAndUpdateAppState(
-        baseTimeRange,
-        timeGrain,
-        $dashboardStore?.selectedComparisonTimeRange,
-      );
-    }
-  }
+  const dashboardStateSync = DashboardStateSync.getFromContext();
 
   function isUrlTooLongAfterInListFilter(
     dimensionName: string,
@@ -408,100 +87,35 @@
     }
     return Promise.resolve();
   }
+
+  function syncTimeFilters() {
+    if (!timeFilterManager.updating) {
+      metricsExplorerStore.syncTimeFilters($exploreName, timeFilterManager);
+    }
+    return Promise.resolve();
+  }
 </script>
 
 <div class="flex flex-col gap-y-2 size-full">
   {#if hasTimeSeries}
-    <div class="flex flex-row flex-wrap gap-x-2 gap-y-1.5 items-center">
-      <Tooltip.Root delayDuration={0}>
-        <Tooltip.Trigger class="cursor-default text-fg-secondary">
-          <Calendar size="16px" />
-        </Tooltip.Trigger>
-        <Tooltip.Content side="bottom" sideOffset={10}>
-          <Metadata
-            timeZone={activeTimeZone}
-            timeStart={allTimeRange?.start}
-            timeEnd={allTimeRange?.end}
-          />
-        </Tooltip.Content>
-      </Tooltip.Root>
-      {#if allTimeRange?.start && allTimeRange?.end}
-        <SuperPill
-          {minDate}
-          {maxDate}
-          {selectedRangeAlias}
-          showPivot={$showPivot}
-          {minTimeGrain}
-          {defaultTimeRange}
-          {availableTimeZones}
-          {timeRanges}
-          complete={false}
-          {interval}
-          context={$exploreName}
-          {timeStart}
-          {timeEnd}
-          lockTimeZone={exploreSpec.lockTimeZone}
-          allowCustomTimeRange={exploreSpec.allowCustomTimeRange}
-          {maxQueryTimeRange}
-          {activeTimeGrain}
-          {activeTimeZone}
-          canPanLeft={$canPanLeft}
-          canPanRight={$canPanRight}
-          {primaryTimeDimension}
-          {selectedTimeDimension}
-          {showDefaultItem}
-          timeDimensions={timeDimensionOptions}
-          watermark={watermark ? DateTime.fromISO(watermark) : undefined}
-          applyRange={selectRange}
-          {onTimeDimensionSelect}
-          {onSelectRange}
-          {onTimeGrainSelect}
-          {onSelectTimeZone}
-          {onPan}
-        />
-        <ComparisonPill
-          {minTimeGrain}
-          {allTimeRange}
-          {selectedTimeRange}
-          showTimeComparison={!!showTimeComparison}
-          {selectedComparisonTimeRange}
-        />
-      {/if}
-
-      {#if !$rillTime && allTimeRangeInterval?.end?.isValid}
-        <Tooltip.Root delayDuration={0}>
-          <Tooltip.Trigger>
-            <span class="text-fg-secondary italic">
-              {m.dashboard_as_of()}
-              <Timestamp
-                id="filter-bar-as-of"
-                italic
-                suppress
-                showDate={false}
-                date={allTimeRangeInterval.end}
-                zone={activeTimeZone}
-              />
-            </span>
-          </Tooltip.Trigger>
-          <Tooltip.Content side="bottom" sideOffset={10}>
-            <Metadata
-              timeZone={activeTimeZone}
-              timeStart={allTimeRange?.start}
-              timeEnd={allTimeRange?.end}
-            />
-          </Tooltip.Content>
-        </Tooltip.Root>
-      {/if}
-    </div>
+    <TimeFilters
+      {timeFilterManager}
+      {dashboardConfigProvider}
+      config={{
+        showTimeDimensionSelector: true,
+        showFullRange: true,
+        showWatermark: true,
+      }}
+      context="explore"
+    />
   {/if}
 
   <ExpressionFilters
     {expressionFilterManager}
-    filteredDimensions={exploreSpec?.dimensions}
-    filteredMeasures={exploreSpec?.measures}
+    {dashboardConfigProvider}
     {timeStart}
     {timeEnd}
-    timeDimension={$dashboardStore.selectedTimeDimension}
+    {timeDimension}
     {timeControlsReady}
     {isUrlTooLongAfterInListFilter}
   />
diff --git a/web-common/src/features/dashboards/filters/ReadonlyExpressionFilters.svelte b/web-common/src/features/dashboards/filters/ReadonlyExpressionFilters.svelte
index 50b020f0d9fb..0a3ef6f9e238 100644
--- a/web-common/src/features/dashboards/filters/ReadonlyExpressionFilters.svelte
+++ b/web-common/src/features/dashboards/filters/ReadonlyExpressionFilters.svelte
@@ -1,28 +1,25 @@
 <script lang="ts">
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
   import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
-  import type { V1TimeRange } from "@rilldata/web-common/runtime-client";
-  import TimeRangeReadOnly from "@rilldata/web-common/features/dashboards/filters/TimeRangeReadOnly.svelte";
   import ReadonlyDimensionFilter from "@rilldata/web-common/features/dashboards/filters/dimension-filters/ReadonlyDimensionFilter.svelte";
   import ReadonlyMeasureFilter from "@rilldata/web-common/features/dashboards/filters/measure-filters/ReadonlyMeasureFilter.svelte";
   import { flip } from "svelte/animate";
+  import { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+  import ReadonlyTimeFilters from "@rilldata/web-common/features/dashboards/time-controls/ReadonlyTimeFilters.svelte";
 
   let {
     expressionFilterManager,
-    displayTimeRange,
-    displayComparisonTimeRange,
-    queryTimeStart = undefined,
-    queryTimeEnd = undefined,
+    timeFilterManager,
+    hideTimePills = false,
     hasBoldTimeRange = true,
     chipLayout = "wrap",
     ariaLabel = m.dashboard_readonly_filter_chips_aria(),
     showPinned = false,
   }: {
     expressionFilterManager: ExpressionFilterManager;
-    displayTimeRange?: V1TimeRange | undefined;
-    displayComparisonTimeRange?: V1TimeRange | undefined;
-    queryTimeStart?: string | undefined;
-    queryTimeEnd?: string | undefined;
+    timeFilterManager?: TimeFilterManager;
+    // Additional control to pass timeFilterManager but not show the pills
+    hideTimePills?: boolean;
     hasBoldTimeRange?: boolean;
     chipLayout?: "wrap" | "scroll" | "col";
     ariaLabel?: string | undefined;
@@ -62,12 +59,8 @@
   bind:this={scrollContainer}
   onwheel={handleWheel}
 >
-  {#if displayTimeRange}
-    <TimeRangeReadOnly
-      timeRange={displayTimeRange}
-      comparisonTimeRange={displayComparisonTimeRange}
-      {hasBoldTimeRange}
-    />
+  {#if timeFilterManager && !hideTimePills}
+    <ReadonlyTimeFilters {timeFilterManager} {hasBoldTimeRange} />
   {/if}
 
   {#each nonEmptyDimensionManagers as dimensionManager (dimensionManager.name)}
@@ -76,8 +69,8 @@
         manager={expressionFilterManager}
         {dimensionManager}
         yamlConfigProvider={expressionFilterManager.yamlConfigProvider}
-        timeStart={queryTimeStart}
-        timeEnd={queryTimeEnd}
+        timeStart={timeFilterManager?.timeStart}
+        timeEnd={timeFilterManager?.timeEnd}
         {showPinned}
       />
     </div>
diff --git a/web-common/src/features/dashboards/filters/test/ExploreExpressionFiltersTest.svelte b/web-common/src/features/dashboards/filters/test/ExploreExpressionFiltersTest.svelte
index 508c8ebb1ca8..126e3c27e59c 100644
--- a/web-common/src/features/dashboards/filters/test/ExploreExpressionFiltersTest.svelte
+++ b/web-common/src/features/dashboards/filters/test/ExploreExpressionFiltersTest.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as Tooltip from "@rilldata/web-common/components/tooltip-v2";
   import Filters from "@rilldata/web-common/features/dashboards/filters/Filters.svelte";
   import DashboardStateManager from "@rilldata/web-common/features/dashboards/state-managers/loaders/DashboardStateManager.svelte";
   import StateManagersProvider from "@rilldata/web-common/features/dashboards/state-managers/StateManagersProvider.svelte";
@@ -7,18 +8,17 @@
   /**
    * Test component that renders the filter bar the way the explore dashboard does, so that tests
    * can drive filters through the UI and assert on the explore state and the url they produce.
+   *
+   * `Tooltip.Provider` stands in for the one the app layout provides, which the time filters need.
    */
   export let exploreName: string;
-  export let hasTimeSeries: boolean = false;
 </script>
 
-<StateManagersProvider metricsViewName={AD_BIDS_METRICS_NAME} {exploreName}>
-  <DashboardStateManager {exploreName}>
-    <Filters
-      timeRanges={[]}
-      metricsViewName={AD_BIDS_METRICS_NAME}
-      {hasTimeSeries}
-    />
-    <div>Dashboard loaded!</div>
-  </DashboardStateManager>
-</StateManagersProvider>
+<Tooltip.Provider>
+  <StateManagersProvider metricsViewName={AD_BIDS_METRICS_NAME} {exploreName}>
+    <DashboardStateManager {exploreName}>
+      <Filters />
+      <div>Dashboard loaded!</div>
+    </DashboardStateManager>
+  </StateManagersProvider>
+</Tooltip.Provider>
diff --git a/web-common/src/features/dashboards/filters/test/StandaloneExpressionFiltersTest.svelte b/web-common/src/features/dashboards/filters/test/StandaloneExpressionFiltersTest.svelte
index ae88990dc4fc..4bcc8f8504e0 100644
--- a/web-common/src/features/dashboards/filters/test/StandaloneExpressionFiltersTest.svelte
+++ b/web-common/src/features/dashboards/filters/test/StandaloneExpressionFiltersTest.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
   import ExpressionFilters from "@rilldata/web-common/features/dashboards/filters/ExpressionFilters.svelte";
-  import { YAMLConfigProvider } from "@rilldata/web-common/features/dashboards/providers/YAMLConfigProvider.svelte.ts";
-  import { MetricsViewsProvider } from "@rilldata/web-common/features/metrics-views/providers/MetricsViewsProvider.svelte.ts";
   import { syncStoreWithSource } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
+  import { DashboardConfigProvider } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
 
   /**
    * Test component that renders the filter bar on its own, the way canvas does: the filter manager
@@ -22,15 +21,17 @@
     ) => void;
   } = $props();
 
-  // The props are fixed for the lifetime of a test, so reading them once at init is enough.
-  // svelte-ignore state_referenced_locally
-  const metricsViewsProvider = new MetricsViewsProvider(
+  const dashboardConfigProvider = new DashboardConfigProvider(
     useRuntimeClient(),
-    metricsViewNames,
   );
+  const { metricsViewsProvider, yamlConfigProvider } = dashboardConfigProvider;
+  // The props are fixed for the lifetime of a test, so setting metricsViewNames once is enough.
+  // svelte-ignore state_referenced_locally
+  metricsViewsProvider.setMetricsViewNames(metricsViewNames);
+
   const expressionFilterManager = new ExpressionFilterManager(
     metricsViewsProvider,
-    new YAMLConfigProvider(),
+    yamlConfigProvider,
   );
   // svelte-ignore state_referenced_locally
   onManagerCreated?.(expressionFilterManager);
@@ -46,6 +47,7 @@
 
 <ExpressionFilters
   {expressionFilterManager}
+  {dashboardConfigProvider}
   timeStart={undefined}
   timeEnd={undefined}
   timeControlsReady
diff --git a/web-common/src/features/dashboards/filters/test/expression-filters-suite.ts b/web-common/src/features/dashboards/filters/test/expression-filters-suite.ts
index 35990d8e07c3..97ec5e7ce34c 100644
--- a/web-common/src/features/dashboards/filters/test/expression-filters-suite.ts
+++ b/web-common/src/features/dashboards/filters/test/expression-filters-suite.ts
@@ -47,8 +47,10 @@ import { screen, waitFor } from "@testing-library/svelte";
 import { describe, expect, it } from "vitest";
 
 /**
- * How a test reads the filter state back. Explore takes it from the dashboard store the filter bar
- * writes to, while a standalone filter bar has the manager itself as the only holder of the state.
+ * How a test reads the filter state back.
+ * Explore takes it from the dashboard store the filter bar writes to,
+ * while a standalone filter bar has the manager itself as the only holder of the state.
+ * TODO: this should not be needed and all variants should read/write from the manager.
  */
 export interface ExpressionFilterManagerAccessor {
   /** The filter as it reached whatever consumes the filter bar. */
@@ -58,8 +60,9 @@ export interface ExpressionFilterManagerAccessor {
 }
 
 /**
- * One way of rendering the filter bar. The tests in this file drive the UI identically for every
- * variant, so a variant only covers where the filter state ends up and how it reaches the url.
+ * One way of rendering the filter bar.
+ * The tests in this file drive the UI identically for every variant,
+ * so a variant only covers where the filter state ends up and how it reaches the url.
  */
 export interface ExpressionFiltersVariant {
   /** Renders the filter bar and resolves once it is ready for interaction. */
@@ -78,8 +81,8 @@ export interface ExpressionFiltersVariant {
 }
 
 /**
- * `getMeasureDisplayName` falls back to the measure expression when the measure has no display
- * name, so the add filter menu and the measure chips read `count(*)` instead of `impressions`.
+ * `getMeasureDisplayName` falls back to the measure expression when the measure has no display name,
+ * so the add filter menu and the measure chips read `count(*)` instead of `impressions`.
  */
 export const AD_BIDS_IMPRESSIONS_MEASURE_LABEL = "count(*)";
 
@@ -87,7 +90,7 @@ export const AD_BIDS_IMPRESSIONS_MEASURE_LABEL = "count(*)";
  * The assertions that differ between variants, bound to one of them.
  * Every test asserts through these, so the test bodies themselves stay variant agnostic.
  */
-export function variantAssertions(variant: ExpressionFiltersVariant) {
+function variantAssertions(variant: ExpressionFiltersVariant) {
   return {
     initialUrlSearch: variant.initialUrlSearch,
     urlSearchWithFilter: (filter: string) =>
@@ -114,10 +117,9 @@ export function variantAssertions(variant: ExpressionFiltersVariant) {
      */
     assertUrlSearchHistory: (...searches: string[]) => {
       if (variant.noUrlSync) return;
-      expect(variant.pageMock().urlSearchHistory).toEqual([
-        ...variant.initialUrlSearchHistory,
-        ...searches,
-      ]);
+      variant
+        .pageMock()
+        .assertSearchHistory([...variant.initialUrlSearchHistory, ...searches]);
     },
   };
 }
diff --git a/web-common/src/features/dashboards/providers/DashboardConfigProvider.svelte.ts b/web-common/src/features/dashboards/providers/DashboardConfigProvider.svelte.ts
index af3aac622770..659c9b27c2f8 100644
--- a/web-common/src/features/dashboards/providers/DashboardConfigProvider.svelte.ts
+++ b/web-common/src/features/dashboards/providers/DashboardConfigProvider.svelte.ts
@@ -12,6 +12,7 @@ import { RuntimeClient } from "@rilldata/web-common/runtime-client/v2";
 export class DashboardConfigProvider {
   public readonly metricsViewsProvider: MetricsViewsProvider;
   public readonly yamlConfigProvider: YAMLConfigProvider;
+  public defaultUrlParams: URLSearchParams = $state(new URLSearchParams());
 
   public cleanup: (() => void) | undefined = undefined;
 
@@ -29,6 +30,8 @@ export class ExploreDashboardConfigProvider extends DashboardConfigProvider {
       name: exploreName,
     });
     const getExploreUnsub = getExploreQuery.subscribe((getExploreResp) => {
+      const metricsViewSpec =
+        getExploreResp.data?.metricsView?.metricsView?.state?.validSpec ?? {};
       const exploreSpec =
         getExploreResp.data?.explore?.explore?.state?.validSpec ?? {};
 
@@ -36,7 +39,17 @@ export class ExploreDashboardConfigProvider extends DashboardConfigProvider {
         exploreSpec.metricsView ? [exploreSpec.metricsView] : [],
       );
 
-      // this.yamlConfigProvider.update() // TODO: once we have this support for explore
+      this.yamlConfigProvider.update({
+        restrictedDimensions: exploreSpec.dimensions,
+        primaryTimeDimension: metricsViewSpec.timeDimension,
+        restrictedMeasures: exploreSpec.measures,
+
+        defaultTimeRange: exploreSpec.defaultPreset?.timeRange,
+        timeRanges: exploreSpec.timeRanges,
+        allowCustomTimeRange: exploreSpec.allowCustomTimeRange,
+        defaultTimeZone: exploreSpec.defaultPreset?.timezone,
+        timeZones: exploreSpec.timeZones,
+      });
     });
 
     this.cleanup = () => {
@@ -68,11 +81,16 @@ export class CanvasDashboardConfigProvider extends DashboardConfigProvider {
             ([mv, sqlFilter]) => [mv, sqlFilter.expression],
           ),
         );
-        this.yamlConfigProvider.update(
+        this.yamlConfigProvider.update({
           defaultFilters,
-          canvasSpec.pinnedFilters ?? [],
-          canvasSpec.requiredFilters ?? [],
-        );
+          pinnedFilters: canvasSpec.pinnedFilters,
+          requiredFilters: canvasSpec.requiredFilters,
+
+          defaultTimeRange: canvasSpec.defaultPreset?.timeRange,
+          timeRanges: canvasSpec.timeRanges,
+          allowCustomTimeRange: canvasSpec.allowCustomTimeRange,
+          timeZones: canvasSpec.timeZones,
+        });
       },
     );
 
diff --git a/web-common/src/features/dashboards/providers/YAMLConfigProvider.svelte.ts b/web-common/src/features/dashboards/providers/YAMLConfigProvider.svelte.ts
index 019ab3966220..8804a49caf93 100644
--- a/web-common/src/features/dashboards/providers/YAMLConfigProvider.svelte.ts
+++ b/web-common/src/features/dashboards/providers/YAMLConfigProvider.svelte.ts
@@ -1,4 +1,11 @@
-import { type V1Expression } from "@rilldata/web-common/runtime-client";
+import {
+  type V1ExploreTimeRange,
+  type V1Expression,
+} from "@rilldata/web-common/runtime-client";
+import {
+  DEFAULT_TIMEZONE,
+  DEFAULT_TIMEZONES,
+} from "@rilldata/web-common/lib/time/config.ts";
 
 /**
  * A provider for YAML only configuration. These are only mutable during yaml editing.
@@ -9,28 +16,73 @@ export class YAMLConfigProvider {
   public specPinnedFilters = $state<Record<string, boolean>>({});
   public requiredFilters = $state<Record<string, boolean>>({});
   public specRequiredFilters = $state<Record<string, boolean>>({});
+
+  public restrictedDimensions = $state<string[] | undefined>(undefined);
+  public primaryTimeDimension = $state<string | undefined>(undefined);
+  public restrictedMeasures = $state<string[] | undefined>(undefined);
+
+  public defaultTimeRange = $state<string | undefined>(undefined);
+  public timeRanges = $state<V1ExploreTimeRange[]>([]);
+  public allowCustomTimeRange = $state(false);
+  public defaultTimeZone = $state<string>(DEFAULT_TIMEZONE);
+  public timeZones = $state<string[]>(DEFAULT_TIMEZONES);
+
   public editable = $state<boolean>(false);
 
   public cleanup: (() => void) | undefined = undefined;
 
-  public update(
-    defaultFilters: Record<string, V1Expression | undefined>,
-    pinnedFilters: string[],
-    requiredFilters: string[],
-  ) {
-    this.defaultFilters = defaultFilters;
+  public update({
+    defaultFilters,
+    pinnedFilters,
+    requiredFilters,
+
+    restrictedDimensions,
+    primaryTimeDimension,
+    restrictedMeasures,
+
+    defaultTimeRange,
+    timeRanges,
+    allowCustomTimeRange,
+    defaultTimeZone,
+    timeZones,
+  }: {
+    defaultFilters?: YAMLConfigProvider["defaultFilters"];
+    pinnedFilters?: string[];
+    requiredFilters?: string[];
+
+    restrictedDimensions?: YAMLConfigProvider["restrictedDimensions"];
+    primaryTimeDimension?: YAMLConfigProvider["primaryTimeDimension"];
+    restrictedMeasures?: YAMLConfigProvider["restrictedMeasures"];
+
+    defaultTimeRange?: YAMLConfigProvider["defaultTimeRange"];
+    timeRanges?: YAMLConfigProvider["timeRanges"];
+    allowCustomTimeRange?: YAMLConfigProvider["allowCustomTimeRange"];
+    defaultTimeZone?: YAMLConfigProvider["defaultTimeZone"];
+    timeZones?: YAMLConfigProvider["timeZones"];
+  }) {
+    this.defaultFilters = defaultFilters ?? {};
 
     const pinnedFiltersRec = Object.fromEntries(
-      pinnedFilters.map((filter) => [filter, true]),
+      pinnedFilters?.map((filter) => [filter, true]) ?? [],
     );
     this.pinnedFilters = { ...pinnedFiltersRec };
     this.specPinnedFilters = { ...pinnedFiltersRec };
 
     const requiredFiltersRec = Object.fromEntries(
-      requiredFilters.map((filter) => [filter, true]),
+      requiredFilters?.map((filter) => [filter, true]) ?? [],
     );
     this.requiredFilters = { ...requiredFiltersRec };
     this.specRequiredFilters = { ...requiredFiltersRec };
+
+    this.restrictedDimensions = restrictedDimensions;
+    this.primaryTimeDimension = primaryTimeDimension;
+    this.restrictedMeasures = restrictedMeasures;
+
+    this.defaultTimeRange = defaultTimeRange;
+    this.timeRanges = timeRanges ?? [];
+    this.allowCustomTimeRange = allowCustomTimeRange ?? false;
+    this.defaultTimeZone = defaultTimeZone ?? DEFAULT_TIMEZONE;
+    this.timeZones = timeZones ?? [];
   }
 
   public setEditable(newEditable: boolean) {
diff --git a/web-common/src/features/dashboards/state-managers/loaders/DashboardStateManager.svelte b/web-common/src/features/dashboards/state-managers/loaders/DashboardStateManager.svelte
index e8cc303f4e28..9b73ba4283e7 100644
--- a/web-common/src/features/dashboards/state-managers/loaders/DashboardStateManager.svelte
+++ b/web-common/src/features/dashboards/state-managers/loaders/DashboardStateManager.svelte
@@ -35,7 +35,7 @@
   const client = useRuntimeClient();
 
   const StateManagers = getStateManagers();
-  const { expressionFilterManager } = StateManagers;
+  const { expressionFilterManager, timeFilterManager } = StateManagers;
 
   $: exploreSpecQuery = useExploreValidSpec(client, exploreName);
   $: exploreSpec = $exploreSpecQuery.data?.explore ?? {};
@@ -61,6 +61,7 @@
       storageNamespacePrefix,
       dataLoader,
       expressionFilterManager,
+      timeFilterManager,
     );
   }
 
diff --git a/web-common/src/features/dashboards/state-managers/loaders/DashboardStateSync.ts b/web-common/src/features/dashboards/state-managers/loaders/DashboardStateSync.ts
index d499c92d1da9..7d57ed8adc15 100644
--- a/web-common/src/features/dashboards/state-managers/loaders/DashboardStateSync.ts
+++ b/web-common/src/features/dashboards/state-managers/loaders/DashboardStateSync.ts
@@ -27,6 +27,7 @@ import { getContext, setContext } from "svelte";
 import { derived, get, type Readable } from "svelte/store";
 import type { CompoundQueryResult } from "@rilldata/web-common/features/compound-query-result";
 import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export const DASHBOARD_STATE_SYNC_KEY = Symbol("state-sync");
 
@@ -65,6 +66,7 @@ export class DashboardStateSync {
     private readonly extraPrefix: string | undefined,
     private readonly dataLoader: DashboardStateDataLoader,
     private readonly expressionFilterManager: ExpressionFilterManager,
+    private readonly timeFilterManager: TimeFilterManager,
   ) {
     this.exploreStore = useExploreState(exploreName);
     this.timeControlStore = createTimeControlStoreFromName(
@@ -172,6 +174,7 @@ export class DashboardStateSync {
     if (!rillDefaultExploreURLParams) return;
     this.updating = true;
     this.expressionFilterManager.updating = true;
+    this.timeFilterManager.updating = true;
 
     const pageState = get(page);
 
@@ -228,6 +231,9 @@ export class DashboardStateSync {
 
     this.expressionFilterManager.setUrlParams(redirectUrl.searchParams);
     this.expressionFilterManager.updating = false;
+    this.timeFilterManager.setUrlParams(redirectUrl.searchParams);
+    this.timeFilterManager.updating = false;
+    log("INIT", redirectUrl);
     // If the current url same as the new url then there is no need to do anything
     if (redirectUrl.search === pageState.url.search) {
       this.initialized = true;
@@ -284,6 +290,7 @@ export class DashboardStateSync {
     // the finally ensures a throw below cannot leave it stuck.
     this.updating = true;
     this.expressionFilterManager.updating = true;
+    this.timeFilterManager.updating = true;
     let redirectUrl: URL | undefined = undefined;
     // TODO: reassess this try-catch. resolveTimeRanges has error handling already.
     try {
@@ -346,13 +353,16 @@ export class DashboardStateSync {
       this.updating = false;
       if (redirectUrl) {
         this.expressionFilterManager.setUrlParams(redirectUrl.searchParams);
+        this.timeFilterManager.setUrlParams(redirectUrl.searchParams);
       }
       this.expressionFilterManager.updating = false;
+      this.timeFilterManager.updating = false;
     }
     // Try-finally without a catch. Rest of the code is not run if the above try body throws.
 
     if (!redirectUrl) return; // type-safety
 
+    log("URL", redirectUrl);
     // If the url doesn't need to be changed further then we can skip the goto
     if (redirectUrl.search === pageState.url.search) {
       return;
@@ -414,6 +424,7 @@ export class DashboardStateSync {
       }
 
       this.expressionFilterManager.setUrlParams(newUrl.searchParams);
+      log("GOTO", newUrl);
       // If the state didnt result in a new url then skip goto.
       // This avoids adding redundant urls to the history.
       if (newUrl.search === pageState.url.search) {
@@ -428,3 +439,11 @@ export class DashboardStateSync {
     }
   }
 }
+
+function log(label: string, toUrl: URL) {
+  const fromUrlSearch = get(page).url.search;
+  const areEqual = fromUrlSearch === toUrl.search;
+  console.log(
+    `[${label}] ${fromUrlSearch} =${areEqual ? "x" : "="}> ${toUrl.search}`,
+  );
+}
diff --git a/web-common/src/features/dashboards/state-managers/loaders/test/PageMockForComponentTests.ts b/web-common/src/features/dashboards/state-managers/loaders/test/PageMockForComponentTests.ts
index d069b0ecab96..d8a711280c3d 100644
--- a/web-common/src/features/dashboards/state-managers/loaders/test/PageMockForComponentTests.ts
+++ b/web-common/src/features/dashboards/state-managers/loaders/test/PageMockForComponentTests.ts
@@ -1,5 +1,6 @@
 import type { afterNavigate } from "$app/navigation";
 import { AD_BIDS_EXPLORE_NAME } from "@rilldata/web-common/features/dashboards/stores/test-data/data";
+import { ExploreStateURLParams } from "@rilldata/web-common/features/dashboards/url-state/url-params";
 import type { ActionResult, AfterNavigate, Page } from "@sveltejs/kit";
 import { writable, get, type Readable, type Updater } from "svelte/store";
 import { expect } from "vitest";
@@ -128,8 +129,17 @@ export class PageMockForComponentTests {
 
   public assertSearchParams(expectedSearch: string) {
     const actualSearch = normalizeSearch(get(this.hoistedPage).url);
-    expect(actualSearch).toEqual(
-      new URLSearchParams(expectedSearch).toString(),
+    expect(sortSearchParams(actualSearch)).toEqual(
+      sortSearchParams(expectedSearch),
+    );
+  }
+
+  /**
+   * Asserts the full url search history, ignoring the order params were set in.
+   */
+  public assertSearchHistory(expectedSearches: string[]) {
+    expect(this.urlSearchHistory.map(sortSearchParams)).toEqual(
+      expectedSearches.map(sortSearchParams),
     );
   }
 
@@ -178,3 +188,66 @@ function normalizeSearch(url: URL) {
   if (normalizedSearch === "clear=true") normalizedSearch = "";
   return normalizedSearch;
 }
+
+/**
+ * Order in which `convertPartialExploreStateToUrlParams` adds params to the url.
+ * Params added under more than one web view are ordered by their 1st occurrence.
+ */
+const UrlParamOrder: string[] = [
+  ExploreStateURLParams.WebView,
+
+  // Time controls, added by `toTimeRangesUrl`.
+  ExploreStateURLParams.TimeRange,
+  ExploreStateURLParams.TimeDimension,
+  ExploreStateURLParams.TimeZone,
+  ExploreStateURLParams.ComparisonTimeRange,
+  ExploreStateURLParams.TimeGrain,
+  ExploreStateURLParams.ComparisonDimension,
+  ExploreStateURLParams.HighlightedTimeRange,
+
+  ExploreStateURLParams.Filters,
+
+  // Explore view, added by `toExploreUrlParams`.
+  ExploreStateURLParams.VisibleMeasures,
+  ExploreStateURLParams.VisibleDimensions,
+  ExploreStateURLParams.ExpandedDimension,
+  ExploreStateURLParams.SortBy,
+  ExploreStateURLParams.SortType,
+  ExploreStateURLParams.SortDirection,
+  ExploreStateURLParams.LeaderboardMeasures,
+  ExploreStateURLParams.LeaderboardShowContextForAllMeasures,
+  ExploreStateURLParams.DynamicYAxisScale,
+  ExploreStateURLParams.ChartType,
+
+  // Time dimension detail view, added by `toTimeDimensionUrlParams`.
+  ExploreStateURLParams.ExpandedMeasure,
+
+  // Pivot view, added by `toPivotUrlParams`.
+  ExploreStateURLParams.PivotRows,
+  ExploreStateURLParams.PivotColumns,
+  ExploreStateURLParams.PivotTableMode,
+  ExploreStateURLParams.PivotRowLimit,
+  ExploreStateURLParams.PivotShowTotalsColumn,
+  ExploreStateURLParams.PivotShowTotalsRow,
+  ExploreStateURLParams.PivotFormatting,
+];
+const UrlParamOrderMap = new Map(UrlParamOrder.map((p, i) => [p, i]));
+
+/**
+ * Sorts params in the order `convertPartialExploreStateToUrlParams` adds them,
+ * so that the assertion is not sensitive to the order params were set in.
+ * Unknown params retain their relative order and are placed at the end.
+ */
+function sortSearchParams(search: string) {
+  const entries = [...new URLSearchParams(search).entries()];
+  const sortedEntries = entries
+    .map((entry, index) => ({ entry, index }))
+    .sort((a, b) => {
+      const aOrder = UrlParamOrderMap.get(a.entry[0]) ?? UrlParamOrder.length;
+      const bOrder = UrlParamOrderMap.get(b.entry[0]) ?? UrlParamOrder.length;
+      return aOrder === bOrder ? a.index - b.index : aOrder - bOrder;
+    })
+    .map(({ entry }) => entry);
+
+  return new URLSearchParams(sortedEntries).toString();
+}
diff --git a/web-common/src/features/dashboards/state-managers/selectors/charts.ts b/web-common/src/features/dashboards/state-managers/selectors/charts.ts
index 56bbd6f48e56..c7f52b709113 100644
--- a/web-common/src/features/dashboards/state-managers/selectors/charts.ts
+++ b/web-common/src/features/dashboards/state-managers/selectors/charts.ts
@@ -1,4 +1,3 @@
-import { timeControlsState } from "@rilldata/web-common/features/dashboards/state-managers/selectors/time-range";
 import {
   getDurationFromMS,
   getOffset,
@@ -8,33 +7,8 @@ import {
   TimeOffsetType,
   type DashboardTimeControls,
 } from "@rilldata/web-common/lib/time/types";
-import type { DashboardDataSources } from "./types";
 
-export const chartSelectors = {
-  canPanLeft: (dashData: DashboardDataSources) => {
-    const timeControls = timeControlsState(dashData);
-    const startRange = timeControls.allTimeRange?.start;
-    const selectedStart = timeControls.selectedTimeRange?.start;
-
-    return (
-      (selectedStart?.getTime() || Infinity) >
-      (startRange?.getTime() || -Infinity)
-    );
-  },
-  canPanRight: (dashData: DashboardDataSources) => {
-    const timeControls = timeControlsState(dashData);
-    const endRange = timeControls?.allTimeRange?.end;
-    const selectedEnd = timeControls.selectedTimeRange?.end;
-    return (
-      (selectedEnd?.getTime() || -Infinity) < (endRange?.getTime() || Infinity)
-    );
-  },
-  getNewPanRange: (dashData: DashboardDataSources) => {
-    const timeControls = timeControlsState(dashData);
-    const timeZone = dashData.dashboard?.selectedTimezone;
-    return getPanRangeForTimeRange(timeControls.selectedTimeRange, timeZone);
-  },
-};
+export const chartSelectors = {};
 
 export function getPanRangeForTimeRange(
   timeRange: DashboardTimeControls | undefined,
diff --git a/web-common/src/features/dashboards/state-managers/state-managers.ts b/web-common/src/features/dashboards/state-managers/state-managers.ts
index fef016d45c09..89394f377322 100644
--- a/web-common/src/features/dashboards/state-managers/state-managers.ts
+++ b/web-common/src/features/dashboards/state-managers/state-managers.ts
@@ -33,8 +33,12 @@ import {
   contextColWidthDefaults,
   type ContextColWidths,
 } from "../leaderboard-context-column";
+import { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+import {
+  DashboardConfigProvider,
+  ExploreDashboardConfigProvider,
+} from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
 import { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
-import { ExploreDashboardConfigProvider } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
 
 export type StateManagers = {
   runtimeClient: RuntimeClient;
@@ -67,6 +71,8 @@ export type StateManagers = {
    */
   contextColumnWidths: Writable<ContextColWidths>;
   defaultExploreState: Readable<V1ExplorePreset>;
+  dashboardConfigProvider: DashboardConfigProvider;
+  timeFilterManager: TimeFilterManager;
   expressionFilterManager: ExpressionFilterManager;
   cleanup: () => void;
 };
@@ -167,13 +173,19 @@ export function createStateManagers({
     },
   );
 
-  const dashboardProvider = new ExploreDashboardConfigProvider(
+  const dashboardConfigProvider = new ExploreDashboardConfigProvider(
     runtimeClient,
     exploreName,
   );
   const expressionFilterManager = new ExpressionFilterManager(
-    dashboardProvider.metricsViewsProvider,
-    dashboardProvider.yamlConfigProvider,
+    dashboardConfigProvider.metricsViewsProvider,
+    dashboardConfigProvider.yamlConfigProvider,
+  );
+  const timeFilterManager = new TimeFilterManager(
+    runtimeClient,
+    dashboardConfigProvider.metricsViewsProvider,
+    dashboardConfigProvider.yamlConfigProvider,
+    true,
   );
 
   return {
@@ -205,8 +217,10 @@ export function createStateManagers({
     contextColumnWidths,
     defaultExploreState,
     expressionFilterManager,
+    dashboardConfigProvider,
+    timeFilterManager,
     cleanup: () => {
-      dashboardProvider.cleanup?.();
+      dashboardConfigProvider.cleanup?.();
     },
   };
 }
diff --git a/web-common/src/features/dashboards/stores/TimeControls.ts b/web-common/src/features/dashboards/stores/TimeControls.ts
deleted file mode 100644
index 7da168a4ab60..000000000000
--- a/web-common/src/features/dashboards/stores/TimeControls.ts
+++ /dev/null
@@ -1,260 +0,0 @@
-import type { ExploreState } from "@rilldata/web-common/features/dashboards/stores/explore-state.ts";
-import { normalizeWeekday } from "@rilldata/web-common/features/dashboards/time-controls/new-time-controls.ts";
-import {
-  calculateComparisonTimeRangePartial,
-  calculateTimeRangePartial,
-  type ComparisonTimeRangeState,
-  type TimeRangeState,
-} from "@rilldata/web-common/features/dashboards/time-controls/time-control-store.ts";
-import { ExploreMetricsViewMetadata } from "@rilldata/web-common/features/dashboards/stores/ExploreMetricsViewMetadata.ts";
-import { isoDurationToFullTimeRange } from "@rilldata/web-common/lib/time/ranges/iso-ranges.ts";
-import {
-  type DashboardTimeControls,
-  TimeComparisonOption,
-  type TimeRange,
-  TimeRangePreset,
-} from "@rilldata/web-common/lib/time/types.ts";
-import { V1TimeGrain } from "@rilldata/web-common/runtime-client";
-import { Settings } from "luxon";
-import {
-  derived,
-  get,
-  type Readable,
-  writable,
-  type Writable,
-} from "svelte/store";
-
-export type TimeControlState = Pick<
-  ExploreState,
-  | "selectedTimeRange"
-  | "selectedComparisonTimeRange"
-  | "showTimeComparison"
-  | "selectedTimezone"
->;
-
-export class TimeControls {
-  /**
-   * Writables which can be updated by the user
-   */
-  public readonly selectedTimeRange: Writable<
-    DashboardTimeControls | undefined
-  >;
-  public readonly selectedComparisonTimeRange: Writable<
-    DashboardTimeControls | undefined
-  >;
-  public readonly showTimeComparison: Writable<boolean>;
-  public readonly selectedTimezone: Writable<string>;
-
-  /**
-   * Derived stores based on writables and spec
-   */
-  public readonly allTimeRange: Readable<TimeRange | undefined>;
-  public readonly minTimeGrain: Readable<V1TimeGrain>;
-  public readonly hasTimeSeries: Readable<boolean>;
-  public readonly timeRangeStateStore: Readable<TimeRangeState | undefined>;
-  public readonly comparisonRangeStateStore: Readable<
-    ComparisonTimeRangeState | undefined
-  >;
-
-  public constructor(
-    metricsViewMetadata: ExploreMetricsViewMetadata,
-    {
-      selectedTimeRange,
-      selectedComparisonTimeRange,
-      showTimeComparison,
-      selectedTimezone,
-    }: TimeControlState,
-  ) {
-    this.selectedTimeRange = writable(selectedTimeRange);
-    this.selectedComparisonTimeRange = writable(selectedComparisonTimeRange);
-    this.showTimeComparison = writable(showTimeComparison);
-    this.selectedTimezone = writable(selectedTimezone);
-
-    this.allTimeRange = derived(
-      metricsViewMetadata.timeRangeSummary,
-      (timeRangeSummaryResp) => {
-        if (!timeRangeSummaryResp.data?.timeRangeSummary) return undefined;
-        return {
-          name: TimeRangePreset.ALL_TIME,
-          start: new Date(timeRangeSummaryResp.data.timeRangeSummary.min!),
-          end: new Date(timeRangeSummaryResp.data.timeRangeSummary.max!),
-        };
-      },
-    );
-
-    this.hasTimeSeries = derived(
-      metricsViewMetadata.validSpecQuery,
-      (validSpecResp) => {
-        const metricsViewSpec = validSpecResp.data?.metricsView ?? {};
-        return Boolean(metricsViewSpec.timeDimension);
-      },
-    );
-
-    this.minTimeGrain = derived(
-      metricsViewMetadata.validSpecQuery,
-      (validSpecResp) => {
-        const metricsViewSpec = validSpecResp.data?.metricsView ?? {};
-        return (
-          metricsViewSpec.smallestTimeGrain ??
-          V1TimeGrain.TIME_GRAIN_UNSPECIFIED
-        );
-      },
-    );
-
-    this.timeRangeStateStore = derived(
-      [
-        metricsViewMetadata.validSpecQuery,
-        this.allTimeRange,
-        this.selectedTimeRange,
-        this.selectedTimezone,
-        this.minTimeGrain,
-      ],
-      ([
-        validSpecResp,
-        allTimeRange,
-        selectedTimeRange,
-        selectedTimezone,
-        minTimeGrain,
-      ]) => {
-        const metricsViewSpec = validSpecResp.data?.metricsView ?? {};
-        const exploreSpec = validSpecResp.data?.explore ?? {};
-
-        if (
-          !metricsViewSpec ||
-          !exploreSpec ||
-          !selectedTimeRange ||
-          !allTimeRange
-        ) {
-          return undefined;
-        }
-
-        Settings.defaultWeekSettings = {
-          firstDay: normalizeWeekday(metricsViewSpec.firstDayOfWeek),
-          weekend: [6, 7],
-          minimalDays: 4,
-        };
-
-        const defaultTimeRange = isoDurationToFullTimeRange(
-          exploreSpec.defaultPreset?.timeRange,
-          allTimeRange.start,
-          allTimeRange.end,
-          selectedTimezone,
-        );
-
-        const timeRangeState = calculateTimeRangePartial(
-          allTimeRange,
-          selectedTimeRange,
-          undefined, // scrub not present in canvas yet
-          selectedTimezone,
-          defaultTimeRange,
-          minTimeGrain,
-        );
-        if (!timeRangeState) return undefined;
-        return { ...timeRangeState };
-      },
-    );
-
-    this.comparisonRangeStateStore = derived(
-      [
-        metricsViewMetadata.validSpecQuery,
-        this.allTimeRange,
-        this.selectedComparisonTimeRange,
-        this.selectedTimezone,
-        this.showTimeComparison,
-        this.timeRangeStateStore,
-      ],
-      ([
-        validSpecResp,
-        allTimeRange,
-        selectedComparisonTimeRange,
-        selectedTimezone,
-        showTimeComparison,
-        timeRangeState,
-      ]) => {
-        const exploreSpec = validSpecResp.data?.explore ?? {};
-        if (!exploreSpec || !timeRangeState || !allTimeRange) return undefined;
-        const timeRanges = exploreSpec.timeRanges ?? [];
-        return calculateComparisonTimeRangePartial(
-          timeRanges,
-          allTimeRange,
-          selectedComparisonTimeRange,
-          selectedTimezone,
-          undefined, // scrub not present in canvas yet
-          showTimeComparison,
-          timeRangeState,
-        );
-      },
-    );
-  }
-
-  public setTimeZone = (timezone: string) => {
-    this.selectedTimezone.set(timezone);
-  };
-
-  public selectTimeRange = (
-    timeRange: TimeRange,
-    timeGrain: V1TimeGrain,
-    comparisonTimeRange: DashboardTimeControls | undefined,
-  ) => {
-    if (!timeRange.name) return;
-
-    if (timeRange.name === TimeRangePreset.ALL_TIME) {
-      this.showTimeComparison.set(false);
-    }
-
-    this.selectedTimeRange.set({
-      ...timeRange,
-      interval: timeGrain,
-    });
-
-    if (comparisonTimeRange !== undefined)
-      this.selectedComparisonTimeRange.set(comparisonTimeRange);
-  };
-
-  public setSelectedComparisonRange = (
-    comparisonTimeRange: DashboardTimeControls,
-  ) => {
-    this.selectedComparisonTimeRange.set(comparisonTimeRange);
-  };
-
-  public displayTimeComparison = (showTimeComparison: boolean) => {
-    this.showTimeComparison.set(showTimeComparison);
-    // TODO: find a better fix
-    if (!get(this.selectedComparisonTimeRange)?.name) {
-      this.selectedComparisonTimeRange.set({
-        name: TimeComparisonOption.CONTIGUOUS,
-      } as any);
-    }
-  };
-
-  public toState(): TimeControlState {
-    const timeRangeStateStore = get(this.timeRangeStateStore);
-    const comparisonRangeStateStore = get(this.comparisonRangeStateStore);
-    return {
-      selectedTimeRange: timeRangeStateStore?.selectedTimeRange,
-      selectedComparisonTimeRange:
-        comparisonRangeStateStore?.selectedComparisonTimeRange,
-      showTimeComparison:
-        comparisonRangeStateStore?.showTimeComparison ?? false,
-      selectedTimezone: get(this.selectedTimezone),
-    };
-  }
-
-  public getStore(): Readable<TimeControlState> {
-    return derived(
-      [
-        this.timeRangeStateStore,
-        this.comparisonRangeStateStore,
-        this.selectedTimezone,
-      ],
-      ([timeRangeStateStore, comparisonRangeStateStore, selectedTimezone]) => ({
-        selectedTimeRange: timeRangeStateStore?.selectedTimeRange,
-        selectedComparisonTimeRange:
-          comparisonRangeStateStore?.selectedComparisonTimeRange,
-        showTimeComparison:
-          comparisonRangeStateStore?.showTimeComparison ?? false,
-        selectedTimezone,
-      }),
-    );
-  }
-}
diff --git a/web-common/src/features/dashboards/stores/dashboard-stores.ts b/web-common/src/features/dashboards/stores/dashboard-stores.ts
index 694a0de4faf5..3571f7cc3410 100644
--- a/web-common/src/features/dashboards/stores/dashboard-stores.ts
+++ b/web-common/src/features/dashboards/stores/dashboard-stores.ts
@@ -35,6 +35,7 @@ import {
   type PivotMeasureFormatting,
   type PivotTableMode,
 } from "../pivot/types";
+import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 import { parseMeasureExpression } from "../ephemeral-measures/expression-parser";
 import type { EphemeralMeasureDef } from "../ephemeral-measures/types";
 import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
@@ -309,6 +310,47 @@ const metricsViewReducers = {
     });
   },
 
+  syncTimeFilters(name: string, timeFilterManager: TimeFilterManager) {
+    if (!name) return;
+    updateMetricsExplorerByName(name, (exploreState) => {
+      if (!timeFilterManager.timeRange) return;
+
+      exploreState.selectedTimeRange = {
+        name: timeFilterManager.timeRange,
+        start: timeFilterManager.interval?.start?.toJSDate() ?? new Date(),
+        end: timeFilterManager.interval?.end?.toJSDate() ?? new Date(),
+        interval: timeFilterManager.timeGrain,
+      } as any;
+      exploreState.showTimeComparison = timeFilterManager.showComparison;
+      exploreState.selectedComparisonTimeRange = {
+        name: timeFilterManager.comparisonTimeRange,
+        start:
+          timeFilterManager.comparisonInterval?.start?.toJSDate() ?? new Date(),
+        end:
+          timeFilterManager.comparisonInterval?.end?.toJSDate() ?? new Date(),
+      };
+
+      if (timeFilterManager.scrubInterval) {
+        exploreState.selectedScrubRange = {
+          start: timeFilterManager.scrubInterval.start.toJSDate(),
+          end: timeFilterManager.scrubInterval.end.toJSDate(),
+          isScrubbing: timeFilterManager.scrubInterval.isScrubbing,
+        };
+      } else {
+        exploreState.selectedScrubRange = undefined;
+      }
+      if (timeFilterManager.lastDefinedScrubInterval) {
+        exploreState.lastDefinedScrubRange = {
+          start: timeFilterManager.lastDefinedScrubInterval.start.toJSDate(),
+          end: timeFilterManager.lastDefinedScrubInterval.end.toJSDate(),
+          isScrubbing: false,
+        };
+      } else {
+        exploreState.lastDefinedScrubRange = undefined;
+      }
+    });
+  },
+
   setPivotMode(name: string, mode: boolean) {
     updateMetricsExplorerByName(name, (exploreState) => {
       if (mode) {
@@ -513,17 +555,6 @@ const metricsViewReducers = {
     });
   },
 
-  setMetricDimensionName(name: string, dimensionName: string | null) {
-    updateMetricsExplorerByName(name, (exploreState) => {
-      exploreState.selectedDimensionName = dimensionName ?? undefined;
-      if (dimensionName) {
-        exploreState.activePage = DashboardState_ActivePage.DIMENSION_TABLE;
-      } else {
-        exploreState.activePage = DashboardState_ActivePage.DEFAULT;
-      }
-    });
-  },
-
   setComparisonDimension(name: string, dimensionName: string) {
     updateMetricsExplorerByName(name, (exploreState) => {
       exploreState.selectedComparisonDimension = dimensionName;
@@ -563,12 +594,6 @@ const metricsViewReducers = {
     });
   },
 
-  setTimeDimension(name: string, column: string) {
-    updateMetricsExplorerByName(name, (exploreState) => {
-      exploreState.selectedTimeDimension = column;
-    });
-  },
-
   displayTimeComparison(name: string, showTimeComparison: boolean) {
     updateMetricsExplorerByName(name, (exploreState) => {
       exploreState.showTimeComparison = showTimeComparison;
@@ -603,15 +628,6 @@ const metricsViewReducers = {
     });
   },
 
-  setTimeGrain(name: string, timeGrain: V1TimeGrain) {
-    updateMetricsExplorerByName(name, (exploreState) => {
-      exploreState.selectedTimeRange = {
-        ...(exploreState.selectedTimeRange as DashboardTimeControls),
-        interval: timeGrain,
-      };
-    });
-  },
-
   remove(name: string) {
     update((state) => {
       delete state.entities[name];
diff --git a/web-common/src/features/dashboards/time-controls/ComparisonTimeRangePicker.svelte b/web-common/src/features/dashboards/time-controls/ComparisonTimeRangePicker.svelte
new file mode 100644
index 000000000000..47856ffcc44a
--- /dev/null
+++ b/web-common/src/features/dashboards/time-controls/ComparisonTimeRangePicker.svelte
@@ -0,0 +1,214 @@
+<script lang="ts">
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import Switch from "@rilldata/web-common/components/forms/Switch.svelte";
+  import Label from "@rilldata/web-common/components/forms/Label.svelte";
+  import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+  import {
+    TimeComparisonOption,
+    TimeRangePreset,
+  } from "@rilldata/web-common/lib/time/types.ts";
+  import { TIME_COMPARISON } from "@rilldata/web-common/lib/time/config.ts";
+  import {
+    MinSupportedGrain,
+    V1TimeGrainToDateTimeUnit,
+  } from "@rilldata/web-common/lib/time/new-grains.ts";
+  import RangeDisplay from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components/RangeDisplay.svelte";
+  import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
+  import CalendarPlusDateInput from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components/CalendarPlusDateInput.svelte";
+  import type { MetricsViewsProvider } from "@rilldata/web-common/features/metrics-views/providers/MetricsViewsProvider.svelte.ts";
+  import type { Interval } from "luxon";
+  import type { TimeFiltersConfig } from "@rilldata/web-common/features/dashboards/time-controls/time-filters-config.ts";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+
+  let {
+    timeFilterManager,
+    metricsViewsProvider,
+    config,
+  }: {
+    timeFilterManager: TimeFilterManager;
+    metricsViewsProvider: MetricsViewsProvider;
+    config: TimeFiltersConfig;
+  } = $props();
+  let {
+    showFullRange = true,
+    allowCustomTimeRange = true,
+    side = "bottom",
+  } = $derived(config);
+
+  let {
+    timeRange,
+    timeGrain,
+    timeZone,
+    minDate,
+    maxDate,
+    comparisonTimeRange,
+    showComparison,
+    comparisonTimeRangeOptions,
+    comparisonInterval,
+  } = $derived(timeFilterManager);
+
+  let { smallestTimeGrain } = $derived(metricsViewsProvider);
+
+  let open = $state(false);
+  let showSelector = $state(false);
+
+  let disabled = $derived(timeRange === TimeRangePreset.ALL_TIME || undefined);
+
+  let firstOption = $derived(comparisonTimeRangeOptions[0]);
+  let label = $derived(
+    TIME_COMPARISON[comparisonTimeRange ?? firstOption?.name]?.label ??
+      m.time_custom_range(),
+  );
+  let selectedLabel = $derived(
+    comparisonTimeRange ?? firstOption?.name ?? m.time_custom_range(),
+  );
+
+  function applyCustomRange(range: Interval<true>) {
+    onSelectComparisonRange(`${range.start.toISO()} to ${range.end.toISO()}`);
+  }
+
+  function onSelectComparisonRange(range: string) {
+    open = false;
+    timeFilterManager.onSelectComparisonRange(range);
+  }
+</script>
+
+<div
+  class="wrapper"
+  title={disabled && "Comparison not available when viewing all time range"}
+>
+  <button
+    {disabled}
+    class="flex gap-x-1.5 cursor-pointer"
+    onclick={() => timeFilterManager.onToggleShowComparison()}
+    type="button"
+    aria-label={m.dashboard_toggle_time_comparison_aria()}
+  >
+    <div class="pointer-events-none flex items-center gap-x-1.5">
+      <Switch
+        checked={showComparison}
+        id="comparing"
+        small
+        disabled={disabled ?? false}
+      />
+
+      <Label class="font-normal text-xs cursor-pointer" for="comparing">
+        <span class:opacity-50={disabled}>{m.time_comparing()}</span>
+      </Label>
+    </div>
+  </button>
+  {#if timeGrain && comparisonInterval}
+    <DropdownMenu.Root
+      bind:open
+      onOpenChange={() => {
+        showSelector = !!(
+          comparisonTimeRange === TimeComparisonOption.CUSTOM && showComparison
+        );
+      }}
+    >
+      <DropdownMenu.Trigger {disabled}>
+        {#snippet child({ props })}
+          <button
+            {...props}
+            {disabled}
+            aria-disabled={disabled}
+            aria-label={m.dashboard_select_time_comparison_aria()}
+            type="button"
+            class="rounded-r-full"
+          >
+            <div class="gap-x-2 flex" class:opacity-50={!showComparison}>
+              {#if !comparisonTimeRangeOptions.length && !showComparison}
+                <p>{m.time_no_comparison_period()}</p>
+              {:else}
+                <b class="line-clamp-1">{label}</b>
+                {#if comparisonInterval?.isValid && showFullRange}
+                  <RangeDisplay interval={comparisonInterval} {timeGrain} />
+                {/if}
+              {/if}
+            </div>
+            <span
+              class="flex-none transition-transform"
+              class:-rotate-180={open}
+              class:opacity-50={!showComparison}
+            >
+              <CaretDownIcon />
+            </span>
+          </button>
+        {/snippet}
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content align="start" {side} class="p-0 overflow-hidden">
+        <div class="flex">
+          <div class="flex flex-col border-r w-48 p-1">
+            {#each comparisonTimeRangeOptions as option (option.name)}
+              {@const preset = TIME_COMPARISON[option.name]}
+              {@const selected = selectedLabel === option.name}
+              <DropdownMenu.Item
+                class="flex gap-x-2"
+                onclick={() => onSelectComparisonRange(option.name)}
+              >
+                <span class:font-bold={selected}>
+                  {preset?.label || option.name}
+                </span>
+              </DropdownMenu.Item>
+              {#if option.name === TimeComparisonOption.CONTIGUOUS && comparisonTimeRangeOptions.length > 2}
+                <DropdownMenu.Separator />
+              {/if}
+            {/each}
+            {#if allowCustomTimeRange}
+              {#if comparisonTimeRangeOptions.length}
+                <DropdownMenu.Separator />
+              {/if}
+
+              <DropdownMenu.Item
+                data-range="custom"
+                closeOnSelect={false}
+                onclick={() => {
+                  showSelector = !showSelector;
+                }}
+              >
+                <span
+                  class:font-bold={comparisonTimeRange ===
+                    TimeComparisonOption.CUSTOM && showComparison}
+                >
+                  {m.time_custom()}
+                </span>
+              </DropdownMenu.Item>
+            {/if}
+          </div>
+          {#if showSelector}
+            <div class="bg-surface-background flex flex-col w-60 p-3">
+              {#if !comparisonInterval || comparisonInterval?.isValid}
+                <CalendarPlusDateInput
+                  minTimeGrain={V1TimeGrainToDateTimeUnit[
+                    smallestTimeGrain ?? MinSupportedGrain
+                  ]}
+                  {maxDate}
+                  {minDate}
+                  interval={comparisonInterval}
+                  zone={timeZone}
+                  onApply={applyCustomRange}
+                  closeMenu={() => (open = false)}
+                />
+              {/if}
+            </div>
+          {/if}
+        </div>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+
+    <style lang="postcss">
+      button {
+        @apply gap-x-1;
+      }
+    </style>
+  {/if}
+</div>
+
+<style lang="postcss">
+  .wrapper {
+    @apply flex w-fit;
+    @apply h-[26px] rounded-full;
+    @apply overflow-hidden select-none;
+  }
+</style>
diff --git a/web-common/src/features/dashboards/time-controls/ExploreTimeFilters.spec.ts b/web-common/src/features/dashboards/time-controls/ExploreTimeFilters.spec.ts
new file mode 100644
index 000000000000..4e3f424b5e9a
--- /dev/null
+++ b/web-common/src/features/dashboards/time-controls/ExploreTimeFilters.spec.ts
@@ -0,0 +1,74 @@
+import type { HoistedPageForComponentTests } from "@rilldata/web-common/features/dashboards/state-managers/loaders/test/PageMockForComponentTests.ts";
+import { useExploreTimeFiltersVariant } from "@rilldata/web-common/features/dashboards/time-controls/test/explore-time-filters-variant";
+import {
+  testComparisonTimeRangeFilters,
+  testTimeRangeFilters,
+} from "@rilldata/web-common/features/dashboards/time-controls/test/time-filters-suite";
+import type { ActionResult } from "@sveltejs/kit";
+import { describe, vi } from "vitest";
+
+const hoistedPage: HoistedPageForComponentTests = vi.hoisted(() => ({}) as any);
+
+vi.stubEnv("TZ", "UTC");
+
+vi.mock("$app/navigation", () => {
+  return {
+    goto: (url, opts) => hoistedPage.goto(url, opts),
+    afterNavigate: (cb) => hoistedPage.afterNavigate(cb),
+    onNavigate: () => {},
+    // superforms, which the measure filter form uses, registers a navigation guard for tainted
+    // forms as soon as it is created.
+    beforeNavigate: () => {},
+  };
+});
+vi.mock("$app/forms", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("$app/forms")>();
+  return {
+    ...actual,
+    // The real `applyAction` needs the SvelteKit client runtime, which a component test does not
+    // boot. The measure filter form reads its validation result back from the page, so hand the
+    // result to the page mock instead.
+    applyAction: (result: ActionResult) => {
+      hoistedPage.applyAction(result);
+      return Promise.resolve();
+    },
+  };
+});
+// The rune based url stores read `page` from here, and SvelteKit only populates it through its
+// client router, which a component test does not boot. `PageMockForComponentTests` keeps this in
+// sync with the `$app/stores` page below.
+vi.mock("$app/state", async () => {
+  return {
+    page: (
+      await import(
+        "@rilldata/web-common/features/dashboards/state-managers/loaders/test/page-state.mock.svelte"
+      )
+    ).pageStateMock,
+  };
+});
+vi.mock("$app/stores", () => {
+  return {
+    page: hoistedPage,
+    // superforms cancels a submit that navigates to another route, so it subscribes to this while
+    // the measure filter form is submitting. Nothing here navigates away from the dashboard.
+    navigating: {
+      subscribe: (run: (value: null) => void) => {
+        run(null);
+        return () => {};
+      },
+    },
+  };
+});
+
+// Tests time filter interactions on the explore dashboard, where the time filter bar writes to the
+// explore state and the url. Loading state from other sources is covered by
+// DashboardStateManager.spec.ts.
+//
+// The test bodies live in `test/time-filters-suite.ts`, so that the other dashboards embedding the
+// same time filter bar can run them as well.
+describe("ExploreTimeFilters", () => {
+  const variant = useExploreTimeFiltersVariant(hoistedPage);
+
+  testTimeRangeFilters(variant);
+  testComparisonTimeRangeFilters(variant);
+});
diff --git a/web-common/src/features/dashboards/time-controls/ReadonlyTimeFilters.svelte b/web-common/src/features/dashboards/time-controls/ReadonlyTimeFilters.svelte
new file mode 100644
index 000000000000..6332455eb3df
--- /dev/null
+++ b/web-common/src/features/dashboards/time-controls/ReadonlyTimeFilters.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { getComparisonLabelFromRange } from "@rilldata/web-common/lib/time/comparisons/index.ts";
+  import RangeDisplay from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components/RangeDisplay.svelte";
+  import { Chip } from "@rilldata/web-common/components/chip/index.ts";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+  import { RillIsoInterval } from "@rilldata/web-common/features/dashboards/url-state/time-ranges/RillTime.ts";
+  import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+  import { getRangeLabel } from "@rilldata/web-common/features/dashboards/time-controls/new-time-controls.ts";
+
+  let {
+    timeFilterManager,
+    hasBoldTimeRange = true,
+  }: {
+    timeFilterManager: TimeFilterManager;
+    hasBoldTimeRange?: boolean;
+  } = $props();
+
+  let {
+    timeRange,
+    timeGrain,
+    interval,
+    parsedTime,
+    comparisonTimeRange,
+    parsedComparisonTime,
+  } = $derived(timeFilterManager);
+
+  let selectedLabel = $derived(getRangeLabel(timeRange));
+  let showRange = $derived(
+    parsedTime && parsedTime?.interval instanceof RillIsoInterval,
+  );
+</script>
+
+<Chip type="time" theme readOnly>
+  <svelte:fragment slot="body">
+    <div class="text-fg-primary flex gap-x-1.5">
+      <div class="font-bold">
+        {#if showRange}
+          {m.time_custom()}
+        {:else}
+          {selectedLabel}
+        {/if}
+      </div>
+      {#if showRange && interval}
+        <RangeDisplay {interval} {timeGrain} />
+      {/if}
+    </div>
+  </svelte:fragment>
+</Chip>
+
+{#if comparisonTimeRange && parsedComparisonTime}
+  <Chip type="time" readOnly>
+    <svelte:fragment slot="body">
+      <div class="text-fg-primary px-2">
+        {m.time_vs()}
+        <span class:font-bold={hasBoldTimeRange}>
+          {getComparisonLabelFromRange(
+            comparisonTimeRange,
+            parsedComparisonTime,
+          )}
+        </span>
+      </div>
+    </svelte:fragment>
+  </Chip>
+{/if}
diff --git a/web-common/src/features/dashboards/time-controls/TimeFilterManager.svelte.ts b/web-common/src/features/dashboards/time-controls/TimeFilterManager.svelte.ts
new file mode 100644
index 000000000000..8296b8e7a39d
--- /dev/null
+++ b/web-common/src/features/dashboards/time-controls/TimeFilterManager.svelte.ts
@@ -0,0 +1,759 @@
+import { RuntimeClient } from "@rilldata/web-common/runtime-client/v2";
+import { MetricsViewsProvider } from "@rilldata/web-common/features/metrics-views/providers/MetricsViewsProvider.svelte.ts";
+import type { YAMLConfigProvider } from "@rilldata/web-common/features/dashboards/providers/YAMLConfigProvider.svelte.ts";
+import { copySubsetParams } from "@rilldata/web-common/lib/url-utils.ts";
+import type { UrlParamsStore } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
+import {
+  V1TimeGrain,
+  type V1TimeRange,
+} from "@rilldata/web-common/runtime-client";
+import { DEFAULT_TIMEZONE } from "@rilldata/web-common/lib/time/config.ts";
+import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient.ts";
+import { invalidationForMetricsViewData } from "@rilldata/web-common/runtime-client/invalidation.ts";
+import {
+  constructAsOfString,
+  constructNewString,
+  deriveInterval,
+} from "@rilldata/web-common/features/dashboards/time-controls/new-time-controls.ts";
+import {
+  allowedGrainsForInterval,
+  DateTimeUnitToV1TimeGrain,
+  getGrainOrder,
+  MinSupportedDateTimeUnit,
+  MinSupportedGrain,
+  V1TimeGrainToDateTimeUnit,
+  V1TimeGrainToOrder,
+} from "@rilldata/web-common/lib/time/new-grains.ts";
+import { getAdjustedInterval } from "@rilldata/web-common/lib/time/ranges";
+import {
+  overrideRillTimeRef,
+  parseRillTime,
+} from "@rilldata/web-common/features/dashboards/url-state/time-ranges/parser.ts";
+import {
+  RillIsoInterval,
+  RillPeriodToGrainInterval,
+  RillTime,
+  RillTimeLabel,
+} from "@rilldata/web-common/features/dashboards/url-state/time-ranges/RillTime.ts";
+import { DateTime, Interval } from "luxon";
+import { getTruncationGrain } from "@rilldata/web-common/lib/time/rill-time-grains.ts";
+import {
+  TimeComparisonOption,
+  TimeRangePreset,
+} from "@rilldata/web-common/lib/time/types.ts";
+import {
+  getAvailableComparisonsForTimeRange,
+  getComparisonInterval,
+} from "@rilldata/web-common/lib/time/comparisons";
+import { ExploreStateURLParams } from "@rilldata/web-common/features/dashboards/url-state/url-params.ts";
+import { getDefaultTimeRange } from "@rilldata/web-common/features/dashboards/stores/get-rill-default-explore-state.ts";
+import { measureSelection } from "@rilldata/web-common/features/dashboards/time-series/measure-selection/measure-selection.ts";
+import { getDurationObjectFromMS } from "@rilldata/web-common/lib/time/transforms";
+import { getOrderedStartEndDateTime } from "@rilldata/web-common/features/dashboards/time-series/utils.ts";
+import { toStore } from "svelte/store";
+
+type ComparisonTimeRangeOption = {
+  name: TimeComparisonOption;
+  key: number;
+  interval: Interval<true>;
+};
+
+const TimeFilterParams = new Set([
+  ExploreStateURLParams.TimeRange,
+  ExploreStateURLParams.TimeGrain,
+  ExploreStateURLParams.TimeZone,
+  ExploreStateURLParams.TimeDimension,
+  ExploreStateURLParams.ComparisonTimeRange,
+]);
+
+type ScrubRange = {
+  start: DateTime;
+  end: DateTime;
+  isScrubbing: boolean;
+};
+
+export type TimeControlState = {
+  timeRange: string | undefined;
+  timeGrain: V1TimeGrain | undefined;
+  timeZone: string;
+  apiTimeRange: V1TimeRange;
+
+  comparisonTimeRange: string | undefined;
+  showComparison: boolean;
+  apiComparisonTimeRange: V1TimeRange | undefined;
+
+  // Undefined until the metrics view specs resolve. Consumers that gate queries on a time range
+  // need to tell "this dashboard has no time dimension" apart from "we do not know yet".
+  hasTimeSeries: boolean | undefined;
+  ready: boolean;
+};
+
+export class TimeFilterManager implements UrlParamsStore {
+  // State set directly from URL/controls.
+  public timeRange = $state<string | undefined>(undefined);
+  public timeGrain = $state<V1TimeGrain | undefined>(undefined);
+  public timeZone = $state<string>(DEFAULT_TIMEZONE);
+  public timeDimension = $state<string | undefined>(undefined);
+  public comparisonTimeRange = $state<string | undefined>(undefined);
+  public showComparison = $state<boolean>(false);
+  public lastDefinedScrubInterval = $state<Interval<true> | undefined>(
+    undefined,
+  );
+  public scrubInterval = $state<ScrubRange | undefined>(undefined);
+
+  // Computed values
+  public minDate: DateTime<true> | undefined;
+  public maxDate: DateTime<true> | undefined;
+  public interval = $state<Interval<true> | undefined>(undefined);
+  public adjustedInterval = $state<Interval<true> | undefined>(undefined);
+  public comparisonInterval = $state<Interval<true> | undefined>(undefined);
+  public adjustedComparisonInterval = $state<Interval<true> | undefined>(
+    undefined,
+  );
+  public canPanLeft: boolean;
+  public canPanRight: boolean;
+  // For convenience
+  public timeStart: string | undefined;
+  public timeEnd: string | undefined;
+  public apiTimeRange: V1TimeRange;
+  public comparisonTimeStart: string | undefined;
+  public comparisonTimeEnd: string | undefined;
+  public apiComparisonTimeRange: V1TimeRange | undefined;
+
+  // RillTime related values
+  public parsedTime: RillTime | undefined;
+  public truncationGrain: V1TimeGrain | undefined;
+  public ref: RillTimeLabel | string | undefined;
+  public snapToEnd: boolean;
+  public parsedComparisonTime: RillTime | undefined;
+
+  // Options for controls
+  public aggregationOptions: V1TimeGrain[];
+  public comparisonTimeRangeOptions: ComparisonTimeRangeOption[];
+
+  public curParams = $state(new URLSearchParams());
+
+  public hasTimeSeries: boolean | undefined;
+  public ready: boolean;
+
+  // Temporary lock in explore. Once we move whereFilter out of explore, we can remove this.
+  public updating = false;
+  private timeRangeReady = $state(false);
+
+  public constructor(
+    private readonly runtimeClient: RuntimeClient,
+    private readonly metricsViewsProvider: MetricsViewsProvider,
+    private readonly yamlConfigProvider: YAMLConfigProvider,
+    private readonly allowCustomTimeRange: boolean,
+  ) {
+    this.minDate = $derived.by(() => {
+      const minDate = this.metricsViewsProvider.timeRangeSummary?.min
+        ? DateTime.fromISO(this.metricsViewsProvider.timeRangeSummary.min)
+        : undefined;
+      if (!minDate?.isValid) return undefined;
+      return minDate;
+    });
+    this.maxDate = $derived.by(() => {
+      const maxDate = this.metricsViewsProvider.timeRangeSummary?.max
+        ? DateTime.fromISO(this.metricsViewsProvider.timeRangeSummary.max)
+        : undefined;
+      if (!maxDate?.isValid) return undefined;
+      return maxDate;
+    });
+
+    this.canPanLeft = $derived.by(() => {
+      if (!this.minDate || !this.interval) return false;
+      // Selected start - min > 0
+      const diff = this.interval.start.diff(this.minDate);
+      return diff.milliseconds > 0;
+    });
+    this.canPanRight = $derived.by(() => {
+      if (!this.minDate || !this.interval) return false;
+      // max - selected end > 0
+      const diff = this.minDate.diff(this.interval.end);
+      return diff.milliseconds > 0;
+    });
+
+    this.timeStart = $derived.by(() => {
+      const start =
+        this.lastDefinedScrubInterval?.start ?? this.interval?.start;
+      return start?.toJSDate()?.toISOString();
+    });
+    this.timeEnd = $derived.by(() => {
+      const end = this.lastDefinedScrubInterval?.end ?? this.interval?.end;
+      return end?.toJSDate()?.toISOString();
+    });
+    this.apiTimeRange = $derived(<V1TimeRange>{
+      start: this.timeStart,
+      end: this.timeEnd,
+      timeZone: this.timeZone,
+      timeDimension: this.timeDimension,
+    });
+
+    // TODO: calculate vs scrub
+    this.comparisonTimeStart = $derived(
+      this.comparisonInterval?.start.toJSDate().toISOString(),
+    );
+    this.comparisonTimeEnd = $derived(
+      this.comparisonInterval?.end.toJSDate().toISOString(),
+    );
+    this.apiComparisonTimeRange = $derived.by(() => {
+      if (!this.comparisonTimeStart || !this.comparisonTimeEnd)
+        return undefined;
+
+      return <V1TimeRange>{
+        start: this.comparisonTimeStart,
+        end: this.comparisonTimeEnd,
+        timeZone: this.timeZone,
+      };
+    });
+
+    this.parsedTime = $derived.by(() => {
+      if (!this.timeRange) return undefined;
+      try {
+        return parseRillTime(this.timeRange);
+      } catch {
+        return undefined;
+      }
+    });
+    this.truncationGrain = $derived(getTruncationGrain(this.parsedTime));
+    this.ref = $derived(
+      this.parsedTime?.isOldFormat
+        ? RillTimeLabel.Latest
+        : this.parsedTime?.asOfLabel?.label,
+    );
+    this.snapToEnd = $derived(
+      this.parsedTime?.isOldFormat
+        ? true
+        : !!this.parsedTime?.asOfLabel?.offset,
+    );
+
+    this.parsedComparisonTime = $derived.by(() => {
+      if (!this.comparisonTimeRange) return undefined;
+      try {
+        return parseRillTime(this.comparisonTimeRange);
+      } catch {
+        return undefined;
+      }
+    });
+
+    this.aggregationOptions = $derived(
+      allowedGrainsForInterval(
+        this.interval,
+        this.metricsViewsProvider.smallestTimeGrain,
+      ),
+    );
+    this.comparisonTimeRangeOptions = $derived(
+      this.getComparisonTimeRangeOptions(),
+    );
+
+    this.hasTimeSeries = $derived.by(() => {
+      if (!metricsViewsProvider.metricsViewNames.length) return undefined;
+
+      let hasTimeSeries = false;
+      for (const metricsView of metricsViewsProvider.metricsViewNames) {
+        const spec = metricsViewsProvider.specs[metricsView];
+        // Every spec comes from the same ListResources response,
+        // so a missing one means they have not resolved and the answer is not knowable yet.
+        if (!spec) return undefined;
+        if (spec.timeDimension) hasTimeSeries = true;
+      }
+      return hasTimeSeries;
+    });
+
+    this.ready = $derived.by(() => {
+      if (!metricsViewsProvider.ready) return false;
+      for (const metricsView of metricsViewsProvider.metricsViewNames) {
+        const spec = metricsViewsProvider.specs[metricsView];
+        if (!spec) return false;
+        if (!spec.timeDimension) continue;
+        if (!metricsViewsProvider.timeRangeSummaries[metricsView]) return false;
+      }
+
+      // A dashboard without a time dimension has no time range to resolve,
+      // so waiting for one would never let the consumers of this become ready.
+      // The specs have all resolved by this point, so hasTimeSeries is never undefined here.
+      if (this.hasTimeSeries === false) return true;
+
+      return this.timeRangeReady;
+    });
+  }
+
+  public setUrlParams(urlParams: URLSearchParams) {
+    this.curParams = copySubsetParams(urlParams, TimeFilterParams);
+
+    this.timeGrain =
+      DateTimeUnitToV1TimeGrain[
+        urlParams.get(ExploreStateURLParams.TimeGrain)!
+      ];
+
+    this.timeZone =
+      urlParams.get(ExploreStateURLParams.TimeZone) ??
+      this.yamlConfigProvider.defaultTimeZone;
+
+    this.timeDimension =
+      urlParams.get(ExploreStateURLParams.TimeDimension) ?? undefined;
+
+    if (urlParams.has(ExploreStateURLParams.TimeRange)) {
+      void this.applyTimeRange(urlParams.get(ExploreStateURLParams.TimeRange)!);
+    } else {
+      let defaultTimeRange = this.yamlConfigProvider.defaultTimeRange;
+      if (!defaultTimeRange) {
+        defaultTimeRange = getDefaultTimeRange(
+          this.metricsViewsProvider.smallestTimeGrain,
+          this.metricsViewsProvider.timeRangeSummary,
+        );
+      }
+      if (defaultTimeRange) {
+        void this.applyTimeRange(defaultTimeRange);
+      } else {
+        this.timeRange = undefined;
+        this.interval = undefined;
+      }
+    }
+
+    this.showComparison = urlParams.has(
+      ExploreStateURLParams.ComparisonTimeRange,
+    );
+    this.applyComparisonRange(
+      urlParams.get(ExploreStateURLParams.ComparisonTimeRange) ?? "rill-PP",
+    );
+
+    if (urlParams.has(ExploreStateURLParams.HighlightedTimeRange)) {
+      try {
+        const parsedHighlightRange = parseRillTime(
+          urlParams.get(ExploreStateURLParams.HighlightedTimeRange)!,
+        );
+        if (parsedHighlightRange.interval instanceof RillIsoInterval) {
+          const { start, end, interval } =
+            parsedHighlightRange.interval.toLuxonTimes();
+          this.scrubInterval =
+            start && end
+              ? {
+                  start,
+                  end,
+                  isScrubbing: false,
+                }
+              : undefined;
+          this.lastDefinedScrubInterval = interval;
+        }
+      } catch {
+        // no-op
+      }
+    }
+  }
+
+  public applyFilterToParams(urlParams: URLSearchParams) {
+    if (this.timeRange) {
+      urlParams.set(ExploreStateURLParams.TimeRange, this.timeRange);
+    } else {
+      urlParams.delete(ExploreStateURLParams.TimeRange);
+    }
+
+    const mappedGrain = this.timeGrain
+      ? V1TimeGrainToDateTimeUnit[this.timeGrain]
+      : undefined;
+    if (mappedGrain) {
+      urlParams.set(ExploreStateURLParams.TimeGrain, mappedGrain);
+    } else {
+      urlParams.delete(ExploreStateURLParams.TimeGrain);
+    }
+
+    if (this.timeZone !== DEFAULT_TIMEZONE) {
+      urlParams.set(ExploreStateURLParams.TimeZone, this.timeZone);
+    } else {
+      urlParams.delete(ExploreStateURLParams.TimeZone);
+    }
+
+    if (this.timeDimension) {
+      urlParams.set(ExploreStateURLParams.TimeDimension, this.timeDimension);
+    } else {
+      urlParams.delete(ExploreStateURLParams.TimeDimension);
+    }
+
+    if (this.showComparison && this.comparisonTimeRange) {
+      urlParams.set(
+        ExploreStateURLParams.ComparisonTimeRange,
+        this.comparisonTimeRange,
+      );
+    } else {
+      urlParams.delete(ExploreStateURLParams.ComparisonTimeRange);
+    }
+
+    if (this.lastDefinedScrubInterval) {
+      const scrubStart = this.lastDefinedScrubInterval.start
+        .toJSDate()
+        .toISOString();
+      const scrubEnd = this.lastDefinedScrubInterval.end
+        .toJSDate()
+        .toISOString();
+      urlParams.set(
+        ExploreStateURLParams.HighlightedTimeRange,
+        `${scrubStart},${scrubEnd}`,
+      );
+    } else {
+      urlParams.delete(ExploreStateURLParams.HighlightedTimeRange);
+    }
+  }
+
+  // Mutation methods used by different UI controls
+
+  public onSelectRange(range: string, ignoreSnap?: boolean) {
+    try {
+      const parsed = parseRillTime(range);
+
+      const isPeriodToDate =
+        parsed.interval instanceof RillPeriodToGrainInterval;
+
+      const rangeGrainOrder =
+        getGrainOrder(parsed.rangeGrain) - (isPeriodToDate ? 1 : 0);
+
+      const asOfGrainOrder = getGrainOrder(this.truncationGrain);
+
+      const shouldAppendAsOfString =
+        !parsed.asOfLabel && !(parsed.interval instanceof RillIsoInterval);
+
+      if (asOfGrainOrder > rangeGrainOrder && parsed.rangeGrain) {
+        this.truncationGrain = parsed.rangeGrain;
+      }
+
+      if (shouldAppendAsOfString) {
+        const hasAsOfClause = !!this.parsedTime?.asOfLabel;
+
+        const isTruncationGrainAllowed =
+          getGrainOrder(this.truncationGrain) >=
+          this.metricsViewsProvider.smallestGrainOrder;
+        const newAsOfString = constructAsOfString(
+          this.ref ?? RillTimeLabel.Latest,
+          ignoreSnap
+            ? undefined
+            : this.truncationGrain
+              ? isTruncationGrainAllowed
+                ? this.truncationGrain
+                : parsed.rangeGrain
+              : (this.metricsViewsProvider.smallestTimeGrain ??
+                V1TimeGrain.TIME_GRAIN_MINUTE),
+          hasAsOfClause || this.snapToEnd ? this.snapToEnd : true,
+        );
+
+        overrideRillTimeRef(parsed, newAsOfString);
+      }
+
+      return this.applyTimeRange(parsed.toString());
+    } catch {
+      // This function is called in a controlled manner and should not throw
+    }
+  }
+
+  public onPan(direction: "left" | "right") {
+    if (!this.interval) return;
+
+    const currentRangeWidth = this.interval.length("milliseconds");
+    const panAmount = getDurationObjectFromMS(currentRangeWidth);
+
+    const newStart = this.interval.start
+      .setZone(this.timeZone)
+      [direction === "left" ? "plus" : "minus"](panAmount)
+      .toISO();
+    const newEnd = this.interval.end
+      .setZone(this.timeZone)
+      [direction === "left" ? "plus" : "minus"](panAmount)
+      .toISO();
+
+    void this.applyTimeRange(`${newStart} to ${newEnd}`);
+  }
+
+  public onSelectGrainEnding(grain: V1TimeGrain | undefined) {
+    if (!this.timeRange) return;
+
+    const newString = constructNewString({
+      currentString: this.timeRange,
+      truncationGrain: grain === this.truncationGrain ? undefined : grain,
+      snapToEnd: grain === this.truncationGrain ? false : this.snapToEnd,
+      ref: this.ref,
+    });
+
+    return this.applyTimeRange(newString);
+  }
+
+  public onSelectGrain(grain: V1TimeGrain) {
+    this.timeGrain = grain;
+  }
+
+  public onSelectZone(tz: string) {
+    this.timeZone = tz;
+    if (!this.timeRange || !this.parsedTime) return;
+
+    if (this.parsedTime.interval instanceof RillIsoInterval) {
+      // TODO
+    } else {
+      void this.applyTimeRange(this.timeRange, tz);
+    }
+  }
+
+  public onSelectAsOfOption(
+    ref: RillTimeLabel | string | undefined,
+    inclusive: boolean,
+  ) {
+    if (!this.timeRange) return;
+    const newString = constructNewString({
+      currentString: this.timeRange,
+      truncationGrain: this.truncationGrain,
+      snapToEnd: ref === "watermark" ? false : inclusive,
+      ref,
+    });
+
+    return this.applyTimeRange(newString);
+  }
+
+  public onSelectTimeDimension(timeDimension: string) {
+    this.timeDimension = timeDimension;
+    if (this.timeRange) void this.applyTimeRange(this.timeRange);
+  }
+
+  public onSelectComparisonRange(range: string) {
+    this.applyComparisonRange(range);
+    this.showComparison = true;
+  }
+
+  public onToggleShowComparison() {
+    this.showComparison = !this.showComparison;
+  }
+
+  public onScrubRange({ start, end, isScrubbing }: ScrubRange) {
+    this.scrubInterval = {
+      start,
+      end,
+      isScrubbing,
+    };
+    if (isScrubbing) return;
+
+    ({ start, end } = getOrderedStartEndDateTime(start, end));
+    const newInterval = Interval.fromDateTimes(start, end);
+    if (newInterval.isValid) this.lastDefinedScrubInterval = newInterval;
+  }
+
+  public resetScrubRange() {
+    this.lastDefinedScrubInterval = undefined;
+    this.scrubInterval = undefined;
+  }
+
+  public createLocalFilterStore(metricsViewName: string) {
+    return new TimeFilterManager(
+      this.runtimeClient,
+      new MetricsViewsProvider(this.metricsViewsProvider.runtimeClient, [
+        metricsViewName,
+      ]),
+      this.yamlConfigProvider,
+      this.allowCustomTimeRange,
+    );
+  }
+
+  public getTimeControlStore() {
+    return toStore(
+      () =>
+        ({
+          timeRange: this.timeRange,
+          timeGrain: this.timeGrain,
+          timeZone: this.timeZone,
+          apiTimeRange: this.apiTimeRange,
+
+          comparisonTimeRange: this.comparisonTimeRange,
+          showComparison: this.showComparison,
+          apiComparisonTimeRange: this.showComparison
+            ? this.apiComparisonTimeRange
+            : undefined,
+
+          hasTimeSeries: this.hasTimeSeries,
+          ready: this.ready,
+        }) satisfies TimeControlState,
+    );
+  }
+
+  private async applyTimeRange(newTimeRange: string, tz = this.timeZone) {
+    measureSelection.clear();
+    this.resetScrubRange();
+
+    // The runtime resolves the range against the metrics views, so their names are all this needs.
+    // The time range summary can still be loading at this point;
+    // waiting for it here would drop the range the dashboard loaded with.
+    if (
+      !this.metricsViewsProvider.metricsViewNames.length ||
+      this.timeRange === newTimeRange
+    ) {
+      return;
+    }
+
+    // This should be returned by the API, but it is not yet implemented
+    const includesTimeZoneOffset = newTimeRange.includes("tz");
+
+    if (includesTimeZoneOffset) {
+      const timeZone = newTimeRange.match(/tz (.*)/)?.[1];
+
+      if (timeZone) this.timeZone = timeZone;
+    }
+
+    await queryClient.cancelQueries({
+      predicate: (query) =>
+        this.metricsViewsProvider.metricsViewNames.some((mvName) =>
+          invalidationForMetricsViewData(query, mvName),
+        ),
+    });
+
+    const promises = this.metricsViewsProvider.metricsViewNames.map(
+      (mvName) => {
+        return deriveInterval(
+          newTimeRange,
+          this.runtimeClient,
+          mvName,
+          tz ?? "UTC",
+          this.timeDimension,
+          // executionTime, // TODO
+        );
+      },
+    );
+    const intervals = await Promise.all(promises);
+    let latestInterval: Interval<true> | undefined = undefined;
+    let smallestGrain: V1TimeGrain | undefined = undefined;
+    intervals.forEach(({ interval, grain }) => {
+      if (
+        interval?.isValid &&
+        interval.end &&
+        (!latestInterval || latestInterval.end < interval.end)
+      ) {
+        latestInterval = interval;
+      }
+
+      if (
+        grain &&
+        (!smallestGrain ||
+          V1TimeGrainToOrder[grain] < V1TimeGrainToOrder[smallestGrain])
+      ) {
+        smallestGrain = grain;
+      }
+    });
+    if (!latestInterval) return;
+
+    const allowedGrains = allowedGrainsForInterval(
+      latestInterval,
+      this.metricsViewsProvider.smallestTimeGrain ?? MinSupportedGrain,
+    );
+
+    const finalGrain =
+      this.timeGrain && allowedGrains.includes(this.timeGrain)
+        ? this.timeGrain
+        : smallestGrain && allowedGrains.includes(smallestGrain)
+          ? smallestGrain
+          : allowedGrains[0];
+
+    this.interval = latestInterval;
+    this.adjustedInterval = getAdjustedInterval(
+      latestInterval,
+      finalGrain,
+      this.timeZone,
+    );
+    this.timeRange = newTimeRange;
+    this.timeGrain = finalGrain;
+
+    // Recalc comparison time range internal.
+    if (this.comparisonTimeRange)
+      this.applyComparisonRange(this.comparisonTimeRange);
+
+    this.timeRangeReady = true;
+  }
+
+  private applyComparisonRange(newComparisonTimeRange: string) {
+    this.comparisonTimeRange = newComparisonTimeRange;
+    if (!this.timeRange) return;
+
+    try {
+      const parsed = parseRillTime(this.timeRange);
+      // Mark comparison as contiguous when we have an absolute primary time range
+      if (parsed.interval instanceof RillIsoInterval) {
+        this.comparisonTimeRange = TimeComparisonOption.CONTIGUOUS;
+      }
+      if (this.timeRange === TimeRangePreset.ALL_TIME) {
+        this.showComparison = false;
+      }
+
+      this.comparisonInterval = getComparisonInterval(
+        this.interval,
+        newComparisonTimeRange,
+        this.timeZone,
+      );
+      this.adjustedComparisonInterval = this.comparisonInterval
+        ? getAdjustedInterval(
+            this.comparisonInterval,
+            this.timeGrain,
+            this.timeZone,
+          )
+        : undefined;
+    } catch {
+      // no-op
+    }
+  }
+
+  private getComparisonTimeRangeOptions() {
+    // Type-safety
+    if (
+      !this.minDate ||
+      !this.maxDate ||
+      !this.timeRange ||
+      !this.interval?.isValid ||
+      !this.interval.start ||
+      !this.interval.end
+    )
+      return [];
+
+    let allOptions: TimeComparisonOption[];
+
+    const timeRange = this.yamlConfigProvider.timeRanges?.find(
+      (tr) => tr.range === this.timeRange,
+    );
+    if (timeRange?.comparisonTimeRanges?.length) {
+      allOptions =
+        timeRange.comparisonTimeRanges?.map(
+          (co) => co.offset as TimeComparisonOption,
+        ) ?? [];
+      if (this.allowCustomTimeRange)
+        allOptions.push(TimeComparisonOption.CUSTOM);
+    } else {
+      allOptions = [...Object.values(TimeComparisonOption)];
+      if (!this.allowCustomTimeRange) {
+        allOptions = allOptions.filter(
+          (o) => o !== TimeComparisonOption.CUSTOM,
+        );
+      }
+    }
+
+    const timeComparisonOptions = getAvailableComparisonsForTimeRange(
+      this.minDate.toJSDate(),
+      this.maxDate.toJSDate(),
+      this.interval.start.toJSDate(),
+      this.interval.end.toJSDate(),
+      allOptions,
+      this.timeZone,
+    );
+
+    return timeComparisonOptions
+      .map((co, i) => {
+        const comparisonTimeRange = getComparisonInterval(
+          this.interval,
+          co,
+          this.timeZone,
+        );
+
+        if (
+          !comparisonTimeRange ||
+          !comparisonTimeRange.length(MinSupportedDateTimeUnit)
+        )
+          return undefined;
+        return <ComparisonTimeRangeOption>{
+          name: co,
+          key: i,
+          interval: comparisonTimeRange,
+        };
+      })
+      .filter(Boolean) as ComparisonTimeRangeOption[];
+  }
+}
diff --git a/web-common/src/features/dashboards/time-controls/TimeFilters.svelte b/web-common/src/features/dashboards/time-controls/TimeFilters.svelte
new file mode 100644
index 000000000000..fe69a3679f80
--- /dev/null
+++ b/web-common/src/features/dashboards/time-controls/TimeFilters.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+  import * as Tooltip from "@rilldata/web-common/components/tooltip-v2";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+  import { Nudge } from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components";
+  import TimeRangePicker from "@rilldata/web-common/features/dashboards/time-controls/TimeRangePicker.svelte";
+  import type { TimeFiltersConfig } from "@rilldata/web-common/features/dashboards/time-controls/time-filters-config.ts";
+  import Calendar from "@rilldata/web-common/components/icons/Calendar.svelte";
+  import Metadata from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components/Metadata.svelte";
+  import ComparisonTimeRangePicker from "@rilldata/web-common/features/dashboards/time-controls/ComparisonTimeRangePicker.svelte";
+  import type { DashboardConfigProvider } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
+
+  let {
+    timeFilterManager,
+    dashboardConfigProvider,
+    context,
+    config,
+  }: {
+    timeFilterManager: TimeFilterManager;
+    dashboardConfigProvider: DashboardConfigProvider;
+    context: string;
+    config: TimeFiltersConfig;
+  } = $props();
+  let hidePan = $derived(config.hidePan ?? false);
+  let canPanLeft = $derived(config.canPanLeft ?? !hidePan);
+  let canPanRight = $derived(config.canPanRight ?? !hidePan);
+
+  let { timeZone, minDate, maxDate } = $derived(timeFilterManager);
+
+  let { metricsViewsProvider, yamlConfigProvider } = $derived(
+    dashboardConfigProvider,
+  );
+</script>
+
+<div class="flex flex-row flex-wrap gap-x-2 gap-y-1.5 items-center">
+  <Tooltip.Root delayDuration={0}>
+    <Tooltip.Trigger class="cursor-default text-fg-secondary">
+      <Calendar size="16px" />
+    </Tooltip.Trigger>
+    <Tooltip.Content side="bottom" sideOffset={10}>
+      <Metadata
+        {timeZone}
+        timeStart={minDate?.toJSDate()}
+        timeEnd={maxDate?.toJSDate()}
+      />
+    </Tooltip.Content>
+  </Tooltip.Root>
+
+  <div class="wrapper">
+    {#if !hidePan}
+      <Nudge
+        {canPanLeft}
+        {canPanRight}
+        onPan={(dir) => timeFilterManager.onPan(dir)}
+        direction="left"
+      />
+      <Nudge
+        {canPanLeft}
+        {canPanRight}
+        onPan={(dir) => timeFilterManager.onPan(dir)}
+        direction="right"
+      />
+    {/if}
+
+    <TimeRangePicker
+      {timeFilterManager}
+      {metricsViewsProvider}
+      {yamlConfigProvider}
+      {context}
+      {config}
+    />
+  </div>
+
+  <ComparisonTimeRangePicker
+    {timeFilterManager}
+    {metricsViewsProvider}
+    {config}
+  />
+</div>
+
+<style lang="postcss">
+  .wrapper {
+    @apply flex w-fit;
+    @apply h-[26px] rounded-full;
+    @apply overflow-hidden;
+  }
+
+  /* Match both direct child buttons and buttons inside display:contents wrappers */
+  :global(.wrapper > button),
+  :global(.wrapper > :not(button) > button) {
+    @apply border text-fg-primary -ml-px cursor-pointer;
+    @apply px-2 flex items-center justify-center bg-surface-background;
+  }
+
+  :global(.wrapper > button:first-child),
+  :global(.wrapper > :first-child > button:first-child) {
+    @apply ml-0 pl-2.5 rounded-l-full;
+  }
+
+  :global(.wrapper > button:last-child),
+  :global(.wrapper > :last-child > button:last-child) {
+    @apply pr-2.5 rounded-r-full;
+  }
+
+  :global(.wrapper > button:focus),
+  :global(.wrapper > :not(button) > button:focus) {
+    @apply z-50;
+  }
+
+  :global(.wrapper > button:hover:not(:disabled)),
+  :global(.wrapper > :not(button) > button:hover:not(:disabled)) {
+    @apply bg-surface-hover;
+  }
+</style>
diff --git a/web-common/src/features/dashboards/time-controls/TimeRangePicker.svelte b/web-common/src/features/dashboards/time-controls/TimeRangePicker.svelte
new file mode 100644
index 000000000000..d2f7913af389
--- /dev/null
+++ b/web-common/src/features/dashboards/time-controls/TimeRangePicker.svelte
@@ -0,0 +1,489 @@
+<script lang="ts">
+  import * as Popover from "@rilldata/web-common/components/popover";
+  import * as Tooltip from "@rilldata/web-common/components/tooltip-v2";
+  import RangeDisplay from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components/RangeDisplay.svelte";
+  import PrimaryRangeTooltip from "@rilldata/web-common/features/dashboards/time-controls/super-pill/new-time-dropdown/PrimaryRangeTooltip.svelte";
+  import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
+  import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+  import {
+    ALL_TIME_RANGE_ALIAS,
+    bucketYamlRanges,
+    getRangeLabel,
+    RILL_TO_LABEL,
+  } from "@rilldata/web-common/features/dashboards/time-controls/new-time-controls.ts";
+  import { getAbbreviationForIANA } from "@rilldata/web-common/lib/time/timezone";
+  import { DateTime } from "luxon";
+  import type { MetricsViewsProvider } from "@rilldata/web-common/features/metrics-views/providers/MetricsViewsProvider.svelte.ts";
+  import TimeRangeSearch from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components/TimeRangeSearch.svelte";
+  import TimeRangeOptionGroup from "@rilldata/web-common/features/dashboards/time-controls/super-pill/new-time-dropdown/TimeRangeOptionGroup.svelte";
+  import Calendar from "@rilldata/web-common/components/icons/Calendar.svelte";
+  import Globe from "@rilldata/web-common/components/icons/Globe.svelte";
+  import SyntaxElement from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components/SyntaxElement.svelte";
+  import ZoneContent from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components/ZoneContent.svelte";
+  import { Clock, Check } from "lucide-svelte";
+  import {
+    MinSupportedGrain,
+    V1TimeGrainToDateTimeUnit,
+  } from "@rilldata/web-common/lib/time/new-grains.ts";
+  import CalendarPlusDateInput from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components/CalendarPlusDateInput.svelte";
+  import {
+    RillAllTimeInterval,
+    RillIsoInterval,
+    RillPeriodToGrainInterval,
+  } from "@rilldata/web-common/features/dashboards/url-state/time-ranges/RillTime.ts";
+  import TruncationSelector from "@rilldata/web-common/features/dashboards/time-controls/super-pill/new-time-dropdown/TruncationSelector.svelte";
+  import type { TimeFiltersConfig } from "@rilldata/web-common/features/dashboards/time-controls/time-filters-config.ts";
+  import type { YAMLConfigProvider } from "@rilldata/web-common/features/dashboards/providers/YAMLConfigProvider.svelte.ts";
+  import { getTimeDimensionOptions } from "@rilldata/web-common/features/dashboards/time-controls/time-range-utils.ts";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+
+  let {
+    timeFilterManager,
+    metricsViewsProvider,
+    yamlConfigProvider,
+    context,
+    config,
+  }: {
+    timeFilterManager: TimeFilterManager;
+    metricsViewsProvider: MetricsViewsProvider;
+    yamlConfigProvider: YAMLConfigProvider;
+    context: string;
+    config: TimeFiltersConfig;
+  } = $props();
+  let {
+    showTimeDimensionSelector = false,
+    lockTimeZone = false,
+    showFullRange = true,
+    showWatermark = false,
+  } = $derived(config);
+
+  let {
+    timeRange: timeString,
+    timeGrain,
+    timeZone,
+    timeDimension,
+
+    minDate,
+    maxDate,
+
+    interval,
+    parsedTime,
+    truncationGrain,
+    ref,
+    snapToEnd,
+  } = $derived(timeFilterManager);
+
+  let { smallestTimeGrain, maxQueryTimeRange } = $derived(metricsViewsProvider);
+
+  let {
+    restrictedDimensions,
+    primaryTimeDimension,
+    timeRanges,
+    allowCustomTimeRange,
+    timeZones,
+  } = $derived(yamlConfigProvider);
+
+  let rangeBuckets = $derived(
+    bucketYamlRanges(timeRanges, smallestTimeGrain, true, maxQueryTimeRange),
+  );
+
+  let timeDimensions = $derived(
+    getTimeDimensionOptions(
+      metricsViewsProvider.dimensions,
+      restrictedDimensions,
+    ),
+  );
+
+  let watermark = $derived(
+    showWatermark && metricsViewsProvider.timeRangeSummary?.watermark
+      ? DateTime.fromISO(metricsViewsProvider.timeRangeSummary.watermark)
+      : undefined,
+  );
+
+  let open = $state(false);
+  // svelte-ignore state_referenced_locally
+  let searchValue: string | undefined = $state(timeString);
+  let timeZonePickerOpen = $state(false);
+  let timeAxisPickerOpen = $state(false);
+  let showCalendarPicker = $state(false);
+
+  let allTimeAllowed = $derived(
+    !(maxQueryTimeRange && maxQueryTimeRange.as("milliseconds") > 0),
+  );
+  let selectedLabel = $derived(getRangeLabel(timeString));
+  let zoneAbbreviation = $derived(
+    getAbbreviationForIANA(maxDate ?? DateTime.now(), timeZone),
+  );
+  let dateTimeAnchor = $derived(returnAnchor(ref, timeZone));
+
+  let usingLegacyTime = $derived(parsedTime?.isOldFormat);
+  let hideTruncationSelector = $derived(
+    parsedTime?.interval instanceof RillIsoInterval ||
+      parsedTime?.interval instanceof RillAllTimeInterval,
+  );
+
+  let timeColumn = $derived(timeDimension || primaryTimeDimension);
+  let activeTimeDimension = $derived(
+    timeDimensions.find((d) => d.value === timeColumn),
+  );
+
+  // Zone is taken as a param to make it reactive
+  function returnAnchor(
+    asOf: string | undefined,
+    zone: string,
+  ): DateTime | undefined {
+    if (!maxDate) return DateTime.now().setZone(zone);
+    if (asOf === "latest") {
+      return maxDate.setZone(zone);
+    } else if (asOf === "watermark" && watermark) {
+      return watermark.setZone(zone);
+    } else if (asOf === "now" || !asOf) {
+      return DateTime.now().setZone(zone);
+    }
+  }
+
+  function onSelectRange(range: string, ignoreSnap?: boolean) {
+    open = false;
+    void timeFilterManager.onSelectRange(range, ignoreSnap);
+  }
+
+  function onSelectTimeZone(zone: string) {
+    open = false;
+    timeZonePickerOpen = false;
+    timeFilterManager.onSelectZone(zone);
+  }
+
+  function onSelectTimeDimension(dim: string) {
+    open = false;
+    timeAxisPickerOpen = false;
+    timeFilterManager.onSelectTimeDimension(dim);
+  }
+</script>
+
+<svelte:window
+  onkeydown={(e) => {
+    if (e.metaKey && e.key === "k") {
+      open = !open;
+    }
+  }}
+/>
+
+<Popover.Root
+  bind:open
+  onOpenChange={(o) => {
+    if (o) {
+      searchValue = timeString;
+    }
+  }}
+>
+  <Tooltip.Root delayDuration={800} ignoreNonKeyboardFocus>
+    <Tooltip.Trigger>
+      {#snippet child({ props: tooltipProps })}
+        <Popover.Trigger>
+          {#snippet child({ props: popoverProps })}
+            <button
+              {...tooltipProps}
+              {...popoverProps}
+              class="flex gap-x-1.5"
+              aria-label={m.dashboard_select_time_range()}
+              type="button"
+            >
+              {#if timeString}
+                <b class="line-clamp-1 flex-none">
+                  {#if selectedLabel?.startsWith("-") || !isNaN(Number(selectedLabel?.[0]))}
+                    {m.dashboard_custom()}
+                  {:else}
+                    {selectedLabel}
+                  {/if}
+                </b>
+              {/if}
+
+              {#if showFullRange}
+                <RangeDisplay {interval} {timeGrain} />
+
+                <div
+                  class="font-bold bg-surface-muted rounded-[2px] p-1 py-0 text-fg-secondary text-[11px]"
+                >
+                  {zoneAbbreviation}
+                </div>
+              {/if}
+
+              <span
+                class="flex-none transition-transform"
+                class:-rotate-180={open}
+              >
+                <CaretDownIcon />
+              </span>
+            </button>
+          {/snippet}
+        </Popover.Trigger>
+      {/snippet}
+    </Tooltip.Trigger>
+
+    <Tooltip.Content side="bottom" sideOffset={8} class="z-50">
+      {#if interval}
+        <PrimaryRangeTooltip
+          {timeString}
+          {interval}
+          timeDimensionLabel={activeTimeDimension?.label}
+          timeDimensionDescription={activeTimeDimension?.description}
+        />
+      {/if}
+    </Tooltip.Content>
+  </Tooltip.Root>
+
+  <Popover.Content
+    align="start"
+    class="p-0 w-fit overflow-hidden flex flex-col"
+  >
+    <TimeRangeSearch
+      inError={!parsedTime && !!timeString && !usingLegacyTime}
+      width={showCalendarPicker ? 456 : 224}
+      {context}
+      {timeString}
+      bind:searchValue
+      {onSelectRange}
+    />
+
+    <div
+      class="flex w-56 max-h-fit"
+      class:!w-[456px]={showCalendarPicker}
+      style:height="470px"
+    >
+      <div
+        class="flex flex-col w-56 overflow-y-auto overflow-x-hidden flex-none py-1"
+      >
+        <div class="overflow-x-hidden">
+          <TimeRangeOptionGroup
+            {timeString}
+            options={rangeBuckets.custom}
+            onClick={onSelectRange}
+          />
+
+          <TimeRangeOptionGroup
+            {timeString}
+            options={rangeBuckets.latest}
+            onClick={onSelectRange}
+          />
+
+          <TimeRangeOptionGroup
+            {timeString}
+            options={rangeBuckets.periodToDate}
+            onClick={onSelectRange}
+          />
+
+          <TimeRangeOptionGroup
+            {timeString}
+            options={rangeBuckets.previous}
+            onClick={(r) => void onSelectRange(r, true)}
+          />
+
+          {#if allTimeAllowed}
+            <div class="w-full h-fit px-1">
+              <button
+                type="button"
+                role="menuitem"
+                class="group truncate h-7 p-2 text-popover-foreground justify-between overflow-hidden hover:bg-popover-accent rounded-sm w-full select-none flex items-center"
+                onclick={() => void onSelectRange("inf")}
+              >
+                <span class:font-bold={timeString === ALL_TIME_RANGE_ALIAS}>
+                  {RILL_TO_LABEL[ALL_TIME_RANGE_ALIAS]}
+                </span>
+              </button>
+            </div>
+          {/if}
+        </div>
+
+        {#if allowCustomTimeRange}
+          <div class="w-full h-fit px-1">
+            <div class="h-px w-full bg-border my-1"></div>
+            <button
+              type="button"
+              role="menuitem"
+              class:font-bold={false}
+              onclick={() => {
+                showCalendarPicker = !showCalendarPicker;
+              }}
+              class="truncate text-fg-primary w-full text-left gap-x-1 pr-1 hover:bg-popover-accent flex items-center flex-shrink pl-2 h-7 rounded-sm"
+            >
+              <Calendar size="14px" />
+              <div class="mr-auto">{m.dashboard_custom()}</div>
+
+              <CaretDownIcon
+                className="-rotate-90 text-fg-secondary"
+                size="14px"
+              />
+            </button>
+          </div>
+        {/if}
+
+        {#if !lockTimeZone}
+          <div class="w-full h-fit px-1">
+            <div class="h-px w-full bg-border my-1"></div>
+
+            <Popover.Root bind:open={timeZonePickerOpen}>
+              <Popover.Trigger
+                onclick={() => {
+                  showCalendarPicker = false;
+                }}
+                class="group h-7 overflow-hidden hover:bg-popover-accent flex-none rounded-sm w-full select-none flex items-center truncate text-left gap-x-1 pr-1 pl-2"
+              >
+                <div class="flex-none">
+                  <Globe size="14px" className="text-fg-primary" />
+                </div>
+                <div class="mr-auto text-fg-primary">
+                  {m.dashboard_time_zone()}
+                </div>
+                <div class="sr-only group-hover:not-sr-only">
+                  <SyntaxElement range={zoneAbbreviation} />
+                </div>
+                <CaretDownIcon
+                  className="-rotate-90 text-fg-secondary"
+                  size="14px"
+                />
+              </Popover.Trigger>
+
+              <Popover.Content
+                align="center"
+                side="right"
+                sideOffset={12}
+                class="p-1 z-50"
+              >
+                <ZoneContent
+                  {context}
+                  availableTimeZones={timeZones}
+                  activeTimeZone={timeZone}
+                  referencePoint={dateTimeAnchor ??
+                    interval?.end ??
+                    DateTime.now()}
+                  {onSelectTimeZone}
+                />
+              </Popover.Content>
+            </Popover.Root>
+          </div>
+        {/if}
+
+        {#if showTimeDimensionSelector && timeDimensions.length > 1}
+          <div class="w-full h-fit px-1">
+            <div class="h-px w-full bg-border my-1"></div>
+
+            <Popover.Root bind:open={timeAxisPickerOpen}>
+              <Popover.Trigger
+                id="time-axis-trigger-{context}"
+                onclick={() => {
+                  showCalendarPicker = false;
+                }}
+                aria-label={m.dashboard_select_time_axis()}
+                class="group h-7 overflow-hidden hover:bg-surface-hover flex-none rounded-sm w-full select-none flex items-center truncate text-left gap-x-1 pr-1 pl-2"
+              >
+                <div class="flex-none">
+                  <Clock size="14px" />
+                </div>
+                <div class="mr-auto">{m.dashboard_time_axis()}</div>
+                {#if activeTimeDimension}
+                  <div class="sr-only group-hover:not-sr-only">
+                    <SyntaxElement range={activeTimeDimension.label} />
+                  </div>
+                {/if}
+                <CaretDownIcon className="-rotate-90" size="14px" />
+              </Popover.Trigger>
+
+              <Popover.Content
+                align="center"
+                side="right"
+                sideOffset={12}
+                class="p-1 z-50"
+              >
+                {#each timeDimensions as { value, label, description } (value)}
+                  <Tooltip.Root>
+                    <Tooltip.Trigger>
+                      {#snippet child({ props })}
+                        <button
+                          {...props}
+                          class="item"
+                          aria-label={m.dashboard_select_time_dimension({
+                            label,
+                          })}
+                          onclick={() => onSelectTimeDimension(value)}
+                        >
+                          {label}
+                          {#if value === (timeDimension || primaryTimeDimension)}
+                            <Check class="size-4" color="var(--fg-primary)" />
+                          {/if}
+                        </button>
+                      {/snippet}
+                    </Tooltip.Trigger>
+                    {#if description}
+                      <Tooltip.Content
+                        side="right"
+                        sideOffset={8}
+                        class="max-w-64"
+                      >
+                        <div class="font-bold text-fg-inverse">{label}</div>
+                        <div class="text-fg-inverse/70">{description}</div>
+                      </Tooltip.Content>
+                    {/if}
+                  </Tooltip.Root>
+                {/each}
+              </Popover.Content>
+            </Popover.Root>
+          </div>
+        {/if}
+      </div>
+
+      {#if showCalendarPicker}
+        <div class="bg-surface-overlay border-l p-3 size-full overflow-y-auto">
+          <CalendarPlusDateInput
+            {interval}
+            zone={timeZone}
+            minTimeGrain={V1TimeGrainToDateTimeUnit[
+              smallestTimeGrain ?? MinSupportedGrain
+            ]}
+            {minDate}
+            {maxDate}
+            {maxQueryTimeRange}
+            onApply={() => {
+              if (searchValue) onSelectRange(searchValue);
+            }}
+            updateRange={(string) => {
+              searchValue = string;
+            }}
+            closeMenu={() => (open = false)}
+          />
+        </div>
+      {/if}
+    </div>
+  </Popover.Content>
+</Popover.Root>
+
+{#if dateTimeAnchor && !hideTruncationSelector}
+  <TruncationSelector
+    {dateTimeAnchor}
+    grain={truncationGrain}
+    rangeGrain={parsedTime?.rangeGrain ?? truncationGrain}
+    isPeriodToDate={parsedTime?.interval instanceof RillPeriodToGrainInterval}
+    {watermark}
+    latest={maxDate}
+    {smallestTimeGrain}
+    {snapToEnd}
+    {ref}
+    zone={timeZone}
+    onSelectEnding={(g) => timeFilterManager.onSelectGrainEnding(g)}
+    onToggleAlignment={(inclusive) => {
+      timeFilterManager.onSelectAsOfOption(ref, inclusive);
+    }}
+    onSelectAsOfOption={(o) => {
+      timeFilterManager.onSelectAsOfOption(o, snapToEnd);
+    }}
+  />
+{/if}
+
+<style lang="postcss">
+  .item {
+    @apply w-full relative justify-between flex cursor-pointer select-none items-start rounded-sm py-1.5 px-2 gap-x-2 text-xs outline-none;
+  }
+
+  .item:hover {
+    @apply bg-surface-hover text-fg-primary;
+  }
+</style>
diff --git a/web-common/src/features/dashboards/time-controls/new-time-controls.ts b/web-common/src/features/dashboards/time-controls/new-time-controls.ts
index bcf3196a1a35..a2f37b41f1c4 100644
--- a/web-common/src/features/dashboards/time-controls/new-time-controls.ts
+++ b/web-common/src/features/dashboards/time-controls/new-time-controls.ts
@@ -409,7 +409,9 @@ export async function deriveInterval(
       cacheBust,
     });
 
-    const timeRange = response.resolvedTimeRanges?.[0];
+    const timeRange = response.resolvedTimeRanges?.find(
+      (rtr) => rtr.expression === name,
+    );
 
     if (!timeRange?.start || !timeRange?.end) {
       return { interval: Interval.invalid("Invalid time range") };
diff --git a/web-common/src/features/dashboards/time-controls/super-pill/new-time-dropdown/TruncationSelector.svelte b/web-common/src/features/dashboards/time-controls/super-pill/new-time-dropdown/TruncationSelector.svelte
index b6bd51c6fb38..577b0c525af8 100644
--- a/web-common/src/features/dashboards/time-controls/super-pill/new-time-dropdown/TruncationSelector.svelte
+++ b/web-common/src/features/dashboards/time-controls/super-pill/new-time-dropdown/TruncationSelector.svelte
@@ -309,6 +309,7 @@
             onclick={() => {
               onToggleAlignment(!snapToEnd);
             }}
+            label={m.dashboard_anchor_period_end()}
           />
         </div>
       </div>
diff --git a/web-common/src/features/dashboards/time-controls/test/explore-time-filters-variant.ts b/web-common/src/features/dashboards/time-controls/test/explore-time-filters-variant.ts
new file mode 100644
index 000000000000..c81f29bb8d00
--- /dev/null
+++ b/web-common/src/features/dashboards/time-controls/test/explore-time-filters-variant.ts
@@ -0,0 +1,169 @@
+import ExploreExpressionFiltersTest from "@rilldata/web-common/features/dashboards/filters/test/ExploreExpressionFiltersTest.svelte";
+import {
+  mockPointerEventsForComponentTesting,
+  useDashboardFetchMocksForComponentTests,
+  waitForBodyScrollCleanup,
+} from "@rilldata/web-common/features/dashboards/filters/test/filter-test-utils";
+import {
+  type HoistedPageForComponentTests,
+  PageMockForComponentTests,
+} from "@rilldata/web-common/features/dashboards/state-managers/loaders/test/PageMockForComponentTests.ts";
+import { metricsExplorerStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
+import {
+  AD_BIDS_EXPLORE_INIT,
+  AD_BIDS_EXPLORE_NAME,
+  AD_BIDS_METRICS_INIT_WITH_TIME,
+  AD_BIDS_METRICS_NAME,
+  AD_BIDS_PRESET_WITHOUT_TIMESTAMP,
+} from "@rilldata/web-common/features/dashboards/stores/test-data/data";
+import {
+  DEFAULT_TIME_RANGE,
+  RESOLVED_RILL_TIMES,
+  TIME_RANGE_SUMMARY,
+  YAML_TIME_RANGES,
+  YAML_TIME_ZONES,
+} from "@rilldata/web-common/features/dashboards/time-controls/test/rill-time-mocks";
+import { waitForTimeRangeLabel } from "@rilldata/web-common/features/dashboards/time-controls/test/time-filter-test-utils";
+import type { TimeFiltersVariant } from "@rilldata/web-common/features/dashboards/time-controls/test/time-filters-suite";
+import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+import { mockAnimationsForComponentTesting } from "@rilldata/web-common/lib/test/mock-animations";
+import type { DashboardTimeControls } from "@rilldata/web-common/lib/time/types";
+import {
+  RUNTIME_CONTEXT_KEY,
+  RuntimeClient,
+} from "@rilldata/web-common/runtime-client/v2";
+import { render, screen, waitFor } from "@testing-library/svelte";
+import { get } from "svelte/store";
+import { afterAll, beforeEach, expect } from "vitest";
+import type { V1ResolvedTimeRange } from "@rilldata/web-common/runtime-client";
+
+// Url params for the dashboard before any time filter is applied, coming from the yaml preset.
+// A rilltime expression carries characters the url escapes, and the url search history holds the
+// searches verbatim, so these are built through URLSearchParams rather than written out.
+const pageURLForInitialState = (grain: string) =>
+  new URLSearchParams([
+    ["tr", DEFAULT_TIME_RANGE],
+    ["grain", grain],
+    ["measures", "impressions"],
+    ["dims", "publisher"],
+    ["sort_type", "percent"],
+    ["sort_dir", "ASC"],
+  ]).toString();
+const PageURLForInitialState = pageURLForInitialState("day");
+// Explore derives the grain of a range from its resolved start and end, which a component test does
+// not resolve, so the dashboard loads on the smallest grain and the time filter then corrects it to
+// the grain of the range.
+const PageURLBeforeGrainIsResolved = pageURLForInitialState("minute");
+
+/** The label of the range the dashboard loads with, which is what the picker shows on render. */
+const DefaultTimeRangeLabel = /Last 7 days/;
+
+/**
+ * Renders the time filter bar the way the explore dashboard does, so that the time range reaches
+ * the explore state and the url through `DashboardStateSync`.
+ *
+ * Registers the hooks the component tests need, so call it from a `describe`.
+ */
+export function useExploreTimeFiltersVariant(
+  hoistedPage: HoistedPageForComponentTests,
+): TimeFiltersVariant {
+  mockAnimationsForComponentTesting();
+  mockPointerEventsForComponentTesting();
+  const mocks = useDashboardFetchMocksForComponentTests();
+  let pageMock!: PageMockForComponentTests;
+
+  beforeEach(() => {
+    pageMock = new PageMockForComponentTests(hoistedPage);
+
+    mocks.mockMetricsView(AD_BIDS_METRICS_NAME, AD_BIDS_METRICS_INIT_WITH_TIME);
+    mocks.mockMetricsExplore(
+      AD_BIDS_EXPLORE_NAME,
+      AD_BIDS_METRICS_INIT_WITH_TIME,
+      {
+        ...AD_BIDS_EXPLORE_INIT,
+        timeRanges: YAML_TIME_RANGES,
+        timeZones: YAML_TIME_ZONES,
+        defaultPreset: {
+          ...AD_BIDS_PRESET_WITHOUT_TIMESTAMP,
+          timeRange: DEFAULT_TIME_RANGE,
+        },
+      },
+    );
+    mocks.mockTimeRangeSummary(AD_BIDS_METRICS_NAME, TIME_RANGE_SUMMARY);
+    mocks.mockResolvedRillTimes(AD_BIDS_METRICS_NAME, RESOLVED_RILL_TIMES);
+
+    localStorage.clear();
+    sessionStorage.clear();
+    queryClient.clear();
+    metricsExplorerStore.remove(AD_BIDS_EXPLORE_NAME);
+  });
+
+  afterAll(waitForBodyScrollCleanup);
+
+  return {
+    initialUrlSearch: PageURLForInitialState,
+    // The preset lands in the url as soon as the dashboard loads.
+    initialUrlSearchHistory: [
+      PageURLBeforeGrainIsResolved,
+      PageURLForInitialState,
+    ],
+
+    urlSearchWithTimeParams: (timeParams: Record<string, string>) => {
+      // Overriding the params of the initial url keeps them in the order the dashboard writes them,
+      // which is the order the url search assertions compare against.
+      const urlSearch = new URLSearchParams(PageURLForInitialState);
+      Object.entries(timeParams).forEach(([key, value]) =>
+        urlSearch.set(key, value),
+      );
+      return urlSearch.toString();
+    },
+
+    pageMock: () => pageMock,
+
+    timeFilterManager: {
+      getTimeRange: () => testTimeRange(exploreState()?.selectedTimeRange),
+      getTimeGrain: () => exploreState()?.selectedTimeRange?.interval,
+      getComparisonTimeRange: () =>
+        testTimeRange(exploreState()?.selectedComparisonTimeRange),
+      getComparisonEnabled: () => exploreState()?.showTimeComparison ?? false,
+    },
+
+    render: async (initUrlSearch?: string) => {
+      // Make sure to populate the url with the initial states.
+      pageMock.gotoSearch(PageURLForInitialState);
+      if (initUrlSearch) pageMock.gotoSearch(initUrlSearch);
+      render(ExploreExpressionFiltersTest, {
+        props: {
+          exploreName: AD_BIDS_EXPLORE_NAME,
+        },
+        // TODO: we need to make sure every single query uses an explicit queryClient instead of the
+        //       global one. Only then we can use a fresh client here.
+        context: new Map<string | symbol, unknown>([
+          ["$$_queryClient", queryClient],
+          [
+            RUNTIME_CONTEXT_KEY,
+            new RuntimeClient({ host: "http://localhost", instanceId: "test" }),
+          ],
+        ]),
+      });
+      await waitFor(() => expect(screen.getByText("Dashboard loaded!")));
+      // Resolving the interval of the initial range is a network call, so the picker is only ready
+      // for interaction once it shows the range the dashboard loaded with.
+      await waitForTimeRangeLabel(DefaultTimeRangeLabel);
+    },
+  };
+}
+
+function exploreState() {
+  return get(metricsExplorerStore).entities[AD_BIDS_EXPLORE_NAME];
+}
+
+function testTimeRange(timeRange: DashboardTimeControls | undefined) {
+  if (!timeRange?.name) return undefined;
+  return <V1ResolvedTimeRange>{
+    expression: timeRange.name,
+    start: timeRange.start.toISOString(),
+    end: timeRange.end.toISOString(),
+    ...("interval" in timeRange ? { grain: timeRange.interval } : {}),
+  };
+}
diff --git a/web-common/src/features/dashboards/time-controls/test/rill-time-mocks.ts b/web-common/src/features/dashboards/time-controls/test/rill-time-mocks.ts
new file mode 100644
index 000000000000..5009796e0d08
--- /dev/null
+++ b/web-common/src/features/dashboards/time-controls/test/rill-time-mocks.ts
@@ -0,0 +1,85 @@
+import {
+  type V1ResolvedTimeRange,
+  V1TimeGrain,
+} from "@rilldata/web-common/runtime-client";
+
+/**
+ * The time range summary every time filter test runs against.
+ * `latest` in a rilltime expression is `max`, which deliberately sits mid hour so that a snap to a
+ * grain moves the anchor.
+ */
+export const TIME_RANGE_SUMMARY = {
+  min: "2024-01-01T00:00:00Z",
+  max: "2024-03-31T14:30:00Z",
+  watermark: "2024-03-30T14:30:00Z",
+};
+
+/** The range the yaml preset starts the dashboard on. */
+export const DEFAULT_TIME_RANGE = "7D as of latest/D+1D";
+
+/** The ranges the yaml offers, which is what the time range dropdown lists. */
+export const YAML_TIME_RANGES = [
+  { range: "12h" },
+  { range: "24h" },
+  { range: "4W" },
+];
+
+export const YAML_TIME_ZONES = ["UTC", "America/New_York", "Asia/Kathmandu"];
+
+/**
+ * The intervals the runtime resolves rilltime expressions to, keyed by expression.
+ *
+ * The runtime does the resolving, so a test cannot derive these; every expression its interactions
+ * can produce needs an entry here. The intervals below are `latest` snapped to the grain of the
+ * `as of` clause, offset by its padding, and then walked back by the range.
+ */
+export const RESOLVED_RILL_TIMES: Record<string, V1ResolvedTimeRange> = {
+  // latest/D+1D is 2024-04-01T00:00:00Z, minus 7 days.
+  [DEFAULT_TIME_RANGE]: {
+    start: "2024-03-25T00:00:00.000Z",
+    end: "2024-04-01T00:00:00.000Z",
+    grain: V1TimeGrain.TIME_GRAIN_DAY,
+  },
+  "7D as of latest/D": {
+    start: "2024-03-24T00:00:00.000Z",
+    end: "2024-03-31T00:00:00.000Z",
+    grain: V1TimeGrain.TIME_GRAIN_DAY,
+  },
+  "7D as of watermark/D": {
+    start: "2024-03-23T00:00:00.000Z",
+    end: "2024-03-30T00:00:00.000Z",
+    grain: V1TimeGrain.TIME_GRAIN_DAY,
+  },
+  "7D as of watermark/h": {
+    start: "2024-03-23T14:00:00.000Z",
+    end: "2024-03-30T14:00:00.000Z",
+    grain: V1TimeGrain.TIME_GRAIN_DAY,
+  },
+  // The same anchor, minus 4 weeks.
+  "4W as of latest/D+1D": {
+    start: "2024-03-04T00:00:00.000Z",
+    end: "2024-04-01T00:00:00.000Z",
+    grain: V1TimeGrain.TIME_GRAIN_DAY,
+  },
+  // latest/h+1h is 2024-03-31T15:00:00Z, minus 12 hours.
+  "12h as of latest/h+1h": {
+    start: "2024-03-31T03:00:00.000Z",
+    end: "2024-03-31T15:00:00.000Z",
+    grain: V1TimeGrain.TIME_GRAIN_HOUR,
+  },
+  // latest/h+1h is 2024-03-31T15:00:00Z, minus 24 hours.
+  "24h as of latest/h+1h": {
+    start: "2024-03-30T15:00:00.000Z",
+    end: "2024-03-31T15:00:00.000Z",
+    grain: V1TimeGrain.TIME_GRAIN_HOUR,
+  },
+};
+
+/** The time range a test expects once `timeRange` is applied, resolved interval included. */
+export function resolvedTimeRange(timeRange: string) {
+  const resolved = RESOLVED_RILL_TIMES[timeRange];
+  if (!resolved) {
+    throw new Error(`No resolved interval mocked for "${timeRange}"`);
+  }
+  return <V1ResolvedTimeRange>{ expression: timeRange, ...resolved };
+}
diff --git a/web-common/src/features/dashboards/time-controls/test/time-filter-test-utils.ts b/web-common/src/features/dashboards/time-controls/test/time-filter-test-utils.ts
new file mode 100644
index 000000000000..bab68fb3140e
--- /dev/null
+++ b/web-common/src/features/dashboards/time-controls/test/time-filter-test-utils.ts
@@ -0,0 +1,108 @@
+import { act, screen, waitFor } from "@testing-library/svelte";
+import { expect } from "vitest";
+
+/** The picker trigger, whose text content is the time range as the user sees it. */
+export function getTimeRangePicker() {
+  return screen.getByLabelText("Select time range");
+}
+
+/** Opens the time range dropdown. */
+export async function openTimeRangePicker() {
+  await act(() => getTimeRangePicker().click());
+  await waitFor(() =>
+    expect(screen.getByRole("menuitem", { name: /All time/ })).toBeVisible(),
+  );
+}
+
+/**
+ * Picks the range labelled `label` in the time range dropdown and waits for it to be applied.
+ * The menu items carry their rilltime syntax alongside the label,
+ * so `label` is a pattern rather than the accessible name in full.
+ */
+export async function selectTimeRange(label: RegExp) {
+  await openTimeRangePicker();
+  await act(() => screen.getByRole("menuitem", { name: label }).click());
+  // Applying a range needs a network call to resolve its interval,
+  // so the picker only shows the new label once the range has reached the dashboard.
+  // TODO: fix this and make sure the dashboard has the new name immediately and resolved async
+  await waitForTimeRangeLabel(label);
+}
+
+/** Waits for the picker to show `label`, which it does once the range is applied. */
+export async function waitForTimeRangeLabel(label: RegExp) {
+  await waitFor(() => expect(getTimeRangePicker()).toHaveTextContent(label));
+}
+
+export function getSnapPicker() {
+  return screen.getByLabelText("Select reference time and grain");
+}
+
+export async function openSnapPicker() {
+  await act(() => getSnapPicker().click());
+  await waitFor(() =>
+    expect(
+      screen.getByRole("menuitemcheckbox", { name: /latest/ }),
+    ).toBeVisible(),
+  );
+}
+
+export async function selectSnapRefOrGrain(
+  label: string,
+  selectionLabel: string,
+) {
+  await openSnapPicker();
+  await act(() =>
+    screen.getByRole("menuitemcheckbox", { name: label }).click(),
+  );
+  // Applying a range needs a network call to resolve its interval,
+  // so the picker only shows the new label once the range has reached the dashboard.
+  // TODO: fix this and make sure the dashboard has the new name immediately and resolved async
+  await waitFor(() =>
+    expect(getSnapPicker()).toHaveTextContent(selectionLabel),
+  );
+}
+
+function getSnapOffsetToggle() {
+  return screen.getByLabelText("Anchor to period end");
+}
+
+export async function snapOffsetToggleIsDisabled() {
+  await openSnapPicker();
+  await waitFor(() => expect(getSnapOffsetToggle()).toBeVisible());
+  await act(() => getSnapPicker().click());
+}
+
+export async function toggleSnapOffset(label: string) {
+  await openSnapPicker();
+  await act(() => getSnapOffsetToggle().click());
+  await waitFor(() => expect(getSnapPicker()).toHaveTextContent(label));
+  // Snap toggle doesnt auto toggle
+  await act(() => getSnapPicker().click());
+}
+
+export function getComparisonTimeRangePicker() {
+  return screen.getByLabelText("Select time comparison option");
+}
+
+export async function openComparisonTimeRangePicker() {
+  await act(() => getComparisonTimeRangePicker().click());
+  await waitFor(() =>
+    expect(screen.getByRole("menuitem", { name: "Custom" })).toBeVisible(),
+  );
+}
+
+export async function selectComparisonTimeRange(label: string) {
+  await openComparisonTimeRangePicker();
+  await act(() => screen.getByRole("menuitem", { name: label }).click());
+  await waitFor(() =>
+    expect(getComparisonTimeRangePicker()).toHaveTextContent(label),
+  );
+}
+
+export function getToggleComparisonPicker() {
+  return screen.getByLabelText("Toggle time comparison");
+}
+
+export async function toggleComparison() {
+  await act(() => getToggleComparisonPicker().click());
+}
diff --git a/web-common/src/features/dashboards/time-controls/test/time-filters-suite.ts b/web-common/src/features/dashboards/time-controls/test/time-filters-suite.ts
new file mode 100644
index 000000000000..22eae5913713
--- /dev/null
+++ b/web-common/src/features/dashboards/time-controls/test/time-filters-suite.ts
@@ -0,0 +1,296 @@
+import {
+  type V1ResolvedTimeRange,
+  V1TimeGrain,
+} from "@rilldata/web-common/runtime-client";
+import type { PageMockForComponentTests } from "@rilldata/web-common/features/dashboards/state-managers/loaders/test/PageMockForComponentTests.ts";
+import {
+  DEFAULT_TIME_RANGE,
+  resolvedTimeRange,
+} from "@rilldata/web-common/features/dashboards/time-controls/test/rill-time-mocks";
+import {
+  selectComparisonTimeRange,
+  selectSnapRefOrGrain,
+  selectTimeRange,
+  snapOffsetToggleIsDisabled,
+  toggleComparison,
+  toggleSnapOffset,
+} from "@rilldata/web-common/features/dashboards/time-controls/test/time-filter-test-utils";
+import { describe, expect, it } from "vitest";
+
+/**
+ * How a test reads the filter state back.
+ * Explore takes it from the dashboard store the filter bar writes to,
+ * while a standalone filter bar has the manager itself as the only holder of the state.
+ * TODO: this should not be needed and all variants should read/write from the manager.
+ */
+export interface TimeFilterManagerAccessor {
+  getTimeRange(): V1ResolvedTimeRange | undefined;
+  getTimeGrain(): V1TimeGrain | undefined;
+  getComparisonTimeRange(): V1ResolvedTimeRange | undefined;
+  getComparisonEnabled(): boolean;
+}
+
+/**
+ * One way of rendering the filter bar.
+ * The tests in this file drive the UI identically for every variant,
+ * so a variant only covers where the filter state ends up and how it reaches the url.
+ */
+export interface TimeFiltersVariant {
+  /** Renders the filter bar and resolves once it is ready for interaction. */
+  render(initUrlSearch?: string): Promise<void>;
+  timeFilterManager: TimeFilterManagerAccessor;
+  /** Url search of the dashboard before any filter is applied. */
+  initialUrlSearch: string;
+  /** Url searches the dashboard goes through before the first filter is applied. */
+  initialUrlSearchHistory: string[];
+  /** Url search once `timeParams`, the time params of the filter bar, are applied. */
+  urlSearchWithTimeParams(timeParams: Record<string, string>): string;
+  /** A method rather than a field, since the page mock is rebuilt for every test. */
+  pageMock(): PageMockForComponentTests;
+  /** If true, the url search assertions will be no-op. */
+  noUrlSync?: boolean;
+}
+
+/**
+ * The assertions that differ between variants, bound to one of them.
+ * Every test asserts through these, so the test bodies themselves stay variant agnostic.
+ */
+function variantAssertions(variant: TimeFiltersVariant) {
+  return {
+    initialUrlSearch: variant.initialUrlSearch,
+    urlSearchWithTimeParams: (timeParams: Record<string, string>) =>
+      variant.urlSearchWithTimeParams(timeParams),
+
+    assertTimeRange: (expected: V1ResolvedTimeRange) =>
+      expect(variant.timeFilterManager.getTimeRange()).toEqual(expected),
+
+    assertTimeGrain: (expected: V1TimeGrain) =>
+      expect(variant.timeFilterManager.getTimeGrain()).toEqual(expected),
+
+    assertComparisonTimeRange: (expected: V1ResolvedTimeRange) =>
+      expect(variant.timeFilterManager.getComparisonTimeRange()).toEqual(
+        expected,
+      ),
+
+    assertComparisonEnabled: (expected: boolean) =>
+      expect(variant.timeFilterManager.getComparisonEnabled()).toEqual(
+        expected,
+      ),
+
+    assertUrlSearch: (expectedSearch: string) => {
+      if (variant.noUrlSync) return;
+      variant.pageMock().assertSearchParams(expectedSearch);
+    },
+
+    /**
+     * Asserts that the dashboard went through exactly `searches` after it loaded,
+     * which is how the tests catch extra history entries.
+     */
+    assertUrlSearchHistory: (...searches: string[]) => {
+      if (variant.noUrlSync) return;
+      variant
+        .pageMock()
+        .assertSearchHistory([...variant.initialUrlSearchHistory, ...searches]);
+    },
+  };
+}
+
+export function testTimeRangeFilters(variant: TimeFiltersVariant) {
+  const {
+    urlSearchWithTimeParams,
+    assertTimeRange,
+    assertTimeGrain,
+    assertUrlSearch,
+    assertUrlSearchHistory,
+  } = variantAssertions(variant);
+
+  describe("Time range filters", () => {
+    it("Should change time range and keep snap", async () => {
+      await variant.render();
+
+      // The dashboard loads on the yaml default, snapped to the day and padded to include today.
+      assertTimeRange(resolvedTimeRange(DEFAULT_TIME_RANGE));
+      assertTimeGrain(V1TimeGrain.TIME_GRAIN_DAY);
+
+      // A range coarser than the snap keeps the whole `as of` clause, so the new range is anchored
+      // at the same point in time as the one it replaces.
+      await selectTimeRange(/Last 4 weeks/);
+
+      const weeksTimeRange = "4W as of latest/D+1D";
+      assertTimeRange(resolvedTimeRange(weeksTimeRange));
+      // Day is still a grain the wider interval allows, so the grain carries over as well.
+      assertTimeGrain(V1TimeGrain.TIME_GRAIN_DAY);
+      const weeksUrlSearch = urlSearchWithTimeParams({ tr: weeksTimeRange });
+      assertUrlSearch(weeksUrlSearch);
+      // Applying the range should add a single entry to history.
+      assertUrlSearchHistory(weeksUrlSearch);
+
+      // A range finer than the snap narrows it to the grain of the range, keeping the offset.
+      await selectTimeRange(/Last 12 hours/);
+
+      const hoursTimeRange = "12h as of latest/h+1h";
+      assertTimeRange(resolvedTimeRange(hoursTimeRange));
+      assertTimeGrain(V1TimeGrain.TIME_GRAIN_HOUR);
+      const hoursUrlSearch = urlSearchWithTimeParams({
+        tr: hoursTimeRange,
+        grain: "hour",
+      });
+      assertUrlSearch(hoursUrlSearch);
+      assertUrlSearchHistory(weeksUrlSearch, hoursUrlSearch);
+    });
+
+    it("Should change reference and snap grains", async () => {
+      await variant.render();
+
+      // Select 'watermark' as reference
+      await selectSnapRefOrGrain("complete data", "as of complete day end");
+
+      const watermarkTimeRange = "7D as of watermark/D";
+      assertTimeRange(resolvedTimeRange(watermarkTimeRange));
+      // Day is still the grain.
+      assertTimeGrain(V1TimeGrain.TIME_GRAIN_DAY);
+      const watermarkUrlSearch = urlSearchWithTimeParams({
+        tr: watermarkTimeRange,
+      });
+      assertUrlSearch(watermarkUrlSearch);
+      // Applying the changes should add a single entry to history.
+      assertUrlSearchHistory(watermarkUrlSearch);
+
+      // Watermark snap doesn't allow snap to end
+      await snapOffsetToggleIsDisabled();
+
+      // Select 'hour' as snap grain
+      await selectSnapRefOrGrain("hour", "as of complete hour end");
+      const watermarkHourTimeRange = "7D as of watermark/h";
+      assertTimeRange(resolvedTimeRange(watermarkHourTimeRange));
+      assertTimeGrain(V1TimeGrain.TIME_GRAIN_DAY); // Snap doesnt change the selected grain
+      const watermarkHourUrlSearch = urlSearchWithTimeParams({
+        tr: watermarkHourTimeRange,
+        grain: "day",
+      });
+      assertUrlSearch(watermarkHourUrlSearch);
+      assertUrlSearchHistory(watermarkUrlSearch, watermarkHourUrlSearch);
+    });
+
+    it("Should change snap offset", async () => {
+      await variant.render();
+
+      // Toggle to start of time range
+      await toggleSnapOffset("start");
+
+      const defaultStartTimeRange = "7D as of latest/D";
+      assertTimeRange(resolvedTimeRange(defaultStartTimeRange));
+      // Day is still the grain.
+      assertTimeGrain(V1TimeGrain.TIME_GRAIN_DAY);
+      const defaultStartUrlSearch = urlSearchWithTimeParams({
+        tr: defaultStartTimeRange,
+      });
+      assertUrlSearch(defaultStartUrlSearch);
+      // Applying the changes should add a single entry to history.
+      assertUrlSearchHistory(defaultStartUrlSearch);
+    });
+  });
+}
+
+export function testComparisonTimeRangeFilters(variant: TimeFiltersVariant) {
+  const {
+    urlSearchWithTimeParams,
+    assertComparisonTimeRange,
+    assertComparisonEnabled,
+    assertUrlSearch,
+    assertUrlSearchHistory,
+  } = variantAssertions(variant);
+
+  describe("Comparison Time range filters", () => {
+    it("Should toggle comparison time range", async () => {
+      await variant.render();
+
+      assertComparisonEnabled(false);
+      // Comparison time range is always calculated
+      assertComparisonTimeRange({
+        expression: "rill-PP",
+        start: "2024-03-18T00:00:00.000Z",
+        end: "2024-03-25T00:00:00.000Z",
+      });
+      await toggleComparison();
+      assertComparisonEnabled(true);
+      // Comparison time range didnt change after toggling.
+      assertComparisonTimeRange({
+        expression: "rill-PP",
+        start: "2024-03-18T00:00:00.000Z",
+        end: "2024-03-25T00:00:00.000Z",
+      });
+
+      // Url is updated with comparison after enabling
+      const defaultComparisonUrl = urlSearchWithTimeParams({
+        compare_tr: "rill-PP",
+      });
+      assertUrlSearch(defaultComparisonUrl);
+
+      await selectTimeRange(/Last 4 weeks/);
+      assertComparisonEnabled(true);
+      // Comparison time range did change after changing time range.
+      assertComparisonTimeRange({
+        expression: "rill-PP",
+        start: "2024-02-05T00:00:00.000Z",
+        end: "2024-03-04T00:00:00.000Z",
+      });
+
+      // Url is updated with comparison after enabling
+      const last4WeeksComparisonUrl = urlSearchWithTimeParams({
+        tr: "4W as of latest/D+1D",
+        compare_tr: "rill-PP",
+      });
+      assertUrlSearch(last4WeeksComparisonUrl);
+
+      // Only 2 entries are present
+      assertUrlSearchHistory(defaultComparisonUrl, last4WeeksComparisonUrl);
+    });
+
+    it("Should change comparison range on selection", async () => {
+      await variant.render();
+
+      await toggleComparison();
+      assertComparisonEnabled(true);
+      const defaultComparisonUrl = urlSearchWithTimeParams({
+        compare_tr: "rill-PP",
+      });
+
+      await selectComparisonTimeRange("Previous week");
+      console.log(variant.timeFilterManager.getTimeRange());
+      assertComparisonTimeRange({
+        expression: "rill-PW",
+        start: "2024-03-18T00:00:00.000Z",
+        end: "2024-03-25T00:00:00.000Z",
+      });
+      assertComparisonEnabled(true);
+
+      const previousWeekComparisonUrl = urlSearchWithTimeParams({
+        compare_tr: "rill-PW",
+      });
+      assertUrlSearch(previousWeekComparisonUrl);
+
+      await selectTimeRange(/Last 24 hours/);
+      console.log(variant.timeFilterManager.getTimeRange());
+      // Previous week selection was retained and calculated for 24 hrs instead
+      assertComparisonTimeRange({
+        expression: "rill-PW",
+        start: "2024-03-23T15:00:00.000Z",
+        end: "2024-03-24T15:00:00.000Z",
+      });
+
+      const last25PreviousWeekComparisonUrl = urlSearchWithTimeParams({
+        tr: "24h as of latest/h+1h",
+        compare_tr: "rill-PW",
+      });
+      assertUrlSearch(last25PreviousWeekComparisonUrl);
+
+      // Only 3 entries are present
+      assertUrlSearchHistory(
+        defaultComparisonUrl,
+        previousWeekComparisonUrl,
+        last25PreviousWeekComparisonUrl,
+      );
+    });
+  });
+}
diff --git a/web-common/src/features/dashboards/time-controls/time-filters-config.ts b/web-common/src/features/dashboards/time-controls/time-filters-config.ts
new file mode 100644
index 000000000000..72de106e8a07
--- /dev/null
+++ b/web-common/src/features/dashboards/time-controls/time-filters-config.ts
@@ -0,0 +1,12 @@
+export type TimeFiltersConfig = {
+  hidePan?: boolean;
+  canPanLeft?: boolean;
+  canPanRight?: boolean;
+
+  showTimeDimensionSelector?: boolean;
+  lockTimeZone?: boolean;
+  showFullRange?: boolean;
+  showWatermark?: boolean;
+
+  side?: "top" | "right" | "bottom" | "left";
+};
diff --git a/web-common/src/features/dashboards/time-controls/time-range-mappers.ts b/web-common/src/features/dashboards/time-controls/time-range-mappers.ts
index 4b2466118d46..9d37e8bc455a 100644
--- a/web-common/src/features/dashboards/time-controls/time-range-mappers.ts
+++ b/web-common/src/features/dashboards/time-controls/time-range-mappers.ts
@@ -15,6 +15,7 @@ import {
   type V1TimeRange,
   type V1TimeRangeSummary,
 } from "@rilldata/web-common/runtime-client";
+import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 // Temporary fix to split previous complete ranges to duration and round to grain to get it working on backend
 // TODO: Eventually we should support this in the backend.
@@ -236,3 +237,120 @@ export function mapV1TimeRangeToSelectedComparisonTimeRange(
 
   return selectedTimeRange;
 }
+
+export function mapTimeManagerRangeToV1TimeRange(
+  timeFilterManager: TimeFilterManager,
+): V1TimeRange | undefined {
+  if (!timeFilterManager.timeRange) return;
+  if (timeFilterManager.parsedTime) {
+    return {
+      expression: timeFilterManager.timeRange,
+      timeZone: timeFilterManager.timeZone,
+    };
+  }
+
+  // Legacy rill-time handling
+  const timeRange: V1TimeRange = {};
+  switch (timeFilterManager.timeRange) {
+    case TimeRangePreset.CUSTOM:
+      timeRange.start = timeFilterManager.timeStart;
+      timeRange.end = timeFilterManager.timeEnd;
+      break;
+
+    default:
+      if (timeFilterManager.timeRange in PreviousCompleteRangeMap) {
+        const prevCompleteTimeRange: V1TimeRange | undefined =
+          PreviousCompleteRangeMap[timeFilterManager.timeRange];
+        // Backend doesn't support previous complete ranges since it has offset built in.
+        // We add the offset manually as a workaround for now
+        timeRange.isoDuration = prevCompleteTimeRange?.isoDuration;
+        timeRange.isoOffset = prevCompleteTimeRange?.isoOffset;
+        timeRange.roundToGrain = prevCompleteTimeRange?.roundToGrain;
+      } else {
+        timeRange.isoDuration = timeFilterManager.timeRange;
+      }
+      break;
+  }
+
+  timeRange.timeZone = timeFilterManager.timeZone;
+
+  return timeRange;
+}
+
+export function mapTimeManagerComparisonRangeToV1TimeRange(
+  timeFilterManager: TimeFilterManager,
+  timeRange: V1TimeRange | undefined,
+): V1TimeRange | undefined {
+  if (
+    !timeRange ||
+    !timeFilterManager.showComparison ||
+    !timeFilterManager.comparisonTimeRange
+  ) {
+    return undefined;
+  }
+
+  let isoDuration = timeRange.isoDuration;
+  const name = timeFilterManager.comparisonTimeRange;
+
+  if (timeRange.expression && TIME_COMPARISON[name]?.rillTimeOffset) {
+    const rt = parseRillTime(timeRange.expression);
+    if (!rt.isOldFormat) {
+      return {
+        expression:
+          rt.toString() + " offset " + TIME_COMPARISON[name]?.rillTimeOffset,
+      };
+    } else {
+      // Handle old syntax differently until we have the backend parser updated.
+      isoDuration = timeRange.expression;
+    }
+  }
+
+  const comparisonTimeRange: V1TimeRange = {};
+  switch (name) {
+    default:
+      comparisonTimeRange.isoOffset = name;
+      comparisonTimeRange.isoDuration = isoDuration;
+      break;
+    case TimeComparisonOption.CONTIGUOUS:
+      comparisonTimeRange.isoOffset = comparisonTimeRange.isoDuration =
+        isoDuration;
+      break;
+
+    case TimeComparisonOption.CUSTOM:
+      comparisonTimeRange.start = timeFilterManager.comparisonTimeStart;
+      comparisonTimeRange.end = timeFilterManager.comparisonTimeEnd;
+      break;
+  }
+  return comparisonTimeRange;
+}
+
+export function mapV1TimeRangeToRillTime(timeRange: V1TimeRange) {
+  let duration = timeRange.isoDuration;
+
+  const fullRangeKey = `${timeRange.isoDuration ?? ""}_${timeRange.isoOffset ?? ""}_${timeRange.roundToGrain ?? ""}`;
+  if (fullRangeKey in PreviousCompleteRangeReverseMap) {
+    duration = PreviousCompleteRangeReverseMap[fullRangeKey];
+  }
+
+  if (timeRange.start && timeRange.end) {
+    return `${timeRange.start} to ${timeRange.end}`;
+  }
+  return duration ?? timeRange.isoDuration;
+}
+
+export function mapV1TimeRangeToComparisonTimeOption(timeRange: V1TimeRange) {
+  let duration = timeRange.isoOffset;
+
+  const fullRangeKey = `${timeRange.isoDuration ?? ""}_${timeRange.isoOffset ?? ""}_${timeRange.roundToGrain ?? ""}`;
+  if (fullRangeKey in PreviousCompleteRangeReverseMap) {
+    duration = PreviousCompleteRangeReverseMap[fullRangeKey];
+  }
+
+  if (timeRange.start && timeRange.end) {
+    return `${timeRange.start} to ${timeRange.end}`;
+  } else if (timeRange.isoOffset === timeRange.isoDuration) {
+    return TimeComparisonOption.CONTIGUOUS;
+  }
+
+  return duration;
+}
diff --git a/web-common/src/features/dashboards/time-controls/time-range-utils.ts b/web-common/src/features/dashboards/time-controls/time-range-utils.ts
index 1bb325c70e2a..3b02f08ccca6 100644
--- a/web-common/src/features/dashboards/time-controls/time-range-utils.ts
+++ b/web-common/src/features/dashboards/time-controls/time-range-utils.ts
@@ -3,63 +3,14 @@
  * this file should be deprecated in favor of the other time utils.
  *
  * */
-import type { TimeRange } from "@rilldata/web-common/lib/time/types";
-import { V1TimeGrain } from "@rilldata/web-common/runtime-client";
-import { TimeRangeName_DEPRECATE } from "./time-control-types";
-
+import {
+  type MetricsViewSpecDimension,
+  MetricsViewSpecDimensionType,
+  V1TimeGrain,
+} from "@rilldata/web-common/runtime-client";
 import { TIME_GRAIN } from "@rilldata/web-common/lib/time/config";
 import { durationToMillis } from "@rilldata/web-common/lib/time/grains";
 
-// May not need this anymore as using TimeGrain objects
-export const supportedTimeGrainEnums = () => {
-  const supportedEnums: string[] = [];
-  const unsupportedTypes = [
-    V1TimeGrain.TIME_GRAIN_UNSPECIFIED,
-    V1TimeGrain.TIME_GRAIN_MILLISECOND,
-    V1TimeGrain.TIME_GRAIN_SECOND,
-  ];
-
-  for (const timeGrain in V1TimeGrain) {
-    if (unsupportedTypes.includes(V1TimeGrain[timeGrain])) {
-      continue;
-    }
-    supportedEnums.push(timeGrain);
-  }
-
-  return supportedEnums;
-};
-
-// Moved to time range and renamed to isTimeRangeValidForMinTimeGrain
-export function isTimeRangeValidForTimeGrain(
-  minTimeGrain: V1TimeGrain,
-  timeRange: TimeRangeName_DEPRECATE,
-): boolean {
-  const timeGrainEnums = Object.values(TIME_GRAIN).map(
-    (timeGrain) => timeGrain.grain,
-  );
-  if (!timeGrainEnums.includes(minTimeGrain)) {
-    return true;
-  }
-  if (!timeRange || timeRange === TimeRangeName_DEPRECATE.ALL_TIME) {
-    return true;
-  }
-
-  const timeRangeDurationMs = getLastXTimeRangeDurationMs(timeRange);
-
-  const allowedTimeGrains = getAllowedTimeGrains(timeRangeDurationMs);
-  const maxAllowedTimeGrain = allowedTimeGrains[allowedTimeGrains.length - 1];
-  return !isGrainBigger(minTimeGrain, maxAllowedTimeGrain);
-}
-
-// Moved to time-grain and renamed
-export function isGrainBigger(
-  grain1: V1TimeGrain,
-  grain2: V1TimeGrain,
-): boolean {
-  if (grain1 === V1TimeGrain.TIME_GRAIN_UNSPECIFIED) return false;
-  return getTimeGrainDurationMs(grain1) > getTimeGrainDurationMs(grain2);
-}
-
 // Moved
 export function getAllowedTimeGrains(timeRangeDurationMs) {
   if (
@@ -142,97 +93,29 @@ export function getDefaultTimeGrain(start: Date, end: Date): V1TimeGrain {
   }
 }
 
-// Not needed
-export const timeGrainStringToEnum = (timeGrain: string): V1TimeGrain => {
-  switch (timeGrain) {
-    case "minute":
-      return V1TimeGrain.TIME_GRAIN_MINUTE;
-    case "hour":
-      return V1TimeGrain.TIME_GRAIN_HOUR;
-    case "day":
-      return V1TimeGrain.TIME_GRAIN_DAY;
-    case "week":
-      return V1TimeGrain.TIME_GRAIN_WEEK;
-    case "month":
-      return V1TimeGrain.TIME_GRAIN_MONTH;
-    case "year":
-      return V1TimeGrain.TIME_GRAIN_YEAR;
-    default:
-      return V1TimeGrain.TIME_GRAIN_UNSPECIFIED;
-  }
-};
-
-// Not needed
-export const timeGrainEnumToYamlString = (timeGrain: V1TimeGrain): string => {
-  if (!timeGrain) return "";
-  switch (timeGrain) {
-    case V1TimeGrain.TIME_GRAIN_MINUTE:
-      return "minute";
-    case V1TimeGrain.TIME_GRAIN_HOUR:
-      return "hour";
-    case V1TimeGrain.TIME_GRAIN_DAY:
-      return "day";
-    case V1TimeGrain.TIME_GRAIN_WEEK:
-      return "week";
-    case V1TimeGrain.TIME_GRAIN_MONTH:
-      return "month";
-    case V1TimeGrain.TIME_GRAIN_YEAR:
-      return "year";
-    default:
-      return timeGrain;
-  }
-};
-
-// This is the wrong way to deal with this. We should be (1) calculating the time range first
-// then (2) getting the exact duration.
-const getLastXTimeRangeDurationMs = (name: TimeRangeName_DEPRECATE): number => {
-  switch (name) {
-    case TimeRangeName_DEPRECATE.LAST_SIX_HOURS:
-      return durationToMillis(TIME_GRAIN.TIME_GRAIN_HOUR.duration) * 6;
-    case TimeRangeName_DEPRECATE.LAST_24_HOURS:
-      return durationToMillis(TIME_GRAIN.TIME_GRAIN_DAY.duration);
-    case TimeRangeName_DEPRECATE.LAST_7_DAYS:
-      return durationToMillis(TIME_GRAIN.TIME_GRAIN_DAY.duration) * 7;
-    case TimeRangeName_DEPRECATE.LAST_4_WEEKS:
-      return durationToMillis(TIME_GRAIN.TIME_GRAIN_DAY.duration) * 28;
-
-    default:
-      throw new Error(`Unknown last X time range name: ${name}`);
-  }
-};
+export function getTimeDimensionOptions(
+  dimensions: MetricsViewSpecDimension[],
+  restrictedDimensions: string[] | undefined,
+) {
+  const timeDimensions = dimensions.filter(
+    (d) =>
+      d.type === MetricsViewSpecDimensionType.DIMENSION_TYPE_TIME &&
+      (!restrictedDimensions || restrictedDimensions.includes(d.name!)),
+  );
 
-// map from time grain to duration in ms.
-const getTimeGrainDurationMs = (timeGrain: V1TimeGrain): number => {
-  switch (timeGrain) {
-    case V1TimeGrain.TIME_GRAIN_MINUTE:
-      return durationToMillis(TIME_GRAIN.TIME_GRAIN_MINUTE.duration);
-    case V1TimeGrain.TIME_GRAIN_HOUR:
-      return durationToMillis(TIME_GRAIN.TIME_GRAIN_HOUR.duration);
-    case V1TimeGrain.TIME_GRAIN_DAY:
-      return durationToMillis(TIME_GRAIN.TIME_GRAIN_DAY.duration);
-    case V1TimeGrain.TIME_GRAIN_WEEK:
-      return durationToMillis(TIME_GRAIN.TIME_GRAIN_DAY.duration) * 7;
-    case V1TimeGrain.TIME_GRAIN_MONTH:
-      return durationToMillis(TIME_GRAIN.TIME_GRAIN_DAY.duration) * 30;
-    case V1TimeGrain.TIME_GRAIN_YEAR:
-      return durationToMillis(TIME_GRAIN.TIME_GRAIN_YEAR.duration);
-    default:
-      throw new Error(`Unknown time grain: ${timeGrain}`);
+  if (restrictedDimensions) {
+    timeDimensions.sort(
+      (a, b) =>
+        restrictedDimensions.indexOf(a.name!) -
+        restrictedDimensions.indexOf(b.name!),
+    );
   }
-};
 
-// might not need it
-export function makeRelativeTimeRange(
-  timeRangeName: TimeRangeName_DEPRECATE,
-  allTimeRange: TimeRange,
-): TimeRange {
-  if (timeRangeName === TimeRangeName_DEPRECATE.ALL_TIME) return allTimeRange;
-  const startTime = new Date(
-    allTimeRange.end.getTime() - getLastXTimeRangeDurationMs(timeRangeName),
-  );
-  return {
-    name: timeRangeName,
-    start: startTime,
-    end: allTimeRange.end,
-  };
+  return timeDimensions.map((timeDim) => {
+    return {
+      value: timeDim.name!,
+      label: timeDim.displayName || timeDim.name!,
+      description: timeDim.description,
+    };
+  });
 }
diff --git a/web-common/src/features/dashboards/time-dimension-details/TDDHeader.svelte b/web-common/src/features/dashboards/time-dimension-details/TDDHeader.svelte
index 71531e532ef2..13504bd5b94b 100644
--- a/web-common/src/features/dashboards/time-dimension-details/TDDHeader.svelte
+++ b/web-common/src/features/dashboards/time-dimension-details/TDDHeader.svelte
@@ -13,15 +13,9 @@
   } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
   import ComparisonSelector from "@rilldata/web-common/features/dashboards/time-controls/ComparisonSelector.svelte";
   import DelayedSpinner from "@rilldata/web-common/features/entity-management/DelayedSpinner.svelte";
-  import type {
-    DashboardTimeControls,
-    TimeRange,
-  } from "@rilldata/web-common/lib/time/types";
-  import { V1TimeGrain } from "@rilldata/web-common/runtime-client";
   import ExportMenu from "../../exports/ExportMenu.svelte";
   import { featureFlags } from "../../feature-flags";
   import { PivotChipType } from "../pivot/types";
-  import { useTimeControlStore } from "../time-controls/time-control-store";
   import TimeGrainSelector from "../time-controls/TimeGrainSelector.svelte";
   import ExcludeButton from "../toolbars/ExcludeButton.svelte";
   import SearchButton from "../toolbars/SearchButton.svelte";
@@ -64,10 +58,16 @@
       dimensions: { getDimensionDisplayName },
     },
     dashboardStore,
-    validSpecStore,
+    dashboardConfigProvider,
     expressionFilterManager,
+    timeFilterManager,
   } = stateManagers;
 
+  let { metricsViewsProvider } = $derived(dashboardConfigProvider);
+  let { smallestTimeGrain } = $derived(metricsViewsProvider);
+
+  let { timeGrain, timeStart, timeEnd } = $derived(timeFilterManager);
+
   const ephemeralDefsByName = $derived(
     new Map(
       ($dashboardStore?.ephemeralMeasures ?? []).map((def) => [def.name, def]),
@@ -140,10 +140,9 @@
 
   function createPivot() {
     showReplacePivotModal = false;
-    const dashboardGrain = $dashboardStore?.selectedTimeRange?.interval;
-    if (!dashboardGrain || !expandedMeasureName) return;
+    if (!timeGrain || !expandedMeasureName) return;
 
-    const timeGrain = V1TimeGrainToDateTimeUnit[dashboardGrain];
+    const dateUnit = V1TimeGrainToDateTimeUnit[timeGrain];
     const rowDimensions = dimensionName
       ? [
           {
@@ -155,8 +154,8 @@
       : [];
     metricsExplorerStore.createPivot(exploreName, rowDimensions, [
       {
-        id: dashboardGrain,
-        title: timeGrain,
+        id: timeGrain,
+        title: dateUnit,
         type: PivotChipType.Time,
       },
       {
@@ -166,52 +165,6 @@
       },
     ]);
   }
-
-  const timeControlsStore = useTimeControlStore(stateManagers);
-
-  const minTimeGrain = $derived($timeControlsStore.minTimeGrain);
-  const timeStart = $derived($timeControlsStore.timeStart);
-  const timeEnd = $derived($timeControlsStore.timeEnd);
-  const selectedTimeRange = $derived($timeControlsStore.selectedTimeRange);
-
-  const activeTimeGrain = $derived(selectedTimeRange?.interval);
-
-  const baseTimeRange = $derived(
-    selectedTimeRange?.start &&
-      selectedTimeRange?.end && {
-        name: selectedTimeRange?.name,
-        start: selectedTimeRange.start,
-        end: selectedTimeRange.end,
-      },
-  );
-
-  function onTimeGrainSelect(timeGrain: V1TimeGrain) {
-    if (baseTimeRange) {
-      makeTimeSeriesTimeRangeAndUpdateAppState(
-        baseTimeRange,
-        timeGrain,
-        $dashboardStore?.selectedComparisonTimeRange,
-      );
-    }
-  }
-
-  function makeTimeSeriesTimeRangeAndUpdateAppState(
-    timeRange: TimeRange,
-    timeGrain: V1TimeGrain,
-    /** we should only reset the comparison range when the user has explicitly chosen a new
-     * time range. Otherwise, the current comparison state should continue to be the
-     * source of truth.
-     */
-    comparisonTimeRange: DashboardTimeControls | undefined,
-  ) {
-    metricsExplorerStore.selectTimeRange(
-      exploreName,
-      timeRange,
-      timeGrain,
-      comparisonTimeRange,
-      $validSpecStore.data?.metricsView ?? {},
-    );
-  }
 </script>
 
 <div class="tdd-header bg-surface-background">
@@ -233,11 +186,11 @@
       <div class="flex items-center gap-x-2">
         <TimeGrainSelector
           tdd
-          {activeTimeGrain}
-          {onTimeGrainSelect}
+          activeTimeGrain={timeGrain}
+          onTimeGrainSelect={(grain) => timeFilterManager.onSelectGrain(grain)}
           {timeStart}
           {timeEnd}
-          {minTimeGrain}
+          minTimeGrain={smallestTimeGrain}
         />
         <SearchableFilterChip
           label={selectedMeasureLabel}
diff --git a/web-common/src/features/dashboards/time-dimension-details/charts/TDDChart.svelte b/web-common/src/features/dashboards/time-dimension-details/charts/TDDChart.svelte
index 38a76962ed4a..83baa5203657 100644
--- a/web-common/src/features/dashboards/time-dimension-details/charts/TDDChart.svelte
+++ b/web-common/src/features/dashboards/time-dimension-details/charts/TDDChart.svelte
@@ -6,10 +6,8 @@
     clearExternalHover,
     setExternalHover,
   } from "@rilldata/web-common/features/components/charts/highlight-controller";
-  import type { ChartProvider } from "@rilldata/web-common/features/components/charts/types";
   import { THEME_STORE_CONTEXT_KEY } from "@rilldata/web-common/features/themes/theme-boundary";
   import type { EphemeralMeasureDef } from "@rilldata/web-common/features/dashboards/ephemeral-measures/types";
-  import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
   import {
     chartBrushStore,
     chartHoverStore,
@@ -18,152 +16,126 @@
   import { MetricsViewSelectors } from "@rilldata/web-common/features/metrics-views/metrics-view-selectors";
   import type { Theme } from "@rilldata/web-common/features/themes/theme";
   import { themeControl } from "@rilldata/web-common/features/themes/theme-control";
-  import type {
-    MetricsViewSpecMeasure,
-    V1Expression,
-    V1TimeRange,
-  } from "@rilldata/web-common/runtime-client";
-  import { V1TimeGrain } from "@rilldata/web-common/runtime-client";
+  import type { MetricsViewSpecMeasure } from "@rilldata/web-common/runtime-client";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
-  import type { Interval } from "luxon";
   import { getContext } from "svelte";
   import type { View } from "svelte-vega";
-  import type { Readable, Writable } from "svelte/store";
+  import type { Writable } from "svelte/store";
   import { readable } from "svelte/store";
   import type { TDDChart } from "../types";
   import {
     createTDDCartesianSpec,
     TDD_TO_COMPONENT_CHART_TYPE,
   } from "./tdd-chart-config";
+  import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
-  export let metricsViewName: string;
-  export let measure: MetricsViewSpecMeasure;
-  export let ephemeralMeasures: EphemeralMeasureDef[] | undefined = undefined;
-  export let timeDimension: string | undefined = undefined;
-  export let interval: Interval<true> | undefined = undefined;
-  export let comparisonInterval: Interval<true> | undefined = undefined;
-  export let timeGranularity: V1TimeGrain | undefined = undefined;
-  export let timeZone: string = "UTC";
-  export let where: V1Expression | undefined = undefined;
-  export let comparisonDimension: string | undefined = undefined;
-  export let dimensionValues: (string | null)[] = [];
-  export let dimensionData: DimensionSeriesData[] = [];
-  export let showComparison: boolean = false;
-  export let showTimeDimensionDetail: boolean = true;
-  export let chartType: TDDChart;
-  export let dynamicYAxis: boolean = false;
-  export let onChartHover: (
-    dimension: undefined | string | null,
-    ts: Date | undefined,
-  ) => void;
-  export let onChartBrushEnd: (interval: { start: Date; end: Date }) => void;
-  export let onChartBrushClear: () => void;
-
-  const client = useRuntimeClient();
+  let {
+    metricsViewName,
+    measure,
+    ephemeralMeasures = undefined,
+    expressionFilterManager,
+    timeFilterManager,
+    timeDimension = undefined,
+    comparisonDimension = undefined,
+    dimensionValues = [],
+    dimensionData = [],
+    showTimeDimensionDetail = true,
+    chartType,
+    dynamicYAxis = false,
+    onChartHover,
+    onChartBrushEnd,
+    onChartBrushClear,
+  }: {
+    metricsViewName: string;
+    measure: MetricsViewSpecMeasure;
+    ephemeralMeasures?: EphemeralMeasureDef[] | undefined;
+    expressionFilterManager: ExpressionFilterManager;
+    timeFilterManager: TimeFilterManager;
+    timeDimension?: string | undefined;
+    comparisonDimension: string | undefined;
+    dimensionValues?: (string | null)[];
+    dimensionData?: DimensionSeriesData[];
+    showTimeDimensionDetail?: boolean;
+    chartType: TDDChart;
+    dynamicYAxis?: boolean;
+    onChartHover: (
+      dimension: undefined | string | null,
+      ts: Date | undefined,
+    ) => void;
+    onChartBrushEnd: (interval: { start: Date; end: Date }) => void;
+    onChartBrushClear: () => void;
+  } = $props();
+
+  const client = $derived(useRuntimeClient());
   const themeStore = getContext<Writable<Theme | undefined>>(
     THEME_STORE_CONTEXT_KEY,
   );
 
-  let provider: ChartProvider;
-  let chartView: View;
+  let chartView = $state<View>(undefined as unknown as View);
 
-  $: ({ current } = themeControl);
-  $: themeMode = $current;
+  let { current } = $derived(themeControl);
+  let themeMode = $derived($current);
 
-  $: measureName = measure.name ?? "";
+  let measureName = $derived(measure.name ?? "");
 
   // Build CartesianChartSpec reactively
-  $: cartesianSpec = createTDDCartesianSpec(
-    metricsViewName,
-    measureName,
-    timeDimension ?? "",
-    comparisonDimension,
-    dimensionValues,
-    dimensionData,
-    showTimeDimensionDetail,
-    dynamicYAxis,
-    ephemeralMeasures,
+  let cartesianSpec = $derived(
+    createTDDCartesianSpec(
+      metricsViewName,
+      measureName,
+      timeDimension ?? "",
+      comparisonDimension,
+      dimensionValues,
+      dimensionData,
+      showTimeDimensionDetail,
+      dynamicYAxis,
+      ephemeralMeasures,
+    ),
   );
 
-  $: componentChartType = TDD_TO_COMPONENT_CHART_TYPE[chartType];
+  let componentChartType = $derived(TDD_TO_COMPONENT_CHART_TYPE[chartType]);
 
-  // Create a TimeAndFilterStore from MeasureChart's props
-  $: timeAndFilterStore = createTimeAndFilterStore(
-    interval,
-    comparisonInterval,
-    timeGranularity,
-    timeZone,
-    where,
-    showComparison,
+  let filtersStore = $derived(
+    expressionFilterManager.getExprStoreForMetricsView(metricsViewName),
   );
+  let timeControlStore = $derived(timeFilterManager.getTimeControlStore());
 
-  function createTimeAndFilterStore(
-    int: Interval<true> | undefined,
-    compInt: Interval<true> | undefined,
-    grain: V1TimeGrain | undefined,
-    timeZone: string,
-    where: V1Expression | undefined,
-    showComp: boolean,
-  ): Readable<TimeAndFilterStore> {
-    const timeRange: V1TimeRange = {
-      start: int?.start?.toUTC().toISO() ?? undefined,
-      end: int?.end?.toUTC().toISO() ?? undefined,
-      timeZone: timeZone,
-    };
-
-    const comparisonTimeRange: V1TimeRange | undefined =
-      showComp && compInt
-        ? {
-            start: compInt.start?.toUTC().toISO() ?? undefined,
-            end: compInt.end?.toUTC().toISO() ?? undefined,
-            timeZone: timeZone,
-          }
-        : undefined;
-
-    return readable({
-      timeRange,
-      comparisonTimeRange,
-      where,
-      timeGrain: grain,
-      showTimeComparison: showComp,
-      timeRangeState: undefined,
-      comparisonTimeRangeState: undefined,
-      hasTimeSeries: true,
-    });
-  }
-
-  $: {
-    provider = new CHART_CONFIG[componentChartType].provider(
-      readable(cartesianSpec),
-      {},
-    );
-  }
-
-  $: metricsViewSelectors = new MetricsViewSelectors(client);
-
-  $: measures = metricsViewSelectors.getMeasuresForMetricView(metricsViewName);
-
-  $: chartDataQuery = provider.createChartDataQuery(client, timeAndFilterStore);
-
-  $: chartData = getChartData({
-    config: cartesianSpec,
-    chartDataQuery,
-    metricsView: metricsViewSelectors,
-    themeStore,
-    timeAndFilterStore,
-    getDomainValues: () => provider.getChartDomainValues($measures),
-    isThemeModeDark: themeMode === "dark",
-  });
+  let provider = $derived(
+    new CHART_CONFIG[componentChartType].provider(readable(cartesianSpec), {}),
+  );
+
+  let metricsViewSelectors = $derived(new MetricsViewSelectors(client));
+
+  let measures = $derived(
+    metricsViewSelectors.getMeasuresForMetricView(metricsViewName),
+  );
+
+  let chartDataQuery = $derived(
+    provider.createChartDataQuery(client, filtersStore, timeControlStore),
+  );
+
+  let chartData = $derived(
+    getChartData({
+      config: cartesianSpec,
+      chartDataQuery,
+      metricsView: metricsViewSelectors,
+      themeStore,
+      timeControlStore,
+      getDomainValues: () => provider.getChartDomainValues($measures),
+      isThemeModeDark: themeMode === "dark",
+    }),
+  );
 
   // Bidirectional highlighting: table/chart hover → chart highlight
-  $: hoveredTime = $chartHoverStore.time;
-  $: hoveredDimensionValue = $chartHoverStore.dimensionValue;
+  let hoveredTime = $derived($chartHoverStore.time);
+  let hoveredDimensionValue = $derived($chartHoverStore.dimensionValue);
 
   // Brush sync: apply brush from sibling charts
-  $: externalBrushStartMs = $chartBrushStore.startMs;
-  $: externalBrushEndMs = $chartBrushStore.endMs;
+  let externalBrushStartMs = $derived($chartBrushStore.startMs);
+  let externalBrushEndMs = $derived($chartBrushStore.endMs);
 
-  $: {
+  $effect(() => {
     if (chartView) {
       if (hoveredTime) {
         setExternalHover(chartView, hoveredTime, hoveredDimensionValue);
@@ -171,7 +143,7 @@
         clearExternalHover(chartView);
       }
     }
-  }
+  });
 </script>
 
 <Chart
diff --git a/web-common/src/features/dashboards/time-series/ChartInteractions.svelte b/web-common/src/features/dashboards/time-series/ChartInteractions.svelte
index b012d4c37d28..7fd7a049f7d4 100644
--- a/web-common/src/features/dashboards/time-series/ChartInteractions.svelte
+++ b/web-common/src/features/dashboards/time-series/ChartInteractions.svelte
@@ -2,53 +2,39 @@
   import Zoom from "@rilldata/web-common/components/icons/Zoom.svelte";
   import MetaKey from "@rilldata/web-common/components/tooltip/MetaKey.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 { measureSelection } from "@rilldata/web-common/features/dashboards/time-series/measure-selection/measure-selection.ts";
   import { getOrderedStartEnd } from "@rilldata/web-common/features/dashboards/time-series/utils";
-  import {
-    type DashboardTimeControls,
-    TimeComparisonOption,
-    TimeRangePreset,
-  } from "@rilldata/web-common/lib/time/types";
-  import type { V1TimeGrain } from "@rilldata/web-common/runtime-client";
   import { DateTime, Interval } from "luxon";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
   import RangeDisplay from "../time-controls/super-pill/components/RangeDisplay.svelte";
 
-  export let exploreName: string;
-  export let showComparison = false;
-  export let timeGrain: V1TimeGrain | undefined;
-
-  let priorRange: DashboardTimeControls | null = null;
-  let button: HTMLButtonElement;
+  let priorRange = $state<string | undefined>(undefined);
+  let button = $state<HTMLButtonElement | undefined>(undefined);
 
   const explainEnabled = measureSelection.getEnabledStore();
 
   const StateManagers = getStateManagers();
-  const {
-    dashboardStore,
-    selectors: {
-      charts: { canPanLeft, canPanRight, getNewPanRange },
-    },
-    validSpecStore,
-    metricsViewName,
-  } = StateManagers;
+  const { dashboardStore, metricsViewName, timeFilterManager } = StateManagers;
 
-  $: activeTimeZone = $dashboardStore?.selectedTimezone;
+  let { timeGrain, timeZone, canPanLeft, canPanRight } =
+    $derived(timeFilterManager);
 
-  $: ({ selectedScrubRange } = $dashboardStore);
+  let { selectedScrubRange } = $derived($dashboardStore);
 
-  $: selectedSubRange =
+  let selectedSubRange = $derived(
     selectedScrubRange?.start && selectedScrubRange?.end
       ? getOrderedStartEnd(selectedScrubRange.start, selectedScrubRange.end)
-      : null;
-
-  $: subInterval = selectedSubRange
-    ? Interval.fromDateTimes(
-        DateTime.fromJSDate(selectedSubRange.start).setZone(activeTimeZone),
-        DateTime.fromJSDate(selectedSubRange.end).setZone(activeTimeZone),
-      )
-    : null;
+      : null,
+  );
+
+  let subInterval = $derived(
+    selectedSubRange
+      ? Interval.fromDateTimes(
+          DateTime.fromJSDate(selectedSubRange.start).setZone(timeZone),
+          DateTime.fromJSDate(selectedSubRange.end).setZone(timeZone),
+        )
+      : null,
+  );
 
   function onKeyDown(e: KeyboardEvent) {
     const target = e.target as HTMLElement;
@@ -65,14 +51,12 @@
       $explainEnabled && e.key === "e" && !e.metaKey && !e.ctrlKey;
 
     if (e.key === "ArrowLeft" && !e.metaKey && !e.altKey) {
-      if ($canPanLeft) {
-        const panRange = $getNewPanRange("left");
-        if (panRange) updatePanRange(panRange.start, panRange.end);
+      if (canPanLeft) {
+        timeFilterManager.onPan("left");
       }
     } else if (e.key === "ArrowRight" && !e.metaKey && !e.altKey) {
-      if ($canPanRight) {
-        const panRange = $getNewPanRange("right");
-        if (panRange) updatePanRange(panRange.start, panRange.end);
+      if (canPanRight) {
+        timeFilterManager.onPan("right");
       }
     } else if ($dashboardStore?.selectedScrubRange?.end) {
       if (e.key === "z" && !e.metaKey && !e.ctrlKey) {
@@ -81,7 +65,7 @@
         !$dashboardStore.selectedScrubRange?.isScrubbing &&
         e.key === "Escape"
       ) {
-        metricsExplorerStore.setSelectedScrubRange(exploreName, undefined);
+        timeFilterManager.resetScrubRange();
       } else if (isExplainKey) {
         measureSelection.startAnomalyExplanationChat($metricsViewName);
       }
@@ -97,59 +81,32 @@
     }
   }
 
-  function updatePanRange(start: Date, end: Date) {
-    if (!timeGrain) return;
-    const timeRange = {
-      name: TimeRangePreset.CUSTOM,
-      start: start,
-      end: end,
-    };
-
-    const comparisonTimeRange = showComparison
-      ? ({
-          name: TimeComparisonOption.CONTIGUOUS,
-        } as DashboardTimeControls) // FIXME wrong typecasting across application
-      : undefined;
-
-    metricsExplorerStore.selectTimeRange(
-      exploreName,
-      timeRange,
-      timeGrain,
-      comparisonTimeRange,
-      $validSpecStore.data?.metricsView ?? {},
-    );
-  }
-
   function zoomScrub() {
     if (
       selectedScrubRange?.start instanceof Date &&
       selectedScrubRange?.end instanceof Date
     ) {
-      if ($dashboardStore.selectedTimeRange) {
-        priorRange = $dashboardStore.selectedTimeRange;
-      }
+      priorRange = timeFilterManager.timeRange;
 
       const { start, end } = getOrderedStartEnd(
         selectedScrubRange.start,
         selectedScrubRange.end,
       );
-      metricsExplorerStore.setSelectedTimeRange(exploreName, {
-        name: TimeRangePreset.CUSTOM,
-        start,
-        end,
-      });
+      void timeFilterManager.onSelectRange(
+        `${start.toISOString()} to ${end.toISOString()}`,
+      );
 
       window.addEventListener("click", cancelUndo, true);
     }
   }
 
   function clearPriorRange() {
-    priorRange = null;
+    priorRange = undefined;
   }
 
   function undoZoom() {
     if (priorRange) {
-      metricsExplorerStore.setSelectedTimeRange(exploreName, priorRange);
+      void timeFilterManager.onSelectRange(priorRange);
       clearPriorRange();
     }
   }
diff --git a/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte b/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte
index 1acae1746889..0e9fc17a54a3 100644
--- a/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte
+++ b/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte
@@ -17,7 +17,6 @@
     metricsExplorerStore,
     useExploreState,
   } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
-  import { useTimeControlStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
   import ChartTypeSelector from "@rilldata/web-common/features/dashboards/time-dimension-details/charts/ChartTypeSelector.svelte";
   import { TDDChart } from "@rilldata/web-common/features/dashboards/time-dimension-details/types";
   import BackToExplore from "@rilldata/web-common/features/dashboards/time-series/BackToExplore.svelte";
@@ -26,18 +25,9 @@
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
   import { useExploreValidSpec } from "@rilldata/web-common/features/explores/selectors";
   import { translateV1TimeGrain } from "@rilldata/web-common/lib/time/new-grains";
-  import {
-    TimeComparisonOption,
-    TimeRangePreset,
-    type AvailableTimeGrain,
-    type DashboardTimeControls,
-  } from "@rilldata/web-common/lib/time/types";
-  import {
-    type MetricsViewSpecMeasure,
-    type V1Expression,
-  } from "@rilldata/web-common/runtime-client/gen/index.schemas";
+  import { type AvailableTimeGrain } from "@rilldata/web-common/lib/time/types";
+  import { type MetricsViewSpecMeasure } from "@rilldata/web-common/runtime-client/gen/index.schemas";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
-  import { DateTime, Interval } from "luxon";
   import { Button } from "../../../components/button";
   import Pivot from "../../../components/icons/Pivot.svelte";
   import { TIME_GRAIN } from "../../../lib/time/config";
@@ -60,14 +50,10 @@
 
   let {
     exploreName,
-    dimensionOnlyFilter,
-    whereFilter,
     hideStartPivotButton = false,
     tddChartHeight = 245,
   }: {
     exploreName: string;
-    dimensionOnlyFilter: V1Expression | undefined;
-    whereFilter: V1Expression | undefined;
     hideStartPivotButton?: boolean;
     // Height of the expanded chart in the Time Dimension Detail view, controlled
     // by the resizable divider between the timeseries and the detail table.
@@ -81,63 +67,49 @@
     dashboardStore,
     selectors: {
       measures: { allMeasures, visibleMeasures, getMeasureByName },
-      charts: { canPanLeft, canPanRight, getNewPanRange },
       tags: { measureTagIndex },
     },
     actions: {
       measures: { setMeasureVisibility },
     },
     expressionFilterManager,
+    timeFilterManager,
+    dashboardConfigProvider,
   } = StateManagers;
 
-  const timeControlsStore = useTimeControlStore(StateManagers);
+  let where = $derived(
+    expressionFilterManager.exprByMetricsView[$metricsViewName],
+  );
 
-  let grainDropdownOpen = $state(false);
-  let connectNulls = $state(true);
+  let {
+    timeGrain,
+    timeDimension: selectedTimeDimension,
 
-  const client = useRuntimeClient();
+    interval,
+    showComparison,
 
-  let {
-    selectedTimeRange,
-    selectedComparisonTimeRange,
-    timeDimension,
-    ready,
-    showTimeComparison,
-    timeEnd,
     timeStart,
-    comparisonTimeEnd,
+    timeEnd,
     comparisonTimeStart,
-    aggregationOptions,
-  } = $derived($timeControlsStore);
+    comparisonTimeEnd,
 
-  let { selectedTimezone } = $derived($dashboardStore);
+    aggregationOptions,
 
-  // Use the full selected time range for chart data fetching (not modified by scrub)
-  let chartInterval = $derived(
-    selectedTimeRange?.start && selectedTimeRange?.end
-      ? (Interval.fromDateTimes(
-          DateTime.fromJSDate(selectedTimeRange.start, {
-            zone: selectedTimezone,
-          }),
-          DateTime.fromJSDate(selectedTimeRange.end, {
-            zone: selectedTimezone,
-          }),
-        ) as Interval<true>)
-      : undefined,
-  );
-  let chartComparisonInterval = $derived(
-    selectedComparisonTimeRange?.start && selectedComparisonTimeRange?.end
-      ? (Interval.fromDateTimes(
-          DateTime.fromJSDate(selectedComparisonTimeRange.start, {
-            zone: selectedTimezone,
-          }),
-          DateTime.fromJSDate(selectedComparisonTimeRange.end, {
-            zone: selectedTimezone,
-          }),
-        ) as Interval<true>)
-      : undefined,
+    ready: chartReady,
+  } = $derived(timeFilterManager);
+  let timeDimension = $derived(
+    selectedTimeDimension ??
+      dashboardConfigProvider.metricsViewsProvider.specs[$metricsViewName]
+        ?.timeDimension,
   );
 
+  let grainDropdownOpen = $state(false);
+  let connectNulls = $state(true);
+
+  const client = useRuntimeClient();
+
+  let { selectedTimezone } = $derived($dashboardStore);
+
   let exploreState = $derived(useExploreState(exploreName));
 
   let activePage = $derived($exploreState?.activePage);
@@ -149,25 +121,14 @@
   let comparisonDimension = $derived(
     $exploreState?.selectedComparisonDimension,
   );
-  let showComparison = $derived(Boolean(showTimeComparison));
   let tddChartType = $derived($exploreState?.tdd?.chartType);
   let dynamicYAxisScale = $derived($exploreState?.dynamicYAxisScale ?? false);
 
-  let activeTimeGrain = $derived(selectedTimeRange?.interval);
-
   $effect(() => measureSelection.setZone(selectedTimezone));
   $effect(() => {
-    if (activeTimeGrain) measureSelection.setTimeGrain(activeTimeGrain);
+    if (timeGrain) measureSelection.setTimeGrain(timeGrain);
   });
 
-  let chartScrubInterval = $derived.by(() => {
-    const range = $exploreState?.lastDefinedScrubRange;
-    if (!range) return undefined;
-    const a = DateTime.fromJSDate(range.start, { zone: selectedTimezone });
-    const b = DateTime.fromJSDate(range.end, { zone: selectedTimezone });
-    const [start, end] = a <= b ? [a, b] : [b, a];
-    return Interval.fromDateTimes(start, end) as Interval<true>;
-  });
   let managerForCompareDimension = $derived.by(() => {
     const manager = comparisonDimension
       ? expressionFilterManager.filterManagersMap[comparisonDimension]
@@ -214,8 +175,6 @@
 
   let chartMetricsViewName = $derived($metricsViewName);
 
-  let chartReady = $derived(!!ready);
-
   // Check if annotations are enabled for this explore
   let exploreValidSpec = $derived(useExploreValidSpec(client, exploreName));
   let annotationsEnabled = $derived(
@@ -227,23 +186,6 @@
     undefined,
   );
 
-  // Pan handler
-  function handlePan(direction: "left" | "right") {
-    const panRange = $getNewPanRange(direction);
-    if (!panRange || !activeTimeGrain) return;
-    const { start, end } = panRange;
-    const comparisonTimeRange = showComparison
-      ? ({ name: TimeComparisonOption.CONTIGUOUS } as DashboardTimeControls)
-      : undefined;
-    metricsExplorerStore.selectTimeRange(
-      exploreName,
-      { name: TimeRangePreset.CUSTOM, start, end },
-      activeTimeGrain,
-      comparisonTimeRange,
-      $exploreValidSpec.data?.metricsView ?? {},
-    );
-  }
-
   let showReplacePivotModal = $state(false);
   function startPivotForTimeseries() {
     const pivot = $exploreState?.pivot;
@@ -262,8 +204,8 @@
 
   function getTimeDimension() {
     return {
-      id: selectedTimeRange?.interval,
-      title: TIME_GRAIN[activeTimeGrain as AvailableTimeGrain]?.label,
+      id: timeGrain,
+      title: TIME_GRAIN[timeGrain as AvailableTimeGrain]?.label,
       type: PivotChipType.Time,
     } as PivotChipData;
   }
@@ -284,18 +226,6 @@
     );
   }
 
-  function handleScrub(range: {
-    start: DateTime;
-    end: DateTime;
-    isScrubbing: boolean;
-  }) {
-    metricsExplorerStore.setSelectedScrubRange(exploreName, {
-      start: range.start.toJSDate(),
-      end: range.end.toJSDate(),
-      isScrubbing: range.isScrubbing,
-    });
-  }
-
   function maybeClearMeasureSelection() {
     if (!measureSelection.isRangeSelection()) {
       measureSelection.clear();
@@ -348,7 +278,7 @@
         </div>
       </DashboardMetricsDraggableList>
 
-      {#if $rillTime && activeTimeGrain}
+      {#if $rillTime && timeGrain}
         <DropdownMenu.Root bind:open={grainDropdownOpen}>
           <DropdownMenu.Trigger>
             {#snippet child({ props })}
@@ -359,7 +289,7 @@
               >
                 {m.explore_by_grain_prefix()}
                 <b>
-                  {translateV1TimeGrain(activeTimeGrain)}
+                  {translateV1TimeGrain(timeGrain)}
                 </b>
                 <span
                   class:-rotate-90={grainDropdownOpen}
@@ -375,11 +305,9 @@
             {#each aggregationOptions ?? [] as option (option)}
               <DropdownMenu.CheckboxItem
                 checkRight
-                checked={option === activeTimeGrain}
+                checked={option === timeGrain}
                 class="text-xs cursor-pointer"
-                onclick={() => {
-                  metricsExplorerStore.setTimeGrain(exploreName, option);
-                }}
+                onclick={() => timeFilterManager.onSelectGrain(option)}
               >
                 {translateV1TimeGrain(option)}
               </DropdownMenu.CheckboxItem>
@@ -420,7 +348,7 @@
       class:pb-4={!showTimeDimensionDetail}
       class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 overflow-y-scroll h-full max-h-fit"
     >
-      {#if activeTimeGrain}
+      {#if timeGrain}
         <div
           class="sticky top-0 z-10 bg-surface-background col-span-2 grid grid-cols-subgrid"
         >
@@ -428,15 +356,8 @@
           <!-- min-w-0 lets the 1fr track follow the resizable panel width instead of
                being propped open by the chart's intrinsic size (see the chart cell below) -->
           <div class="relative min-w-0">
-            <MeasureChartXAxis
-              interval={chartInterval}
-              timeGranularity={activeTimeGrain}
-            />
-            <ChartInteractions
-              {exploreName}
-              {showComparison}
-              timeGrain={activeTimeGrain}
-            />
+            <MeasureChartXAxis {interval} timeGranularity={timeGrain} />
+            <ChartInteractions />
           </div>
         </div>
       {/if}
@@ -448,7 +369,7 @@
           isMeasureExpanded={showTimeDimensionDetail}
           {showComparison}
           metricsViewName={chartMetricsViewName}
-          where={whereFilter}
+          {where}
           {timeDimension}
           {timeStart}
           {timeEnd}
@@ -457,45 +378,26 @@
           ready={chartReady}
         />
 
-        {#if activeTimeGrain}
+        {#if timeDimension && timeGrain}
           <!-- min-w-0 is required for the Vega-rendered chart types: their canvas has an
                intrinsic pixel width, which would otherwise become the 1fr track's minimum
                size and stop the column from shrinking when the divider is dragged in. -->
           <div class="relative min-w-0">
             <MeasureChart
               {measure}
+              {expressionFilterManager}
+              {timeFilterManager}
               ephemeralMeasures={$dashboardStore.ephemeralMeasures}
               {scrubController}
               {connectNulls}
               tddChartType={tddChartType ?? TDDChart.DEFAULT}
               metricsViewName={chartMetricsViewName}
-              where={whereFilter}
               {timeDimension}
-              interval={chartInterval}
-              comparisonInterval={chartComparisonInterval}
-              timeGranularity={activeTimeGrain}
-              timeZone={selectedTimezone}
-              ready={chartReady}
-              {chartScrubInterval}
-              {comparisonDimension}
               dimensionValues={chartDimensionValues}
-              dimensionWhere={dimensionOnlyFilter}
               {annotationsEnabled}
-              canPanLeft={$canPanLeft}
-              canPanRight={$canPanRight}
-              onPanLeft={() => handlePan("left")}
-              onPanRight={() => handlePan("right")}
-              {showComparison}
               {showTimeDimensionDetail}
               {tddChartHeight}
               dynamicYAxis={dynamicYAxisScale}
-              onScrub={handleScrub}
-              onScrubClear={() => {
-                metricsExplorerStore.setSelectedScrubRange(
-                  exploreName,
-                  undefined,
-                );
-              }}
             />
 
             <DropdownMenu.Root>
@@ -535,25 +437,13 @@
     measure={screenshotDialogMeasure}
     ephemeralMeasures={$dashboardStore.ephemeralMeasures}
     metricsViewName={chartMetricsViewName}
-    tddChartType={tddChartType ?? TDDChart.DEFAULT}
     {expressionFilterManager}
-    where={whereFilter}
-    {timeDimension}
-    {timeStart}
-    {timeEnd}
-    {comparisonTimeStart}
-    {comparisonTimeEnd}
-    interval={chartInterval}
-    comparisonInterval={chartComparisonInterval}
+    {timeFilterManager}
+    tddChartType={tddChartType ?? TDDChart.DEFAULT}
     {comparisonDimension}
-    timeGranularity={activeTimeGrain}
-    timeZone={selectedTimezone}
     dimensionValues={chartDimensionValues}
-    dimensionWhere={dimensionOnlyFilter}
-    {showComparison}
     {showTimeDimensionDetail}
     dynamicYAxis={dynamicYAxisScale}
     {connectNulls}
-    ready={chartReady}
   />
 {/if}
diff --git a/web-common/src/features/dashboards/time-series/ScreenshotContainer.svelte b/web-common/src/features/dashboards/time-series/ScreenshotContainer.svelte
index a93f6a37807e..1c95fbe9f7ba 100644
--- a/web-common/src/features/dashboards/time-series/ScreenshotContainer.svelte
+++ b/web-common/src/features/dashboards/time-series/ScreenshotContainer.svelte
@@ -3,13 +3,8 @@
   import { Button } from "@rilldata/web-common/components/button";
   import * as Dialog from "@rilldata/web-common/components/dialog";
   import { TDDChart } from "@rilldata/web-common/features/dashboards/time-dimension-details/types";
-  import type {
-    MetricsViewSpecMeasure,
-    V1Expression,
-    V1TimeGrain,
-  } from "@rilldata/web-common/runtime-client";
+  import type { MetricsViewSpecMeasure } from "@rilldata/web-common/runtime-client";
   import { toPng } from "html-to-image";
-  import { Interval } from "luxon";
   import MeasureBigNumber from "../big-number/MeasureBigNumber.svelte";
   import MeasureChart from "./measure-chart/MeasureChart.svelte";
   import MeasureChartXAxis from "./measure-chart/MeasureChartXAxis.svelte";
@@ -19,42 +14,67 @@
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
   import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
   import ReadonlyExpressionFilters from "@rilldata/web-common/features/dashboards/filters/ReadonlyExpressionFilters.svelte";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
-  export let open = false;
-  export let measure: MetricsViewSpecMeasure;
-  export let ephemeralMeasures: EphemeralMeasureDef[] | undefined = undefined;
-  export let metricsViewName: string;
-  export let where: V1Expression | undefined = undefined;
-  export let expressionFilterManager: ExpressionFilterManager;
-  export let tddChartType: TDDChart = TDDChart.DEFAULT;
-  export let timeDimension: string | undefined = undefined;
-  export let timeStart: string | undefined = undefined;
-  export let timeEnd: string | undefined = undefined;
-  export let comparisonTimeStart: string | undefined = undefined;
-  export let comparisonTimeEnd: string | undefined = undefined;
-  export let interval: Interval<true> | undefined = undefined;
-  export let comparisonInterval: Interval<true> | undefined = undefined;
-  export let timeGranularity: V1TimeGrain | undefined = undefined;
-  export let timeZone: string = "UTC";
-  export let comparisonDimension: string | undefined = undefined;
-  export let dimensionWhere: V1Expression | undefined = undefined;
-  export let dimensionValues: (string | null)[] = [];
-  export let showComparison = false;
-  export let showTimeDimensionDetail: boolean = false;
-  export let connectNulls: boolean = true;
-  export let dynamicYAxis: boolean = false;
-  export let ready = true;
+  let {
+    open = $bindable(false),
+    measure,
+    ephemeralMeasures = undefined,
+    metricsViewName,
+    expressionFilterManager,
+    timeFilterManager,
+    tddChartType = TDDChart.DEFAULT,
+    timeDimension = undefined,
+    comparisonDimension = undefined,
+    dimensionValues = [],
+    showTimeDimensionDetail = false,
+    connectNulls = true,
+    dynamicYAxis = false,
+  }: {
+    open: boolean;
+    measure: MetricsViewSpecMeasure;
+    ephemeralMeasures: EphemeralMeasureDef[] | undefined;
+    metricsViewName: string;
+    expressionFilterManager: ExpressionFilterManager;
+    timeFilterManager: TimeFilterManager;
+    tddChartType?: TDDChart;
+    timeDimension?: string | undefined;
+    comparisonDimension?: string | undefined;
+    dimensionValues?: (string | null)[];
+    showTimeDimensionDetail?: boolean;
+    connectNulls?: boolean;
+    dynamicYAxis?: boolean;
+  } = $props();
+
+  let where = $derived(
+    expressionFilterManager.exprByMetricsView[metricsViewName],
+  );
+  let {
+    timeStart,
+    timeEnd,
+    interval,
+    timeGrain,
+
+    comparisonTimeStart,
+    comparisonTimeEnd,
+    comparisonInterval,
+    showComparison,
+
+    ready,
+  } = $derived(timeFilterManager);
 
   let captureNode: HTMLDivElement;
-  let downloading = false;
+  let downloading = $state<boolean>(false);
 
-  $: formattedTimeRange = interval
-    ? prettyFormatTimeRange(interval, timeGranularity)
-    : "";
-  $: formattedComparisonRange = comparisonInterval
-    ? prettyFormatTimeRange(comparisonInterval, timeGranularity)
-    : "";
-  $: generatedTime = new Date().toISOString();
+  let formattedTimeRange = $derived(
+    interval ? prettyFormatTimeRange(interval, timeGrain) : "",
+  );
+  let formattedComparisonRange = $derived(
+    comparisonInterval
+      ? prettyFormatTimeRange(comparisonInterval, timeGrain)
+      : "",
+  );
+  let generatedTime = $derived(new Date().toISOString());
 
   const SVG_PROPS = [
     "fill",
@@ -130,10 +150,10 @@
         <ReadonlyExpressionFilters {expressionFilterManager} />
 
         <div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2">
-          {#if timeGranularity}
+          {#if timeGrain}
             <div class="col-span-2 grid grid-cols-subgrid">
               <div></div>
-              <MeasureChartXAxis {interval} {timeGranularity} />
+              <MeasureChartXAxis {interval} timeGranularity={timeGrain} />
             </div>
           {/if}
 
@@ -152,26 +172,23 @@
             skipLink
           />
 
-          <MeasureChart
-            {measure}
-            {ephemeralMeasures}
-            {connectNulls}
-            tddChartType={tddChartType ?? TDDChart.DEFAULT}
-            {metricsViewName}
-            {where}
-            {timeDimension}
-            {interval}
-            {comparisonInterval}
-            {timeGranularity}
-            {timeZone}
-            {ready}
-            {comparisonDimension}
-            {dimensionValues}
-            {dimensionWhere}
-            {showComparison}
-            {showTimeDimensionDetail}
-            {dynamicYAxis}
-          />
+          {#if timeDimension}
+            <MeasureChart
+              {measure}
+              {ephemeralMeasures}
+              {expressionFilterManager}
+              {timeFilterManager}
+              {connectNulls}
+              tddChartType={tddChartType ?? TDDChart.DEFAULT}
+              {metricsViewName}
+              {timeDimension}
+              {ready}
+              {comparisonDimension}
+              {dimensionValues}
+              {showTimeDimensionDetail}
+              {dynamicYAxis}
+            />
+          {/if}
         </div>
 
         <footer class="flex items-center justify-between text-xs text-fg-muted">
diff --git a/web-common/src/features/dashboards/time-series/measure-chart/MeasureChart.svelte b/web-common/src/features/dashboards/time-series/measure-chart/MeasureChart.svelte
index 533893ba05af..676b2efb0ff2 100644
--- a/web-common/src/features/dashboards/time-series/measure-chart/MeasureChart.svelte
+++ b/web-common/src/features/dashboards/time-series/measure-chart/MeasureChart.svelte
@@ -6,13 +6,12 @@
   import { TDDChart } from "@rilldata/web-common/features/dashboards/time-dimension-details/types";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
-  import { V1TimeGrainToDateTimeUnit } from "@rilldata/web-common/lib/time/new-grains";
-  import type { MetricsViewSpecMeasure } from "@rilldata/web-common/runtime-client";
   import {
-    createQueryServiceMetricsViewTimeSeries,
-    V1TimeGrain,
-    type V1Expression,
-  } from "@rilldata/web-common/runtime-client";
+    MinSupportedGrain,
+    V1TimeGrainToDateTimeUnit,
+  } from "@rilldata/web-common/lib/time/new-grains";
+  import type { MetricsViewSpecMeasure } from "@rilldata/web-common/runtime-client";
+  import { createQueryServiceMetricsViewTimeSeries } from "@rilldata/web-common/runtime-client";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { keepPreviousData } from "@tanstack/svelte-query";
   import { DateTime, Interval } from "luxon";
@@ -31,49 +30,84 @@
   } from "./use-dimension-data";
   import { transformTimeSeriesData } from "./use-measure-time-series";
   import { dateToIndex } from "./utils";
+  import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
   const VISIBILITY_ROOT_MARGIN = "120px";
 
-  export let measure: MetricsViewSpecMeasure;
-  export let ephemeralMeasures: EphemeralMeasureDef[] | undefined = undefined;
-  export let metricsViewName: string;
-  export let where: V1Expression | undefined = undefined;
-  export let timeDimension: string | undefined = undefined;
-  export let interval: Interval<true> | undefined = undefined;
-  export let comparisonInterval: Interval<true> | undefined = undefined;
-  export let timeGranularity: V1TimeGrain | undefined = undefined;
-  export let timeZone: string = "UTC";
-  export let comparisonDimension: string | undefined = undefined;
-  export let dimensionValues: (string | null)[] = [];
-  export let dimensionWhere: V1Expression | undefined = undefined;
-  export let annotationsEnabled: boolean = false;
-  export let showComparison: boolean = false;
-  export let showTimeDimensionDetail: boolean = false;
-  export let ready: boolean = true;
-  export let chartScrubInterval: Interval<true> | undefined = undefined;
-  export let canPanLeft: boolean = false;
-  export let canPanRight: boolean = false;
-  export let tddChartType: TDDChart = TDDChart.DEFAULT;
-  export let onScrub:
-    | ((range: {
-        start: DateTime;
-        end: DateTime;
-        isScrubbing: boolean;
-      }) => void)
-    | undefined = undefined;
-  export let onScrubClear: (() => void) | undefined = undefined;
-  export let onPanLeft: (() => void) | undefined = undefined;
-  export let onPanRight: (() => void) | undefined = undefined;
-  export let scrubController: ScrubController | undefined = undefined;
-  export let connectNulls: boolean = true;
-  export let dynamicYAxis: boolean = false;
-  // Chart height when expanded in the Time Dimension Detail view. Driven by the
-  // resizable divider between the timeseries and the detail table.
-  export let tddChartHeight: number = 245;
+  let {
+    measure,
+    ephemeralMeasures = undefined,
+    metricsViewName,
+    expressionFilterManager,
+    timeFilterManager,
+    comparisonDimension = undefined,
+    dimensionValues = [],
+    annotationsEnabled = false,
+    timeDimension,
+    showTimeDimensionDetail = false,
+    ready = false,
+    tddChartType = TDDChart.DEFAULT,
+    scrubController = undefined,
+    connectNulls = true,
+    dynamicYAxis = false,
+    tddChartHeight = 245,
+  }: {
+    measure: MetricsViewSpecMeasure;
+    ephemeralMeasures: EphemeralMeasureDef[] | undefined;
+    metricsViewName: string;
+    expressionFilterManager: ExpressionFilterManager;
+    timeFilterManager: TimeFilterManager;
+    comparisonDimension?: string | undefined;
+    dimensionValues?: (string | null)[];
+    annotationsEnabled?: boolean;
+    timeDimension: string;
+    showTimeDimensionDetail?: boolean;
+    ready?: boolean;
+    tddChartType?: TDDChart;
+    scrubController?: ScrubController | undefined;
+    connectNulls?: boolean;
+    dynamicYAxis?: boolean;
+    tddChartHeight?: number;
+  } = $props();
 
   const client = useRuntimeClient();
   const { visible, observe } = createVisibilityObserver(VISIBILITY_ROOT_MARGIN);
 
+  let {
+    interval,
+    timeStart,
+    timeEnd,
+    timeGrain,
+    timeZone,
+
+    showComparison,
+    comparisonInterval,
+    comparisonTimeStart,
+    comparisonTimeEnd,
+
+    scrubInterval,
+    canPanLeft,
+    canPanRight,
+  } = $derived(timeFilterManager);
+  let timeGranularity = $derived(timeGrain ?? MinSupportedGrain);
+
+  let chartScrubInterval = $derived.by(() => {
+    if (!scrubInterval) return undefined;
+    const [start, end] =
+      scrubInterval.start <= scrubInterval.end
+        ? [scrubInterval.start, scrubInterval.end]
+        : [scrubInterval.end, scrubInterval.start];
+    return Interval.fromDateTimes(start, end) as Interval<true>;
+  });
+
+  let where = $derived(
+    expressionFilterManager.exprByMetricsView[metricsViewName],
+  );
+  let dimensionWhere = $derived(
+    expressionFilterManager.topLevelJoiner.dimensionOnlyExpr[metricsViewName],
+  );
+
   let container: HTMLDivElement;
   let unobserve: (() => void) | undefined;
 
@@ -85,97 +119,99 @@
     unobserve?.();
   });
 
-  $: measureName = measure.name ?? "";
-  $: ({ measureNames: tsMeasureNames, ephemeralMeasures: tsEphemeralMeasures } =
-    splitTimeSeriesMeasures([measureName], ephemeralMeasures));
-  $: height = showTimeDimensionDetail ? tddChartHeight : 145;
+  let measureName = $derived(measure.name ?? "");
+  let { measureNames: tsMeasureNames, ephemeralMeasures: tsEphemeralMeasures } =
+    $derived(splitTimeSeriesMeasures([measureName], ephemeralMeasures));
+  let height = $derived(showTimeDimensionDetail ? tddChartHeight : 145);
 
-  $: effectiveChartType = resolveEffectiveChartType(
-    tddChartType,
-    hasDimensionComparison,
+  // Dimension comparison data
+  let hasDimensionComparison = $derived(
+    !!comparisonDimension && dimensionValues.length > 0 && !!timeDimension,
+  );
+
+  let effectiveChartType = $derived(
+    resolveEffectiveChartType(tddChartType, hasDimensionComparison),
   );
-  $: usesVegaChart = usesVegaRenderer(effectiveChartType);
+  let usesVegaChart = $derived(usesVegaRenderer(effectiveChartType));
 
   // Seed the shared brush store from the persisted scrub interval so TDD Vega
   // charts can render the brush on mount, chart-type switch, or page refresh.
-  $: {
+  $effect(() => {
     const brushStoreEmpty = $chartBrushStore.startMs === undefined;
     if (
       usesVegaChart &&
       brushStoreEmpty &&
-      chartScrubInterval?.start &&
-      chartScrubInterval?.end
+      scrubInterval?.start &&
+      scrubInterval?.end
     ) {
       const systemTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-      const vegaStartMs = chartScrubInterval.start
+      const vegaStartMs = scrubInterval.start
         .setZone(systemTimeZone, { keepLocalTime: true })
         .toMillis();
-      const vegaEndMs = chartScrubInterval.end
+      const vegaEndMs = scrubInterval.end
         .setZone(systemTimeZone, { keepLocalTime: true })
         .toMillis();
       chartBrushStore.set({ startMs: vegaStartMs, endMs: vegaEndMs });
     }
-  }
-
-  // Extract ISO strings for API calls (must be UTC for protobuf Timestamp parsing)
-  $: timeStart = interval?.start?.toUTC().toISO() ?? undefined;
-  $: timeEnd = interval?.end?.toUTC().toISO() ?? undefined;
-  $: comparisonTimeStart =
-    comparisonInterval?.start?.toUTC().toISO() ?? undefined;
-  $: comparisonTimeEnd = comparisonInterval?.end?.toUTC().toISO() ?? undefined;
+  });
 
   // Time series queries
-  $: timeSeriesQuery = createQueryServiceMetricsViewTimeSeries(
-    client,
-    {
-      metricsViewName,
-      measureNames: tsMeasureNames,
-      ephemeralMeasures: tsEphemeralMeasures,
-      where,
-      timeDimension,
-      timeStart,
-      timeEnd,
-      timeGranularity,
-      timeZone,
-    },
-    {
-      query: {
-        enabled: $visible && ready && !!timeStart,
-        placeholderData: keepPreviousData,
-        refetchOnMount: false,
+  let timeSeriesQuery = $derived(
+    createQueryServiceMetricsViewTimeSeries(
+      client,
+      {
+        metricsViewName,
+        measureNames: tsMeasureNames,
+        ephemeralMeasures: tsEphemeralMeasures,
+        where,
+        timeDimension,
+        timeStart,
+        timeEnd,
+        timeGranularity,
+        timeZone,
+      },
+      {
+        query: {
+          enabled: $visible && ready && !!timeStart,
+          placeholderData: keepPreviousData,
+          refetchOnMount: false,
+        },
       },
-    },
+    ),
   );
 
-  $: comparisonTimeSeriesQuery = createQueryServiceMetricsViewTimeSeries(
-    client,
-    {
-      metricsViewName,
-      measureNames: tsMeasureNames,
-      ephemeralMeasures: tsEphemeralMeasures,
-      where,
-      timeDimension,
-      timeStart: comparisonTimeStart,
-      timeEnd: comparisonTimeEnd,
-      timeGranularity,
-      timeZone,
-    },
-    {
-      query: {
-        enabled: $visible && ready && showComparison && !!comparisonTimeStart,
-        placeholderData: keepPreviousData,
-        refetchOnMount: false,
+  let comparisonTimeSeriesQuery = $derived(
+    createQueryServiceMetricsViewTimeSeries(
+      client,
+      {
+        metricsViewName,
+        measureNames: tsMeasureNames,
+        ephemeralMeasures: tsEphemeralMeasures,
+        where,
+        timeDimension,
+        timeStart: comparisonTimeStart,
+        timeEnd: comparisonTimeEnd,
+        timeGranularity,
+        timeZone,
+      },
+      {
+        query: {
+          enabled: $visible && ready && showComparison && !!comparisonTimeStart,
+          placeholderData: keepPreviousData,
+          refetchOnMount: false,
+        },
       },
-    },
+    ),
   );
 
   // Transform query results
-  $: comparisonData =
+  let comparisonData = $derived(
     showComparison && !$comparisonTimeSeriesQuery.isFetching
       ? $comparisonTimeSeriesQuery.data?.data
-      : undefined;
+      : undefined,
+  );
 
-  $: data =
+  let data = $derived(
     $timeSeriesQuery.isFetching || !$timeSeriesQuery.data?.data
       ? ([] as TimeSeriesPoint[])
       : transformTimeSeriesData(
@@ -183,34 +219,33 @@
           comparisonData,
           measureName,
           timeZone,
-        );
+        ),
+  );
 
-  $: isError = $timeSeriesQuery.isError;
-  $: error = $timeSeriesQuery.error?.message;
+  let isError = $derived($timeSeriesQuery.isError);
+  let error = $derived($timeSeriesQuery.error?.message);
 
-  // Dimension comparison data
-  $: hasDimensionComparison =
-    !!comparisonDimension && dimensionValues.length > 0 && !!timeDimension;
-
-  $: dimAggQuery = hasDimensionComparison
-    ? createDimensionAggregationQuery(
-        client,
-        metricsViewName,
-        measureName,
-        ephemeralMeasures,
-        comparisonDimension!,
-        dimensionValues,
-        dimensionWhere,
-        timeDimension!,
-        timeStart,
-        timeEnd,
-        timeGranularity!,
-        timeZone,
-        $visible && ready && !!timeStart,
-      )
-    : undefined;
+  let dimAggQuery = $derived(
+    hasDimensionComparison
+      ? createDimensionAggregationQuery(
+          client,
+          metricsViewName,
+          measureName,
+          ephemeralMeasures,
+          comparisonDimension!,
+          dimensionValues,
+          dimensionWhere,
+          timeDimension,
+          timeStart,
+          timeEnd,
+          timeGranularity,
+          timeZone,
+          $visible && ready && !!timeStart,
+        )
+      : undefined,
+  );
 
-  $: dimCompAggQuery =
+  let dimCompAggQuery = $derived(
     hasDimensionComparison && showComparison && !!comparisonTimeStart
       ? createDimensionAggregationQuery(
           client,
@@ -220,21 +255,23 @@
           comparisonDimension!,
           dimensionValues,
           dimensionWhere,
-          timeDimension!,
+          timeDimension,
           comparisonTimeStart,
           comparisonTimeEnd,
-          timeGranularity!,
+          timeGranularity,
           timeZone,
 
           $visible && ready && !!comparisonTimeStart,
         )
-      : undefined;
+      : undefined,
+  );
 
-  $: dimIsFetching =
+  let dimIsFetching = $derived(
     (dimAggQuery ? $dimAggQuery?.isFetching : false) ||
-    (dimCompAggQuery ? $dimCompAggQuery?.isFetching : false);
+      (dimCompAggQuery ? $dimCompAggQuery?.isFetching : false),
+  );
 
-  $: dimensionData =
+  let dimensionData = $derived(
     hasDimensionComparison && timeDimension && timeGranularity
       ? buildDimensionSeriesData(
           measureName,
@@ -249,24 +286,28 @@
           dimCompAggQuery ? $dimCompAggQuery?.data?.data : undefined,
           !!dimIsFetching,
         )
-      : [];
+      : [],
+  );
 
-  $: isFetching =
+  let isFetching = $derived(
     $timeSeriesQuery.isFetching ||
-    (showComparison && $comparisonTimeSeriesQuery.isFetching) ||
-    !!dimIsFetching;
+      (showComparison && $comparisonTimeSeriesQuery.isFetching) ||
+      !!dimIsFetching,
+  );
 
   // Annotations query
-  $: annotationsQuery = createAnnotationsQuery(
-    client,
-    metricsViewName,
-    measureName,
-    timeDimension,
-    timeStart,
-    timeEnd,
-    timeGranularity,
-    timeZone,
-    annotationsEnabled && !!timeStart && !!timeEnd && !!timeGranularity,
+  let annotationsQuery = $derived(
+    createAnnotationsQuery(
+      client,
+      metricsViewName,
+      measureName,
+      timeDimension,
+      timeStart,
+      timeEnd,
+      timeGranularity,
+      timeZone,
+      annotationsEnabled && !!timeStart && !!timeEnd && !!timeGranularity,
+    ),
   );
 
   // TDD handlers
@@ -313,7 +354,7 @@
     // Guard: if brush was within a single grain, snapping can invert the range
     if (+endDt <= +startDt) return;
 
-    onScrub?.({
+    timeFilterManager.onScrubRange({
       start: startDt,
       end: endDt,
       isScrubbing: false,
@@ -322,7 +363,7 @@
 
   function handleTddBrushClear() {
     chartBrushStore.set({ startMs: undefined, endMs: undefined });
-    onScrubClear?.();
+    timeFilterManager.resetScrubRange();
   }
 </script>
 
@@ -341,17 +382,13 @@
         chartType={effectiveChartType}
         {metricsViewName}
         {measure}
+        {expressionFilterManager}
+        {timeFilterManager}
         {ephemeralMeasures}
         {timeDimension}
-        {interval}
-        comparisonInterval={showComparison ? comparisonInterval : undefined}
-        {timeGranularity}
-        {timeZone}
-        {where}
         {comparisonDimension}
         {dimensionValues}
         {dimensionData}
-        {showComparison}
         {showTimeDimensionDetail}
         {dynamicYAxis}
         onChartHover={handleTddHover}
@@ -374,10 +411,10 @@
       {chartScrubInterval}
       {canPanLeft}
       {canPanRight}
-      {onPanLeft}
-      {onPanRight}
-      {onScrub}
-      {onScrubClear}
+      onPanLeft={() => timeFilterManager.onPan("left")}
+      onPanRight={() => timeFilterManager.onPan("right")}
+      onScrub={(range) => timeFilterManager.onScrubRange(range)}
+      onScrubClear={() => timeFilterManager.resetScrubRange()}
       {scrubController}
       {metricsViewName}
       {connectNulls}
diff --git a/web-common/src/features/dashboards/time-series/utils.ts b/web-common/src/features/dashboards/time-series/utils.ts
index a27c9ae82182..d3adecc2679c 100644
--- a/web-common/src/features/dashboards/time-series/utils.ts
+++ b/web-common/src/features/dashboards/time-series/utils.ts
@@ -16,6 +16,7 @@ import {
 import { getDurationMultiple, getOffset } from "../../../lib/time/transforms";
 import { TimeOffsetType } from "../../../lib/time/types";
 import type { TimeSeriesDatum } from "./timeseries-data-store";
+import type { DateTime } from "luxon";
 
 /** sets extents to 0 if it makes sense; otherwise, inflates each extent component */
 export function niceMeasureExtents(
@@ -113,6 +114,18 @@ export function getOrderedStartEnd(start: Date, stop: Date) {
   }
 }
 
+// Return start and end of the time range that is ordered.
+export function getOrderedStartEndDateTime(start: DateTime, stop: DateTime) {
+  const startMs = start?.get("millisecond");
+  const stopMs = stop?.get("millisecond");
+
+  if (startMs > stopMs) {
+    return { start: stop, end: start };
+  } else {
+    return { start, end: stop };
+  }
+}
+
 export function getFilterForComparedDimension(
   dimensionName: string,
   filters: V1Expression,
diff --git a/web-common/src/features/dashboards/url-state/time-ranges/RillTime.ts b/web-common/src/features/dashboards/url-state/time-ranges/RillTime.ts
index ead7de9fa87b..3a18d1d5e27b 100644
--- a/web-common/src/features/dashboards/url-state/time-ranges/RillTime.ts
+++ b/web-common/src/features/dashboards/url-state/time-ranges/RillTime.ts
@@ -2,7 +2,7 @@ import { DEFAULT_TIME_RANGES } from "@rilldata/web-common/lib/time/config.ts";
 import { isGrainBigger } from "@rilldata/web-common/lib/time/grains";
 import { humaniseISODuration } from "@rilldata/web-common/lib/time/ranges/iso-ranges.ts";
 import { V1TimeGrain } from "@rilldata/web-common/runtime-client/gen/index.schemas";
-import { DateTime, Duration } from "luxon";
+import { DateTime, Duration, Interval } from "luxon";
 import type { DateObjectUnits } from "luxon";
 import {
   getLowerOrderGrain,
@@ -452,6 +452,17 @@ export class RillIsoInterval implements RillTimeInterval {
     }
     return timeRange;
   }
+
+  public toLuxonTimes() {
+    const start = this.start.toDateTime();
+    const end = this.end?.toDateTime();
+    const interval = end ? Interval.fromDateTimes(start, end) : undefined;
+    return {
+      start: start.isValid ? start : undefined,
+      end: end?.isValid ? end : undefined,
+      interval: interval?.isValid ? interval : undefined,
+    };
+  }
 }
 
 export class RillAllTimeInterval implements RillTimeInterval {
@@ -750,6 +761,10 @@ export class RillAbsoluteTime implements RillPointInTimeVariant {
   public toString() {
     return this.timeStr;
   }
+
+  public toDateTime() {
+    return DateTime.fromObject(this.dateObject);
+  }
 }
 
 type RillGrain = {
diff --git a/web-common/src/features/dashboards/workspace/Dashboard.svelte b/web-common/src/features/dashboards/workspace/Dashboard.svelte
index de679c7dd53a..047d9ded2942 100644
--- a/web-common/src/features/dashboards/workspace/Dashboard.svelte
+++ b/web-common/src/features/dashboards/workspace/Dashboard.svelte
@@ -133,8 +133,6 @@
       }
     : undefined;
 
-  $: timeRanges = exploreSpec?.timeRanges ?? [];
-
   $: visibleMeasureNames = $visibleMeasures.map(({ name }) => name ?? "");
 
   // For non-embedded dashboards, theme can come from URL params.
@@ -179,7 +177,7 @@
       {:else}
         {#key exploreName}
           <section class="flex relative justify-between gap-x-4 py-4 pb-6 px-4">
-            <Filters {timeRanges} {metricsViewName} {hasTimeSeries} />
+            <Filters />
             <div class="absolute bottom-0 flex flex-col right-0">
               <TabBar {hidePivot} {exploreName} onPivot={$showPivot} />
             </div>
diff --git a/web-common/src/features/explores/explore-link/explore-state-transformer.ts b/web-common/src/features/explores/explore-link/explore-state-transformer.ts
index 40abf2b1a081..f1f44624b87a 100644
--- a/web-common/src/features/explores/explore-link/explore-state-transformer.ts
+++ b/web-common/src/features/explores/explore-link/explore-state-transformer.ts
@@ -1,46 +1,47 @@
 import type { ExploreState } from "@rilldata/web-common/features/dashboards/stores/explore-state";
-import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
-import { TimeRangePreset } from "@rilldata/web-common/lib/time/types";
+import { type DashboardTimeControls } from "@rilldata/web-common/lib/time/types";
+import type { ExpressionState } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
+import type { TimeControlState } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 /**
  * Transforms time and filter store data into partial explore state
  */
 export function transformTimeAndFiltersToExploreState(
-  timeAndFilterStore: TimeAndFilterStore,
+  expressionState: ExpressionState,
+  timeControlState: TimeControlState,
 ): Partial<ExploreState> {
   const exploreState: Partial<ExploreState> = {};
 
-  if (timeAndFilterStore.where) {
-    exploreState.whereFilter = timeAndFilterStore.where;
+  if (expressionState.expr) {
+    exploreState.whereFilter = expressionState.expr;
   }
 
-  if (timeAndFilterStore.timeRangeState) {
-    exploreState.selectedTimeRange =
-      timeAndFilterStore.timeRangeState.selectedTimeRange;
-    exploreState.selectedTimezone =
-      timeAndFilterStore?.timeRange?.timeZone || "UTC";
+  if (timeControlState.timeRange && timeControlState.apiTimeRange) {
+    exploreState.selectedTimeRange = {
+      name: timeControlState.timeRange,
+      start: timeControlState.apiTimeRange.start
+        ? new Date(timeControlState.apiTimeRange.start)
+        : new Date(),
+      end: timeControlState.apiTimeRange.end
+        ? new Date(timeControlState.apiTimeRange.end)
+        : new Date(),
+      interval: timeControlState.timeGrain,
+    };
+
+    exploreState.selectedTimezone = timeControlState.timeZone;
 
-    if (timeAndFilterStore.showTimeComparison) {
+    if (
+      timeControlState.comparisonTimeRange &&
+      timeControlState.apiComparisonTimeRange
+    ) {
       exploreState.showTimeComparison = true;
-      exploreState.selectedComparisonTimeRange =
-        timeAndFilterStore.comparisonTimeRangeState?.selectedComparisonTimeRange;
+      exploreState.selectedComparisonTimeRange = {
+        name: timeControlState.comparisonTimeRange,
+      } as DashboardTimeControls;
     } else {
       exploreState.showTimeComparison = false;
       exploreState.selectedComparisonTimeRange = undefined;
     }
-  } else if (
-    timeAndFilterStore.timeRange &&
-    timeAndFilterStore.timeRange.start &&
-    timeAndFilterStore.timeRange.end
-  ) {
-    exploreState.selectedTimeRange = {
-      name: TimeRangePreset.CUSTOM,
-      interval: timeAndFilterStore.timeGrain,
-      start: new Date(timeAndFilterStore.timeRange.start),
-      end: new Date(timeAndFilterStore.timeRange.end),
-    };
-    exploreState.selectedTimezone =
-      timeAndFilterStore.timeRange.timeZone || "UTC";
   }
 
   return exploreState;
diff --git a/web-common/src/features/metrics-views/providers/MetricsViewsProvider.svelte.ts b/web-common/src/features/metrics-views/providers/MetricsViewsProvider.svelte.ts
index 3dab6a80127f..1f11b5ed7759 100644
--- a/web-common/src/features/metrics-views/providers/MetricsViewsProvider.svelte.ts
+++ b/web-common/src/features/metrics-views/providers/MetricsViewsProvider.svelte.ts
@@ -5,6 +5,7 @@ import {
   type MetricsViewSpecMeasure,
   type V1MetricsViewSpec,
   type V1Resource,
+  V1TimeGrain,
   type V1TimeRangeSummary,
 } from "@rilldata/web-common/runtime-client";
 import type { RuntimeClient } from "@rilldata/web-common/runtime-client/v2";
@@ -13,6 +14,10 @@ import { Duration } from "luxon";
 import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient.ts";
 import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors.ts";
 import { arrayUnorderedEquals } from "@rilldata/web-common/lib/arrayUtils.ts";
+import {
+  MinSupportedGrain,
+  V1TimeGrainToOrder,
+} from "@rilldata/web-common/lib/time/new-grains.ts";
 
 export type MetricsViewName = string;
 export type DimensionName = string;
@@ -60,6 +65,9 @@ export class MetricsViewsProvider {
   public timeRangeSummary: V1TimeRangeSummary | undefined;
   /** Smallest restriction across the metrics views, since it has to hold for all of them. */
   public maxQueryTimeRange: Duration | undefined;
+  /** Smallest time grain across the metrics views, since it has to hold for all of them. */
+  public smallestTimeGrain: V1TimeGrain | undefined;
+  public smallestGrainOrder: number;
   /** True once every metrics view has a spec and every time series metrics view has a summary. */
   public ready: boolean;
   public metricsViewNames = $state<string[]>([]);
@@ -186,6 +194,9 @@ export class MetricsViewsProvider {
     > = {};
     const dimensions: MetricsViewSpecDimension[] = [];
 
+    let smallestTimeGrain: V1TimeGrain | undefined = undefined;
+    let smallestGrainOrder: number | undefined = Infinity;
+
     for (const metricsViewName of this.metricsViewNames) {
       const res = this.resources.find(
         (resource) =>
@@ -221,6 +232,18 @@ export class MetricsViewsProvider {
         specsForDimension[metricsViewName] = dimension;
       });
 
+      if (spec.smallestTimeGrain) {
+        const specGrainOrder = V1TimeGrainToOrder[spec.smallestTimeGrain];
+
+        if (!smallestTimeGrain) {
+          smallestTimeGrain = spec.smallestTimeGrain;
+          smallestGrainOrder = specGrainOrder;
+        } else if (specGrainOrder < smallestGrainOrder) {
+          smallestTimeGrain = spec.smallestTimeGrain;
+          smallestGrainOrder = specGrainOrder;
+        }
+      }
+
       this.subscribeToTimeRange(metricsViewName, spec);
     }
 
@@ -230,6 +253,10 @@ export class MetricsViewsProvider {
     this.simpleMeasures = simpleMeasures;
     this.dimensionSpecs = dimensionSpecs;
     this.dimensions = dimensions;
+    this.smallestTimeGrain = smallestTimeGrain;
+    this.smallestGrainOrder = smallestTimeGrain
+      ? smallestGrainOrder
+      : V1TimeGrainToOrder[MinSupportedGrain];
   }
 
   /**
diff --git a/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte b/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
index 5e992674d8e1..8fa60ab598e4 100644
--- a/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
+++ b/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
@@ -5,7 +5,6 @@
   import MultiInput from "@rilldata/web-common/components/forms/MultiInput.svelte";
   import FormSection from "@rilldata/web-common/components/forms/FormSection.svelte";
   import { getHasSlackConnection } from "@rilldata/web-common/features/alerts/delivery-tab/notifiers-utils";
-  import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import FiltersForm from "@rilldata/web-common/features/scheduled-reports/FiltersForm.svelte";
   import RowsAndColumnsForm from "@rilldata/web-common/features/scheduled-reports/fields/RowsAndColumnsForm.svelte";
   import ScheduleForm from "@rilldata/web-common/features/scheduled-reports/ScheduleForm.svelte";
@@ -35,20 +34,26 @@
   import { specHasTabGroups } from "@rilldata/web-common/features/canvas/stores/tab-group";
   import type { EphemeralMeasureDef } from "@rilldata/web-common/features/dashboards/ephemeral-measures/types.ts";
   import type { V1Resource } from "@rilldata/web-common/runtime-client";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+  import {
+    CanvasDashboardConfigProvider,
+    type DashboardConfigProvider,
+    ExploreDashboardConfigProvider,
+  } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
 
   export let formId: string;
   export let data: Readable<ReportValues>;
   export let errors: SuperFormErrors<ReportValues>;
   export let submit: () => void;
   export let enhance;
-  export let metricsViewName: string;
   export let exploreName: string;
   export let canvasName: string = "";
   // Canvas state (URL search string) to display instead of the page URL; set when
   // editing a report so the filter bar shows the report's captured state.
   export let canvasStateOverride: string | undefined = undefined;
-  export let filters: ExpressionFilterManager | undefined = undefined;
-  export let timeControls: TimeControls | undefined = undefined;
+  export let expressionFilterManager: ExpressionFilterManager | undefined =
+    undefined;
+  export let timeFilterManager: TimeFilterManager | undefined = undefined;
   export let ephemeralMeasures: EphemeralMeasureDef[] | undefined = undefined;
 
   const RUN_AS_OPTIONS = [
@@ -89,6 +94,14 @@
   $: canvasFiltersEnabled =
     $canvasQuery.data?.canvas?.state?.validSpec?.filtersEnabled ?? true;
 
+  let dashboardConfigProvider: DashboardConfigProvider;
+  $: {
+    dashboardConfigProvider?.cleanup?.();
+    dashboardConfigProvider = exploreName
+      ? new ExploreDashboardConfigProvider(runtimeClient, exploreName)
+      : new CanvasDashboardConfigProvider(runtimeClient, canvasName);
+  }
+
   // Keyboard counterpart of the read-only filter bar's pointer-events guard:
   // its controls remain focusable, so kick focus back out to keep them inoperable.
   function blurFocusedDescendant(event: FocusEvent) {
@@ -245,7 +258,7 @@
         </Tooltip>
       </div>
 
-      {#if filters && timeControls}
+      {#if expressionFilterManager && timeFilterManager}
         <div class="flex flex-col gap-y-3">
           <InputLabel
             label={m.report_form_filters()}
@@ -253,10 +266,9 @@
             capitalize={false}
           />
           <FiltersForm
-            {filters}
-            {metricsViewName}
-            {exploreName}
-            {timeControls}
+            {expressionFilterManager}
+            {timeFilterManager}
+            {dashboardConfigProvider}
             side="top"
           />
         </div>
diff --git a/web-common/src/features/scheduled-reports/FiltersForm.svelte b/web-common/src/features/scheduled-reports/FiltersForm.svelte
index e2d4e4ff3279..7c88dec06f29 100644
--- a/web-common/src/features/scheduled-reports/FiltersForm.svelte
+++ b/web-common/src/features/scheduled-reports/FiltersForm.svelte
@@ -1,246 +1,40 @@
 <script lang="ts">
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
-  import Calendar from "@rilldata/web-common/components/icons/Calendar.svelte";
-  import CanvasComparisonPill from "@rilldata/web-common/features/canvas/filters/CanvasComparisonPill.svelte";
-  import { deriveInterval } from "@rilldata/web-common/features/dashboards/time-controls/new-time-controls.ts";
-  import SuperPill from "@rilldata/web-common/features/dashboards/time-controls/super-pill/SuperPill.svelte";
-  import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
-  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient.ts";
-  import { DEFAULT_TIME_RANGES } from "@rilldata/web-common/lib/time/config.ts";
-  import { getDefaultTimeGrain } from "@rilldata/web-common/lib/time/grains";
-  import {
-    type DashboardTimeControls,
-    TimeComparisonOption,
-    type TimeRange,
-    TimeRangePreset,
-  } from "@rilldata/web-common/lib/time/types.ts";
-  import { V1TimeGrain } from "@rilldata/web-common/runtime-client";
-  import { invalidationForMetricsViewData } from "@rilldata/web-common/runtime-client/invalidation.ts";
-  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
-  import { DateTime, Interval } from "luxon";
-  import { onMount } from "svelte";
   import type { ExpressionFilterManager } from "../dashboards/filters/ExpressionFilterManager.svelte.ts";
-  import { useExploreValidSpec } from "@rilldata/web-common/features/explores/selectors.ts";
   import ExpressionFilters from "../dashboards/filters/ExpressionFilters.svelte";
   import { syncStoreWithSource } from "@rilldata/web-common/lib/store-utils/url-params-store-sync.svelte.ts";
-
-  const runtimeClient = useRuntimeClient();
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+  import TimeFilters from "@rilldata/web-common/features/dashboards/time-controls/TimeFilters.svelte";
+  import type { DashboardConfigProvider } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
 
   let {
-    filters,
-    metricsViewName,
-    exploreName,
-    timeControls,
+    expressionFilterManager,
+    timeFilterManager,
+    dashboardConfigProvider,
     maxWidth = undefined,
-    side = "bottom",
+    // side = "bottom", // TODO
   }: {
-    filters: ExpressionFilterManager;
-    // TODO: make this support canvas. Unifying time controls should allow for this.
-    metricsViewName: string;
-    exploreName: string;
-    timeControls: TimeControls;
+    expressionFilterManager: ExpressionFilterManager;
+    timeFilterManager: TimeFilterManager;
+    dashboardConfigProvider: DashboardConfigProvider;
     maxWidth?: number | undefined;
     side?: "top" | "right" | "bottom" | "left";
   } = $props();
 
   // svelte-ignore state_referenced_locally
   syncStoreWithSource(
-    filters,
-    async (newUrlParams) => filters.setUrlParams(newUrlParams),
-    () => filters.metricsViewsProvider.ready,
-  );
-
-  let {
-    selectedTimezone,
-    allTimeRange: allTimeRangeStore,
-    timeRangeStateStore,
-    comparisonRangeStateStore,
-    minTimeGrain: _minTimeGrain,
-    setTimeZone,
-    selectTimeRange,
-    setSelectedComparisonRange,
-    displayTimeComparison,
-  } = $derived(timeControls);
-
-  let validSpecQuery = $derived(
-    useExploreValidSpec(runtimeClient, exploreName),
-  );
-  let allTimeRange = $derived($allTimeRangeStore);
-  let exploreSpec = $derived($validSpecQuery.data?.explore ?? {});
-  let metricsViewSpec = $derived($validSpecQuery.data?.metricsView ?? {});
-  let timeDimension = $derived(metricsViewSpec.timeDimension);
-
-  let { selectedTimeRange, timeStart, timeEnd } = $derived(
-    $timeRangeStateStore || {},
-  );
-  let selectedComparisonTimeRange = $derived(
-    $comparisonRangeStateStore?.selectedComparisonTimeRange,
-  );
-
-  let baseTimeRange = $derived(
-    selectedTimeRange?.start &&
-      selectedTimeRange?.end && {
-        name: selectedTimeRange?.name,
-        start: selectedTimeRange.start,
-        end: selectedTimeRange.end,
-      },
-  );
-
-  let selectedRangeAlias = $derived(selectedTimeRange?.name);
-  let activeTimeGrain = $derived(selectedTimeRange?.interval);
-  let defaultTimeRange = $derived(exploreSpec.defaultPreset?.timeRange);
-  let availableTimeZones = $derived(exploreSpec.timeZones ?? []);
-  let timeRanges = $derived(exploreSpec.timeRanges ?? []);
-
-  let minTimeGrain = $derived($_minTimeGrain);
-
-  let activeTimeZone = $derived($selectedTimezone);
-
-  let maybeInterval = $derived(
-    selectedTimeRange
-      ? Interval.fromDateTimes(
-          DateTime.fromJSDate(selectedTimeRange.start).setZone(activeTimeZone),
-          DateTime.fromJSDate(selectedTimeRange.end).setZone(activeTimeZone),
-        )
-      : allTimeRange
-        ? Interval.fromDateTimes(allTimeRange.start, allTimeRange.end)
-        : undefined,
-  );
-
-  let interval = $derived(maybeInterval?.isValid ? maybeInterval : undefined);
-
-  let maybeMinDate = $derived(
-    allTimeRange?.start ? DateTime.fromJSDate(allTimeRange.start) : undefined,
-  );
-  let maybeMaxDate = $derived(
-    allTimeRange?.end ? DateTime.fromJSDate(allTimeRange.end) : undefined,
-  );
-
-  let minDate = $derived(maybeMinDate?.isValid ? maybeMinDate : undefined);
-  let maxDate = $derived(maybeMaxDate?.isValid ? maybeMaxDate : undefined);
-
-  let maybeComparisonInterval = $derived(
-    selectedComparisonTimeRange
-      ? Interval.fromDateTimes(
-          DateTime.fromJSDate(selectedComparisonTimeRange.start).setZone(
-            activeTimeZone,
-          ),
-          DateTime.fromJSDate(selectedComparisonTimeRange.end).setZone(
-            activeTimeZone,
-          ),
-        )
-      : undefined,
+    expressionFilterManager,
+    async (newUrlParams) => expressionFilterManager.setUrlParams(newUrlParams),
+    () => expressionFilterManager.metricsViewsProvider.ready,
   );
-  let comparisonInterval = $derived(
-    maybeComparisonInterval?.isValid ? maybeComparisonInterval : undefined,
+  // svelte-ignore state_referenced_locally
+  syncStoreWithSource(
+    timeFilterManager,
+    async (newUrlParams) => timeFilterManager.setUrlParams(newUrlParams),
+    () => timeFilterManager.ready,
   );
 
-  function makeTimeSeriesTimeRangeAndUpdateAppState(
-    timeRange: TimeRange,
-    timeGrain: V1TimeGrain,
-    /** we should only reset the comparison range when the user has explicitly chosen a new
-     * time range. Otherwise, the current comparison state should continue to be the
-     * source of truth.
-     */
-    comparisonTimeRange: DashboardTimeControls | undefined,
-  ) {
-    selectTimeRange(timeRange, timeGrain, comparisonTimeRange);
-  }
-
-  function selectRange(
-    range: TimeRange,
-    grain?: V1TimeGrain,
-    rangeOnly: boolean = false,
-  ) {
-    const defaultTimeGrain =
-      grain ?? getDefaultTimeGrain(range.start, range.end).grain;
-
-    const comparisonOption = DEFAULT_TIME_RANGES[range.name as TimeRangePreset]
-      ?.defaultComparison as TimeComparisonOption;
-
-    // Get valid option for the new time range
-    const validComparison = allTimeRange && comparisonOption;
-
-    makeTimeSeriesTimeRangeAndUpdateAppState(
-      range,
-      defaultTimeGrain,
-      rangeOnly
-        ? undefined
-        : ({
-            name: validComparison,
-          } as DashboardTimeControls),
-    );
-  }
-
-  async function onSelectRange(name: string, rangeOnly: boolean = false) {
-    if (!allTimeRange?.end) {
-      return;
-    }
-
-    const includesTimeZoneOffset = name.includes("tz");
-
-    if (includesTimeZoneOffset) {
-      const timeZone = name.match(/tz (.*)/)?.[1];
-
-      if (timeZone) setTimeZone(timeZone);
-    }
-
-    await queryClient.cancelQueries({
-      predicate: (query) =>
-        invalidationForMetricsViewData(query, metricsViewName),
-    });
-
-    const { interval, grain } = await deriveInterval(
-      name,
-      runtimeClient,
-      metricsViewName,
-      $selectedTimezone,
-      timeDimension,
-    );
-
-    if (interval?.isValid) {
-      const validInterval = interval as Interval<true>;
-      const baseTimeRange: TimeRange = {
-        name: name as TimeRangePreset,
-        start: validInterval.start.toJSDate(),
-        end: validInterval.end.toJSDate(),
-      };
-
-      selectRange(baseTimeRange, grain, rangeOnly);
-    }
-  }
-
-  function onTimeGrainSelect(timeGrain: V1TimeGrain) {
-    if (baseTimeRange) {
-      makeTimeSeriesTimeRangeAndUpdateAppState(
-        baseTimeRange,
-        timeGrain,
-        selectedComparisonTimeRange,
-      );
-    }
-  }
-
-  function onSelectTimeZone(timeZone: string) {
-    if (!interval?.isValid) return;
-
-    if (selectedRangeAlias === TimeRangePreset.CUSTOM) {
-      selectRange({
-        name: TimeRangePreset.CUSTOM,
-        start: interval.start
-          ?.setZone(timeZone, { keepLocalTime: true })
-          .toJSDate(),
-        end: interval.end
-          ?.setZone(timeZone, { keepLocalTime: true })
-          .toJSDate(),
-      });
-    }
-
-    setTimeZone(timeZone);
-  }
-
-  onMount(() => {
-    if (selectedRangeAlias) onSelectRange(selectedRangeAlias, true);
-  });
+  let { timeStart, timeEnd, timeDimension } = $derived(timeFilterManager);
 </script>
 
 <div
@@ -248,59 +42,20 @@
   style:max-width="{maxWidth}px"
   aria-label={m.report_form_filters_aria()}
 >
-  <div
-    class="flex flex-row flex-wrap gap-x-2 gap-y-1.5 items-center ml-2 pointer-events-auto w-fit"
-  >
-    <Calendar size="16px" />
-    {#if allTimeRange}
-      <SuperPill
-        {minDate}
-        {maxDate}
-        {selectedRangeAlias}
-        showPivot={false}
-        {defaultTimeRange}
-        {availableTimeZones}
-        {timeRanges}
-        complete={false}
-        {interval}
-        {timeStart}
-        {timeEnd}
-        {activeTimeGrain}
-        activeTimeZone={$selectedTimezone}
-        allowCustomTimeRange={false}
-        showDefaultItem
-        applyRange={selectRange}
-        {onSelectRange}
-        {onTimeGrainSelect}
-        {onSelectTimeZone}
-        hidePan
-        onPan={() => {}}
-        {minTimeGrain}
-        {side}
-      />
-      <CanvasComparisonPill
-        {minTimeGrain}
-        {minDate}
-        {maxDate}
-        {interval}
-        selectedRange={selectedRangeAlias}
-        comparisonRange={selectedComparisonTimeRange?.name}
-        {comparisonInterval}
-        {activeTimeGrain}
-        showTimeComparison={$comparisonRangeStateStore?.showTimeComparison ??
-          false}
-        activeTimeZone={$selectedTimezone}
-        onDisplayTimeComparison={displayTimeComparison}
-        onSetSelectedComparisonRange={setSelectedComparisonRange}
-        allowCustomTimeRange={false}
-        {side}
-      />
-    {/if}
-  </div>
+  <TimeFilters
+    {timeFilterManager}
+    {dashboardConfigProvider}
+    config={{
+      showTimeDimensionSelector: true,
+      showFullRange: true,
+      showWatermark: true,
+    }}
+    context="adhoc"
+  />
 
   <ExpressionFilters
-    expressionFilterManager={filters}
-    filteredMeasures={exploreSpec?.measures}
+    {expressionFilterManager}
+    {dashboardConfigProvider}
     {timeStart}
     {timeEnd}
     {timeDimension}
diff --git a/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte b/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
index 019a93b9004d..8fc1a2993601 100644
--- a/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
+++ b/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
@@ -34,7 +34,6 @@
     aggregationRequestWithTimeRange,
     buildAggregationRequest,
   } from "@rilldata/web-common/features/dashboards/aggregation-request-utils.ts";
-  import { useMetricsViewTimeRange } from "@rilldata/web-common/features/dashboards/selectors.ts";
   import { useExploreValidSpec } from "@rilldata/web-common/features/explores/selectors.ts";
   import {
     getDashboardNameFromReport,
@@ -72,8 +71,8 @@
   import BaseScheduledReportForm from "./BaseScheduledReportForm.svelte";
   import { convertFormValuesToCronExpression } from "./time-utils";
   import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
-  import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import { onDestroy } from "svelte";
+  import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
   export let open: boolean;
   export let props:
@@ -121,13 +120,6 @@
   $: exploreStateStore = useExploreState(exploreName);
   $: metricsViewName = exploreSpec.metricsView ?? "";
 
-  $: allTimeRangeResp = useMetricsViewTimeRange(
-    runtimeClient,
-    metricsViewName,
-    undefined,
-    queryClient,
-  );
-
   $: mutation =
     props.mode === "edit"
       ? createAdminServiceEditReport()
@@ -164,19 +156,21 @@
       ? ephemeralDefsFromRequestMeasures(aggregationRequest.measures)
       : $exploreStateStore?.ephemeralMeasures;
 
-  let filters: ExpressionFilterManager | undefined;
-  let timeControls: TimeControls | undefined;
+  let expressionFilterManager: ExpressionFilterManager | undefined;
+  let timeFilterManager: TimeFilterManager | undefined;
   let cleanup: (() => void) | undefined = undefined;
   $: {
     cleanup?.();
-    ({ filters, timeControls, cleanup } = isCanvasReport
-      ? { filters: undefined, timeControls: undefined, cleanup: undefined }
+    ({ expressionFilterManager, timeFilterManager, cleanup } = isCanvasReport
+      ? {
+          expressionFilterManager: undefined,
+          timeFilterManager: undefined,
+          cleanup: undefined,
+        }
       : getFiltersAndTimeControlsFromAggregationRequest(
           runtimeClient,
           metricsViewName,
-          exploreName,
           aggregationRequest,
-          $allTimeRangeResp.data?.timeRangeSummary,
         ));
   }
 
@@ -346,22 +340,24 @@
       };
     }
 
-    const timeControlsState = timeControls!.toState();
     const updatedAggregationRequest = buildAggregationRequest(
       aggregationRequest,
       [
-        aggregationRequestWithTimeRange(exploreSpec, timeControlsState),
+        ...(timeFilterManager
+          ? [aggregationRequestWithTimeRange(timeFilterManager)]
+          : []),
         aggregationRequestWithRowsAndColumns({
           exploreSpec,
           rows: values.rows,
           columns: values.columns,
-          showTimeComparison: timeControlsState.showTimeComparison,
-          selectedTimezone: timeControlsState.selectedTimezone,
+          showTimeComparison: timeFilterManager?.showComparison ?? false,
+          selectedTimezone: timeFilterManager?.timeZone ?? "UTC",
           ephemeralMeasures,
         }),
       ],
     );
-    updatedAggregationRequest.where = filters?.topLevelJoiner[metricsViewName];
+    updatedAggregationRequest.where =
+      expressionFilterManager?.topLevelJoiner[metricsViewName];
     return {
       ...commonOptions,
       explore: exploreName,
@@ -451,12 +447,11 @@
       {errors}
       {submit}
       {enhance}
-      metricsViewName={metricsViewName ?? ""}
       exploreName={exploreName ?? ""}
       {canvasName}
       {canvasStateOverride}
-      {filters}
-      {timeControls}
+      {expressionFilterManager}
+      {timeFilterManager}
       {ephemeralMeasures}
     />
 
diff --git a/web-common/src/features/scheduled-reports/utils.ts b/web-common/src/features/scheduled-reports/utils.ts
index 863d7885aa6b..51d296d33be0 100644
--- a/web-common/src/features/scheduled-reports/utils.ts
+++ b/web-common/src/features/scheduled-reports/utils.ts
@@ -1,20 +1,15 @@
 import { splitDimensionsAndMeasuresAsRowsAndColumns } from "@rilldata/web-common/features/dashboards/aggregation-request-utils.ts";
 import { getDimensionNameFromAggregationDimension } from "@rilldata/web-common/features/dashboards/aggregation-request/dimension-utils.ts";
-import { ExploreMetricsViewMetadata } from "@rilldata/web-common/features/dashboards/stores/ExploreMetricsViewMetadata.ts";
-import { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
 import {
-  mapV1TimeRangeToSelectedComparisonTimeRange,
-  mapV1TimeRangeToSelectedTimeRange,
+  mapV1TimeRangeToComparisonTimeOption,
+  mapV1TimeRangeToRillTime,
 } from "@rilldata/web-common/features/dashboards/time-controls/time-range-mappers.ts";
 import { getExploreName } from "@rilldata/web-common/features/explore-mappers/utils";
 import {
   getExistingScheduleFormValues,
   getInitialScheduleFormValues,
 } from "@rilldata/web-common/features/scheduled-reports/time-utils";
-import {
-  type DashboardTimeControls,
-  TimeRangePreset,
-} from "@rilldata/web-common/lib/time/types.ts";
+import { TimeRangePreset } from "@rilldata/web-common/lib/time/types.ts";
 import {
   V1ExportFormat,
   type V1Expression,
@@ -23,12 +18,12 @@ import {
   type V1Query,
   type V1ReportSpec,
   type V1TimeRange,
-  type V1TimeRangeSummary,
 } from "@rilldata/web-common/runtime-client";
 import type { RuntimeClient } from "@rilldata/web-common/runtime-client/v2";
 import { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/ExpressionFilterManager.svelte.ts";
 import { MetricsViewsProvider } from "@rilldata/web-common/features/metrics-views/providers/MetricsViewsProvider.svelte.ts";
 import { YAMLConfigProvider } from "@rilldata/web-common/features/dashboards/providers/YAMLConfigProvider.svelte.ts";
+import { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export enum ReportRunAs {
   Recipient = "recipient",
@@ -173,56 +168,51 @@ export function getDashboardNameFromReport(reportSpec: V1ReportSpec): string {
 export function getFiltersAndTimeControlsFromAggregationRequest(
   client: RuntimeClient,
   metricsViewName: string,
-  exploreName: string,
   aggregationRequest: V1MetricsViewAggregationRequest,
-  timeRangeSummary: V1TimeRangeSummary | undefined,
 ) {
+  const metricsViewProvider = new MetricsViewsProvider(client, [
+    metricsViewName,
+  ]);
+  const yamlConfigProvider = new YAMLConfigProvider();
+
+  const expressionFilterManager = new ExpressionFilterManager(
+    metricsViewProvider,
+    yamlConfigProvider,
+  );
+  expressionFilterManager.setExprForMetricsView(
+    metricsViewName,
+    aggregationRequest.where,
+  );
+
   const timeRange = (aggregationRequest.timeRange as V1TimeRange) ?? {
     isoDuration: TimeRangePreset.ALL_TIME,
   };
 
-  let selectedTimeRange: DashboardTimeControls | undefined = undefined;
-  let selectedComparisonTimeRange: DashboardTimeControls | undefined =
-    undefined;
-  if (timeRangeSummary?.max) {
-    selectedTimeRange = mapV1TimeRangeToSelectedTimeRange(
-      timeRange,
-      timeRangeSummary,
-      timeRangeSummary.max,
-    );
-    if (aggregationRequest.comparisonTimeRange) {
-      selectedComparisonTimeRange = mapV1TimeRangeToSelectedComparisonTimeRange(
-        aggregationRequest.comparisonTimeRange,
-        timeRangeSummary,
-        timeRangeSummary.max,
-      );
-    }
-  }
-
-  const metricsViewMetadata = new ExploreMetricsViewMetadata(
+  const timeFilterManager = new TimeFilterManager(
     client,
-    metricsViewName,
-    exploreName,
-  );
-  const metricsViewProvider = new MetricsViewsProvider(client, [
-    metricsViewName,
-  ]);
-  const yamlConfigProvider = new YAMLConfigProvider();
-  const filters = new ExpressionFilterManager(
     metricsViewProvider,
     yamlConfigProvider,
+    false,
   );
-  filters.setExprForMetricsView(metricsViewName, aggregationRequest.where);
-
-  const timeControls = new TimeControls(metricsViewMetadata, {
-    selectedTimeRange,
-    selectedComparisonTimeRange,
-    showTimeComparison: !!selectedComparisonTimeRange,
-    selectedTimezone: timeRange?.timeZone ?? "UTC",
-  });
+  if (timeRange?.roundToGrain)
+    timeFilterManager.onSelectGrain(timeRange.roundToGrain);
+  if (timeRange?.timeZone) timeFilterManager.onSelectZone(timeRange.timeZone);
+
+  if (aggregationRequest.comparisonTimeRange) {
+    const selectedCompareTimeRange = mapV1TimeRangeToComparisonTimeOption(
+      aggregationRequest.comparisonTimeRange,
+    );
+    if (selectedCompareTimeRange)
+      timeFilterManager.onSelectComparisonRange(selectedCompareTimeRange);
+  }
+
+  const selectedTimeRange = mapV1TimeRangeToRillTime(timeRange);
+  if (selectedTimeRange)
+    void timeFilterManager.onSelectRange(selectedTimeRange);
+
   return {
-    filters,
-    timeControls,
+    expressionFilterManager,
+    timeFilterManager,
     cleanup: () => {
       metricsViewProvider.cleanup();
       yamlConfigProvider.cleanup?.();
diff --git a/web-common/src/lib/store-utils/url-params-store-sync.svelte.ts b/web-common/src/lib/store-utils/url-params-store-sync.svelte.ts
index 5674ca92c3c0..9299607b8d02 100644
--- a/web-common/src/lib/store-utils/url-params-store-sync.svelte.ts
+++ b/web-common/src/lib/store-utils/url-params-store-sync.svelte.ts
@@ -82,7 +82,6 @@ export function syncStoreWithSource(
       lock = false;
       return;
     }
-
     try {
       // Do not react to `sync` method changes
       const syncPromise = untrack(() => sync(newUrlParams));
diff --git a/web-common/src/lib/time/comparisons/index.ts b/web-common/src/lib/time/comparisons/index.ts
index 81ec883e78de..8b08687bc9e2 100644
--- a/web-common/src/lib/time/comparisons/index.ts
+++ b/web-common/src/lib/time/comparisons/index.ts
@@ -15,6 +15,7 @@ import {
   TimeRangePreset,
 } from "../types";
 import { isNewRillTimeFormat } from "@rilldata/web-common/features/dashboards/url-state/time-ranges/parser.ts";
+import type { RillTime } from "@rilldata/web-common/features/dashboards/url-state/time-ranges/RillTime.ts";
 
 export function getComparisonTransform(
   start: Date,
@@ -317,6 +318,26 @@ export function getComparisonLabel(comparisonTimeRange: V1TimeRange) {
   }
 }
 
+export function getComparisonLabelFromRange(
+  comparisonTimeRange: string,
+  parsedRillTime: RillTime,
+) {
+  switch (true) {
+    case comparisonTimeRange === TimeRangePreset.ALL_TIME:
+      return m.time_all_time();
+
+    case comparisonTimeRange === TimeComparisonOption.CONTIGUOUS ||
+      comparisonTimeRange.toLowerCase()?.endsWith("offset pp"):
+      return m.time_comparison_previous_period();
+
+    case comparisonTimeRange in TIME_COMPARISON:
+      return TIME_COMPARISON[comparisonTimeRange].label;
+
+    default:
+      return parsedRillTime.toString();
+  }
+}
+
 export function getComparisonInterval(
   interval: Interval<true> | undefined,
   comparisonRange: string | undefined,
diff --git a/web-common/src/lib/time/config.ts b/web-common/src/lib/time/config.ts
index 7ee1be36846c..fac70129943e 100644
--- a/web-common/src/lib/time/config.ts
+++ b/web-common/src/lib/time/config.ts
@@ -878,6 +878,7 @@ export const DEFAULT_TIMEZONES = [
   "Asia/Tokyo",
   "Australia/Sydney",
 ];
+export const DEFAULT_TIMEZONE = "UTC";
 
 /**
  * Mapping of {@link Period} to the unit in {@link Duration}
diff --git a/web-common/src/lib/time/new-grains.ts b/web-common/src/lib/time/new-grains.ts
index 5591c1166ce9..4497c4eae4f9 100644
--- a/web-common/src/lib/time/new-grains.ts
+++ b/web-common/src/lib/time/new-grains.ts
@@ -102,6 +102,11 @@ export const V1TimeGrainToDateTimeUnit: Record<V1TimeGrain, DateTimeUnit> = {
   [V1TimeGrain.TIME_GRAIN_YEAR]: "year",
 };
 
+// We don't want to support small grains like sec/milli-sec.
+export const MinSupportedGrain = V1TimeGrain.TIME_GRAIN_MINUTE;
+export const MinSupportedDateTimeUnit =
+  V1TimeGrainToDateTimeUnit[MinSupportedGrain];
+
 export const DateTimeUnitToV1TimeGrain = reverseMap(V1TimeGrainToDateTimeUnit);
 
 export function grainAliasToDateTimeUnit(alias: TimeGrainAlias): DateTimeUnit {
diff --git a/web-common/src/lib/time/ranges/index.ts b/web-common/src/lib/time/ranges/index.ts
index 3ad9517100eb..89c0df04162b 100644
--- a/web-common/src/lib/time/ranges/index.ts
+++ b/web-common/src/lib/time/ranges/index.ts
@@ -34,7 +34,12 @@ import {
   type TimeRangeOption,
   TimeRangePreset,
 } from "../types";
-import { DateTime, type DateTimeUnit } from "luxon";
+import {
+  DateTime,
+  type DateTimeUnit,
+  type DurationLike,
+  Interval,
+} from "luxon";
 import { V1TimeGrainToDateTimeUnit } from "../new-grains";
 
 // Loop through all presets to check if they can be a part of subset of given start and end date
@@ -205,6 +210,36 @@ export function getAdjustedFetchTime(
   }
 }
 
+/**
+ * Return Interval such that the results include extra data points for extrapolating the chart on both ends.
+ * Variant of {@link getAdjustedFetchTime} that takes and returns luxon Interval
+ */
+export function getAdjustedInterval(
+  interval: Interval,
+  grain: V1TimeGrain | undefined,
+  zone: string,
+): Interval | undefined {
+  if (interval?.isValid || !interval.start || !interval.end || !grain) {
+    return undefined;
+  }
+
+  const luxonUnit = V1TimeGrainToDateTimeUnit[grain];
+  const duration: DurationLike = { [luxonUnit]: 1 };
+
+  // Should only fail if somehow the Luxon unit is invalid
+  try {
+    const start = interval.start
+      .setZone(zone)
+      .minus(duration)
+      .startOf(luxonUnit);
+    const end = interval.end.setZone(zone).plus(duration).startOf(luxonUnit);
+
+    return Interval.fromDateTimes(start, end);
+  } catch {
+    return undefined;
+  }
+}
+
 /**
  * Return start and end date to be used as extents of the
  * time series charts
diff --git a/web-common/src/lib/time/transforms/index.ts b/web-common/src/lib/time/transforms/index.ts
index 31cceb6ab5cd..7f7c7d8d80bc 100644
--- a/web-common/src/lib/time/transforms/index.ts
+++ b/web-common/src/lib/time/transforms/index.ts
@@ -161,8 +161,10 @@ export function subtractFromPeriod(
   return duration.minus({ [period_duration]: 1 });
 }
 
+export function getDurationObjectFromMS(ms: number) {
+  return Duration.fromMillis(ms).shiftTo("days", "hours", "minutes", "seconds");
+}
+
 export function getDurationFromMS(ms: number): string {
-  return Duration.fromMillis(ms)
-    .shiftTo("days", "hours", "minutes", "seconds")
-    .toISO();
+  return getDurationObjectFromMS(ms).toISO();
 }
diff --git a/web-common/src/lib/url-utils.ts b/web-common/src/lib/url-utils.ts
index d2f9e205cc1f..b1a3dd2d4559 100644
--- a/web-common/src/lib/url-utils.ts
+++ b/web-common/src/lib/url-utils.ts
@@ -43,3 +43,12 @@ export function unorderedParamsAreEqual(
   }
   return true;
 }
+
+export function copySubsetParams(src: URLSearchParams, params: Set<string>) {
+  const newParams = new URLSearchParams();
+  for (const param of params) {
+    if (!src.has(param)) continue;
+    newParams.set(param, src.get(param)!);
+  }
+  return newParams;
+}