@grafana/scenes 6.41.1--canary.1289.18910649091.0 → 6.42.0

package/dist/index.js

@@ -6441,11 +6441,11 @@ const generateFilterUpdatePayload = ({
     [filterInputType]: item.value
   };
 };
-const INPUT_PLACEHOLDER = "Filter by label values";
-const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlwaysWip) => {
+const INPUT_PLACEHOLDER_DEFAULT = "Filter by label values";
+const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlwaysWip, inputPlaceholder) => {
   var _a;
   if (filterInputType === "key") {
-    return INPUT_PLACEHOLDER;
+    return inputPlaceholder || INPUT_PLACEHOLDER_DEFAULT;
   }
   if (filterInputType === "value") {
     if (isMultiValueEdit) {
@@ -6453,7 +6453,7 @@ const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlways
     }
     return ((_a = filter.valueLabels) == null ? void 0 : _a[0]) || "";
   }
-  return filter[filterInputType] && !isAlwaysWip ? `${filter[filterInputType]}` : INPUT_PLACEHOLDER;
+  return filter[filterInputType] && !isAlwaysWip ? `${filter[filterInputType]}` : inputPlaceholder || INPUT_PLACEHOLDER_DEFAULT;
 };
 const populateInputValueOnInputTypeSwitch = ({
   populateInputOnEdit,
@@ -6635,8 +6635,15 @@ const getStyles$c = (theme) => ({
   })
 });
 
