@grafana/scenes 6.50.0--canary.1316.20298598344.0 → 6.51.0--canary.1316.20309633325.0

package/dist/esm/packages/scenes/src/variables/components/DrilldownRecommendations.js

@@ -0,0 +1,102 @@
+import { useStyles2, ClickOutsideWrapper, Stack, Text, IconButton, Popover } from '@grafana/ui';
+import React, { useState, useRef } from 'react';
+import { css, cx } from '@emotion/css';
+import { Trans, t } from '@grafana/i18n';
+
+function DrilldownRecommendations({ recentDrilldowns, recommendedDrilldowns }) {
+  const styles = useStyles2(getStyles);
+  const [isPopoverVisible, setPopoverVisible] = useState(false);
+  const ref = useRef(null);
+  const openPopover = () => {
+    setPopoverVisible(true);
+  };
+  const onClickAction = (action) => {
+    action();
+    setPopoverVisible(false);
+  };
+  const content = /* @__PURE__ */ React.createElement(ClickOutsideWrapper, { onClick: () => setPopoverVisible(false), useCapture: true }, /* @__PURE__ */ React.createElement("div", { className: styles.menuContainer, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React.createElement(Stack, { direction: "column" }, /* @__PURE__ */ React.createElement(Text, { weight: "bold", variant: "bodySmall", color: "secondary" }, /* @__PURE__ */ React.createElement(Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recent" }, "Recent")), recentDrilldowns && recentDrilldowns.length > 0 ? recentDrilldowns.map((drilldown) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: drilldown.label,
+      className: cx(styles.combinedFilterPill),
+      onClick: () => onClickAction(drilldown.onClick)
+    },
+    drilldown.label
+  )) : /* @__PURE__ */ React.createElement("div", { className: styles.emptyMessage }, /* @__PURE__ */ React.createElement(Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recent-empty" }, "No recent values")), /* @__PURE__ */ React.createElement(Text, { weight: "bold", variant: "bodySmall", color: "secondary" }, /* @__PURE__ */ React.createElement(Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recommended" }, "Recommended")), recommendedDrilldowns && recommendedDrilldowns.length > 0 ? recommendedDrilldowns.map((drilldown) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: drilldown.label,
+      className: cx(styles.combinedFilterPill),
+      onClick: () => onClickAction(drilldown.onClick)
+    },
+    drilldown.label
+  )) : /* @__PURE__ */ React.createElement("div", { className: styles.emptyMessage }, /* @__PURE__ */ React.createElement(Trans, { i18nKey: "grafana-scenes.components.drilldown-recommendations.recommended-empty" }, "No recommended values")))));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      name: "plus",
+      tooltip: t("grafana-scenes.components.drilldown-recommendations.tooltip", "Show recommendations"),
+      ref,
+      className: cx(isPopoverVisible && styles.iconActive),
+      onClick: (ev) => {
+        openPopover();
+        ev.stopPropagation();
+      }
+    }
+  ), isPopoverVisible && ref.current && /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      content,
+      onKeyDown: (event) => {
+        if (event.key === " ") {
+          event.stopPropagation();
+        }
+      },
+      placement: "bottom-start",
+      referenceElement: ref.current,
+      show: true
+    }
+  ));
+}
+const getStyles = (theme) => ({
+  menuContainer: 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({
+    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({
+    "&:before": {
+      backgroundColor: theme.colors.action.hover,
+      opacity: 1
+    }
+  }),
+  emptyMessage: css({
+    padding: theme.spacing(0.5, 0),
+    color: theme.colors.text.secondary,
+    ...theme.typography.bodySmall
+  })
+});
+
+export { DrilldownRecommendations };
+//# sourceMappingURL=DrilldownRecommendations.js.map

package/dist/esm/packages/scenes/src/variables/components/DrilldownRecommendations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrilldownRecommendations.js","sources":["../../../../../../../src/variables/components/DrilldownRecommendations.tsx"],"sourcesContent":["import { ClickOutsideWrapper, IconButton, Popover, Stack, Text, useStyles2 } from '@grafana/ui';\nimport React, { useRef, useState } from 'react';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { Trans, t } from '@grafana/i18n';\n\nexport interface DrilldownPill {\n  label: string;\n  onClick: () => void;\n}\n\ninterface Props {\n  recentDrilldowns?: DrilldownPill[];\n  recommendedDrilldowns?: DrilldownPill[];\n}\n\nexport function DrilldownRecommendations({ recentDrilldowns, recommendedDrilldowns }: Props) {\n  const styles = useStyles2(getStyles);\n\n  const [isPopoverVisible, setPopoverVisible] = useState<boolean>(false);\n  const ref = useRef<HTMLButtonElement>(null);\n\n  const openPopover = () => {\n    setPopoverVisible(true);\n  };\n\n  const onClickAction = (action: () => void) => {\n    action();\n    setPopoverVisible(false);\n  };\n\n  const content = (\n    <ClickOutsideWrapper onClick={() => setPopoverVisible(false)} useCapture={true}>\n      <div className={styles.menuContainer} onClick={(ev) => ev.stopPropagation()}>\n        <Stack direction=\"column\">\n          <Text weight=\"bold\" variant=\"bodySmall\" color=\"secondary\">\n            <Trans i18nKey=\"grafana-scenes.components.drilldown-recommendations.recent\">Recent</Trans>\n          </Text>\n          {recentDrilldowns && recentDrilldowns.length > 0 ? (\n            recentDrilldowns.map((drilldown) => (\n              <div\n                key={drilldown.label}\n                className={cx(styles.combinedFilterPill)}\n                onClick={() => onClickAction(drilldown.onClick)}\n              >\n                {drilldown.label}\n              </div>\n            ))\n          ) : (\n            <div className={styles.emptyMessage}>\n              <Trans i18nKey=\"grafana-scenes.components.drilldown-recommendations.recent-empty\">No recent values</Trans>\n            </div>\n          )}\n          <Text weight=\"bold\" variant=\"bodySmall\" color=\"secondary\">\n            <Trans i18nKey=\"grafana-scenes.components.drilldown-recommendations.recommended\">Recommended</Trans>\n          </Text>\n          {recommendedDrilldowns && recommendedDrilldowns.length > 0 ? (\n            recommendedDrilldowns.map((drilldown) => (\n              <div\n                key={drilldown.label}\n                className={cx(styles.combinedFilterPill)}\n                onClick={() => onClickAction(drilldown.onClick)}\n              >\n                {drilldown.label}\n              </div>\n            ))\n          ) : (\n            <div className={styles.emptyMessage}>\n              <Trans i18nKey=\"grafana-scenes.components.drilldown-recommendations.recommended-empty\">\n                No recommended values\n              </Trans>\n            </div>\n          )}\n        </Stack>\n      </div>\n    </ClickOutsideWrapper>\n  );\n\n  return (\n    <>\n      <IconButton\n        name=\"plus\"\n        tooltip={t('grafana-scenes.components.drilldown-recommendations.tooltip', 'Show recommendations')}\n        ref={ref}\n        className={cx(isPopoverVisible && styles.iconActive)}\n        onClick={(ev) => {\n          openPopover();\n          ev.stopPropagation();\n        }}\n      />\n\n      {isPopoverVisible && ref.current && (\n        <Popover\n          content={content}\n          onKeyDown={(event) => {\n            if (event.key === ' ') {\n              event.stopPropagation();\n            }\n          }}\n          placement=\"bottom-start\"\n          referenceElement={ref.current}\n          show\n        />\n      )}\n    </>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  menuContainer: css({\n    display: 'flex',\n    flexDirection: 'column',\n    background: theme.colors.background.elevated,\n    border: `1px solid ${theme.colors.border.weak}`,\n    borderRadius: theme.shape.radius.default,\n    boxShadow: theme.shadows.z3,\n    padding: theme.spacing(2),\n  }),\n  combinedFilterPill: css({\n    alignItems: 'center',\n    background: theme.colors.action.selected,\n    borderRadius: theme.shape.radius.default,\n    border: `1px solid ${theme.colors.border.weak}`,\n    padding: theme.spacing(0.2, 1),\n    color: theme.colors.text.primary,\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    minHeight: theme.spacing(2.75),\n    ...theme.typography.bodySmall,\n    fontWeight: theme.typography.fontWeightBold,\n    cursor: 'pointer',\n\n    '&:hover': {\n      background: theme.colors.action.hover,\n    },\n  }),\n  iconActive: css({\n    '&:before': {\n      backgroundColor: theme.colors.action.hover,\n      opacity: 1,\n    },\n  }),\n  emptyMessage: css({\n    padding: theme.spacing(0.5, 0),\n    color: theme.colors.text.secondary,\n    ...theme.typography.bodySmall,\n  }),\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/packages/scenes/src/variables/groupby/GroupByRecommendations.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import { store } from '@grafana/data';
+import { sceneGraph } from '../../core/sceneGraph/index.js';
+import { getEnrichedDataRequest } from '../../querying/getEnrichedDataRequest.js';
+import { getQueriesForVariables } from '../utils.js';
+import { getDataSource } from '../../utils/getDataSource.js';
+import { DrilldownRecommendations } from '../components/DrilldownRecommendations.js';
+import { ScopesVariable } from '../variants/ScopesVariable.js';
+import { SCOPES_VARIABLE_NAME } from '../constants.js';
+import { GroupByVariable } from './GroupByVariable.js';
+import '../adhoc/AdHocFiltersRecommendations.js';
+import { isArray } from 'lodash';
+import { SceneObjectBase } from '../../core/SceneObjectBase.js';
+import { wrapInSafeSerializableSceneObject } from '../../utils/wrapInSafeSerializableSceneObject.js';
+
+const getRecentGroupingKey = (datasourceUid) => `grafana.grouping.recent.${datasourceUid != null ? datasourceUid : "default"}`;
+class GroupByRecommendations extends SceneObjectBase {
+  constructor(state = {}) {
+    super(state);
+    this._activationHandler = () => {
+      const json = 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._groupBy);
+      let scopesSubscription;
+      if (scopesVariable instanceof ScopesVariable) {
+        this._subs.add(
+          scopesSubscription = scopesVariable.subscribeToState((newState, prevState) => {
+            if (newState.scopes !== prevState.scopes) {
+              const json2 = store.get(this._getStorageKey());
+              const storedGroupings2 = json2 ? JSON.parse(json2) : [];
+              if (storedGroupings2.length > 0) {
+                this._verifyRecentGroupingsApplicability(storedGroupings2);
+              }
+              this._fetchRecommendedDrilldowns();
+            }
+          })
+        );
+      }
+      return () => {
+        scopesSubscription == null ? void 0 : scopesSubscription.unsubscribe();
+      };
+    };
+    this.addActivationHandler(this._activationHandler);
+  }
+  get _groupBy() {
+    if (!(this.parent instanceof GroupByVariable)) {
+      throw new Error("GroupByRecommendations must be a child of GroupByVariable");
+    }
+    return this.parent;
+  }
+  get _scopedVars() {
+    return { __sceneObject: wrapInSafeSerializableSceneObject(this._groupBy) };
+  }
+  _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.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._groupBy);
+    const keys = storedGroupings.map((g) => String(g.value));
+    const response = await this._groupBy.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 });
+  }
+  /**
+   * 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 = 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);
+    store.set(key, JSON.stringify(limitedStoredGroupings));
+    this.setState({ recentGrouping: limitedStoredGroupings.slice(-3) });
+  }
+  /**
+   * Add a grouping value to the parent variable
+   */
+  addValueToParent(newValue, newText) {
+    const value = isArray(this._groupBy.state.value) ? this._groupBy.state.value : [this._groupBy.state.value];
+    const text = 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
+    );
+  }
+}
+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.createElement(DrilldownRecommendations, { recentDrilldowns, recommendedDrilldowns });
+}
+
+export { GroupByRecommendations, getRecentGroupingKey };
+//# sourceMappingURL=GroupByRecommendations.js.map

