refac: unified time filter components

web-admin/src/features/alerts/metadata/AlertFilters.svelte

@@ -10,7 +10,13 @@
   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 ReadonlyExpressionFilters from "@rilldata/web-common/features/dashboards/filters/ReadonlyExpressionFilters.svelte";
-  import { onDestroy } from "svelte";
+  import { onDestroy, untrack } from "svelte";
+  import { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
+  import { ExploreStateURLParams } from "@rilldata/web-common/features/dashboards/url-state/url-params.ts";
+  import {
+    mapV1TimeRangeToComparisonTimeOption,
+    mapV1TimeRangeToRillTime,
+  } from "@rilldata/web-common/features/dashboards/time-controls/time-range-mappers.ts";
 
   let {
     metricsViewName,
@@ -31,6 +37,7 @@
   const metricsViewProvider = new MetricsViewsProvider(runtimeClient, []);
   $effect(() => metricsViewProvider.setMetricsViewNames([metricsViewName]));
   const yamlConfigProvider = new YAMLConfigProvider();
+
   const expressionFilterManager = new ExpressionFilterManager(
     metricsViewProvider,
     yamlConfigProvider,
@@ -43,6 +50,31 @@
     ),
   );
 
+  const timeFilterManager = new TimeFilterManager(
+    runtimeClient,
+    metricsViewProvider,
+    yamlConfigProvider,
+  );
+  $effect(() => {
+    if (!timeRange || !timeFilterManager.ready) return;
+    const urlParams = new URLSearchParams();
+    urlParams.set(
+      ExploreStateURLParams.TimeRange,
+      mapV1TimeRangeToRillTime(timeRange),
+    );
+
+    if (comparisonTimeRange) {
+      urlParams.set(
+        ExploreStateURLParams.ComparisonTimeRange,
+        mapV1TimeRangeToComparisonTimeOption(timeRange, comparisonTimeRange),
+      );
+    }
+
+    untrack(() => {
+      timeFilterManager.setUrlParams(urlParams);
+    });
+  });
+
   // time range could be an empty object sometimes
   let hasTimeRange = $derived(timeRange && Object.keys(timeRange).length > 0);
   let filtersLength = $derived(
@@ -59,11 +91,5 @@
   <MetadataLabel>
     {m.alert_filters_label({ count: String(filtersLength) })}
   </MetadataLabel>
-  <ReadonlyExpressionFilters
-    {expressionFilterManager}
-    displayTimeRange={timeRange}
-    displayComparisonTimeRange={comparisonTimeRange}
-    queryTimeStart={timeRange?.start}
-    queryTimeEnd={timeRange?.end}
-  />
+  <ReadonlyExpressionFilters {expressionFilterManager} {timeFilterManager} />
 </div>

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";
@@ -42,6 +35,7 @@
     ExploreDashboardConfigProvider,
   } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
   import { onDestroy } from "svelte";
+  import { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
   let {
     organization,
@@ -71,14 +65,22 @@
     resourceKind === ResourceKind.Canvas
       ? new CanvasDashboardConfigProvider(runtimeClient, resourceName)
       : new ExploreDashboardConfigProvider(runtimeClient, resourceName);
+
   const expressionFilterManager = new ExpressionFilterManager(
     dashboardConfigProvider.metricsViewsProvider,
     dashboardConfigProvider.yamlConfigProvider,
   );
 
+  const timeFilterManager = new TimeFilterManager(
+    runtimeClient,
+    dashboardConfigProvider.metricsViewsProvider,
+    dashboardConfigProvider.yamlConfigProvider,
+  );
+
   // Always load from current url state. This is the only route to overwrite bookmark state.
   // A future PR will improve this by adding `Replace` action, in that case this should only have bookmark's state.
   expressionFilterManager.storeSync.setUrlParams(page.url.searchParams);
+  timeFilterManager.storeSync.setUrlParams(page.url.searchParams);
 
   let timeFilterState = $state<
     | {
@@ -91,70 +93,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();
@@ -281,14 +219,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

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

@@ -38,6 +38,7 @@
     ExploreDashboardConfigProvider,
   } from "@rilldata/web-common/features/dashboards/providers/DashboardConfigProvider.svelte.ts";
   import { onDestroy } from "svelte";
+  import { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
   import { useCanvas } from "@rilldata/web-common/features/canvas/selector";
   import { useVisibilityConditionsCheck } from "@rilldata/web-common/features/dashboards/granular-access-policies/useSecurityPolicyCheck";
 
@@ -63,14 +64,22 @@
   const dashboardConfigProvider = isExplore
     ? new ExploreDashboardConfigProvider(runtimeClient, dashboardName)
     : new CanvasDashboardConfigProvider(runtimeClient, dashboardName);
+
   const expressionFilterManager = new ExpressionFilterManager(
     dashboardConfigProvider.metricsViewsProvider,
     dashboardConfigProvider.yamlConfigProvider,
   );
 
+  const timeFilterManager = new TimeFilterManager(
+    runtimeClient,
+    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.
   expressionFilterManager.storeSync.setUrlParams(page.url.searchParams);
+  timeFilterManager.storeSync.setUrlParams(page.url.searchParams);
 
   // A public URL shows a canvas the way its creator sees it, so point out content that only some viewers see.
   const canvasQuery = useCanvas(runtimeClient, dashboardName, {
@@ -91,13 +100,9 @@
     dashboardKind,
     expressionFilterManager,
   );
-  let {
-    fields,
-    sanitizedState,
-    droppedEphemeralMeasures,
-    queryTimeStart,
-    queryTimeEnd,
-  } = $derived($sanitisedFilterState);
+  let { fields, sanitizedState, droppedEphemeralMeasures } = $derived(
+    $sanitisedFilterState,
+  );
 
   const formId = "create-public-url-form";
 
@@ -259,8 +264,8 @@
         <div class="flex flex-col gap-2 my-2">
           <ReadonlyExpressionFilters
             {expressionFilterManager}
-            {queryTimeStart}
-            {queryTimeEnd}
+            {timeFilterManager}
+            hideTimePills
           />
         </div>
       </div>

web-admin/tests/bookmarks.spec.ts

@@ -44,7 +44,7 @@
 
         // Assert the selected filters
         await expect(adminPage.getByLabel("Readonly Filter Chips")).toHaveText(
-          ` Last 6 hours    App Site Name FuboTV  +1 other   `,
+          /Last 6 hours\s+vs Previous period\s+App Site Name FuboTV\s+\+1 other/,
         );
         // Create a personal bookmark
         await enterBookmarkDetails(
@@ -74,7 +74,7 @@
           "Filter-Only Bookmark Entry",
         );
         // Verify that a home bookmark was created
         await expect(filterOnlyBookmarkLocator).toHaveText(
           "Filter-Only My filter-only bookmark.",
         );
         // Verify that the bookmark has the correct icon
@@ -87,7 +87,7 @@
         await expect(adminPage.getByText("Last 6 Hours")).toBeVisible();
         await expect(
           adminPage.getByText("App Site Name FuboTV +1 other"),
         ).toBeVisible();
         await expect(
           adminPage.getByLabel("requests Time Dimension Display"),
         ).toBeVisible();
@@ -154,7 +154,7 @@
 
         // Assert the selected filters
         await expect(adminPage.getByLabel("Readonly Filter Chips")).toHaveText(
-          ` Last 6 hours    App Site Name FuboTV  +1 other   `,
+          /Last 6 hours\s+vs Previous period\s+App Site Name FuboTV\s+\+1 other/,
         );
         // Create a personal bookmark
         await enterBookmarkDetails(
@@ -377,12 +377,12 @@
 
         // Assert the selected filters
         await expect(adminPage.getByLabel("Readonly Filter Chips")).toHaveText(
-          ` Last 6 hours    Advertiser Name Instacart  +1 other   `,
+          /Last 6 hours\s+vs Previous period\s+Advertiser Name Instacart\s+\+1 other/,
         );
         // Assert filters applied
         await expect(
           adminPage.getByLabel("overall_spend KPI data"),
         ).toContainText(
           /Advertising Spend Overall\s*\$448.22\s*-\$75.80\s*-15%\s*vs previous period/,
         );
 
@@ -578,7 +578,7 @@
       }) => {
         // Add random params. Home bookmark shouldnt apply
         await adminPage.goto(
-          "/e2e/openrtb/canvas/bids_canvas_bookmarks?compare_tr=rill-PW",
+          "/e2e/openrtb/canvas/bids_canvas_bookmarks?tr=24h+as+of+latest%2Fh%2B1h&compare_tr=rill-PW",
         );
         // Default time range is present
         await expect(adminPage.getByText("Last 24 Hours")).toBeVisible();