@grafana/scenes 6.50.0--canary.1316.20252812955.0 → 6.50.0--canary.1312.20268893264.0

package/dist/index.js

@@ -3458,7 +3458,7 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
 function DefaultGroupByCustomIndicatorContainer(props) {
   const { model } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$j(theme);
+  const styles = getStyles$l(theme);
   const inputStyles = ui.getInputStyles({ theme, invalid: false });
   const value = lodash.isArray(model.state.value) ? model.state.value : model.state.value ? [model.state.value] : [];
   let buttons = [];
@@ -3540,7 +3540,7 @@ function DefaultGroupByCustomIndicatorContainer(props) {
     buttons
   );
 }
-const getStyles$j = (theme) => ({
+const getStyles$l = (theme) => ({
   clearIcon: css.css({
     color: theme.colors.action.disabledText,
     cursor: "pointer",
@@ -3614,6 +3614,469 @@ 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(", ");
+  }
+}
+
+const getRecentFiltersKey = (datasourceUid) => `grafana.filters.recent.${datasourceUid != null ? datasourceUid : "default"}`;
+class AdHocFiltersRecommendations {
+  constructor(adHocFilter, scopedVars) {
+    this.adHocFilter = adHocFilter;
+    this._scopedVars = scopedVars;
+  }
+  get recentFilters() {
+    return this._recentFilters;
+  }
+  get recommendedFilters() {
+    return this._recommendedFilters;
+  }
+  init() {
+    const json = data.store.get(this._getStorageKey());
+    const storedFilters = json ? JSON.parse(json) : [];
+    if (storedFilters.length > 0) {
+      this._verifyRecentFiltersApplicability(storedFilters);
+    } else {
+      this._recentFilters = [];
+    }
+    this._fetchRecommendedDrilldowns();
+    const scopesVariable = sceneGraph.lookupVariable(SCOPES_VARIABLE_NAME, this.adHocFilter);
+    if (scopesVariable instanceof ScopesVariable) {
+      this.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();
+        }
+      });
+    }
+  }
+  deinit() {
+    var _a;
+    (_a = this.scopesSubscription) == null ? void 0 : _a.unsubscribe();
+  }
+  _getStorageKey() {
+    var _a;
+    return getRecentFiltersKey((_a = this.adHocFilter.state.datasource) == null ? void 0 : _a.uid);
+  }
+  async _fetchRecommendedDrilldowns() {
+    var _a;
+    const adhoc = this.adHocFilter;
+    const ds = await getDataSource(adhoc.state.datasource, this._scopedVars);
+    if (!ds || !ds.getRecommendedDrilldowns) {
+      return;
+    }
+    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];
+    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._recommendedFilters = recommendedDrilldowns.filters;
+      }
+    } catch (error) {
+      console.error("Failed to fetch recommended drilldowns:", error);
+    }
+  }
+  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) {
+      this._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._recentFilters = applicableFilters;
+  }
+  /**
+   * 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 adhoc = this.adHocFilter;
+    const existingFilter = adhoc.state.filters.find((f) => f.key === filter.key && !Boolean(f.nonApplicable));
+    if (existingFilter && !Boolean(existingFilter.nonApplicable)) {
+      this._recentFilters = updatedStoredFilters.slice(-3);
+    }
+  }
+  addFilterToParent(filter) {
+    this.adHocFilter.updateFilters([...this.adHocFilter.state.filters, filter]);
+  }
+  render() {
+    var _a, _b;
+    const { filters } = this.adHocFilter.useState();
+    const recentDrilldowns = (_a = this.recentFilters) == null ? void 0 : _a.map((filter) => {
+      var _a2;
+      return {
+        label: `${filter.key} ${filter.operator} ${((_a2 = filter.valueLabels) == null ? void 0 : _a2.length) ? filter.valueLabels.join(", ") : filter.value}`,
+        onClick: () => {
+          const exists = filters.some((f) => f.key === filter.key && f.value === filter.value);
+          if (!exists) {
+            this.addFilterToParent(filter);
+          }
+        }
+      };
+    });
+    const recommendedDrilldowns = (_b = this.recommendedFilters) == null ? void 0 : _b.map((filter) => {
+      var _a2;
+      return {
+        label: `${filter.key} ${filter.operator} ${((_a2 = filter.valueLabels) == null ? void 0 : _a2.length) ? filter.valueLabels.join(", ") : filter.value}`,
+        onClick: () => {
+          const exists = filters.some((f) => f.key === filter.key && f.value === filter.value);
+          if (!exists) {
+            this.addFilterToParent(filter);
+          }
+        }
+      };
+    });
+    return /* @__PURE__ */ React__default.default.createElement(DrilldownRecommendations, { recentDrilldowns, recommendedDrilldowns });
+  }
+}
+
+const getRecentGroupingKey = (datasourceUid) => `grafana.grouping.recent.${datasourceUid != null ? datasourceUid : "default"}`;
+class GroupByRecommendations {
+  constructor(groupByVariable, scopedVars) {
+    this.groupBy = groupByVariable;
+    this._scopedVars = scopedVars;
+  }
+  get recentGrouping() {
+    return this._recentGrouping;
+  }
+  get recommendedGrouping() {
+    return this._recommendedGrouping;
+  }
+  init() {
+    const json = data.store.get(this._getStorageKey());
+    const storedGroupings = json ? JSON.parse(json) : [];
+    if (storedGroupings.length > 0) {
+      this._verifyRecentGroupingsApplicability(storedGroupings);
+    } else {
+      this._recentGrouping = [];
+    }
+    this._fetchRecommendedDrilldowns();
+    const scopesVariable = sceneGraph.lookupVariable(SCOPES_VARIABLE_NAME, this.groupBy);
+    if (scopesVariable instanceof ScopesVariable) {
+      this.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);
+          }
+          this._fetchRecommendedDrilldowns();
+        }
+      });
+    }
+  }
+  deinit() {
+    var _a;
+    (_a = this.scopesSubscription) == null ? void 0 : _a.unsubscribe();
+  }
+  _getStorageKey() {
+    var _a;
+    return getRecentGroupingKey((_a = this.groupBy.state.datasource) == null ? void 0 : _a.uid);
+  }
+  async _fetchRecommendedDrilldowns() {
+    const ds = await getDataSource(this.groupBy.state.datasource, this._scopedVars);
+    if (!ds || !ds.getRecommendedDrilldowns) {
+      return;
+    }
+    const queries = getQueriesForVariables(this.groupBy);
+    const timeRange = sceneGraph.getTimeRange(this.groupBy).state.value;
+    const scopes = sceneGraph.getScopes(this.groupBy);
+    const groupByKeys = Array.isArray(this.groupBy.state.value) ? this.groupBy.state.value.map((v) => String(v)) : this.groupBy.state.value ? [String(this.groupBy.state.value)] : [];
+    const enrichedRequest = getEnrichedDataRequest(this.groupBy);
+    const dashboardUid = enrichedRequest == null ? void 0 : enrichedRequest.dashboardUID;
+    try {
+      const recommendedDrilldowns = await ds.getRecommendedDrilldowns({
+        timeRange,
+        dashboardUid,
+        queries,
+        groupByKeys,
+        scopes
+      });
+      if (recommendedDrilldowns == null ? void 0 : recommendedDrilldowns.groupByKeys) {
+        this._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.groupBy);
+    const keys = storedGroupings.map((g) => String(g.value));
+    const response = await this.groupBy.getGroupByApplicabilityForQueries(keys, queries);
+    if (!response) {
+      this._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._recentGrouping = applicableGroupings;
+  }
+  /**
+   * 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._recentGrouping = limitedStoredGroupings.slice(-3);
+  }
+  /**
+   * Add a grouping value to the parent variable
+   */
+  addValueToParent(newValue, newText) {
+    const value = lodash.isArray(this.groupBy.state.value) ? this.groupBy.state.value : [this.groupBy.state.value];
+    const text = lodash.isArray(this.groupBy.state.text) ? this.groupBy.state.text.map(String) : [String(this.groupBy.state.text)];
+    if (value.includes(newValue)) {
+      return;
+    }
+    this.groupBy.changeValueTo(
+      [...value.filter((v) => v !== ""), newValue],
+      [...text.filter((t) => t !== ""), newText != null ? newText : String(newValue)],
+      true
+    );
+  }
+  render() {
+    var _a, _b;
+    const recentDrilldowns = (_a = this.recentGrouping) == null ? void 0 : _a.map((groupBy) => ({
+      label: `${groupBy.value}`,
+      onClick: () => {
+        var _a2;
+        this.addValueToParent(groupBy.value, (_a2 = groupBy.text) != null ? _a2 : String(groupBy.value));
+      }
+    }));
+    const recommendedDrilldowns = (_b = this.recommendedGrouping) == null ? void 0 : _b.map((groupBy) => ({
+      label: `${groupBy.value}`,
+      onClick: () => {
+        var _a2;
+        this.addValueToParent(groupBy.value, (_a2 = groupBy.text) != null ? _a2 : String(groupBy.value));
+      }
+    }));
+    return /* @__PURE__ */ React__default.default.createElement(DrilldownRecommendations, { recentDrilldowns, recommendedDrilldowns });
+  }
+}
+
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
     super({
@@ -3632,6 +4095,7 @@ class GroupByVariable extends MultiValueVariable {
     });
     this.isLazy = true;
     this._urlSync = new GroupByVariableUrlSyncHandler(this);
+    this._scopedVars = { __sceneObject: wrapInSafeSerializableSceneObject(this) };
     this._activationHandler = () => {
       this._verifyApplicability();
       if (this.state.defaultValue) {
@@ -3639,11 +4103,18 @@ class GroupByVariable extends MultiValueVariable {
           this.setState({ restorable: true });
         }
       }
+      if (this.state.drilldownRecommendationsEnabled && !this.state._valueRecommendations) {
+        const valueRecommendations = new GroupByRecommendations(this, this._scopedVars);
+        this.setState({ _valueRecommendations: valueRecommendations });
+        valueRecommendations.init();
+      }
       return () => {
+        var _a;
         if (this.state.defaultValue) {
           this.restoreDefaultValues();
         }
         this.setState({ applicabilityEnabled: false });
+        (_a = this.state._valueRecommendations) == null ? void 0 : _a.deinit();
       };
     };
     /**
@@ -3724,11 +4195,7 @@ class GroupByVariable extends MultiValueVariable {
       );
     }
     this.setState({ loading: true, error: null });
-    return rxjs.from(
-      getDataSource(this.state.datasource, {
-        __sceneObject: wrapInSafeSerializableSceneObject(this)
-      })
-    ).pipe(
+    return rxjs.from(getDataSource(this.state.datasource, this._scopedVars)).pipe(
       rxjs.mergeMap((ds) => {
         return rxjs.from(this._getKeys(ds)).pipe(
           rxjs.tap((response) => {
@@ -3754,7 +4221,7 @@ class GroupByVariable extends MultiValueVariable {
   }
   getApplicableKeys() {
     const { value, keysApplicability } = this.state;
-    const valueArray = lodash.isArray(value) ? value : value ? [value] : [];
+    const valueArray = lodash.isArray(value) ? value.map(String) : value ? [String(value)] : [];
     if (!keysApplicability || keysApplicability.length === 0) {
       return valueArray;
     }
@@ -3765,9 +4232,7 @@ class GroupByVariable extends MultiValueVariable {
     return applicableValues;
   }
   async getGroupByApplicabilityForQueries(value, queries) {
-    const ds = await getDataSource(this.state.datasource, {
-      __sceneObject: wrapInSafeSerializableSceneObject(this)
-    });
+    const ds = await getDataSource(this.state.datasource, this._scopedVars);
     if (!ds.getDrilldownsApplicability) {
       return;
     }
@@ -3813,6 +4278,17 @@ class GroupByVariable extends MultiValueVariable {
     }
     this.changeValueTo(this.state.defaultValue.value, this.state.defaultValue.text, true);
   }
+  async _verifyApplicabilityAndStoreRecentGrouping() {
+    await this._verifyApplicability();
+    if (!this.state.drilldownRecommendationsEnabled || !this.state._valueRecommendations) {
+      return;
+    }
+    const applicableValues = this.getApplicableKeys();
+    if (applicableValues.length === 0) {
+      return;
+    }
+    this.state._valueRecommendations.storeRecentGrouping(applicableValues);
+  }
   /**
    * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable
    */
@@ -3833,8 +4309,11 @@ function GroupByVariableRenderer({ model }) {
     includeAll,
     allowCustomValue = true,
     defaultValue,
-    keysApplicability
+    keysApplicability,
+    _valueRecommendations,
+    drilldownRecommendationsEnabled
   } = model.useState();
+  const styles = ui.useStyles2(getStyles$j);
   const values = React.useMemo(() => {
     const arrayValue = lodash.isArray(value) ? value : [value];
     const arrayText = lodash.isArray(text) ? text : [text];
@@ -3873,7 +4352,7 @@ function GroupByVariableRenderer({ model }) {
     () => handleOptionGroups(optionSearcher(inputValue).map(toSelectableValue$1)),
     [optionSearcher, inputValue]
   );
-  return isMulti ? /* @__PURE__ */ React__default.default.createElement(
+  const select = isMulti ? /* @__PURE__ */ React__default.default.createElement(
     ui.MultiSelect,
     {
       "aria-label": i18n.t(
@@ -3887,6 +4366,7 @@ function GroupByVariableRenderer({ model }) {
         "Group by label"
       ),
       width: "auto",
+      className: css.cx(drilldownRecommendationsEnabled && styles.selectStylesInWrapper),
       allowCustomValue,
       inputValue,
       value: uncommittedValue,
@@ -3920,7 +4400,7 @@ function GroupByVariableRenderer({ model }) {
         if (restorable !== model.state.restorable) {
           model.setState({ restorable });
         }
-        model._verifyApplicability();
+        model._verifyApplicabilityAndStoreRecentGrouping();
       },
       onChange: (newValue, action) => {
         if (action.action === "clear" && noValueOnClear) {
@@ -3956,6 +4436,7 @@ function GroupByVariableRenderer({ model }) {
         "Group by label"
       ),
       width: "auto",
+      className: css.cx(drilldownRecommendationsEnabled && styles.selectStylesInWrapper),
       inputValue,
       value: uncommittedValue && uncommittedValue.length > 0 ? uncommittedValue : null,
       allowCustomValue,
@@ -4000,6 +4481,10 @@ function GroupByVariableRenderer({ model }) {
       }
     }
   );
+  if (!drilldownRecommendationsEnabled || !_valueRecommendations) {
+    return select;
+  }
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.recommendations }, _valueRecommendations.render()), select);
 }
 const filterNoOp$1 = () => true;
 function WideMenu(props) {
@@ -4016,6 +4501,31 @@ function toSelectableValue$1(input) {
   }
   return result;
 }
+const getStyles$j = (theme) => ({
+  wrapper: css.css({
+    display: "flex"
+  }),
+  selectStylesInWrapper: css.css({
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    border: `1px solid ${theme.colors.border.strong}`,
+    borderLeft: "none"
+  }),
+  recommendations: css.css({
+    display: "flex",
+    alignItems: "center",
+    paddingInline: theme.spacing(0.5),
+    borderTop: `1px solid ${theme.colors.border.strong}`,
+    borderBottom: `1px solid ${theme.colors.border.strong}`,
+    backgroundColor: theme.components.input.background,
+    "& button": {
+      borderRadius: 0,
+      height: "100%",
+      margin: 0,
+      paddingInline: theme.spacing(0.5)
+    }
+  })
+});
 
 function VizPanelSeriesLimit({ data, showAll, seriesLimit, onShowAllSeries }) {
   const styles = ui.useStyles2(getStyles$i);
@@ -6661,9 +7171,6 @@ const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlways
     }
     return ((_a = filter.valueLabels) == null ? void 0 : _a[0]) || "";
   }
-  if (isAlwaysWip && filterInputType === "operator") {
-    return "";
-  }
   return filter[filterInputType] && !isAlwaysWip ? `${filter[filterInputType]}` : inputPlaceholder || INPUT_PLACEHOLDER_DEFAULT;
 };
 const populateInputValueOnInputTypeSwitch = ({
@@ -6852,8 +7359,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
   isAlwaysWip,
   handleChangeViewMode,
   focusOnWipInputRef,
-  populateInputOnEdit,
-  onInputClick
+  populateInputOnEdit
 }, parentRef) {
   var _a, _b, _c;
   const [open, setOpen] = React.useState(false);
@@ -7336,7 +7842,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       className: css.cx(styles.inputStyle, { [styles.loadingInputPadding]: !optionsLoading }),
       onClick: (event) => {
         event.stopPropagation();
-        onInputClick == null ? void 0 : onInputClick();
         setOpen(true);
       },
       onFocus: () => {
@@ -7464,6 +7969,9 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
     {
       onApply: () => {
         handleMultiValueFilterCommit(controller, filter, filterMultiValues);
+        handleResetWip();
+        handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+        setOpen(false);
       },
       floatingElement: refs.floating.current,
       maxOptionWidth,
@@ -7795,102 +8303,53 @@ const getStyles$a = (theme) => ({
   ...getNonApplicablePillStyles(theme)
 });
 
-const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ controller, onInputClick }, parentRef) {
+const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ controller }, parentRef) {
   const { wip } = controller.useState();
   React.useLayoutEffect(() => {
     if (!wip) {
       controller.addWip();
     }
   }, [wip]);
-  return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { controller, filter: wip, isAlwaysWip: true, ref: parentRef, onInputClick });
+  return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { controller, filter: wip, isAlwaysWip: true, ref: parentRef });
 });
 