package/dist/esm/packages/scenes/src/variables/groupby/GroupByRecommendations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupByRecommendations.js","sources":["../../../../../../../src/variables/groupby/GroupByRecommendations.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  // @ts-expect-error (temporary till we update grafana/data)\n  DrilldownsApplicability,\n  SelectableValue,\n  store,\n} from '@grafana/data';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { getEnrichedDataRequest } from '../../querying/getEnrichedDataRequest';\nimport { getQueriesForVariables } from '../utils';\nimport { getDataSource } from '../../utils/getDataSource';\nimport { DrilldownRecommendations, DrilldownPill } from '../components/DrilldownRecommendations';\nimport { ScopesVariable } from '../variants/ScopesVariable';\nimport { SCOPES_VARIABLE_NAME } from '../constants';\nimport { GroupByVariable } from './GroupByVariable';\nimport { MAX_RECENT_DRILLDOWNS, MAX_STORED_RECENT_DRILLDOWNS } from '../adhoc/AdHocFiltersRecommendations';\nimport { VariableValueSingle } from '../types';\nimport { isArray } from 'lodash';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { wrapInSafeSerializableSceneObject } from '../../utils/wrapInSafeSerializableSceneObject';\nimport { Unsubscribable } from 'rxjs';\n\nexport const getRecentGroupingKey = (datasourceUid: string | undefined) =>\n  `grafana.grouping.recent.${datasourceUid ?? 'default'}`;\n\nexport interface GroupByRecommendationsState extends SceneObjectState {\n  recentGrouping?: Array<SelectableValue<VariableValueSingle>>;\n  recommendedGrouping?: Array<SelectableValue<VariableValueSingle>>;\n}\n\nexport class GroupByRecommendations extends SceneObjectBase<GroupByRecommendationsState> {\n  static Component = GroupByRecommendationsRenderer;\n\n  public constructor(state: Partial<GroupByRecommendationsState> = {}) {\n    super(state);\n\n    this.addActivationHandler(this._activationHandler);\n  }\n\n  private get _groupBy(): GroupByVariable {\n    if (!(this.parent instanceof GroupByVariable)) {\n      throw new Error('GroupByRecommendations must be a child of GroupByVariable');\n    }\n\n    return this.parent;\n  }\n\n  private get _scopedVars() {\n    return { __sceneObject: wrapInSafeSerializableSceneObject(this._groupBy) };\n  }\n\n  private _activationHandler = () => {\n    const json = store.get(this._getStorageKey());\n    const storedGroupings = json ? JSON.parse(json) : [];\n\n    if (storedGroupings.length > 0) {\n      this._verifyRecentGroupingsApplicability(storedGroupings);\n    } else {\n      this.setState({ recentGrouping: [] });\n    }\n\n    this._fetchRecommendedDrilldowns();\n\n    // Subscribe to scopes variable changes\n    const scopesVariable = sceneGraph.lookupVariable(SCOPES_VARIABLE_NAME, this._groupBy);\n    let scopesSubscription: Unsubscribable | undefined;\n\n    if (scopesVariable instanceof ScopesVariable) {\n      this._subs.add(\n        (scopesSubscription = scopesVariable.subscribeToState((newState, prevState) => {\n          if (newState.scopes !== prevState.scopes) {\n            const json = store.get(this._getStorageKey());\n            const storedGroupings = json ? JSON.parse(json) : [];\n\n            if (storedGroupings.length > 0) {\n              this._verifyRecentGroupingsApplicability(storedGroupings);\n            }\n\n            this._fetchRecommendedDrilldowns();\n          }\n        }))\n      );\n    }\n\n    return () => {\n      scopesSubscription?.unsubscribe();\n    };\n  };\n\n  private _getStorageKey(): string {\n    return getRecentGroupingKey(this._groupBy.state.datasource?.uid);\n  }\n\n  private async _fetchRecommendedDrilldowns() {\n    const ds = await getDataSource(this._groupBy.state.datasource, this._scopedVars);\n\n    // @ts-expect-error (temporary till we update grafana/data)\n    if (!ds || !ds.getRecommendedDrilldowns) {\n      return;\n    }\n\n    const queries = getQueriesForVariables(this._groupBy);\n    const timeRange = sceneGraph.getTimeRange(this._groupBy).state.value;\n    const scopes = sceneGraph.getScopes(this._groupBy);\n    const groupByKeys = Array.isArray(this._groupBy.state.value)\n      ? this._groupBy.state.value.map((v) => String(v))\n      : this._groupBy.state.value\n      ? [String(this._groupBy.state.value)]\n      : [];\n\n    const enrichedRequest = getEnrichedDataRequest(this._groupBy);\n    const dashboardUid = enrichedRequest?.dashboardUID;\n\n    try {\n      // @ts-expect-error (temporary till we update grafana/data)\n      const recommendedDrilldowns = await ds.getRecommendedDrilldowns({\n        timeRange,\n        dashboardUid,\n        queries,\n        groupByKeys,\n        scopes,\n      });\n\n      if (recommendedDrilldowns?.groupByKeys) {\n        this.setState({\n          recommendedGrouping: recommendedDrilldowns.groupByKeys.map((key: string) => ({ value: key, text: key })),\n        });\n      }\n    } catch (error) {\n      console.error('Failed to fetch recommended drilldowns:', error);\n    }\n  }\n\n  private async _verifyRecentGroupingsApplicability(storedGroupings: Array<SelectableValue<VariableValueSingle>>) {\n    const queries = getQueriesForVariables(this._groupBy);\n    const keys = storedGroupings.map((g) => String(g.value));\n    const response = await this._groupBy.getGroupByApplicabilityForQueries(keys, queries);\n\n    if (!response) {\n      this.setState({ recentGrouping: storedGroupings.slice(-MAX_RECENT_DRILLDOWNS) });\n      return;\n    }\n\n    const applicabilityMap = new Map<string, boolean>();\n    response.forEach((item: DrilldownsApplicability) => {\n      applicabilityMap.set(item.key, item.applicable !== false);\n    });\n\n    const applicableGroupings = storedGroupings\n      .filter((g) => {\n        const isApplicable = applicabilityMap.get(String(g.value));\n        return isApplicable === undefined || isApplicable === true;\n      })\n      .slice(-MAX_RECENT_DRILLDOWNS);\n\n    this.setState({ recentGrouping: applicableGroupings });\n  }\n\n  /**\n   * Stores recent groupings in localStorage and updates state.\n   * Should be called by the parent variable when a grouping is added/updated.\n   */\n  public storeRecentGrouping(applicableValues: string[]) {\n    if (applicableValues.length === 0) {\n      return;\n    }\n\n    const key = this._getStorageKey();\n    const storedGroupings = store.get(key);\n    const allRecentGroupings: Array<SelectableValue<VariableValueSingle>> = storedGroupings\n      ? JSON.parse(storedGroupings)\n      : [];\n\n    const existingWithoutApplicableValues = allRecentGroupings.filter(\n      (grouping) => !applicableValues.includes(String(grouping.value))\n    );\n    const updatedStoredGroupings = [\n      ...existingWithoutApplicableValues,\n      ...applicableValues.map((value) => ({ value, text: value })),\n    ];\n\n    const limitedStoredGroupings = updatedStoredGroupings.slice(-MAX_STORED_RECENT_DRILLDOWNS);\n\n    store.set(key, JSON.stringify(limitedStoredGroupings));\n\n    this.setState({ recentGrouping: limitedStoredGroupings.slice(-MAX_RECENT_DRILLDOWNS) });\n  }\n\n  /**\n   * Add a grouping value to the parent variable\n   */\n  public addValueToParent(newValue: VariableValueSingle, newText?: string) {\n    const value = isArray(this._groupBy.state.value) ? this._groupBy.state.value : [this._groupBy.state.value];\n    const text = isArray(this._groupBy.state.text)\n      ? this._groupBy.state.text.map(String)\n      : [String(this._groupBy.state.text)];\n\n    // Check if value already exists\n    if (value.includes(newValue)) {\n      return;\n    }\n\n    this._groupBy.changeValueTo(\n      [...value.filter((v) => v !== ''), newValue],\n      [...text.filter((t) => t !== ''), newText ?? String(newValue)],\n      true\n    );\n  }\n}\n\nfunction GroupByRecommendationsRenderer({ model }: SceneComponentProps<GroupByRecommendations>) {\n  const { recentGrouping, recommendedGrouping } = model.useState();\n\n  const recentDrilldowns: DrilldownPill[] | undefined = recentGrouping?.map((groupBy) => ({\n    label: `${groupBy.value}`,\n    onClick: () => {\n      model.addValueToParent(groupBy.value!, groupBy.text ?? String(groupBy.value));\n    },\n  }));\n\n  const recommendedDrilldowns: DrilldownPill[] | undefined = recommendedGrouping?.map((groupBy) => ({\n    label: `${groupBy.value}`,\n    onClick: () => {\n      model.addValueToParent(groupBy.value!, groupBy.text ?? String(groupBy.value));\n    },\n  }));\n\n  return <DrilldownRecommendations recentDrilldowns={recentDrilldowns} recommendedDrilldowns={recommendedDrilldowns} />;\n}\n"],"names":["json","storedGroupings"],"mappings":";;;;;;;;;;;;;;;AAuBO,MAAM,oBAAuB,GAAA,CAAC,aACnC,KAAA,CAAA,wBAAA,EAA2B,wCAAiB,SAAS,CAAA;AAOhD,MAAM,+BAA+B,eAA6C,CAAA;AAAA,EAGhF,WAAA,CAAY,KAA8C,GAAA,EAAI,EAAA;AACnE,IAAA,KAAA,CAAM,KAAK,CAAA;AAiBb,IAAA,IAAA,CAAQ,qBAAqB,MAAM;AACjC,MAAA,MAAM,IAAO,GAAA,KAAA,CAAM,GAAI,CAAA,IAAA,CAAK,gBAAgB,CAAA;AAC5C,MAAA,MAAM,kBAAkB,IAAO,GAAA,IAAA,CAAK,KAAM,CAAA,IAAI,IAAI,EAAC;AAEnD,MAAI,IAAA,eAAA,CAAgB,SAAS,CAAG,EAAA;AAC9B,QAAA,IAAA,CAAK,oCAAoC,eAAe,CAAA;AAAA,OACnD,MAAA;AACL,QAAA,IAAA,CAAK,QAAS,CAAA,EAAE,cAAgB,EAAA,IAAI,CAAA;AAAA;AAGtC,MAAA,IAAA,CAAK,2BAA4B,EAAA;AAGjC,MAAA,MAAM,cAAiB,GAAA,UAAA,CAAW,cAAe,CAAA,oBAAA,EAAsB,KAAK,QAAQ,CAAA;AACpF,MAAI,IAAA,kBAAA;AAEJ,MAAA,IAAI,0BAA0B,cAAgB,EAAA;AAC5C,QAAA,IAAA,CAAK,KAAM,CAAA,GAAA;AAAA,UACR,kBAAqB,GAAA,cAAA,CAAe,gBAAiB,CAAA,CAAC,UAAU,SAAc,KAAA;AAC7E,YAAI,IAAA,QAAA,CAAS,MAAW,KAAA,SAAA,CAAU,MAAQ,EAAA;AACxC,cAAA,MAAMA,KAAO,GAAA,KAAA,CAAM,GAAI,CAAA,IAAA,CAAK,gBAAgB,CAAA;AAC5C,cAAA,MAAMC,mBAAkBD,KAAO,GAAA,IAAA,CAAK,KAAMA,CAAAA,KAAI,IAAI,EAAC;AAEnD,cAAIC,IAAAA,gBAAAA,CAAgB,SAAS,CAAG,EAAA;AAC9B,gBAAA,IAAA,CAAK,oCAAoCA,gBAAe,CAAA;AAAA;AAG1D,cAAA,IAAA,CAAK,2BAA4B,EAAA;AAAA;AACnC,WACD;AAAA,SACH;AAAA;AAGF,MAAA,OAAO,MAAM;AACX,QAAoB,kBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA,CAAA,WAAA,EAAA;AAAA,OACtB;AAAA,KACF;AAnDE,IAAK,IAAA,CAAA,oBAAA,CAAqB,KAAK,kBAAkB,CAAA;AAAA;AACnD,EAEA,IAAY,QAA4B,GAAA;AACtC,IAAI,IAAA,EAAE,IAAK,CAAA,MAAA,YAAkB,eAAkB,CAAA,EAAA;AAC7C,MAAM,MAAA,IAAI,MAAM,2DAA2D,CAAA;AAAA;AAG7E,IAAA,OAAO,IAAK,CAAA,MAAA;AAAA;AACd,EAEA,IAAY,WAAc,GAAA;AACxB,IAAA,OAAO,EAAE,aAAA,EAAe,iCAAkC,CAAA,IAAA,CAAK,QAAQ,CAAE,EAAA;AAAA;AAC3E,EAwCQ,cAAyB,GAAA;AA1FnC,IAAA,IAAA,EAAA;AA2FI,IAAA,OAAO,sBAAqB,EAAK,GAAA,IAAA,CAAA,QAAA,CAAS,KAAM,CAAA,UAAA,KAApB,mBAAgC,GAAG,CAAA;AAAA;AACjE,EAEA,MAAc,2BAA8B,GAAA;AAC1C,IAAM,MAAA,EAAA,GAAK,MAAM,aAAc,CAAA,IAAA,CAAK,SAAS,KAAM,CAAA,UAAA,EAAY,KAAK,WAAW,CAAA;AAG/E,IAAA,IAAI,CAAC,EAAA,IAAM,CAAC,EAAA,CAAG,wBAA0B,EAAA;AACvC,MAAA;AAAA;AAGF,IAAM,MAAA,OAAA,GAAU,sBAAuB,CAAA,IAAA,CAAK,QAAQ,CAAA;AACpD,IAAA,MAAM,YAAY,UAAW,CAAA,YAAA,CAAa,IAAK,CAAA,QAAQ,EAAE,KAAM,CAAA,KAAA;AAC/D,IAAA,MAAM,MAAS,GAAA,UAAA,CAAW,SAAU,CAAA,IAAA,CAAK,QAAQ,CAAA;AACjD,IAAA,MAAM,WAAc,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,QAAS,CAAA,KAAA,CAAM,KAAK,CAAA,GACvD,IAAK,CAAA,QAAA,CAAS,KAAM,CAAA,KAAA,CAAM,IAAI,CAAC,CAAA,KAAM,MAAO,CAAA,CAAC,CAAC,CAAA,GAC9C,IAAK,CAAA,QAAA,CAAS,MAAM,KACpB,GAAA,CAAC,MAAO,CAAA,IAAA,CAAK,QAAS,CAAA,KAAA,CAAM,KAAK,CAAC,IAClC,EAAC;AAEL,IAAM,MAAA,eAAA,GAAkB,sBAAuB,CAAA,IAAA,CAAK,QAAQ,CAAA;AAC5D,IAAA,MAAM,eAAe,eAAiB,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAA,YAAA;AAEtC,IAAI,IAAA;AAEF,MAAM,MAAA,qBAAA,GAAwB,MAAM,EAAA,CAAG,wBAAyB,CAAA;AAAA,QAC9D,SAAA;AAAA,QACA,YAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,QACA;AAAA,OACD,CAAA;AAED,MAAA,IAAI,+DAAuB,WAAa,EAAA;AACtC,QAAA,IAAA,CAAK,QAAS,CAAA;AAAA,UACZ,mBAAA,EAAqB,qBAAsB,CAAA,WAAA,CAAY,GAAI,CAAA,CAAC,GAAiB,MAAA,EAAE,KAAO,EAAA,GAAA,EAAK,IAAM,EAAA,GAAA,EAAM,CAAA;AAAA,SACxG,CAAA;AAAA;AACH,aACO,KAAO,EAAA;AACd,MAAQ,OAAA,CAAA,KAAA,CAAM,2CAA2C,KAAK,CAAA;AAAA;AAChE;AACF,EAEA,MAAc,oCAAoC,eAA8D,EAAA;AAC9G,IAAM,MAAA,OAAA,GAAU,sBAAuB,CAAA,IAAA,CAAK,QAAQ,CAAA;AACpD,IAAM,MAAA,IAAA,GAAO,gBAAgB,GAAI,CAAA,CAAC,MAAM,MAAO,CAAA,CAAA,CAAE,KAAK,CAAC,CAAA;AACvD,IAAA,MAAM,WAAW,MAAM,IAAA,CAAK,QAAS,CAAA,iCAAA,CAAkC,MAAM,OAAO,CAAA;AAEpF,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAK,IAAA,CAAA,QAAA,CAAS,EAAE,cAAgB,EAAA,eAAA,CAAgB,MAAM,EAAsB,GAAG,CAAA;AAC/E,MAAA;AAAA;AAGF,IAAM,MAAA,gBAAA,uBAAuB,GAAqB,EAAA;AAClD,IAAS,QAAA,CAAA,OAAA,CAAQ,CAAC,IAAkC,KAAA;AAClD,MAAA,gBAAA,CAAiB,GAAI,CAAA,IAAA,CAAK,GAAK,EAAA,IAAA,CAAK,eAAe,KAAK,CAAA;AAAA,KACzD,CAAA;AAED,IAAA,MAAM,mBAAsB,GAAA,eAAA,CACzB,MAAO,CAAA,CAAC,CAAM,KAAA;AACb,MAAA,MAAM,eAAe,gBAAiB,CAAA,GAAA,CAAI,MAAO,CAAA,CAAA,CAAE,KAAK,CAAC,CAAA;AACzD,MAAO,OAAA,YAAA,KAAiB,UAAa,YAAiB,KAAA,IAAA;AAAA,KACvD,CAAA,CACA,KAAM,CAAA,EAAsB,CAAA;AAE/B,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,cAAgB,EAAA,mBAAA,EAAqB,CAAA;AAAA;AACvD;AAAA;AAAA;AAAA;AAAA,EAMO,oBAAoB,gBAA4B,EAAA;AACrD,IAAI,IAAA,gBAAA,CAAiB,WAAW,CAAG,EAAA;AACjC,MAAA;AAAA;AAGF,IAAM,MAAA,GAAA,GAAM,KAAK,cAAe,EAAA;AAChC,IAAM,MAAA,eAAA,GAAkB,KAAM,CAAA,GAAA,CAAI,GAAG,CAAA;AACrC,IAAA,MAAM,qBAAkE,eACpE,GAAA,IAAA,CAAK,KAAM,CAAA,eAAe,IAC1B,EAAC;AAEL,IAAA,MAAM,kCAAkC,kBAAmB,CAAA,MAAA;AAAA,MACzD,CAAC,aAAa,CAAC,gBAAA,CAAiB,SAAS,MAAO,CAAA,QAAA,CAAS,KAAK,CAAC;AAAA,KACjE;AACA,IAAA,MAAM,sBAAyB,GAAA;AAAA,MAC7B,GAAG,+BAAA;AAAA,MACH,GAAG,iBAAiB,GAAI,CAAA,CAAC,WAAW,EAAE,KAAA,EAAO,IAAM,EAAA,KAAA,EAAQ,CAAA;AAAA,KAC7D;AAEA,IAAA,MAAM,sBAAyB,GAAA,sBAAA,CAAuB,KAAM,CAAA,GAA6B,CAAA;AAEzF,IAAA,KAAA,CAAM,GAAI,CAAA,GAAA,EAAK,IAAK,CAAA,SAAA,CAAU,sBAAsB,CAAC,CAAA;AAErD,IAAK,IAAA,CAAA,QAAA,CAAS,EAAE,cAAgB,EAAA,sBAAA,CAAuB,MAAM,EAAsB,GAAG,CAAA;AAAA;AACxF;AAAA;AAAA;AAAA,EAKO,gBAAA,CAAiB,UAA+B,OAAkB,EAAA;AACvE,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAQ,IAAK,CAAA,QAAA,CAAS,MAAM,KAAK,CAAA,GAAI,IAAK,CAAA,QAAA,CAAS,MAAM,KAAQ,GAAA,CAAC,IAAK,CAAA,QAAA,CAAS,MAAM,KAAK,CAAA;AACzG,IAAM,MAAA,IAAA,GAAO,QAAQ,IAAK,CAAA,QAAA,CAAS,MAAM,IAAI,CAAA,GACzC,KAAK,QAAS,CAAA,KAAA,CAAM,KAAK,GAAI,CAAA,MAAM,IACnC,CAAC,MAAA,CAAO,KAAK,QAAS,CAAA,KAAA,CAAM,IAAI,CAAC,CAAA;AAGrC,IAAI,IAAA,KAAA,CAAM,QAAS,CAAA,QAAQ,CAAG,EAAA;AAC5B,MAAA;AAAA;AAGF,IAAA,IAAA,CAAK,QAAS,CAAA,aAAA;AAAA,MACZ,CAAC,GAAG,KAAM,CAAA,MAAA,CAAO,CAAC,CAAM,KAAA,CAAA,KAAM,EAAE,CAAA,EAAG,QAAQ,CAAA;AAAA,MAC3C,CAAC,GAAG,IAAK,CAAA,MAAA,CAAO,CAAC,CAAA,KAAM,CAAM,KAAA,EAAE,CAAG,EAAA,OAAA,IAAA,IAAA,GAAA,OAAA,GAAW,MAAO,CAAA,QAAQ,CAAC,CAAA;AAAA,MAC7D;AAAA,KACF;AAAA;AAEJ;AAlLa,sBAAA,CACJ,SAAY,GAAA,8BAAA;AAmLrB,SAAS,8BAAA,CAA+B,EAAE,KAAA,EAAsD,EAAA;AAC9F,EAAA,MAAM,EAAE,cAAA,EAAgB,mBAAoB,EAAA,GAAI,MAAM,QAAS,EAAA;AAE/D,EAAA,MAAM,gBAAgD,GAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAgB,GAAI,CAAA,CAAC,OAAa,MAAA;AAAA,IACtF,KAAA,EAAO,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,IACvB,SAAS,MAAM;AAxNnB,MAAA,IAAA,EAAA;AAyNM,MAAM,KAAA,CAAA,gBAAA,CAAiB,QAAQ,KAAQ,EAAA,CAAA,EAAA,GAAA,OAAA,CAAQ,SAAR,IAAgB,GAAA,EAAA,GAAA,MAAA,CAAO,OAAQ,CAAA,KAAK,CAAC,CAAA;AAAA;AAC9E,GACF,CAAA,CAAA;AAEA,EAAA,MAAM,qBAAqD,GAAA,mBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,mBAAA,CAAqB,GAAI,CAAA,CAAC,OAAa,MAAA;AAAA,IAChG,KAAA,EAAO,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,IACvB,SAAS,MAAM;AA/NnB,MAAA,IAAA,EAAA;AAgOM,MAAM,KAAA,CAAA,gBAAA,CAAiB,QAAQ,KAAQ,EAAA,CAAA,EAAA,GAAA,OAAA,CAAQ,SAAR,IAAgB,GAAA,EAAA,GAAA,MAAA,CAAO,OAAQ,CAAA,KAAK,CAAC,CAAA;AAAA;AAC9E,GACF,CAAA,CAAA;AAEA,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,wBAAyB,EAAA,EAAA,gBAAA,EAAoC,qBAA8C,EAAA,CAAA;AACrH;;;;"}

