refac: unified filter component across explore, canvas, alerts and reports

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

@@ -185,7 +185,7 @@
           queryArgsJson: JSON.stringify(
             getAlertQueryArgsFromFormValues(
               values,
-              filters.toState(),
+              filters.expr,
               timeControls.toState(),
               exploreSpec,
             ),
@@ -324,18 +324,18 @@
   <div class="px-6 py-3 flex items-center gap-x-2">
     <div class="grow"></div>
     {#if currentTabIndex === 0}
-      <Button onClick={handleCancel} type="secondary"
-        >{m.alert_form_cancel()}</Button
-      >
+      <Button onClick={handleCancel} type="secondary">
+        {m.alert_form_cancel()}
+      </Button>
     {:else}
-      <Button onClick={handleBack} type="secondary"
-        >{m.alert_form_back()}</Button
-      >
+      <Button onClick={handleBack} type="secondary">
+        {m.alert_form_back()}
+      </Button>
     {/if}
     {#if currentTabIndex !== 2}
-      <Button type="primary" onClick={handleNextTab}
-        >{m.alert_form_next()}</Button
-      >
+      <Button type="primary" onClick={handleNextTab}>
+        {m.alert_form_next()}
+      </Button>
     {:else}
       <Button type="primary" disabled={$submitting} form={formId} submitForm>
         {isCreateForm ? m.alert_form_create() : m.alert_form_update()}

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

@@ -12,8 +12,8 @@
 } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-entry";
 import { useExploreValidSpec } from "@rilldata/web-common/features/explores/selectors.ts";
 import type {
   Filters,
   FiltersState,
 } from "@rilldata/web-common/features/dashboards/stores/Filters.ts";
 import type {
   TimeControls,
@@ -25,6 +25,7 @@
   type StructTypeField,
   TypeCode,
   type V1ExploreSpec,
+  type V1Expression,
   type V1MetricsViewAggregationRequest,
   type V1MetricsViewAggregationResponseDataItem,
   type V1MetricsViewSpec,
@@ -46,21 +47,20 @@
   client: RuntimeClient,
   queryClient: QueryClient,
   formValues: AlertFormValues,
-  filters: Filters,
+  expr: V1Expression,
   timeControls: TimeControls,
 ): CreateQueryResult<AlertPreviewResponse> {
   return derived(
     [
       useExploreValidSpec(client, formValues.exploreName),
-      filters.getStore(),
       timeControls.getStore(),
     ],
-    ([validExploreSpec, filtersState, timeControlsState], set) =>
+    ([validExploreSpec, timeControlsState], set) =>
       createQueryServiceMetricsViewAggregation(
         client,
         getAlertPreviewQueryRequest(
           formValues,
-          filtersState,
+          expr,
           timeControlsState,
           validExploreSpec.data?.explore ?? {},
         ),
@@ -77,13 +77,13 @@
 
 function getAlertPreviewQueryRequest(
   formValues: AlertFormValues,
-  filtersArgs: FiltersState,
+  expr: V1Expression,
   timeControlArgs: TimeControlState,
   exploreSpec: V1ExploreSpec,
 ): V1MetricsViewAggregationRequest {
   const req = getAlertQueryArgsFromFormValues(
     formValues,
-    filtersArgs,
+    expr,
     timeControlArgs,
     exploreSpec,
   );

web-common/src/features/alerts/create-alert-utils.ts

@@ -3,13 +3,16 @@
 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 { createAndExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils.ts";
 import { Filters } from "@rilldata/web-common/features/dashboards/stores/Filters.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";
+import { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/manager/expression-filter-manager.svelte.ts";
+import { mergeDimensionAndMeasureFilters } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils.ts";
+import { convertExpressionToFilterParam } from "@rilldata/web-common/features/dashboards/url-state/filters/converters.ts";
 
 export function getNewAlertInitialFormValues(
   metricsViewName: string,
@@ -64,13 +67,15 @@
     metricsViewName,
     exploreName,
   );
-  const filters = new Filters(metricsViewMetadata, {
-    whereFilter: exploreState.whereFilter ?? createAndExpression([]),
-    dimensionsWithInlistFilter: exploreState.dimensionsWithInlistFilter ?? [],
-    dimensionThresholdFilters: exploreState.dimensionThresholdFilters ?? [],
-    dimensionFilterExcludeMode:
-      exploreState.dimensionFilterExcludeMode ?? new Map<string, boolean>(),
-  });
+
+  const filters = new ExpressionFilterManager();
+  const fullExpr = mergeDimensionAndMeasureFilters(
+    exploreState.whereFilter,
+    exploreState.dimensionThresholdFilters ?? [],
+  );
+  const exprParam = convertExpressionToFilterParam(fullExpr);
+  filters.setExprParam(exprParam);
+
   const timeControls = new TimeControls(metricsViewMetadata, {
     selectedTimeRange: exploreState.selectedTimeRange,
     selectedComparisonTimeRange: exploreState.selectedComparisonTimeRange,

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

@@ -4,12 +4,12 @@
   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 { Filters } from "@rilldata/web-common/features/dashboards/stores/Filters.ts";
   import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import type { SuperForm } from "sveltekit-superforms/client";
+  import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/manager/expression-filter-manager.svelte.ts";
 
   export let superFormInstance: SuperForm<AlertFormValues>;
-  export let filters: Filters;
+  export let filters: ExpressionFilterManager;
   export let timeControls: TimeControls;
 
   $: ({ form } = superFormInstance);

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

@@ -6,34 +6,45 @@
   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 { Filters } from "@rilldata/web-common/features/dashboards/stores/Filters.ts";
   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 "@rilldata/web-common/features/dashboards/filters/manager/expression-filter-manager.svelte.ts";
 
-  export let formValues: AlertFormValues;
-  export let filters: Filters;
-  export let timeControls: TimeControls;
-
-  const runtimeClient = useRuntimeClient();
-
-  $: alertPreviewQuery = getAlertPreviewData(
-    runtimeClient,
-    queryClient,
+  let {
     formValues,
     filters,
     timeControls,
+  }: {
+    formValues: AlertFormValues;
+    filters: ExpressionFilterManager;
+    timeControls: TimeControls;
+  } = $props();
+
+  const runtimeClient = useRuntimeClient();
+
+  let alertPreviewQuery = $derived(
+    getAlertPreviewData(
+      runtimeClient,
+      queryClient,
+      formValues,
+      filters.expr,
+      timeControls,
+    ),
   );
 
-  $: isCriteriaEmpty =
-    formValues.criteria.map(mapMeasureFilterToExpr).length === 0;
+  let isCriteriaEmpty = $derived(
+    formValues.criteria.map(mapMeasureFilterToExpr).length === 0,
+  );
 
-  $: queryResult = $alertPreviewQuery;
+  let queryResult = $derived($alertPreviewQuery);
 
-  $: rows = (queryResult.data?.rows as DimensionTableRow[] | undefined) ?? [];
-  $: columns = queryResult.data?.schema ?? [];
+  let rows = $derived(
+    (queryResult.data?.rows as DimensionTableRow[] | undefined) ?? [],
+  );
+  let columns = $derived(queryResult.data?.schema ?? []);
 </script>
 
 {#if $alertPreviewQuery.isFetching}

web-common/src/features/alerts/data-tab/AlertDialogDataTab.svelte

@@ -2,7 +2,6 @@
   import DataPreview from "@rilldata/web-common/features/alerts/data-tab/DataPreview.svelte";
   import type { AlertFormValues } from "@rilldata/web-common/features/alerts/form-utils";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
-  import type { Filters } from "@rilldata/web-common/features/dashboards/stores/Filters.ts";
   import FiltersForm from "@rilldata/web-common/features/scheduled-reports/FiltersForm.svelte";
   import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import { MetricsViewSpecMeasureType } from "@rilldata/web-common/runtime-client";
@@ -11,9 +10,10 @@
   import Select from "../../../components/forms/Select.svelte";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { useMetricsViewValidSpec } from "../../dashboards/selectors";
+  import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/manager/expression-filter-manager.svelte.ts";
 
   export let superFormInstance: SuperForm<AlertFormValues>;
-  export let filters: Filters;
+  export let filters: ExpressionFilterManager;
   export let timeControls: TimeControls;
 
   const runtimeClient = useRuntimeClient();

web-common/src/features/alerts/data-tab/DataPreview.svelte

@@ -5,34 +5,44 @@
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
-  import type { Filters } from "@rilldata/web-common/features/dashboards/stores/Filters.ts";
   import type { TimeControls } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
   import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import PreviewEmpty from "../PreviewEmpty.svelte";
   import type { DimensionTableRow } from "../../dashboards/dimension-table/dimension-table-types";
+  import type { ExpressionFilterManager } from "@rilldata/web-common/features/dashboards/filters/manager/expression-filter-manager.svelte.ts";
 
-  export let formValues: AlertFormValues;
-  export let filters: Filters;
-  export let timeControls: TimeControls;
+  let {
+    formValues,
+    filters,
+    timeControls,
+  }: {
+    formValues: AlertFormValues;
+    filters: ExpressionFilterManager;
+    timeControls: TimeControls;
+  } = $props();
 
   const runtimeClient = useRuntimeClient();
 
-  $: alertPreviewQuery = getAlertPreviewData(
-    runtimeClient,
-    queryClient,
-    {
-      ...formValues,
-      criteria: [],
-    },
-    filters,
-    timeControls,
+  let alertPreviewQuery = $derived(
+    getAlertPreviewData(
+      runtimeClient,
+      queryClient,
+      {
+        ...formValues,
+        criteria: [],
+      },
+      filters.expr,
+      timeControls,
+    ),
   );
 
-  $: queryResult = $alertPreviewQuery;
+  let queryResult = $derived($alertPreviewQuery);
 
-  $: rows = (queryResult.data?.rows as DimensionTableRow[] | undefined) ?? [];
-  $: columns = queryResult.data?.schema ?? [];
+  let rows = $derived(
+    (queryResult.data?.rows as DimensionTableRow[] | undefined) ?? [],
+  );
+  let columns = $derived(queryResult.data?.schema ?? []);
 </script>
 
 {#if queryResult.isFetching}

web-common/src/features/alerts/form-utils.ts

@@ -6,17 +6,18 @@
   type MeasureFilterEntry,
 } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-entry";
 import { MeasureFilterType } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-options";
 import { mergeDimensionAndMeasureFilters } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils";
 import { sanitiseExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import {
   mapSelectedComparisonTimeRangeToV1TimeRange,
   mapSelectedTimeRangeToV1TimeRange,
 } from "@rilldata/web-common/features/dashboards/time-controls/time-range-mappers.ts";
 import type { FiltersState } from "@rilldata/web-common/features/dashboards/stores/Filters.ts";
 import type { TimeControlState } from "@rilldata/web-common/features/dashboards/stores/TimeControls.ts";
 import { getInitialScheduleFormValues } from "@rilldata/web-common/features/scheduled-reports/time-utils.ts";
 import type {
   V1ExploreSpec,
+  V1Expression,
   V1MetricsViewAggregationRequest,
   V1Operation,
 } from "@rilldata/web-common/runtime-client";
@@ -46,7 +47,7 @@
 
 export function getAlertQueryArgsFromFormValues(
   formValues: AlertFormValues,
-  filtersArgs: FiltersState,
+  expr: V1Expression,
   timeControlArgs: TimeControlState,
   exploreSpec: V1ExploreSpec,
 ): V1MetricsViewAggregationRequest {
@@ -93,13 +94,7 @@
     dimensions: formValues.splitByDimension
       ? [{ name: formValues.splitByDimension }]
       : [],
-    where: sanitiseExpression(
-      mergeDimensionAndMeasureFilters(
-        filtersArgs.whereFilter,
-        filtersArgs.dimensionThresholdFilters,
-      ),
-      undefined,
-    ),
+    where: sanitiseExpression(expr, undefined),
     having: sanitiseExpression(undefined, {
       cond: {
         op: formValues.criteriaOperation,

web-common/src/features/dashboards/dimension-search/GlobalDimensionSearchResults.svelte

@@ -19,12 +19,10 @@
   export let open: boolean;
 
   const {
-    actions: {
-      dimensionsFilter: { toggleDimensionValueSelection },
-    },
     timeRangeSummaryStore,
     metricsViewName,
     validSpecStore,
+    expressionFilterManager,
   } = getStateManagers();
 
   const client = useRuntimeClient();
@@ -49,7 +47,10 @@
 
   function onItemSelect(dimension: string, value: any) {
     onSelect();
-    toggleDimensionValueSelection(dimension, value, false, true);
+    expressionFilterManager.dimensionFilterAction(
+      dimension,
+      (dimensionManager) => dimensionManager.toggleValue(value, false),
+    );
   }
 </script>
 

web-common/src/features/dashboards/dimension-table/DimensionDisplay.svelte

@@ -47,23 +47,16 @@
 
   const {
     selectors: {
-      dimensionFilters: { unselectedDimensionValues },
       dimensionTable: { virtualizedTableColumns, prepareDimTableRows },
       sorting: { sortedAscending, sortType },
       leaderboard: {
         leaderboardShowContextForAllMeasures,
         leaderboardSortByMeasureName,
       },
     },
-    actions: {
-      dimensionsFilter: {
-        toggleDimensionValueSelection,
-        selectItemsInFilter,
-        deselectItemsInFilter,
-      },
-    },
     dashboardStore,
     validSpecStore,
+    expressionFilterManager,
   } = getStateManagers();
 
   $: metricsViewSpec = $validSpecStore.data?.metricsView ?? {};
@@ -200,25 +193,30 @@
 
   function onSelectItem(data: { index: number; meta: boolean }) {
     const label = tableRows[data.index][dimensionName] as string;
-    toggleDimensionValueSelection(dimensionName, label, false, data.meta);
+    expressionFilterManager.dimensionFilterAction(
+      dimensionName,
+      (dimensionManager) => dimensionManager.toggleValue(label, false),
+    );
   }
 
   function toggleAllSearchItems() {
     const labels = tableRows.map((row) => row[dimensionName] as string);
 
     if (areAllTableRowsSelected) {
-      deselectItemsInFilter(dimensionName, labels);
+      expressionFilterManager.dimensionFilterAction(
+        dimensionName,
+        (dimensionManager) => dimensionManager.removeSelectedValues(labels),
+      );
 
       eventBus.emit("notification", {
         message: `Removed ${labels.length} items from filter`,
       });
       return;
     } else {
-      const newValuesSelected = $unselectedDimensionValues(
+      const newValuesSelected = expressionFilterManager.dimensionFilterAction(
         dimensionName,
-        labels,
+        (dimensionManager) => dimensionManager.appendSelectedValues(labels),
       );
-      selectItemsInFilter(dimensionName, labels);
       eventBus.emit("notification", {
         message: `Added ${newValuesSelected.length} items to filter`,
       });