@grafana/scenes 6.50.0--canary.1312.20243507649.0 → 6.50.0--canary.1316.20252812955.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$l(theme);
+  const styles = getStyles$j(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$l = (theme) => ({
+const getStyles$j = (theme) => ({
   clearIcon: css.css({
     color: theme.colors.action.disabledText,
     cursor: "pointer",
@@ -3614,518 +3614,6 @@ 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 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 getRecentGroupingKey = (datasourceUid) => `grafana.grouping.recent.${datasourceUid != null ? datasourceUid : "default"}`;
-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) });
-  }
-  /**
-   * 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 };
-  }
-  /**
-   * 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
-    );
-  }
-}
-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 });
-}
-
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
     super({
@@ -4151,11 +3639,6 @@ class GroupByVariable extends MultiValueVariable {
           this.setState({ restorable: true });
         }
       }
-      if (this.state.drilldownRecommendationsEnabled && !this.state._valueRecommendations) {
-        const valueRecommendations = new GroupByRecommendations(this);
-        this.setState({ _valueRecommendations: valueRecommendations });
-        valueRecommendations.activate();
-      }
       return () => {
         if (this.state.defaultValue) {
           this.restoreDefaultValues();
@@ -4271,7 +3754,7 @@ class GroupByVariable extends MultiValueVariable {
   }
   getApplicableKeys() {
     const { value, keysApplicability } = this.state;
-    const valueArray = lodash.isArray(value) ? value.map(String) : value ? [String(value)] : [];
+    const valueArray = lodash.isArray(value) ? value : value ? [value] : [];
     if (!keysApplicability || keysApplicability.length === 0) {
       return valueArray;
     }
@@ -4330,17 +3813,6 @@ 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
    */
@@ -4361,11 +3833,8 @@ function GroupByVariableRenderer({ model }) {
     includeAll,
     allowCustomValue = true,
     defaultValue,
-    keysApplicability,
-    _valueRecommendations,
-    drilldownRecommendationsEnabled
+    keysApplicability
   } = 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];
@@ -4404,7 +3873,7 @@ function GroupByVariableRenderer({ model }) {
     () => handleOptionGroups(optionSearcher(inputValue).map(toSelectableValue$1)),
     [optionSearcher, inputValue]
   );
-  const select = isMulti ? /* @__PURE__ */ React__default.default.createElement(
+  return isMulti ? /* @__PURE__ */ React__default.default.createElement(
     ui.MultiSelect,
     {
       "aria-label": i18n.t(
@@ -4418,7 +3887,6 @@ function GroupByVariableRenderer({ model }) {
         "Group by label"
       ),
       width: "auto",
-      className: css.cx(drilldownRecommendationsEnabled && styles.selectStylesInWrapper),
       allowCustomValue,
       inputValue,
       value: uncommittedValue,
@@ -4452,7 +3920,7 @@ function GroupByVariableRenderer({ model }) {
         if (restorable !== model.state.restorable) {
           model.setState({ restorable });
         }
-        model._verifyApplicabilityAndStoreRecentGrouping();
+        model._verifyApplicability();
       },
       onChange: (newValue, action) => {
         if (action.action === "clear" && noValueOnClear) {
@@ -4488,7 +3956,6 @@ function GroupByVariableRenderer({ model }) {
         "Group by label"
       ),
       width: "auto",
-      className: css.cx(drilldownRecommendationsEnabled && styles.selectStylesInWrapper),
       inputValue,
       value: uncommittedValue && uncommittedValue.length > 0 ? uncommittedValue : null,
       allowCustomValue,
@@ -4533,10 +4000,6 @@ 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 }, /* @__PURE__ */ React__default.default.createElement(_valueRecommendations.Component, { model: _valueRecommendations })), select);
 }
 const filterNoOp$1 = () => true;
 function WideMenu(props) {
@@ -4553,31 +4016,6 @@ 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);
@@ -7223,6 +6661,9 @@ 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 = ({
@@ -7411,7 +6852,8 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
   isAlwaysWip,
   handleChangeViewMode,
   focusOnWipInputRef,
-  populateInputOnEdit
+  populateInputOnEdit,
+  onInputClick
 }, parentRef) {
   var _a, _b, _c;
   const [open, setOpen] = React.useState(false);
@@ -7894,6 +7336,7 @@ 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: () => {
@@ -8352,53 +7795,102 @@ const getStyles$a = (theme) => ({
   ...getNonApplicablePillStyles(theme)
 });
 
-const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ controller }, parentRef) {
+const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ controller, onInputClick }, 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 });
+  return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { controller, filter: wip, isAlwaysWip: true, ref: parentRef, onInputClick });
 });
 
