@grafana/scenes 6.50.0--canary.1316.20287476780.0 → 6.50.0

package/dist/esm/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.js

@@ -1,93 +1,46 @@
 import { css, cx } from '@emotion/css';
-import { useStyles2, useTheme2, Icon, Button } from '@grafana/ui';
-import { t } from '@grafana/i18n';
-import React, { memo, useState, useRef, useEffect } from 'react';
-import { useMeasure } from 'react-use';
+import { useStyles2, Icon } from '@grafana/ui';
+import React, { memo, useRef } from 'react';
 import { AdHocFilterPill } from './AdHocFilterPill.js';
 import { AdHocFiltersAlwaysWipCombobox } from './AdHocFiltersAlwaysWipCombobox.js';
 
-const MAX_VISIBLE_FILTERS = 5;
 const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer2({ controller }) {
-  var _a;
-  const { originFilters, filters, readOnly, collapsible } = controller.useState();
+  const { originFilters, filters, readOnly, valueRecommendations } = controller.useState();
   const styles = useStyles2(getStyles);
-  const theme = useTheme2();
-  const [collapsed, setCollapsed] = useState(true);
-  const [wrapperRef, { height: wrapperHeight }] = useMeasure();
-  const clearAll = () => {
-    controller.clearAll();
-  };
   const focusOnWipInputRef = 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;
-  useEffect(() => {
-    if (collapsible && totalFiltersCount === 0 && collapsed) {
-      setCollapsed(false);
-    }
-  }, [collapsible, totalFiltersCount, collapsed]);
-  const showCollapseButton = collapsible && isMultiLine && !collapsed;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      ref: wrapperRef,
-      className: cx(styles.comboboxWrapper, {
-        [styles.comboboxFocusOutline]: !readOnly,
-        [styles.collapsed]: shouldCollapse,
-        [styles.clickableCollapsed]: shouldCollapse
-      }),
-      onClick: handleExpand
+      className: cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly }),
+      onClick: () => {
+        var _a;
+        (_a = focusOnWipInputRef.current) == null ? void 0 : _a.call(focusOnWipInputRef);
+      }
     },
     /* @__PURE__ */ React.createElement(Icon, { name: "filter", className: styles.filterIcon, size: "lg" }),
