@grafana/scenes 7.3.0 → 7.3.1

package/dist/index.js

@@ -7820,806 +7820,931 @@ const getStyles$d = (theme) => ({
   })
 });
 
-const MAX_VISIBLE_FILTERS_DEFAULT = 4;
-const MAX_VISIBLE_FILTERS_WITH_GROUP_BY = 2;
-const MAX_VISIBLE_GROUP_BY = 2;
-const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
-  var _a;
-  const { originFilters, filters, readOnly, collapsible, valueRecommendations, enableGroupBy, groupByRestorable } = controller.useState();
+function DrilldownRecommendations({ recentDrilldowns, recommendedDrilldowns, showRecommended = false }) {
   const styles = ui.useStyles2(getStyles$c);
-  const theme = ui.useTheme2();
-  const [collapsed, setCollapsed] = React.useState(true);
-  const [wrapperRef, { height: wrapperHeight }] = reactUse.useMeasure();
-  const clearAll = () => {
-    var _a2;
-    (_a2 = controller.clearAll) == null ? void 0 : _a2.call(controller);
-  };
-  const focusOnWipInputRef = React.useRef();
-  const focusOnGroupByWipInputRef = React.useRef();
-  const singleLineThreshold = theme.spacing.gridSize * 5;
-  const isMultiLine = collapsible && wrapperHeight > singleLineThreshold;
-  const handleCollapseToggle = (event) => {
-    event.stopPropagation();
-    if (collapsible) {
-      setCollapsed(true);
-    }
+  const [isPopoverVisible, setPopoverVisible] = React.useState(false);
+  const ref = React.useRef(null);
+  const openPopover = () => {
+    setPopoverVisible(true);
   };
-  const handleExpand = () => {
-    if (collapsible && collapsed) {
-      setCollapsed(false);
-    }
+  const onClickAction = (action) => {
+    action();
+    setPopoverVisible(false);
   };
-  const visibleOriginFilters = (_a = originFilters == null ? void 0 : originFilters.filter((f) => f.origin && !f.hidden && !f.dismissedGroupBy)) != null ? _a : [];
-  const visibleFilters = filters.filter((f) => !f.hidden);
-  const allFilters = [...visibleOriginFilters, ...visibleFilters];
-  const totalFiltersCount = allFilters.length;
-  const adhocFilters = allFilters.filter((f) => !isGroupByFilter(f));
-  const groupByFilters = allFilters.filter(isGroupByFilter);
-  const shouldCollapse = collapsible && collapsed && totalFiltersCount > 0;
-  const maxVisibleAdhocFilters = enableGroupBy ? MAX_VISIBLE_FILTERS_WITH_GROUP_BY : MAX_VISIBLE_FILTERS_DEFAULT;
-  const adhocFiltersToRender = shouldCollapse ? adhocFilters.slice(0, maxVisibleAdhocFilters) : adhocFilters;
-  const adhocHiddenCount = shouldCollapse ? Math.max(0, adhocFilters.length - maxVisibleAdhocFilters) : 0;
-  const groupByFiltersToRender = shouldCollapse ? groupByFilters.slice(0, MAX_VISIBLE_GROUP_BY) : groupByFilters;
-  const groupByHiddenCount = shouldCollapse ? Math.max(0, groupByFilters.length - MAX_VISIBLE_GROUP_BY) : 0;
-  React.useEffect(() => {
-    if (collapsible && totalFiltersCount === 0 && collapsed) {
-      setCollapsed(false);
-    }
-  }, [collapsible, totalFiltersCount, collapsed]);
-  const showCollapseButton = collapsible && isMultiLine && !collapsed;
-  const showExpandButton = shouldCollapse && (adhocHiddenCount > 0 || groupByHiddenCount > 0);
-  return /* @__PURE__ */ React__default.default.createElement(
+  const content = /* @__PURE__ */ React__default.default.createElement(ui.ClickOutsideWrapper, { onClick: () => setPopoverVisible(false), useCapture: true }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.menuContainer, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "column" }, /* @__PURE__ */ React__default.default.createElement(ui.Text, { weight: "bold", variant: "bodySmall", color: "secondary" }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recent" }, "Recent")), recentDrilldowns && recentDrilldowns.length > 0 ? recentDrilldowns.map((drilldown) => /* @__PURE__ */ React__default.default.createElement(
     "div",
     {
-      ref: wrapperRef,
-      className: css.cx(styles.comboboxWrapper, {
-        [styles.comboboxFocusOutline]: !readOnly,
-        [styles.collapsed]: shouldCollapse
-      })
+      key: drilldown.label,
+      className: css.cx(styles.combinedFilterPill),
+      onClick: () => onClickAction(drilldown.onClick)
     },
-    !readOnly && valueRecommendations && /* @__PURE__ */ React__default.default.createElement(valueRecommendations.Component, { model: valueRecommendations }),
-    adhocFiltersToRender.map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
-      AdHocFilterPill,
-      {
-        key: `${filter.origin ? "origin-" : ""}${index}-${filter.key}`,
-        filter,
-        controller,
-        readOnly: readOnly || filter.readOnly,
-        focusOnWipInputRef: focusOnWipInputRef.current
-      }
-    )),
-    shouldCollapse && adhocHiddenCount > 0 && /* @__PURE__ */ React__default.default.createElement(
-      ui.Button,
-      {
-        className: styles.moreIndicator,
-        fill: "text",
-        size: "sm",
-        "aria-label": i18n.t(
-          "grafana-scenes.variables.adhoc-filters-combobox-renderer.show-more-filters",
-          "Show {{count}} more filters",
-          { count: adhocHiddenCount }
-        ),
-        onClick: (e) => {
-          e.stopPropagation();
-          handleExpand();
-          setTimeout(() => {
-            var _a2;
-            return (_a2 = focusOnWipInputRef.current) == null ? void 0 : _a2.call(focusOnWipInputRef);
-          });
-        }
-      },
-      "+",
-      adhocHiddenCount
-    ),
-    !readOnly && /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { ref: focusOnWipInputRef, controller, onInputClick: handleExpand }),
-    enableGroupBy && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.sectionDivider }), /* @__PURE__ */ React__default.default.createElement("span", { className: styles.groupByLabel }, i18n.t("grafana-scenes.variables.adhoc-filters-combobox-renderer.group-by-label", "Group by:")), groupByFiltersToRender.map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
-      GroupByPill,
-      {
-        key: `groupby-${index}-${filter.key}`,
-        filter,
-        controller,
-        readOnly: readOnly || filter.readOnly,
-        focusOnWipInputRef: focusOnGroupByWipInputRef.current
-      }
-    )), shouldCollapse && groupByHiddenCount > 0 && /* @__PURE__ */ React__default.default.createElement(
-      ui.Button,
-      {
-        className: styles.moreIndicator,
-        fill: "text",
-        size: "sm",
-        "aria-label": i18n.t(
-          "grafana-scenes.variables.adhoc-filters-combobox-renderer.show-more-group-by",
-          "Show {{count}} more group by",
-          { count: groupByHiddenCount }
-        ),
-        onClick: (e) => {
-          e.stopPropagation();
-          handleExpand();
-          setTimeout(() => {
-            var _a2;
-            return (_a2 = focusOnGroupByWipInputRef.current) == null ? void 0 : _a2.call(focusOnGroupByWipInputRef);
-          });
-        }
-      },
-      "+",
-      groupByHiddenCount
-    ), !readOnly && /* @__PURE__ */ React__default.default.createElement(
-      AdHocFiltersAlwaysWipCombobox,
-      {
-        ref: focusOnGroupByWipInputRef,
-        controller,
-        onInputClick: handleExpand,
-        isGroupBy: true
+    drilldown.label
+  )) : /* @__PURE__ */ React__default.default.createElement("div", { className: styles.emptyMessage }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recent-empty" }, "No recent values")), showRecommended && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(ui.Text, { weight: "bold", variant: "bodySmall", color: "secondary" }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recommended" }, "Recommended")), recommendedDrilldowns && recommendedDrilldowns.length > 0 ? recommendedDrilldowns.map((drilldown) => /* @__PURE__ */ React__default.default.createElement(
+    "div",
+    {
+      key: drilldown.label,
+      className: css.cx(styles.combinedFilterPill),
+      onClick: () => onClickAction(drilldown.onClick)
+    },
+    drilldown.label
+  )) : /* @__PURE__ */ React__default.default.createElement("div", { className: styles.emptyMessage }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recommended-empty" }, "No recommended values"))))));
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+    ui.IconButton,
+    {
+      name: "bars-clock",
+      tooltip: i18n.t("grafana-scenes.components.drilldown-recommendations.tooltip", "Show recommendations"),
+      ref,
+      className: css.cx(isPopoverVisible && styles.iconActive),
+      onClick: (ev) => {
+        openPopover();
+        ev.stopPropagation();
       }
-    ), groupByRestorable && /* @__PURE__ */ React__default.default.createElement(
-      ui.IconButton,
-      {
-        name: "history",
-        size: "md",
-        className: styles.controlButton,
-        tooltip: i18n.t(
-          "grafana-scenes.variables.adhoc-filters-combobox-renderer.restore-default-group-by",
-          "Restore groupby set by this dashboard."
-        ),
-        onClick: () => {
-          var _a2;
-          return (_a2 = controller.restoreOriginalGroupBy) == null ? void 0 : _a2.call(controller);
+    }
+  ), isPopoverVisible && ref.current && /* @__PURE__ */ React__default.default.createElement(
+    ui.Popover,
+    {
+      content,
+      onKeyDown: (event) => {
+        if (event.key === " ") {
+          event.stopPropagation();
         }
-      }
-    )),
-    (showCollapseButton || showExpandButton || !readOnly) && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.rightControls }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.sectionDivider }), showCollapseButton && /* @__PURE__ */ React__default.default.createElement(
-      ui.Button,
-      {
-        className: styles.collapseButton,
-        fill: "text",
-        size: "sm",
-        onClick: handleCollapseToggle,
-        "aria-label": i18n.t(
-          "grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse-filters",
-          "Collapse filters"
-        ),
-        "aria-expanded": !collapsed
       },
-      i18n.t("grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse", "Collapse"),
-      /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "angle-up", size: "md" })
-    ), showExpandButton && /* @__PURE__ */ React__default.default.createElement(
-      ui.IconButton,
-      {
-        name: "angle-down",
-        size: "md",
-        className: styles.dropdownIndicator,
-        tooltip: i18n.t("grafana-scenes.variables.adhoc-filters-combobox-renderer.expand-filters", "Expand filters"),
-        onClick: (e) => {
-          e.stopPropagation();
-          handleExpand();
-        }
-      }
-    ), !readOnly && /* @__PURE__ */ React__default.default.createElement(
-      ui.IconButton,
-      {
-        name: "times",
-        size: "md",
-        className: styles.controlButton,
-        tooltip: i18n.t("grafana-scenes.variables.adhoc-filters-combobox-renderer.clear-all", "Clear all"),
-        onClick: clearAll
-      }
-    ))
-  );
-});
+      placement: "bottom-start",
+      referenceElement: ref.current,
+      show: true
+    }
+  ));
+}
 const getStyles$c = (theme) => ({
-  comboboxWrapper: css.css({
+  menuContainer: css.css({
     display: "flex",
-    flexWrap: "wrap",
-    alignItems: "center",
-    columnGap: theme.spacing(1),
-    rowGap: theme.spacing(0.5),
-    minHeight: theme.spacing(4),
-    backgroundColor: theme.components.input.background,
-    border: `1px solid ${theme.colors.border.strong}`,
+    flexDirection: "column",
+    background: theme.colors.background.elevated,
+    border: `1px solid ${theme.colors.border.weak}`,
     borderRadius: theme.shape.radius.default,
-    paddingInline: theme.spacing(1),
-    paddingBlock: theme.spacing(0.5),
-    flexGrow: 1,
-    width: "100%"
-  }),
-  comboboxFocusOutline: css.css({
-    "&:focus-within": {
-      outline: "2px dotted transparent",
-      outlineOffset: "2px",
-      boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
-      transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
-      transitionDuration: "0.2s",
-      transitionProperty: "outline, outline-offset, box-shadow",
-      zIndex: 2
-    }
-  }),
-  collapsed: css.css({
-    flexWrap: "nowrap",
-    overflow: "hidden"
+    boxShadow: theme.shadows.z3,
+    padding: theme.spacing(2)
   }),
-  rightControls: css.css({
-    display: "flex",
+  combinedFilterPill: css.css({
     alignItems: "center",
-    marginLeft: "auto",
-    flexShrink: 0,
-    gap: theme.spacing(1.5)
-  }),
-  moreIndicator: css.css({
-    color: theme.colors.text.primary,
     background: theme.colors.action.selected,
-    height: "auto",
-    lineHeight: "normal",
-    alignSelf: "stretch",
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`,
+    padding: theme.spacing(0.2, 1),
+    color: theme.colors.text.primary,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    minHeight: theme.spacing(2.75),
+    ...theme.typography.bodySmall,
+    fontWeight: theme.typography.fontWeightBold,
+    cursor: "pointer",
     "&:hover": {
       background: theme.colors.action.hover
     }
   }),
-  dropdownIndicator: css.css({
-    color: theme.colors.text.secondary,
-    flexShrink: 0
-  }),
-  collapseButton: css.css({
-    color: theme.colors.text.secondary,
-    padding: 0,
-    height: "auto",
-    lineHeight: "normal",
-    "&:hover": {
-      background: "transparent",
-      color: theme.colors.text.primary
+  iconActive: css.css({
+    "&:before": {
+      backgroundColor: theme.colors.action.hover,
+      opacity: 1
     }
   }),
-  sectionDivider: css.css({
-    width: "1px",
-    alignSelf: "stretch",
-    backgroundColor: theme.colors.border.weak,
-    flexShrink: 0
-  }),
-  groupByLabel: css.css({
-    ...theme.typography.bodySmall,
-    fontWeight: theme.typography.fontWeightBold,
-    color: theme.colors.text.primary,
-    whiteSpace: "nowrap"
-  }),
-  controlButton: css.css({
-    color: theme.colors.text.secondary,
-    "&:hover": {
-      color: theme.colors.text.primary
-    }
-  })
-});
-
-var __typeError$3 = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
-var _value;
-class SafeSerializableSceneObject {
-  constructor(value) {
-    __privateAdd$3(this, _value);
-    this.text = "__sceneObject";
-    this.valueOf = () => {
-      return __privateGet$3(this, _value);
-    };
-    __privateSet$3(this, _value, value);
-  }
-  toString() {
-    return void 0;
-  }
-  get value() {
-    return this;
-  }
-}
-_value = new WeakMap();
-
-function shouldWrapInSafeSerializableSceneObject(grafanaVersion) {
-  const pattern = /^(\d+)\.(\d+)\.(\d+)/;
-  const match = grafanaVersion.match(pattern);
-  if (!match) {
-    return false;
-  }
-  const major = parseInt(match[1], 10);
-  const minor = parseInt(match[2], 10);
-  const patch = parseInt(match[3], 10);
-  if (major === 11) {
-    return minor === 0 && patch >= 4 || minor === 1 && patch >= 2 || minor > 1;
-  }
-  if (major === 10) {
-    return minor === 4 && patch >= 8 || minor >= 5;
-  }
-  return major > 11;
-}
-function wrapInSafeSerializableSceneObject(sceneObject) {
-  const version = runtime.config.buildInfo.version;
-  if (shouldWrapInSafeSerializableSceneObject(version)) {
-    return new SafeSerializableSceneObject(sceneObject);
-  }
-  return { value: sceneObject, text: "__sceneObject" };
-}
-
-const reverseScopeFilterOperatorMap = Object.fromEntries(
-  Object.entries(data.scopeFilterOperatorMap).map(([symbol, operator]) => [operator, symbol])
-);
-function isEqualityOrMultiOperator(value) {
-  const operators = /* @__PURE__ */ new Set(["equals", "not-equals", "one-of", "not-one-of"]);
-  return operators.has(value);
-}
-function isRegexOperator(value) {
-  const operators = /* @__PURE__ */ new Set(["regex-match", "regex-not-match"]);
-  return operators.has(value);
-}
-function getAdHocFiltersFromScopes(scopes) {
-  const formattedFilters = /* @__PURE__ */ new Map();
-  const duplicatedFilters = [];
-  const allFilters = scopes.flatMap((scope) => scope.spec.filters);
-  for (const filter of allFilters) {
-    processFilter(formattedFilters, duplicatedFilters, filter);
-  }
-  return [...formattedFilters.values(), ...duplicatedFilters];
-}
-function processFilter(formattedFilters, duplicatedFilters, filter) {
-  var _a, _b;
-  if (!filter) {
-    return;
-  }
-  const existingFilter = formattedFilters.get(filter.key);
-  if (existingFilter && isEqualityValue(existingFilter.operator, filter.operator)) {
-    mergeFilterValues(existingFilter, filter);
-  } else if (existingFilter && isRegexValue(existingFilter.operator, filter.operator)) {
-    existingFilter.value += `|${filter.value}`;
-    existingFilter.values = [existingFilter.value];
-  } else if (!existingFilter) {
-    formattedFilters.set(filter.key, {
-      key: filter.key,
-      operator: reverseScopeFilterOperatorMap[filter.operator],
-      value: filter.value,
-      values: (_a = filter.values) != null ? _a : [filter.value],
-      origin: "scope"
-    });
-  } else {
-    duplicatedFilters.push({
-      key: filter.key,
-      operator: reverseScopeFilterOperatorMap[filter.operator],
-      value: filter.value,
-      values: (_b = filter.values) != null ? _b : [filter.value],
-      origin: "scope"
-    });
-  }
-}
-function mergeFilterValues(adHocFilter, filter) {
-  var _a, _b, _c, _d;
-  const values = (_a = filter.values) != null ? _a : [filter.value];
-  for (const value of values) {
-    if (!((_b = adHocFilter.values) == null ? void 0 : _b.includes(value))) {
-      (_c = adHocFilter.values) == null ? void 0 : _c.push(value);
-    }
+  emptyMessage: css.css({
+    padding: theme.spacing(0.5, 0),
+    color: theme.colors.text.secondary,
+    ...theme.typography.bodySmall
+  })
+});
+
+var __typeError$3 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
+var _value;
+class SafeSerializableSceneObject {
+  constructor(value) {
+    __privateAdd$3(this, _value);
+    this.text = "__sceneObject";
+    this.valueOf = () => {
+      return __privateGet$3(this, _value);
+    };
+    __privateSet$3(this, _value, value);
   }
-  if (((_d = adHocFilter.values) == null ? void 0 : _d.length) === 1) {
-    return;
+  toString() {
+    return void 0;
   }
-  if (filter.operator === "equals" && adHocFilter.operator === reverseScopeFilterOperatorMap["equals"]) {
-    adHocFilter.operator = reverseScopeFilterOperatorMap["one-of"];
-  } else if (filter.operator === "not-equals" && adHocFilter.operator === reverseScopeFilterOperatorMap["not-equals"]) {
-    adHocFilter.operator = reverseScopeFilterOperatorMap["not-one-of"];
+  get value() {
+    return this;
   }
 }
-function isRegexValue(adHocFilterOperator, filterOperator) {
-  const scopeConvertedOperator = data.scopeFilterOperatorMap[adHocFilterOperator];
-  if (!isRegexOperator(scopeConvertedOperator) || !isRegexOperator(filterOperator)) {
+_value = new WeakMap();
+
+function shouldWrapInSafeSerializableSceneObject(grafanaVersion) {
+  const pattern = /^(\d+)\.(\d+)\.(\d+)/;
+  const match = grafanaVersion.match(pattern);
+  if (!match) {
     return false;
   }
-  return hasSameOperators(scopeConvertedOperator, filterOperator);
-}
-function isEqualityValue(adHocFilterOperator, filterOperator) {
-  const scopeConvertedOperator = data.scopeFilterOperatorMap[adHocFilterOperator];
-  if (!isEqualityOrMultiOperator(scopeConvertedOperator) || !isEqualityOrMultiOperator(filterOperator)) {
-    return false;
+  const major = parseInt(match[1], 10);
+  const minor = parseInt(match[2], 10);
+  const patch = parseInt(match[3], 10);
+  if (major === 11) {
+    return minor === 0 && patch >= 4 || minor === 1 && patch >= 2 || minor > 1;
   }
-  return hasSameOperators(scopeConvertedOperator, filterOperator);
+  if (major === 10) {
+    return minor === 4 && patch >= 8 || minor >= 5;
+  }
+  return major > 11;
 }
-function hasSameOperators(scopeConvertedOperator, filterOperator) {
-  if (scopeConvertedOperator.includes("not") && !filterOperator.includes("not") || !scopeConvertedOperator.includes("not") && filterOperator.includes("not")) {
-    return false;
+function wrapInSafeSerializableSceneObject(sceneObject) {
+  const version = runtime.config.buildInfo.version;
+  if (shouldWrapInSafeSerializableSceneObject(version)) {
+    return new SafeSerializableSceneObject(sceneObject);
   }
-  return true;
+  return { value: sceneObject, text: "__sceneObject" };
 }
 
-function isInteractionTracker(s) {
-  return "isInteractionTracker" in s;
+const getRecentFiltersKey = (datasourceUid) => `grafana.filters.recent.${datasourceUid != null ? datasourceUid : "default"}`;
+const getRecentGroupingKey$1 = (datasourceUid) => `grafana.grouping.recent.${datasourceUid != null ? datasourceUid : "default"}`;
+function getFilterIdentity(filter) {
+  return `${filter.key}|${filter.operator}|${filter.value}`;
 }
-class SceneInteractionTracker extends SceneObjectBase {
-  constructor(state = {}, renderProfiler) {
-    super(state);
-    this.renderProfiler = renderProfiler;
-    this.isInteractionTracker = true;
-    if (renderProfiler) {
-      this.renderProfiler = renderProfiler;
-      this.renderProfiler.setInteractionCompleteHandler(state.onInteractionComplete);
+function deduplicateFilters(filters) {
+  const filterMap = /* @__PURE__ */ new Map();
+  for (const filter of filters) {
+    const identity = getFilterIdentity(filter);
+    if (filterMap.has(identity)) {
+      filterMap.delete(identity);
     }
+    filterMap.set(identity, filter);
   }
-  startInteraction(name) {
-    var _a;
-    if (!this.state.enableInteractionTracking) {
-      return;
+  return Array.from(filterMap.values());
+}
+function deduplicateGroupings(groupings) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const g of groupings) {
+    const key = String(g.value);
+    if (seen.has(key)) {
+      seen.delete(key);
     }
-    (_a = this.renderProfiler) == null ? void 0 : _a.startInteraction(name);
-  }
-  stopInteraction() {
-    var _a;
-    (_a = this.renderProfiler) == null ? void 0 : _a.stopInteraction();
+    seen.set(key, g);
   }
+  return Array.from(seen.values());
 }
-
-function getInteractionTracker(sceneObject) {
-  let parent = sceneObject;
-  while (parent) {
-    if (parent.state.$behaviors) {
-      for (const behavior of parent.state.$behaviors) {
-        if (isInteractionTracker(behavior)) {
-          return behavior;
+class AdHocFiltersRecommendations extends SceneObjectBase {
+  constructor(state = {}) {
+    super(state);
+    this._activationHandler = () => {
+      const filterJson = data.store.get(this._getFiltersStorageKey());
+      const storedFilters = filterJson ? JSON.parse(filterJson) : [];
+      if (storedFilters.length > 0) {
+        this._verifyRecentFiltersApplicability(storedFilters);
+      } else {
+        this.setState({ recentFilters: [] });
+      }
+      if (this._isGroupByEnabled) {
+        const groupingJson = data.store.get(this._getGroupingStorageKey());
+        const storedGroupings = groupingJson ? JSON.parse(groupingJson) : [];
+        if (storedGroupings.length > 0) {
+          this._verifyRecentGroupingsApplicability(storedGroupings);
+        } else {
+          this.setState({ recentGrouping: [] });
         }
       }
-    }
-    parent = parent.parent;
-  }
-  return void 0;
-}
-
-class AdHocFiltersVariableController {
-  constructor(model) {
-    this.model = model;
-  }
-  useState() {
-    const state = this.model.useState();
-    return {
-      filters: state.filters,
-      originFilters: state.originFilters,
-      readOnly: state.readOnly,
-      allowCustomValue: state.allowCustomValue,
-      supportsMultiValueOperators: state.supportsMultiValueOperators,
-      onAddCustomValue: state.onAddCustomValue,
-      wip: state._wip,
-      inputPlaceholder: state.inputPlaceholder,
-      groupByInputPlaceholder: state.groupByInputPlaceholder,
-      collapsible: state.collapsible,
-      valueRecommendations: this.model.getRecommendations(),
-      drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled,
-      enableGroupBy: state.enableGroupBy,
-      groupByRestorable: this.model.isGroupByRestorable()
+      this._fetchRecommendedDrilldowns();
+      const scopesVariable = sceneGraph.lookupVariable(SCOPES_VARIABLE_NAME, this._adHocFilter);
+      let scopesSubscription;
+      let adHocSubscription;
+      if (scopesVariable instanceof ScopesVariable) {
+        this._subs.add(
+          scopesSubscription = scopesVariable.subscribeToState((newState, prevState) => {
+            if (newState.scopes !== prevState.scopes) {
+              this._reloadStoredFilters();
+              if (this._isGroupByEnabled) {
+                this._reloadStoredGroupings();
+              }
+              this._fetchRecommendedDrilldowns();
+            }
+          })
+        );
+      }
+      this._subs.add(
+        adHocSubscription = this._adHocFilter.subscribeToState((newState, prevState) => {
+          if (newState.filters !== prevState.filters) {
+            this._reloadStoredFilters();
+            if (this._isGroupByEnabled) {
+              this._reloadStoredGroupings();
+            }
+            this._fetchRecommendedDrilldowns();
+          }
+        })
+      );
+      return () => {
+        scopesSubscription == null ? void 0 : scopesSubscription.unsubscribe();
+        adHocSubscription == null ? void 0 : adHocSubscription.unsubscribe();
+      };
     };
+    this.addActivationHandler(this._activationHandler);
   }
-  async getKeys(currentKey) {
-    return this.model._getKeys(currentKey);
-  }
-  async getGroupByKeys(currentKey) {
-    return this.model._getGroupByKeys(currentKey);
-  }
-  async getValuesFor(filter) {
-    return this.model._getValuesFor(filter);
-  }
-  getOperators() {
-    return this.model._getOperators();
-  }
-  updateFilter(filter, update) {
-    this.model._updateFilter(filter, update);
+  get _adHocFilter() {
+    if (!(this.parent instanceof AdHocFiltersVariable)) {
+      throw new Error("AdHocFiltersRecommendations must be a child of AdHocFiltersVariable");
+    }
+    return this.parent;
   }
-  updateFilters(filters, options) {
-    this.model.updateFilters(filters, options);
+  get _scopedVars() {
+    return { __sceneObject: wrapInSafeSerializableSceneObject(this._adHocFilter) };
   }
-  updateToMatchAll(filter) {
-    this.model.updateToMatchAll(filter);
+  get _isGroupByEnabled() {
+    return this._adHocFilter.state.enableGroupBy === true;
   }
-  removeFilter(filter) {
-    this.model._removeFilter(filter);
+  _reloadStoredFilters() {
+    const json = data.store.get(this._getFiltersStorageKey());
+    const storedFilters = json ? JSON.parse(json) : [];
+    if (storedFilters.length > 0) {
+      this._verifyRecentFiltersApplicability(storedFilters);
+    }
   }
-  removeLastFilter() {
-    this.model._removeLastFilter();
+  _reloadStoredGroupings() {
+    const json = data.store.get(this._getGroupingStorageKey());
+    const storedGroupings = json ? JSON.parse(json) : [];
+    if (storedGroupings.length > 0) {
+      this._verifyRecentGroupingsApplicability(storedGroupings);
+    }
   }
-  handleComboboxBackspace(filter) {
-    this.model._handleComboboxBackspace(filter);
+  _getFiltersStorageKey() {
+    var _a;
+    return getRecentFiltersKey((_a = this._adHocFilter.state.datasource) == null ? void 0 : _a.uid);
   }
-  addWip() {
-    this.model._addWip();
+  _getGroupingStorageKey() {
+    var _a;
+    return getRecentGroupingKey$1((_a = this._adHocFilter.state.datasource) == null ? void 0 : _a.uid);
   }
-  addGroupByFilter(item) {
-    this.model._addGroupByFilter(item);
+  async _fetchRecommendedDrilldowns() {
+    var _a;
+    const adhoc = this._adHocFilter;
+    const ds = await getDataSource(adhoc.state.datasource, this._scopedVars);
+    if (!ds || !ds.getRecommendedDrilldowns) {
+      this.setState({ datasourceSupportsRecommendations: false });
+      return;
+    }
+    this.setState({ datasourceSupportsRecommendations: true });
+    const queries = adhoc.state.useQueriesAsFilterForOptions ? getQueriesForVariables(adhoc) : void 0;
+    const timeRange = sceneGraph.getTimeRange(adhoc).state.value;
+    const scopes = sceneGraph.getScopes(adhoc);
+    const allFilters = [...(_a = adhoc.state.originFilters) != null ? _a : [], ...adhoc.state.filters];
+    const filters = allFilters.filter((f) => !isGroupByFilter(f));
+    const groupByKeys = this._isGroupByEnabled ? allFilters.filter((f) => isGroupByFilter(f)).map((f) => f.key) : void 0;
+    const enrichedRequest = getEnrichedDataRequest(adhoc);
+    const dashboardUid = enrichedRequest == null ? void 0 : enrichedRequest.dashboardUID;
+    try {
+      const recommendedDrilldowns = await ds.getRecommendedDrilldowns({
+        timeRange,
+        dashboardUid,
+        queries: queries != null ? queries : [],
+        filters,
+        ...groupByKeys ? { groupByKeys } : {},
+        scopes
+      });
+      const stateUpdate = {};
+      if (recommendedDrilldowns == null ? void 0 : recommendedDrilldowns.filters) {
+        stateUpdate.recommendedFilters = recommendedDrilldowns.filters;
+      }
+      if (this._isGroupByEnabled && (recommendedDrilldowns == null ? void 0 : recommendedDrilldowns.groupByKeys)) {
+        stateUpdate.recommendedGrouping = recommendedDrilldowns.groupByKeys.map((key) => ({
+          value: key,
+          text: key
+        }));
+      }
+      this.setState(stateUpdate);
+    } catch (error) {
+      console.error("Failed to fetch recommended drilldowns:", error);
+    }
   }
-  restoreOriginalFilter(filter) {
-    this.model.restoreOriginalFilter(filter);
+  async _verifyRecentFiltersApplicability(storedFilters) {
+    const adhoc = this._adHocFilter;
+    const queries = adhoc.state.useQueriesAsFilterForOptions ? getQueriesForVariables(adhoc) : void 0;
+    const response = await adhoc.getFiltersApplicabilityForQueries(storedFilters, queries != null ? queries : []);
+    if (!response) {
+      const deduped = deduplicateFilters(storedFilters);
+      this.setState({ recentFilters: deduped.slice(-3) });
+      return;
+    }
+    const applicabilityMap = /* @__PURE__ */ new Map();
+    response.forEach((item) => {
+      applicabilityMap.set(item.key, item.applicable !== false);
+    });
+    const applicableFilters = storedFilters.filter((f) => {
+      const isApplicable = applicabilityMap.get(f.key);
+      return isApplicable === void 0 || isApplicable === true;
+    });
+    const recentFilters = deduplicateFilters(applicableFilters).slice(-3);
+    this.setState({ recentFilters });
   }
-  restoreOriginalGroupBy() {
-    this.model.restoreOriginalGroupBy();
+  async _verifyRecentGroupingsApplicability(storedGroupings) {
+    const adhoc = this._adHocFilter;
+    const queries = adhoc.state.useQueriesAsFilterForOptions ? getQueriesForVariables(adhoc) : void 0;
+    const groupByFilters = storedGroupings.map((g) => ({
+      key: String(g.value),
+      operator: GROUP_BY_OPERATOR,
+      value: "",
+      condition: ""
+    }));
+    const response = await adhoc.getFiltersApplicabilityForQueries(groupByFilters, queries != null ? queries : []);
+    if (!response) {
+      this.setState({ recentGrouping: deduplicateGroupings(storedGroupings).slice(-3) });
+      return;
+    }
+    const applicabilityMap = /* @__PURE__ */ new Map();
+    response.forEach((item) => {
+      applicabilityMap.set(item.key, item.applicable !== false);
+    });
+    const applicableGroupings = deduplicateGroupings(storedGroupings).filter((g) => {
+      const isApplicable = applicabilityMap.get(String(g.value));
+      return isApplicable === void 0 || isApplicable === true;
+    }).slice(-3);
+    this.setState({ recentGrouping: applicableGroupings });
   }
-  clearAll() {
-    this.model.clearAll();
+  /**
+   * Stores a recent filter in localStorage and updates state.
+   */
+  storeRecentFilter(filter) {
+    const key = this._getFiltersStorageKey();
+    const storedFilters = data.store.get(key);
+    const allRecentFilters = storedFilters ? JSON.parse(storedFilters) : [];
+    const updatedStoredFilters = deduplicateFilters([...allRecentFilters, filter]).slice(-10);
+    data.store.set(key, JSON.stringify(updatedStoredFilters));
+    const adhoc = this._adHocFilter;
+    const existingFilter = adhoc.state.filters.find((f) => f.key === filter.key && !Boolean(f.nonApplicable));
+    if (existingFilter && !Boolean(existingFilter.nonApplicable)) {
+      this.setState({ recentFilters: updatedStoredFilters.slice(-3) });
+    }
   }
-  startProfile(name) {
-    const queryController = getQueryController(this.model);
-    queryController == null ? void 0 : queryController.startProfile(name);
+  /**
+   * Stores a recent grouping key in localStorage and updates state.
+   * No-op when enableGroupBy is false.
+   */
+  storeRecentGrouping(groupByKey) {
+    if (!this._isGroupByEnabled) {
+      return;
+    }
+    const storageKey = this._getGroupingStorageKey();
+    const storedGroupings = data.store.get(storageKey);
+    const allRecentGroupings = storedGroupings ? JSON.parse(storedGroupings) : [];
+    const withoutDuplicate = allRecentGroupings.filter((g) => String(g.value) !== groupByKey);
+    const updated = [...withoutDuplicate, { value: groupByKey, text: groupByKey }];
+    const limited = updated.slice(-10);
+    data.store.set(storageKey, JSON.stringify(limited));
+    this.setState({ recentGrouping: limited.slice(-3) });
   }
-  startInteraction(name) {
-    const interactionTracker = getInteractionTracker(this.model);
-    interactionTracker == null ? void 0 : interactionTracker.startInteraction(name);
+  addFilterToParent(filter) {
+    this._adHocFilter.updateFilters([...this._adHocFilter.state.filters, filter]);
   }
-  stopInteraction() {
-    const interactionTracker = getInteractionTracker(this.model);
-    interactionTracker == null ? void 0 : interactionTracker.stopInteraction();
+  addGroupByToParent(key) {
+    if (!this._isGroupByEnabled) {
+      return;
+    }
+    const adhoc = this._adHocFilter;
+    const exists = adhoc.state.filters.some((f) => isGroupByFilter(f) && f.key === key);
+    if (exists) {
+      return;
+    }
+    adhoc._addGroupByFilter({ value: key, label: key });
   }
 }
+AdHocFiltersRecommendations.Component = AdHocFiltersRecommendationsRenderer;
+function AdHocFiltersRecommendationsRenderer({ model }) {
+  const { recentFilters, recommendedFilters, datasourceSupportsRecommendations } = model.useState();
+  const { filters } = model._adHocFilter.useState();
+  const recentDrilldowns = recentFilters == null ? void 0 : recentFilters.map((filter) => ({
+    label: `${filter.key} ${filter.operator} ${filter.value}`,
+    onClick: () => {
+      const exists = filters.some((f) => f.key === filter.key && f.value === filter.value);
+      if (!exists) {
+        model.addFilterToParent(filter);
+      }
+    }
+  }));
+  const recommendedDrilldowns = recommendedFilters == null ? void 0 : recommendedFilters.map((filter) => ({
+    label: `${filter.key} ${filter.operator} ${filter.value}`,
+    onClick: () => {
+      const exists = filters.some((f) => f.key === filter.key && f.value === filter.value);
+      if (!exists) {
+        model.addFilterToParent(filter);
+      }
+    }
+  }));
+  return /* @__PURE__ */ React__default.default.createElement(
+    DrilldownRecommendations,
+    {
+      recentDrilldowns,
+      recommendedDrilldowns,
+      showRecommended: datasourceSupportsRecommendations
+    }
+  );
+}
+function AdHocGroupByRecommendationsRenderer({ model }) {
+  const { recentGrouping, recommendedGrouping, datasourceSupportsRecommendations } = model.useState();
+  const recentDrilldowns = recentGrouping == null ? void 0 : recentGrouping.map((groupBy) => ({
+    label: `${groupBy.value}`,
+    onClick: () => {
+      model.addGroupByToParent(String(groupBy.value));
+    }
+  }));
+  const recommendedDrilldowns = recommendedGrouping == null ? void 0 : recommendedGrouping.map((groupBy) => ({
+    label: `${groupBy.value}`,
+    onClick: () => {
+      model.addGroupByToParent(String(groupBy.value));
+    }
+  }));
+  return /* @__PURE__ */ React__default.default.createElement(
+    DrilldownRecommendations,
+    {
+      recentDrilldowns,
+      recommendedDrilldowns,
+      showRecommended: datasourceSupportsRecommendations
+    }
+  );
+}
 
-function DrilldownRecommendations({ recentDrilldowns, recommendedDrilldowns, showRecommended = false }) {
+const MAX_VISIBLE_FILTERS_DEFAULT = 4;
+const MAX_VISIBLE_FILTERS_WITH_GROUP_BY = 2;
+const MAX_VISIBLE_GROUP_BY = 2;
+const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
+  var _a;
+  const { originFilters, filters, readOnly, collapsible, valueRecommendations, enableGroupBy, groupByRestorable } = controller.useState();
   const styles = ui.useStyles2(getStyles$b);
-  const [isPopoverVisible, setPopoverVisible] = React.useState(false);
-  const ref = React.useRef(null);
-  const openPopover = () => {
-    setPopoverVisible(true);
+  const theme = ui.useTheme2();
+  const [collapsed, setCollapsed] = React.useState(true);
+  const [wrapperRef, { height: wrapperHeight }] = reactUse.useMeasure();
+  const clearAll = () => {
+    var _a2;
+    (_a2 = controller.clearAll) == null ? void 0 : _a2.call(controller);
   };
-  const onClickAction = (action) => {
-    action();
-    setPopoverVisible(false);
+  const focusOnWipInputRef = React.useRef();
+  const focusOnGroupByWipInputRef = React.useRef();
+  const singleLineThreshold = theme.spacing.gridSize * 5;
+  const isMultiLine = collapsible && wrapperHeight > singleLineThreshold;
+  const handleCollapseToggle = (event) => {
+    event.stopPropagation();
+    if (collapsible) {
+      setCollapsed(true);
+    }
   };
-  const content = /* @__PURE__ */ React__default.default.createElement(ui.ClickOutsideWrapper, { onClick: () => setPopoverVisible(false), useCapture: true }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.menuContainer, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "column" }, /* @__PURE__ */ React__default.default.createElement(ui.Text, { weight: "bold", variant: "bodySmall", color: "secondary" }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recent" }, "Recent")), recentDrilldowns && recentDrilldowns.length > 0 ? recentDrilldowns.map((drilldown) => /* @__PURE__ */ React__default.default.createElement(
-    "div",
-    {
-      key: drilldown.label,
-      className: css.cx(styles.combinedFilterPill),
-      onClick: () => onClickAction(drilldown.onClick)
-    },
-    drilldown.label
-  )) : /* @__PURE__ */ React__default.default.createElement("div", { className: styles.emptyMessage }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recent-empty" }, "No recent values")), showRecommended && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(ui.Text, { weight: "bold", variant: "bodySmall", color: "secondary" }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recommended" }, "Recommended")), recommendedDrilldowns && recommendedDrilldowns.length > 0 ? recommendedDrilldowns.map((drilldown) => /* @__PURE__ */ React__default.default.createElement(
+  const handleExpand = () => {
+    if (collapsible && collapsed) {
+      setCollapsed(false);
+    }
+  };
+  const visibleOriginFilters = (_a = originFilters == null ? void 0 : originFilters.filter((f) => f.origin && !f.hidden && !f.dismissedGroupBy)) != null ? _a : [];
+  const visibleFilters = filters.filter((f) => !f.hidden);
+  const allFilters = [...visibleOriginFilters, ...visibleFilters];
+  const totalFiltersCount = allFilters.length;
+  const adhocFilters = allFilters.filter((f) => !isGroupByFilter(f));
+  const groupByFilters = allFilters.filter(isGroupByFilter);
+  const shouldCollapse = collapsible && collapsed && totalFiltersCount > 0;
+  const maxVisibleAdhocFilters = enableGroupBy ? MAX_VISIBLE_FILTERS_WITH_GROUP_BY : MAX_VISIBLE_FILTERS_DEFAULT;
+  const adhocFiltersToRender = shouldCollapse ? adhocFilters.slice(0, maxVisibleAdhocFilters) : adhocFilters;
+  const adhocHiddenCount = shouldCollapse ? Math.max(0, adhocFilters.length - maxVisibleAdhocFilters) : 0;
+  const groupByFiltersToRender = shouldCollapse ? groupByFilters.slice(0, MAX_VISIBLE_GROUP_BY) : groupByFilters;
+  const groupByHiddenCount = shouldCollapse ? Math.max(0, groupByFilters.length - MAX_VISIBLE_GROUP_BY) : 0;
+  React.useEffect(() => {
+    if (collapsible && totalFiltersCount === 0 && collapsed) {
+      setCollapsed(false);
+    }
+  }, [collapsible, totalFiltersCount, collapsed]);
+  const showCollapseButton = collapsible && isMultiLine && !collapsed;
+  const showExpandButton = shouldCollapse && (adhocHiddenCount > 0 || groupByHiddenCount > 0);
+  return /* @__PURE__ */ React__default.default.createElement(
     "div",
     {
-      key: drilldown.label,
-      className: css.cx(styles.combinedFilterPill),
-      onClick: () => onClickAction(drilldown.onClick)
+      ref: wrapperRef,
+      className: css.cx(styles.comboboxWrapper, {
+        [styles.comboboxFocusOutline]: !readOnly,
+        [styles.collapsed]: shouldCollapse
+      })
     },
-    drilldown.label
-  )) : /* @__PURE__ */ React__default.default.createElement("div", { className: styles.emptyMessage }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recommended-empty" }, "No recommended values"))))));
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
-    ui.IconButton,
-    {
-      name: "plus",
-      tooltip: i18n.t("grafana-scenes.components.drilldown-recommendations.tooltip", "Show recommendations"),
-      ref,
-      className: css.cx(isPopoverVisible && styles.iconActive),
-      onClick: (ev) => {
-        openPopover();
-        ev.stopPropagation();
+    !readOnly && valueRecommendations && /* @__PURE__ */ React__default.default.createElement(valueRecommendations.Component, { model: valueRecommendations }),
+    adhocFiltersToRender.map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
+      AdHocFilterPill,
+      {
+        key: `${filter.origin ? "origin-" : ""}${index}-${filter.key}`,
+        filter,
+        controller,
+        readOnly: readOnly || filter.readOnly,
+        focusOnWipInputRef: focusOnWipInputRef.current
+      }
+    )),
+    shouldCollapse && adhocHiddenCount > 0 && /* @__PURE__ */ React__default.default.createElement(
+      ui.Button,
+      {
+        className: styles.moreIndicator,
+        fill: "text",
+        size: "sm",
+        "aria-label": i18n.t(
+          "grafana-scenes.variables.adhoc-filters-combobox-renderer.show-more-filters",
+          "Show {{count}} more filters",
+          { count: adhocHiddenCount }
+        ),
+        onClick: (e) => {
+          e.stopPropagation();
+          handleExpand();
+          setTimeout(() => {
+            var _a2;
+            return (_a2 = focusOnWipInputRef.current) == null ? void 0 : _a2.call(focusOnWipInputRef);
+          });
+        }
+      },
+      "+",
+      adhocHiddenCount
+    ),
+    !readOnly && /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { ref: focusOnWipInputRef, controller, onInputClick: handleExpand }),
+    enableGroupBy && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.sectionDivider }), /* @__PURE__ */ React__default.default.createElement("span", { className: styles.groupByLabel }, i18n.t("grafana-scenes.variables.adhoc-filters-combobox-renderer.group-by-label", "Group by:")), !readOnly && valueRecommendations && /* @__PURE__ */ React__default.default.createElement(AdHocGroupByRecommendationsRenderer, { model: valueRecommendations }), groupByFiltersToRender.map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
+      GroupByPill,
+      {
+        key: `groupby-${index}-${filter.key}`,
+        filter,
+        controller,
+        readOnly: readOnly || filter.readOnly,
+        focusOnWipInputRef: focusOnGroupByWipInputRef.current
+      }
+    )), shouldCollapse && groupByHiddenCount > 0 && /* @__PURE__ */ React__default.default.createElement(
+      ui.Button,
+      {
+        className: styles.moreIndicator,
+        fill: "text",
+        size: "sm",
+        "aria-label": i18n.t(
+          "grafana-scenes.variables.adhoc-filters-combobox-renderer.show-more-group-by",
+          "Show {{count}} more group by",
+          { count: groupByHiddenCount }
+        ),
+        onClick: (e) => {
+          e.stopPropagation();
+          handleExpand();
+          setTimeout(() => {
+            var _a2;
+            return (_a2 = focusOnGroupByWipInputRef.current) == null ? void 0 : _a2.call(focusOnGroupByWipInputRef);
+          });
+        }
+      },
+      "+",
+      groupByHiddenCount
+    ), !readOnly && /* @__PURE__ */ React__default.default.createElement(
+      AdHocFiltersAlwaysWipCombobox,
+      {
+        ref: focusOnGroupByWipInputRef,
+        controller,
+        onInputClick: handleExpand,
+        isGroupBy: true
       }
-    }
-  ), isPopoverVisible && ref.current && /* @__PURE__ */ React__default.default.createElement(
-    ui.Popover,
-    {
-      content,
-      onKeyDown: (event) => {
-        if (event.key === " ") {
-          event.stopPropagation();
+    ), groupByRestorable && /* @__PURE__ */ React__default.default.createElement(
+      ui.IconButton,
+      {
+        name: "history",
+        size: "md",
+        className: styles.controlButton,
+        tooltip: i18n.t(
+          "grafana-scenes.variables.adhoc-filters-combobox-renderer.restore-default-group-by",
+          "Restore groupby set by this dashboard."
+        ),
+        onClick: () => {
+          var _a2;
+          return (_a2 = controller.restoreOriginalGroupBy) == null ? void 0 : _a2.call(controller);
         }
+      }
+    )),
+    (showCollapseButton || showExpandButton || !readOnly) && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.rightControls }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.sectionDivider }), showCollapseButton && /* @__PURE__ */ React__default.default.createElement(
+      ui.Button,
+      {
+        className: styles.collapseButton,
+        fill: "text",
+        size: "sm",
+        onClick: handleCollapseToggle,
+        "aria-label": i18n.t(
+          "grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse-filters",
+          "Collapse filters"
+        ),
+        "aria-expanded": !collapsed
       },
-      placement: "bottom-start",
-      referenceElement: ref.current,
-      show: true
-    }
-  ));
-}
+      i18n.t("grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse", "Collapse"),
+      /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "angle-up", size: "md" })
+    ), showExpandButton && /* @__PURE__ */ React__default.default.createElement(
+      ui.IconButton,
+      {
+        name: "angle-down",
+        size: "md",
+        className: styles.dropdownIndicator,
+        tooltip: i18n.t("grafana-scenes.variables.adhoc-filters-combobox-renderer.expand-filters", "Expand filters"),
+        onClick: (e) => {
+          e.stopPropagation();
+          handleExpand();
+        }
+      }
+    ), !readOnly && /* @__PURE__ */ React__default.default.createElement(
+      ui.IconButton,
+      {
+        name: "times",
+        size: "md",
+        className: styles.controlButton,
+        tooltip: i18n.t("grafana-scenes.variables.adhoc-filters-combobox-renderer.clear-all", "Clear all"),
+        onClick: clearAll
+      }
+    ))
+  );
+});
 const getStyles$b = (theme) => ({
-  menuContainer: css.css({
+  comboboxWrapper: css.css({
     display: "flex",
-    flexDirection: "column",
-    background: theme.colors.background.elevated,
-    border: `1px solid ${theme.colors.border.weak}`,
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: theme.spacing(1),
+    rowGap: theme.spacing(0.5),
+    minHeight: theme.spacing(4),
+    backgroundColor: theme.components.input.background,
+    border: `1px solid ${theme.colors.border.strong}`,
     borderRadius: theme.shape.radius.default,
-    boxShadow: theme.shadows.z3,
-    padding: theme.spacing(2)
+    paddingInline: theme.spacing(1),
+    paddingBlock: theme.spacing(0.5),
+    flexGrow: 1,
+    width: "100%"
   }),
-  combinedFilterPill: css.css({
+  comboboxFocusOutline: css.css({
+    "&:focus-within": {
+      outline: "2px dotted transparent",
+      outlineOffset: "2px",
+      boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
+      transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
+      transitionDuration: "0.2s",
+      transitionProperty: "outline, outline-offset, box-shadow",
+      zIndex: 2
+    }
+  }),
+  collapsed: css.css({
+    flexWrap: "nowrap",
+    overflow: "hidden"
+  }),
+  rightControls: css.css({
+    display: "flex",
     alignItems: "center",
-    background: theme.colors.action.selected,
-    borderRadius: theme.shape.radius.default,
-    border: `1px solid ${theme.colors.border.weak}`,
-    padding: theme.spacing(0.2, 1),
+    marginLeft: "auto",
+    flexShrink: 0,
+    gap: theme.spacing(1.5)
+  }),
+  moreIndicator: css.css({
     color: theme.colors.text.primary,
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    minHeight: theme.spacing(2.75),
-    ...theme.typography.bodySmall,
-    fontWeight: theme.typography.fontWeightBold,
-    cursor: "pointer",
+    background: theme.colors.action.selected,
+    height: "auto",
+    lineHeight: "normal",
+    alignSelf: "stretch",
     "&:hover": {
       background: theme.colors.action.hover
     }
   }),
-  iconActive: css.css({
-    "&:before": {
-      backgroundColor: theme.colors.action.hover,
-      opacity: 1
+  dropdownIndicator: css.css({
+    color: theme.colors.text.secondary,
+    flexShrink: 0
+  }),
+  collapseButton: css.css({
+    color: theme.colors.text.secondary,
+    padding: 0,
+    height: "auto",
+    lineHeight: "normal",
+    "&:hover": {
+      background: "transparent",
+      color: theme.colors.text.primary
     }
   }),
-  emptyMessage: css.css({
-    padding: theme.spacing(0.5, 0),
+  sectionDivider: css.css({
+    width: "1px",
+    alignSelf: "stretch",
+    backgroundColor: theme.colors.border.weak,
+    flexShrink: 0
+  }),
+  groupByLabel: css.css({
+    ...theme.typography.bodySmall,
+    fontWeight: theme.typography.fontWeightBold,
+    color: theme.colors.text.primary,
+    whiteSpace: "nowrap"
+  }),
+  controlButton: css.css({
     color: theme.colors.text.secondary,
-    ...theme.typography.bodySmall
+    "&:hover": {
+      color: theme.colors.text.primary
+    }
   })
 });
 
-const getRecentFiltersKey = (datasourceUid) => `grafana.filters.recent.${datasourceUid != null ? datasourceUid : "default"}`;
-function getFilterIdentity(filter) {
-  return `${filter.key}|${filter.operator}|${filter.value}`;
+const reverseScopeFilterOperatorMap = Object.fromEntries(
+  Object.entries(data.scopeFilterOperatorMap).map(([symbol, operator]) => [operator, symbol])
+);
+function isEqualityOrMultiOperator(value) {
+  const operators = /* @__PURE__ */ new Set(["equals", "not-equals", "one-of", "not-one-of"]);
+  return operators.has(value);
 }
-function deduplicateFilters(filters) {
-  const filterMap = /* @__PURE__ */ new Map();
-  for (const filter of filters) {
-    const identity = getFilterIdentity(filter);
-    if (filterMap.has(identity)) {
-      filterMap.delete(identity);
-    }
-    filterMap.set(identity, filter);
+function isRegexOperator(value) {
+  const operators = /* @__PURE__ */ new Set(["regex-match", "regex-not-match"]);
+  return operators.has(value);
+}
+function getAdHocFiltersFromScopes(scopes) {
+  const formattedFilters = /* @__PURE__ */ new Map();
+  const duplicatedFilters = [];
+  const allFilters = scopes.flatMap((scope) => scope.spec.filters);
+  for (const filter of allFilters) {
+    processFilter(formattedFilters, duplicatedFilters, filter);
   }
-  return Array.from(filterMap.values());
+  return [...formattedFilters.values(), ...duplicatedFilters];
 }
-class AdHocFiltersRecommendations extends SceneObjectBase {
-  constructor(state = {}) {
-    super(state);
-    this._activationHandler = () => {
-      const json = data.store.get(this._getStorageKey());
-      const storedFilters = json ? JSON.parse(json) : [];
-      if (storedFilters.length > 0) {
-        this._verifyRecentFiltersApplicability(storedFilters);
-      } else {
-        this.setState({ recentFilters: [] });
-      }
-      this._fetchRecommendedDrilldowns();
-      const scopesVariable = sceneGraph.lookupVariable(SCOPES_VARIABLE_NAME, this._adHocFilter);
-      let scopesSubscription;
-      let adHocSubscription;
-      if (scopesVariable instanceof ScopesVariable) {
-        this._subs.add(
-          scopesSubscription = scopesVariable.subscribeToState((newState, prevState) => {
-            if (newState.scopes !== prevState.scopes) {
-              const json2 = data.store.get(this._getStorageKey());
-              const storedFilters2 = json2 ? JSON.parse(json2) : [];
-              if (storedFilters2.length > 0) {
-                this._verifyRecentFiltersApplicability(storedFilters2);
-              }
-              this._fetchRecommendedDrilldowns();
-            }
-          })
-        );
-      }
-      this._subs.add(
-        adHocSubscription = this._adHocFilter.subscribeToState((newState, prevState) => {
-          if (newState.filters !== prevState.filters) {
-            const json2 = data.store.get(this._getStorageKey());
-            const storedFilters2 = json2 ? JSON.parse(json2) : [];
-            if (storedFilters2.length > 0) {
-              this._verifyRecentFiltersApplicability(storedFilters2);
-            }
-            this._fetchRecommendedDrilldowns();
-          }
-        })
-      );
-      return () => {
-        scopesSubscription == null ? void 0 : scopesSubscription.unsubscribe();
-        adHocSubscription == null ? void 0 : adHocSubscription.unsubscribe();
-      };
-    };
-    this.addActivationHandler(this._activationHandler);
+function processFilter(formattedFilters, duplicatedFilters, filter) {
+  var _a, _b;
+  if (!filter) {
+    return;
+  }
+  const existingFilter = formattedFilters.get(filter.key);
+  if (existingFilter && isEqualityValue(existingFilter.operator, filter.operator)) {
+    mergeFilterValues(existingFilter, filter);
+  } else if (existingFilter && isRegexValue(existingFilter.operator, filter.operator)) {
+    existingFilter.value += `|${filter.value}`;
+    existingFilter.values = [existingFilter.value];
+  } else if (!existingFilter) {
+    formattedFilters.set(filter.key, {
+      key: filter.key,
+      operator: reverseScopeFilterOperatorMap[filter.operator],
+      value: filter.value,
+      values: (_a = filter.values) != null ? _a : [filter.value],
+      origin: "scope"
+    });
+  } else {
+    duplicatedFilters.push({
+      key: filter.key,
+      operator: reverseScopeFilterOperatorMap[filter.operator],
+      value: filter.value,
+      values: (_b = filter.values) != null ? _b : [filter.value],
+      origin: "scope"
+    });
   }
-  get _adHocFilter() {
-    if (!(this.parent instanceof AdHocFiltersVariable)) {
-      throw new Error("AdHocFiltersRecommendations must be a child of AdHocFiltersVariable");
+}
+function mergeFilterValues(adHocFilter, filter) {
+  var _a, _b, _c, _d;
+  const values = (_a = filter.values) != null ? _a : [filter.value];
+  for (const value of values) {
+    if (!((_b = adHocFilter.values) == null ? void 0 : _b.includes(value))) {
+      (_c = adHocFilter.values) == null ? void 0 : _c.push(value);
     }
-    return this.parent;
   }
-  get _scopedVars() {
-    return { __sceneObject: wrapInSafeSerializableSceneObject(this._adHocFilter) };
+  if (((_d = adHocFilter.values) == null ? void 0 : _d.length) === 1) {
+    return;
   }
-  _getStorageKey() {
-    var _a;
-    return getRecentFiltersKey((_a = this._adHocFilter.state.datasource) == null ? void 0 : _a.uid);
+  if (filter.operator === "equals" && adHocFilter.operator === reverseScopeFilterOperatorMap["equals"]) {
+    adHocFilter.operator = reverseScopeFilterOperatorMap["one-of"];
+  } else if (filter.operator === "not-equals" && adHocFilter.operator === reverseScopeFilterOperatorMap["not-equals"]) {
+    adHocFilter.operator = reverseScopeFilterOperatorMap["not-one-of"];
   }
-  async _fetchRecommendedDrilldowns() {
-    var _a;
-    const adhoc = this._adHocFilter;
-    const ds = await getDataSource(adhoc.state.datasource, this._scopedVars);
-    if (!ds || !ds.getRecommendedDrilldowns) {
-      this.setState({ datasourceSupportsRecommendations: false });
-      return;
-    }
-    this.setState({ datasourceSupportsRecommendations: true });
-    const queries = adhoc.state.useQueriesAsFilterForOptions ? getQueriesForVariables(adhoc) : void 0;
-    const timeRange = sceneGraph.getTimeRange(adhoc).state.value;
-    const scopes = sceneGraph.getScopes(adhoc);
-    const filters = [...(_a = adhoc.state.originFilters) != null ? _a : [], ...adhoc.state.filters].filter((f) => !isGroupByFilter(f));
-    const enrichedRequest = getEnrichedDataRequest(adhoc);
-    const dashboardUid = enrichedRequest == null ? void 0 : enrichedRequest.dashboardUID;
-    try {
-      const recommendedDrilldowns = await ds.getRecommendedDrilldowns({
-        timeRange,
-        dashboardUid,
-        queries: queries != null ? queries : [],
-        filters,
-        scopes
-      });
-      if (recommendedDrilldowns == null ? void 0 : recommendedDrilldowns.filters) {
-        this.setState({ recommendedFilters: recommendedDrilldowns.filters });
-      }
-    } catch (error) {
-      console.error("Failed to fetch recommended drilldowns:", error);
-    }
+}
+function isRegexValue(adHocFilterOperator, filterOperator) {
+  const scopeConvertedOperator = data.scopeFilterOperatorMap[adHocFilterOperator];
+  if (!isRegexOperator(scopeConvertedOperator) || !isRegexOperator(filterOperator)) {
+    return false;
   }
-  async _verifyRecentFiltersApplicability(storedFilters) {
-    const adhoc = this._adHocFilter;
-    const queries = adhoc.state.useQueriesAsFilterForOptions ? getQueriesForVariables(adhoc) : void 0;
-    const response = await adhoc.getFiltersApplicabilityForQueries(storedFilters, queries != null ? queries : []);
-    if (!response) {
-      const deduped = deduplicateFilters(storedFilters);
-      this.setState({ recentFilters: deduped.slice(-3) });
-      return;
+  return hasSameOperators(scopeConvertedOperator, filterOperator);
+}
+function isEqualityValue(adHocFilterOperator, filterOperator) {
+  const scopeConvertedOperator = data.scopeFilterOperatorMap[adHocFilterOperator];
+  if (!isEqualityOrMultiOperator(scopeConvertedOperator) || !isEqualityOrMultiOperator(filterOperator)) {
+    return false;
+  }
+  return hasSameOperators(scopeConvertedOperator, filterOperator);
+}
+function hasSameOperators(scopeConvertedOperator, filterOperator) {
+  if (scopeConvertedOperator.includes("not") && !filterOperator.includes("not") || !scopeConvertedOperator.includes("not") && filterOperator.includes("not")) {
+    return false;
+  }
+  return true;
+}
+
+function isInteractionTracker(s) {
+  return "isInteractionTracker" in s;
+}
+class SceneInteractionTracker extends SceneObjectBase {
+  constructor(state = {}, renderProfiler) {
+    super(state);
+    this.renderProfiler = renderProfiler;
+    this.isInteractionTracker = true;
+    if (renderProfiler) {
+      this.renderProfiler = renderProfiler;
+      this.renderProfiler.setInteractionCompleteHandler(state.onInteractionComplete);
     }
-    const applicabilityMap = /* @__PURE__ */ new Map();
-    response.forEach((item) => {
-      applicabilityMap.set(item.key, item.applicable !== false);
-    });
-    const applicableFilters = storedFilters.filter((f) => {
-      const isApplicable = applicabilityMap.get(f.key);
-      return isApplicable === void 0 || isApplicable === true;
-    });
-    const recentFilters = deduplicateFilters(applicableFilters).slice(-3);
-    this.setState({ recentFilters });
   }
-  /**
-   * Stores a recent filter in localStorage and updates state.
-   * Should be called by the parent variable when a filter is added/updated.
-   */
-  storeRecentFilter(filter) {
-    const key = this._getStorageKey();
-    const storedFilters = data.store.get(key);
-    const allRecentFilters = storedFilters ? JSON.parse(storedFilters) : [];
-    const updatedStoredFilters = deduplicateFilters([...allRecentFilters, filter]).slice(-10);
-    data.store.set(key, JSON.stringify(updatedStoredFilters));
-    const adhoc = this._adHocFilter;
-    const existingFilter = adhoc.state.filters.find((f) => f.key === filter.key && !Boolean(f.nonApplicable));
-    if (existingFilter && !Boolean(existingFilter.nonApplicable)) {
-      this.setState({ recentFilters: updatedStoredFilters.slice(-3) });
+  startInteraction(name) {
+    var _a;
+    if (!this.state.enableInteractionTracking) {
+      return;
     }
+    (_a = this.renderProfiler) == null ? void 0 : _a.startInteraction(name);
   }
-  addFilterToParent(filter) {
-    this._adHocFilter.updateFilters([...this._adHocFilter.state.filters, filter]);
+  stopInteraction() {
+    var _a;
+    (_a = this.renderProfiler) == null ? void 0 : _a.stopInteraction();
   }
 }
-AdHocFiltersRecommendations.Component = AdHocFiltersRecommendationsRenderer;
-function AdHocFiltersRecommendationsRenderer({ model }) {
-  const { recentFilters, recommendedFilters, datasourceSupportsRecommendations } = model.useState();
-  const { filters } = model._adHocFilter.useState();
-  const recentDrilldowns = recentFilters == null ? void 0 : recentFilters.map((filter) => ({
-    label: `${filter.key} ${filter.operator} ${filter.value}`,
-    onClick: () => {
-      const exists = filters.some((f) => f.key === filter.key && f.value === filter.value);
-      if (!exists) {
-        model.addFilterToParent(filter);
-      }
-    }
-  }));
-  const recommendedDrilldowns = recommendedFilters == null ? void 0 : recommendedFilters.map((filter) => ({
-    label: `${filter.key} ${filter.operator} ${filter.value}`,
-    onClick: () => {
-      const exists = filters.some((f) => f.key === filter.key && f.value === filter.value);
-      if (!exists) {
-        model.addFilterToParent(filter);
+
+function getInteractionTracker(sceneObject) {
+  let parent = sceneObject;
+  while (parent) {
+    if (parent.state.$behaviors) {
+      for (const behavior of parent.state.$behaviors) {
+        if (isInteractionTracker(behavior)) {
+          return behavior;
+        }
       }
     }
-  }));
-  return /* @__PURE__ */ React__default.default.createElement(
-    DrilldownRecommendations,
-    {
-      recentDrilldowns,
-      recommendedDrilldowns,
-      showRecommended: datasourceSupportsRecommendations
-    }
-  );
+    parent = parent.parent;
+  }
+  return void 0;
+}
+
+class AdHocFiltersVariableController {
+  constructor(model) {
+    this.model = model;
+  }
+  useState() {
+    const state = this.model.useState();
+    return {
+      filters: state.filters,
+      originFilters: state.originFilters,
+      readOnly: state.readOnly,
+      allowCustomValue: state.allowCustomValue,
+      supportsMultiValueOperators: state.supportsMultiValueOperators,
+      onAddCustomValue: state.onAddCustomValue,
+      wip: state._wip,
+      inputPlaceholder: state.inputPlaceholder,
+      groupByInputPlaceholder: state.groupByInputPlaceholder,
+      collapsible: state.collapsible,
+      valueRecommendations: this.model.getRecommendations(),
+      drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled,
+      enableGroupBy: state.enableGroupBy,
+      groupByRestorable: this.model.isGroupByRestorable()
+    };
+  }
+  async getKeys(currentKey) {
+    return this.model._getKeys(currentKey);
+  }
+  async getGroupByKeys(currentKey) {
+    return this.model._getGroupByKeys(currentKey);
+  }
+  async getValuesFor(filter) {
+    return this.model._getValuesFor(filter);
+  }
+  getOperators() {
+    return this.model._getOperators();
+  }
+  updateFilter(filter, update) {
+    this.model._updateFilter(filter, update);
+  }
+  updateFilters(filters, options) {
+    this.model.updateFilters(filters, options);
+  }
+  updateToMatchAll(filter) {
+    this.model.updateToMatchAll(filter);
+  }
+  removeFilter(filter) {
+    this.model._removeFilter(filter);
+  }
+  removeLastFilter() {
+    this.model._removeLastFilter();
+  }
+  handleComboboxBackspace(filter) {
+    this.model._handleComboboxBackspace(filter);
+  }
+  addWip() {
+    this.model._addWip();
+  }
+  addGroupByFilter(item) {
+    this.model._addGroupByFilter(item);
+  }
+  restoreOriginalFilter(filter) {
+    this.model.restoreOriginalFilter(filter);
+  }
+  restoreOriginalGroupBy() {
+    this.model.restoreOriginalGroupBy();
+  }
+  clearAll() {
+    this.model.clearAll();
+  }
+  startProfile(name) {
+    const queryController = getQueryController(this.model);
+    queryController == null ? void 0 : queryController.startProfile(name);
+  }
+  startInteraction(name) {
+    const interactionTracker = getInteractionTracker(this.model);
+    interactionTracker == null ? void 0 : interactionTracker.startInteraction(name);
+  }
+  stopInteraction() {
+    const interactionTracker = getInteractionTracker(this.model);
+    interactionTracker == null ? void 0 : interactionTracker.stopInteraction();
+  }
 }
 
 const ORIGIN_FILTERS_KEY = "originFilters";
@@ -8858,7 +8983,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
    * No-op when enableGroupBy is false.
    */
   _addGroupByFilter(item) {
-    var _a, _b;
+    var _a, _b, _c;
     if (!this.state.enableGroupBy) {
       return;
     }
@@ -8871,6 +8996,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
       value: "",
       condition: ""
     };
+    (_c = this._recommendations) == null ? void 0 : _c.storeRecentGrouping(key);
     this.updateFilters([...this.state.filters, newFilter]);
   }
   restoreOriginalFilter(filter) {
@@ -9004,7 +9130,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
     return this.state.filterExpression;
   }
   _updateFilter(filter, update) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { originFilters, filters, _wip } = this.state;
     if ("value" in update && !("values" in update)) {
       update = { ...update, values: void 0 };
@@ -9074,10 +9200,12 @@ class AdHocFiltersVariable extends SceneObjectBase {
       return f === filter ? { ...f, ...update } : f;
     });
     this.setState({ filters: updatedFilters });
-    (_e = this._recommendations) == null ? void 0 : _e.storeRecentFilter({
-      ...filter,
-      ...update
-    });
+    const merged = { ...filter, ...update };
+    if (isGroupByFilter(merged)) {
+      (_e = this._recommendations) == null ? void 0 : _e.storeRecentGrouping(merged.key);
+    } else {
+      (_f = this._recommendations) == null ? void 0 : _f.storeRecentFilter(merged);
+    }
   }
   updateToMatchAll(filter) {
     var _a;