@grafana/scenes 6.40.0--canary.1255.18001595104.0 → 6.40.0--canary.1272.18407272616.0

package/dist/index.js

@@ -3603,7 +3603,7 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
 function DefaultGroupByCustomIndicatorContainer(props) {
   const { model } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$h(theme);
+  const styles = getStyles$i(theme);
   const inputStyles = ui.getInputStyles({ theme, invalid: false });
   const value = lodash.isArray(model.state.value) ? model.state.value : model.state.value ? [model.state.value] : [];
   let buttons = [];
@@ -3685,7 +3685,7 @@ function DefaultGroupByCustomIndicatorContainer(props) {
     buttons
   );
 }
-const getStyles$h = (theme) => ({
+const getStyles$i = (theme) => ({
   clearIcon: css.css({
     color: theme.colors.action.disabledText,
     cursor: "pointer",
@@ -4206,7 +4206,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$g);
+  const styles = ui.useStyles2(getStyles$h);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default.default.createElement(
@@ -4253,7 +4253,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$g = (theme) => ({
+const getStyles$h = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -4306,7 +4306,7 @@ function keyLabelToOption(key, label) {
 const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b, _c, _d, _e;
-  const styles = ui.useStyles2(getStyles$f);
+  const styles = ui.useStyles2(getStyles$g);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -4533,7 +4533,7 @@ function AdHocFilterRenderer({ filter, model }) {
     }
   ));
 }
-const getStyles$f = (theme) => ({
+const getStyles$g = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -4733,7 +4733,7 @@ function isFilter(filter) {
 
 const DropdownItem = React.forwardRef(
   function DropdownItem2({ children, active, addGroupBottomBorder, isMultiValueEdit, checked, ...rest }, ref) {
-    const styles = ui.useStyles2(getStyles$e);
+    const styles = ui.useStyles2(getStyles$f);
     const id = React.useId();
     return /* @__PURE__ */ React__default.default.createElement(
       "div",
@@ -4749,7 +4749,7 @@ const DropdownItem = React.forwardRef(
     );
   }
 );
-const getStyles$e = (theme) => ({
+const getStyles$f = (theme) => ({
   option: css.css({
     label: "grafana-select-option",
     top: 0,
@@ -4819,7 +4819,7 @@ const MultiValueApplyButton = ({
   maxOptionWidth,
   menuHeight
 }) => {
-  const styles = ui.useStyles2(getStyles$e);
+  const styles = ui.useStyles2(getStyles$f);
   const floatingElementRect = floatingElement == null ? void 0 : floatingElement.getBoundingClientRect();
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
@@ -4939,11 +4939,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) {
@@ -4951,7 +4951,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,
@@ -5040,7 +5040,7 @@ const MultiValuePill = ({
   handleEditMultiValuePill
 }) => {
   var _a, _b;
-  const styles = ui.useStyles2(getStyles$d);
+  const styles = ui.useStyles2(getStyles$e);
   const editMultiValuePill = React.useCallback(
     (e) => {
       e.stopPropagation();
@@ -5104,7 +5104,7 @@ const MultiValuePill = ({
     )
   );
 };
-const getStyles$d = (theme) => ({
+const getStyles$e = (theme) => ({
   basePill: css.css({
     display: "flex",
     alignItems: "center",
@@ -5133,8 +5133,15 @@ const getStyles$d = (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);
@@ -5143,10 +5150,10 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const [activeIndex, setActiveIndex] = React.useState(null);
   const [filterInputType, setInputType] = React.useState(!isAlwaysWip ? "value" : "key");
   const [preventFiltering, setPreventFiltering] = React.useState(!isAlwaysWip && filterInputType === "value");
-  const styles = ui.useStyles2(getStyles$c);
+  const styles = ui.useStyles2(getStyles$d);
   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";
@@ -5159,29 +5166,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;
@@ -5189,16 +5197,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();
         });
       }
     },
@@ -5218,10 +5225,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();
@@ -5236,7 +5243,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       handleResetWip,
       inputValue,
       isMultiValueEdit,
-      model
+      controller
     ]
   );
   const outsidePressIdsToIgnore = React.useMemo(() => {
@@ -5295,15 +5302,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);
@@ -5311,18 +5316,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);
@@ -5331,9 +5336,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,
@@ -5343,6 +5348,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) {
@@ -5363,10 +5369,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();
         }
@@ -5375,7 +5380,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     [
       inputValue,
       filterInputType,
-      model,
+      controller,
       filter,
       isAlwaysWip,
       filterMultiValues.length,
@@ -5389,7 +5394,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();
@@ -5402,7 +5407,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       handleChangeViewMode,
       handleMultiValueFilterCommit,
       handleResetWip,
-      model,
+      controller,
       refs.domReference
     ]
   );
@@ -5411,16 +5416,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;
@@ -5438,10 +5444,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,
@@ -5468,7 +5473,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       activeIndex,
       filteredDropDownItems,
       handleLocalMultiValueChange,
-      model,
+      controller,
       filter,
       filterInputType,
       populateInputOnEdit,
@@ -5500,7 +5505,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(
@@ -5525,7 +5530,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(() => {
@@ -5544,7 +5549,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",
     {
@@ -5599,7 +5604,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) {
@@ -5623,13 +5628,13 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         setOpen(true);
       }
     }
-  ), optionsLoading ? /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { className: styles.loadingIndicator, inline: true }) : null, /* @__PURE__ */ React__default.default.createElement(react.FloatingPortal, null, open && /* @__PURE__ */ React__default.default.createElement(react.FloatingFocusManager, { context, initialFocus: -1, visuallyHiddenDismiss: true, modal: false }, /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+  ), optionsLoading ? /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { className: styles.loadingIndicator, inline: true }) : null, /* @__PURE__ */ React__default.default.createElement(react.FloatingPortal, null, open && /* @__PURE__ */ React__default.default.createElement(react.FloatingFocusManager, { context, initialFocus: -1, visuallyHiddenDismiss: true, modal: true }, /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
     "div",
     {
       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,
@@ -5678,7 +5683,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();
                   }
@@ -5697,10 +5702,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,
@@ -5744,7 +5748,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     MultiValueApplyButton,
     {
       onApply: () => {
-        handleMultiValueFilterCommit(model, filter, filterMultiValues);
+        handleMultiValueFilterCommit(controller, filter, filterMultiValues);
       },
       floatingElement: refs.floating.current,
       maxOptionWidth,
@@ -5752,7 +5756,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     }
   ) : null))));
 });
-const getStyles$c = (theme) => ({
+const getStyles$d = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
     flexWrap: "wrap"
@@ -5824,9 +5828,9 @@ const getStyles$c = (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$b);
+  const styles = ui.useStyles2(getStyles$c);
   const [viewMode, setViewMode] = React.useState(true);
   const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = React.useState(false);
   const pillWrapperRef = React.useRef(null);
@@ -5854,9 +5858,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);
@@ -5922,9 +5926,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());
           },
@@ -5933,9 +5937,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());
             }
@@ -5968,13 +5972,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",
@@ -5997,14 +6001,14 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
     AdHocCombobox,
     {
       filter,
-      model,
+      controller,
       handleChangeViewMode,
       focusOnWipInputRef,
       populateInputOnEdit
     }
   );
 }
-const getStyles$b = (theme) => ({
+const getStyles$c = (theme) => ({
   combinedFilterPill: css.css({
     display: "flex",
     alignItems: "center",
@@ -6076,19 +6080,19 @@ const getStyles$b = (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 styles = ui.useStyles2(getStyles$a);
+const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
+  const { originFilters, filters, readOnly } = controller.useState();
+  const styles = ui.useStyles2(getStyles$b);
   const focusOnWipInputRef = React.useRef();
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
@@ -6106,7 +6110,7 @@ const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRen
         {
           key: `${index}-${filter.key}`,
           filter,
-          model,
+          controller,
           focusOnWipInputRef: focusOnWipInputRef.current
         }
       ) : null
@@ -6116,15 +6120,15 @@ 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$a = (theme) => ({
+const getStyles$b = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -6243,6 +6247,66 @@ function hasSameOperators(scopeConvertedOperator, filterOperator) {
   return true;
 }
 
+class VariableBackedAdHocFiltersController {
+  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: "=",
@@ -6717,13 +6781,14 @@ function renderExpression(builder, filters) {
 }
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
-  const styles = ui.useStyles2(getStyles$9);
+  const styles = ui.useStyles2(getStyles$a);
+  const controller = React.useMemo(() => new VariableBackedAdHocFiltersController(model), [model]);
   if (model.state.layout === "combobox") {
-    return /* @__PURE__ */ React__default.default.createElement(AdHocFiltersComboboxRenderer, { model });
+    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 }));
 }
-const getStyles$9 = (theme) => ({
+const getStyles$a = (theme) => ({
   wrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -8615,6 +8680,9 @@ function isTextBoxVariable(variable) {
 function isGroupByVariable(variable) {
   return variable.state.type === "groupby";
 }
+function isSwitchVariable(variable) {
+  return variable.state.type === "switch";
+}
 
 class ActWhenVariableChanged extends SceneObjectBase {
   constructor() {
@@ -8690,7 +8758,7 @@ function getCursorSyncScope(sceneObject) {
 }
 
 function VizPanelSeriesLimit({ data, showAll, seriesLimit, onShowAllSeries }) {
-  const styles = ui.useStyles2(getStyles$8);
+  const styles = ui.useStyles2(getStyles$9);
   const seriesCount = data == null ? void 0 : data.series.length;
   if (seriesCount === void 0 || seriesCount < seriesLimit) {
     return null;
@@ -8720,7 +8788,7 @@ function VizPanelSeriesLimit({ data, showAll, seriesLimit, onShowAllSeries }) {
     /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", onClick: onShowAllSeries }, buttonText)
   ));
 }
-const getStyles$8 = (theme) => ({
+const getStyles$9 = (theme) => ({
   timeSeriesDisclaimer: css.css({
     label: "time-series-disclaimer",
     display: "flex",
@@ -8745,7 +8813,7 @@ function useUniqueId() {
 const LazyLoader = React__default.default.forwardRef(
   ({ children, onLoad, onChange, className, ...rest }, ref) => {
     const id = useUniqueId();
-    const { hideEmpty } = ui.useStyles2(getStyles$7);
+    const { hideEmpty } = ui.useStyles2(getStyles$8);
     const [loaded, setLoaded] = React.useState(false);
     const [isInView, setIsInView] = React.useState(false);
     const innerRef = React.useRef(null);
@@ -8774,7 +8842,7 @@ const LazyLoader = React__default.default.forwardRef(
     return /* @__PURE__ */ React__default.default.createElement("div", { id, ref: innerRef, className: `${hideEmpty} ${className}`, ...rest }, !loaded ? i18n.t("grafana-scenes.components.lazy-loader.placeholder", "\xA0") : /* @__PURE__ */ React__default.default.createElement(LazyLoaderInViewContext.Provider, { value: isInView }, children));
   }
 );
-function getStyles$7() {
+function getStyles$8() {
   return {
     hideEmpty: css.css({
       "&:empty": {
@@ -9584,14 +9652,10 @@ class VizPanel extends SceneObjectBase {
         collapsed
       });
     };
-    this.onOptionsChange = (options, replace = false) => {
+    this.onOptionsChange = (optionsUpdate, replace = false, isAfterPluginChange = false) => {
       var _a;
-      const { options: prevOptions } = this.state;
-      const _renderCounter = ((_a = this.state._renderCounter) != null ? _a : 0) + 1;
-      if (replace) {
-        return this.setState({ options, _renderCounter });
-      }
-      options = lodash.mergeWith(lodash.cloneDeep(prevOptions), options, (objValue, srcValue, key, obj) => {
+      const { fieldConfig, options } = this.state;
+      const nextOptions = replace ? optionsUpdate : lodash.mergeWith(lodash.cloneDeep(options), optionsUpdate, (objValue, srcValue, key, obj) => {
         if (lodash.isArray(srcValue)) {
           return srcValue;
         }
@@ -9601,7 +9665,16 @@ class VizPanel extends SceneObjectBase {
         }
         return;
       });
-      this.setState({ options, _renderCounter });
+      const withDefaults = data.getPanelOptionsWithDefaults({
+        plugin: this._plugin,
+        currentOptions: nextOptions,
+        currentFieldConfig: fieldConfig,
+        isAfterPluginChange
+      });
+      this.setState({
+        options: withDefaults.options,
+        _renderCounter: ((_a = this.state._renderCounter) != null ? _a : 0) + 1
+      });
     };
     this.onFieldConfigChange = (fieldConfigUpdate, replace) => {
       const { fieldConfig, options } = this.state;
@@ -9823,13 +9896,7 @@ class VizPanel extends SceneObjectBase {
     };
     const updatedOptions = (_b = (_a = this._plugin) == null ? void 0 : _a.onPanelTypeChanged) == null ? void 0 : _b.call(_a, panel, prevPluginId, prevOptions, prevFieldConfig);
     if (updatedOptions && !lodash.isEmpty(updatedOptions)) {
-      const { options } = data.getPanelOptionsWithDefaults({
-        plugin: this._plugin,
-        currentOptions: updatedOptions,
-        currentFieldConfig: this.state.fieldConfig,
-        isAfterPluginChange
-      });
-      this.onOptionsChange(options, true);
+      this.onOptionsChange(updatedOptions, true, true);
     }
   }
   clearFieldConfigCache() {
@@ -10141,9 +10208,21 @@ function DataLayerControlSwitch({ layer }) {
       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, { id: elementId, value: isEnabled, onChange: () => layer.setState({ isEnabled: !isEnabled }) }));
+  ), /* @__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 = {
   /**
@@ -11099,11 +11178,13 @@ class CustomVariable extends MultiValueVariable {
       statePaths: ["query"]
     });
   }
-  getValueOptions(args) {
+  // We expose this publicly as we also need it outside the variable
+  // The interpolate flag is needed since we don't always want to get the interpolated options
+  transformCsvStringToOptions(str, interpolate = true) {
     var _a;
-    const interpolated = sceneGraph.interpolate(this, this.state.query);
-    const match = (_a = interpolated.match(/(?:\\,|[^,])+/g)) != null ? _a : [];
-    const options = match.map((text) => {
+    str = interpolate ? sceneGraph.interpolate(this, str) : str;
+    const match = (_a = str.match(/(?:\\,|[^,])+/g)) != null ? _a : [];
+    return match.map((text) => {
       var _a2;
       text = text.replace(/\\,/g, ",");
       const textMatch = (_a2 = /^\s*(.+)\s:\s(.+)$/g.exec(text)) != null ? _a2 : [];
@@ -11114,6 +11195,9 @@ class CustomVariable extends MultiValueVariable {
         return { label: text.trim(), value: text.trim() };
       }
     });
+  }
+  getValueOptions(args) {
+    const options = this.transformCsvStringToOptions(this.state.query);
     if (!options.length) {
       this.skipNextValidation = true;
     }
@@ -11124,6 +11208,104 @@ CustomVariable.Component = ({ model }) => {
   return /* @__PURE__ */ React__default.default.createElement(MultiOrSingleValueSelect, { model });
 };
 
+class SwitchVariable extends SceneObjectBase {
+  constructor(initialState) {
+    super({
+      // TODO: remove this once switch is in the schema @leventebalogh
+      // @ts-expect-error - switch is a valid variable type, but not in the schema yet
+      type: "switch",
+      value: "false",
+      enabledValue: "true",
+      disabledValue: "false",
+      name: "",
+      ...initialState
+    });
+    this._prevValue = "";
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => this.getKeys() });
+  }
+  /**
+   * This function is called on when SceneVariableSet is activated or when a dependency changes.
+   */
+  validateAndUpdate() {
+    const newValue = this.getValue();
+    if (this._prevValue !== newValue) {
+      this._prevValue = newValue;
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    }
+    return rxjs.of({});
+  }
+  setValue(newValue) {
+    if (this.getValue() === newValue) {
+      return;
+    }
+    if ([this.state.enabledValue, this.state.disabledValue].includes(newValue)) {
+      this.setState({ value: newValue });
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    } else {
+      console.error(
+        `Invalid value for switch variable: "${newValue}". Valid values are: "${this.state.enabledValue}" and "${this.state.disabledValue}".`
+      );
+    }
+  }
+  getValue() {
+    return this.state.value;
+  }
+  isEnabled() {
+    return this.state.value === this.state.enabledValue;
+  }
+  isDisabled() {
+    return this.state.value === this.state.disabledValue;
+  }
+  getKey() {
+    return `var-${this.state.name}`;
+  }
+  getKeys() {
+    if (this.state.skipUrlSync) {
+      return [];
+    }
+    return [this.getKey()];
+  }
+  getUrlState() {
+    if (this.state.skipUrlSync) {
+      return {};
+    }
+    return { [this.getKey()]: this.state.value };
+  }
+  updateFromUrl(values) {
+    const val = values[this.getKey()];
+    if (typeof val === "string") {
+      this.setValue(val);
+    }
+  }
+}
+SwitchVariable.Component = SwitchVariableRenderer;
+function SwitchVariableRenderer({ model }) {
+  const state = model.useState();
+  const styles = ui.useStyles2(getStyles$7);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Switch,
+    {
+      value: state.value === state.enabledValue,
+      onChange: (event) => {
+        model.setValue(event.currentTarget.checked ? state.enabledValue : state.disabledValue);
+      }
+    }
+  ));
+}
+function getStyles$7(theme) {
+  return {
+    container: css.css({
+      display: "flex",
+      alignItems: "center",
+      padding: theme.spacing(0, 1),
+      height: theme.spacing(theme.components.height.md),
+      borderRadius: theme.shape.radius.default,
+      border: `1px solid ${theme.components.input.borderColor}`,
+      background: theme.colors.background.primary
+    })
+  };
+}
+
 class DataSourceVariable extends MultiValueVariable {
   constructor(initialState) {
     super({
@@ -15306,10 +15488,12 @@ const sceneUtils = {
   isQueryVariable,
   isTextBoxVariable,
   isGroupByVariable,
+  isSwitchVariable,
   isRepeatCloneOrChildOf,
   buildPathIdFor
 };
 
+exports.AdHocFiltersComboboxRenderer = AdHocFiltersComboboxRenderer;
 exports.AdHocFiltersVariable = AdHocFiltersVariable;
 exports.ConstantVariable = ConstantVariable;
 exports.ControlsLabel = ControlsLabel;
@@ -15374,11 +15558,13 @@ exports.SceneVariableSet = SceneVariableSet;
 exports.SceneVariableValueChangedEvent = SceneVariableValueChangedEvent;
 exports.ScopesVariable = ScopesVariable;
 exports.SplitLayout = SplitLayout;
+exports.SwitchVariable = SwitchVariable;
 exports.TestVariable = TestVariable;
 exports.TextBoxVariable = TextBoxVariable;
 exports.UrlSyncContextProvider = UrlSyncContextProvider;
 exports.UrlSyncManager = UrlSyncManager;
 exports.UserActionEvent = UserActionEvent;
+exports.VariableBackedAdHocFiltersController = VariableBackedAdHocFiltersController;
 exports.VariableDependencyConfig = VariableDependencyConfig;
 exports.VariableValueControl = VariableValueControl;
 exports.VariableValueSelectWrapper = VariableValueSelectWrapper;