@grafana/scenes 0.24.2 → 0.25.0

package/dist/index.js

@@ -39,17 +39,17 @@ var ReactGridLayout__default = /*#__PURE__*/_interopDefaultLegacy(ReactGridLayou
 var AutoSizer__default = /*#__PURE__*/_interopDefaultLegacy(AutoSizer);
 
 var __defProp$s = Object.defineProperty;
-var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
-var __hasOwnProp$u = Object.prototype.hasOwnProperty;
-var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
+var __hasOwnProp$v = Object.prototype.hasOwnProperty;
+var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$s = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$u.call(b, prop))
+    if (__hasOwnProp$v.call(b, prop))
       __defNormalProp$s(a, prop, b[prop]);
-  if (__getOwnPropSymbols$u)
-    for (var prop of __getOwnPropSymbols$u(b)) {
-      if (__propIsEnum$u.call(b, prop))
+  if (__getOwnPropSymbols$v)
+    for (var prop of __getOwnPropSymbols$v(b)) {
+      if (__propIsEnum$v.call(b, prop))
         __defNormalProp$s(a, prop, b[prop]);
     }
   return a;
@@ -76,17 +76,17 @@ function renderSceneComponentWithRouteProps(sceneObject, routeProps) {
 var __defProp$r = Object.defineProperty;
 var __defProps$f = Object.defineProperties;
 var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
-var __hasOwnProp$t = Object.prototype.hasOwnProperty;
-var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
+var __hasOwnProp$u = Object.prototype.hasOwnProperty;
+var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$r = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$t.call(b, prop))
+    if (__hasOwnProp$u.call(b, prop))
       __defNormalProp$r(a, prop, b[prop]);
-  if (__getOwnPropSymbols$t)
-    for (var prop of __getOwnPropSymbols$t(b)) {
-      if (__propIsEnum$t.call(b, prop))
+  if (__getOwnPropSymbols$u)
+    for (var prop of __getOwnPropSymbols$u(b)) {
+      if (__propIsEnum$u.call(b, prop))
         __defNormalProp$r(a, prop, b[prop]);
     }
   return a;
@@ -199,36 +199,36 @@ function lookupVariable(name, sceneObject) {
 var __defProp$q = Object.defineProperty;
 var __defProps$e = Object.defineProperties;
 var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
-var __hasOwnProp$s = Object.prototype.hasOwnProperty;
-var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
+var __hasOwnProp$t = Object.prototype.hasOwnProperty;
+var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$q = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$s.call(b, prop))
+    if (__hasOwnProp$t.call(b, prop))
       __defNormalProp$q(a, prop, b[prop]);
-  if (__getOwnPropSymbols$s)
-    for (var prop of __getOwnPropSymbols$s(b)) {
-      if (__propIsEnum$s.call(b, prop))
+  if (__getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(b)) {
+      if (__propIsEnum$t.call(b, prop))
         __defNormalProp$q(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-var __objRest$3 = (source, exclude) => {
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$s.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$t.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$s)
-    for (var prop of __getOwnPropSymbols$s(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$s.call(source, prop))
+  if (source != null && __getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$t.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function SceneComponentWrapperWithoutMemo(_a) {
-  var _b = _a, { model } = _b, otherProps = __objRest$3(_b, ["model"]);
+  var _b = _a, { model } = _b, otherProps = __objRest$4(_b, ["model"]);
   var _a2;
   const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
   const [activated, setActivated] = React__default["default"].useState(false);
@@ -249,17 +249,17 @@ function EmptyRenderer(_) {
 }
 
 var __defProp$p = Object.defineProperty;
-var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
-var __hasOwnProp$r = Object.prototype.hasOwnProperty;
-var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
+var __hasOwnProp$s = Object.prototype.hasOwnProperty;
+var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$p = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$r.call(b, prop))
+    if (__hasOwnProp$s.call(b, prop))
       __defNormalProp$p(a, prop, b[prop]);
-  if (__getOwnPropSymbols$r)
-    for (var prop of __getOwnPropSymbols$r(b)) {
-      if (__propIsEnum$r.call(b, prop))
+  if (__getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(b)) {
+      if (__propIsEnum$s.call(b, prop))
         __defNormalProp$p(a, prop, b[prop]);
     }
   return a;
@@ -297,17 +297,17 @@ function getClosest(sceneObject, extract) {
 }
 
 var __defProp$o = Object.defineProperty;
-var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
-var __hasOwnProp$q = Object.prototype.hasOwnProperty;
-var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
+var __hasOwnProp$r = Object.prototype.hasOwnProperty;
+var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$o = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$q.call(b, prop))
+    if (__hasOwnProp$r.call(b, prop))
       __defNormalProp$o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(b)) {
-      if (__propIsEnum$q.call(b, prop))
+  if (__getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(b)) {
+      if (__propIsEnum$r.call(b, prop))
         __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
@@ -489,17 +489,17 @@ function useSceneObjectState(model) {
 }
 
 var __defProp$n = Object.defineProperty;
-var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
-var __hasOwnProp$p = Object.prototype.hasOwnProperty;
-var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
+var __hasOwnProp$q = Object.prototype.hasOwnProperty;
+var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$p.call(b, prop))
+    if (__hasOwnProp$q.call(b, prop))
       __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(b)) {
-      if (__propIsEnum$p.call(b, prop))
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b)) {
+      if (__propIsEnum$q.call(b, prop))
         __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
@@ -534,17 +534,17 @@ class SceneObjectUrlSyncConfig {
 }
 
 var __defProp$m = Object.defineProperty;
-var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
-var __hasOwnProp$o = Object.prototype.hasOwnProperty;
-var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
+var __hasOwnProp$p = Object.prototype.hasOwnProperty;
+var __propIsEnum$p = 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) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$o.call(b, prop))
+    if (__hasOwnProp$p.call(b, prop))
       __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(b)) {
-      if (__propIsEnum$o.call(b, prop))
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
         __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
@@ -1141,17 +1141,17 @@ function collectAllVariables(sceneObject, record = {}) {
 var __defProp$l = Object.defineProperty;
 var __defProps$d = Object.defineProperties;
 var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = 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) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$n.call(b, prop))
+    if (__hasOwnProp$o.call(b, prop))
       __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
         __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
@@ -1646,17 +1646,17 @@ class ActWhenVariableChanged extends SceneObjectBase {
 var __defProp$k = Object.defineProperty;
 var __defProps$c = Object.defineProperties;
 var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
-var __hasOwnProp$m = Object.prototype.hasOwnProperty;
-var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = 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))
+    if (__hasOwnProp$n.call(b, prop))
       __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
         __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
@@ -1721,17 +1721,17 @@ var index = /*#__PURE__*/Object.freeze({
 var __defProp$j = Object.defineProperty;
 var __defProps$b = Object.defineProperties;
 var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = 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))
+    if (__hasOwnProp$m.call(b, prop))
       __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
         __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
@@ -1867,17 +1867,17 @@ class VariableValueRecorder {
 var __defProp$i = Object.defineProperty;
 var __defProps$a = Object.defineProperties;
 var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = 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))
+    if (__hasOwnProp$l.call(b, prop))
       __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
         __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
@@ -1891,17 +1891,17 @@ class SceneQueryRunner extends SceneObjectBase {
   constructor(initialState) {
     super(initialState);
     this._variableValueRecorder = new VariableValueRecorder();
-    this._hasFetchedData = false;
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["queries", "datasource"],
       onVariableUpdatesCompleted: (variables, dependencyChanged) => this.onVariableUpdatesCompleted(variables, dependencyChanged)
     });
     this.onDataReceived = (data$1) => {
       const preProcessedData = data.preProcessPanelData(data$1, this.state.data);
-      if (!this._hasFetchedData && preProcessedData.state !== schema.LoadingState.Loading) {
-        this._hasFetchedData = true;
+      let hasFetchedData = this.state._hasFetchedData;
+      if (!hasFetchedData && preProcessedData.state !== schema.LoadingState.Loading) {
+        hasFetchedData = true;
       }
-      this.setState({ data: preProcessedData });
+      this.setState({ data: preProcessedData, _hasFetchedData: hasFetchedData });
     };
     this.addActivationHandler(() => this._onActivate());
   }
@@ -1918,7 +1918,7 @@ class SceneQueryRunner extends SceneObjectBase {
     return () => this._onDeactivate();
   }
   onVariableUpdatesCompleted(_variablesThatHaveChanged, dependencyChanged) {
-    if (this.state.isWaitingForVariables && this.shouldRunQueriesOnActivate()) {
+    if (this.state._isWaitingForVariables && this.shouldRunQueriesOnActivate()) {
       this.runQueries();
       return;
     }
@@ -1977,7 +1977,7 @@ class SceneQueryRunner extends SceneObjectBase {
     }
   }
   isDataReadyToDisplay() {
-    return this._hasFetchedData;
+    return Boolean(this.state._hasFetchedData);
   }
   runQueries() {
     const timeRange = sceneGraph.getTimeRange(this);
@@ -2002,11 +2002,11 @@ class SceneQueryRunner extends SceneObjectBase {
     (_a = this._querySub) == null ? void 0 : _a.unsubscribe();
     if (sceneGraph.hasVariableDependencyInLoadingState(this)) {
       writeSceneLog("SceneQueryRunner", "Variable dependency is in loading state, skipping query execution");
-      this.setState({ isWaitingForVariables: true });
+      this.setState({ _isWaitingForVariables: true });
       return;
     }
-    if (this.state.isWaitingForVariables) {
-      this.setState({ isWaitingForVariables: false });
+    if (this.state._isWaitingForVariables) {
+      this.setState({ _isWaitingForVariables: false });
     }
     const { minInterval, queries } = this.state;
     const sceneObjectScopedVar = {
@@ -2072,17 +2072,17 @@ function findFirstDatasource(targets) {
 var __defProp$h = Object.defineProperty;
 var __defProps$9 = Object.defineProperties;
 var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = 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))
+    if (__hasOwnProp$k.call(b, prop))
       __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
         __defNormalProp$h(a, prop, b[prop]);
     }
   return a;
@@ -2364,6 +2364,13 @@ class SceneVariableSet extends SceneObjectBase {
     writeVariableTraceLog(variable, "updateAndValidate completed");
     this._updateNextBatch();
   }
+  cancel(variable) {
+    var _a;
+    const update = this._updating.get(variable);
+    (_a = update == null ? void 0 : update.subscription) == null ? void 0 : _a.unsubscribe();
+    this._updating.delete(variable);
+    this._variablesToUpdate.delete(variable);
+  }
   _handleVariableError(variable, err) {
     var _a;
     const update = this._updating.get(variable);
@@ -2436,17 +2443,17 @@ function writeVariableTraceLog(variable, message, err) {
 var __defProp$g = Object.defineProperty;
 var __defProps$8 = Object.defineProperties;
 var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = 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))
+    if (__hasOwnProp$j.call(b, prop))
       __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
         __defNormalProp$g(a, prop, b[prop]);
     }
   return a;
@@ -2467,6 +2474,43 @@ class ConstantVariable extends SceneObjectBase {
   }
 }
 
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __objRest$3 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = 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;
+};
+const LoadingIndicator = (_a) => {
+  var _b = _a, props = __objRest$3(_b, ["innerProps"]);
+  const { onCancel } = props.selectProps;
+  const onMouseDown = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onCancel();
+    },
+    [onCancel]
+  );
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {
+    content: "Cancel query"
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    className: "spin-clockwise",
+    name: "sync",
+    size: "xs",
+    "aria-label": e2eSelectors.selectors.components.LoadingIndicator.icon,
+    role: "button",
+    onMouseDown
+  }));
+};
 function VariableValueSelect({ model }) {
   const { value, key, loading } = model.useState();
   return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
@@ -2480,7 +2524,12 @@ function VariableValueSelect({ model }) {
     options: model.getOptionsForSelect(),
     onChange: (newValue) => {
       model.changeValueTo(newValue.value, newValue.label);
-    }
+    },
+    onCancel: () => {
+      var _a;
+      (_a = model.cancel) == null ? void 0 : _a.call(model);
+    },
+    components: { LoadingIndicator }
   });
 }
 function VariableValueSelectMulti({ model }) {
@@ -2499,6 +2548,11 @@ function VariableValueSelectMulti({ model }) {
     isClearable: true,
     onOpenMenu: () => {
     },
+    onCancel: () => {
+      var _a;
+      (_a = model.cancel) == null ? void 0 : _a.call(model);
+    },
+    components: { LoadingIndicator },
     onChange: (newValue) => {
       model.changeValueTo(
         newValue.map((v) => v.value),
@@ -2532,6 +2586,11 @@ class MultiValueVariable extends SceneObjectBase {
       })
     );
   }
+  cancel() {
+    this.setStateHelper({ loading: false });
+    const sceneVarSet = this.parent;
+    sceneVarSet == null ? void 0 : sceneVarSet.cancel(this);
+  }
   updateValueGivenNewOptions(options) {
     const stateUpdate = {
       options,
@@ -3341,16 +3400,21 @@ class TestVariable extends MultiValueVariable {
       });
       let timeout;
       if (delayMs) {
-        timeout = setTimeout(() => this.signalUpdateCompleted(), delayMs);
+        timeout = window.setTimeout(() => this.signalUpdateCompleted(), delayMs);
       }
       this.isGettingValues = true;
       return () => {
         sub.unsubscribe();
-        clearTimeout(timeout);
+        window.clearTimeout(timeout);
+        this.setState({ loading: false });
         this.isGettingValues = false;
       };
     });
   }