package/dist/esm/packages/scenes/src/variables/groupby/GroupByVariable.js

@@ -1,15 +1,14 @@
-import { css } from '@emotion/css';
 import { t } from '@grafana/i18n';
 import React, { useMemo, useState, useEffect } from 'react';
 import { allActiveGroupByVariables } from './findActiveGroupByVariablesByUid.js';
 import { sceneGraph } from '../../core/sceneGraph/index.js';
 import { SceneVariableValueChangedEvent } from '../types.js';
 import { MultiValueVariable } from '../variants/MultiValueVariable.js';
-import { lastValueFrom, map, of, from, mergeMap, tap, take } from 'rxjs';
+import { map, of, from, mergeMap, tap, take, lastValueFrom } from 'rxjs';
 import { getDataSource } from '../../utils/getDataSource.js';
 import { useStyles2, MultiSelect, Select } from '@grafana/ui';
 import { isArray, isEqual } from 'lodash';
-import { handleOptionGroups, dataFromResponse, getQueriesForVariables, responseHasError } from '../utils.js';
+import { dataFromResponse, getQueriesForVariables, responseHasError, handleOptionGroups } from '../utils.js';
 import { OptionWithCheckbox } from '../components/VariableValueSelect.js';
 import { GroupByVariableUrlSyncHandler } from './GroupByVariableUrlSyncHandler.js';
 import { getOptionSearcher } from '../components/getOptionSearcher.js';
