[APP-672] chore: comparison option consistency between rill- prefixed ranges and new time strings

web-common/src/features/canvas/filters/CanvasComparisonPill.svelte

@@ -48,6 +48,7 @@
   $: comparisonOptions = getComparisonOptionsForCanvas(
     selectedTimeRange,
     allowCustomTimeRange,
+    activeTimeZone,
   );
 
   function onSelectComparisonRange(
@@ -101,6 +102,7 @@
       {minTimeGrain}
       maxDate={minDate}
       minDate={maxDate}
+      timeGrain={activeTimeGrain}
       timeComparisonOptionsState={comparisonOptions}
       selectedComparison={selectedComparisonTimeRange}
       showComparison={showTimeComparison}

web-common/src/features/canvas/filters/util.ts

@@ -1,17 +1,16 @@
-import {
-  getAvailableComparisonsForTimeRange,
-  getComparisonRange,
-} from "@rilldata/web-common/lib/time/comparisons";
-import { PREVIOUS_COMPLETE_DATE_RANGES } from "@rilldata/web-common/lib/time/config";
+import { getAvailableComparisonsForTimeRange } from "@rilldata/web-common/lib/time/comparisons";
 import {
   TimeComparisonOption,
   TimeRangePreset,
   type DashboardTimeControls,
 } from "@rilldata/web-common/lib/time/types";
+import { getComparisonInterval } from "@rilldata/web-common/lib/time/comparisons";
+import { DateTime, Interval } from "luxon";
 
 export function getComparisonOptionsForCanvas(
   selectedTimeRange: DashboardTimeControls | undefined,
   allowCustomTimeRange: boolean,
+  timezone: string,
 ) {
   if (!selectedTimeRange) {
     return [];
@@ -27,35 +26,42 @@ export function getComparisonOptionsForCanvas(
     allOptions = allOptions.filter((o) => o !== TimeComparisonOption.CUSTOM);
   }
 
-  if (
-    selectedTimeRange?.name &&
-    selectedTimeRange?.name in PREVIOUS_COMPLETE_DATE_RANGES
-  ) {
-    // Previous complete ranges should only have previous period.
-    // Other options dont make sense with our current wording of the comparison ranges.
-    allOptions = [TimeComparisonOption.CONTIGUOUS];
-    if (allowCustomTimeRange) allOptions.push(TimeComparisonOption.CUSTOM);
-  }
-
   const timeComparisonOptions = getAvailableComparisonsForTimeRange(
     allTimeRange.start,
     allTimeRange.end,
     selectedTimeRange.start,
     selectedTimeRange.end,
     allOptions,
+    timezone,
   );
 
-  return timeComparisonOptions.map((co, i) => {
-    const comparisonTimeRange = getComparisonRange(
-      selectedTimeRange.start,
-      selectedTimeRange.end,
-      co,
-    );
-    return {
+  const interval = Interval.fromDateTimes(
+    DateTime.fromJSDate(selectedTimeRange.start, { zone: timezone }),
+    DateTime.fromJSDate(selectedTimeRange.end, { zone: timezone }),
+  );
+
+  if (!interval.isValid) {
+    return [];
+  }
+
+  const options: {
+    name: TimeComparisonOption;
+    key: number;
+    start: Date;
+    end: Date;
+  }[] = [];
+
+  timeComparisonOptions.forEach((co, i) => {
+    const comparisonTimeRange = getComparisonInterval(interval, co, timezone);
+
+    if (!comparisonTimeRange) return;
+    options.push({
       name: co,
       key: i,
-      start: comparisonTimeRange.start,
-      end: comparisonTimeRange.end,
-    };
+      start: comparisonTimeRange.start.toJSDate(),
+      end: comparisonTimeRange.end.toJSDate(),
+    });
   });
+
+  return options;
 }

web-common/src/features/canvas/stores/time-state.ts

@@ -25,6 +25,7 @@ import {
 } from "@rilldata/web-common/lib/time/new-grains";
 import { maybeWritable } from "@rilldata/web-common/lib/store-utils";
 import type { TimeManager } from "./time-manager";
+import { getComparisonInterval } from "@rilldata/web-common/lib/time/comparisons";
 
 export type MinMax = {
   min: DateTime<true>;
@@ -427,39 +428,3 @@ const timeGrainToComparisonOptionMap: Record<
   [V1TimeGrain.TIME_GRAIN_YEAR]: TimeComparisonOption.YEAR,
   [V1TimeGrain.TIME_GRAIN_UNSPECIFIED]: TimeComparisonOption.CONTIGUOUS,
 };
-
-function getComparisonInterval(
-  interval: Interval<true> | undefined,
-  comparisonRange: string | undefined,
-  activeTimeZone: string,
-): Interval<true> | undefined {
-  if (!interval || !comparisonRange) return undefined;
-
-  let comparisonInterval: Interval | undefined = undefined;
-
-  const COMPARISON_DURATIONS = {
-    "rill-PP": interval.toDuration(),
-    "rill-PD": { days: 1 },
-    "rill-PW": { weeks: 1 },
-    "rill-PM": { months: 1 },
-    "rill-PQ": { quarter: 1 },
-    "rill-PY": { years: 1 },
-  };
-
-  const duration =
-    COMPARISON_DURATIONS[comparisonRange as keyof typeof COMPARISON_DURATIONS];
-
-  if (duration) {
-    comparisonInterval = Interval.fromDateTimes(
-      interval.start.minus(duration),
-      interval.end.minus(duration),
-    );
-  } else {
-    const normalizedRange = comparisonRange.replace(",", "/");
-    comparisonInterval = Interval.fromISO(normalizedRange).mapEndpoints((dt) =>
-      dt.setZone(activeTimeZone),
-    );
-  }
-
-  return comparisonInterval.isValid ? comparisonInterval : undefined;
-}

web-common/src/features/dashboards/filters/Filters.svelte

@@ -300,6 +300,8 @@
           | TimeComparisonOption
           | undefined,
         allTimeRange,
+
+        activeTimeZone,
       );
 
     makeTimeSeriesTimeRangeAndUpdateAppState(range, timeGrain, {

web-common/src/features/dashboards/stores/get-explore-state-from-yaml-config.ts

@@ -175,6 +175,7 @@ function getDefaultComparisonTimeRangeName(
     timeRange,
     undefined,
     allTimeRange,
+    timezone,
   );
 
   return comparisonTimeRangeName;

web-common/src/features/dashboards/time-controls/comparison-pill/ComparisonPill.svelte

@@ -115,6 +115,7 @@
       minDate={DateTime.fromJSDate(allTimeRange.start)}
       timeComparisonOptionsState={$timeComparisonOptionsState}
       {minTimeGrain}
+      timeGrain={activeTimeGrain}
       selectedComparison={selectedComparisonTimeRange}
       showComparison={showTimeComparison}
       currentInterval={interval}

web-common/src/features/dashboards/time-controls/super-pill/components/Comparison.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu/";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
-  import { getComparisonRange } from "@rilldata/web-common/lib/time/comparisons";
   import { TIME_COMPARISON } from "@rilldata/web-common/lib/time/config";
   import {
     type DashboardTimeControls,
@@ -12,7 +11,7 @@
   import RangeDisplay from "./RangeDisplay.svelte";
   import { V1TimeGrain } from "@rilldata/web-common/runtime-client";
   import { V1TimeGrainToDateTimeUnit } from "@rilldata/web-common/lib/time/new-grains";
-
+  import { getComparisonInterval } from "@rilldata/web-common/lib/time/comparisons";
   type Option = {
     name: TimeComparisonOption;
     key: number;
@@ -36,6 +35,7 @@
   ) => void;
   export let allowCustomTimeRange: boolean = true;
   export let minTimeGrain: V1TimeGrain | undefined;
+  export let timeGrain: V1TimeGrain | undefined;
   export let side: "top" | "right" | "bottom" | "left" = "bottom";
 
   let open = false;
@@ -71,16 +71,20 @@
       currentInterval.start &&
       currentInterval.end
     ) {
-      const comparisonTimeRange = getComparisonRange(
-        currentInterval.start.toJSDate(),
-        currentInterval.end.toJSDate(),
+      const comparisonTimeRange = getComparisonInterval(
+        currentInterval,
         comparisonOption,
+        zone,
       );
 
+      if (!comparisonTimeRange) {
+        return;
+      }
+
       onSelectComparisonRange(
         comparisonOption,
-        comparisonTimeRange.start,
-        comparisonTimeRange.end,
+        comparisonTimeRange.start.toJSDate(),
+        comparisonTimeRange.end.toJSDate(),
       );
     }
   }
@@ -111,7 +115,7 @@
         {:else}
           <b class="line-clamp-1">{label}</b>
           {#if interval?.isValid && showFullRange}
-            <RangeDisplay {interval} timeGrain={selectedComparison?.interval} />
+            <RangeDisplay {interval} {timeGrain} />
           {/if}
         {/if}
       </div>

web-common/src/features/dashboards/time-controls/time-control-store.ts

@@ -18,7 +18,6 @@ import { featureFlags } from "@rilldata/web-common/features/feature-flags.ts";
 import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
 import {
   getComparionRangeForScrub,
-  getComparisonRange,
   getTimeComparisonParametersForComponent,
 } from "@rilldata/web-common/lib/time/comparisons";
 import { DEFAULT_TIME_RANGES } from "@rilldata/web-common/lib/time/config";
@@ -60,6 +59,8 @@ import { derived, get } from "svelte/store";
 import { memoizeMetricsStore } from "../state-managers/memoize-metrics-store";
 import { parseRillTime } from "../url-state/time-ranges/parser";
 import type { RillTime } from "../url-state/time-ranges/RillTime";
+import { DateTime, Interval } from "luxon";
+import { getComparisonInterval } from "@rilldata/web-common/lib/time/comparisons";
 
 export type TimeRangeState = {
   // Selected ranges with start and end filled based on time range type
@@ -404,6 +405,7 @@ export function calculateComparisonTimeRangePartial(
     allTimeRange,
     timeRangeState.selectedTimeRange,
     currentComparisonTimeRange,
+    selectedTimezone,
   );
 
   let comparisonAdjustedStart: string | undefined = undefined;
@@ -552,6 +554,7 @@ export function getComparisonTimeRange(
   allTimeRange: TimeRange | undefined,
   timeRange: DashboardTimeControls | undefined,
   comparisonTimeRange: DashboardTimeControls | undefined,
+  timezone: string | undefined,
 ) {
   if (!timeRange || !timeRange.name || !allTimeRange) return undefined;
 
@@ -561,13 +564,15 @@ export function getComparisonTimeRange(
       timeRange,
       undefined,
       allTimeRange,
+      timezone,
     );
     const range = getTimeComparisonParametersForComponent(
       comparisonOption,
       allTimeRange.start,
       allTimeRange.end,
       timeRange.start,
       timeRange.end,
+      timezone || "UTC",
     );
 
     return {
@@ -585,16 +590,29 @@ export function getComparisonTimeRange(
   } else {
     // variable time range of some kind.
     const comparisonOption = comparisonTimeRange.name as TimeComparisonOption;
-    const range = getComparisonRange(
-      timeRange.start,
-      timeRange.end,
-      comparisonOption,
+    const interval = Interval.fromDateTimes(
+      DateTime.fromJSDate(timeRange.start, { zone: timezone }),
+      DateTime.fromJSDate(timeRange.end, { zone: timezone }),
     );
 
-    return {
-      ...range,
-      name: comparisonOption,
-    };
+    if (interval.isValid) {
+      const range = getComparisonInterval(
+        interval,
+        comparisonOption,
+        timezone || "UTC",
+      );
+      return {
+        start: range?.start.toJSDate(),
+        end: range?.end.toJSDate(),
+        name: comparisonOption,
+      };
+    } else {
+      return {
+        start: undefined,
+        end: undefined,
+        name: comparisonOption,
+      };
+    }
   }
 }