-const MAX_VISIBLE_FILTERS = 4;
 const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
-  var _a;
-  const { originFilters, filters, readOnly, collapsible } = controller.useState();
+  const { originFilters, filters, readOnly, valueRecommendations, drilldownRecommendationsEnabled } = controller.useState();
   const styles = ui.useStyles2(getStyles$9);
-  const theme = ui.useTheme2();
-  const [collapsed, setCollapsed] = React.useState(true);
-  const [wrapperRef, { height: wrapperHeight }] = reactUse.useMeasure();
-  const clearAll = () => {
-    controller.clearAll();
-  };
   const focusOnWipInputRef = React.useRef();
-  const singleLineThreshold = theme.spacing.gridSize * 5;
-  const isMultiLine = collapsible && wrapperHeight > singleLineThreshold;
-  const handleCollapseToggle = (event) => {
-    event.stopPropagation();
-    if (collapsible) {
-      setCollapsed(true);
-    }
-  };
-  const handleExpand = () => {
-    var _a2, _b;
-    if (!collapsible) {
-      (_a2 = focusOnWipInputRef.current) == null ? void 0 : _a2.call(focusOnWipInputRef);
-      return;
-    }
-    if (collapsed) {
-      setCollapsed(false);
-    } else {
-      (_b = focusOnWipInputRef.current) == null ? void 0 : _b.call(focusOnWipInputRef);
-    }
-  };
-  const visibleOriginFilters = (_a = originFilters == null ? void 0 : originFilters.filter((f) => f.origin)) != null ? _a : [];
-  const visibleFilters = filters.filter((f) => !f.hidden);
-  const allFilters = [...visibleOriginFilters, ...visibleFilters];
-  const totalFiltersCount = allFilters.length;
-  const shouldCollapse = collapsible && collapsed && totalFiltersCount > 0;
-  const filtersToRender = shouldCollapse ? allFilters.slice(0, MAX_VISIBLE_FILTERS) : allFilters;
-  React.useEffect(() => {
-    if (collapsible && totalFiltersCount === 0 && collapsed) {
-      setCollapsed(false);
-    }
-  }, [collapsible, totalFiltersCount, collapsed]);
-  const showCollapseButton = collapsible && isMultiLine && !collapsed;
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
     {
-      ref: wrapperRef,
-      className: css.cx(styles.comboboxWrapper, {
-        [styles.comboboxFocusOutline]: !readOnly,
-        [styles.collapsed]: shouldCollapse,
-        [styles.clickableCollapsed]: shouldCollapse
-      }),
-      onClick: handleExpand
+      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" }),
-    filtersToRender.map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
+    drilldownRecommendationsEnabled && valueRecommendations && valueRecommendations.render(),
+    originFilters == null ? void 0 : originFilters.map(
+      (filter, index) => filter.origin ? /* @__PURE__ */ React__default.default.createElement(
+        AdHocFilterPill,
+        {
+          key: `${index}-${filter.key}`,
+          filter,
+          controller,
+          focusOnWipInputRef: focusOnWipInputRef.current
+        }
+      ) : null
+    ),
+    filters.filter((filter) => !filter.hidden).map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
       AdHocFilterPill,
       {
-        key: `${filter.origin ? "origin-" : ""}${index}-${filter.key}`,
+        key: `${index}-${filter.key}`,
         filter,
         controller,
         readOnly: readOnly || filter.readOnly,
         focusOnWipInputRef: focusOnWipInputRef.current
       }
     )),