@@ -19,10 +18,18 @@ import { DefaultGroupByCustomIndicatorContainer } from './DefaultGroupByCustomIn
 import { GroupByValueContainer } from './GroupByValueContainer.js';
 import { getInteractionTracker } from '../../core/sceneGraph/getInteractionTracker.js';
 import { GROUPBY_DIMENSIONS_INTERACTION } from '../../performance/interactionConstants.js';
+import { css, cx } from '@emotion/css';
+import { GroupByRecommendations } from './GroupByRecommendations.js';
 import { c as components } from '../../../../../node_modules/react-select/dist/index-641ee5b8.esm.js';
 
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
+    var _a;
+    const behaviors = (_a = initialState.$behaviors) != null ? _a : [];
+    const recommendations = initialState.drilldownRecommendationsEnabled ? new GroupByRecommendations() : void 0;
+    if (recommendations) {
+      behaviors.push(recommendations);
+    }
     super({
       isMulti: true,
       name: "",
@@ -35,10 +42,12 @@ class GroupByVariable extends MultiValueVariable {
       layout: "horizontal",
       type: "groupby",
       ...initialState,
-      noValueOnClear: true
+      noValueOnClear: true,
+      $behaviors: behaviors.length > 0 ? behaviors : void 0
     });
     this.isLazy = true;
     this._urlSync = new GroupByVariableUrlSyncHandler(this);
+    this._scopedVars = { __sceneObject: wrapInSafeSerializableSceneObject(this) };
     this._activationHandler = () => {
       this._verifyApplicability();
       if (this.state.defaultValue) {
@@ -91,6 +100,7 @@ class GroupByVariable extends MultiValueVariable {
       }
       return keys;
     };
+    this._recommendations = recommendations;
     if (this.state.defaultValue) {
       this.changeValueTo(this.state.defaultValue.value, this.state.defaultValue.text, false);
     }
@@ -131,11 +141,7 @@ class GroupByVariable extends MultiValueVariable {
       );
     }
     this.setState({ loading: true, error: null });
-    return from(
-      getDataSource(this.state.datasource, {
-        __sceneObject: wrapInSafeSerializableSceneObject(this)
-      })
-    ).pipe(
+    return from(getDataSource(this.state.datasource, this._scopedVars)).pipe(
       mergeMap((ds) => {
         return from(this._getKeys(ds)).pipe(
           tap((response) => {
@@ -159,9 +165,15 @@ class GroupByVariable extends MultiValueVariable {
       })
     );
   }
+  /**
+   * Gets the GroupByRecommendations behavior if it exists in $behaviors
+   */
+  getRecommendations() {
+    return this._recommendations;
+  }
   getApplicableKeys() {
     const { value, keysApplicability } = this.state;
-    const valueArray = isArray(value) ? value : value ? [value] : [];
+    const valueArray = isArray(value) ? value.map(String) : value ? [String(value)] : [];
     if (!keysApplicability || keysApplicability.length === 0) {
       return valueArray;
     }
@@ -172,9 +184,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;
     }
@@ -220,6 +230,17 @@ class GroupByVariable extends MultiValueVariable {
     }
     this.changeValueTo(this.state.defaultValue.value, this.state.defaultValue.text, true);
   }
+  async _verifyApplicabilityAndStoreRecentGrouping() {
+    await this._verifyApplicability();
+    if (!this._recommendations) {
+      return;
+    }
+    const applicableValues = this.getApplicableKeys();
+    if (applicableValues.length === 0) {
+      return;
+    }
+    this._recommendations.storeRecentGrouping(applicableValues);
+  }
   /**
    * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable
    */
@@ -229,6 +250,7 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
+  var _a, _b;
   const {
     value,
     text,
@@ -240,17 +262,19 @@ function GroupByVariableRenderer({ model }) {
     includeAll,
     allowCustomValue = true,
     defaultValue,
-    keysApplicability
+    keysApplicability,
+    drilldownRecommendationsEnabled
   } = model.useState();
+  const recommendations = model.getRecommendations();
   const styles = useStyles2(getStyles);
   const values = useMemo(() => {
     const arrayValue = isArray(value) ? value : [value];
     const arrayText = isArray(text) ? text : [text];
     return arrayValue.map((value2, idx) => {
-      var _a;
+      var _a2;
       return {
         value: value2,
-        label: String((_a = arrayText[idx]) != null ? _a : value2)
+        label: String((_a2 = arrayText[idx]) != null ? _a2 : value2)
       };
     });
   }, [value, text]);
@@ -281,7 +305,8 @@ function GroupByVariableRenderer({ model }) {
     () => handleOptionGroups(optionSearcher(inputValue).map(toSelectableValue)),
     [optionSearcher, inputValue]
   );
-  return isMulti ? /* @__PURE__ */ React.createElement("div", { className: styles.selectWrapper }, /* @__PURE__ */ React.createElement(
+  const WideInputWrapper = (children) => /* @__PURE__ */ React.createElement("div", { className: styles.selectWrapper }, children);
+  const select = isMulti ? /* @__PURE__ */ React.createElement(ConditionalWrapper, { condition: (_a = model.state.wideInput) != null ? _a : false, wrapper: WideInputWrapper }, /* @__PURE__ */ React.createElement(
     MultiSelect,
     {
       "aria-label": t(
@@ -290,11 +315,12 @@ function GroupByVariableRenderer({ model }) {
       ),
       "data-testid": `GroupBySelect-${key}`,
       id: key,
-      className: styles.fullWidthMultiSelect,
       placeholder: t(
         "grafana-scenes.variables.group-by-variable-renderer.placeholder-group-by-label",
         "Group by label"
       ),
+      width: "auto",
+      className: cx(drilldownRecommendationsEnabled && styles.selectStylesInWrapper),
       allowCustomValue,
       inputValue,
       value: uncommittedValue,
@@ -311,6 +337,7 @@ function GroupByVariableRenderer({ model }) {
       isLoading: isFetchingOptions,
       components: {
         Option: OptionWithCheckbox,
+        Menu: WideMenu,
         ...hasDefaultValue ? {
           IndicatorsContainer: () => /* @__PURE__ */ React.createElement(DefaultGroupByCustomIndicatorContainer, { model })
         } : {},
@@ -327,7 +354,7 @@ function GroupByVariableRenderer({ model }) {
         if (restorable !== model.state.restorable) {
           model.setState({ restorable });
         }
-        model._verifyApplicability();
+        model._verifyApplicabilityAndStoreRecentGrouping();
       },
       onChange: (newValue, action) => {
         if (action.action === "clear" && noValueOnClear) {
@@ -349,7 +376,7 @@ function GroupByVariableRenderer({ model }) {
         setIsOptionsOpen(false);
       }
     }
-  )) : /* @__PURE__ */ React.createElement("div", { className: styles.selectWrapper }, /* @__PURE__ */ React.createElement(
+  )) : /* @__PURE__ */ React.createElement(ConditionalWrapper, { condition: (_b = model.state.wideInput) != null ? _b : false, wrapper: WideInputWrapper }, /* @__PURE__ */ React.createElement(
     Select,
     {
       "aria-label": t(
@@ -407,6 +434,32 @@ function GroupByVariableRenderer({ model }) {
       }
     }
   ));
+  if (!recommendations) {
+    return select;
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React.createElement("div", { className: styles.recommendations }, /* @__PURE__ */ React.createElement(recommendations.Component, { model: recommendations })), select);
+}
+const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children
+}) => {
+  return condition ? wrapper(children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
+const filterNoOp = () => true;
+function WideMenu(props) {
+  return /* @__PURE__ */ React.createElement(components.Menu, { ...props }, /* @__PURE__ */ React.createElement("div", { style: { minWidth: "220px" } }, props.children));
+}
+function toSelectableValue(input) {
+  const { label, value, group } = input;
+  const result = {
+    label,
+    value
+  };
+  if (group) {
+    result.group = group;
+  }
+  return result;
 }
 const getStyles = (theme) => ({
   selectWrapper: css({
@@ -424,23 +477,31 @@ const getStyles = (theme) => ({
       gridAutoColumns: "max-content",
       justifyItems: "start"
     }
+  }),
+  wrapper: css({
+    display: "flex"
+  }),
+  selectStylesInWrapper: css({
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    border: `1px solid ${theme.colors.border.strong}`,
+    borderLeft: "none"
+  }),
+  recommendations: 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)
+    }
   })
 });
-const filterNoOp = () => true;
-function WideMenu(props) {
-  return /* @__PURE__ */ React.createElement(components.Menu, { ...props }, /* @__PURE__ */ React.createElement("div", { style: { minWidth: "220px" } }, props.children));
-}
-function toSelectableValue(input) {
-  const { label, value, group } = input;
-  const result = {
-    label,
-    value
-  };
-  if (group) {
-    result.group = group;
-  }
-  return result;
-}
 
 export { GroupByVariable, GroupByVariableRenderer };
 //# sourceMappingURL=GroupByVariable.js.map