refac: unified time filter components

web-common/src/features/alerts/AlertForm.svelte

@@ -63,8 +63,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;
@@ -107,19 +107,14 @@
       ? 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,
@@ -134,7 +129,6 @@
             $allTimeRangeResp.data?.timeRangeSummary,
           ));
   }
-  $: ({ selectedComparisonTimeRange } = timeControls);
 
   const superFormInstance = superForm(
     defaults(initialValues, alertFormValidationSchema),
@@ -194,9 +188,8 @@
           queryArgsJson: JSON.stringify(
             getAlertQueryArgsFromFormValues(
               values,
-              filters.topLevelJoiner.expr[metricsViewName],
-              timeControls.toState(),
-              exploreSpec,
+              expressionFilterManager.topLevelJoiner.expr[metricsViewName],
+              timeFilterManager,
             ),
           ),
           metricsViewName: values.metricsViewName,
@@ -283,7 +276,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 +317,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} />

web-common/src/features/alerts/alert-preview-data.ts

@@ -11,16 +11,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,
@@ -33,6 +28,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[];
@@ -44,22 +40,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,
@@ -74,25 +62,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;
 }

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,
@@ -59,34 +58,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?.();

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>

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,
     ),
   );
 

web-common/src/features/alerts/criteria-tab/CriteriaForm.svelte

@@ -7,21 +7,20 @@
   import { parseCriteriaError } from "@rilldata/web-common/features/alerts/criteria-tab/parseCriteriaError";
   import type { AlertFormValues } from "@rilldata/web-common/features/alerts/form-utils";
   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,
@@ -45,7 +44,7 @@
 
   $: typeOptions = getTypeOptions(
     $form,
-    $selectedComparisonTimeRange,
+    timeFilterManager.comparisonTimeRange,
     selectedMeasure,
   );
 

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}