@grafana/scenes 0.0.11 → 0.0.13

package/dist/index.js

@@ -15,6 +15,7 @@ var reactUse = require('react-use');
 var experimental = require('@grafana/experimental');
 var ReactGridLayout = require('react-grid-layout');
 var AutoSizer = require('react-virtualized-auto-sizer');
+var reactRouterDom = require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,21 +31,21 @@ class SceneObjectStateChangedEvent extends data.BusEventWithPayload {
 }
 SceneObjectStateChangedEvent.type = "scene-object-state-change";
 
-var __defProp$e = Object.defineProperty;
+var __defProp$f = Object.defineProperty;
 var __defProps$5 = Object.defineProperties;
 var __getOwnPropDescs$5 = 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 __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$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$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;
 };
@@ -52,11 +53,11 @@ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
+  if (source != null && __getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -71,7 +72,7 @@ function SceneComponentWrapper(_a) {
   ]);
   var _a2;
   const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
-  const inner = /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$5(__spreadValues$e({}, otherProps), {
+  const inner = /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$5(__spreadValues$f({}, otherProps), {
     model,
     isEditing
   }));
@@ -110,19 +111,19 @@ function getSceneEditor$1(sceneObject) {
   throw new Error("No editor found in scene tree");
 }
 
-var __defProp$d = Object.defineProperty;
-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$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$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$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;
 };
