refac: unified time filter components

web-common/src/features/dashboards/providers/DashboardConfigProvider.svelte.ts

@@ -0,0 +1,100 @@
+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 {
+  createQueryServiceResolveCanvas,
+  createRuntimeServiceGetExplore,
+} from "@rilldata/web-common/runtime-client";
+import { RuntimeClient } from "@rilldata/web-common/runtime-client/v2";
+
+/**
+ * Metrics view name and other yaml config provider based on dashboard type.
+ */
+export class DashboardConfigProvider {
+  public readonly metricsViewsProvider: MetricsViewsProvider;
+  public readonly yamlConfigProvider: YAMLConfigProvider;
+  public defaultUrlParams: URLSearchParams = $state(new URLSearchParams());
+
+  public cleanup: (() => void) | undefined = undefined;
+
+  public constructor(runtimeClient: RuntimeClient) {
+    this.metricsViewsProvider = new MetricsViewsProvider(runtimeClient, []);
+    this.yamlConfigProvider = new YAMLConfigProvider();
+  }
+}
+
+export class ExploreDashboardConfigProvider extends DashboardConfigProvider {
+  public constructor(runtimeClient: RuntimeClient, exploreName: string) {
+    super(runtimeClient);
+
+    const getExploreQuery = createRuntimeServiceGetExplore(runtimeClient, {
+      name: exploreName,
+    });
+    const getExploreUnsub = getExploreQuery.subscribe((getExploreResp) => {
+      const metricsViewSpec =
+        getExploreResp.data?.metricsView?.metricsView?.state?.validSpec ?? {};
+      const exploreSpec =
+        getExploreResp.data?.explore?.explore?.state?.validSpec ?? {};
+
+      this.metricsViewsProvider.setMetricsViewNames(
+        exploreSpec.metricsView ? [exploreSpec.metricsView] : [],
+      );
+
+      this.yamlConfigProvider.update({
+        restrictedDimensions: exploreSpec.dimensions,
+        primaryTimeDimension: metricsViewSpec.timeDimension,
+        restrictedMeasures: exploreSpec.measures,
+
+        defaultTimeRange: exploreSpec.defaultPreset?.timeRange,
+        timeRanges: exploreSpec.timeRanges,
+        timeZones: exploreSpec.timeZones,
+      });
+    });
+
+    this.cleanup = () => {
+      getExploreUnsub();
+      this.metricsViewsProvider.cleanup();
+      this.yamlConfigProvider.cleanup?.();
+    };
+  }
+}
+
+export class CanvasDashboardConfigProvider extends DashboardConfigProvider {
+  public constructor(runtimeClient: RuntimeClient, canvasName: string) {
+    super(runtimeClient);
+
+    const resolveCanvasQuery = createQueryServiceResolveCanvas(runtimeClient, {
+      canvas: canvasName,
+    });
+    const resolveCanvasUnsub = resolveCanvasQuery.subscribe(
+      (resolveCanvasResp) => {
+        const canvasSpec =
+          resolveCanvasResp.data?.canvas?.canvas?.state?.validSpec ?? {};
+
+        this.metricsViewsProvider.setMetricsViewNames(
+          Object.keys(resolveCanvasResp.data?.referencedMetricsViews ?? {}),
+        );
+
+        const defaultFilters = Object.fromEntries(
+          Object.entries(canvasSpec.defaultPreset?.filterExpr ?? {}).map(
+            ([mv, sqlFilter]) => [mv, sqlFilter.expression],
+          ),
+        );
+        this.yamlConfigProvider.update({
+          defaultFilters,
+          pinnedFilters: canvasSpec.pinnedFilters,
+          requiredFilters: canvasSpec.requiredFilters,
+
+          defaultTimeRange: canvasSpec.defaultPreset?.timeRange,
+          timeRanges: canvasSpec.timeRanges,
+          timeZones: canvasSpec.timeZones,
+        });
+      },
+    );
+
+    this.cleanup = () => {
+      resolveCanvasUnsub();
+      this.metricsViewsProvider.cleanup();
+      this.yamlConfigProvider.cleanup?.();
+    };
+  }
+}

web-common/src/features/dashboards/providers/YAMLConfigProvider.svelte.ts

