@grafana/scenes 6.50.0--canary.1312.20235582466.0 → 6.50.0--canary.1312.20242044820.0

package/dist/index.js

@@ -3614,6 +3614,186 @@ function getInteractionTracker(sceneObject) {
   return void 0;
 }
 
+function DrilldownRecommendations({ recentDrilldowns, recommendedDrilldowns }) {
+  const styles = ui.useStyles2(getStyles$k);
+  const [isPopoverVisible, setPopoverVisible] = React.useState(false);
+  const ref = React.useRef(null);
+  const openPopover = () => {
+    setPopoverVisible(true);
+  };
+  const onClickAction = (action) => {
+    action();
+    setPopoverVisible(false);
+  };
+  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")), /* @__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: "plus",
+      tooltip: i18n.t("grafana-scenes.components.drilldown-recommendations.tooltip", "Show recommendations"),
+      ref,
+      className: css.cx(isPopoverVisible && styles.iconActive),
+      onClick: (ev) => {
+        openPopover();
+        ev.stopPropagation();
+      }
+    }
+  ), isPopoverVisible && ref.current && /* @__PURE__ */ React__default.default.createElement(
+    ui.Popover,
+    {
+      content,
+      onKeyDown: (event) => {
+        if (event.key === " ") {
+          event.stopPropagation();
+        }
+      },
+      placement: "bottom-start",
+      referenceElement: ref.current,
+      show: true
+    }
+  ));
+}
+const getStyles$k = (theme) => ({
+  menuContainer: css.css({
+    display: "flex",
+    flexDirection: "column",
+    background: theme.colors.background.elevated,
+    border: `1px solid ${theme.colors.border.weak}`,
+    borderRadius: theme.shape.radius.default,
+    boxShadow: theme.shadows.z3,
+    padding: theme.spacing(2)
+  }),
+  combinedFilterPill: css.css({
+    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),
+    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
+    }
+  }),
+  iconActive: css.css({
+    "&:before": {
+      backgroundColor: theme.colors.action.hover,
+      opacity: 1
+    }
+  }),
+  emptyMessage: css.css({
+    padding: theme.spacing(0.5, 0),
+    color: theme.colors.text.secondary,
+    ...theme.typography.bodySmall
+  })
+});
+
+class ScopesVariable extends SceneObjectBase {
+  constructor(state) {
+    super({
+      skipUrlSync: true,
+      loading: true,
+      scopes: [],
+      ...state,
+      type: "system",
+      name: SCOPES_VARIABLE_NAME,
+      hide: schema.VariableHide.hideVariable
+    });
+    this._renderBeforeActivation = true;
+    // Special options that enables variables to be hidden but still render to access react contexts
+    this.UNSAFE_renderAsHidden = true;
+  }
+  /**
+   * Temporary simple implementation to stringify the scopes.
+   */
+  getValue() {
+    var _a;
+    const scopes = (_a = this.state.scopes) != null ? _a : [];
+    return new ScopesVariableFormatter(scopes.map((scope) => scope.metadata.name));
+  }
+  getScopes() {
+    return this.state.scopes;
+  }
+  /**
+   * This method is used to keep the context up to date with the scopes context received from React
+   * 1) Subscribes to ScopesContext state changes and synchronizes it with the variable state
+   * 2) Handles enable / disabling of scopes based on variable enable option.
+   */
+  setContext(context) {
+    if (!context) {
+      return;
+    }
+    this._context = context;
+    const oldState = context.state;
+    if (this.state.enable != null) {
+      context.setEnabled(this.state.enable);
+    }
+    const sub = context.stateObservable.subscribe((state) => {
+      this.updateStateFromContext(state);
+    });
+    return () => {
+      sub.unsubscribe();
+      if (this.state.enable != null) {
+        context.setEnabled(oldState.enabled);
+      }
+    };
+  }
+  updateStateFromContext(state) {
+    const loading = state.value.length === 0 ? false : state.loading;
+    const oldScopes = this.state.scopes.map((scope) => scope.metadata.name);
+    const newScopes = state.value.map((scope) => scope.metadata.name);
+    const scopesHaveChanged = !lodash.isEqual(oldScopes, newScopes);
+    if (!loading && (scopesHaveChanged || newScopes.length === 0)) {
+      const queryController = getQueryController(this);
+      queryController == null ? void 0 : queryController.startProfile(SCOPES_CHANGED_INTERACTION);
+      this.setState({ scopes: state.value, loading });
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    } else {
+      this.setState({ loading });
+    }
+  }
+}
+ScopesVariable.Component = ScopesVariableRenderer;
+function ScopesVariableRenderer({ model }) {
+  const context = React.useContext(runtime.ScopesContext);
+  React.useEffect(() => {
+    return model.setContext(context);
+  }, [context, model]);
+  return null;
+}
+class ScopesVariableFormatter {
+  constructor(_value) {
+    this._value = _value;
+  }
+  formatter(formatNameOrFn) {
+    if (formatNameOrFn === schema.VariableFormatID.QueryParam) {
+      return this._value.map((scope) => `scope=${encodeURIComponent(scope)}`).join("&");
+    }
+    return this._value.join(", ");
+  }
+}
+
 let originalGetAdhocFilters = void 0;
 const allActiveFilterSets = /* @__PURE__ */ new Set();
 function patchGetAdhocFilters(filterVar) {
@@ -3673,7 +3853,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$k);
+  const styles = ui.useStyles2(getStyles$j);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default.default.createElement(
@@ -3720,7 +3900,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$k = (theme) => ({
+const getStyles$j = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -3773,7 +3953,7 @@ function keyLabelToOption(key, label) {
 const filterNoOp$1 = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b, _c, _d, _e;
-  const styles = ui.useStyles2(getStyles$j);
+  const styles = ui.useStyles2(getStyles$i);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -4000,7 +4180,7 @@ function AdHocFilterRenderer({ filter, model }) {
     }
   ));
 }
-const getStyles$j = (theme) => ({
+const getStyles$i = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -4073,7 +4253,7 @@ const getStyles$j = (theme) => ({
 
 function AdHocFilterBuilder({ model, addFilterButtonText }) {
   const { _wip } = model.useState();
-  const styles = ui.useStyles2(getStyles$i);
+  const styles = ui.useStyles2(getStyles$h);
   if (!_wip) {
     return /* @__PURE__ */ React__default.default.createElement(
       ui.Button,
@@ -4091,7 +4271,7 @@ function AdHocFilterBuilder({ model, addFilterButtonText }) {
   }
   return /* @__PURE__ */ React__default.default.createElement(AdHocFilterRenderer, { filter: _wip, model });
 }
-const getStyles$i = (theme) => ({
+const getStyles$h = (theme) => ({
   addButton: css.css({
     "&:first-child": {
       borderBottomLeftRadius: 0,
@@ -4216,7 +4396,7 @@ function isFilter(filter) {
 
 const DropdownItem = React.forwardRef(
   function DropdownItem2({ children, active, addGroupBottomBorder, isMultiValueEdit, checked, ...rest }, ref) {
-    const styles = ui.useStyles2(getStyles$h);
+    const styles = ui.useStyles2(getStyles$g);
     const id = React.useId();
     return /* @__PURE__ */ React__default.default.createElement(
       "div",
@@ -4232,7 +4412,7 @@ const DropdownItem = React.forwardRef(
     );
   }
 );
-const getStyles$h = (theme) => ({
+const getStyles$g = (theme) => ({
   option: css.css({
     label: "grafana-select-option",
     top: 0,
@@ -4302,7 +4482,7 @@ const MultiValueApplyButton = ({
   maxOptionWidth,
   menuHeight
 }) => {
-  const styles = ui.useStyles2(getStyles$h);
+  const styles = ui.useStyles2(getStyles$g);
   const floatingElementRect = floatingElement == null ? void 0 : floatingElement.getBoundingClientRect();
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
@@ -4523,7 +4703,7 @@ const MultiValuePill = ({
   handleEditMultiValuePill
 }) => {
   var _a, _b;
-  const styles = ui.useStyles2(getStyles$g);
+  const styles = ui.useStyles2(getStyles$f);
   const editMultiValuePill = React.useCallback(
     (e) => {
       e.stopPropagation();
@@ -4587,7 +4767,7 @@ const MultiValuePill = ({
     )
   );
 };
-const getStyles$g = (theme) => ({
+const getStyles$f = (theme) => ({
   basePill: css.css({
     display: "flex",
     alignItems: "center",
@@ -4633,7 +4813,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
   const [activeIndex, setActiveIndex] = React.useState(null);
   const [filterInputType, setInputType] = React.useState(!isAlwaysWip ? "value" : "key");
   const [preventFiltering, setPreventFiltering] = React.useState(!isAlwaysWip && filterInputType === "value");
-  const styles = ui.useStyles2(getStyles$f);
+  const styles = ui.useStyles2(getStyles$e);
   const [filterMultiValues, setFilterMultiValues] = React.useState([]);
   const [_, setForceRefresh] = React.useState({});
   const { allowCustomValue = true, onAddCustomValue, filters, inputPlaceholder } = controller.useState();
@@ -5239,7 +5419,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
     }
   ) : null))));
 });
-const getStyles$f = (theme) => ({
+const getStyles$e = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
     flexWrap: "wrap"
@@ -5313,7 +5493,7 @@ const getStyles$f = (theme) => ({
 const LABEL_MAX_VISIBLE_LENGTH = 20;
 function AdHocFilterPill({ filter, controller, readOnly, focusOnWipInputRef }) {
   var _a, _b, _c, _d;
-  const styles = ui.useStyles2(getStyles$e);
+  const styles = ui.useStyles2(getStyles$d);
   const [viewMode, setViewMode] = React.useState(true);
   const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = React.useState(false);
   const pillWrapperRef = React.useRef(null);
@@ -5491,7 +5671,7 @@ function AdHocFilterPill({ filter, controller, readOnly, focusOnWipInputRef }) {
     }
   );
 }
-const getStyles$e = (theme) => ({
+const getStyles$d = (theme) => ({
   combinedFilterPill: css.css({
     display: "flex",
     alignItems: "center",
@@ -5573,134 +5753,21 @@ const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwa
   return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { controller, filter: wip, isAlwaysWip: true, ref: parentRef });
 });
 
-function DrilldownRecommendations({ recentDrilldowns, recommendedDrilldowns }) {
-  const styles = ui.useStyles2(getStyles$d);
-  const [isPopoverVisible, setPopoverVisible] = React.useState(false);
-  const ref = React.useRef(null);
-  const openPopover = () => {
-    setPopoverVisible(true);
-  };
-  const onClickAction = (action) => {
-    action();
-    setPopoverVisible(false);
-  };
-  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")), /* @__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 AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
+  const { originFilters, filters, readOnly, valueRecommendations, drilldownRecommendationsEnabled } = controller.useState();
+  const styles = ui.useStyles2(getStyles$c);
+  const focusOnWipInputRef = React.useRef();
+  return /* @__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: "plus",
-      tooltip: i18n.t("grafana-scenes.components.drilldown-recommendations.tooltip", "Show recommendations"),
-      ref,
-      className: css.cx(isPopoverVisible && styles.iconActive),
-      onClick: (ev) => {
-        openPopover();
-        ev.stopPropagation();
-      }
-    }
-  ), isPopoverVisible && ref.current && /* @__PURE__ */ React__default.default.createElement(
-    ui.Popover,
-    {
-      content,
-      onKeyDown: (event) => {
-        if (event.key === " ") {
-          event.stopPropagation();
-        }
-      },
-      placement: "bottom-start",
-      referenceElement: ref.current,
-      show: true
-    }
-  ));
-}
-const getStyles$d = (theme) => ({
-  menuContainer: css.css({
-    display: "flex",
-    flexDirection: "column",
-    background: theme.colors.background.elevated,
-    border: `1px solid ${theme.colors.border.weak}`,
-    borderRadius: theme.shape.radius.default,
-    boxShadow: theme.shadows.z3,
-    padding: theme.spacing(2)
-  }),
-  combinedFilterPill: css.css({
-    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),
-    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
-    }
-  }),
-  iconActive: css.css({
-    "&:before": {
-      backgroundColor: theme.colors.action.hover,
-      opacity: 1
-    }
-  }),
-  emptyMessage: css.css({
-    padding: theme.spacing(0.5, 0),
-    color: theme.colors.text.secondary,
-    ...theme.typography.bodySmall
-  })
-});
-
-const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
-  const { originFilters, filters, readOnly, recentFilters, recommendedFilters, drilldownRecommendationsEnabled } = controller.useState();
-  const styles = ui.useStyles2(getStyles$c);
-  let drilldownRecommendationComponent = null;
-  if (drilldownRecommendationsEnabled) {
-    const recentDrilldowns = recentFilters == null ? void 0 : recentFilters.map((filter) => ({
-      label: `${filter.key} ${filter.operator} ${filter.value}`,
-      onClick: () => {
-        var _a;
-        (_a = controller.updateFilters) == null ? void 0 : _a.call(controller, [...filters, filter]);
-      }
-    }));
-    const recommendedDrilldowns = recommendedFilters == null ? void 0 : recommendedFilters.map((filter) => ({
-      label: `${filter.key} ${filter.operator} ${filter.value}`,
-      onClick: () => {
-        var _a;
-        (_a = controller.updateFilters) == null ? void 0 : _a.call(controller, [...filters, filter]);
-      }
-    }));
-    drilldownRecommendationComponent = /* @__PURE__ */ React__default.default.createElement(DrilldownRecommendations, { recentDrilldowns, recommendedDrilldowns });
-  }
-  const focusOnWipInputRef = React.useRef();
-  return /* @__PURE__ */ React__default.default.createElement(
-    "div",
-    {
-      className: css.cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly }),
-      onClick: () => {
-        var _a;
-        (_a = focusOnWipInputRef.current) == null ? void 0 : _a.call(focusOnWipInputRef);
+      className: css.cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly }),
+      onClick: () => {
+        var _a;
+        (_a = focusOnWipInputRef.current) == null ? void 0 : _a.call(focusOnWipInputRef);
       }
     },
     /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "filter", className: styles.filterIcon, size: "lg" }),
-    drilldownRecommendationComponent,
+    drilldownRecommendationsEnabled && valueRecommendations && /* @__PURE__ */ React__default.default.createElement(valueRecommendations.Component, { model: valueRecommendations }),
     originFilters == null ? void 0 : originFilters.map(
       (filter, index) => filter.origin ? /* @__PURE__ */ React__default.default.createElement(
         AdHocFilterPill,
@@ -5858,8 +5925,7 @@ class AdHocFiltersVariableController {
       supportsMultiValueOperators: state.supportsMultiValueOperators,
       onAddCustomValue: state.onAddCustomValue,
       wip: state._wip,
-      recentFilters: state._recentFilters,
-      recommendedFilters: state._recommendedFilters,
+      valueRecommendations: state._valueRecommendations,
       drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled
     };
   }
@@ -5910,6 +5976,163 @@ class AdHocFiltersVariableController {
   }
 }
 
+class AdHocFiltersRecommendations extends SceneObjectBase {
+  constructor(parent) {
+    super({});
+    this._scopedVars = { __sceneObject: wrapInSafeSerializableSceneObject(this) };
+    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);
+      let scopesSubscription;
+      if (scopesVariable instanceof ScopesVariable) {
+        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);
+            }
+          }
+        });
+      }
+      return () => {
+        scopesSubscription == null ? void 0 : scopesSubscription.unsubscribe();
+      };
+    };
+    this._parentVariable = parent;
+    this.addActivationHandler(this._activationHandler);
+  }
+  /**
+   * Get the parent variable
+   */
+  get parent() {
+    return this._parentVariable;
+  }
+  _getStorageKey() {
+    var _a;
+    return getRecentFiltersKey((_a = this._parentVariable.state.datasource) == null ? void 0 : _a.uid);
+  }
+  async _fetchRecommendedDrilldowns() {
+    var _a;
+    const parent = this._parentVariable;
+    const ds = await getDataSource(parent.state.datasource, this._scopedVars);
+    if (!ds || !ds.getRecommendedDrilldowns) {
+      return;
+    }
+    const queries = parent.state.useQueriesAsFilterForOptions ? getQueriesForVariables(parent) : void 0;
+    const timeRange = sceneGraph.getTimeRange(this).state.value;
+    const scopes = sceneGraph.getScopes(this);
+    const filters = [...(_a = parent.state.originFilters) != null ? _a : [], ...parent.state.filters];
+    const enrichedRequest = getEnrichedDataRequest(this);
+    const dashboardUid = enrichedRequest == null ? void 0 : enrichedRequest.dashboardUID;
+    try {
+      const recommendedDrilldowns = await ds.getRecommendedDrilldowns({
+        timeRange,
+        dashboardUid,
+        queries: queries != null ? queries : [],
+        filters,
+        scopes,
+        userId: runtime.config.bootData.user.id
+      });
+      if (recommendedDrilldowns == null ? void 0 : recommendedDrilldowns.filters) {
+        this.setState({ recommendedFilters: recommendedDrilldowns.filters });
+      }
+    } catch (error) {
+      console.error("Failed to fetch recommended drilldowns:", error);
+    }
+  }
+  async _verifyRecentFiltersApplicability(storedFilters) {
+    const parent = this._parentVariable;
+    const queries = parent.state.useQueriesAsFilterForOptions ? getQueriesForVariables(parent) : void 0;
+    const response = await this._getFiltersApplicabilityForQueries(storedFilters, queries != null ? queries : []);
+    if (!response) {
+      this.setState({ recentFilters: storedFilters.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;
+    }).slice(-3);
+    this.setState({ recentFilters: applicableFilters });
+  }
+  async _getFiltersApplicabilityForQueries(filters, queries) {
+    const parent = this._parentVariable;
+    const ds = await getDataSource(parent.state.datasource, this._scopedVars);
+    if (!ds || !ds.getDrilldownsApplicability) {
+      return;
+    }
+    const timeRange = sceneGraph.getTimeRange(this).state.value;
+    return await ds.getDrilldownsApplicability({
+      filters,
+      queries,
+      timeRange,
+      scopes: sceneGraph.getScopes(this),
+      ...getEnrichedFiltersRequest(this)
+    });
+  }
+  /**
+   * 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 = [...allRecentFilters, filter].slice(-10);
+    data.store.set(key, JSON.stringify(updatedStoredFilters));
+    const parent = this._parentVariable;
+    const existingFilter = parent.state.filters.find((f) => f.key === filter.key && !Boolean(f.nonApplicable));
+    if (existingFilter && !Boolean(existingFilter.nonApplicable)) {
+      this.setState({ recentFilters: updatedStoredFilters.slice(-3) });
+    }
+  }
+  /**
+   * Get the current filters from the parent variable
+   */
+  getParentFilters() {
+    return this._parentVariable.state.filters;
+  }
+  /**
+   * Add a filter to the parent variable
+   */
+  addFilterToParent(filter) {
+    const parent = this._parentVariable;
+    parent.updateFilters([...parent.state.filters, filter]);
+  }
+}
+AdHocFiltersRecommendations.Component = AdHocFiltersRecommendationsRenderer;
+function AdHocFiltersRecommendationsRenderer({ model }) {
+  const { recentFilters, recommendedFilters } = model.useState();
+  const { filters } = model.parent.useState();
+  const recentDrilldowns = recentFilters == null ? void 0 : recentFilters.map((filter) => ({
+    label: `${filter.key} ${filter.operator} ${filter.value}`,
+    onClick: () => {
+      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 });
+}
+
 const ORIGIN_FILTERS_KEY = "originFilters";
 const getRecentFiltersKey = (datasourceUid) => `grafana.filters.recent.${datasourceUid != null ? datasourceUid : "default"}`;
 const OPERATORS = [
@@ -5985,21 +6208,15 @@ class AdHocFiltersVariable extends SceneObjectBase {
     this._urlSync = new AdHocFiltersVariableUrlSyncHandler(this);
     this._debouncedVerifyApplicability = lodash.debounce(this._verifyApplicability, 100);
     this._activationHandler = () => {
-      var _a;
       this._debouncedVerifyApplicability();
-      if (this.state.drilldownRecommendationsEnabled) {
-        const json = data.store.get(getRecentFiltersKey((_a = this.state.datasource) == null ? void 0 : _a.uid));
-        const storedFilters = json ? JSON.parse(json) : [];
-        if (storedFilters.length > 0) {
-          this._verifyRecentFiltersApplicability(storedFilters);
-        } else {
-          this.setState({ _recentFilters: [] });
-        }
-        this._fetchRecommendedDrilldowns();
+      if (this.state.drilldownRecommendationsEnabled && !this.state._valueRecommendations) {
+        const valueRecommendations = new AdHocFiltersRecommendations(this);
+        this.setState({ _valueRecommendations: valueRecommendations });
+        valueRecommendations.activate();
       }
       return () => {
-        var _a2;
-        (_a2 = this.state.originFilters) == null ? void 0 : _a2.forEach((filter) => {
+        var _a;
+        (_a = this.state.originFilters) == null ? void 0 : _a.forEach((filter) => {
           if (filter.restorable) {
             this.restoreOriginalFilter(filter);
           }
@@ -6019,34 +6236,6 @@ class AdHocFiltersVariable extends SceneObjectBase {
     });
     this.addActivationHandler(this._activationHandler);
   }
-  async _fetchRecommendedDrilldowns() {
-    var _a;
-    const ds = await this._dataSourceSrv.get(this.state.datasource, this._scopedVars);
-    if (!ds || !ds.getRecommendedDrilldowns) {
-      return;
-    }
-    const queries = this.state.useQueriesAsFilterForOptions ? getQueriesForVariables(this) : void 0;
-    const timeRange = sceneGraph.getTimeRange(this).state.value;
-    const scopes = sceneGraph.getScopes(this);
-    const filters = [...(_a = this.state.originFilters) != null ? _a : [], ...this.state.filters];
-    const enrichedRequest = getEnrichedDataRequest(this);
-    const dashboardUid = enrichedRequest == null ? void 0 : enrichedRequest.dashboardUID;
-    try {
-      const recommendedDrilldowns = await ds.getRecommendedDrilldowns({
-        timeRange,
-        dashboardUid,
-        queries: queries != null ? queries : [],
-        filters,
-        scopes,
-        userId: runtime.config.bootData.user.id
-      });
-      if (recommendedDrilldowns == null ? void 0 : recommendedDrilldowns.filters) {
-        this.setRecommendedFilters(recommendedDrilldowns.filters);
-      }
-    } catch (error) {
-      console.error("Failed to fetch recommended drilldowns:", error);
-    }
-  }
   _updateScopesFilters() {
     var _a, _b;
     const scopes = sceneGraph.getScopes(this);
@@ -6096,10 +6285,10 @@ class AdHocFiltersVariable extends SceneObjectBase {
   }
   async verifyApplicabilityAndStoreRecentFilter(update) {
     await this._verifyApplicability();
-    if (!this.state.drilldownRecommendationsEnabled) {
+    if (!this.state.drilldownRecommendationsEnabled || !this.state._valueRecommendations) {
       return;
     }
-    this.storeRecentFilter(update);
+    this.state._valueRecommendations.storeRecentFilter(update);
   }
   setState(update) {
     var _a, _b;
@@ -6206,39 +6395,12 @@ class AdHocFiltersVariable extends SceneObjectBase {
       return f === filter ? { ...f, ...update } : f;
     });
     this.setState({ filters: updatedFilters });
-    this.storeRecentFilter({ ...filter, ...update });
-  }
-  storeRecentFilter(update) {
-    var _a;
-    if (!this.state.drilldownRecommendationsEnabled) {
-      return;
-    }
-    const key = getRecentFiltersKey((_a = this.state.datasource) == null ? void 0 : _a.uid);
-    const storedFilters = data.store.get(key);
-    const allRecentFilters = storedFilters ? JSON.parse(storedFilters) : [];
-    const updatedStoredFilters = [...allRecentFilters, update].slice(-10);
-    data.store.set(key, JSON.stringify(updatedStoredFilters));
-    const filter = this.state.filters.find((f) => f.key === update.key && !Boolean(f.nonApplicable));
-    if (filter && !Boolean(filter.nonApplicable)) {
-      this.setState({ _recentFilters: updatedStoredFilters.slice(-3) });
-    }
-  }
-  async _verifyRecentFiltersApplicability(storedFilters) {
-    const queries = this.state.useQueriesAsFilterForOptions ? getQueriesForVariables(this) : void 0;
-    const response = await this.getFiltersApplicabilityForQueries(storedFilters, queries != null ? queries : []);
-    if (!response) {
-      this.setState({ _recentFilters: storedFilters.slice(-3) });
-      return;
+    if (this.state.drilldownRecommendationsEnabled && this.state._valueRecommendations) {
+      this.state._valueRecommendations.storeRecentFilter({
+        ...filter,
+        ...update
+      });
     }
-    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;
-    }).slice(-3);
-    this.setState({ _recentFilters: applicableFilters });
   }
   updateToMatchAll(filter) {
     this._updateFilter(filter, {
@@ -6315,11 +6477,6 @@ class AdHocFiltersVariable extends SceneObjectBase {
       });
     }
   }
-  setRecommendedFilters(recommendedFilters) {
-    this.setState({
-      _recommendedFilters: recommendedFilters
-    });
-  }
   async getFiltersApplicabilityForQueries(filters, queries) {
     const ds = await this._dataSourceSrv.get(this.state.datasource, this._scopedVars);
     if (!ds || !ds.getDrilldownsApplicability) {
@@ -6482,64 +6639,237 @@ class AdHocFiltersVariable extends SceneObjectBase {
       description
     }));
   }
-}
-AdHocFiltersVariable.Component = AdHocFiltersVariableRenderer;
-function renderExpression(builder, filters) {
-  var _a;
-  return (builder != null ? builder : renderPrometheusLabelFilters)((_a = filters == null ? void 0 : filters.filter((f) => isFilterApplicable(f))) != null ? _a : []);
-}
-function AdHocFiltersVariableRenderer({ model }) {
-  const { filters, readOnly, addFilterButtonText } = model.useState();
-  const styles = ui.useStyles2(getStyles$b);
-  const controller = React.useMemo(
-    () => model.state.layout === "combobox" ? new AdHocFiltersVariableController(model) : void 0,
-    [model]
-  );
-  if (controller) {
-    return /* @__PURE__ */ React__default.default.createElement(AdHocFiltersComboboxRenderer, { controller });
+}
+AdHocFiltersVariable.Component = AdHocFiltersVariableRenderer;
+function renderExpression(builder, filters) {
+  var _a;
+  return (builder != null ? builder : renderPrometheusLabelFilters)((_a = filters == null ? void 0 : filters.filter((f) => isFilterApplicable(f))) != null ? _a : []);
+}
+function AdHocFiltersVariableRenderer({ model }) {
+  const { filters, readOnly, addFilterButtonText } = model.useState();
+  const styles = ui.useStyles2(getStyles$b);
+  const controller = React.useMemo(
+    () => model.state.layout === "combobox" ? new AdHocFiltersVariableController(model) : void 0,
+    [model]
+  );
+  if (controller) {
+    return /* @__PURE__ */ React__default.default.createElement(AdHocFiltersComboboxRenderer, { controller });
+  }
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, filters.filter((filter) => !filter.hidden).map((filter, index) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, { key: index }, /* @__PURE__ */ React__default.default.createElement(AdHocFilterRenderer, { filter, model }))), !readOnly && /* @__PURE__ */ React__default.default.createElement(AdHocFilterBuilder, { model, key: "'builder", addFilterButtonText }));
+}
+const getStyles$b = (theme) => ({
+  wrapper: css.css({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "flex-end",
+    columnGap: theme.spacing(2),
+    rowGap: theme.spacing(1)
+  })
+});
+function toSelectableValue$1(input) {
+  const { text, value } = input;
+  const result = {
+    // converting text to string due to some edge cases where it can be a number
+    // TODO: remove once https://github.com/grafana/grafana/issues/99021 is closed
+    label: String(text),
+    value: String(value != null ? value : text)
+  };
+  if ("group" in input) {
+    result.group = input.group;
+  }
+  if ("meta" in input) {
+    result.meta = input.meta;
+  }
+  return result;
+}
+function isMatchAllFilter(filter) {
+  return filter.operator === "=~" && filter.value === ".*";
+}
+function isFilterComplete(filter) {
+  return filter.key !== "" && filter.operator !== "" && filter.value !== "";
+}
+function isFilterApplicable(filter) {
+  return !filter.nonApplicable;
+}
+function isMultiValueOperator(operatorValue) {
+  const operator = OPERATORS.find((o) => o.value === operatorValue);
+  if (!operator) {
+    return false;
+  }
+  return Boolean(operator.isMulti);
+}
+
+class GroupByRecommendations extends SceneObjectBase {
+  constructor(parent) {
+    super({});
+    this._scopedVars = { __sceneObject: wrapInSafeSerializableSceneObject(this) };
+    this._activationHandler = () => {
+      const json = data.store.get(this._getStorageKey());
+      const storedGroupings = json ? JSON.parse(json) : [];
+      if (storedGroupings.length > 0) {
+        this._verifyRecentGroupingsApplicability(storedGroupings);
+      } else {
+        this.setState({ recentGrouping: [] });
+      }
+      this._fetchRecommendedDrilldowns();
+      const scopesVariable = sceneGraph.lookupVariable(SCOPES_VARIABLE_NAME, this);
+      let scopesSubscription;
+      if (scopesVariable instanceof ScopesVariable) {
+        scopesSubscription = scopesVariable.subscribeToState((newState, prevState) => {
+          if (newState.scopes !== prevState.scopes) {
+            const json2 = data.store.get(this._getStorageKey());
+            const storedGroupings2 = json2 ? JSON.parse(json2) : [];
+            if (storedGroupings2.length > 0) {
+              this._verifyRecentGroupingsApplicability(storedGroupings2);
+            }
+          }
+        });
+      }
+      return () => {
+        scopesSubscription == null ? void 0 : scopesSubscription.unsubscribe();
+      };
+    };
+    this._parentVariable = parent;
+    this.addActivationHandler(this._activationHandler);
+  }
+  /**
+   * Get the parent variable
+   */
+  get parent() {
+    return this._parentVariable;
+  }
+  _getStorageKey() {
+    var _a;
+    return getRecentGroupingKey((_a = this._parentVariable.state.datasource) == null ? void 0 : _a.uid);
+  }
+  async _fetchRecommendedDrilldowns() {
+    const parent = this._parentVariable;
+    const ds = await getDataSource(parent.state.datasource, this._scopedVars);
+    if (!ds || !ds.getRecommendedDrilldowns) {
+      return;
+    }
+    const queries = getQueriesForVariables(parent);
+    const timeRange = sceneGraph.getTimeRange(this).state.value;
+    const scopes = sceneGraph.getScopes(this);
+    const groupByKeys = Array.isArray(parent.state.value) ? parent.state.value.map((v) => String(v)) : parent.state.value ? [String(parent.state.value)] : [];
+    const enrichedRequest = getEnrichedDataRequest(this);
+    const dashboardUid = enrichedRequest == null ? void 0 : enrichedRequest.dashboardUID;
+    try {
+      const recommendedDrilldowns = await ds.getRecommendedDrilldowns({
+        timeRange,
+        dashboardUid,
+        queries,
+        groupByKeys,
+        scopes,
+        userId: runtime.config.bootData.user.id
+      });
+      if (recommendedDrilldowns == null ? void 0 : recommendedDrilldowns.groupByKeys) {
+        this.setState({
+          recommendedGrouping: recommendedDrilldowns.groupByKeys.map((key) => ({ value: key, text: key }))
+        });
+      }
+    } catch (error) {
+      console.error("Failed to fetch recommended drilldowns:", error);
+    }
+  }
+  async _verifyRecentGroupingsApplicability(storedGroupings) {
+    const queries = getQueriesForVariables(this._parentVariable);
+    const keys = storedGroupings.map((g) => String(g.value));
+    const response = await this._getGroupByApplicabilityForQueries(keys, queries);
+    if (!response) {
+      this.setState({ recentGrouping: storedGroupings.slice(-3) });
+      return;
+    }
+    const applicabilityMap = /* @__PURE__ */ new Map();
+    response.forEach((item) => {
+      applicabilityMap.set(item.key, item.applicable !== false);
+    });
+    const applicableGroupings = storedGroupings.filter((g) => {
+      const isApplicable = applicabilityMap.get(String(g.value));
+      return isApplicable === void 0 || isApplicable === true;
+    }).slice(-3);
+    this.setState({ recentGrouping: applicableGroupings });
+  }
+  async _getGroupByApplicabilityForQueries(value, queries) {
+    const parent = this._parentVariable;
+    const ds = await getDataSource(parent.state.datasource, this._scopedVars);
+    if (!ds || !ds.getDrilldownsApplicability) {
+      return;
+    }
+    const timeRange = sceneGraph.getTimeRange(this).state.value;
+    return await ds.getDrilldownsApplicability({
+      groupByKeys: Array.isArray(value) ? value.map((v) => String(v)) : value ? [String(value)] : [],
+      queries,
+      timeRange,
+      scopes: sceneGraph.getScopes(this),
+      ...getEnrichedFiltersRequest(this)
+    });
+  }
+  /**
+   * Stores recent groupings in localStorage and updates state.
+   * Should be called by the parent variable when a grouping is added/updated.
+   */
+  storeRecentGrouping(applicableValues) {
+    if (applicableValues.length === 0) {
+      return;
+    }
+    const key = this._getStorageKey();
+    const storedGroupings = data.store.get(key);
+    const allRecentGroupings = storedGroupings ? JSON.parse(storedGroupings) : [];
+    const existingWithoutApplicableValues = allRecentGroupings.filter(
+      (grouping) => !applicableValues.includes(String(grouping.value))
+    );
+    const updatedStoredGroupings = [
+      ...existingWithoutApplicableValues,
+      ...applicableValues.map((value) => ({ value, text: value }))
+    ];
+    const limitedStoredGroupings = updatedStoredGroupings.slice(-10);
+    data.store.set(key, JSON.stringify(limitedStoredGroupings));
+    this.setState({ recentGrouping: limitedStoredGroupings.slice(-3) });
   }
-  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, filters.filter((filter) => !filter.hidden).map((filter, index) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, { key: index }, /* @__PURE__ */ React__default.default.createElement(AdHocFilterRenderer, { filter, model }))), !readOnly && /* @__PURE__ */ React__default.default.createElement(AdHocFilterBuilder, { model, key: "'builder", addFilterButtonText }));
-}
-const getStyles$b = (theme) => ({
-  wrapper: css.css({
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: "flex-end",
-    columnGap: theme.spacing(2),
-    rowGap: theme.spacing(1)
-  })
-});
-function toSelectableValue$1(input) {
-  const { text, value } = input;
-  const result = {
-    // converting text to string due to some edge cases where it can be a number
-    // TODO: remove once https://github.com/grafana/grafana/issues/99021 is closed
-    label: String(text),
-    value: String(value != null ? value : text)
-  };
-  if ("group" in input) {
-    result.group = input.group;
+  /**
+   * Get the current values from the parent variable
+   */
+  getParentValues() {
+    const parent = this._parentVariable;
+    const value = lodash.isArray(parent.state.value) ? parent.state.value : [parent.state.value];
+    const text = lodash.isArray(parent.state.text) ? parent.state.text.map(String) : [String(parent.state.text)];
+    return { value, text };
   }
-  if ("meta" in input) {
-    result.meta = input.meta;
+  /**
+   * Add a grouping value to the parent variable
+   */
+  addValueToParent(newValue, newText) {
+    const parent = this._parentVariable;
+    const { value, text } = this.getParentValues();
+    if (value.includes(newValue)) {
+      return;
+    }
+    parent.changeValueTo(
+      [...value.filter((v) => v !== ""), newValue],
+      [...text.filter((t) => t !== ""), newText != null ? newText : String(newValue)],
+      true
+    );
   }
-  return result;
-}
-function isMatchAllFilter(filter) {
-  return filter.operator === "=~" && filter.value === ".*";
-}
-function isFilterComplete(filter) {
-  return filter.key !== "" && filter.operator !== "" && filter.value !== "";
-}
-function isFilterApplicable(filter) {
-  return !filter.nonApplicable;
 }
-function isMultiValueOperator(operatorValue) {
-  const operator = OPERATORS.find((o) => o.value === operatorValue);
-  if (!operator) {
-    return false;
-  }
-  return Boolean(operator.isMulti);
+GroupByRecommendations.Component = GroupByRecommendationsRenderer;
+function GroupByRecommendationsRenderer({ model }) {
+  const { recentGrouping, recommendedGrouping } = model.useState();
+  const recentDrilldowns = recentGrouping == null ? void 0 : recentGrouping.map((groupBy) => ({
+    label: `${groupBy.value}`,
+    onClick: () => {
+      var _a;
+      model.addValueToParent(groupBy.value, (_a = groupBy.text) != null ? _a : String(groupBy.value));
+    }
+  }));
+  const recommendedDrilldowns = recommendedGrouping == null ? void 0 : recommendedGrouping.map((groupBy) => ({
+    label: `${groupBy.value}`,
+    onClick: () => {
+      var _a;
+      model.addValueToParent(groupBy.value, (_a = groupBy.text) != null ? _a : String(groupBy.value));
+    }
+  }));
+  return /* @__PURE__ */ React__default.default.createElement(DrilldownRecommendations, { recentDrilldowns, recommendedDrilldowns });
 }
 
 const getRecentGroupingKey = (datasourceUid) => `grafana.grouping.recent.${datasourceUid != null ? datasourceUid : "default"}`;
@@ -6562,22 +6892,16 @@ class GroupByVariable extends MultiValueVariable {
     this.isLazy = true;
     this._urlSync = new GroupByVariableUrlSyncHandler(this);
     this._activationHandler = () => {
-      var _a;
       this._verifyApplicability();
       if (this.state.defaultValue) {
         if (this.checkIfRestorable(this.state.value)) {
           this.setState({ restorable: true });
         }
       }
-      if (this.state.drilldownRecommendationsEnabled) {
-        const json = data.store.get(getRecentGroupingKey((_a = this.state.datasource) == null ? void 0 : _a.uid));
-        const storedGroupings = json ? JSON.parse(json) : [];
-        if (storedGroupings.length > 0) {
-          this._verifyRecentGroupingsApplicability(storedGroupings);
-        } else {
-          this.setState({ _recentGrouping: [] });
-        }
-        this._fetchRecommendedDrilldowns();
+      if (this.state.drilldownRecommendationsEnabled && !this.state._valueRecommendations) {
+        const valueRecommendations = new GroupByRecommendations(this);
+        this.setState({ _valueRecommendations: valueRecommendations });
+        valueRecommendations.activate();
       }
       return () => {
         if (this.state.defaultValue) {
@@ -6692,53 +7016,6 @@ class GroupByVariable extends MultiValueVariable {
       })
     );
   }
-  async _verifyRecentGroupingsApplicability(storedGroupings) {
-    const queries = getQueriesForVariables(this);
-    const keys = storedGroupings.map((g) => String(g.value));
-    const response = await this.getGroupByApplicabilityForQueries(keys, queries);
-    if (!response) {
-      this.setState({ _recentGrouping: storedGroupings.slice(-3) });
-      return;
-    }
-    const applicabilityMap = /* @__PURE__ */ new Map();
-    response.forEach((item) => {
-      applicabilityMap.set(item.key, item.applicable !== false);
-    });
-    const applicableGroupings = storedGroupings.filter((g) => {
-      const isApplicable = applicabilityMap.get(String(g.value));
-      return isApplicable === void 0 || isApplicable === true;
-    }).slice(-3);
-    this.setState({ _recentGrouping: applicableGroupings });
-  }
-  async _fetchRecommendedDrilldowns() {
-    const ds = await getDataSource(this.state.datasource, {
-      __sceneObject: wrapInSafeSerializableSceneObject(this)
-    });
-    if (!ds || !ds.getRecommendedDrilldowns) {
-      return;
-    }
-    const queries = getQueriesForVariables(this);
-    const timeRange = sceneGraph.getTimeRange(this).state.value;
-    const scopes = sceneGraph.getScopes(this);
-    const groupByKeys = Array.isArray(this.state.value) ? this.state.value.map((v) => String(v)) : this.state.value ? [String(this.state.value)] : [];
-    const enrichedRequest = getEnrichedDataRequest(this);
-    const dashboardUid = enrichedRequest == null ? void 0 : enrichedRequest.dashboardUID;
-    try {
-      const recommendedDrilldowns = await ds.getRecommendedDrilldowns({
-        timeRange,
-        dashboardUid,
-        queries,
-        groupByKeys,
-        scopes,
-        userId: runtime.config.bootData.user.id
-      });
-      if (recommendedDrilldowns == null ? void 0 : recommendedDrilldowns.groupByKeys) {
-        this.setRecommendedGrouping(recommendedDrilldowns.groupByKeys);
-      }
-    } catch (error) {
-      console.error("Failed to fetch recommended drilldowns:", error);
-    }
-  }
   getApplicableKeys() {
     const { value, keysApplicability } = this.state;
     const valueArray = lodash.isArray(value) ? value.map(String) : value ? [String(value)] : [];
@@ -6801,33 +7078,15 @@ class GroupByVariable extends MultiValueVariable {
     this.changeValueTo(this.state.defaultValue.value, this.state.defaultValue.text, true);
   }
   async _verifyApplicabilityAndStoreRecentGrouping() {
-    var _a;
     await this._verifyApplicability();
-    if (!this.state.drilldownRecommendationsEnabled) {
+    if (!this.state.drilldownRecommendationsEnabled || !this.state._valueRecommendations) {
       return;
     }
     const applicableValues = this.getApplicableKeys();
     if (applicableValues.length === 0) {
       return;
     }
-    const key = getRecentGroupingKey((_a = this.state.datasource) == null ? void 0 : _a.uid);
-    const storedGroupings = data.store.get(key);
-    const allRecentGroupings = storedGroupings ? JSON.parse(storedGroupings) : [];
-    const existingWithoutApplicableValues = allRecentGroupings.filter(
-      (grouping) => !applicableValues.includes(String(grouping.value))
-    );
-    const updatedStoredGroupings = [
-      ...existingWithoutApplicableValues,
-      ...applicableValues.map((value) => ({ value, text: value }))
-    ];
-    const limitedStoredGroupings = updatedStoredGroupings.slice(-10);
-    data.store.set(key, JSON.stringify(limitedStoredGroupings));
-    this.setState({ _recentGrouping: limitedStoredGroupings.slice(-3) });
-  }
-  setRecommendedGrouping(recommendedGrouping) {
-    this.setState({
-      _recommendedGrouping: recommendedGrouping.map((key) => ({ value: key, text: key }))
-    });
+    this.state._valueRecommendations.storeRecentGrouping(applicableValues);
   }
   /**
    * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable
@@ -6850,8 +7109,7 @@ function GroupByVariableRenderer({ model }) {
     allowCustomValue = true,
     defaultValue,
     keysApplicability,
-    _recentGrouping,
-    _recommendedGrouping,
+    _valueRecommendations,
     drilldownRecommendationsEnabled
   } = model.useState();
   const styles = ui.useStyles2(getStyles$a);
@@ -7022,38 +7280,10 @@ function GroupByVariableRenderer({ model }) {
       }
     }
   );
-  if (!drilldownRecommendationsEnabled) {
+  if (!drilldownRecommendationsEnabled || !_valueRecommendations) {
     return select;
   }
-  const recentDrilldowns = _recentGrouping == null ? void 0 : _recentGrouping.map((groupBy) => ({
-    label: `${groupBy.value}`,
-    onClick: () => {
-      var _a;
-      if (values.map((x) => x.value).includes(groupBy.value)) {
-        return;
-      }
-      model.changeValueTo(
-        [...values.map((x) => x.value), groupBy.value],
-        [...values.map((x) => x.label), (_a = groupBy.text) != null ? _a : groupBy.value],
-        true
-      );
-    }
-  }));
-  const recommendedDrilldowns = _recommendedGrouping == null ? void 0 : _recommendedGrouping.map((groupBy) => ({
-    label: `${groupBy.value}`,
-    onClick: () => {
-      var _a;
-      if (values.map((x) => x.value).includes(groupBy.value)) {
-        return;
-      }
-      model.changeValueTo(
-        [...values.map((x) => x.value), groupBy.value],
-        [...values.map((x) => x.label), (_a = groupBy.text) != null ? _a : groupBy.value],
-        true
-      );
-    }
-  }));
-  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.recommendations }, /* @__PURE__ */ React__default.default.createElement(DrilldownRecommendations, { recentDrilldowns, recommendedDrilldowns })), select);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.recommendations }, /* @__PURE__ */ React__default.default.createElement(_valueRecommendations.Component, { model: _valueRecommendations })), select);
 }
 const filterNoOp = () => true;
 function WideMenu(props) {
@@ -10306,91 +10536,6 @@ function containsSearchFilter(query) {
   return str.indexOf(SEARCH_FILTER_VARIABLE) > -1;
 }
 
-class ScopesVariable extends SceneObjectBase {
-  constructor(state) {
-    super({
-      skipUrlSync: true,
-      loading: true,
-      scopes: [],
-      ...state,
-      type: "system",
-      name: SCOPES_VARIABLE_NAME,
-      hide: schema.VariableHide.hideVariable
-    });
-    this._renderBeforeActivation = true;
-    // Special options that enables variables to be hidden but still render to access react contexts
-    this.UNSAFE_renderAsHidden = true;
-  }
-  /**
-   * Temporary simple implementation to stringify the scopes.
-   */
-  getValue() {
-    var _a;
-    const scopes = (_a = this.state.scopes) != null ? _a : [];
-    return new ScopesVariableFormatter(scopes.map((scope) => scope.metadata.name));
-  }
-  getScopes() {
-    return this.state.scopes;
-  }
-  /**
-   * This method is used to keep the context up to date with the scopes context received from React
-   * 1) Subscribes to ScopesContext state changes and synchronizes it with the variable state
-   * 2) Handles enable / disabling of scopes based on variable enable option.
-   */
-  setContext(context) {
-    if (!context) {
-      return;
-    }
-    this._context = context;
-    const oldState = context.state;
-    if (this.state.enable != null) {
-      context.setEnabled(this.state.enable);
-    }
-    const sub = context.stateObservable.subscribe((state) => {
-      this.updateStateFromContext(state);
-    });
-    return () => {
-      sub.unsubscribe();
-      if (this.state.enable != null) {
-        context.setEnabled(oldState.enabled);
-      }
-    };
-  }
-  updateStateFromContext(state) {
-    const loading = state.value.length === 0 ? false : state.loading;
-    const oldScopes = this.state.scopes.map((scope) => scope.metadata.name);
-    const newScopes = state.value.map((scope) => scope.metadata.name);
-    const scopesHaveChanged = !lodash.isEqual(oldScopes, newScopes);
-    if (!loading && (scopesHaveChanged || newScopes.length === 0)) {
-      const queryController = getQueryController(this);
-      queryController == null ? void 0 : queryController.startProfile(SCOPES_CHANGED_INTERACTION);
-      this.setState({ scopes: state.value, loading });
-      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
-    } else {
-      this.setState({ loading });
-    }
-  }
-}
-ScopesVariable.Component = ScopesVariableRenderer;
-function ScopesVariableRenderer({ model }) {
-  const context = React.useContext(runtime.ScopesContext);
-  React.useEffect(() => {
-    return model.setContext(context);
-  }, [context, model]);
-  return null;
-}
-class ScopesVariableFormatter {
-  constructor(_value) {
-    this._value = _value;
-  }
-  formatter(formatNameOrFn) {
-    if (formatNameOrFn === schema.VariableFormatID.QueryParam) {
-      return this._value.map((scope) => `scope=${encodeURIComponent(scope)}`).join("&");
-    }
-    return this._value.join(", ");
-  }
-}
-
 function getVariables(sceneObject) {
   var _a;
   return (_a = getClosest(sceneObject, (s) => s.state.$variables)) != null ? _a : EmptyVariableSet;