+const MAX_VISIBLE_FILTERS = 4;
 const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
-  const { originFilters, filters, readOnly, valueRecommendations, drilldownRecommendationsEnabled } = controller.useState();
+  var _a;
+  const { originFilters, filters, readOnly, collapsible } = 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",
     {
-      className: css.cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly }),
-      onClick: () => {
-        var _a;
-        (_a = focusOnWipInputRef.current) == null ? void 0 : _a.call(focusOnWipInputRef);
-      }
+      ref: wrapperRef,
+      className: css.cx(styles.comboboxWrapper, {
+        [styles.comboboxFocusOutline]: !readOnly,
+        [styles.collapsed]: shouldCollapse,
+        [styles.clickableCollapsed]: shouldCollapse
+      }),
+      onClick: handleExpand
     },
     /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "filter", className: styles.filterIcon, size: "lg" }),
-    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,
-        {
-          key: `${index}-${filter.key}`,
-          filter,
-          controller,
-          focusOnWipInputRef: focusOnWipInputRef.current
-        }
-      ) : null
-    ),
-    filters.filter((filter) => !filter.hidden).map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
+    filtersToRender.map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
       AdHocFilterPill,
       {
-        key: `${index}-${filter.key}`,
+        key: `${filter.origin ? "origin-" : ""}${index}-${filter.key}`,
         filter,
         controller,
         readOnly: readOnly || filter.readOnly,
         focusOnWipInputRef: focusOnWipInputRef.current
       }
     )),
-    !readOnly ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { controller, ref: focusOnWipInputRef }) : null
+    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 }))
   );
 });
 const getStyles$9 = (theme) => ({
@@ -8430,6 +7922,42 @@ 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
+    }
   })
 });
 
@@ -8534,8 +8062,7 @@ class AdHocFiltersVariableController {
       supportsMultiValueOperators: state.supportsMultiValueOperators,
       onAddCustomValue: state.onAddCustomValue,
       wip: state._wip,
-      valueRecommendations: state._valueRecommendations,
-      drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled
+      collapsible: state.collapsible
     };
   }
   async getKeys(currentKey) {
@@ -8550,9 +8077,6 @@ class AdHocFiltersVariableController {
   updateFilter(filter, update) {
     this.model._updateFilter(filter, update);
   }
-  updateFilters(filters, options) {
-    this.model.updateFilters(filters, options);
-  }
   updateToMatchAll(filter) {
     this.model.updateToMatchAll(filter);
   }
@@ -8571,6 +8095,9 @@ 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);
@@ -8660,11 +8187,6 @@ 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.setState({ _valueRecommendations: valueRecommendations });
-        valueRecommendations.activate();
-      }
       return () => {
         var _a;
         (_a = this.state.originFilters) == null ? void 0 : _a.forEach((filter) => {
@@ -8734,13 +8256,6 @@ 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;
@@ -8799,6 +8314,18 @@ 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;
@@ -8832,11 +8359,8 @@ class AdHocFiltersVariable extends SceneObjectBase {
     }
     if (filter === _wip) {
       if ("value" in update && update["value"] !== "") {
-        this.setState({
-          filters: [...filters, { ..._wip, ...update }],
-          _wip: void 0
-        });
-        this.verifyApplicabilityAndStoreRecentFilter({ ..._wip, ...update });
+        this.setState({ filters: [...filters, { ..._wip, ...update }], _wip: void 0 });
+        this._debouncedVerifyApplicability();
       } else {
         this.setState({ _wip: { ...filter, ...update } });
       }
@@ -8846,12 +8370,6 @@ 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, {
@@ -9042,12 +8560,11 @@ 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: (_a2 = scope.spec.filters) == null ? void 0 : _a2.filter((f) => f.key !== filter.key)
+            filters: scope.spec.filters.filter((f) => f.key !== filter.key)
           }
         };
       });
@@ -10536,6 +10053,91 @@ 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;
@@ -16852,7 +16454,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-C9F_2hih.js'); });
+    case '../locales/en-US/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CwGWCTcQ.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'); });
@@ -16997,7 +16599,6 @@ exports.dataLayers = index;
 exports.escapeUrlPipeDelimiters = escapeUrlPipeDelimiters;
 exports.formatRegistry = formatRegistry;
 exports.getExploreURL = getExploreURL;
-exports.getQueriesForVariables = getQueriesForVariables;
 exports.isCustomVariableValue = isCustomVariableValue;
 exports.isDataLayer = isDataLayer;
 exports.isDataRequestEnricher = isDataRequestEnricher;