@@ -0,0 +1,97 @@
+import {
+  type V1ExploreTimeRange,
+  type V1Expression,
+} from "@rilldata/web-common/runtime-client";
+import { DEFAULT_TIMEZONES } from "@rilldata/web-common/lib/time/config.ts";
+import type { DateTime } from "luxon";
+
+/**
+ * A provider for YAML only configuration. These are only mutable during yaml editing.
+ */
+export class YAMLConfigProvider {
+  public defaultFilters = $state<Record<string, V1Expression | undefined>>({});
+  public pinnedFilters = $state<Record<string, boolean>>({});
+  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 timeZones = $state<string[]>(DEFAULT_TIMEZONES);
+
+  public editable = $state<boolean>(false);
+
+  public cleanup: (() => void) | undefined = undefined;
+
+  public update({
+    defaultFilters,
+    pinnedFilters,
+    requiredFilters,
+
+    restrictedDimensions,
+    primaryTimeDimension,
+    restrictedMeasures,
+
+    defaultTimeRange,
+    timeRanges,
+    timeZones,
+  }: {
+    defaultFilters?: YAMLConfigProvider["defaultFilters"];
+    pinnedFilters?: string[];
+    requiredFilters?: string[];
+
+    restrictedDimensions?: YAMLConfigProvider["restrictedDimensions"];
+    primaryTimeDimension?: YAMLConfigProvider["primaryTimeDimension"];
+    restrictedMeasures?: YAMLConfigProvider["restrictedMeasures"];
+
+    defaultTimeRange?: YAMLConfigProvider["defaultTimeRange"];
+    timeRanges?: YAMLConfigProvider["timeRanges"];
+    timeZones?: YAMLConfigProvider["timeZones"];
+  }) {
+    this.defaultFilters = defaultFilters ?? {};
+
+    const pinnedFiltersRec = Object.fromEntries(
+      pinnedFilters?.map((filter) => [filter, true]) ?? [],
+    );
+    this.pinnedFilters = { ...pinnedFiltersRec };
+    this.specPinnedFilters = { ...pinnedFiltersRec };
+
+    const requiredFiltersRec = Object.fromEntries(
+      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.timeZones = timeZones ?? [];
+  }
+
+  public setEditable(newEditable: boolean) {
+    this.editable = newEditable;
+  }
+
+  public togglePinnedFilter(filter: string) {
+    if (!this.pinnedFilters[filter]) {
+      this.pinnedFilters[filter] = true;
+    } else {
+      delete this.pinnedFilters[filter];
+    }
+  }
+
+  public toggleRequiredFilter(filter: string) {
+    if (!this.requiredFilters[filter]) {
+      this.requiredFilters[filter] = true;
+    } else {
+      delete this.requiredFilters[filter];
+    }
+  }
+}

web-common/src/features/dashboards/state-managers/loaders/DashboardStateSync.ts

@@ -294,6 +294,7 @@ export class DashboardStateSync {
       this.updating = false;
     }
 
+    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;
@@ -349,6 +350,7 @@ export class DashboardStateSync {
         );
       }
 
+      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) {
@@ -362,3 +364,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}`,
+  );
+}

web-common/src/features/dashboards/state-managers/state-managers.ts

@@ -33,6 +33,11 @@ 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";
 
 export type StateManagers = {
   runtimeClient: RuntimeClient;
@@ -65,6 +70,9 @@ export type StateManagers = {
    */
   contextColumnWidths: Writable<ContextColWidths>;
   defaultExploreState: Readable<V1ExplorePreset>;
+  dashboardConfigProvider: DashboardConfigProvider;
+  timeFilterManager: TimeFilterManager;
+  cleanup: () => void;
 };
 
 export const DEFAULT_STORE_KEY = Symbol("state-managers");
@@ -163,6 +171,17 @@ export function createStateManagers({
     },
   );
 
+  const dashboardConfigProvider = new ExploreDashboardConfigProvider(
+    runtimeClient,
+    exploreName,
+  );
+  const timeFilterManager = new TimeFilterManager(
+    runtimeClient,
+    dashboardConfigProvider.metricsViewsProvider,
+    dashboardConfigProvider.yamlConfigProvider,
+    true,
+  );
+
   return {
     runtimeClient,
     metricsViewName: metricsViewNameStore,
@@ -191,5 +210,11 @@ export function createStateManagers({
     }),
     contextColumnWidths,
     defaultExploreState,
+
+    dashboardConfigProvider,
+    timeFilterManager,
+    cleanup: () => {
+      dashboardConfigProvider.cleanup?.();
+    },
   };
 }

web-common/src/features/dashboards/stores/dashboard-stores.ts

@@ -33,6 +33,7 @@ import {
   type PivotMeasureFormatting,
   type PivotTableMode,
 } from "../pivot/types";
+import type { TimeFilterManager } from "@rilldata/web-common/features/dashboards/time-controls/TimeFilterManager.svelte.ts";
 
 export interface MetricsExplorerStoreType {
   entities: Record<string, ExploreState>;
@@ -237,6 +238,33 @@ const metricsViewReducers = {
     });
   },
 
+  syncTimeFilters(name: string, timeFilterManager: TimeFilterManager) {
+    if (!name) return;
+    updateMetricsExplorerByName(name, (exploreState) => {
+      exploreState.selectedTimeRange = {
+        name: timeFilterManager.timeRangeManager.timeRange,
+        start:
+          timeFilterManager.timeRangeManager.interval?.start?.toJSDate() ??
+          new Date(),
+        end:
+          timeFilterManager.timeRangeManager.interval?.end?.toJSDate() ??
+          new Date(),
+        interval: timeFilterManager.timeRangeManager.timeGrain,
+      } as any;
+      exploreState.showTimeComparison =
+        timeFilterManager.comparisonTimeRangeManager.showComparison;
+      exploreState.selectedComparisonTimeRange = {
+        name: timeFilterManager.comparisonTimeRangeManager.comparisonTimeRange,
+        start:
+          timeFilterManager.comparisonTimeRangeManager.interval?.start?.toJSDate() ??
+          new Date(),
+        end:
+          timeFilterManager.comparisonTimeRangeManager.interval?.end?.toJSDate() ??
+          new Date(),
+      };
+    });
+  },
+
   setPivotMode(name: string, mode: boolean) {
     updateMetricsExplorerByName(name, (exploreState) => {
       if (mode) {