+  cancel() {
+    const sceneVarSet = getClosest(this, (s) => s instanceof SceneVariableSet ? s : void 0);
+    sceneVarSet == null ? void 0 : sceneVarSet.cancel(this);
+  }
   issueQuery() {
     const interpolatedQuery = sceneGraph.interpolate(this, this.state.query);
     const options = queryMetricTree(interpolatedQuery).map((x) => ({ label: x.name, value: x.name }));
@@ -4741,7 +4805,22 @@ const GRID_CELL_HEIGHT = 30;
 const GRID_CELL_VMARGIN = 8;
 const GRID_COLUMN_COUNT = 24;
 
+function SceneDragHandle({ className, dragClass }) {
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `${className} ${dragClass}`,
+    style: {
+      width: "20px",
+      height: "20px",
+      cursor: "move"
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    name: "draggabledots"
+  }));
+}
+
 var __defProp$5 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
 var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
 var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
@@ -4757,14 +4836,153 @@ var __spreadValues$5 = (a, b) => {
     }
   return a;
 };
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+class SceneGridRow extends SceneObjectBase {
+  constructor(state) {
+    super(__spreadProps$2(__spreadValues$5({
+      children: state.children || [],
+      isCollapsible: state.isCollapsible || true,
+      title: state.title || "",
+      isDraggable: state.isDraggable || true,
+      isResizable: state.isResizable || false
+    }, state), {
+      x: 0,
+      height: 1,
+      width: GRID_COLUMN_COUNT
+    }));
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["rowc"] });
+    this.onCollapseToggle = () => {
+      if (!this.state.isCollapsible) {
+        return;
+      }
+      this.getGridLayout().toggleRow(this);
+    };
+  }
+  getGridLayout() {
+    const layout = this.parent;
+    if (!layout || !(layout instanceof SceneGridLayout)) {
+      throw new Error("SceneGridRow must be a child of SceneGridLayout");
+    }
+    return layout;
+  }
+  getUrlState() {
+    return { rowc: this.state.isCollapsed ? "1" : "0" };
+  }
+  updateFromUrl(values) {
+    if (values.rowc == null) {
+      return;
+    }
+    if (values.rowc !== this.getUrlState().rowc) {
+      this.onCollapseToggle();
+    }
+  }
+}
+SceneGridRow.Component = SceneGridRowRenderer;
+function SceneGridRowRenderer({ model }) {
+  const styles = ui.useStyles2(getSceneGridRowStyles);
+  const { isCollapsible, isCollapsed, title, isDraggable } = model.useState();
+  const dragHandle = /* @__PURE__ */ React__default["default"].createElement(SceneDragHandle, {
+    dragClass: model.getGridLayout().getDragClass()
+  });
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.row
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: css.cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)
+  }, /* @__PURE__ */ React__default["default"].createElement("button", {
+    onClick: model.onCollapseToggle,
+    className: styles.rowTitleButton
+  }, isCollapsible && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    name: isCollapsed ? "angle-right" : "angle-down"
+  }), /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: styles.rowTitle
+  }, title)), isDraggable && isCollapsed && /* @__PURE__ */ React__default["default"].createElement("div", null, dragHandle)));
+}
+const getSceneGridRowStyles = (theme) => {
+  return {
+    row: css.css({
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      zIndex: 0,
+      display: "flex",
+      flexDirection: "column"
+    }),
+    rowHeader: css.css({
+      width: "100%",
+      height: "30px",
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: "8px",
+      border: `1px solid transparent`
+    }),
+    rowTitleButton: css.css({
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      background: "transparent",
+      border: "none",
+      gap: theme.spacing(1)
+    }),
+    rowHeaderCollapsed: css.css({
+      marginBottom: "0px",
+      background: theme.colors.background.primary,
+      border: `1px solid ${theme.colors.border.weak}`,
+      borderRadius: theme.shape.borderRadius(1)
+    }),
+    rowTitle: css.css({
+      fontSize: theme.typography.h5.fontSize,
+      fontWeight: theme.typography.fontWeightMedium
+    })
+  };
+};
+
+class SceneGridItem extends SceneObjectBase {
+}
+SceneGridItem.Component = SceneGridItemRenderer;
+function SceneGridItemRenderer({ model }) {
+  const { body } = model.useState();
+  const parent = model.parent;
+  if (parent && !isSceneGridLayout(parent) && !isSceneGridRow(parent)) {
+    throw new Error("SceneGridItem must be a child of SceneGridLayout or SceneGridRow");
+  }
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(body.Component, {
+    model: body
+  });
+}
+function isSceneGridRow(child) {
+  return child instanceof SceneGridRow;
+}
+function isSceneGridLayout(child) {
+  return child instanceof SceneGridLayout;
+}
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -4804,7 +5022,7 @@ const LazyLoader = React__default["default"].forwardRef(
         }
       };
     });
