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

package/dist/index.js

@@ -1061,7 +1061,6 @@ var __privateWrapper = (obj, member, setter, getter) => ({
 var _profileInProgress, _interactionInProgress, _profileStartTs, _trailAnimationFrameId, _recordedTrailingSpans, _longFrameDetector, _longFramesCount, _longFramesTotalTime, _visibilityChangeHandler, _onInteractionComplete;
 const POST_STORM_WINDOW = 2e3;
 const DEFAULT_LONG_FRAME_THRESHOLD = 30;
-const TAB_INACTIVE_THRESHOLD = 1e3;
 class SceneRenderProfiler {
   constructor(queryController) {
     this.queryController = queryController;
@@ -1081,11 +1080,6 @@ class SceneRenderProfiler {
       var _a, _b, _c, _d;
       const currentFrameTime = performance.now();
       const frameLength = currentFrameTime - lastFrameTime;
-      if (frameLength > TAB_INACTIVE_THRESHOLD) {
-        writeSceneLog("SceneRenderProfiler", "Tab was inactive, cancelling profile measurement");
-        this.cancelProfile();
-        return;
-      }
       __privateGet$2(this, _recordedTrailingSpans).push(frameLength);
       if (currentFrameTime - measurementStartTs < POST_STORM_WINDOW) {
         if (__privateGet$2(this, _profileInProgress)) {
@@ -3603,7 +3597,7 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
 function DefaultGroupByCustomIndicatorContainer(props) {
   const { model } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$i(theme);
+  const styles = getStyles$j(theme);
   const inputStyles = ui.getInputStyles({ theme, invalid: false });
   const value = lodash.isArray(model.state.value) ? model.state.value : model.state.value ? [model.state.value] : [];
   let buttons = [];
@@ -3685,7 +3679,7 @@ function DefaultGroupByCustomIndicatorContainer(props) {
     buttons
   );
 }
-const getStyles$i = (theme) => ({
+const getStyles$j = (theme) => ({
   clearIcon: css.css({
     color: theme.colors.action.disabledText,
     cursor: "pointer",
@@ -4206,7 +4200,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$h);
+  const styles = ui.useStyles2(getStyles$i);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default.default.createElement(
@@ -4253,7 +4247,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$h = (theme) => ({
+const getStyles$i = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -4306,7 +4300,7 @@ function keyLabelToOption(key, label) {
 const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b, _c, _d, _e;
-  const styles = ui.useStyles2(getStyles$g);
+  const styles = ui.useStyles2(getStyles$h);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -4533,12 +4527,18 @@ function AdHocFilterRenderer({ filter, model }) {
     }
   ));
 }
-const getStyles$g = (theme) => ({
+const getStyles$h = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
   wrapper: css.css({
     display: "flex",
+    "&:first-child": {
+      "> :first-child": {
+        borderBottomLeftRadius: 0,
+        borderTopLeftRadius: 0
+      }
+    },
     "> *": {
       "&:not(:first-child)": {
         // Negative margin hides the double-border on adjacent selects
@@ -4600,6 +4600,7 @@ const getStyles$g = (theme) => ({
 
 function AdHocFilterBuilder({ model, addFilterButtonText }) {
   const { _wip } = model.useState();
+  const styles = ui.useStyles2(getStyles$g);
   if (!_wip) {
     return /* @__PURE__ */ React__default.default.createElement(
       ui.Button,
@@ -4609,13 +4610,22 @@ function AdHocFilterBuilder({ model, addFilterButtonText }) {
         title: i18n.t("grafana-scenes.variables.ad-hoc-filter-builder.title-add-filter", "Add filter"),
         "aria-label": i18n.t("grafana-scenes.variables.ad-hoc-filter-builder.aria-label-add-filter", "Add filter"),
         "data-testid": `AdHocFilter-add`,
-        onClick: () => model._addWip()
+        onClick: () => model._addWip(),
+        className: styles.addButton
       },
       addFilterButtonText
     );
   }
   return /* @__PURE__ */ React__default.default.createElement(AdHocFilterRenderer, { filter: _wip, model });
 }
+const getStyles$g = (theme) => ({
+  addButton: css.css({
+    "&:first-child": {
+      borderBottomLeftRadius: 0,
+      borderTopLeftRadius: 0
+    }
+  })
+});
 
 class AdHocFiltersVariableUrlSyncHandler {
   constructor(_variable) {
@@ -4939,11 +4949,11 @@ const generateFilterUpdatePayload = ({
     [filterInputType]: item.value
   };
 };
-const INPUT_PLACEHOLDER_DEFAULT = "Filter by label values";
-const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlwaysWip, inputPlaceholder) => {
+const INPUT_PLACEHOLDER = "Filter by label values";
+const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlwaysWip) => {
   var _a;
   if (filterInputType === "key") {
-    return inputPlaceholder || INPUT_PLACEHOLDER_DEFAULT;
+    return INPUT_PLACEHOLDER;
   }
   if (filterInputType === "value") {
     if (isMultiValueEdit) {
@@ -4951,7 +4961,7 @@ const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlways
     }
     return ((_a = filter.valueLabels) == null ? void 0 : _a[0]) || "";
   }
-  return filter[filterInputType] && !isAlwaysWip ? `${filter[filterInputType]}` : inputPlaceholder || INPUT_PLACEHOLDER_DEFAULT;
+  return filter[filterInputType] && !isAlwaysWip ? `${filter[filterInputType]}` : INPUT_PLACEHOLDER;
 };
 const populateInputValueOnInputTypeSwitch = ({
   populateInputOnEdit,
@@ -5133,15 +5143,8 @@ const getStyles$e = (theme) => ({
   })
 });
 
-const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
-  filter,
-  controller,
-  isAlwaysWip,
-  handleChangeViewMode,
-  focusOnWipInputRef,
-  populateInputOnEdit
-}, parentRef) {
-  var _a, _b, _c;
+const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef, populateInputOnEdit }, parentRef) {
+  var _a, _b, _c, _d;
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState([]);
   const [optionsLoading, setOptionsLoading] = React.useState(false);
@@ -5153,7 +5156,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
   const styles = ui.useStyles2(getStyles$d);
   const [filterMultiValues, setFilterMultiValues] = React.useState([]);
   const [_, setForceRefresh] = React.useState({});
-  const { allowCustomValue = true, onAddCustomValue, filters, inputPlaceholder } = controller.useState();
+  const allowCustomValue = (_a = model.state.allowCustomValue) != null ? _a : true;
   const multiValuePillWrapperRef = React.useRef(null);
   const hasMultiValueOperator = isMultiValueOperator((filter == null ? void 0 : filter.operator) || "");
   const isMultiValueEdit = hasMultiValueOperator && filterInputType === "value";
@@ -5166,30 +5169,29 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
     if (isAlwaysWip) {
       return false;
     }
-    if (filters.at(-1) === filter) {
+    if (model.state.filters.at(-1) === filter) {
       return true;
     }
     return false;
-  }, [filter, isAlwaysWip, filters]);
+  }, [filter, isAlwaysWip, model.state.filters]);
   const handleResetWip = React.useCallback(() => {
     if (isAlwaysWip) {
-      controller.addWip();
+      model._addWip();
       setInputType("key");
       setInputValue("");
     }
-  }, [controller, isAlwaysWip]);
+  }, [model, isAlwaysWip]);
   const handleMultiValueFilterCommit = React.useCallback(
-    (controller2, filter2, filterMultiValues2, preventFocus) => {
-      var _a2;
+    (model2, filter2, filterMultiValues2, preventFocus) => {
       if (!filterMultiValues2.length && filter2.origin) {
-        controller2.updateToMatchAll(filter2);
+        model2.updateToMatchAll(filter2);
       }
       if (filterMultiValues2.length) {
         const valueLabels = [];
         const values = [];
         filterMultiValues2.forEach((item) => {
-          var _a3;
-          valueLabels.push((_a3 = item.label) != null ? _a3 : item.value);
+          var _a2;
+          valueLabels.push((_a2 = item.label) != null ? _a2 : item.value);
           values.push(item.value);
         });
         let shouldUpdate = true;
@@ -5197,15 +5199,16 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
           shouldUpdate = !filter2.values.every((v, i) => v === values[i]);
         }
         if (shouldUpdate) {
-          (_a2 = controller2.startProfile) == null ? void 0 : _a2.call(controller2, FILTER_CHANGED_INTERACTION);
+          const queryController = getQueryController(model2);
+          queryController == null ? void 0 : queryController.startProfile(FILTER_CHANGED_INTERACTION);
         }
-        controller2.updateFilter(filter2, { valueLabels, values, value: values[0] });
+        model2._updateFilter(filter2, { valueLabels, values, value: values[0] });
         setFilterMultiValues([]);
       }
       if (!preventFocus) {
         setTimeout(() => {
-          var _a3;
-          return (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
+          var _a2;
+          return (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
         });
       }
     },
@@ -5225,10 +5228,10 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       setOpen(nextOpen);
       if (reason && ["outside-press", "escape-key"].includes(reason)) {
         if (isMultiValueEdit) {
-          handleMultiValueFilterCommit(controller, filter, filterMultiValues);
+          handleMultiValueFilterCommit(model, filter, filterMultiValues);
         } else {
           if (filter && filter.origin && inputValue === "") {
-            controller.updateToMatchAll(filter);
+            model.updateToMatchAll(filter);
           }
         }
         handleResetWip();
@@ -5243,7 +5246,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       handleResetWip,
       inputValue,
       isMultiValueEdit,
-      controller
+      model
     ]
   );
   const outsidePressIdsToIgnore = React.useMemo(() => {
@@ -5302,13 +5305,15 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       filteredDropDownItems.push(customOptionValue);
     }
   }
+  const onAddCustomValue = model.state.onAddCustomValue;
   const maxOptionWidth = setupDropdownAccessibility(filteredDropDownItems, listRef, disabledIndicesRef);
   const handleFetchOptions = React.useCallback(
     async (inputType) => {
-      var _a2, _b2, _c2, _d;
+      var _a2;
+      const profiler = getInteractionTracker(model);
       const interactionName = inputType === "key" ? ADHOC_KEYS_DROPDOWN_INTERACTION : ADHOC_VALUES_DROPDOWN_INTERACTION;
       if (inputType !== "operator") {
-        (_a2 = controller.startInteraction) == null ? void 0 : _a2.call(controller, interactionName);
+        profiler == null ? void 0 : profiler.startInteraction(interactionName);
       }
       setOptionsError(false);
       setOptionsLoading(true);
@@ -5316,18 +5321,18 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       let options2 = [];
       try {
         if (inputType === "key") {
-          options2 = await controller.getKeys(null);
+          options2 = await model._getKeys(null);
         } else if (inputType === "operator") {
-          options2 = controller.getOperators();
+          options2 = model._getOperators();
         } else if (inputType === "value") {
-          options2 = await controller.getValuesFor(filter);
+          options2 = await model._getValuesFor(filter);
         }
         if (filterInputTypeRef.current !== inputType) {
-          (_b2 = controller.stopInteraction) == null ? void 0 : _b2.call(controller);
+          profiler == null ? void 0 : profiler.stopInteraction();
           return;
         }
         setOptions(options2);
-        if ((_c2 = options2[0]) == null ? void 0 : _c2.group) {
+        if ((_a2 = options2[0]) == null ? void 0 : _a2.group) {
           setActiveIndex(1);
         } else {
           setActiveIndex(0);
@@ -5336,9 +5341,9 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
         setOptionsError(true);
       }
       setOptionsLoading(false);
-      (_d = controller.stopInteraction) == null ? void 0 : _d.call(controller);
+      profiler == null ? void 0 : profiler.stopInteraction();
     },
-    [filter, controller]
+    [filter, model]
   );
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: filteredDropDownItems.length,
@@ -5348,7 +5353,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
   });
   const handleBackspaceInput = React.useCallback(
     (event, multiValueEdit) => {
-      var _a2;
       if (event.key === "Backspace" && !inputValue) {
         if (filterInputType === "value") {
           if (multiValueEdit) {
@@ -5369,9 +5373,10 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
         }
         focusOnWipInputRef == null ? void 0 : focusOnWipInputRef();
         if (isFilterComplete(filter)) {
-          (_a2 = controller.startProfile) == null ? void 0 : _a2.call(controller, FILTER_REMOVED_INTERACTION);
+          const queryController = getQueryController(model);
+          queryController == null ? void 0 : queryController.startProfile(FILTER_REMOVED_INTERACTION);
         }
-        controller.handleComboboxBackspace(filter);
+        model._handleComboboxBackspace(filter);
         if (isAlwaysWip) {
           handleResetWip();
         }
@@ -5380,7 +5385,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
     [
       inputValue,
       filterInputType,
-      controller,
+      model,
       filter,
       isAlwaysWip,
       filterMultiValues.length,
@@ -5394,7 +5399,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       if (event.key === "Tab" && !event.shiftKey) {
         if (multiValueEdit) {
           event.preventDefault();
-          handleMultiValueFilterCommit(controller, filter, filterMultiValues);
+          handleMultiValueFilterCommit(model, filter, filterMultiValues);
           (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
         }
         handleChangeViewMode == null ? void 0 : handleChangeViewMode();
@@ -5407,7 +5412,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       handleChangeViewMode,
       handleMultiValueFilterCommit,
       handleResetWip,
-      controller,
+      model,
       refs.domReference
     ]
   );
@@ -5416,17 +5421,16 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       if (event.key === "Tab" && event.shiftKey) {
         if (multiValueEdit) {
           event.preventDefault();
-          handleMultiValueFilterCommit(controller, filter, filterMultiValues, true);
+          handleMultiValueFilterCommit(model, filter, filterMultiValues, true);
         }
         handleChangeViewMode == null ? void 0 : handleChangeViewMode();
         handleResetWip();
       }
     },
-    [filter, filterMultiValues, handleChangeViewMode, handleMultiValueFilterCommit, handleResetWip, controller]
+    [filter, filterMultiValues, handleChangeViewMode, handleMultiValueFilterCommit, handleResetWip, model]
   );
   const handleEnterInput = React.useCallback(
     (event, multiValueEdit) => {
-      var _a2;
       if (event.key === "Enter" && activeIndex != null) {
         if (!filteredDropDownItems[activeIndex]) {
           return;
@@ -5444,9 +5448,10 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
             onAddCustomValue
           });
           if (filterInputType === "value" && payload.value !== (filter == null ? void 0 : filter.value)) {
-            (_a2 = controller.startProfile) == null ? void 0 : _a2.call(controller, FILTER_CHANGED_INTERACTION);
+            const queryController = getQueryController(model);
+            queryController == null ? void 0 : queryController.startProfile(FILTER_CHANGED_INTERACTION);
           }
-          controller.updateFilter(filter, payload);
+          model._updateFilter(filter, payload);
           populateInputValueOnInputTypeSwitch({
             populateInputOnEdit,
             item: selectedItem,
@@ -5473,7 +5478,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       activeIndex,
       filteredDropDownItems,
       handleLocalMultiValueChange,
-      controller,
+      model,
       filter,
       filterInputType,
       populateInputOnEdit,
@@ -5505,7 +5510,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
     }
   }, [open, filterInputType]);
   React.useEffect(() => {
-    var _a2, _b2, _c2, _d;
+    var _a2, _b2, _c2, _d2;
     if (!isAlwaysWip) {
       if (hasMultiValueOperator && ((_a2 = filter == null ? void 0 : filter.values) == null ? void 0 : _a2.length)) {
         const multiValueOptions = filter.values.reduce(
@@ -5530,7 +5535,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
           (_a3 = refs.domReference.current) == null ? void 0 : _a3.select();
         });
       }
-      (_d = refs.domReference.current) == null ? void 0 : _d.focus();
+      (_d2 = refs.domReference.current) == null ? void 0 : _d2.focus();
     }
   }, []);
   React.useEffect(() => {
@@ -5549,7 +5554,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       rowVirtualizer.scrollToIndex(activeIndex);
     }
   }, [activeIndex, rowVirtualizer]);
-  const keyLabel = (_a = filter == null ? void 0 : filter.keyLabel) != null ? _a : filter == null ? void 0 : filter.key;
+  const keyLabel = (_b = filter == null ? void 0 : filter.keyLabel) != null ? _b : 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",
     {
@@ -5604,7 +5609,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
         onChange,
         value: inputValue,
         // dynamic placeholder to display operator and/or value in filter edit mode
-        placeholder: generatePlaceholder(filter, filterInputType, isMultiValueEdit, isAlwaysWip, inputPlaceholder),
+        placeholder: generatePlaceholder(filter, filterInputType, isMultiValueEdit, isAlwaysWip),
         "aria-autocomplete": "list",
         onKeyDown(event) {
           if (!open) {
@@ -5634,7 +5639,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       style: {
         ...floatingStyles,
         width: `${optionsError ? ERROR_STATE_DROPDOWN_WIDTH : maxOptionWidth}px`,
-        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
+        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
       },
       ref: refs.setFloating,
       className: styles.dropdownWrapper,
@@ -5683,7 +5688,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
                   listRef.current[index] = node;
                 },
                 onClick(event) {
-                  var _a3, _b2;
+                  var _a3;
                   if (filterInputType !== "value") {
                     event.stopPropagation();
                   }
@@ -5702,9 +5707,10 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
                       onAddCustomValue
                     });
                     if (filterInputType === "value" && payload.value !== (filter == null ? void 0 : filter.value)) {
-                      (_b2 = controller.startProfile) == null ? void 0 : _b2.call(controller, FILTER_CHANGED_INTERACTION);
+                      const queryController = getQueryController(model);
+                      queryController == null ? void 0 : queryController.startProfile(FILTER_CHANGED_INTERACTION);
                     }
-                    controller.updateFilter(filter, payload);
+                    model._updateFilter(filter, payload);
                     populateInputValueOnInputTypeSwitch({
                       populateInputOnEdit,
                       item,
@@ -5748,7 +5754,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
     MultiValueApplyButton,
     {
       onApply: () => {
-        handleMultiValueFilterCommit(controller, filter, filterMultiValues);
+        handleMultiValueFilterCommit(model, filter, filterMultiValues);
       },
       floatingElement: refs.floating.current,
       maxOptionWidth,
@@ -5828,7 +5834,7 @@ const getStyles$d = (theme) => ({
 });
 
 const LABEL_MAX_VISIBLE_LENGTH = 20;
-function AdHocFilterPill({ filter, controller, readOnly, focusOnWipInputRef }) {
+function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
   var _a, _b, _c, _d;
   const styles = ui.useStyles2(getStyles$c);
   const [viewMode, setViewMode] = React.useState(true);
@@ -5858,9 +5864,9 @@ function AdHocFilterPill({ filter, controller, readOnly, focusOnWipInputRef }) {
   React.useEffect(() => {
     if (filter.forceEdit && viewMode) {
       setViewMode(false);
-      controller.updateFilter(filter, { forceEdit: void 0 });
+      model._updateFilter(filter, { forceEdit: void 0 });
     }
-  }, [filter, controller, viewMode]);
+  }, [filter, model, viewMode]);
   React.useEffect(() => {
     if (viewMode) {
       setPopulateInputOnEdit((prevValue) => prevValue ? false : prevValue);
@@ -5926,9 +5932,9 @@ function AdHocFilterPill({ filter, controller, readOnly, focusOnWipInputRef }) {
           onClick: (e) => {
             e.stopPropagation();
             if (filter.origin && filter.origin === "dashboard") {
-              controller.updateToMatchAll(filter);
+              model.updateToMatchAll(filter);
             } else {
-              controller.removeFilter(filter);
+              model._removeFilter(filter);
             }
             setTimeout(() => focusOnWipInputRef == null ? void 0 : focusOnWipInputRef());
           },
@@ -5937,9 +5943,9 @@ function AdHocFilterPill({ filter, controller, readOnly, focusOnWipInputRef }) {
               e.preventDefault();
               e.stopPropagation();
               if (filter.origin && filter.origin === "dashboard") {
-                controller.updateToMatchAll(filter);
+                model.updateToMatchAll(filter);
               } else {
-                controller.removeFilter(filter);
+                model._removeFilter(filter);
               }
               setTimeout(() => focusOnWipInputRef == null ? void 0 : focusOnWipInputRef());
             }
@@ -5972,13 +5978,13 @@ function AdHocFilterPill({ filter, controller, readOnly, focusOnWipInputRef }) {
         {
           onClick: (e) => {
             e.stopPropagation();
-            controller.restoreOriginalFilter(filter);
+            model.restoreOriginalFilter(filter);
           },
           onKeyDownCapture: (e) => {
             if (e.key === "Enter") {
               e.preventDefault();
               e.stopPropagation();
-              controller.restoreOriginalFilter(filter);
+              model.restoreOriginalFilter(filter);
             }
           },
           name: "history",
@@ -6001,7 +6007,7 @@ function AdHocFilterPill({ filter, controller, readOnly, focusOnWipInputRef }) {
     AdHocCombobox,
     {
       filter,
-      controller,
+      model,
       handleChangeViewMode,
       focusOnWipInputRef,
       populateInputOnEdit
@@ -6080,18 +6086,18 @@ const getStyles$c = (theme) => ({
   ...getNonApplicablePillStyles(theme)
 });
 
-const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ controller }, parentRef) {
-  const { wip } = controller.useState();
+const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ model }, parentRef) {
+  const { _wip } = model.useState();
   React.useLayoutEffect(() => {
-    if (!wip) {
-      controller.addWip();
+    if (!_wip) {
+      model._addWip();
     }
-  }, [wip]);
-  return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { controller, filter: wip, isAlwaysWip: true, ref: parentRef });
+  }, [_wip]);
+  return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { model, filter: _wip, isAlwaysWip: true, ref: parentRef });
 });
 
-const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
-  const { originFilters, filters, readOnly } = controller.useState();
+const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ model }) {
+  const { originFilters, filters, readOnly } = model.useState();
   const styles = ui.useStyles2(getStyles$b);
   const focusOnWipInputRef = React.useRef();
   return /* @__PURE__ */ React__default.default.createElement(
@@ -6110,7 +6116,7 @@ const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRen
         {
           key: `${index}-${filter.key}`,
           filter,
-          controller,
+          model,
           focusOnWipInputRef: focusOnWipInputRef.current
         }
       ) : null
@@ -6120,12 +6126,12 @@ const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRen
       {
         key: `${index}-${filter.key}`,
         filter,
-        controller,
+        model,
         readOnly: readOnly || filter.readOnly,
         focusOnWipInputRef: focusOnWipInputRef.current
       }
     )),
-    !readOnly ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { controller, ref: focusOnWipInputRef }) : null
+    !readOnly ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { model, ref: focusOnWipInputRef }) : null
   );
 });
 const getStyles$b = (theme) => ({
@@ -6247,66 +6253,6 @@ 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: "=",
@@ -6782,9 +6728,8 @@ function renderExpression(builder, filters) {
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
   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, { controller });
+    return /* @__PURE__ */ React__default.default.createElement(AdHocFiltersComboboxRenderer, { model });
   }
   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 }));
 }
@@ -9514,19 +9459,25 @@ class SceneDataTransformer extends SceneObjectBase {
     if (!force && this.haveAlreadyTransformedData(data$1)) {
       return;
     }
-    let interpolatedTransformations = this._interpolateVariablesInTransformationConfigs(data$1);
-    const seriesTransformations = interpolatedTransformations.filter((transformation) => {
-      if ("options" in transformation || "topic" in transformation) {
-        return transformation.topic == null || transformation.topic === data.DataTopic.Series;
+    const interpolatedTransformations = this._interpolateVariablesInTransformationConfigs(data$1);
+    const seriesTransformations = this._filterAndPrepareTransformationsByTopic(
+      interpolatedTransformations,
+      (transformation) => {
+        if ("options" in transformation || "topic" in transformation) {
+          return transformation.topic == null || transformation.topic === data.DataTopic.Series;
+        }
+        return true;
       }
-      return true;
-    }).map((transformation) => "operator" in transformation ? transformation.operator : transformation);
-    const annotationsTransformations = interpolatedTransformations.filter((transformation) => {
-      if ("options" in transformation || "topic" in transformation) {
-        return transformation.topic === data.DataTopic.Annotations;
+    );
+    const annotationsTransformations = this._filterAndPrepareTransformationsByTopic(
+      interpolatedTransformations,
+      (transformation) => {
+        if ("options" in transformation || "topic" in transformation) {
+          return transformation.topic === data.DataTopic.Annotations;
+        }
+        return false;
       }
-      return false;
-    }).map((transformation) => "operator" in transformation ? transformation.operator : transformation);
+    );
     if (this._transformSub) {
       this._transformSub.unsubscribe();
     }
@@ -9536,13 +9487,11 @@ class SceneDataTransformer extends SceneObjectBase {
         return sceneGraph.interpolate(this, value, { ...(_a2 = data$1.request) == null ? void 0 : _a2.scopedVars, ...scopedVars });
       }
     };
-    let streams = [data.transformDataFrame(seriesTransformations, data$1.series, ctx)];
-    if (data$1.annotations && data$1.annotations.length > 0 && annotationsTransformations.length > 0) {
-      streams.push(data.transformDataFrame(annotationsTransformations, (_a = data$1.annotations) != null ? _a : []));
-    }
+    const seriesStream = data.transformDataFrame(seriesTransformations, data$1.series, ctx);
+    const annotationsStream = data.transformDataFrame(annotationsTransformations, (_a = data$1.annotations) != null ? _a : []);
     let series = [];
     let annotations = [];
-    this._transformSub = rxjs.forkJoin(streams).pipe(
+    this._transformSub = rxjs.forkJoin([seriesStream, annotationsStream]).pipe(
       rxjs.map((results) => {
         results.forEach((frames) => {
           var _a2;
@@ -9591,6 +9540,9 @@ class SceneDataTransformer extends SceneObjectBase {
       return typeof t === "object" ? JSON.parse(sceneGraph.interpolate(this, JSON.stringify(t), (_a2 = data.request) == null ? void 0 : _a2.scopedVars)) : t;
     });
   }
+  _filterAndPrepareTransformationsByTopic(interpolatedTransformations, transformationFilter) {
+    return interpolatedTransformations.filter(transformationFilter).map((transformation) => "operator" in transformation ? transformation.operator : transformation);
+  }
 }
 
 class VizPanel extends SceneObjectBase {
@@ -13194,9 +13146,15 @@ const DEFAULT_COMPARE_OPTIONS = [
   { label: "Month before", value: "1M" }
 ];
 class SceneTimeRangeCompare extends SceneObjectBase {
-  constructor(state) {
-    super({ compareOptions: DEFAULT_COMPARE_OPTIONS, ...state });
-    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["compareWith"] });
+  constructor(state = {}) {
+    super({
+      key: state.key || "compareWith",
+      compareOptions: DEFAULT_COMPARE_OPTIONS,
+      ...state
+    });
+    this._urlSync = new SceneObjectUrlSyncConfig(this, {
+      keys: () => [this.state.key || "compareWith"]
+    });
     this._onActivate = () => {
       const sceneTimeRange = sceneGraph.getTimeRange(this);
       this.setState({ compareOptions: this.getCompareOptions(sceneTimeRange.state.value) });
@@ -13283,25 +13241,22 @@ class SceneTimeRangeCompare extends SceneObjectBase {
     return void 0;
   }
   getUrlState() {
-    return {
-      compareWith: this.state.compareWith
-    };
+    const key = this.state.key || "compareWith";
+    return { [key]: this.state.compareWith };
   }
   updateFromUrl(values) {
-    if (!values.compareWith) {
+    const key = this.state.key || "compareWith";
+    if (values[key] === PREVIOUS_PERIOD_VALUE) {
+      this.setState({ compareWith: PREVIOUS_PERIOD_VALUE });
       return;
     }
-    const compareWith = parseUrlParam(values.compareWith);
+    const compareWith = parseUrlParam(values[key]);
     if (compareWith) {
       const compareOptions = this.getCompareOptions(sceneGraph.getTimeRange(this).state.value);
       if (compareOptions.find(({ value }) => value === compareWith)) {
-        this.setState({
-          compareWith
-        });
+        this.setState({ compareWith });
       } else {
-        this.setState({
-          compareWith: "__previousPeriod"
-        });
+        this.setState({ compareWith: PREVIOUS_PERIOD_VALUE });
       }
     }
   }
@@ -15493,7 +15448,6 @@ const sceneUtils = {
   buildPathIdFor
 };
 
-exports.AdHocFiltersComboboxRenderer = AdHocFiltersComboboxRenderer;
 exports.AdHocFiltersVariable = AdHocFiltersVariable;
 exports.ConstantVariable = ConstantVariable;
 exports.ControlsLabel = ControlsLabel;
@@ -15564,7 +15518,6 @@ exports.TextBoxVariable = TextBoxVariable;
 exports.UrlSyncContextProvider = UrlSyncContextProvider;
 exports.UrlSyncManager = UrlSyncManager;
 exports.UserActionEvent = UserActionEvent;
-exports.VariableBackedAdHocFiltersController = VariableBackedAdHocFiltersController;
 exports.VariableDependencyConfig = VariableDependencyConfig;
 exports.VariableValueControl = VariableValueControl;
 exports.VariableValueSelectWrapper = VariableValueSelectWrapper;