-    filtersToRender.map((filter, index) => /* @__PURE__ */ React.createElement(
+    valueRecommendations && /* @__PURE__ */ React.createElement(valueRecommendations.Component, { model: valueRecommendations }),
+    originFilters == null ? void 0 : originFilters.map(
+      (filter, index) => filter.origin ? /* @__PURE__ */ React.createElement(
+        AdHocFilterPill,
+        {
+          key: `${index}-${filter.key}`,
+          filter,
+          controller,
+          focusOnWipInputRef: focusOnWipInputRef.current
+        }
+      ) : null
+    ),
+    filters.filter((filter) => !filter.hidden).map((filter, index) => /* @__PURE__ */ React.createElement(
       AdHocFilterPill,
       {
-        key: `${filter.origin ? "origin-" : ""}${index}-${filter.key}`,
+        key: `${index}-${filter.key}`,
         filter,
         controller,
         readOnly: readOnly || filter.readOnly,
         focusOnWipInputRef: focusOnWipInputRef.current
       }
     )),
-    !readOnly && !shouldCollapse ? /* @__PURE__ */ React.createElement(AdHocFiltersAlwaysWipCombobox, { controller, ref: focusOnWipInputRef }) : null,
-    /* @__PURE__ */ React.createElement("div", { className: styles.rightControls }, showCollapseButton && /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        className: styles.collapseButton,
-        fill: "text",
-        onClick: handleCollapseToggle,
-        "aria-label": t(
-          "grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse-filters",
-          "Collapse filters"
-        ),
-        "aria-expanded": !collapsed
-      },
-      t("grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse", "Collapse"),
-      /* @__PURE__ */ React.createElement(Icon, { name: "angle-up", size: "md" })
-    ), /* @__PURE__ */ React.createElement("div", { className: styles.clearAllButton }, /* @__PURE__ */ React.createElement(Icon, { name: "times", size: "md", onClick: clearAll })), shouldCollapse && /* @__PURE__ */ React.createElement(React.Fragment, null, totalFiltersCount > MAX_VISIBLE_FILTERS && /* @__PURE__ */ React.createElement("span", { className: styles.moreIndicator }, "(+", totalFiltersCount - MAX_VISIBLE_FILTERS, ")"), /* @__PURE__ */ React.createElement(Icon, { name: "angle-down", className: styles.dropdownIndicator })))
+    !readOnly ? /* @__PURE__ */ React.createElement(AdHocFiltersAlwaysWipCombobox, { controller, ref: focusOnWipInputRef }) : null
   );
 });
 const getStyles = (theme) => ({
@@ -103,8 +56,7 @@ const getStyles = (theme) => ({
     borderRadius: theme.shape.radius.default,
     paddingInline: theme.spacing(1),
     paddingBlock: theme.spacing(0.5),
-    flexGrow: 1,
-    width: "100%"
+    flexGrow: 1
   }),
   comboboxFocusOutline: css({
     "&:focus-within": {
@@ -120,48 +72,6 @@ const getStyles = (theme) => ({
   filterIcon: css({
     color: theme.colors.text.secondary,
     alignSelf: "center"
-  }),
-  collapsed: css({
-    flexWrap: "nowrap",
-    overflow: "hidden"
-  }),
-  clickableCollapsed: css({
-    cursor: "pointer",
-    "&:hover": {
-      borderColor: theme.colors.border.medium
-    }
-  }),
-  rightControls: css({
-    display: "flex",
-    alignItems: "center",
-    marginLeft: "auto",
-    flexShrink: 0
-  }),
-  moreIndicator: css({
-    color: theme.colors.text.secondary,
-    whiteSpace: "nowrap"
-  }),
-  dropdownIndicator: css({
-    color: theme.colors.text.secondary,
-    flexShrink: 0
-  }),
-  collapseButton: css({
-    color: theme.colors.text.secondary,
-    padding: 0,
-    fontSize: theme.typography.bodySmall.fontSize,
-    border: "none",
-    "&:hover": {
-      background: "transparent",
-      color: theme.colors.text.primary
-    }
-  }),
-  clearAllButton: css({
-    fontSize: theme.typography.bodySmall.fontSize,
-    cursor: "pointer",
-    color: theme.colors.text.secondary,
-    "&:hover": {
-      color: theme.colors.text.primary
-    }
   })
 });
 

package/dist/esm/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdHocFiltersComboboxRenderer.js","sources":["../../../../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Button, Icon, useStyles2, useTheme2 } from '@grafana/ui';\nimport { t } from '@grafana/i18n';\nimport React, { memo, useRef, useState, useEffect } from 'react';\nimport { useMeasure } from 'react-use';\nimport { AdHocFiltersController } from '../controller/AdHocFiltersController';\nimport { AdHocFilterPill } from './AdHocFilterPill';\nimport { AdHocFiltersAlwaysWipCombobox } from './AdHocFiltersAlwaysWipCombobox';\n\nconst MAX_VISIBLE_FILTERS = 5;\n\ninterface Props {\n  controller: AdHocFiltersController;\n}\n\nexport const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer({ controller }: Props) {\n  const { originFilters, filters, readOnly, collapsible } = controller.useState();\n  const styles = useStyles2(getStyles);\n  const theme = useTheme2();\n  const [collapsed, setCollapsed] = useState(true);\n  const [wrapperRef, { height: wrapperHeight }] = useMeasure<HTMLDivElement>();\n\n  const clearAll = () => {\n    controller.clearAll();\n  };\n\n  // ref that focuses on the always wip filter input\n  // defined in the combobox component via useImperativeHandle\n  const focusOnWipInputRef = useRef<() => void>();\n\n  // Single line height is approximately minHeight (4 spacing units) + small buffer\n  const singleLineThreshold = theme.spacing.gridSize * 5;\n  const isMultiLine = collapsible && wrapperHeight > singleLineThreshold;\n\n  const handleCollapseToggle = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (collapsible) {\n      setCollapsed(true);\n    }\n  };\n\n  const handleExpand = () => {\n    if (!collapsible) {\n      focusOnWipInputRef.current?.();\n      return;\n    }\n    if (collapsed) {\n      setCollapsed(false);\n    } else {\n      focusOnWipInputRef.current?.();\n    }\n  };\n\n  // Combine all visible filters into one array\n  const visibleOriginFilters = originFilters?.filter((f) => f.origin) ?? [];\n  const visibleFilters = filters.filter((f) => !f.hidden);\n  const allFilters = [...visibleOriginFilters, ...visibleFilters];\n  const totalFiltersCount = allFilters.length;\n\n  const shouldCollapse = collapsible && collapsed && totalFiltersCount > 0;\n  const filtersToRender = shouldCollapse ? allFilters.slice(0, MAX_VISIBLE_FILTERS) : allFilters;\n\n  // Reset collapsed state when there are no filters (only when collapsible)\n  useEffect(() => {\n    if (collapsible && totalFiltersCount === 0 && collapsed) {\n      setCollapsed(false);\n    }\n  }, [collapsible, totalFiltersCount, collapsed]);\n\n  // Only show collapse button when expanded and content wraps to multiple lines\n  const showCollapseButton = collapsible && isMultiLine && !collapsed;\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={cx(styles.comboboxWrapper, {\n        [styles.comboboxFocusOutline]: !readOnly,\n        [styles.collapsed]: shouldCollapse,\n        [styles.clickableCollapsed]: shouldCollapse,\n      })}\n      onClick={handleExpand}\n    >\n      <Icon name=\"filter\" className={styles.filterIcon} size=\"lg\" />\n\n      {filtersToRender.map((filter, index) => (\n        <AdHocFilterPill\n          key={`${filter.origin ? 'origin-' : ''}${index}-${filter.key}`}\n          filter={filter}\n          controller={controller}\n          readOnly={readOnly || filter.readOnly}\n          focusOnWipInputRef={focusOnWipInputRef.current}\n        />\n      ))}\n\n      {!readOnly && !shouldCollapse ? (\n        <AdHocFiltersAlwaysWipCombobox controller={controller} ref={focusOnWipInputRef} />\n      ) : null}\n\n      {/* Right-side controls: +X more, collapse button, and clear all */}\n      <div className={styles.rightControls}>\n        {showCollapseButton && (\n          <Button\n            className={styles.collapseButton}\n            fill=\"text\"\n            onClick={handleCollapseToggle}\n            aria-label={t(\n              'grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse-filters',\n              'Collapse filters'\n            )}\n            aria-expanded={!collapsed}\n          >\n            {t('grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse', 'Collapse')}\n            <Icon name=\"angle-up\" size=\"md\" />\n          </Button>\n        )}\n\n        <div className={styles.clearAllButton}>\n          <Icon name=\"times\" size=\"md\" onClick={clearAll} />\n        </div>\n\n        {shouldCollapse && (\n          <>\n            {totalFiltersCount > MAX_VISIBLE_FILTERS && (\n              <span className={styles.moreIndicator}>(+{totalFiltersCount - MAX_VISIBLE_FILTERS})</span>\n            )}\n            <Icon name=\"angle-down\" className={styles.dropdownIndicator} />\n          </>\n        )}\n      </div>\n    </div>\n  );\n});\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  comboboxWrapper: css({\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: theme.spacing(1),\n    rowGap: theme.spacing(0.5),\n    minHeight: theme.spacing(4),\n    backgroundColor: theme.components.input.background,\n    border: `1px solid ${theme.colors.border.strong}`,\n    borderRadius: theme.shape.radius.default,\n    paddingInline: theme.spacing(1),\n    paddingBlock: theme.spacing(0.5),\n    flexGrow: 1,\n    width: '100%',\n  }),\n  comboboxFocusOutline: css({\n    '&:focus-within': {\n      outline: '2px dotted transparent',\n      outlineOffset: '2px',\n      boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,\n      transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,\n      transitionDuration: '0.2s',\n      transitionProperty: 'outline, outline-offset, box-shadow',\n      zIndex: 2,\n    },\n  }),\n  filterIcon: css({\n    color: theme.colors.text.secondary,\n    alignSelf: 'center',\n  }),\n  collapsed: css({\n    flexWrap: 'nowrap',\n    overflow: 'hidden',\n  }),\n  clickableCollapsed: css({\n    cursor: 'pointer',\n    '&:hover': {\n      borderColor: theme.colors.border.medium,\n    },\n  }),\n  rightControls: css({\n    display: 'flex',\n    alignItems: 'center',\n    marginLeft: 'auto',\n    flexShrink: 0,\n  }),\n  moreIndicator: css({\n    color: theme.colors.text.secondary,\n    whiteSpace: 'nowrap',\n  }),\n  dropdownIndicator: css({\n    color: theme.colors.text.secondary,\n    flexShrink: 0,\n  }),\n  collapseButton: css({\n    color: theme.colors.text.secondary,\n    padding: 0,\n    fontSize: theme.typography.bodySmall.fontSize,\n    border: 'none',\n    '&:hover': {\n      background: 'transparent',\n      color: theme.colors.text.primary,\n    },\n  }),\n  clearAllButton: css({\n    fontSize: theme.typography.bodySmall.fontSize,\n    cursor: 'pointer',\n    color: theme.colors.text.secondary,\n    '&:hover': {\n      color: theme.colors.text.primary,\n    },\n  }),\n});\n"],"names":["AdHocFiltersComboboxRenderer","_a"],"mappings":"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"}
+{"version":3,"file":"AdHocFiltersComboboxRenderer.js","sources":["../../../../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\nimport React, { memo, useRef } from 'react';\nimport { AdHocFiltersController } from '../controller/AdHocFiltersController';\nimport { AdHocFilterPill } from './AdHocFilterPill';\nimport { AdHocFiltersAlwaysWipCombobox } from './AdHocFiltersAlwaysWipCombobox';\n\ninterface Props {\n  controller: AdHocFiltersController;\n}\n\nexport const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer({ controller }: Props) {\n  const { originFilters, filters, readOnly, valueRecommendations } = controller.useState();\n  const styles = useStyles2(getStyles);\n\n  // ref that focuses on the always wip filter input\n  // defined in the combobox component via useImperativeHandle\n  const focusOnWipInputRef = useRef<() => void>();\n\n  return (\n    <div\n      className={cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly })}\n      onClick={() => {\n        focusOnWipInputRef.current?.();\n      }}\n    >\n      <Icon name=\"filter\" className={styles.filterIcon} size=\"lg\" />\n\n      {valueRecommendations && <valueRecommendations.Component model={valueRecommendations} />}\n\n      {originFilters?.map((filter, index) =>\n        filter.origin ? (\n          <AdHocFilterPill\n            key={`${index}-${filter.key}`}\n            filter={filter}\n            controller={controller}\n            focusOnWipInputRef={focusOnWipInputRef.current}\n          />\n        ) : null\n      )}\n\n      {filters\n        .filter((filter) => !filter.hidden)\n        .map((filter, index) => (\n          <AdHocFilterPill\n            key={`${index}-${filter.key}`}\n            filter={filter}\n            controller={controller}\n            readOnly={readOnly || filter.readOnly}\n            focusOnWipInputRef={focusOnWipInputRef.current}\n          />\n        ))}\n\n      {!readOnly ? <AdHocFiltersAlwaysWipCombobox controller={controller} ref={focusOnWipInputRef} /> : null}\n    </div>\n  );\n});\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  comboboxWrapper: css({\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: theme.spacing(1),\n    rowGap: theme.spacing(0.5),\n    minHeight: theme.spacing(4),\n    backgroundColor: theme.components.input.background,\n    border: `1px solid ${theme.colors.border.strong}`,\n    borderRadius: theme.shape.radius.default,\n    paddingInline: theme.spacing(1),\n    paddingBlock: theme.spacing(0.5),\n    flexGrow: 1,\n  }),\n  comboboxFocusOutline: css({\n    '&:focus-within': {\n      outline: '2px dotted transparent',\n      outlineOffset: '2px',\n      boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,\n      transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,\n      transitionDuration: '0.2s',\n      transitionProperty: 'outline, outline-offset, box-shadow',\n      zIndex: 2,\n    },\n  }),\n  filterIcon: css({\n    color: theme.colors.text.secondary,\n    alignSelf: 'center',\n  }),\n});\n"],"names":["AdHocFiltersComboboxRenderer"],"mappings":"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"}

package/dist/esm/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/utils.js

@@ -117,9 +117,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 = ({

package/dist/esm/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../../../src/variables/adhoc/AdHocFiltersCombobox/utils.ts"],"sourcesContent":["import { SelectableValue } from '@grafana/data';\nimport { AdHocInputType } from './AdHocFiltersCombobox';\nimport { AdHocFilterWithLabels, isMultiValueOperator, OnAddCustomValueFn } from '../AdHocFiltersVariable';\n\nconst VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER = 8;\nconst VIRTUAL_LIST_DESCRIPTION_WIDTH_ESTIMATE_MULTIPLIER = 6;\nconst VIRTUAL_LIST_PADDING = 8;\nexport const VIRTUAL_LIST_OVERSCAN = 5;\nexport const VIRTUAL_LIST_ITEM_HEIGHT = 38;\nexport const VIRTUAL_LIST_ITEM_HEIGHT_WITH_DESCRIPTION = 60;\nexport const ERROR_STATE_DROPDOWN_WIDTH = 366;\n\nexport const flattenOptionGroups = (options: Array<SelectableValue<string>>) =>\n  options.flatMap<SelectableValue<string>>((option) => (option.options ? [option, ...option.options] : [option]));\n\nexport const setupDropdownAccessibility = (\n  options: Array<SelectableValue<string>>,\n  listRef: React.MutableRefObject<Array<HTMLElement | null>>,\n  disabledIndicesRef: React.MutableRefObject<number[]>\n) => {\n  let maxOptionWidth = 182;\n  const listRefArr = [];\n  const disabledIndices = [];\n\n  for (let i = 0; i < options.length; i++) {\n    // listRefArr should be filled with nulls for amount of dropdown items so that\n    //    useNavigationList sets activeIndex correctly when navigating with arrow keys\n    listRefArr.push(null);\n\n    // disabledIndices are used to skip unselectable group items in dropdown when\n    //    navigating with arrow keys\n    if (options[i]?.options) {\n      disabledIndices.push(i);\n    }\n    let label = options[i].label ?? options[i].value ?? '';\n    let multiplierToUse = VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER;\n    if (\n      label.length * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER <\n      (options[i].description?.length || 0) * VIRTUAL_LIST_DESCRIPTION_WIDTH_ESTIMATE_MULTIPLIER\n    ) {\n      label = options[i].description!;\n      multiplierToUse = VIRTUAL_LIST_DESCRIPTION_WIDTH_ESTIMATE_MULTIPLIER;\n    }\n\n    // rough widthEstimate\n    const widthEstimate =\n      (options[i].isCustom ? label.length + 18 : label.length) * multiplierToUse + VIRTUAL_LIST_PADDING * 2;\n    if (widthEstimate > maxOptionWidth) {\n      maxOptionWidth = widthEstimate;\n    }\n  }\n\n  listRef.current = [...listRefArr];\n  disabledIndicesRef.current = [...disabledIndices];\n  return maxOptionWidth;\n};\n\nconst nextInputTypeMap = {\n  key: 'operator',\n  operator: 'value',\n  value: 'key',\n} as const;\n\nexport const switchToNextInputType = (\n  filterInputType: AdHocInputType,\n  setInputType: React.Dispatch<React.SetStateAction<AdHocInputType>>,\n  handleChangeViewMode: ((event?: React.MouseEvent, shouldFocusOnFilterPill?: boolean) => void) | undefined,\n  element: HTMLInputElement | null,\n  shouldFocusOnPillWrapperOverride?: boolean\n) =>\n  switchInputType(\n    nextInputTypeMap[filterInputType],\n    setInputType,\n    filterInputType === 'value' ? handleChangeViewMode : undefined,\n    element,\n    shouldFocusOnPillWrapperOverride\n  );\n\nexport const switchInputType = (\n  filterInputType: AdHocInputType,\n  setInputType: React.Dispatch<React.SetStateAction<AdHocInputType>>,\n  handleChangeViewMode?: (event?: React.MouseEvent, shouldFocusOnFilterPill?: boolean) => void,\n  element?: HTMLInputElement | null,\n  shouldFocusOnPillWrapperOverride?: boolean\n) => {\n  setInputType(filterInputType);\n\n  handleChangeViewMode?.(undefined, shouldFocusOnPillWrapperOverride);\n\n  setTimeout(() => element?.focus());\n};\n\nexport const generateFilterUpdatePayload = ({\n  filterInputType,\n  item,\n  filter,\n  setFilterMultiValues,\n  onAddCustomValue,\n}: {\n  filterInputType: AdHocInputType;\n  item: SelectableValue<string>;\n  filter: AdHocFilterWithLabels;\n  setFilterMultiValues: (value: React.SetStateAction<Array<SelectableValue<string>>>) => void;\n  onAddCustomValue?: OnAddCustomValueFn;\n}): Partial<AdHocFilterWithLabels> => {\n  if (filterInputType === 'key') {\n    return {\n      key: item.value,\n      keyLabel: item.label ? item.label : item.value,\n      meta: item?.meta,\n    };\n  }\n  if (filterInputType === 'value') {\n    if (item.isCustom && onAddCustomValue) {\n      return onAddCustomValue(item, filter);\n    }\n    return {\n      value: item.value,\n      valueLabels: [item.label ? item.label : item.value!],\n    };\n  }\n\n  if (filterInputType === 'operator') {\n    // handle values/valueLabels when switching from multi to single value operator\n    if (isMultiValueOperator(filter.operator) && !isMultiValueOperator(item.value!)) {\n      // reset local multi values state\n      setFilterMultiValues([]);\n      // update operator and reset values and valueLabels\n      return {\n        operator: item.value,\n        valueLabels: [filter.valueLabels?.[0] || filter.values?.[0] || filter.value],\n        values: undefined,\n      };\n    }\n\n    // handle values/valueLabels when switching from single to multi value operator\n    if (isMultiValueOperator(item.value!) && !isMultiValueOperator(filter.operator)) {\n      const valueLabels = [filter.valueLabels?.[0] || filter.values?.[0] || filter.value];\n      const values = [filter.value];\n\n      // populate local multi values state\n      if (values[0]) {\n        setFilterMultiValues([\n          {\n            value: values[0],\n            label: valueLabels?.[0] ?? values[0],\n          },\n        ]);\n      }\n\n      // update operator and default values and valueLabels\n      return {\n        operator: item.value,\n        valueLabels: valueLabels,\n        values: values,\n      };\n    }\n  }\n\n  // default operator update of same multi/single type\n  return {\n    [filterInputType]: item.value,\n  };\n};\n\nconst INPUT_PLACEHOLDER_DEFAULT = 'Filter by label values';\n\nexport const generatePlaceholder = (\n  filter: AdHocFilterWithLabels,\n  filterInputType: AdHocInputType,\n  isMultiValueEdit: boolean,\n  isAlwaysWip?: boolean,\n  inputPlaceholder?: string\n) => {\n  if (filterInputType === 'key') {\n    return inputPlaceholder || INPUT_PLACEHOLDER_DEFAULT;\n  }\n  if (filterInputType === 'value') {\n    if (isMultiValueEdit) {\n      return 'Edit values';\n    }\n    return filter.valueLabels?.[0] || '';\n  }\n\n  // When in WIP mode and selecting operator (key already selected),\n  // don't show the placeholder\n  if (isAlwaysWip && filterInputType === 'operator') {\n    return '';\n  }\n\n  return filter[filterInputType] && !isAlwaysWip\n    ? `${filter[filterInputType]}`\n    : inputPlaceholder || INPUT_PLACEHOLDER_DEFAULT;\n};\n\nexport const populateInputValueOnInputTypeSwitch = ({\n  populateInputOnEdit,\n  item,\n  filterInputType,\n  setInputValue,\n  filter,\n}: {\n  populateInputOnEdit: boolean | undefined;\n  item: SelectableValue<string>;\n  filterInputType: AdHocInputType;\n  setInputValue: (value: React.SetStateAction<string>) => void;\n  filter: AdHocFilterWithLabels | undefined;\n}) => {\n  if (populateInputOnEdit && !isMultiValueOperator(item.value || '') && nextInputTypeMap[filterInputType] === 'value') {\n    setInputValue(filter?.valueLabels?.[0] ?? filter?.value ?? '');\n  } else {\n    setInputValue('');\n  }\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../../../../../src/variables/adhoc/AdHocFiltersCombobox/utils.ts"],"sourcesContent":["import { SelectableValue } from '@grafana/data';\nimport { AdHocInputType } from './AdHocFiltersCombobox';\nimport { AdHocFilterWithLabels, isMultiValueOperator, OnAddCustomValueFn } from '../AdHocFiltersVariable';\n\nconst VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER = 8;\nconst VIRTUAL_LIST_DESCRIPTION_WIDTH_ESTIMATE_MULTIPLIER = 6;\nconst VIRTUAL_LIST_PADDING = 8;\nexport const VIRTUAL_LIST_OVERSCAN = 5;\nexport const VIRTUAL_LIST_ITEM_HEIGHT = 38;\nexport const VIRTUAL_LIST_ITEM_HEIGHT_WITH_DESCRIPTION = 60;\nexport const ERROR_STATE_DROPDOWN_WIDTH = 366;\n\nexport const flattenOptionGroups = (options: Array<SelectableValue<string>>) =>\n  options.flatMap<SelectableValue<string>>((option) => (option.options ? [option, ...option.options] : [option]));\n\nexport const setupDropdownAccessibility = (\n  options: Array<SelectableValue<string>>,\n  listRef: React.MutableRefObject<Array<HTMLElement | null>>,\n  disabledIndicesRef: React.MutableRefObject<number[]>\n) => {\n  let maxOptionWidth = 182;\n  const listRefArr = [];\n  const disabledIndices = [];\n\n  for (let i = 0; i < options.length; i++) {\n    // listRefArr should be filled with nulls for amount of dropdown items so that\n    //    useNavigationList sets activeIndex correctly when navigating with arrow keys\n    listRefArr.push(null);\n\n    // disabledIndices are used to skip unselectable group items in dropdown when\n    //    navigating with arrow keys\n    if (options[i]?.options) {\n      disabledIndices.push(i);\n    }\n    let label = options[i].label ?? options[i].value ?? '';\n    let multiplierToUse = VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER;\n    if (\n      label.length * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER <\n      (options[i].description?.length || 0) * VIRTUAL_LIST_DESCRIPTION_WIDTH_ESTIMATE_MULTIPLIER\n    ) {\n      label = options[i].description!;\n      multiplierToUse = VIRTUAL_LIST_DESCRIPTION_WIDTH_ESTIMATE_MULTIPLIER;\n    }\n\n    // rough widthEstimate\n    const widthEstimate =\n      (options[i].isCustom ? label.length + 18 : label.length) * multiplierToUse + VIRTUAL_LIST_PADDING * 2;\n    if (widthEstimate > maxOptionWidth) {\n      maxOptionWidth = widthEstimate;\n    }\n  }\n\n  listRef.current = [...listRefArr];\n  disabledIndicesRef.current = [...disabledIndices];\n  return maxOptionWidth;\n};\n\nconst nextInputTypeMap = {\n  key: 'operator',\n  operator: 'value',\n  value: 'key',\n} as const;\n\nexport const switchToNextInputType = (\n  filterInputType: AdHocInputType,\n  setInputType: React.Dispatch<React.SetStateAction<AdHocInputType>>,\n  handleChangeViewMode: ((event?: React.MouseEvent, shouldFocusOnFilterPill?: boolean) => void) | undefined,\n  element: HTMLInputElement | null,\n  shouldFocusOnPillWrapperOverride?: boolean\n) =>\n  switchInputType(\n    nextInputTypeMap[filterInputType],\n    setInputType,\n    filterInputType === 'value' ? handleChangeViewMode : undefined,\n    element,\n    shouldFocusOnPillWrapperOverride\n  );\n\nexport const switchInputType = (\n  filterInputType: AdHocInputType,\n  setInputType: React.Dispatch<React.SetStateAction<AdHocInputType>>,\n  handleChangeViewMode?: (event?: React.MouseEvent, shouldFocusOnFilterPill?: boolean) => void,\n  element?: HTMLInputElement | null,\n  shouldFocusOnPillWrapperOverride?: boolean\n) => {\n  setInputType(filterInputType);\n\n  handleChangeViewMode?.(undefined, shouldFocusOnPillWrapperOverride);\n\n  setTimeout(() => element?.focus());\n};\n\nexport const generateFilterUpdatePayload = ({\n  filterInputType,\n  item,\n  filter,\n  setFilterMultiValues,\n  onAddCustomValue,\n}: {\n  filterInputType: AdHocInputType;\n  item: SelectableValue<string>;\n  filter: AdHocFilterWithLabels;\n  setFilterMultiValues: (value: React.SetStateAction<Array<SelectableValue<string>>>) => void;\n  onAddCustomValue?: OnAddCustomValueFn;\n}): Partial<AdHocFilterWithLabels> => {\n  if (filterInputType === 'key') {\n    return {\n      key: item.value,\n      keyLabel: item.label ? item.label : item.value,\n      meta: item?.meta,\n    };\n  }\n  if (filterInputType === 'value') {\n    if (item.isCustom && onAddCustomValue) {\n      return onAddCustomValue(item, filter);\n    }\n    return {\n      value: item.value,\n      valueLabels: [item.label ? item.label : item.value!],\n    };\n  }\n\n  if (filterInputType === 'operator') {\n    // handle values/valueLabels when switching from multi to single value operator\n    if (isMultiValueOperator(filter.operator) && !isMultiValueOperator(item.value!)) {\n      // reset local multi values state\n      setFilterMultiValues([]);\n      // update operator and reset values and valueLabels\n      return {\n        operator: item.value,\n        valueLabels: [filter.valueLabels?.[0] || filter.values?.[0] || filter.value],\n        values: undefined,\n      };\n    }\n\n    // handle values/valueLabels when switching from single to multi value operator\n    if (isMultiValueOperator(item.value!) && !isMultiValueOperator(filter.operator)) {\n      const valueLabels = [filter.valueLabels?.[0] || filter.values?.[0] || filter.value];\n      const values = [filter.value];\n\n      // populate local multi values state\n      if (values[0]) {\n        setFilterMultiValues([\n          {\n            value: values[0],\n            label: valueLabels?.[0] ?? values[0],\n          },\n        ]);\n      }\n\n      // update operator and default values and valueLabels\n      return {\n        operator: item.value,\n        valueLabels: valueLabels,\n        values: values,\n      };\n    }\n  }\n\n  // default operator update of same multi/single type\n  return {\n    [filterInputType]: item.value,\n  };\n};\n\nconst INPUT_PLACEHOLDER_DEFAULT = 'Filter by label values';\n\nexport const generatePlaceholder = (\n  filter: AdHocFilterWithLabels,\n  filterInputType: AdHocInputType,\n  isMultiValueEdit: boolean,\n  isAlwaysWip?: boolean,\n  inputPlaceholder?: string\n) => {\n  if (filterInputType === 'key') {\n    return inputPlaceholder || INPUT_PLACEHOLDER_DEFAULT;\n  }\n  if (filterInputType === 'value') {\n    if (isMultiValueEdit) {\n      return 'Edit values';\n    }\n    return filter.valueLabels?.[0] || '';\n  }\n\n  return filter[filterInputType] && !isAlwaysWip\n    ? `${filter[filterInputType]}`\n    : inputPlaceholder || INPUT_PLACEHOLDER_DEFAULT;\n};\n\nexport const populateInputValueOnInputTypeSwitch = ({\n  populateInputOnEdit,\n  item,\n  filterInputType,\n  setInputValue,\n  filter,\n}: {\n  populateInputOnEdit: boolean | undefined;\n  item: SelectableValue<string>;\n  filterInputType: AdHocInputType;\n  setInputValue: (value: React.SetStateAction<string>) => void;\n  filter: AdHocFilterWithLabels | undefined;\n}) => {\n  if (populateInputOnEdit && !isMultiValueOperator(item.value || '') && nextInputTypeMap[filterInputType] === 'value') {\n    setInputValue(filter?.valueLabels?.[0] ?? filter?.value ?? '');\n  } else {\n    setInputValue('');\n  }\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/packages/scenes/src/variables/adhoc/AdHocFiltersRecommendations.js

@@ -0,0 +1,154 @@
+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 { AdHocFiltersVariable } from './AdHocFiltersVariable.js';
+import { SceneObjectBase } from '../../core/SceneObjectBase.js';
+import { wrapInSafeSerializableSceneObject } from '../../utils/wrapInSafeSerializableSceneObject.js';
+
+const getRecentFiltersKey = (datasourceUid) => `grafana.filters.recent.${datasourceUid != null ? datasourceUid : "default"}`;
+class AdHocFiltersRecommendations extends SceneObjectBase {
+  constructor(state = {}) {
+    super(state);
+    this._activationHandler = () => {
+      const json = store.get(this._getStorageKey());
+      const storedFilters = json ? JSON.parse(json) : [];
+      if (storedFilters.length > 0) {
+        this._verifyRecentFiltersApplicability(storedFilters);
+      } else {
+        this.setState({ recentFilters: [] });
+      }
+      this._fetchRecommendedDrilldowns();
+      const scopesVariable = sceneGraph.lookupVariable(SCOPES_VARIABLE_NAME, this._adHocFilter);
+      let scopesSubscription;
+      if (scopesVariable instanceof ScopesVariable) {
+        this._subs.add(
+          scopesSubscription = scopesVariable.subscribeToState((newState, prevState) => {
+            if (newState.scopes !== prevState.scopes) {
+              const json2 = store.get(this._getStorageKey());
+              const storedFilters2 = json2 ? JSON.parse(json2) : [];
+              if (storedFilters2.length > 0) {
+                this._verifyRecentFiltersApplicability(storedFilters2);
+              }
+              this._fetchRecommendedDrilldowns();
+            }
+          })
+        );
+      }
+      return () => {
+        scopesSubscription == null ? void 0 : scopesSubscription.unsubscribe();
+      };
+    };
+    this.addActivationHandler(this._activationHandler);
+  }
+  get _adHocFilter() {
+    if (!(this.parent instanceof AdHocFiltersVariable)) {
+      throw new Error("AdHocFiltersRecommendations must be a child of AdHocFiltersVariable");
+    }
+    return this.parent;
+  }
+  get _scopedVars() {
+    return { __sceneObject: wrapInSafeSerializableSceneObject(this._adHocFilter) };
+  }
+  _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.setState({ 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.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 });
+  }
+  /**
+   * 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 = store.get(key);
+    const allRecentFilters = storedFilters ? JSON.parse(storedFilters) : [];
+    const updatedStoredFilters = [...allRecentFilters, filter].slice(-10);
+    store.set(key, JSON.stringify(updatedStoredFilters));
+    const adhoc = this._adHocFilter;
+    const existingFilter = adhoc.state.filters.find((f) => f.key === filter.key && !Boolean(f.nonApplicable));
+    if (existingFilter && !Boolean(existingFilter.nonApplicable)) {
+      this.setState({ recentFilters: updatedStoredFilters.slice(-3) });
+    }
+  }
+  addFilterToParent(filter) {
+    this._adHocFilter.updateFilters([...this._adHocFilter.state.filters, filter]);
+  }
+}
+AdHocFiltersRecommendations.Component = AdHocFiltersRecommendationsRenderer;
+function AdHocFiltersRecommendationsRenderer({ model }) {
+  const { recentFilters, recommendedFilters } = model.useState();
+  const { filters } = model._adHocFilter.useState();
+  const recentDrilldowns = recentFilters == null ? void 0 : recentFilters.map((filter) => ({
+    label: `${filter.key} ${filter.operator} ${filter.value}`,
+    onClick: () => {
+      const exists = filters.some((f) => f.key === filter.key && f.value === filter.value);
+      if (!exists) {
+        model.addFilterToParent(filter);
+      }
+    }
+  }));
+  const recommendedDrilldowns = recommendedFilters == null ? void 0 : recommendedFilters.map((filter) => ({
+    label: `${filter.key} ${filter.operator} ${filter.value}`,
+    onClick: () => {
+      const exists = filters.some((f) => f.key === filter.key && f.value === filter.value);
+      if (!exists) {
+        model.addFilterToParent(filter);
+      }
+    }
+  }));
+  return /* @__PURE__ */ React.createElement(DrilldownRecommendations, { recentDrilldowns, recommendedDrilldowns });
+}
+
+export { AdHocFiltersRecommendations, getRecentFiltersKey };
+//# sourceMappingURL=AdHocFiltersRecommendations.js.map

package/dist/esm/packages/scenes/src/variables/adhoc/AdHocFiltersRecommendations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdHocFiltersRecommendations.js","sources":["../../../../../../../src/variables/adhoc/AdHocFiltersRecommendations.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  // @ts-expect-error (temporary till we update grafana/data)\n  DrilldownsApplicability,\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 { AdHocFilterWithLabels, AdHocFiltersVariable } from './AdHocFiltersVariable';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { wrapInSafeSerializableSceneObject } from '../../utils/wrapInSafeSerializableSceneObject';\nimport { Unsubscribable } from 'rxjs';\n\nexport const MAX_RECENT_DRILLDOWNS = 3;\nexport const MAX_STORED_RECENT_DRILLDOWNS = 10;\n\nexport const getRecentFiltersKey = (datasourceUid: string | undefined) =>\n  `grafana.filters.recent.${datasourceUid ?? 'default'}`;\n\nexport interface AdHocFiltersRecommendationsState extends SceneObjectState {\n  recentFilters?: AdHocFilterWithLabels[];\n  recommendedFilters?: AdHocFilterWithLabels[];\n}\n\nexport class AdHocFiltersRecommendations extends SceneObjectBase<AdHocFiltersRecommendationsState> {\n  static Component = AdHocFiltersRecommendationsRenderer;\n\n  public constructor(state: Partial<AdHocFiltersRecommendationsState> = {}) {\n    super(state);\n\n    this.addActivationHandler(this._activationHandler);\n  }\n\n  public get _adHocFilter(): AdHocFiltersVariable {\n    if (!(this.parent instanceof AdHocFiltersVariable)) {\n      throw new Error('AdHocFiltersRecommendations must be a child of AdHocFiltersVariable');\n    }\n\n    return this.parent;\n  }\n\n  private get _scopedVars() {\n    return { __sceneObject: wrapInSafeSerializableSceneObject(this._adHocFilter) };\n  }\n\n  private _activationHandler = () => {\n    const json = store.get(this._getStorageKey());\n    const storedFilters = json ? JSON.parse(json) : [];\n\n    if (storedFilters.length > 0) {\n      this._verifyRecentFiltersApplicability(storedFilters);\n    } else {\n      this.setState({ recentFilters: [] });\n    }\n\n    this._fetchRecommendedDrilldowns();\n\n    // Set up subscription to scopes variable\n    const scopesVariable = sceneGraph.lookupVariable(SCOPES_VARIABLE_NAME, this._adHocFilter);\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 storedFilters = json ? JSON.parse(json) : [];\n\n            if (storedFilters.length > 0) {\n              this._verifyRecentFiltersApplicability(storedFilters);\n            }\n\n            this._fetchRecommendedDrilldowns();\n          }\n        }))\n      );\n    }\n\n    return () => {\n      scopesSubscription?.unsubscribe();\n    };\n  };\n\n  private _getStorageKey(): string {\n    return getRecentFiltersKey(this._adHocFilter.state.datasource?.uid);\n  }\n\n  private async _fetchRecommendedDrilldowns() {\n    const adhoc = this._adHocFilter;\n    const ds = await getDataSource(adhoc.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 = adhoc.state.useQueriesAsFilterForOptions ? getQueriesForVariables(adhoc) : undefined;\n    const timeRange = sceneGraph.getTimeRange(adhoc).state.value;\n    const scopes = sceneGraph.getScopes(adhoc);\n    const filters = [...(adhoc.state.originFilters ?? []), ...adhoc.state.filters];\n\n    const enrichedRequest = getEnrichedDataRequest(adhoc);\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: queries ?? [],\n        filters,\n        scopes,\n      });\n\n      if (recommendedDrilldowns?.filters) {\n        this.setState({ recommendedFilters: recommendedDrilldowns.filters });\n      }\n    } catch (error) {\n      console.error('Failed to fetch recommended drilldowns:', error);\n    }\n  }\n\n  private async _verifyRecentFiltersApplicability(storedFilters: AdHocFilterWithLabels[]) {\n    const adhoc = this._adHocFilter;\n    const queries = adhoc.state.useQueriesAsFilterForOptions ? getQueriesForVariables(adhoc) : undefined;\n    const response = await adhoc.getFiltersApplicabilityForQueries(storedFilters, queries ?? []);\n\n    if (!response) {\n      this.setState({ recentFilters: storedFilters.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 applicableFilters = storedFilters\n      .filter((f) => {\n        const isApplicable = applicabilityMap.get(f.key);\n        return isApplicable === undefined || isApplicable === true;\n      })\n      .slice(-MAX_RECENT_DRILLDOWNS);\n\n    this.setState({ recentFilters: applicableFilters });\n  }\n\n  /**\n   * Stores a recent filter in localStorage and updates state.\n   * Should be called by the parent variable when a filter is added/updated.\n   */\n  public storeRecentFilter(filter: AdHocFilterWithLabels) {\n    const key = this._getStorageKey();\n    const storedFilters = store.get(key);\n    const allRecentFilters = storedFilters ? JSON.parse(storedFilters) : [];\n\n    const updatedStoredFilters = [...allRecentFilters, filter].slice(-MAX_STORED_RECENT_DRILLDOWNS);\n    store.set(key, JSON.stringify(updatedStoredFilters));\n\n    const adhoc = this._adHocFilter;\n    const existingFilter = adhoc.state.filters.find((f) => f.key === filter.key && !Boolean(f.nonApplicable));\n    if (existingFilter && !Boolean(existingFilter.nonApplicable)) {\n      this.setState({ recentFilters: updatedStoredFilters.slice(-MAX_RECENT_DRILLDOWNS) });\n    }\n  }\n\n  public addFilterToParent(filter: AdHocFilterWithLabels) {\n    this._adHocFilter.updateFilters([...this._adHocFilter.state.filters, filter]);\n  }\n}\n\nfunction AdHocFiltersRecommendationsRenderer({ model }: SceneComponentProps<AdHocFiltersRecommendations>) {\n  const { recentFilters, recommendedFilters } = model.useState();\n  const { filters } = model._adHocFilter.useState();\n\n  const recentDrilldowns: DrilldownPill[] | undefined = recentFilters?.map((filter) => ({\n    label: `${filter.key} ${filter.operator} ${filter.value}`,\n    onClick: () => {\n      const exists = filters.some((f) => f.key === filter.key && f.value === filter.value);\n      if (!exists) {\n        model.addFilterToParent(filter);\n      }\n    },\n  }));\n\n  const recommendedDrilldowns: DrilldownPill[] | undefined = recommendedFilters?.map((filter) => ({\n    label: `${filter.key} ${filter.operator} ${filter.value}`,\n    onClick: () => {\n      const exists = filters.some((f) => f.key === filter.key && f.value === filter.value);\n      if (!exists) {\n        model.addFilterToParent(filter);\n      }\n    },\n  }));\n\n  return <DrilldownRecommendations recentDrilldowns={recentDrilldowns} recommendedDrilldowns={recommendedDrilldowns} />;\n}\n"],"names":["json","storedFilters"],"mappings":"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"}

package/dist/esm/packages/scenes/src/variables/adhoc/AdHocFiltersVariable.js

@@ -19,6 +19,7 @@ import { VariableDependencyConfig } from '../VariableDependencyConfig.js';
 import { getQueryController } from '../../core/sceneGraph/getQueryController.js';
 import { FILTER_RESTORED_INTERACTION, FILTER_REMOVED_INTERACTION } from '../../performance/interactionConstants.js';
 import { AdHocFiltersVariableController } from './controller/AdHocFiltersVariableController.js';
+import { AdHocFiltersRecommendations } from './AdHocFiltersRecommendations.js';
 
 const ORIGIN_FILTERS_KEY = "originFilters";
 const OPERATORS = [
@@ -69,15 +70,21 @@ const OPERATORS = [
 ];
 class AdHocFiltersVariable extends SceneObjectBase {
   constructor(state) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
+    const behaviors = (_a = state.$behaviors) != null ? _a : [];
+    const recommendations = state.drilldownRecommendationsEnabled ? new AdHocFiltersRecommendations() : void 0;
+    if (recommendations) {
+      behaviors.push(recommendations);
+    }
     super({
       type: "adhoc",
-      name: (_a = state.name) != null ? _a : "Filters",
+      name: (_b = state.name) != null ? _b : "Filters",
       filters: [],
       datasource: null,
       applyMode: "auto",
-      filterExpression: (_d = state.filterExpression) != null ? _d : renderExpression(state.expressionBuilder, [...(_b = state.originFilters) != null ? _b : [], ...(_c = state.filters) != null ? _c : []]),
-      ...state
+      filterExpression: (_e = state.filterExpression) != null ? _e : renderExpression(state.expressionBuilder, [...(_c = state.originFilters) != null ? _c : [], ...(_d = state.filters) != null ? _d : []]),
+      ...state,
+      $behaviors: behaviors.length > 0 ? behaviors : void 0
     });
     this._scopedVars = { __sceneObject: wrapInSafeSerializableSceneObject(this) };
     this._dataSourceSrv = getDataSourceSrv();
@@ -105,10 +112,11 @@ class AdHocFiltersVariable extends SceneObjectBase {
         this.setState({ applicabilityEnabled: false });
       };
     };
+    this._recommendations = recommendations;
     if (this.state.applyMode === "auto") {
       patchGetAdhocFilters(this);
     }
-    (_e = this.state.originFilters) == null ? void 0 : _e.forEach((filter) => {
+    (_f = this.state.originFilters) == null ? void 0 : _f.forEach((filter) => {
       var _a2;
       this._originalValues.set(`${filter.key}-${filter.origin}`, {
         operator: filter.operator,
@@ -117,6 +125,9 @@ class AdHocFiltersVariable extends SceneObjectBase {
     });
     this.addActivationHandler(this._activationHandler);
   }
+  getRecommendations() {
+    return this._recommendations;
+  }
   _updateScopesFilters() {
     var _a, _b;
     const scopes = sceneGraph.getScopes(this);
@@ -164,6 +175,11 @@ class AdHocFiltersVariable extends SceneObjectBase {
     this._prevScopes = scopes;
     this._debouncedVerifyApplicability();
   }
+  async verifyApplicabilityAndStoreRecentFilter(update) {
+    var _a;
+    await this._verifyApplicability();
+    (_a = this._recommendations) == null ? void 0 : _a.storeRecentFilter(update);
+  }
   setState(update) {
     var _a, _b;
     let filterExpressionChanged = false;
@@ -222,18 +238,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;
@@ -249,7 +253,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
     return this.state.filterExpression;
   }
   _updateFilter(filter, update) {
-    var _a;
+    var _a, _b;
     const { originFilters, filters, _wip } = this.state;
     if (filter.origin) {
       const originalValues = this._originalValues.get(`${filter.key}-${filter.origin}`);
@@ -267,8 +271,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 } });
       }
@@ -278,6 +285,10 @@ class AdHocFiltersVariable extends SceneObjectBase {
       return f === filter ? { ...f, ...update } : f;
     });
     this.setState({ filters: updatedFilters });
+    (_b = this._recommendations) == null ? void 0 : _b.storeRecentFilter({
+      ...filter,
+      ...update
+    });
   }
   updateToMatchAll(filter) {
     this._updateFilter(filter, {
@@ -468,11 +479,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)
           }
         };
       });