-    return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$5({
+    return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$4({
       id,
       ref: innerRef
     }, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
@@ -4823,7 +5041,7 @@ LazyLoader.observer = new IntersectionObserver(
 );
 
 function SceneGridLayoutRenderer({ model }) {
-  const { children, isLazy, isDraggable } = model.useState();
+  const { children, isLazy, isDraggable, isResizable } = model.useState();
   validateChildrenSize(children);
   return /* @__PURE__ */ React__default["default"].createElement(AutoSizer__default["default"], {
     disableHeight: true
@@ -4837,7 +5055,7 @@ function SceneGridLayoutRenderer({ model }) {
     }, /* @__PURE__ */ React__default["default"].createElement(ReactGridLayout__default["default"], {
       width,
       isDraggable: isDraggable && width > 768,
-      isResizable: false,
+      isResizable: isResizable != null ? isResizable : false,
       containerPadding: [0, 0],
       useCSSTransforms: false,
       margin: [GRID_CELL_VMARGIN, GRID_CELL_VMARGIN],
@@ -4850,15 +5068,20 @@ function SceneGridLayoutRenderer({ model }) {
       onResizeStop: model.onResizeStop,
       onLayoutChange: model.onLayoutChange,
       isBounded: false
-    }, layout.map((gridItem) => {
+    }, layout.map((gridItem, index) => {
       const sceneChild = model.getSceneLayoutChild(gridItem.i);
+      const style = { zIndex: layout.length - index };
       return isLazy ? /* @__PURE__ */ React__default["default"].createElement(LazyLoader, {
-        key: sceneChild.state.key
+        key: sceneChild.state.key,
+        style,
+        "data-panelid": sceneChild.state.key
       }, /* @__PURE__ */ React__default["default"].createElement(sceneChild.Component, {
         model: sceneChild,
         key: sceneChild.state.key
       })) : /* @__PURE__ */ React__default["default"].createElement("div", {
-        key: sceneChild.state.key
+        key: sceneChild.state.key,
+        style,
+        "data-panelid": sceneChild.state.key
       }, /* @__PURE__ */ React__default["default"].createElement(sceneChild.Component, {
         model: sceneChild,
         key: sceneChild.state.key
@@ -4874,137 +5097,6 @@ function validateChildrenSize(children) {
   }
 }
 
-function SceneDragHandle({ className, dragClass }) {
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: `${className} ${dragClass}`,
-    style: {
-      width: "20px",
-      height: "20px",
-      cursor: "move"
-    }
-  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-    name: "draggabledots"
-  }));
-}
-
-var __defProp$4 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-class SceneGridRow extends SceneObjectBase {
-  constructor(state) {
-    super(__spreadProps$2(__spreadValues$4({
-      children: state.children || [],
-      isCollapsible: state.isCollapsible || true,
-      title: state.title || "",
-      isDraggable: state.isDraggable || true,
-      isResizable: state.isResizable || false
-    }, state), {
-      x: 0,
-      height: 1,
-      width: GRID_COLUMN_COUNT
-    }));
-    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["rowc"] });
-    this.onCollapseToggle = () => {
-      if (!this.state.isCollapsible) {
-        return;
-      }
-      this.getGridLayout().toggleRow(this);
-    };
-  }
-  getGridLayout() {
-    const layout = this.parent;
-    if (!layout || !(layout instanceof SceneGridLayout)) {
-      throw new Error("SceneGridRow must be a child of SceneGridLayout");
-    }
-    return layout;
-  }
-  getUrlState() {
-    return { rowc: this.state.isCollapsed ? "1" : "0" };
-  }
-  updateFromUrl(values) {
-    if (values.rowc == null) {
-      return;
-    }
-    if (values.rowc !== this.getUrlState().rowc) {
-      this.onCollapseToggle();
-    }
-  }
-}
-SceneGridRow.Component = SceneGridRowRenderer;
-function SceneGridRowRenderer({ model }) {
-  const styles = ui.useStyles2(getSceneGridRowStyles);
-  const { isCollapsible, isCollapsed, title, isDraggable } = model.useState();
-  const dragHandle = /* @__PURE__ */ React__default["default"].createElement(SceneDragHandle, {
-    dragClass: model.getGridLayout().getDragClass()
-  });
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles.row
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: css.cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)
-  }, /* @__PURE__ */ React__default["default"].createElement("button", {
-    onClick: model.onCollapseToggle,
-    className: styles.rowTitleButton
-  }, isCollapsible && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-    name: isCollapsed ? "angle-right" : "angle-down"
-  }), /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: styles.rowTitle
-  }, title)), isDraggable && isCollapsed && /* @__PURE__ */ React__default["default"].createElement("div", null, dragHandle)));
-}
-const getSceneGridRowStyles = (theme) => {
-  return {
-    row: css.css({
-      width: "100%",
-      height: "100%",
-      position: "relative",
-      zIndex: 0,
-      display: "flex",
-      flexDirection: "column"
-    }),
-    rowHeader: css.css({
-      width: "100%",
-      height: "30px",
-      display: "flex",
-      justifyContent: "space-between",
-      marginBottom: "8px",
-      border: `1px solid transparent`
-    }),
-    rowTitleButton: css.css({
-      display: "flex",
-      alignItems: "center",
-      cursor: "pointer",
-      background: "transparent",
-      border: "none",
-      gap: theme.spacing(1)
-    }),
-    rowHeaderCollapsed: css.css({
-      marginBottom: "0px",
-      background: theme.colors.background.primary,
-      border: `1px solid ${theme.colors.border.weak}`,
-      borderRadius: theme.shape.borderRadius(1)
-    }),
-    rowTitle: css.css({
-      fontSize: theme.typography.h5.fontSize,
-      fontWeight: theme.typography.fontWeightMedium
-    })
-  };
-};
-
 var __defProp$3 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
