fix: dimension filter contains mode (#8613)

Author: briangregoryholmes

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

@@ -31,6 +31,7 @@ import type { DimensionThresholdFilter } from "../../dashboards/stores/explore-s
 import { convertExpressionToFilterParam } from "../../dashboards/url-state/filters/converters";
 import { FilterManager, type UIFilters } from "./filter-manager";
 import { getDimensionDisplayName } from "../../dashboards/filters/getDisplayName";
+import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 
 export type ParsedFilters = ReturnType<typeof initFilterBase>;
 
@@ -280,27 +281,46 @@ export class FilterState {
       ) ?? -1;
     let expr = wf.cond?.exprs?.[exprIndex];
 
-    const wasLikeFilter =
-      expr?.cond?.op === V1Operation.OPERATION_LIKE ||
-      expr?.cond?.op === V1Operation.OPERATION_NLIKE;
-
-    if (!expr?.cond?.exprs || wasLikeFilter) {
-      expr = createInExpression(dimensionName, [], exclude);
+    if (!expr?.cond?.exprs) {
+      expr = createInExpression(dimensionName, dimensionValues, exclude);
       wf.cond?.exprs?.push(expr);
       exprIndex = wf.cond!.exprs!.length - 1;
-    }
-
-    const wasInListFilter = dimensionsWithInListFilter.includes(dimensionName);
-    if (wasInListFilter) {
-      dimensionsWithInListFilter.filter((d) => d !== dimensionName);
-    }
-
-    dimensionValues.forEach((dimensionValue) => {
-      toggleDimensionFilterValue(expr, dimensionValue, !!isExclusiveFilter);
-    });
-
-    if (expr?.cond?.exprs?.length === 1) {
-      wf.cond?.exprs?.splice(exprIndex, 1);
+    } else {
+      const wasLikeFilter =
+        expr?.cond?.op === V1Operation.OPERATION_LIKE ||
+        expr?.cond?.op === V1Operation.OPERATION_NLIKE;
+
+      const wasInListFilter =
+        dimensionsWithInListFilter.includes(dimensionName);
+
+      if (wasLikeFilter || wasInListFilter) {
+        eventBus.emit("notification", {
+          message: "Converted filter type to Select",
+          link: {
+            text: "Undo",
+            href: window.location.href,
+          },
+        });
+
+        expr = createInExpression(dimensionName, dimensionValues, exclude);
+        wf.cond?.exprs?.splice(exprIndex, 1, expr);
+
+        if (wasInListFilter) {
+          dimensionsWithInListFilter.filter((d) => d !== dimensionName);
+        }
+      } else if (expr) {
+        dimensionValues.forEach((dimensionValue) => {
+          toggleDimensionFilterValue(
+            expr!,
+            dimensionValue,
+            !!isExclusiveFilter,
+          );
+        });
+
+        if (expr?.cond?.exprs?.length === 1) {
+          wf.cond?.exprs?.splice(exprIndex, 1);
+        }
+      }
     }
 
     return getFilterParam(

web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte

@@ -79,6 +79,10 @@
     pinned,
   } = filterData);
 
+  $: if (!open && filterData.mode !== curMode) {
+    resyncFilterData(filterData);
+  }
+
   // Sync proxy when selectedValues changes (for Select mode)
   $: if (!open && mode === DimensionFilterMode.Select) {
     selectedValuesProxy = structuredClone(filterData.selectedValues) ?? [];
@@ -383,6 +387,18 @@
       await toggleDimensionValueSelections(name, [value], metricsViewNames);
     }
   }
+
+  function resyncFilterData(filterData: DimensionFilterItem) {
+    curMode = filterData.mode;
+    curSearchText = filterData.inputText ?? "";
+    curExcludeMode = filterData.isInclude === false;
+    selectedValuesProxy = filterData.selectedValues ?? [];
+    searchedBulkValues =
+      filterData.mode === DimensionFilterMode.InList
+        ? (filterData.selectedValues ?? [])
+        : [];
+    curPinned = filterData.pinned;
+  }
 </script>
 
 <svelte:window