@grafana/scenes 5.5.2--canary.830.10005065313.0 → 5.6.1--canary.840.10038144895.0

package/dist/index.js

@@ -14,8 +14,6 @@ var ui = require('@grafana/ui');
 var e2eSelectors = require('@grafana/e2e-selectors');
 var css = require('@emotion/css');
 var uFuzzy = require('@leeoniya/ufuzzy');
-var react = require('@floating-ui/react');
-var reactDom = require('react-dom');
 var reactUse = require('react-use');
 var operators = require('rxjs/operators');
 var ReactGridLayout = require('react-grid-layout');
@@ -43,19 +41,19 @@ var uFuzzy__default = /*#__PURE__*/_interopDefaultLegacy(uFuzzy);
 var ReactGridLayout__default = /*#__PURE__*/_interopDefaultLegacy(ReactGridLayout);
 var AutoSizer__default = /*#__PURE__*/_interopDefaultLegacy(AutoSizer);
 
-var __defProp$M = Object.defineProperty;
-var __getOwnPropSymbols$M = Object.getOwnPropertySymbols;
-var __hasOwnProp$M = Object.prototype.hasOwnProperty;
-var __propIsEnum$M = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$M = (obj, key, value) => key in obj ? __defProp$M(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$M = (a, b) => {
+var __defProp$K = Object.defineProperty;
+var __getOwnPropSymbols$K = Object.getOwnPropertySymbols;
+var __hasOwnProp$K = Object.prototype.hasOwnProperty;
+var __propIsEnum$K = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$K = (obj, key, value) => key in obj ? __defProp$K(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$K = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$M.call(b, prop))
-      __defNormalProp$M(a, prop, b[prop]);
-  if (__getOwnPropSymbols$M)
-    for (var prop of __getOwnPropSymbols$M(b)) {
-      if (__propIsEnum$M.call(b, prop))
-        __defNormalProp$M(a, prop, b[prop]);
+    if (__hasOwnProp$K.call(b, prop))
+      __defNormalProp$K(a, prop, b[prop]);
+  if (__getOwnPropSymbols$K)
+    for (var prop of __getOwnPropSymbols$K(b)) {
+      if (__propIsEnum$K.call(b, prop))
+        __defNormalProp$K(a, prop, b[prop]);
     }
   return a;
 };
@@ -64,7 +62,7 @@ function useAppQueryParams() {
   return runtime.locationSearchToObject(location.search || "");
 }
 function getUrlWithAppState(path, preserveParams) {
-  const paramsCopy = __spreadValues$M({}, runtime.locationService.getSearchObject());
+  const paramsCopy = __spreadValues$K({}, runtime.locationService.getSearchObject());
   if (preserveParams) {
     for (const key of Object.keys(paramsCopy)) {
       if (!preserveParams.includes(key)) {
@@ -78,31 +76,31 @@ function renderSceneComponentWithRouteProps(sceneObject, routeProps) {
   return React__default["default"].createElement(sceneObject.Component, { model: sceneObject, routeProps });
 }
 
-var __defProp$L = Object.defineProperty;
-var __defProps$v = Object.defineProperties;
-var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$L = Object.getOwnPropertySymbols;
-var __hasOwnProp$L = Object.prototype.hasOwnProperty;
-var __propIsEnum$L = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$L = (obj, key, value) => key in obj ? __defProp$L(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$L = (a, b) => {
+var __defProp$J = Object.defineProperty;
+var __defProps$t = Object.defineProperties;
+var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$J = Object.getOwnPropertySymbols;
+var __hasOwnProp$J = Object.prototype.hasOwnProperty;
+var __propIsEnum$J = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$J = (obj, key, value) => key in obj ? __defProp$J(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$J = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$L.call(b, prop))
-      __defNormalProp$L(a, prop, b[prop]);
-  if (__getOwnPropSymbols$L)
-    for (var prop of __getOwnPropSymbols$L(b)) {
-      if (__propIsEnum$L.call(b, prop))
-        __defNormalProp$L(a, prop, b[prop]);
+    if (__hasOwnProp$J.call(b, prop))
+      __defNormalProp$J(a, prop, b[prop]);
+  if (__getOwnPropSymbols$J)
+    for (var prop of __getOwnPropSymbols$J(b)) {
+      if (__propIsEnum$J.call(b, prop))
+        __defNormalProp$J(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
+var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
 const runtimePanelPlugins = /* @__PURE__ */ new Map();
 function registerRuntimePanelPlugin({ pluginId, plugin }) {
   if (runtimePanelPlugins.has(pluginId)) {
     throw new Error(`A runtime panel plugin with id ${pluginId} has already been registered`);
   }
-  plugin.meta = __spreadProps$v(__spreadValues$L({}, plugin.meta), {
+  plugin.meta = __spreadProps$t(__spreadValues$J({}, plugin.meta), {
     id: pluginId,
     name: pluginId,
     module: "runtime plugin",
@@ -130,39 +128,39 @@ function loadPanelPluginSync(pluginId) {
   return (_a = getPanelPluginFromCache(pluginId)) != null ? _a : runtimePanelPlugins.get(pluginId);
 }
 
-var __defProp$K = Object.defineProperty;
-var __defProps$u = Object.defineProperties;
-var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$K = Object.getOwnPropertySymbols;
-var __hasOwnProp$K = Object.prototype.hasOwnProperty;
-var __propIsEnum$K = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$K = (obj, key, value) => key in obj ? __defProp$K(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$K = (a, b) => {
+var __defProp$I = Object.defineProperty;
+var __defProps$s = Object.defineProperties;
+var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$I = Object.getOwnPropertySymbols;
+var __hasOwnProp$I = Object.prototype.hasOwnProperty;
+var __propIsEnum$I = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$I = (obj, key, value) => key in obj ? __defProp$I(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$I = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$K.call(b, prop))
-      __defNormalProp$K(a, prop, b[prop]);
-  if (__getOwnPropSymbols$K)
-    for (var prop of __getOwnPropSymbols$K(b)) {
-      if (__propIsEnum$K.call(b, prop))
-        __defNormalProp$K(a, prop, b[prop]);
+    if (__hasOwnProp$I.call(b, prop))
+      __defNormalProp$I(a, prop, b[prop]);
+  if (__getOwnPropSymbols$I)
+    for (var prop of __getOwnPropSymbols$I(b)) {
+      if (__propIsEnum$I.call(b, prop))
+        __defNormalProp$I(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
-var __objRest$5 = (source, exclude) => {
+var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$K.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$I.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$K)
-    for (var prop of __getOwnPropSymbols$K(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$K.call(source, prop))
+  if (source != null && __getOwnPropSymbols$I)
+    for (var prop of __getOwnPropSymbols$I(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$I.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function SceneComponentWrapperWithoutMemo(_a) {
-  var _b = _a, { model } = _b, otherProps = __objRest$5(_b, ["model"]);
+  var _b = _a, { model } = _b, otherProps = __objRest$4(_b, ["model"]);
   var _a2;
   const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
   const [_, setValue] = React.useState(0);
@@ -174,7 +172,7 @@ function SceneComponentWrapperWithoutMemo(_a) {
   if (!model.isActive) {
     return null;
   }
-  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$u(__spreadValues$K({}, otherProps), {
+  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$s(__spreadValues$I({}, otherProps), {
     model
   }));
 }
@@ -190,49 +188,49 @@ class UserActionEvent extends data.BusEventWithPayload {
 }
 UserActionEvent.type = "scene-object-user-action";
 
-var __accessCheck$2 = (obj, member, msg) => {
+var __accessCheck$3 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$2 = (obj, member, getter) => {
-  __accessCheck$2(obj, member, "read from private field");
+var __privateGet$3 = (obj, member, getter) => {
+  __accessCheck$3(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$2 = (obj, member, value) => {
+var __privateAdd$3 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
-var __privateSet$1 = (obj, member, value, setter) => {
-  __accessCheck$2(obj, member, "write to private field");
+var __privateSet$2 = (obj, member, value, setter) => {
+  __accessCheck$3(obj, member, "write to private field");
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
 var _ref;
 class SceneObjectRef {
   constructor(ref) {
-    __privateAdd$2(this, _ref, void 0);
-    __privateSet$1(this, _ref, ref);
+    __privateAdd$3(this, _ref, void 0);
+    __privateSet$2(this, _ref, ref);
   }
   resolve() {
-    return __privateGet$2(this, _ref);
+    return __privateGet$3(this, _ref);
   }
 }
 _ref = new WeakMap();
 
-var __defProp$J = Object.defineProperty;
-var __getOwnPropSymbols$J = Object.getOwnPropertySymbols;
-var __hasOwnProp$J = Object.prototype.hasOwnProperty;
-var __propIsEnum$J = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$J = (obj, key, value) => key in obj ? __defProp$J(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$J = (a, b) => {
+var __defProp$H = Object.defineProperty;
+var __getOwnPropSymbols$H = Object.getOwnPropertySymbols;
+var __hasOwnProp$H = Object.prototype.hasOwnProperty;
+var __propIsEnum$H = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$H = (obj, key, value) => key in obj ? __defProp$H(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$H = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$J.call(b, prop))
-      __defNormalProp$J(a, prop, b[prop]);
-  if (__getOwnPropSymbols$J)
-    for (var prop of __getOwnPropSymbols$J(b)) {
-      if (__propIsEnum$J.call(b, prop))
-        __defNormalProp$J(a, prop, b[prop]);
+    if (__hasOwnProp$H.call(b, prop))
+      __defNormalProp$H(a, prop, b[prop]);
+  if (__getOwnPropSymbols$H)
+    for (var prop of __getOwnPropSymbols$H(b)) {
+      if (__propIsEnum$H.call(b, prop))
+        __defNormalProp$H(a, prop, b[prop]);
     }
   return a;
 };
@@ -292,7 +290,7 @@ class SceneObjectBase {
   }
   setState(update) {
     const prevState = this._state;
-    const newState = __spreadValues$J(__spreadValues$J({}, this._state), update);
+    const newState = __spreadValues$H(__spreadValues$H({}, this._state), update);
     this._state = Object.freeze(newState);
     this._setParent(update);
     this._handleActivationOfChangedStateProps(prevState, newState);
@@ -488,19 +486,19 @@ function forEachChild(state, callback) {
   }
 }
 
-var __defProp$I = Object.defineProperty;
-var __getOwnPropSymbols$I = Object.getOwnPropertySymbols;
-var __hasOwnProp$I = Object.prototype.hasOwnProperty;
-var __propIsEnum$I = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$I = (obj, key, value) => key in obj ? __defProp$I(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$I = (a, b) => {
+var __defProp$G = Object.defineProperty;
+var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
+var __hasOwnProp$G = Object.prototype.hasOwnProperty;
+var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$G = (obj, key, value) => key in obj ? __defProp$G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$G = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$I.call(b, prop))
-      __defNormalProp$I(a, prop, b[prop]);
-  if (__getOwnPropSymbols$I)
-    for (var prop of __getOwnPropSymbols$I(b)) {
-      if (__propIsEnum$I.call(b, prop))
-        __defNormalProp$I(a, prop, b[prop]);
+    if (__hasOwnProp$G.call(b, prop))
+      __defNormalProp$G(a, prop, b[prop]);
+  if (__getOwnPropSymbols$G)
+    for (var prop of __getOwnPropSymbols$G(b)) {
+      if (__propIsEnum$G.call(b, prop))
+        __defNormalProp$G(a, prop, b[prop]);
     }
   return a;
 };
@@ -509,7 +507,7 @@ function cloneSceneObject(sceneObject, withState) {
   return new sceneObject.constructor(clonedState);
 }
 function cloneSceneObjectState(sceneState, withState) {
-  const clonedState = __spreadValues$I({}, sceneState);
+  const clonedState = __spreadValues$G({}, sceneState);
   for (const key in clonedState) {
     const propValue = clonedState[key];
     if (propValue instanceof SceneObjectBase) {
@@ -606,25 +604,25 @@ function lookupVariable(name, sceneObject) {
   return null;
 }
 
-var __defProp$H = Object.defineProperty;
-var __getOwnPropSymbols$H = Object.getOwnPropertySymbols;
-var __hasOwnProp$H = Object.prototype.hasOwnProperty;
-var __propIsEnum$H = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$H = (obj, key, value) => key in obj ? __defProp$H(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$H = (a, b) => {
+var __defProp$F = Object.defineProperty;
+var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
+var __hasOwnProp$F = Object.prototype.hasOwnProperty;
+var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$F = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$F = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$H.call(b, prop))
-      __defNormalProp$H(a, prop, b[prop]);
-  if (__getOwnPropSymbols$H)
-    for (var prop of __getOwnPropSymbols$H(b)) {
-      if (__propIsEnum$H.call(b, prop))
-        __defNormalProp$H(a, prop, b[prop]);
+    if (__hasOwnProp$F.call(b, prop))
+      __defNormalProp$F(a, prop, b[prop]);
+  if (__getOwnPropSymbols$F)
+    for (var prop of __getOwnPropSymbols$F(b)) {
+      if (__propIsEnum$F.call(b, prop))
+        __defNormalProp$F(a, prop, b[prop]);
     }
   return a;
 };
 class SceneDataNode extends SceneObjectBase {
   constructor(state) {
-    super(__spreadValues$H({
+    super(__spreadValues$F({
       data: emptyPanelData
     }, state));
   }
@@ -705,25 +703,25 @@ function evaluateTimeRange(from, to, timeZone, fiscalYearStartMonth, delay) {
   };
 }
 
-var __defProp$G = Object.defineProperty;
-var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
-var __hasOwnProp$G = Object.prototype.hasOwnProperty;
-var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$G = (obj, key, value) => key in obj ? __defProp$G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$G = (a, b) => {
+var __defProp$E = Object.defineProperty;
+var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
+var __hasOwnProp$E = Object.prototype.hasOwnProperty;
+var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$E = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$E = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$G.call(b, prop))
-      __defNormalProp$G(a, prop, b[prop]);
-  if (__getOwnPropSymbols$G)
-    for (var prop of __getOwnPropSymbols$G(b)) {
-      if (__propIsEnum$G.call(b, prop))
-        __defNormalProp$G(a, prop, b[prop]);
+    if (__hasOwnProp$E.call(b, prop))
+      __defNormalProp$E(a, prop, b[prop]);
+  if (__getOwnPropSymbols$E)
+    for (var prop of __getOwnPropSymbols$E(b)) {
+      if (__propIsEnum$E.call(b, prop))
+        __defNormalProp$E(a, prop, b[prop]);
     }
   return a;
 };
 class SceneTimeRange extends SceneObjectBase {
   constructor(state = {}) {
-    var _a, _b;
+    var _a, _b, _c;
     const from = (_a = state.from) != null ? _a : "now-6h";
     const to = (_b = state.to) != null ? _b : "now";
     const timeZone = state.timeZone;
@@ -734,7 +732,7 @@ class SceneTimeRange extends SceneObjectBase {
       state.fiscalYearStartMonth,
       state.UNSAFE_nowDelay
     );
-    super(__spreadValues$G({ from, to, timeZone, value }, state));
+    super(__spreadValues$E({ from, to, timeZone, value }, state));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["from", "to", "timezone"] });
     this.onTimeRangeChange = (timeRange) => {
       const update = {};
@@ -779,6 +777,7 @@ class SceneTimeRange extends SceneObjectBase {
       });
       this.publishEvent(new runtime.RefreshEvent());
     };
+    (_c = runtime.getTemplateSrv()) == null ? void 0 : _c.updateTimeRange(value);
     this.addActivationHandler(this._onActivate.bind(this));
   }
   _onActivate() {
@@ -787,16 +786,19 @@ class SceneTimeRange extends SceneObjectBase {
       if (timeZoneSource !== this) {
         this._subs.add(
           timeZoneSource.subscribeToState((n, p) => {
+            var _a;
             if (n.timeZone !== void 0 && n.timeZone !== p.timeZone) {
+              const timeRange = evaluateTimeRange(
+                this.state.from,
+                this.state.to,
+                timeZoneSource.getTimeZone(),
+                this.state.fiscalYearStartMonth,
+                this.state.UNSAFE_nowDelay
+              );
               this.setState({
-                value: evaluateTimeRange(
-                  this.state.from,
-                  this.state.to,
-                  timeZoneSource.getTimeZone(),
-                  this.state.fiscalYearStartMonth,
-                  this.state.UNSAFE_nowDelay
-                )
+                value: timeRange
               });
+              (_a = runtime.getTemplateSrv()) == null ? void 0 : _a.updateTimeRange(timeRange);
             }
           })
         );
@@ -1365,25 +1367,25 @@ function collectAllVariables(sceneObject, record = {}) {
   return record;
 }
 
-var __defProp$F = Object.defineProperty;
-var __defProps$t = Object.defineProperties;
-var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
-var __hasOwnProp$F = Object.prototype.hasOwnProperty;
-var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$F = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$F = (a, b) => {
+var __defProp$D = Object.defineProperty;
+var __defProps$r = Object.defineProperties;
+var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
+var __hasOwnProp$D = Object.prototype.hasOwnProperty;
+var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$D = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$F.call(b, prop))
-      __defNormalProp$F(a, prop, b[prop]);
-  if (__getOwnPropSymbols$F)
-    for (var prop of __getOwnPropSymbols$F(b)) {
-      if (__propIsEnum$F.call(b, prop))
-        __defNormalProp$F(a, prop, b[prop]);
+    if (__hasOwnProp$D.call(b, prop))
+      __defNormalProp$D(a, prop, b[prop]);
+  if (__getOwnPropSymbols$D)
+    for (var prop of __getOwnPropSymbols$D(b)) {
+      if (__propIsEnum$D.call(b, prop))
+        __defNormalProp$D(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
 function getTemplateProxyForField(field, frame, frames) {
   return new Proxy(
     {},
@@ -1399,7 +1401,7 @@ function getTemplateProxyForField(field, frame, frames) {
           if (!field.labels) {
             return "";
           }
-          return __spreadProps$t(__spreadValues$F({}, field.labels), {
+          return __spreadProps$r(__spreadValues$D({}, field.labels), {
             __values: Object.values(field.labels).sort().join(", "),
             toString: () => {
               return data.formatLabels(field.labels, "", true);
@@ -1747,15 +1749,15 @@ function isDataLayer(obj) {
   return "isDataLayer" in obj;
 }
 
-var __accessCheck$1 = (obj, member, msg) => {
+var __accessCheck$2 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$1 = (obj, member, getter) => {
-  __accessCheck$1(obj, member, "read from private field");
+var __privateGet$2 = (obj, member, getter) => {
+  __accessCheck$2(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$1 = (obj, member, value) => {
+var __privateAdd$2 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
@@ -1768,25 +1770,25 @@ class SceneQueryController extends SceneObjectBase {
   constructor() {
     super({ isRunning: false });
     this.isQueryController = true;
-    __privateAdd$1(this, _running, /* @__PURE__ */ new Set());
+    __privateAdd$2(this, _running, /* @__PURE__ */ new Set());
     this.addActivationHandler(() => {
-      return () => __privateGet$1(this, _running).clear();
+      return () => __privateGet$2(this, _running).clear();
     });
   }
   queryStarted(entry) {
-    __privateGet$1(this, _running).add(entry);
+    __privateGet$2(this, _running).add(entry);
     this.changeRunningQueryCount(1);
     if (!this.state.isRunning) {
       this.setState({ isRunning: true });
     }
   }
   queryCompleted(entry) {
-    if (!__privateGet$1(this, _running).has(entry)) {
+    if (!__privateGet$2(this, _running).has(entry)) {
       return;
     }
-    __privateGet$1(this, _running).delete(entry);
+    __privateGet$2(this, _running).delete(entry);
     this.changeRunningQueryCount(-1);
-    if (__privateGet$1(this, _running).size === 0) {
+    if (__privateGet$2(this, _running).size === 0) {
       this.setState({ isRunning: false });
     }
   }
@@ -1796,7 +1798,7 @@ class SceneQueryController extends SceneObjectBase {
   }
   cancelAll() {
     var _a;
-    for (const entry of __privateGet$1(this, _running).values()) {
+    for (const entry of __privateGet$2(this, _running).values()) {
       (_a = entry.cancel) == null ? void 0 : _a.call(entry);
     }
   }
@@ -2284,25 +2286,25 @@ function isExtraQueryProvider(obj) {
   return typeof obj === "object" && "getExtraQueries" in obj;
 }
 
-var __defProp$E = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
-var __hasOwnProp$E = Object.prototype.hasOwnProperty;
-var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$E = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$E = (a, b) => {
+var __defProp$C = Object.defineProperty;
+var __defProps$q = Object.defineProperties;
+var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
+var __hasOwnProp$C = Object.prototype.hasOwnProperty;
+var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$C = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$C = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$E.call(b, prop))
-      __defNormalProp$E(a, prop, b[prop]);
-  if (__getOwnPropSymbols$E)
-    for (var prop of __getOwnPropSymbols$E(b)) {
-      if (__propIsEnum$E.call(b, prop))
-        __defNormalProp$E(a, prop, b[prop]);
+    if (__hasOwnProp$C.call(b, prop))
+      __defNormalProp$C(a, prop, b[prop]);
+  if (__getOwnPropSymbols$C)
+    for (var prop of __getOwnPropSymbols$C(b)) {
+      if (__propIsEnum$C.call(b, prop))
+        __defNormalProp$C(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
 const passthroughProcessor = (_, secondary) => rxjs.of(secondary);
 const extraQueryProcessingOperator = (processors) => (data) => {
   return data.pipe(
@@ -2315,7 +2317,7 @@ const extraQueryProcessingOperator = (processors) => (data) => {
     }),
     rxjs.map(([primary, ...processedSecondaries]) => {
       var _a;
-      return __spreadProps$s(__spreadValues$E({}, primary), {
+      return __spreadProps$q(__spreadValues$C({}, primary), {
         series: [...primary.series, ...processedSecondaries.flatMap((s) => s.series)],
         annotations: [...(_a = primary.annotations) != null ? _a : [], ...processedSecondaries.flatMap((s) => {
           var _a2;
@@ -2326,25 +2328,25 @@ const extraQueryProcessingOperator = (processors) => (data) => {
   );
 };
 
-var __defProp$D = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
-var __hasOwnProp$D = Object.prototype.hasOwnProperty;
-var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$D = (a, b) => {
+var __defProp$B = Object.defineProperty;
+var __defProps$p = Object.defineProperties;
+var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
+var __hasOwnProp$B = Object.prototype.hasOwnProperty;
+var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$B = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$B = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$D.call(b, prop))
-      __defNormalProp$D(a, prop, b[prop]);
-  if (__getOwnPropSymbols$D)
-    for (var prop of __getOwnPropSymbols$D(b)) {
-      if (__propIsEnum$D.call(b, prop))
-        __defNormalProp$D(a, prop, b[prop]);
+    if (__hasOwnProp$B.call(b, prop))
+      __defNormalProp$B(a, prop, b[prop]);
+  if (__getOwnPropSymbols$B)
+    for (var prop of __getOwnPropSymbols$B(b)) {
+      if (__propIsEnum$B.call(b, prop))
+        __defNormalProp$B(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
+var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
 function filterAnnotations(data, filters) {
   var _a;
   if (!Array.isArray(data) || data.length === 0) {
@@ -2395,11 +2397,11 @@ function filterAnnotations(data, filters) {
           continue;
         }
       }
-      fields.push(__spreadProps$r(__spreadValues$D({}, field), {
+      fields.push(__spreadProps$p(__spreadValues$B({}, field), {
         values: buffer
       }));
     }
-    processed.push(__spreadProps$r(__spreadValues$D({}, frame), {
+    processed.push(__spreadProps$p(__spreadValues$B({}, frame), {
       fields,
       length: frameLength
     }));
@@ -2825,33 +2827,33 @@ function getOptionSearcher(options, includeAll) {
   };
 }
 
-var __defProp$C = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
-var __hasOwnProp$C = Object.prototype.hasOwnProperty;
-var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$C = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$C = (a, b) => {
+var __defProp$A = Object.defineProperty;
+var __defProps$o = Object.defineProperties;
+var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
+var __hasOwnProp$A = Object.prototype.hasOwnProperty;
+var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$A = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$C.call(b, prop))
-      __defNormalProp$C(a, prop, b[prop]);
-  if (__getOwnPropSymbols$C)
-    for (var prop of __getOwnPropSymbols$C(b)) {
-      if (__propIsEnum$C.call(b, prop))
-        __defNormalProp$C(a, prop, b[prop]);
+    if (__hasOwnProp$A.call(b, prop))
+      __defNormalProp$A(a, prop, b[prop]);
+  if (__getOwnPropSymbols$A)
+    for (var prop of __getOwnPropSymbols$A(b)) {
+      if (__propIsEnum$A.call(b, prop))
+        __defNormalProp$A(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
-var __objRest$4 = (source, exclude) => {
+var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
+var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$C.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$A.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$C)
-    for (var prop of __getOwnPropSymbols$C(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$C.call(source, prop))
+  if (source != null && __getOwnPropSymbols$A)
+    for (var prop of __getOwnPropSymbols$A(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$A.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2979,11 +2981,11 @@ const OptionWithCheckbox = ({
   renderOptionLabel
 }) => {
   var _b;
-  const _a = innerProps, rest = __objRest$4(_a, ["onMouseMove", "onMouseOver"]);
+  const _a = innerProps, rest = __objRest$3(_a, ["onMouseMove", "onMouseOver"]);
   const theme = ui.useTheme2();
   const selectStyles = ui.getSelectStyles(theme);
   const optionStyles = ui.useStyles2(getOptionStyles);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$q(__spreadValues$C({
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$o(__spreadValues$A({
     ref: innerRef,
     className: css.cx(selectStyles.option, isFocused && selectStyles.optionFocused)
   }, rest), {
@@ -3082,31 +3084,68 @@ function getEnrichedFiltersRequest(sourceRunner) {
   if (isFiltersRequestEnricher(root)) {
     return root.enrichFiltersRequest(sourceRunner);
   }
-  return null;
+  return null;
+}
+
+var __accessCheck$1 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$1 = (obj, member, getter) => {
+  __accessCheck$1(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$1 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet$1 = (obj, member, value, setter) => {
+  __accessCheck$1(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _value;
+class SafeSerializableSceneObject {
+  constructor(value) {
+    __privateAdd$1(this, _value, void 0);
+    this.text = "__sceneObject";
+    __privateSet$1(this, _value, value);
+  }
+  toString() {
+    return void 0;
+  }
+  valueOf() {
+    return __privateGet$1(this, _value);
+  }
+  get value() {
+    return this;
+  }
 }
+_value = new WeakMap();
 
-var __defProp$B = Object.defineProperty;
-var __defProps$p = Object.defineProperties;
-var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
-var __hasOwnProp$B = Object.prototype.hasOwnProperty;
-var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$B = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$B = (a, b) => {
+var __defProp$z = Object.defineProperty;
+var __defProps$n = Object.defineProperties;
+var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
+var __hasOwnProp$z = Object.prototype.hasOwnProperty;
+var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$z = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$B.call(b, prop))
-      __defNormalProp$B(a, prop, b[prop]);
-  if (__getOwnPropSymbols$B)
-    for (var prop of __getOwnPropSymbols$B(b)) {
-      if (__propIsEnum$B.call(b, prop))
-        __defNormalProp$B(a, prop, b[prop]);
+    if (__hasOwnProp$z.call(b, prop))
+      __defNormalProp$z(a, prop, b[prop]);
+  if (__getOwnPropSymbols$z)
+    for (var prop of __getOwnPropSymbols$z(b)) {
+      if (__propIsEnum$z.call(b, prop))
+        __defNormalProp$z(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadProps$p(__spreadValues$B({
+    super(__spreadProps$n(__spreadValues$z({
       isMulti: true,
       name: "",
       value: [],
@@ -3129,9 +3168,7 @@ class GroupByVariable extends MultiValueVariable {
         return override.values;
       }
       if (this.state.defaultOptions) {
-        return this.state.defaultOptions.concat(
-          dataFromResponse((_c = override == null ? void 0 : override.values) != null ? _c : [])
-        );
+        return this.state.defaultOptions.concat(dataFromResponse((_c = override == null ? void 0 : override.values) != null ? _c : []));
       }
       if (!ds.getTagKeys) {
         return [];
@@ -3139,7 +3176,11 @@ class GroupByVariable extends MultiValueVariable {
       const queries = getQueriesForVariables(this);
       const otherFilters = this.state.baseFilters || [];
       const timeRange = sceneGraph.getTimeRange(this).state.value;
-      const response = await ds.getTagKeys(__spreadValues$B({ filters: otherFilters, queries, timeRange }, getEnrichedFiltersRequest(this)));
+      const response = await ds.getTagKeys(__spreadValues$z({
+        filters: otherFilters,
+        queries,
+        timeRange
+      }, getEnrichedFiltersRequest(this)));
       if (responseHasError(response)) {
         this.setState({ error: response.error.message });
       }
@@ -3189,7 +3230,7 @@ class GroupByVariable extends MultiValueVariable {
     this.setState({ loading: true, error: null });
     return rxjs.from(
       getDataSource(this.state.datasource, {
-        __sceneObject: { text: "__sceneObject", value: this }
+        __sceneObject: new SafeSerializableSceneObject(this)
       })
     ).pipe(
       rxjs.mergeMap((ds) => {
@@ -3330,7 +3371,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$c);
+  const styles = ui.useStyles2(getStyles$a);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3393,7 +3434,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$c = (theme) => ({
+const getStyles$a = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -3473,7 +3514,7 @@ function keyLabelToOption(key, label) {
 const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b;
-  const styles = ui.useStyles2(getStyles$b);
+  const styles = ui.useStyles2(getStyles$9);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -3484,7 +3525,10 @@ function AdHocFilterRenderer({ filter, model }) {
   const [valueHasCustomValue, setValueHasCustomValue] = React.useState(false);
   const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
   const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
-  const optionSearcher = React.useMemo(() => getAdhocOptionSearcher(values), [values]);
+  const optionSearcher = React.useMemo(
+    () => getAdhocOptionSearcher(values),
+    [values]
+  );
   const onValueInputChange = (value, { action }) => {
     if (action === "input-change") {
       setValueInputValue(value);
@@ -3614,7 +3658,7 @@ function AdHocFilterRenderer({ filter, model }) {
     onClick: () => model._removeFilter(filter)
   }));
 }
-const getStyles$b = (theme) => ({
+const getStyles$9 = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -3752,564 +3796,6 @@ function isFilter(filter) {
   return filter !== null && typeof filter.key === "string" && typeof filter.value === "string";
 }
 
-var __defProp$A = Object.defineProperty;
-var __defProps$o = Object.defineProperties;
-var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
-var __hasOwnProp$A = Object.prototype.hasOwnProperty;
-var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$A = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$A.call(b, prop))
-      __defNormalProp$A(a, prop, b[prop]);
-  if (__getOwnPropSymbols$A)
-    for (var prop of __getOwnPropSymbols$A(b)) {
-      if (__propIsEnum$A.call(b, prop))
-        __defNormalProp$A(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
-var __objRest$3 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$A.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$A)
-    for (var prop of __getOwnPropSymbols$A(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$A.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const Item = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, active } = _b, rest = __objRest$3(_b, ["children", "active"]);
-    const theme = ui.useTheme2();
-    const selectStyles = ui.getSelectStyles(theme);
-    const id = react.useId();
-    return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$A({
-      ref,
-      role: "option",
-      id,
-      "aria-selected": active,
-      className: css.cx(selectStyles.option, active && selectStyles.optionFocused)
-    }, rest), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: selectStyles.optionBody,
-      "data-testid": `data-testid ad hoc filter option value ${children}`
-    }, /* @__PURE__ */ React__default["default"].createElement("span", null, children)));
-  }
-);
-const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, wip, handleChangeViewMode }, parentRef) {
-  var _a;
-  const [open, setOpen] = React.useState(false);
-  const [options, setOptions] = React.useState([]);
-  const [optionsLoading, setOptionsLoading] = React.useState(false);
-  const [optionsError, setOptionsError] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState("");
-  const [activeIndex, setActiveIndex] = React.useState(null);
-  const [inputType, setInputType] = React.useState(!wip ? "value" : "key");
-  const styles = ui.useStyles2(getStyles2);
-  const listRef = React.useRef([]);
-  const { _wip } = model.useState();
-  const handleResetWip = React.useCallback(() => {
-    if (wip) {
-      model._addWip();
-      setInputType("key");
-      setInputValue("");
-    }
-  }, [model, wip]);
-  const filterToUse = filter || _wip;
-  const operatorIdentifier = `${(_a = filterToUse == null ? void 0 : filterToUse.key) != null ? _a : ""}-operator`;
-  const { refs, floatingStyles, context } = react.useFloating({
-    whileElementsMounted: react.autoUpdate,
-    open,
-    onOpenChange: (nextOpen, _, reason) => {
-      setOpen(nextOpen);
-      if (["outside-press", "escape-key"].includes(reason || "")) {
-        handleResetWip();
-        handleChangeViewMode == null ? void 0 : handleChangeViewMode();
-      }
-    },
-    middleware: [
-      react.flip({ padding: 10 }),
-      react.size({
-        apply({ rects, availableHeight, elements }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-            maxHeight: `${availableHeight > 256 ? 256 : availableHeight}px`
-          });
-        },
-        padding: 10
-      })
-    ]
-  });
-  const role = react.useRole(context, { role: "listbox" });
-  const dismiss = react.useDismiss(context, {
-    outsidePress: (event) => {
-      return !event.currentTarget.classList.contains(
-        operatorIdentifier
-      );
-    }
-  });
-  const listNav = react.useListNavigation(context, {
-    listRef,
-    activeIndex,
-    onNavigate: setActiveIndex,
-    virtual: true,
-    loop: true
-  });
-  const { getReferenceProps, getFloatingProps, getItemProps } = react.useInteractions([role, dismiss, listNav]);
-  React.useImperativeHandle(parentRef, () => () => {
-    var _a2;
-    return (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
-  }, [refs.domReference]);
-  function onChange(event) {
-    var _a2, _b;
-    if (inputType === "key") {
-      const lastChar = event.target.value.slice(-1);
-      if (["=", "!", "<", ">"].includes(lastChar)) {
-        const key = event.target.value.slice(0, -1);
-        const optionIndex = options.findIndex((option) => option.value === key);
-        if (optionIndex >= 0) {
-          model._updateFilter(filterToUse, inputType, options[optionIndex]);
-          setInputValue(lastChar);
-        }
-        reactDom.flushSync(() => {
-          setInputType("operator");
-        });
-        (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
-        return;
-      }
-    }
-    if (inputType === "operator") {
-      const lastChar = event.target.value.slice(-1);
-      if (/\w/.test(lastChar)) {
-        const operator = event.target.value.slice(0, -1);
-        if (!/\w/.test(operator)) {
-          const optionIndex = options.findIndex((option) => option.value === operator);
-          if (optionIndex >= 0) {
-            model._updateFilter(filterToUse, inputType, options[optionIndex]);
-            setInputValue(lastChar);
-          }
-          reactDom.flushSync(() => {
-            setInputType("value");
-          });
-          (_b = refs.domReference.current) == null ? void 0 : _b.focus();
-          return;
-        }
-      }
-    }
-    const value = event.target.value;
-    setInputValue(value);
-    setActiveIndex(0);
-  }
-  const items = options.filter(
-    (item) => {
-      var _a2, _b;
-      return (_b = (_a2 = item.label) != null ? _a2 : item.value) == null ? void 0 : _b.toLocaleLowerCase().startsWith(inputValue.toLowerCase());
-    }
-  );
-  const flushInputType = React.useCallback((inputType2) => {
-    reactDom.flushSync(() => {
-      setInputType(inputType2);
-    });
-  }, []);
-  React.useEffect(() => {
-    if (wip && !_wip) {
-      model._addWip();
-    }
-  }, [_wip]);
-  React.useEffect(() => {
-    if (!wip && refs.domReference.current) {
-      setInputType("value");
-      setInputValue("");
-      refs.domReference.current.focus();
-    }
-  }, []);
-  const handleFetchOptions = React.useCallback(
-    async (inputType2) => {
-      setOptionsError(false);
-      setOptionsLoading(true);
-      setOptions([]);
-      let options2 = [];
-      try {
-        if (inputType2 === "key") {
-          options2 = await model._getKeys(null);
-        } else if (inputType2 === "operator") {
-          options2 = model._getOperators();
-        } else if (inputType2 === "value") {
-          options2 = await model._getValuesFor(filterToUse);
-        }
-        setOptions(options2);
-      } catch (e) {
-        setOptionsError(true);
-      }
-      setOptionsLoading(false);
-    },
-    [filterToUse, model]
-  );
-  const handleBackspaceInput = React.useCallback(
-    (event) => {
-      if (event.key === "Backspace" && !inputValue && inputType === "key") {
-        model._removeLastFilter();
-        handleFetchOptions(inputType);
-      }
-    },
-    [inputValue, inputType]
-  );
-  const handleTabInput = React.useCallback((event) => {
-    if (event.key === "Tab" && !event.shiftKey) {
-      handleChangeViewMode == null ? void 0 : handleChangeViewMode();
-      handleResetWip();
-    }
-  }, []);
-  const handleShiftTabInput = React.useCallback((event) => {
-    if (event.key === "Tab" && event.shiftKey) {
-      handleChangeViewMode == null ? void 0 : handleChangeViewMode();
-      handleResetWip();
-    }
-  }, []);
-  const handleEnterInput = React.useCallback(
-    (event) => {
-      var _a2;
-      if (event.key === "Enter" && activeIndex != null && items[activeIndex]) {
-        model._updateFilter(filterToUse, inputType, items[activeIndex]);
-        setInputValue("");
-        setActiveIndex(0);
-        if (inputType === "key") {
-          flushInputType("operator");
-        } else if (inputType === "operator") {
-          flushInputType("value");
-        } else if (inputType === "value") {
-          flushInputType("key");
-          handleChangeViewMode == null ? void 0 : handleChangeViewMode();
-        }
-        (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
-      }
-    },
-    [activeIndex, filterToUse, inputType, items, model]
-  );
-  React.useEffect(() => {
-    if (open) {
-      handleFetchOptions(inputType);
-    }
-  }, [open, inputType]);
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles.comboboxWrapper
-  }, filterToUse ? /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles.pillWrapper
-  }, (filterToUse == null ? void 0 : filterToUse.key) ? /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: css.cx(styles.basePill, styles.keyPill)
-  }, filterToUse.key) : null, (filterToUse == null ? void 0 : filterToUse.key) && (filterToUse == null ? void 0 : filterToUse.operator) && inputType !== "operator" ? /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: css.cx(styles.basePill, styles.operatorPill, operatorIdentifier),
-    role: "button",
-    "aria-label": "Edit filter operator",
-    tabIndex: 0,
-    onClick: (event) => {
-      var _a2;
-      event.stopPropagation();
-      flushInputType("operator");
-      (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
-    },
-    onKeyDown: (event) => {
-      var _a2;
-      handleShiftTabInput(event);
-      if (event.key === "Enter") {
-        flushInputType("operator");
-        (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
-      }
-    }
-  }, filterToUse.operator) : null, (filterToUse == null ? void 0 : filterToUse.key) && (filterToUse == null ? void 0 : filterToUse.operator) && (filterToUse == null ? void 0 : filterToUse.value) && !["operator", "value"].includes(inputType) ? /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: css.cx(styles.basePill, styles.valuePill)
-  }, filterToUse.value) : null) : null, /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$o(__spreadValues$A({}, getReferenceProps({
-    ref: refs.setReference,
-    onChange,
-    value: inputValue,
-    placeholder: !wip ? inputType === "operator" ? `${filterToUse[inputType]} ${filterToUse.value || ""}` : filterToUse[inputType] : "Filter by label values",
-    "aria-autocomplete": "list",
-    onKeyDown(event) {
-      if (inputType === "operator") {
-        handleShiftTabInput(event);
-      }
-      handleBackspaceInput(event);
-      handleTabInput(event);
-      handleEnterInput(event);
-    }
-  })), {
-    className: styles.inputStyle,
-    onClick: (event) => {
-      event.stopPropagation();
-      setOpen(true);
-    },
-    onFocus: () => {
-      setActiveIndex(0);
-      setOpen(true);
-    }
-  })), /* @__PURE__ */ React__default["default"].createElement(react.FloatingPortal, null, open && /* @__PURE__ */ React__default["default"].createElement(react.FloatingFocusManager, {
-    context,
-    initialFocus: -1,
-    visuallyHiddenDismiss: true
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$o(__spreadValues$A({}, getFloatingProps({
-    ref: refs.setFloating,
-    style: __spreadProps$o(__spreadValues$A({}, floatingStyles), {
-      overflowY: "auto"
-    })
-  })), {
-    className: styles.dropdownWrapper
-  }), optionsLoading ? /* @__PURE__ */ React__default["default"].createElement(LoadingOptionsPlaceholder, null) : optionsError ? /* @__PURE__ */ React__default["default"].createElement(OptionsErrorPlaceholder, {
-    handleFetchOptions: () => handleFetchOptions(inputType)
-  }) : !items.length ? /* @__PURE__ */ React__default["default"].createElement(NoOptionsPlaceholder, null) : items.map((item, index) => {
-    var _a2;
-    return /* @__PURE__ */ React__default["default"].createElement(Item, __spreadProps$o(__spreadValues$A({}, getItemProps({
-      key: item.value,
-      ref(node) {
-        listRef.current[index] = node;
-      },
-      onClick() {
-        var _a3;
-        model._updateFilter(filterToUse, inputType, item);
-        setInputValue("");
-        if (inputType === "key") {
-          flushInputType("operator");
-        } else if (inputType === "operator") {
-          flushInputType("value");
-        } else if (inputType === "value") {
-          flushInputType("key");
-          handleChangeViewMode == null ? void 0 : handleChangeViewMode();
-        }
-        (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
-      }
-    })), {
-      active: activeIndex === index
-    }), (_a2 = item.label) != null ? _a2 : item.value);
-  })))));
-});
-const LoadingOptionsPlaceholder = () => {
-  return /* @__PURE__ */ React__default["default"].createElement(Item, {
-    active: false
-  }, "Loading options...");
-};
-const NoOptionsPlaceholder = () => {
-  return /* @__PURE__ */ React__default["default"].createElement(Item, {
-    active: false
-  }, "No options found");
-};
-const OptionsErrorPlaceholder = ({ handleFetchOptions }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(Item, {
-    active: false,
-    onClick: handleFetchOptions
-  }, "Error. Click to try again!");
-};
-const getStyles2 = (theme) => ({
-  comboboxWrapper: css.css({
-    display: "flex",
-    flexWrap: "nowrap"
-  }),
-  pillWrapper: css.css({
-    display: "flex",
-    alignItems: "center",
-    whiteSpace: "nowrap"
-  }),
-  basePill: css.css(__spreadProps$o(__spreadValues$A({
-    display: "flex",
-    alignItems: "center",
-    background: theme.colors.action.disabledBackground,
-    border: `1px solid ${theme.colors.border.weak}`,
-    padding: theme.spacing(0.125, 1, 0.125, 1),
-    color: theme.colors.text.primary,
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    minHeight: "22px"
-  }, theme.typography.bodySmall), {
-    cursor: "pointer"
-  })),
-  keyPill: css.css({
-    fontWeight: theme.typography.fontWeightBold,
-    cursor: "default"
-  }),
-  operatorPill: css.css({
-    "&:hover": {
-      background: theme.colors.action.hover
-    }
-  }),
-  valuePill: css.css({
-    background: theme.colors.action.selected
-  }),
-  dropdownWrapper: css.css({
-    backgroundColor: theme.colors.background.primary,
-    color: theme.colors.text.primary,
-    boxShadow: theme.shadows.z2
-  }),
-  inputStyle: css.css({
-    paddingBlock: 0,
-    "&:focus": {
-      outline: "none"
-    }
-  })
-});
-
-var __defProp$z = Object.defineProperty;
-var __defProps$n = Object.defineProperties;
-var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
-var __hasOwnProp$z = Object.prototype.hasOwnProperty;
-var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$z = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$z.call(b, prop))
-      __defNormalProp$z(a, prop, b[prop]);
-  if (__getOwnPropSymbols$z)
-    for (var prop of __getOwnPropSymbols$z(b)) {
-      if (__propIsEnum$z.call(b, prop))
-        __defNormalProp$z(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
-function AdHocFiltersComboboxEditSwitch({
-  filter,
-  model
-}) {
-  const styles = ui.useStyles2(getStyles$a);
-  const [viewMode, setViewMode] = React.useState(true);
-  const pillWrapperRef = React.useRef(null);
-  const handleChangeViewMode = React.useCallback((event) => {
-    var _a;
-    event == null ? void 0 : event.stopPropagation();
-    let viewMode2 = false;
-    reactDom.flushSync(() => {
-      setViewMode((mode) => {
-        viewMode2 = mode;
-        return !mode;
-      });
-    });
-    if (!viewMode2) {
-      (_a = pillWrapperRef.current) == null ? void 0 : _a.focus();
-    }
-  }, []);
-  if (viewMode) {
-    return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: styles.combinedFilterPill,
-      onClick: handleChangeViewMode,
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          handleChangeViewMode();
-        }
-      },
-      role: "button",
-      "aria-label": "Edit filter",
-      tabIndex: 0,
-      ref: pillWrapperRef
-    }, /* @__PURE__ */ React__default["default"].createElement("span", null, filter.key, " ", filter.operator, " ", filter.value), /* @__PURE__ */ React__default["default"].createElement(ui.IconButton, {
-      onClick: (e) => {
-        e.stopPropagation();
-        model._removeFilter(filter);
-      },
-      onKeyDownCapture: (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          e.stopPropagation();
-          model._removeFilter(filter);
-        }
-      },
-      name: "times",
-      size: "md",
-      className: styles.removeButton,
-      tooltip: "Remove filter"
-    }));
-  }
-  return /* @__PURE__ */ React__default["default"].createElement(AdHocCombobox, {
-    filter,
-    model,
-    handleChangeViewMode
-  });
-}
-const getStyles$a = (theme) => ({
-  combinedFilterPill: css.css(__spreadProps$n(__spreadValues$z({
-    display: "flex",
-    alignItems: "center",
-    background: theme.colors.action.selected,
-    borderRadius: theme.shape.radius.default,
-    border: `1px solid ${theme.colors.border.weak}`,
-    padding: theme.spacing(0.125, 0, 0.125, 1),
-    color: theme.colors.text.primary,
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    minHeight: "22px"
-  }, theme.typography.bodySmall), {
-    fontWeight: theme.typography.fontWeightBold,
-    cursor: "pointer",
-    "&:hover": {
-      background: theme.colors.action.hover
-    }
-  })),
-  removeButton: css.css({
-    marginInline: theme.spacing(0.5),
-    cursor: "pointer",
-    "&:hover": {
-      color: theme.colors.text.primary
-    }
-  })
-});
-
-const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({
-  model
-}) {
-  const { filters } = model.useState();
-  const styles = ui.useStyles2(getStyles$9);
-  const focusOnInputRef = React.useRef();
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles.comboboxWrapper,
-    onClick: () => {
-      var _a;
-      (_a = focusOnInputRef.current) == null ? void 0 : _a.call(focusOnInputRef);
-    }
-  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-    name: "filter",
-    className: styles.filterIcon,
-    size: "lg"
-  }), filters.map((filter, index) => /* @__PURE__ */ React__default["default"].createElement(AdHocFiltersComboboxEditSwitch, {
-    key: index,
-    filter,
-    model
-  })), /* @__PURE__ */ React__default["default"].createElement(AdHocCombobox, {
-    model,
-    wip: true,
-    ref: focusOnInputRef
-  }));
-});
-const getStyles$9 = (theme) => ({
-  comboboxWrapper: css.css({
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: "center",
-    columnGap: theme.spacing(1),
-    rowGap: theme.spacing(0.5),
-    minHeight: theme.spacing(4),
-    backgroundColor: theme.components.input.background,
-    border: `1px solid ${theme.colors.border.strong}`,
-    borderRadius: theme.shape.radius.default,
-    paddingInline: theme.spacing(1),
-    paddingBlock: theme.spacing(0.5),
-    flexGrow: 1,
-    "&:focus-within": {
-      outline: "2px dotted transparent",
-      outlineOffset: "2px",
-      boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
-      transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
-      transitionDuration: "0.2s",
-      transitionProperty: "outline, outline-offset, box-shadow"
-    }
-  }),
-  filterIcon: css.css({
-    color: theme.colors.text.secondary,
-    alignSelf: "center"
-  })
-});
-
 var __defProp$y = Object.defineProperty;
 var __defProps$m = Object.defineProperties;
 var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
@@ -4340,7 +3826,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
       applyMode: "auto",
       filterExpression: (_b = state.filterExpression) != null ? _b : renderExpression(state.expressionBuilder, state.filters)
     }, state));
-    this._scopedVars = { __sceneObject: { value: this } };
+    this._scopedVars = { __sceneObject: new SafeSerializableSceneObject(this) };
     this._dataSourceSrv = runtime.getDataSourceSrv();
     this._urlSync = new AdHocFiltersVariableUrlSyncHandler(this);
     if (this.state.applyMode === "auto") {
@@ -4395,12 +3881,6 @@ class AdHocFiltersVariable extends SceneObjectBase {
     }
     this.setState({ filters: this.state.filters.filter((f) => f !== filter) });
   }
-  _removeLastFilter() {
-    const filterToRemove = this.state.filters.at(-1);
-    if (filterToRemove) {
-      this._removeFilter(filterToRemove);
-    }
-  }
   async _getKeys(currentKey) {
     var _a, _b, _c;
     const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, currentKey));
@@ -4482,11 +3962,6 @@ 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
-    });
-  }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.wrapper
   }, filters.map((filter, index) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, {
@@ -4507,6 +3982,10 @@ const getStyles$8 = (theme) => ({
     alignItems: "flex-end",
     columnGap: theme.spacing(2),
     rowGap: theme.spacing(1)
+  }),
+  filterIcon: css.css({
+    color: theme.colors.text.secondary,
+    paddingRight: theme.spacing(0.5)
   })
 });
 function toSelectableValue(input) {
@@ -4595,7 +4074,7 @@ class SceneQueryRunner extends SceneObjectBase {
     this._dataLayersMerger = new DataLayersMerger();
     this._variableValueRecorder = new VariableValueRecorder();
     this._results = new rxjs.ReplaySubject(1);
-    this._scopedVars = { __sceneObject: { value: this, text: "__sceneObject" } };
+    this._scopedVars = { __sceneObject: new SafeSerializableSceneObject(this) };
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["queries", "datasource"],
       onVariableUpdateCompleted: this.onVariableUpdatesCompleted.bind(this),
@@ -6546,7 +6025,7 @@ function executeAnnotationQuery(datasource, timeRange, query, layer) {
     __interval: { text: interval.interval, value: interval.interval },
     __interval_ms: { text: interval.intervalMs.toString(), value: interval.intervalMs },
     __annotation: { text: annotation.name, value: annotation },
-    __sceneObject: { text: "__sceneObject", value: layer }
+    __sceneObject: new SafeSerializableSceneObject(layer)
   };
   const queryRequest = __spreadValues$q(__spreadProps$f(__spreadValues$q({
     startTime: Date.now(),
@@ -6690,7 +6169,9 @@ class AnnotationsDataLayer extends SceneDataLayerBase {
       }, initialState),
       ["query"]
     );
-    this._scopedVars = { __sceneObject: { value: this, text: "__sceneObject" } };
+    this._scopedVars = {
+      __sceneObject: new SafeSerializableSceneObject(this)
+    };
   }
   onEnable() {
     const timeRange = sceneGraph.getTimeRange(this);
@@ -8013,7 +7494,7 @@ class QueryVariable extends MultiValueVariable {
     this.setState({ loading: true, error: null });
     return rxjs.from(
       getDataSource(this.state.datasource, {
-        __sceneObject: { text: "__sceneObject", value: this }
+        __sceneObject: new SafeSerializableSceneObject(this)
       })
     ).pipe(
       rxjs.mergeMap((ds) => {
@@ -8054,7 +7535,7 @@ class QueryVariable extends MultiValueVariable {
   }
   getRequest(target, searchFilter) {
     const scopedVars = {
-      __sceneObject: { text: "__sceneObject", value: this }
+      __sceneObject: new SafeSerializableSceneObject(this)
     };
     if (searchFilter) {
       scopedVars.__searchFilter = { value: searchFilter, text: searchFilter };
@@ -12172,6 +11653,7 @@ exports.PanelBuilders = PanelBuilders;
 exports.PanelOptionsBuilders = PanelOptionsBuilders;
 exports.QueryVariable = QueryVariable;
 exports.RuntimeDataSource = RuntimeDataSource;
+exports.SafeSerializableSceneObject = SafeSerializableSceneObject;
 exports.SceneApp = SceneApp;
 exports.SceneAppPage = SceneAppPage;
 exports.SceneByFrameRepeater = SceneByFrameRepeater;