-const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef, populateInputOnEdit }, parentRef) {
-  var _a, _b, _c, _d;
+const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
+  filter,
+  controller,
+  isAlwaysWip,
+  handleChangeViewMode,
+  focusOnWipInputRef,
+  populateInputOnEdit
+}, parentRef) {
+  var _a, _b, _c;
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState([]);
   const [optionsLoading, setOptionsLoading] = React.useState(false);
@@ -6648,7 +6655,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const styles = ui.useStyles2(getStyles$b);
   const [filterMultiValues, setFilterMultiValues] = React.useState([]);
   const [_, setForceRefresh] = React.useState({});
-  const allowCustomValue = (_a = model.state.allowCustomValue) != null ? _a : true;
+  const { allowCustomValue = true, onAddCustomValue, filters, inputPlaceholder } = controller.useState();
   const multiValuePillWrapperRef = React.useRef(null);
   const hasMultiValueOperator = isMultiValueOperator((filter == null ? void 0 : filter.operator) || "");
   const isMultiValueEdit = hasMultiValueOperator && filterInputType === "value";
@@ -6661,29 +6668,30 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     if (isAlwaysWip) {
       return false;
     }
-    if (model.state.filters.at(-1) === filter) {
+    if (filters.at(-1) === filter) {
       return true;
     }
     return false;
-  }, [filter, isAlwaysWip, model.state.filters]);
+  }, [filter, isAlwaysWip, filters]);
   const handleResetWip = React.useCallback(() => {
     if (isAlwaysWip) {
-      model._addWip();
+      controller.addWip();
       setInputType("key");
       setInputValue("");
     }
-  }, [model, isAlwaysWip]);
+  }, [controller, isAlwaysWip]);
   const handleMultiValueFilterCommit = React.useCallback(
-    (model2, filter2, filterMultiValues2, preventFocus) => {
+    (controller2, filter2, filterMultiValues2, preventFocus) => {
+      var _a2;
       if (!filterMultiValues2.length && filter2.origin) {
-        model2.updateToMatchAll(filter2);
+        controller2.updateToMatchAll(filter2);
       }
       if (filterMultiValues2.length) {
         const valueLabels = [];
         const values = [];
         filterMultiValues2.forEach((item) => {
-          var _a2;
-          valueLabels.push((_a2 = item.label) != null ? _a2 : item.value);
+          var _a3;
+          valueLabels.push((_a3 = item.label) != null ? _a3 : item.value);
           values.push(item.value);
         });
         let shouldUpdate = true;
@@ -6691,16 +6699,15 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
           shouldUpdate = !filter2.values.every((v, i) => v === values[i]);
         }
         if (shouldUpdate) {
-          const queryController = getQueryController(model2);
-          queryController == null ? void 0 : queryController.startProfile(FILTER_CHANGED_INTERACTION);
+          (_a2 = controller2.startProfile) == null ? void 0 : _a2.call(controller2, FILTER_CHANGED_INTERACTION);
         }
-        model2._updateFilter(filter2, { valueLabels, values, value: values[0] });
+        controller2.updateFilter(filter2, { valueLabels, values, value: values[0] });
         setFilterMultiValues([]);
       }
       if (!preventFocus) {
         setTimeout(() => {
-          var _a2;
-          return (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+          var _a3;
+          return (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
         });
       }
     },
@@ -6720,10 +6727,10 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       setOpen(nextOpen);
       if (reason && ["outside-press", "escape-key"].includes(reason)) {
         if (isMultiValueEdit) {
-          handleMultiValueFilterCommit(model, filter, filterMultiValues);
+          handleMultiValueFilterCommit(controller, filter, filterMultiValues);
         } else {
           if (filter && filter.origin && inputValue === "") {
-            model.updateToMatchAll(filter);
+            controller.updateToMatchAll(filter);
           }
         }
         handleResetWip();
@@ -6738,7 +6745,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       handleResetWip,
       inputValue,
       isMultiValueEdit,
-      model
+      controller
     ]
   );
   const outsidePressIdsToIgnore = React.useMemo(() => {
@@ -6797,15 +6804,13 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       filteredDropDownItems.push(customOptionValue);
     }
   }
-  const onAddCustomValue = model.state.onAddCustomValue;
   const maxOptionWidth = setupDropdownAccessibility(filteredDropDownItems, listRef, disabledIndicesRef);
   const handleFetchOptions = React.useCallback(
     async (inputType) => {
-      var _a2;
-      const profiler = getInteractionTracker(model);
+      var _a2, _b2, _c2, _d;
       const interactionName = inputType === "key" ? ADHOC_KEYS_DROPDOWN_INTERACTION : ADHOC_VALUES_DROPDOWN_INTERACTION;
       if (inputType !== "operator") {
-        profiler == null ? void 0 : profiler.startInteraction(interactionName);
+        (_a2 = controller.startInteraction) == null ? void 0 : _a2.call(controller, interactionName);
       }
       setOptionsError(false);
       setOptionsLoading(true);
@@ -6813,18 +6818,18 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       let options2 = [];
       try {
         if (inputType === "key") {
-          options2 = await model._getKeys(null);
+          options2 = await controller.getKeys(null);
         } else if (inputType === "operator") {
-          options2 = model._getOperators();
+          options2 = controller.getOperators();
         } else if (inputType === "value") {
-          options2 = await model._getValuesFor(filter);
+          options2 = await controller.getValuesFor(filter);
         }
         if (filterInputTypeRef.current !== inputType) {
-          profiler == null ? void 0 : profiler.stopInteraction();
+          (_b2 = controller.stopInteraction) == null ? void 0 : _b2.call(controller);
           return;
         }
         setOptions(options2);
-        if ((_a2 = options2[0]) == null ? void 0 : _a2.group) {
+        if ((_c2 = options2[0]) == null ? void 0 : _c2.group) {
           setActiveIndex(1);
         } else {
           setActiveIndex(0);
@@ -6833,9 +6838,9 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         setOptionsError(true);
       }
       setOptionsLoading(false);
-      profiler == null ? void 0 : profiler.stopInteraction();
+      (_d = controller.stopInteraction) == null ? void 0 : _d.call(controller);
     },
-    [filter, model]
+    [filter, controller]
   );
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: filteredDropDownItems.length,
@@ -6845,6 +6850,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   });
   const handleBackspaceInput = React.useCallback(
     (event, multiValueEdit) => {
+      var _a2;
       if (event.key === "Backspace" && !inputValue) {
         if (filterInputType === "value") {
           if (multiValueEdit) {
@@ -6865,10 +6871,9 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         }
         focusOnWipInputRef == null ? void 0 : focusOnWipInputRef();
         if (isFilterComplete(filter)) {
-          const queryController = getQueryController(model);
-          queryController == null ? void 0 : queryController.startProfile(FILTER_REMOVED_INTERACTION);
+          (_a2 = controller.startProfile) == null ? void 0 : _a2.call(controller, FILTER_REMOVED_INTERACTION);
         }
-        model._handleComboboxBackspace(filter);
+        controller.handleComboboxBackspace(filter);
         if (isAlwaysWip) {
           handleResetWip();
         }
@@ -6877,7 +6882,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     [
       inputValue,
       filterInputType,
-      model,
+      controller,
       filter,
       isAlwaysWip,
       filterMultiValues.length,
@@ -6891,7 +6896,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       if (event.key === "Tab" && !event.shiftKey) {
         if (multiValueEdit) {
           event.preventDefault();
-          handleMultiValueFilterCommit(model, filter, filterMultiValues);
+          handleMultiValueFilterCommit(controller, filter, filterMultiValues);
           (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
         }
         handleChangeViewMode == null ? void 0 : handleChangeViewMode();
@@ -6904,7 +6909,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       handleChangeViewMode,
       handleMultiValueFilterCommit,
       handleResetWip,
-      model,
+      controller,
       refs.domReference
     ]
   );
@@ -6913,16 +6918,17 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       if (event.key === "Tab" && event.shiftKey) {
         if (multiValueEdit) {
           event.preventDefault();
-          handleMultiValueFilterCommit(model, filter, filterMultiValues, true);
+          handleMultiValueFilterCommit(controller, filter, filterMultiValues, true);
         }
         handleChangeViewMode == null ? void 0 : handleChangeViewMode();
         handleResetWip();
       }
     },
-    [filter, filterMultiValues, handleChangeViewMode, handleMultiValueFilterCommit, handleResetWip, model]
+    [filter, filterMultiValues, handleChangeViewMode, handleMultiValueFilterCommit, handleResetWip, controller]
   );
   const handleEnterInput = React.useCallback(
     (event, multiValueEdit) => {
+      var _a2;
       if (event.key === "Enter" && activeIndex != null) {
         if (!filteredDropDownItems[activeIndex]) {
           return;
@@ -6940,10 +6946,9 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
             onAddCustomValue
           });
           if (filterInputType === "value" && payload.value !== (filter == null ? void 0 : filter.value)) {
-            const queryController = getQueryController(model);
-            queryController == null ? void 0 : queryController.startProfile(FILTER_CHANGED_INTERACTION);
+            (_a2 = controller.startProfile) == null ? void 0 : _a2.call(controller, FILTER_CHANGED_INTERACTION);
           }
-          model._updateFilter(filter, payload);
+          controller.updateFilter(filter, payload);
           populateInputValueOnInputTypeSwitch({
             populateInputOnEdit,
             item: selectedItem,
@@ -6970,7 +6975,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       activeIndex,
       filteredDropDownItems,
       handleLocalMultiValueChange,
-      model,
+      controller,
       filter,
       filterInputType,
       populateInputOnEdit,
@@ -7002,7 +7007,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     }
   }, [open, filterInputType]);
   React.useEffect(() => {
-    var _a2, _b2, _c2, _d2;
+    var _a2, _b2, _c2, _d;
     if (!isAlwaysWip) {
       if (hasMultiValueOperator && ((_a2 = filter == null ? void 0 : filter.values) == null ? void 0 : _a2.length)) {
         const multiValueOptions = filter.values.reduce(
@@ -7027,7 +7032,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
           (_a3 = refs.domReference.current) == null ? void 0 : _a3.select();
         });
       }
-      (_d2 = refs.domReference.current) == null ? void 0 : _d2.focus();
+      (_d = refs.domReference.current) == null ? void 0 : _d.focus();
     }
   }, []);
   React.useEffect(() => {
@@ -7046,7 +7051,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       rowVirtualizer.scrollToIndex(activeIndex);
     }
   }, [activeIndex, rowVirtualizer]);
-  const keyLabel = (_b = filter == null ? void 0 : filter.keyLabel) != null ? _b : filter == null ? void 0 : filter.key;
+  const keyLabel = (_a = filter == null ? void 0 : filter.keyLabel) != null ? _a : filter == null ? void 0 : filter.key;
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.comboboxWrapper }, filter ? /* @__PURE__ */ React__default.default.createElement("div", { className: styles.pillWrapper }, (filter == null ? void 0 : filter.key) ? /* @__PURE__ */ React__default.default.createElement("div", { className: css.cx(styles.basePill, styles.keyPill) }, keyLabel) : null, (filter == null ? void 0 : filter.key) && (filter == null ? void 0 : filter.operator) && filterInputType !== "operator" ? /* @__PURE__ */ React__default.default.createElement(
     "div",
     {
@@ -7101,7 +7106,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         onChange,
         value: inputValue,
         // dynamic placeholder to display operator and/or value in filter edit mode
-        placeholder: generatePlaceholder(filter, filterInputType, isMultiValueEdit, isAlwaysWip),
+        placeholder: generatePlaceholder(filter, filterInputType, isMultiValueEdit, isAlwaysWip, inputPlaceholder),
         "aria-autocomplete": "list",
         onKeyDown(event) {
           if (!open) {
@@ -7131,7 +7136,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       style: {
         ...floatingStyles,
         width: `${optionsError ? ERROR_STATE_DROPDOWN_WIDTH : maxOptionWidth}px`,
-        transform: isMultiValueEdit ? `translate(${((_c = multiValuePillWrapperRef.current) == null ? void 0 : _c.getBoundingClientRect().left) || 0}px, ${(((_d = refs.domReference.current) == null ? void 0 : _d.getBoundingClientRect().bottom) || 0) + 10}px )` : floatingStyles.transform
+        transform: isMultiValueEdit ? `translate(${((_b = multiValuePillWrapperRef.current) == null ? void 0 : _b.getBoundingClientRect().left) || 0}px, ${(((_c = refs.domReference.current) == null ? void 0 : _c.getBoundingClientRect().bottom) || 0) + 10}px )` : floatingStyles.transform
       },
       ref: refs.setFloating,
       className: styles.dropdownWrapper,
@@ -7180,7 +7185,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
                   listRef.current[index] = node;
                 },
                 onClick(event) {
-                  var _a3;
+                  var _a3, _b2;
                   if (filterInputType !== "value") {
                     event.stopPropagation();
                   }
@@ -7199,10 +7204,9 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
                       onAddCustomValue
                     });
                     if (filterInputType === "value" && payload.value !== (filter == null ? void 0 : filter.value)) {
-                      const queryController = getQueryController(model);
-                      queryController == null ? void 0 : queryController.startProfile(FILTER_CHANGED_INTERACTION);
+                      (_b2 = controller.startProfile) == null ? void 0 : _b2.call(controller, FILTER_CHANGED_INTERACTION);
                     }
-                    model._updateFilter(filter, payload);
+                    controller.updateFilter(filter, payload);
                     populateInputValueOnInputTypeSwitch({
                       populateInputOnEdit,
                       item,
@@ -7246,7 +7250,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     MultiValueApplyButton,
     {
       onApply: () => {
-        handleMultiValueFilterCommit(model, filter, filterMultiValues);
+        handleMultiValueFilterCommit(controller, filter, filterMultiValues);
       },
       floatingElement: refs.floating.current,
       maxOptionWidth,
@@ -7326,7 +7330,7 @@ const getStyles$b = (theme) => ({
 });
 
 const LABEL_MAX_VISIBLE_LENGTH = 20;
-function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
+function AdHocFilterPill({ filter, controller, readOnly, focusOnWipInputRef }) {
   var _a, _b, _c, _d;
   const styles = ui.useStyles2(getStyles$a);
   const [viewMode, setViewMode] = React.useState(true);
@@ -7356,9 +7360,9 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
   React.useEffect(() => {
     if (filter.forceEdit && viewMode) {
       setViewMode(false);
-      model._updateFilter(filter, { forceEdit: void 0 });
+      controller.updateFilter(filter, { forceEdit: void 0 });
     }
-  }, [filter, model, viewMode]);
+  }, [filter, controller, viewMode]);
   React.useEffect(() => {
     if (viewMode) {
       setPopulateInputOnEdit((prevValue) => prevValue ? false : prevValue);
@@ -7424,9 +7428,9 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
           onClick: (e) => {
             e.stopPropagation();
             if (filter.origin && filter.origin === "dashboard") {
-              model.updateToMatchAll(filter);
+              controller.updateToMatchAll(filter);
             } else {
-              model._removeFilter(filter);
+              controller.removeFilter(filter);
             }
             setTimeout(() => focusOnWipInputRef == null ? void 0 : focusOnWipInputRef());
           },
@@ -7435,9 +7439,9 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
               e.preventDefault();
               e.stopPropagation();
               if (filter.origin && filter.origin === "dashboard") {
-                model.updateToMatchAll(filter);
+                controller.updateToMatchAll(filter);
               } else {
-                model._removeFilter(filter);
+                controller.removeFilter(filter);
               }
               setTimeout(() => focusOnWipInputRef == null ? void 0 : focusOnWipInputRef());
             }
@@ -7470,13 +7474,13 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
         {
           onClick: (e) => {
             e.stopPropagation();
-            model.restoreOriginalFilter(filter);
+            controller.restoreOriginalFilter(filter);
           },
           onKeyDownCapture: (e) => {
             if (e.key === "Enter") {
               e.preventDefault();
               e.stopPropagation();
-              model.restoreOriginalFilter(filter);
+              controller.restoreOriginalFilter(filter);
             }
           },
           name: "history",
@@ -7499,7 +7503,7 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
     AdHocCombobox,
     {
       filter,
-      model,
+      controller,
       handleChangeViewMode,
       focusOnWipInputRef,
       populateInputOnEdit
@@ -7578,18 +7582,18 @@ const getStyles$a = (theme) => ({
   ...getNonApplicablePillStyles(theme)
 });
 
-const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ model }, parentRef) {
-  const { _wip } = model.useState();
+const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ controller }, parentRef) {
+  const { wip } = controller.useState();
   React.useLayoutEffect(() => {
-    if (!_wip) {
-      model._addWip();
+    if (!wip) {
+      controller.addWip();
     }
-  }, [_wip]);
-  return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { model, filter: _wip, isAlwaysWip: true, ref: parentRef });
+  }, [wip]);
+  return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { controller, filter: wip, isAlwaysWip: true, ref: parentRef });
 });
 
-const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ model }) {
-  const { originFilters, filters, readOnly } = model.useState();
+const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
+  const { originFilters, filters, readOnly } = controller.useState();
   const styles = ui.useStyles2(getStyles$9);
   const focusOnWipInputRef = React.useRef();
   return /* @__PURE__ */ React__default.default.createElement(
@@ -7608,7 +7612,7 @@ const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRen
         {
           key: `${index}-${filter.key}`,
           filter,
-          model,
+          controller,
           focusOnWipInputRef: focusOnWipInputRef.current
         }
       ) : null
@@ -7618,12 +7622,12 @@ const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRen
       {
         key: `${index}-${filter.key}`,
         filter,
-        model,
+        controller,
         readOnly: readOnly || filter.readOnly,
         focusOnWipInputRef: focusOnWipInputRef.current
       }
     )),
-    !readOnly ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { model, ref: focusOnWipInputRef }) : null
+    !readOnly ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { controller, ref: focusOnWipInputRef }) : null
   );
 });
 const getStyles$9 = (theme) => ({
@@ -7745,6 +7749,66 @@ function hasSameOperators(scopeConvertedOperator, filterOperator) {
   return true;
 }
 
+class AdHocFiltersVariableController {
+  constructor(model) {
+    this.model = model;
+  }
+  useState() {
+    const state = this.model.useState();
+    return {
+      filters: state.filters,
+      originFilters: state.originFilters,
+      readOnly: state.readOnly,
+      allowCustomValue: state.allowCustomValue,
+      supportsMultiValueOperators: state.supportsMultiValueOperators,
+      onAddCustomValue: state.onAddCustomValue,
+      wip: state._wip
+    };
+  }
+  async getKeys(currentKey) {
+    return this.model._getKeys(currentKey);
+  }
+  async getValuesFor(filter) {
+    return this.model._getValuesFor(filter);
+  }
+  getOperators() {
+    return this.model._getOperators();
+  }
+  updateFilter(filter, update) {
+    this.model._updateFilter(filter, update);
+  }
+  updateToMatchAll(filter) {
+    this.model.updateToMatchAll(filter);
+  }
+  removeFilter(filter) {
+    this.model._removeFilter(filter);
+  }
+  removeLastFilter() {
+    this.model._removeLastFilter();
+  }
+  handleComboboxBackspace(filter) {
+    this.model._handleComboboxBackspace(filter);
+  }
+  addWip() {
+    this.model._addWip();
+  }
+  restoreOriginalFilter(filter) {
+    this.model.restoreOriginalFilter(filter);
+  }
+  startProfile(name) {
+    const queryController = getQueryController(this.model);
+    queryController == null ? void 0 : queryController.startProfile(name);
+  }
+  startInteraction(name) {
+    const interactionTracker = getInteractionTracker(this.model);
+    interactionTracker == null ? void 0 : interactionTracker.startInteraction(name);
+  }
+  stopInteraction() {
+    const interactionTracker = getInteractionTracker(this.model);
+    interactionTracker == null ? void 0 : interactionTracker.stopInteraction();
+  }
+}
+
 const OPERATORS = [
   {
     value: "=",
@@ -8220,8 +8284,12 @@ function renderExpression(builder, filters) {
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
   const styles = ui.useStyles2(getStyles$8);
-  if (model.state.layout === "combobox") {
-    return /* @__PURE__ */ React__default.default.createElement(AdHocFiltersComboboxRenderer, { model });
+  const controller = React.useMemo(
+    () => model.state.layout === "combobox" ? new AdHocFiltersVariableController(model) : void 0,
+    [model]
+  );
+  if (controller) {
+    return /* @__PURE__ */ React__default.default.createElement(AdHocFiltersComboboxRenderer, { controller });
   }
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, filters.filter((filter) => !filter.hidden).map((filter, index) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, { key: index }, /* @__PURE__ */ React__default.default.createElement(AdHocFilterRenderer, { filter, model }))), !readOnly && /* @__PURE__ */ React__default.default.createElement(AdHocFilterBuilder, { model, key: "'builder", addFilterButtonText }));
 }
@@ -10705,6 +10773,53 @@ class SceneDataLayerBase extends SceneObjectBase {
   }
 }
 
+class SceneDataLayerControls extends SceneObjectBase {
+  constructor() {
+    super({});
+  }
+}
+SceneDataLayerControls.Component = SceneDataLayerControlsRenderer;
+function SceneDataLayerControlsRenderer({ model }) {
+  const layers = sceneGraph.getDataLayers(model, true);
+  if (layers.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, layers.map((layer) => /* @__PURE__ */ React__default.default.createElement(layer.Component, { model: layer, key: layer.state.key })));
+}
+function DataLayerControlSwitch({ layer }) {
+  var _a, _b;
+  const elementId = `data-layer-${layer.state.key}`;
+  const { data, isEnabled } = layer.useState();
+  const showLoading = Boolean(data && data.state === schema.LoadingState.Loading);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: containerStyle$1 }, /* @__PURE__ */ React__default.default.createElement(
+    ControlsLabel,
+    {
+      htmlFor: elementId,
+      isLoading: showLoading,
+      onCancel: () => {
+        var _a2;
+        return (_a2 = layer.cancelQuery) == null ? void 0 : _a2.call(layer);
+      },
+      label: layer.state.name,
+      description: layer.state.description,
+      error: (_b = (_a = layer.state.data) == null ? void 0 : _a.errors) == null ? void 0 : _b[0].message
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(
+    ui.InlineSwitch,
+    {
+      className: switchStyle,
+      id: elementId,
+      value: isEnabled,
+      onChange: () => layer.setState({ isEnabled: !isEnabled })
+    }
+  ));
+}
+const containerStyle$1 = css.css({ display: "flex" });
+const switchStyle = css.css({
+  borderBottomLeftRadius: 0,
+  borderTopLeftRadius: 0
+});
+
 const standardAnnotationSupport = {
   /**
    * Assume the stored value is standard model.
@@ -11158,25 +11273,12 @@ class AnnotationsDataLayer extends SceneDataLayerBase {
 }
 AnnotationsDataLayer.Component = AnnotationsDataLayerRenderer;
 function AnnotationsDataLayerRenderer({ model }) {
-  const { isEnabled, isHidden } = model.useState();
-  const elementId = `data-layer-${model.state.key}`;
+  const { isHidden } = model.useState();
   if (isHidden) {
     return null;
   }
-  return /* @__PURE__ */ React__default.default.createElement(
-    ui.InlineSwitch,
-    {
-      className: switchStyle,
-      id: elementId,
-      value: isEnabled,
-      onChange: () => model.setState({ isEnabled: !isEnabled })
-    }
-  );
+  return /* @__PURE__ */ React__default.default.createElement(DataLayerControlSwitch, { layer: model });
 }
-const switchStyle = css.css({
-  borderBottomLeftRadius: 0,
-  borderTopLeftRadius: 0
-});
 
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -11290,44 +11392,6 @@ class DataProviderProxy extends SceneObjectBase {
   }
 }
 
-class SceneDataLayerControls extends SceneObjectBase {
-  constructor() {
-    super({});
-  }
-}
-SceneDataLayerControls.Component = SceneDataLayerControlsRenderer;
-function SceneDataLayerControlsRenderer({ model }) {
-  const layers = sceneGraph.getDataLayers(model, true);
-  if (layers.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, layers.map((layer) => /* @__PURE__ */ React__default.default.createElement(SceneDataLayerControlRenderer, { layer, key: layer.state.key })));
-}
-function SceneDataLayerControlRenderer({ layer }) {
-  var _a, _b;
-  const elementId = `data-layer-${layer.state.key}`;
-  const { data, isHidden } = layer.useState();
-  const showLoading = Boolean(data && data.state === schema.LoadingState.Loading);
-  if (isHidden) {
-    return null;
-  }
-  return /* @__PURE__ */ React__default.default.createElement("div", { className: containerStyle$1 }, /* @__PURE__ */ React__default.default.createElement(
-    ControlsLabel,
-    {
-      htmlFor: elementId,
-      isLoading: showLoading,
-      onCancel: () => {
-        var _a2;
-        return (_a2 = layer.cancelQuery) == null ? void 0 : _a2.call(layer);
-      },
-      label: layer.state.name,
-      description: layer.state.description,
-      error: (_b = (_a = layer.state.data) == null ? void 0 : _a.errors) == null ? void 0 : _b[0].message
-    }
-  ), /* @__PURE__ */ React__default.default.createElement(layer.Component, { model: layer }));
-}
-const containerStyle$1 = css.css({ display: "flex" });
-
 class VariableValueSelectors extends SceneObjectBase {
 }
 VariableValueSelectors.Component = VariableValueSelectorsRenderer;
@@ -16024,7 +16088,9 @@ const sceneUtils = {
   buildPathIdFor
 };
 
+exports.AdHocFiltersComboboxRenderer = AdHocFiltersComboboxRenderer;
 exports.AdHocFiltersVariable = AdHocFiltersVariable;
+exports.AdHocFiltersVariableController = AdHocFiltersVariableController;
 exports.ConstantVariable = ConstantVariable;
 exports.ControlsLabel = ControlsLabel;
 exports.CustomVariable = CustomVariable;