@@ -141,7 +142,7 @@ function forEachSceneObjectInState(state, callback) {
   }
 }
 function cloneSceneObject(sceneObject, withState) {
-  const clonedState = __spreadValues$d({}, sceneObject.state);
+  const clonedState = __spreadValues$e({}, sceneObject.state);
   for (const key in clonedState) {
     const propValue = clonedState[key];
     if (propValue instanceof SceneObjectBase) {
@@ -163,19 +164,19 @@ function cloneSceneObject(sceneObject, withState) {
   return new sceneObject.constructor(clonedState);
 }
 
-var __defProp$c = Object.defineProperty;
-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$d = Object.defineProperty;
+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$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$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;
 };
@@ -226,7 +227,7 @@ class SceneObjectBase {
   }
   setState(update) {
     const prevState = this._state;
-    const newState = __spreadValues$c(__spreadValues$c({}, this._state), update);
+    const newState = __spreadValues$d(__spreadValues$d({}, this._state), update);
     this._state = Object.freeze(newState);
     this.setParent();
     this._subject.next(newState);
@@ -251,7 +252,10 @@ class SceneObjectBase {
   }
   activate() {
     this._isActive = true;
-    const { $data, $variables } = this.state;
+    const { $data, $variables, $timeRange } = this.state;
+    if ($timeRange && !$timeRange.isActive) {
+      $timeRange.activate();
+    }
     if ($data && !$data.isActive) {
       $data.activate();
     }
@@ -261,7 +265,10 @@ class SceneObjectBase {
   }
   deactivate() {
     this._isActive = false;
-    const { $data, $variables } = this.state;
+    const { $data, $variables, $timeRange } = this.state;
+    if ($timeRange && $timeRange.isActive) {
+      $timeRange.deactivate();
+    }
     if ($data && $data.isActive) {
       $data.deactivate();
     }
@@ -312,19 +319,19 @@ class SceneObjectUrlSyncConfig {
   }
 }
 
-var __defProp$b = Object.defineProperty;
-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$c = Object.defineProperty;
+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$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$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;
 };
@@ -335,7 +342,7 @@ class SceneTimeRange extends SceneObjectBase {
     const to = (_b = state.to) != null ? _b : "now";
     const timeZone = (_c = state.timeZone) != null ? _c : data.getTimeZone();
     const value = evaluateTimeRange(from, to, timeZone);
-    super(__spreadValues$b({ from, to, timeZone, value }, state));
+    super(__spreadValues$c({ from, to, timeZone, value }, state));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["from", "to"] });
     this.onTimeRangeChange = (timeRange) => {
       const update = {};
@@ -355,8 +362,6 @@ class SceneTimeRange extends SceneObjectBase {
     this.onRefresh = () => {
       this.setState({ value: evaluateTimeRange(this.state.from, this.state.to, this.state.timeZone) });
     };
-    this.onIntervalChanged = (_) => {
-    };
   }
   getUrlState(state) {
     return { from: state.from, to: state.to };
@@ -421,53 +426,78 @@ SceneVariableValueChangedEvent.type = "scene-variable-changed-value";
 class SceneVariableSet extends SceneObjectBase {
   constructor() {
     super(...arguments);
-    this.variablesThatHaveChanged = /* @__PURE__ */ new Set();
-    this.variablesToUpdate = /* @__PURE__ */ new Set();
-    this.updating = /* @__PURE__ */ new Map();
-    this.onVariableValueChanged = (event) => {
-      const variableThatChanged = event.payload;
-      this.variablesThatHaveChanged.add(variableThatChanged);
-      if (this.updating.has(variableThatChanged)) {
-        return;
-      }
-      for (const otherVariable of this.state.variables) {
-        if (otherVariable.variableDependency) {
-          if (otherVariable.variableDependency.hasDependencyOn(variableThatChanged.state.name)) {
-            this.variablesToUpdate.add(otherVariable);
-          }
-        }
-      }
-      this.updateNextBatch();
-    };
+    this._variablesThatHaveChanged = /* @__PURE__ */ new Set();
+    this._variablesToUpdate = /* @__PURE__ */ new Set();
+    this._updating = /* @__PURE__ */ new Map();
   }
   getByName(name) {
     return this.state.variables.find((x) => x.state.name === name);
   }
   activate() {
     super.activate();
-    this._subs.add(this.subscribeToEvent(SceneVariableValueChangedEvent, this.onVariableValueChanged));
-    this.validateAndUpdateAll();
+    this._subs.add(
+      this.subscribeToEvent(SceneVariableValueChangedEvent, (event) => this.handleVariableValueChanged(event.payload))
+    );
+    this.checkForVariablesThatChangedWhileInactive();
+    for (const variable of this.state.variables) {
+      if (this.variableNeedsUpdate(variable)) {
+        this._variablesToUpdate.add(variable);
+      }
+    }
+    this.updateNextBatch();
+  }
+  checkForVariablesThatChangedWhileInactive() {
+    if (!this._validValuesWhenDeactivated) {
+      return;
+    }
+    for (const variable of this.state.variables) {
+      if (this._validValuesWhenDeactivated.has(variable)) {
+        const value = this._validValuesWhenDeactivated.get(variable);
+        if (!isVariableValueEqual(value, variable.getValue())) {
+          writeVariableTraceLog(variable, "Changed while in-active");
+          this.handleVariableValueChanged(variable);
+        }
+      }
+    }
+  }
+  variableNeedsUpdate(variable) {
+    if (!variable.validateAndUpdate) {
+      return false;
+    }
+    if (this._validValuesWhenDeactivated && this._validValuesWhenDeactivated.has(variable)) {
+      const value = this._validValuesWhenDeactivated.get(variable);
+      if (isVariableValueEqual(value, variable.getValue())) {
+        writeVariableTraceLog(variable, "Skipping updateAndValidate current value valid");
+        return false;
+      }
+    }
+    return true;
   }
   deactivate() {
     var _a;
     super.deactivate();
-    for (const update of this.updating.values()) {
+    for (const update of this._updating.values()) {
       (_a = update.subscription) == null ? void 0 : _a.unsubscribe();
     }
-    this.variablesToUpdate.clear();
-    this.updating.clear();
-    this.variablesThatHaveChanged.clear();
+    this._validValuesWhenDeactivated = /* @__PURE__ */ new Map();
+    for (const variable of this.state.variables) {
+      if (!this._variablesToUpdate.has(variable) || !this._updating.has(variable)) {
+        this._validValuesWhenDeactivated.set(variable, variable.getValue());
+      }
+    }
+    this._variablesToUpdate.clear();
+    this._updating.clear();
   }
   updateNextBatch() {
-    if (this.variablesToUpdate.size === 0 && this.variablesThatHaveChanged.size > 0) {
+    if (this._variablesToUpdate.size === 0 && this._variablesThatHaveChanged.size > 0) {
       this.notifyDependentSceneObjects();
       return;
     }
-    for (const variable of this.variablesToUpdate) {
+    for (const variable of this._variablesToUpdate) {
       if (!variable.validateAndUpdate) {
         throw new Error("Variable added to variablesToUpdate but does not have validateAndUpdate");
       }
-      if (this.updating.has(variable)) {
+      if (this._updating.has(variable)) {
         continue;
       }
       if (this.hasDependendencyInUpdateQueue(variable)) {
@@ -476,7 +506,8 @@ class SceneVariableSet extends SceneObjectBase {
       const variableToUpdate = {
         variable
       };
-      this.updating.set(variable, variableToUpdate);
+      this._updating.set(variable, variableToUpdate);
+      writeVariableTraceLog(variable, "updateAndValidate started");
       variableToUpdate.subscription = variable.validateAndUpdate().subscribe({
         next: () => this.validateAndUpdateCompleted(variable),
         error: (err) => this.handleVariableError(variable, err)
@@ -485,36 +516,45 @@ class SceneVariableSet extends SceneObjectBase {
   }
   validateAndUpdateCompleted(variable) {
     var _a;
-    const update = this.updating.get(variable);
+    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);
+    this._updating.delete(variable);
+    this._variablesToUpdate.delete(variable);
+    writeVariableTraceLog(variable, "updateAndValidate completed");
     this.updateNextBatch();
   }
   handleVariableError(variable, err) {
     var _a;
-    const update = this.updating.get(variable);
+    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);
+    this._updating.delete(variable);
+    this._variablesToUpdate.delete(variable);
     variable.setState({ loading: false, error: err });
+    writeVariableTraceLog(variable, "updateAndValidate error", err);
   }
   hasDependendencyInUpdateQueue(variable) {
     var _a;
     if (!variable.variableDependency) {
       return false;
     }
-    for (const otherVariable of this.variablesToUpdate.values()) {
+    for (const otherVariable of this._variablesToUpdate.values()) {
       if ((_a = variable.variableDependency) == null ? void 0 : _a.hasDependencyOn(otherVariable.state.name)) {
         return true;
       }
     }
     return false;
   }
-  validateAndUpdateAll() {
-    for (const variable of this.state.variables) {
-      if (variable.validateAndUpdate) {
-        this.variablesToUpdate.add(variable);
+  handleVariableValueChanged(variableThatChanged) {
+    this._variablesThatHaveChanged.add(variableThatChanged);
+    if (this._updating.has(variableThatChanged)) {
+      return;
+    }
+    for (const otherVariable of this.state.variables) {
+      if (otherVariable.variableDependency) {
+        if (otherVariable.variableDependency.hasDependencyOn(variableThatChanged.state.name)) {
+          writeVariableTraceLog(otherVariable, "Added to update quee, dependant variable value changed");
+          this._variablesToUpdate.add(otherVariable);
+        }
       }
     }
     this.updateNextBatch();
@@ -524,18 +564,29 @@ class SceneVariableSet extends SceneObjectBase {
       return;
     }
     this.traverseSceneAndNotify(this.parent);
-    this.variablesThatHaveChanged.clear();
+    this._variablesThatHaveChanged.clear();
   }
   traverseSceneAndNotify(sceneObject) {
     if (this === sceneObject) {
       return;
     }
     if (sceneObject.variableDependency) {
-      sceneObject.variableDependency.variableValuesChanged(this.variablesThatHaveChanged);
+      sceneObject.variableDependency.variableValuesChanged(this._variablesThatHaveChanged);
     }
     forEachSceneObjectInState(sceneObject.state, (child) => this.traverseSceneAndNotify(child));
   }
 }
+function writeVariableTraceLog(variable, message, err) {
+  if (window.grafanaLoggingSceneVariables) {
+    console.log(`Variable[${variable.state.name}]: ${message}`, err);
+  }
+}
+function isVariableValueEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  return lodash.isEqual(a, b);
+}
 
 const EmptyVariableSet = new SceneVariableSet({ variables: [] });
 const EmptyDataNode = new SceneDataNode({
@@ -1099,21 +1150,21 @@ const safeStringifyValue = (value) => {
   return "";
 };
 
-var __defProp$a = Object.defineProperty;
+var __defProp$b = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
 var __getOwnPropDescs$4 = 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) => {
+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$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]);
+    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;
 };
@@ -1174,7 +1225,9 @@ class SceneQueryRunner extends SceneObjectBase {
         }, 0);
       }
     } else {
-      this._containerWidth = width;
+      if (width > 0) {
+        this._containerWidth = width;
+      }
     }
   }
   runQueries() {
@@ -1241,7 +1294,7 @@ const getTransformationsStream = (sceneObject, transformations) => (inputStream)
           return sceneGraph.interpolate(sceneObject, value, (_a = data$1 == null ? void 0 : data$1.request) == null ? void 0 : _a.scopedVars);
         }
       };
-      return data.transformDataFrame(transformations, data$1.series, ctx).pipe(rxjs.map((series) => __spreadProps$4(__spreadValues$a({}, data$1), { series })));
+      return data.transformDataFrame(transformations, data$1.series, ctx).pipe(rxjs.map((series) => __spreadProps$4(__spreadValues$b({}, data$1), { series })));
     })
   );
 };
@@ -1336,25 +1389,25 @@ function VariableLabel({ state }) {
   }, labelOrName);
 }
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+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$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(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;
 };
 class ConstantVariable extends SceneObjectBase {
   constructor(initialState) {
-    super(__spreadValues$9({
+    super(__spreadValues$a({
       type: "constant",
       value: "",
       name: ""
@@ -1592,25 +1645,25 @@ class MultiValueUrlSyncHandler {
   }
 }
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
 class CustomVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$8({
+    super(__spreadValues$9({
       type: "custom",
       query: "",
       value: "",
@@ -1643,25 +1696,25 @@ CustomVariable.Component = ({ model }) => {
   return renderSelectForVariable(model);
 };
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
 class DataSourceVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$7({
+    super(__spreadValues$8({
       type: "datasource",
       value: "",
       text: "",
@@ -1739,21 +1792,21 @@ const hasStandardVariableSupport = (datasource) => {
   return "toDataQuery" in variableSupport && Boolean(variableSupport.toDataQuery);
 };
 
-var __defProp$6 = Object.defineProperty;
+var __defProp$7 = Object.defineProperty;
 var __defProps$3 = Object.defineProperties;
 var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
@@ -1794,7 +1847,7 @@ class LegacyQueryRunner {
       return getEmptyMetricFindValueObservable();
     }
     return rxjs.from(
-      this.datasource.metricFindQuery(variable.state.query, __spreadProps$3(__spreadValues$6({}, request), {
+      this.datasource.metricFindQuery(variable.state.query, __spreadProps$3(__spreadValues$7({}, request), {
         variable: {
           name: variable.state.name,
           type: variable.state.type
@@ -2001,25 +2054,25 @@ function areMetricFindValues(data$1) {
   return false;
 }
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
 class QueryVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$5({
+    super(__spreadValues$6({
       type: "query",
       name: "",
       value: "",
@@ -2173,25 +2226,25 @@ function queryMetricTree(query) {
   return queryTree(children, query.split("."), 0);
 }
 
-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) => {
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (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]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
 class TestVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$4({
+    super(__spreadValues$5({
       type: "custom",
       name: "Test",
       value: "Value",
@@ -2442,10 +2495,10 @@ function VizPanelRenderer({ model }) {
   var _a;
   const theme = ui.useTheme2();
   const replace = React.useMemo(
-    () => (value, scoped) => sceneGraph.interpolate(model, value, scoped),
+    () => (value, scoped, format) => sceneGraph.interpolate(model, value, scoped, format),
     [model]
   );
-  const { title, options, fieldConfig, pluginId, pluginLoadError, $data, placement } = model.useState();
+  const { title, description, options, fieldConfig, pluginId, pluginLoadError, $data, placement } = model.useState();
   const [ref, { width, height }] = reactUse.useMeasure();
   const plugin = model.getPlugin();
   const { data: data$1 } = sceneGraph.getData(model).useState();
@@ -2454,7 +2507,7 @@ function VizPanelRenderer({ model }) {
   const dragHandle = /* @__PURE__ */ React__default["default"].createElement(SceneDragHandle, {
     layoutKey: parentLayout.state.key
   });
-  const titleInterpolated = sceneGraph.interpolate(model, title);
+  const titleInterpolated = replace(title, void 0, "text");
   const timeZone = sceneGraph.getTimeRange(model).state.timeZone;
   const dataWithOverrides = data.useFieldOverrides(plugin, fieldConfig, data$1, timeZone, theme, replace);
   if (pluginLoadError) {
@@ -2470,14 +2523,23 @@ function VizPanelRenderer({ model }) {
   if ($data instanceof SceneQueryRunner) {
     $data.setContainerWidth(width);
   }
+  const titleItems = isDraggable ? [dragHandle] : [];
+  if (model.state.$timeRange) {
+    titleItems.push(/* @__PURE__ */ React__default["default"].createElement(model.state.$timeRange.Component, {
+      model: model.state.$timeRange
+    }));
+  }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     ref,
     style: { position: "absolute", width: "100%", height: "100%" }
   }, /* @__PURE__ */ React__default["default"].createElement(ui.PanelChrome, {
     title: titleInterpolated,
+    description: description ? () => replace(description) : "",
+    loadingState: dataWithOverrides == null ? void 0 : dataWithOverrides.state,
+    statusMessage: (dataWithOverrides == null ? void 0 : dataWithOverrides.error) ? dataWithOverrides.error.message : "",
     width,
     height,
-    leftItems: isDraggable ? [dragHandle] : void 0
+    titleItems: isDraggable ? [dragHandle] : []
   }, (innerWidth, innerHeight) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, !dataWithOverrides && /* @__PURE__ */ React__default["default"].createElement("div", null, "No data..."), dataWithOverrides && /* @__PURE__ */ React__default["default"].createElement(ui.ErrorBoundaryAlert, {
     dependencies: [plugin, data$1]
   }, /* @__PURE__ */ React__default["default"].createElement(data.PluginContextProvider, {
@@ -2494,7 +2556,7 @@ function VizPanelRenderer({ model }) {
     width: innerWidth,
     height: innerHeight,
     renderCounter: 0,
-    replaceVariables: (str) => str,
+    replaceVariables: replace,
     onOptionsChange: model.onOptionsChange,
     onFieldConfigChange: model.onFieldConfigChange,
     onChangeTimeRange: model.onChangeTimeRange,
@@ -2503,25 +2565,25 @@ function VizPanelRenderer({ model }) {
 }
 VizPanelRenderer.displayName = "ScenePanelRenderer";
 
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+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$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    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;
 };
 class VizPanel extends SceneObjectBase {
   constructor(state) {
-    super(__spreadValues$3({
+    super(__spreadValues$4({
       options: {},
       fieldConfig: { defaults: {}, overrides: [] },
       title: "Title",
@@ -2591,21 +2653,21 @@ class VizPanel extends SceneObjectBase {
 }
 VizPanel.Component = VizPanelRenderer;
 
-var __defProp$2 = Object.defineProperty;
+var __defProp$3 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
@@ -2616,7 +2678,7 @@ class NestedScene extends SceneObjectBase {
     this.onToggle = () => {
       this.setState({
         isCollapsed: !this.state.isCollapsed,
-        placement: __spreadProps$2(__spreadValues$2({}, this.state.placement), {
+        placement: __spreadProps$2(__spreadValues$3({}, this.state.placement), {
           ySizing: this.state.isCollapsed ? "fill" : "content"
         })
       });
@@ -2787,7 +2849,8 @@ function SceneTimePickerRenderer({ model }) {
     }
   }), /* @__PURE__ */ React__default["default"].createElement(ui.RefreshPicker, {
     onRefresh: timeRange.onRefresh,
-    onIntervalChanged: timeRange.onIntervalChanged
+    onIntervalChanged: () => {
+    }
   }));
 }
 
@@ -2928,31 +2991,31 @@ const GRID_CELL_HEIGHT = 30;
 const GRID_CELL_VMARGIN = 8;
 const GRID_COLUMN_COUNT = 24;
 
-var __defProp$1 = Object.defineProperty;
+var __defProp$2 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 class SceneGridRow extends SceneObjectBase {
   constructor(state) {
-    super(__spreadProps$1(__spreadValues$1({
+    super(__spreadProps$1(__spreadValues$2({
       isCollapsible: true
     }, state), {
-      placement: __spreadProps$1(__spreadValues$1({
+      placement: __spreadProps$1(__spreadValues$2({
         isResizable: false,
         isDraggable: true
       }, state.placement), {
@@ -3040,29 +3103,29 @@ const getSceneGridRowStyles = (theme) => {
   };
 };
 
-var __defProp = Object.defineProperty;
+var __defProp$1 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 class SceneGridLayout extends SceneObjectBase {
   constructor(state) {
-    super(__spreadProps(__spreadValues({}, state), {
-      placement: __spreadValues({
+    super(__spreadProps(__spreadValues$1({}, state), {
+      placement: __spreadValues$1({
         isDraggable: true
       }, state.placement),
       children: sortChildrenByPosition(state.children)
@@ -3083,7 +3146,7 @@ class SceneGridLayout extends SceneObjectBase {
         };
         if (!isItemSizeEqual(child.state.placement, nextSize)) {
           child.setState({
-            placement: __spreadValues(__spreadValues({}, child.state.placement), nextSize)
+            placement: __spreadValues$1(__spreadValues$1({}, child.state.placement), nextSize)
           });
         }
       }
@@ -3092,7 +3155,7 @@ class SceneGridLayout extends SceneObjectBase {
     this.onResizeStop = (_, o, n) => {
       const child = this.getSceneLayoutChild(n.i);
       child.setState({
-        placement: __spreadProps(__spreadValues({}, child.state.placement), {
+        placement: __spreadProps(__spreadValues$1({}, child.state.placement), {
           width: n.w,
           height: n.h
         })
@@ -3107,7 +3170,7 @@ class SceneGridLayout extends SceneObjectBase {
         const childSize = child.state.placement;
         if ((childSize == null ? void 0 : childSize.x) !== gridItem.x || (childSize == null ? void 0 : childSize.y) !== gridItem.y) {
           child.setState({
-            placement: __spreadProps(__spreadValues({}, child.state.placement), {
+            placement: __spreadProps(__spreadValues$1({}, child.state.placement), {
               x: gridItem.x,
               y: gridItem.y
             })
@@ -3143,7 +3206,7 @@ class SceneGridLayout extends SceneObjectBase {
     const yDiff = firstPanelYPos - (rowY + 1);
     let yMax = rowY;
     for (const panel of rowChildren) {
-      const newSize = __spreadValues({}, panel.state.placement);
+      const newSize = __spreadValues$1({}, panel.state.placement);
       newSize.y = (_d = newSize.y) != null ? _d : rowY;
       newSize.y -= yDiff;
       if (newSize.y > ((_e = panel.state.placement) == null ? void 0 : _e.y)) {
@@ -3185,7 +3248,7 @@ class SceneGridLayout extends SceneObjectBase {
   pushChildDown(child, amount) {
     var _a;
     child.setState({
-      placement: __spreadProps(__spreadValues({}, child.state.placement), {
+      placement: __spreadProps(__spreadValues$1({}, child.state.placement), {
         y: ((_a = child.state.placement) == null ? void 0 : _a.y) + amount
       })
     });
@@ -3253,7 +3316,7 @@ class SceneGridLayout extends SceneObjectBase {
     cells = sortGridLayout(cells);
     if (width < 768) {
       this._skipOnLayoutChange = true;
-      return cells.map((cell) => __spreadProps(__spreadValues({}, cell), { w: 24 }));
+      return cells.map((cell) => __spreadProps(__spreadValues$1({}, cell), { w: 24 }));
     }
     this._skipOnLayoutChange = false;
     return cells;
@@ -3319,6 +3382,194 @@ function sortGridLayout(layout) {
   return [...layout].sort((a, b) => a.y - b.y || a.x - b.x);
 }
 
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+function useAppQueryParams() {
+  const location = reactRouterDom.useLocation();
+  return runtime.locationSearchToObject(location.search || "");
+}
+function getLinkUrlWithAppUrlState(path, params, preserveParams) {
+  const paramsCopy = __spreadValues({}, params);
+  if (preserveParams) {
+    for (const key of Object.keys(paramsCopy)) {
+      if (!preserveParams.includes(key)) {
+        delete paramsCopy[key];
+      }
+    }
+  }
+  return data.urlUtil.renderUrl(path, paramsCopy);
+}
+
+const sceneCache = /* @__PURE__ */ new Map();
+class SceneApp extends SceneObjectBase {
+}
+SceneApp.Component = ({ model }) => {
+  const { pages } = model.useState();
+  return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, pages.map((page) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+    key: page.state.url,
+    exact: false,
+    path: page.state.url,
+    render: () => {
+      return page && /* @__PURE__ */ React__default["default"].createElement(page.Component, {
+        model: page
+      });
+    }
+  })));
+};
+class SceneAppPage extends SceneObjectBase {
+}
+SceneAppPage.Component = SceneAppPageRenderer;
+function SceneAppPageRenderer({ model }) {
+  var _a;
+  const { tabs, drilldowns, url, routePath } = model.state;
+  const routes = [];
+  if (tabs) {
+    for (const page2 of tabs) {
+      routes.push(
+        /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          exact: true,
+          key: page2.state.url,
+          path: (_a = page2.state.routePath) != null ? _a : page2.state.url,
+          render: () => {
+            return /* @__PURE__ */ React__default["default"].createElement(page2.Component, {
+              model: page2
+            });
+          }
+        })
+      );
+      if (page2.state.drilldowns) {
+        for (const drilldown of page2.state.drilldowns) {
+          routes.push(
+            /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+              exact: false,
+              key: drilldown.routePath,
+              path: drilldown.routePath,
+              render: () => {
+                return /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
+                  drilldown,
+                  parent: page2
+                });
+              }
+            })
+          );
+        }
+      }
+    }
+    return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, routes);
+  }
+  if (drilldowns) {
+    for (const drilldown of drilldowns) {
+      routes.push(
+        /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          key: drilldown.routePath,
+          exact: false,
+          path: drilldown.routePath,
+          render: () => {
+            return /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
+              drilldown,
+              parent: model
+            });
+          }
+        })
+      );
+    }
+  }
+  let page = /* @__PURE__ */ React__default["default"].createElement(ScenePageRenderer, {
+    page: model
+  });
+  if (model.parent instanceof SceneAppPage) {
+    page = /* @__PURE__ */ React__default["default"].createElement(ScenePageRenderer, {
+      page: model.parent,
+      activeTab: model,
+      tabs: model.parent.state.tabs
+    });
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+    key: url,
+    exact: true,
+    path: routePath != null ? routePath : url,
+    render: () => {
+      return page;
+    }
+  }), routes);
+}
+function ScenePageRenderer({ page, tabs, activeTab }) {
+  const [isInitialized, setIsInitialized] = React.useState(false);
+  const params = useAppQueryParams();
+  const routeMatch = reactRouterDom.useRouteMatch();
+  let scene = sceneCache.get(routeMatch.url);
+  if (!scene) {
+    scene = activeTab ? activeTab.state.getScene(routeMatch) : page.state.getScene(routeMatch);
+    sceneCache.set(routeMatch.url, scene);
+  }
+  React.useEffect(() => {
+    if (!isInitialized && scene) {
+      scene.initUrlSync();
+      setIsInitialized(true);
+    }
+  }, [isInitialized, scene]);
+  if (!isInitialized) {
+    return null;
+  }
+  const pageNav = {
+    text: page.state.title,
+    subTitle: page.state.subTitle,
+    url: getLinkUrlWithAppUrlState(page.state.url, params, page.state.preserveUrlKeys),
+    hideFromBreadcrumbs: page.state.hideFromBreadcrumbs,
+    parentItem: getParentBreadcrumbs(page.state.getParentPage ? page.state.getParentPage() : page.parent, params)
+  };
+  if (tabs) {
+    pageNav.children = tabs.map((tab) => {
+      return {
+        text: tab.state.title,
+        active: activeTab === tab,
+        url: getLinkUrlWithAppUrlState(tab.state.url, params, tab.state.preserveUrlKeys),
+        parentItem: pageNav
+      };
+    });
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(runtime.PluginPage, {
+    pageNav
+  }, /* @__PURE__ */ React__default["default"].createElement(scene.Component, {
+    model: scene
+  }));
+}
+function SceneAppDrilldownViewRender(props) {
+  const routeMatch = reactRouterDom.useRouteMatch();
+  const scene = props.drilldown.getPage(routeMatch, props.parent);
+  return /* @__PURE__ */ React__default["default"].createElement(scene.Component, {
+    model: scene
+  });
+}
+function getParentBreadcrumbs(parent, params) {
+  if (parent instanceof SceneAppPage) {
+    return {
+      text: parent.state.title,
+      url: getLinkUrlWithAppUrlState(parent.state.url, params, parent.state.preserveUrlKeys),
+      hideFromBreadcrumbs: parent.state.hideFromBreadcrumbs,
+      parentItem: getParentBreadcrumbs(
+        parent.state.getParentPage ? parent.state.getParentPage() : parent.parent,
+        params
+      )
+    };
+  }
+  return void 0;
+}
+
 exports.ConstantVariable = ConstantVariable;
 exports.CustomVariable = CustomVariable;
 exports.DataSourceVariable = DataSourceVariable;
@@ -3326,6 +3577,8 @@ exports.EmbeddedScene = EmbeddedScene;
 exports.FormatRegistryID = FormatRegistryID;
 exports.NestedScene = NestedScene;
 exports.QueryVariable = QueryVariable;
+exports.SceneApp = SceneApp;
+exports.SceneAppPage = SceneAppPage;
 exports.SceneByFrameRepeater = SceneByFrameRepeater;
 exports.SceneCanvasText = SceneCanvasText;
 exports.SceneControlsSpacer = SceneControlsSpacer;