-    shouldCollapse && totalFiltersCount > MAX_VISIBLE_FILTERS && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.moreIndicator }, i18n.t("grafana-scenes.variables.adhoc-filters-combobox-renderer.more-filters", "+{{count}} more", {
-      count: totalFiltersCount - MAX_VISIBLE_FILTERS
-    })),
-    !readOnly && !shouldCollapse ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { controller, ref: focusOnWipInputRef }) : null,
-    showCollapseButton && /* @__PURE__ */ React__default.default.createElement(
-      ui.Button,
-      {
-        className: styles.collapseButton,
-        fill: "text",
-        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" })
-    ),
-    /* @__PURE__ */ React__default.default.createElement("div", { className: styles.clearAllButton }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "times", size: "md", onClick: clearAll }))
+    !readOnly ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { controller, ref: focusOnWipInputRef }) : null
   );
 });
 const getStyles$9 = (theme) => ({
@@ -7922,42 +8381,6 @@ const getStyles$9 = (theme) => ({
   filterIcon: css.css({
     color: theme.colors.text.secondary,
     alignSelf: "center"
-  }),
-  collapsed: css.css({
-    flexWrap: "nowrap",
-    overflow: "hidden"
-  }),
-  clickableCollapsed: css.css({
-    cursor: "pointer",
-    "&:hover": {
-      borderColor: theme.colors.border.medium
-    }
-  }),
-  moreIndicator: css.css({
-    color: theme.colors.text.secondary,
-    whiteSpace: "nowrap",
-    ...theme.typography.bodySmall,
-    fontStyle: "italic",
-    marginLeft: theme.spacing(0.5)
-  }),
-  collapseButton: css.css({
-    marginLeft: "auto",
-    color: theme.colors.text.secondary,
-    padding: 0,
-    fontSize: theme.typography.bodySmall.fontSize,
-    border: "none",
-    "&:hover": {
-      background: "transparent",
-      color: theme.colors.text.primary
-    }
-  }),
-  clearAllButton: css.css({
-    fontSize: theme.typography.bodySmall.fontSize,
-    cursor: "pointer",
-    color: theme.colors.text.secondary,
-    "&:hover": {
-      color: theme.colors.text.primary
-    }
   })
 });
 
@@ -8062,7 +8485,8 @@ class AdHocFiltersVariableController {
       supportsMultiValueOperators: state.supportsMultiValueOperators,
       onAddCustomValue: state.onAddCustomValue,
       wip: state._wip,
-      collapsible: state.collapsible
+      valueRecommendations: state._valueRecommendations,
+      drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled
     };
   }
   async getKeys(currentKey) {
@@ -8077,6 +8501,9 @@ class AdHocFiltersVariableController {
   updateFilter(filter, update) {
     this.model._updateFilter(filter, update);
   }
+  updateFilters(filters, options) {
+    this.model.updateFilters(filters, options);
+  }
   updateToMatchAll(filter) {
     this.model.updateToMatchAll(filter);
   }
@@ -8095,9 +8522,6 @@ class AdHocFiltersVariableController {
   restoreOriginalFilter(filter) {
     this.model.restoreOriginalFilter(filter);
   }
-  clearAll() {
-    this.model.clearAll();
-  }
   startProfile(name) {
     const queryController = getQueryController(this.model);
     queryController == null ? void 0 : queryController.startProfile(name);
@@ -8187,14 +8611,20 @@ class AdHocFiltersVariable extends SceneObjectBase {
     this._debouncedVerifyApplicability = lodash.debounce(this._verifyApplicability, 100);
     this._activationHandler = () => {
       this._debouncedVerifyApplicability();
+      if (this.state.drilldownRecommendationsEnabled && !this.state._valueRecommendations) {
+        const valueRecommendations = new AdHocFiltersRecommendations(this, this._scopedVars);
+        this.setState({ _valueRecommendations: valueRecommendations });
+        valueRecommendations.init();
+      }
       return () => {
-        var _a;
+        var _a, _b;
         (_a = this.state.originFilters) == null ? void 0 : _a.forEach((filter) => {
           if (filter.restorable) {
             this.restoreOriginalFilter(filter);
           }
         });
         this.setState({ applicabilityEnabled: false });
+        (_b = this.state._valueRecommendations) == null ? void 0 : _b.deinit();
       };
     };
     if (this.state.applyMode === "auto") {
@@ -8256,6 +8686,13 @@ class AdHocFiltersVariable extends SceneObjectBase {
     this._prevScopes = scopes;
     this._debouncedVerifyApplicability();
   }
+  async verifyApplicabilityAndStoreRecentFilter(update) {
+    await this._verifyApplicability();
+    if (!this.state.drilldownRecommendationsEnabled || !this.state._valueRecommendations) {
+      return;
+    }
+    this.state._valueRecommendations.storeRecentFilter(update);
+  }
   setState(update) {
     var _a, _b;
     let filterExpressionChanged = false;
@@ -8314,18 +8751,6 @@ class AdHocFiltersVariable extends SceneObjectBase {
       this._updateFilter(filter, original);
     }
   }
-  /**
-   * Clear all user-added filters and restore origin filters to their original values.
-   */
-  clearAll() {
-    var _a;
-    (_a = this.state.originFilters) == null ? void 0 : _a.forEach((filter) => {
-      if (filter.restorable) {
-        this.restoreOriginalFilter(filter);
-      }
-    });
-    this.setState({ filters: [] });
-  }
   getValue(fieldPath) {
     if (fieldPath === ORIGIN_FILTERS_KEY) {
       const originFilters = this.state.originFilters;
@@ -8359,8 +8784,11 @@ class AdHocFiltersVariable extends SceneObjectBase {
     }
     if (filter === _wip) {
       if ("value" in update && update["value"] !== "") {
-        this.setState({ filters: [...filters, { ..._wip, ...update }], _wip: void 0 });
-        this._debouncedVerifyApplicability();
+        this.setState({
+          filters: [...filters, { ..._wip, ...update }],
+          _wip: void 0
+        });
+        this.verifyApplicabilityAndStoreRecentFilter({ ..._wip, ...update });
       } else {
         this.setState({ _wip: { ...filter, ...update } });
       }
@@ -8370,6 +8798,12 @@ class AdHocFiltersVariable extends SceneObjectBase {
       return f === filter ? { ...f, ...update } : f;
     });
     this.setState({ filters: updatedFilters });
+    if (this.state.drilldownRecommendationsEnabled && this.state._valueRecommendations) {
+      this.state._valueRecommendations.storeRecentFilter({
+        ...filter,
+        ...update
+      });
+    }
   }
   updateToMatchAll(filter) {
     this._updateFilter(filter, {
@@ -8560,11 +8994,12 @@ class AdHocFiltersVariable extends SceneObjectBase {
     let scopes = sceneGraph.getScopes(this);
     if (filter.origin === "scope") {
       scopes = scopes == null ? void 0 : scopes.map((scope) => {
+        var _a2;
         return {
           ...scope,
           spec: {
             ...scope.spec,
-            filters: scope.spec.filters.filter((f) => f.key !== filter.key)
+            filters: (_a2 = scope.spec.filters) == null ? void 0 : _a2.filter((f) => f.key !== filter.key)
           }
         };
       });
@@ -10053,91 +10488,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;
@@ -16454,7 +16804,7 @@ function __variableDynamicImportRuntime0__(path) {
   switch (path) {
     case '../locales/cs-CZ/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DPdlSPjz.js'); });
     case '../locales/de-DE/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-BHIE4ld0.js'); });
-    case '../locales/en-US/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CwGWCTcQ.js'); });
+    case '../locales/en-US/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-C9F_2hih.js'); });
     case '../locales/es-ES/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-D4tq59Dc.js'); });
     case '../locales/fr-FR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-Ce77KCbO.js'); });
     case '../locales/hu-HU/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DMYCnFop.js'); });
@@ -16599,6 +16949,7 @@ exports.dataLayers = index;
 exports.escapeUrlPipeDelimiters = escapeUrlPipeDelimiters;
 exports.formatRegistry = formatRegistry;
 exports.getExploreURL = getExploreURL;
+exports.getQueriesForVariables = getQueriesForVariables;
 exports.isCustomVariableValue = isCustomVariableValue;
 exports.isDataLayer = isDataLayer;
 exports.isDataRequestEnricher = isDataRequestEnricher;