@@ -5197,8 +5289,8 @@ const _SceneGridLayout = class extends SceneObjectBase {
     let y = (_b = size.y) != null ? _b : 0;
     const w = Number.isInteger(Number(size.width)) ? Number(size.width) : DEFAULT_PANEL_SPAN;
     const h = Number.isInteger(Number(size.height)) ? Number(size.height) : DEFAULT_PANEL_SPAN;
-    let isDraggable = Boolean(child.state.isDraggable);
-    let isResizable = Boolean(child.state.isResizable);
+    let isDraggable = child.state.isDraggable;
+    let isResizable = child.state.isResizable;
     if (child instanceof SceneGridRow) {
       isDraggable = child.state.isCollapsed ? true : false;
       isResizable = false;
@@ -5226,22 +5318,6 @@ const _SceneGridLayout = class extends SceneObjectBase {
 };
 let SceneGridLayout = _SceneGridLayout;
 SceneGridLayout.Component = SceneGridLayoutRenderer;
-class SceneGridItem extends SceneObjectBase {
-}
-SceneGridItem.Component = SceneGridItemRenderer;
-function SceneGridItemRenderer({ model }) {
-  const { body } = model.useState();
-  const parent = model.parent;
-  if (parent && !isSceneGridLayout(parent) && !isSceneGridRow(parent)) {
-    throw new Error("SceneGridItem must be a child of SceneGridLayout or SceneGridRow");
-  }
-  if (!body) {
-    return null;
-  }
-  return /* @__PURE__ */ React__default["default"].createElement(body.Component, {
-    model: body
-  });
-}
 function isItemSizeEqual(a, b) {
   return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 }
@@ -5253,12 +5329,6 @@ function sortChildrenByPosition(children) {
 function sortGridLayout(layout) {
   return [...layout].sort((a, b) => a.y - b.y || a.x - b.x);
 }
-function isSceneGridRow(child) {
-  return child instanceof SceneGridRow;
-}
-function isSceneGridLayout(child) {
-  return child instanceof SceneGridLayout;
-}
 
 var __defProp$2 = Object.defineProperty;
 var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;