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/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?.();
+    },
   };
 }