@grafana/scenes 0.0.12 → 0.0.14

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,17 +252,23 @@ class SceneObjectBase {
   }
   activate() {
     this._isActive = true;
-    const { $data, $variables } = this.state;
-    if ($data && !$data.isActive) {
-      $data.activate();
+    const { $data, $variables, $timeRange } = this.state;
+    if ($timeRange && !$timeRange.isActive) {
+      $timeRange.activate();
     }
     if ($variables && !$variables.isActive) {
       $variables.activate();
     }
+    if ($data && !$data.isActive) {
+      $data.activate();
+    }
   }
   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 };
@@ -414,176 +419,6 @@ function evaluateTimeRange(from, to, timeZone, fiscalYearStartMonth) {
   };
 }
 
-class SceneVariableValueChangedEvent extends data.BusEventWithPayload {
-}
-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();
-  }
-  getByName(name) {
-    return this.state.variables.find((x) => x.state.name === name);
-  }
-  activate() {
-    super.activate();
-    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()) {
-      (_a = update.subscription) == null ? void 0 : _a.unsubscribe();
-    }
-    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) {
-      this.notifyDependentSceneObjects();
-      return;
-    }
-    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)) {
-        continue;
-      }
-      if (this.hasDependendencyInUpdateQueue(variable)) {
-        continue;
-      }
-      const variableToUpdate = {
-        variable
-      };
-      this._updating.set(variable, variableToUpdate);
-      writeVariableTraceLog(variable, "updateAndValidate started");
-      variableToUpdate.subscription = variable.validateAndUpdate().subscribe({
-        next: () => this.validateAndUpdateCompleted(variable),
-        error: (err) => this.handleVariableError(variable, err)
-      });
-    }
-  }
-  validateAndUpdateCompleted(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);
-    writeVariableTraceLog(variable, "updateAndValidate completed");
-    this.updateNextBatch();
-  }
-  handleVariableError(variable, err) {
-    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);
-    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()) {
-      if ((_a = variable.variableDependency) == null ? void 0 : _a.hasDependencyOn(otherVariable.state.name)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  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();
-  }
-  notifyDependentSceneObjects() {
-    if (!this.parent) {
-      return;
-    }
-    this.traverseSceneAndNotify(this.parent);
-    this._variablesThatHaveChanged.clear();
-  }
-  traverseSceneAndNotify(sceneObject) {
-    if (this === sceneObject) {
-      return;
-    }
-    if (sceneObject.variableDependency) {
-      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({
   data: {
     state: data.LoadingState.Done,
@@ -592,6 +427,18 @@ const EmptyDataNode = new SceneDataNode({
   }
 });
 const DefaultTimeRange = new SceneTimeRange();
+class EmptyVariableSetImpl extends SceneObjectBase {
+  constructor() {
+    super({ variables: [] });
+  }
+  getByName(name) {
+    return void 0;
+  }
+  isVariableLoadingOrWaitingToUpdate(variable) {
+    return false;
+  }
+}
+const EmptyVariableSet = new EmptyVariableSetImpl();
 
 const _ScopedVarsVariable = class {
   constructor(name, value) {
@@ -920,31 +767,11 @@ function formatQueryParameter(name, value) {
   return `var-${name}=${encodeURIComponentStrict(value)}`;
 }
 
-function sceneInterpolator(sceneObject, target, scopedVars, format) {
-  if (!target) {
-    return target != null ? target : "";
-  }
-  VARIABLE_REGEX.lastIndex = 0;
-  return target.replace(VARIABLE_REGEX, (match, var1, var2, fmt2, var3, fieldPath, fmt3) => {
-    const variableName = var1 || var2 || var3;
-    const fmt = fmt2 || fmt3 || format;
-    let variable;
-    if (scopedVars && scopedVars[variableName]) {
-      variable = getSceneVariableForScopedVar(variableName, scopedVars[variableName]);
-    } else {
-      variable = lookupSceneVariable(variableName, sceneObject);
-    }
-    if (!variable) {
-      return match;
-    }
-    return formatValue(variable, variable.getValue(fieldPath), fmt);
-  });
-}
-function lookupSceneVariable(name, sceneObject) {
+function lookupVariable(name, sceneObject) {
   const variables = sceneObject.state.$variables;
   if (!variables) {
     if (sceneObject.parent) {
-      return lookupSceneVariable(name, sceneObject.parent);
+      return lookupVariable(name, sceneObject.parent);
     } else {
       return null;
     }
@@ -953,10 +780,31 @@ function lookupSceneVariable(name, sceneObject) {
   if (found) {
     return found;
   } else if (sceneObject.parent) {
-    return lookupSceneVariable(name, sceneObject.parent);
+    return lookupVariable(name, sceneObject.parent);
   }
   return null;
 }
+
+function sceneInterpolator(sceneObject, target, scopedVars, format) {
+  if (!target) {
+    return target != null ? target : "";
+  }
+  VARIABLE_REGEX.lastIndex = 0;
+  return target.replace(VARIABLE_REGEX, (match, var1, var2, fmt2, var3, fieldPath, fmt3) => {
+    const variableName = var1 || var2 || var3;
+    const fmt = fmt2 || fmt3 || format;
+    let variable;
+    if (scopedVars && scopedVars[variableName]) {
+      variable = getSceneVariableForScopedVar(variableName, scopedVars[variableName]);
+    } else {
+      variable = lookupVariable(variableName, sceneObject);
+    }
+    if (!variable) {
+      return match;
+    }
+    return formatValue(variable, variable.getValue(fieldPath), fmt);
+  });
+}
 function formatValue(variable, value, formatNameOrFn) {
   if (value === null || value === void 0) {
     return "";
@@ -1047,13 +895,29 @@ function interpolate(sceneObject, value, scopedVars, format) {
   }
   return sceneInterpolator(sceneObject, value, scopedVars, format);
 }
+function hasVariableDependencyInLoadingState(sceneObject) {
+  if (!sceneObject.variableDependency) {
+    return false;
+  }
+  for (const name of sceneObject.variableDependency.getNames()) {
+    const variable = lookupVariable(name, sceneObject);
+    if (!variable) {
+      continue;
+    }
+    const set = variable.parent;
+    return set.isVariableLoadingOrWaitingToUpdate(variable);
+  }
+  return false;
+}
 const sceneGraph = {
   getVariables,
   getData,
   getTimeRange,
   getSceneEditor,
   getLayout,
-  interpolate
+  interpolate,
+  lookupVariable,
+  hasVariableDependencyInLoadingState
 };
 
 async function getDataSource(datasource, scopedVars) {
@@ -1064,26 +928,37 @@ async function getDataSource(datasource, scopedVars) {
 }
 
 class VariableDependencyConfig {
-  constructor(_sceneObject, options) {
+  constructor(_sceneObject, _options) {
     this._sceneObject = _sceneObject;
+    this._options = _options;
     this._dependencies = /* @__PURE__ */ new Set();
     this.scanCount = 0;
     this.defaultHandlerReferencedVariableValueChanged = () => {
       this._sceneObject.forceRender();
     };
-    var _a;
-    this._statePaths = options.statePaths;
-    this._onReferencedVariableValueChanged = (_a = options.onReferencedVariableValueChanged) != null ? _a : this.defaultHandlerReferencedVariableValueChanged;
+    this._statePaths = _options.statePaths;
   }
   hasDependencyOn(name) {
     return this.getNames().has(name);
   }
-  variableValuesChanged(variables) {
+  variableUpdatesCompleted(changedVariables) {
     const deps = this.getNames();
-    for (const variable of variables) {
+    let dependencyChanged = false;
+    for (const variable of changedVariables) {
       if (deps.has(variable.state.name)) {
-        this._onReferencedVariableValueChanged();
-        return;
+        dependencyChanged = true;
+        break;
+      }
+    }
+    if (this._options.onVariableUpdatesCompleted) {
+      this._options.onVariableUpdatesCompleted(changedVariables, dependencyChanged);
+      return;
+    }
+    if (dependencyChanged) {
+      if (this._options.onReferencedVariableValueChanged) {
+        this._options.onReferencedVariableValueChanged();
+      } else {
+        this.defaultHandlerReferencedVariableValueChanged();
       }
     }
   }
@@ -1145,21 +1020,85 @@ const safeStringifyValue = (value) => {
   return "";
 };
 
-var __defProp$a = Object.defineProperty;
+function writeSceneLog(logger, message, ...rest) {
+  if (window.grafanaSceneLogging) {
+    console.log(`${logger}: `, message, ...rest);
+  }
+}
+
+function isVariableValueEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  return lodash.isEqual(a, b);
+}
+
+class VariableValueRecorder {
+  constructor() {
+    this._values = /* @__PURE__ */ new Map();
+  }
+  recordCurrentDependencyValuesForSceneObject(sceneObject) {
+    this.clearValues();
+    for (const variableName of sceneObject.variableDependency.getNames()) {
+      const variable = sceneGraph.lookupVariable(variableName, sceneObject);
+      if (variable) {
+        this._values.set(variable, variable.getValue());
+      }
+    }
+  }
+  clearValues() {
+    this._values.clear();
+  }
+  hasValues() {
+    return !!this._values;
+  }
+  recordCurrentValue(variable) {
+    this._values.set(variable, variable.getValue());
+  }
+  hasRecordedValue(variable) {
+    return this._values.has(variable);
+  }
+  hasValueChanged(variable) {
+    if (this._values.has(variable)) {
+      const value = this._values.get(variable);
+      if (!isVariableValueEqual(value, variable.getValue())) {
+        return true;
+      }
+    }
+    return false;
+  }
+  hasDependenciesChanged(sceneObject) {
+    if (!this._values) {
+      return false;
+    }
+    for (const variableName of sceneObject.variableDependency.getNames()) {
+      const variable = sceneGraph.lookupVariable(variableName, sceneObject);
+      if (variable && this._values.has(variable)) {
+        const value = this._values.get(variable);
+        if (!isVariableValueEqual(value, variable.getValue())) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+}
+
+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;
 };
@@ -1171,9 +1110,10 @@ function getNextRequestId() {
 class SceneQueryRunner extends SceneObjectBase {
   constructor() {
     super(...arguments);
+    this._variableValueRecorder = new VariableValueRecorder();
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["queries", "datasource"],
-      onReferencedVariableValueChanged: () => this.runQueries()
+      onVariableUpdatesCompleted: (variables, dependencyChanged) => this.onVariableUpdatesCompleted(variables, dependencyChanged)
     });
     this.onDataReceived = (data) => {
       this.setState({ data });
@@ -1193,11 +1133,27 @@ class SceneQueryRunner extends SceneObjectBase {
       this.runQueries();
     }
   }
+  onVariableUpdatesCompleted(_variablesThatHaveChanged, dependencyChanged) {
+    if (this.state.isWaitingForVariables && this.shouldRunQueriesOnActivate()) {
+      this.runQueries();
+      return;
+    }
+    if (dependencyChanged) {
+      this.runQueries();
+    }
+  }
   shouldRunQueriesOnActivate() {
-    if (this.state.data) {
+    if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {
       return false;
     }
-    if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {
+    if (this._variableValueRecorder.hasDependenciesChanged(this)) {
+      writeSceneLog(
+        "SceneQueryRunner",
+        "Variable dependency changed while inactive, shouldRunQueriesOnActivate returns true"
+      );
+      return true;
+    }
+    if (this.state.data) {
       return false;
     }
     return true;
@@ -1208,6 +1164,7 @@ class SceneQueryRunner extends SceneObjectBase {
       this._querySub.unsubscribe();
       this._querySub = void 0;
     }
+    this._variableValueRecorder.recordCurrentDependencyValuesForSceneObject(this);
   }
   setContainerWidth(width) {
     if (!this._containerWidth && width > 0) {
@@ -1234,6 +1191,14 @@ class SceneQueryRunner extends SceneObjectBase {
     return (_b = (_a = this.state.maxDataPoints) != null ? _a : this._containerWidth) != null ? _b : 500;
   }
   async runWithTimeRange(timeRange) {
+    if (sceneGraph.hasVariableDependencyInLoadingState(this)) {
+      writeSceneLog("SceneQueryRunner", "Variable dependency is in loading state, skipping query execution");
+      this.setState({ isWaitingForVariables: true });
+      return;
+    }
+    if (this.state.isWaitingForVariables) {
+      this.setState({ isWaitingForVariables: false });
+    }
     const { datasource, minInterval, queries } = this.state;
     const sceneObjectScopedVar = {
       __sceneObject: { text: "__sceneObject", value: this }
@@ -1269,6 +1234,7 @@ class SceneQueryRunner extends SceneObjectBase {
       request.interval = norm.interval;
       request.intervalMs = norm.intervalMs;
       const runRequest = runtime.getRunRequest();
+      writeSceneLog("SceneQueryRunner", "Starting runRequest", this.state.key);
       this._querySub = runRequest(ds, request).pipe(getTransformationsStream(this, this.state.transformations)).subscribe({
         next: this.onDataReceived
       });
@@ -1289,7 +1255,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 })));
     })
   );
 };
@@ -1337,30 +1303,40 @@ class SceneDataTransformer extends SceneObjectBase {
   }
 }
 
+class SceneVariableValueChangedEvent extends data.BusEventWithPayload {
+}
+SceneVariableValueChangedEvent.type = "scene-variable-changed-value";
+
 class VariableValueSelectors extends SceneObjectBase {
 }
 VariableValueSelectors.Component = VariableValueSelectorsRenderer;
 function VariableValueSelectorsRenderer({ model }) {
   const variables = sceneGraph.getVariables(model).useState();
+  const styles = ui.useStyles2(getStyles$2);
   return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, variables.variables.map((variable) => /* @__PURE__ */ React__default["default"].createElement(VariableValueSelectWrapper, {
     key: variable.state.key,
-    variable
+    variable,
+    styles
   })));
 }
-function VariableValueSelectWrapper({ variable }) {
+function VariableValueSelectWrapper({
+  variable,
+  styles
+}) {
   const state = variable.useState();
   if (state.hide === data.VariableHide.hideVariable) {
     return null;
   }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "gf-form"
+    className: styles.container
   }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
-    state
+    state,
+    styles
   }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
     model: variable
   }));
 }
-function VariableLabel({ state }) {
+function VariableLabel({ state, styles }) {
   var _a;
   if (state.hide === data.VariableHide.hideLabel) {
     return null;
@@ -1372,37 +1348,219 @@ function VariableLabel({ state }) {
       content: state.description,
       placement: "bottom"
     }, /* @__PURE__ */ React__default["default"].createElement("label", {
-      className: "gf-form-label gf-form-label--variable",
+      className: styles.variableLabel,
       "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName),
       htmlFor: elementId
     }, labelOrName));
   }
   return /* @__PURE__ */ React__default["default"].createElement("label", {
-    className: "gf-form-label gf-form-label--variable",
+    className: styles.variableLabel,
     "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName),
     htmlFor: elementId
   }, labelOrName);
 }
+const getStyles$2 = (theme) => ({
+  container: css.css({
+    display: "flex"
+  }),
+  variableLabel: css.css({
+    background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
+    display: `flex`,
+    alignItems: "center",
+    padding: theme.spacing(0, 1),
+    fontWeight: theme.typography.fontWeightMedium,
+    fontSize: theme.typography.bodySmall.fontSize,
+    height: theme.spacing(theme.components.height.md),
+    lineHeight: theme.spacing(theme.components.height.md),
+    borderRadius: theme.shape.borderRadius(1),
+    border: `1px solid ${theme.components.input.borderColor}`,
+    position: "relative",
+    right: -1
+  })
+});
 
-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) => {
+class SceneVariableSet extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
+    this._variablesThatHaveChanged = /* @__PURE__ */ new Set();
+    this._variablesToUpdate = /* @__PURE__ */ new Set();
+    this._updating = /* @__PURE__ */ new Map();
+    this._variableValueRecorder = new VariableValueRecorder();
+  }
+  getByName(name) {
+    return this.state.variables.find((x) => x.state.name === name);
+  }
+  activate() {
+    super.activate();
+    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._variableValueRecorder.hasValues()) {
+      return;
+    }
+    for (const variable of this.state.variables) {
+      if (this._variableValueRecorder.hasValueChanged(variable)) {
+        writeVariableTraceLog(variable, "Changed while in-active");
+        this.addDependentVariablesToUpdateQueue(variable);
+      }
+    }
+  }
+  variableNeedsUpdate(variable) {
+    if (!variable.validateAndUpdate) {
+      return false;
+    }
+    if (this._variableValueRecorder.hasRecordedValue(variable)) {
+      writeVariableTraceLog(variable, "Skipping updateAndValidate current value valid");
+      return false;
+    }
+    return true;
+  }
+  deactivate() {
+    var _a;
+    super.deactivate();
+    for (const update of this._updating.values()) {
+      (_a = update.subscription) == null ? void 0 : _a.unsubscribe();
+    }
+    for (const variable of this.state.variables) {
+      if (!this._variablesToUpdate.has(variable) && !this._updating.has(variable)) {
+        this._variableValueRecorder.recordCurrentValue(variable);
+      }
+    }
+    this._variablesToUpdate.clear();
+    this._updating.clear();
+  }
+  updateNextBatch() {
+    if (this._variablesToUpdate.size === 0) {
+      this.notifyDependentSceneObjects();
+      return;
+    }
+    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)) {
+        continue;
+      }
+      if (this.hasDependendencyInUpdateQueue(variable)) {
+        continue;
+      }
+      const variableToUpdate = {
+        variable
+      };
+      this._updating.set(variable, variableToUpdate);
+      writeVariableTraceLog(variable, "updateAndValidate started");
+      variableToUpdate.subscription = variable.validateAndUpdate().subscribe({
+        next: () => this.validateAndUpdateCompleted(variable),
+        error: (err) => this.handleVariableError(variable, err)
+      });
+    }
+  }
+  validateAndUpdateCompleted(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);
+    writeVariableTraceLog(variable, "updateAndValidate completed");
+    this.updateNextBatch();
+  }
+  handleVariableError(variable, err) {
+    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);
+    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()) {
+      if ((_a = variable.variableDependency) == null ? void 0 : _a.hasDependencyOn(otherVariable.state.name)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  handleVariableValueChanged(variableThatChanged) {
+    this._variablesThatHaveChanged.add(variableThatChanged);
+    if (this._updating.has(variableThatChanged)) {
+      return;
+    }
+    this.addDependentVariablesToUpdateQueue(variableThatChanged);
+    this.updateNextBatch();
+  }
+  addDependentVariablesToUpdateQueue(variableThatChanged) {
+    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);
+        }
+      }
+    }
+  }
+  notifyDependentSceneObjects() {
+    if (!this.parent) {
+      return;
+    }
+    this.traverseSceneAndNotify(this.parent);
+    this._variablesThatHaveChanged.clear();
+  }
+  traverseSceneAndNotify(sceneObject) {
+    if (this === sceneObject) {
+      return;
+    }
+    if (!sceneObject.isActive) {
+      return;
+    }
+    if (sceneObject.variableDependency) {
+      sceneObject.variableDependency.variableUpdatesCompleted(this._variablesThatHaveChanged);
+    }
+    forEachSceneObjectInState(sceneObject.state, (child) => this.traverseSceneAndNotify(child));
+  }
+  isVariableLoadingOrWaitingToUpdate(variable) {
+    if (!this.isActive) {
+      return true;
+    }
+    return this._variablesToUpdate.has(variable) || this._updating.has(variable);
+  }
+}
+function writeVariableTraceLog(variable, message, err) {
+  writeSceneLog("SceneVariableSet", `Variable[${variable.state.name}]: ${message}`, err);
+}
+
+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: ""
@@ -1640,25 +1798,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: "",
@@ -1691,25 +1849,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: "",
@@ -1787,21 +1945,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;
 };
@@ -1842,7 +2000,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
@@ -2049,25 +2207,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: "",
@@ -2101,14 +2259,12 @@ class QueryVariable extends MultiValueVariable {
     if (this.updateSubscription) {
       this.updateSubscription.unsubscribe();
     }
-    if (this.dataSourceSubject) {
-      this.dataSourceSubject.unsubscribe();
-    }
   }
   getValueOptions(args) {
     if (this.state.query === "" || !this.state.datasource) {
       return rxjs.of([]);
     }
+    this.setState({ loading: true });
     return rxjs.from(
       getDataSource(this.state.datasource, {
         __sceneObject: { text: "__sceneObject", value: this }
@@ -2221,25 +2377,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",
@@ -2456,7 +2612,7 @@ function getStyles$1(theme) {
     container: css.css({
       flexGrow: 1,
       display: "flex",
-      gap: "8px",
+      gap: theme.spacing(2),
       minHeight: "100%",
       flexDirection: "column"
     }),
@@ -2468,7 +2624,8 @@ function getStyles$1(theme) {
     controls: css.css({
       display: "flex",
       gap: theme.spacing(1),
-      alignItems: "center"
+      alignItems: "center",
+      flexWrap: "wrap"
     })
   };
 }
@@ -2518,6 +2675,12 @@ 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%" }
@@ -2554,25 +2717,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",
@@ -2642,21 +2805,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;
 };
@@ -2667,7 +2830,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"
         })
       });
@@ -2838,7 +3001,8 @@ function SceneTimePickerRenderer({ model }) {
     }
   }), /* @__PURE__ */ React__default["default"].createElement(ui.RefreshPicker, {
     onRefresh: timeRange.onRefresh,
-    onIntervalChanged: timeRange.onIntervalChanged
+    onIntervalChanged: () => {
+    }
   }));
 }
 
@@ -2979,31 +3143,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), {
@@ -3091,29 +3255,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)
@@ -3134,7 +3298,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)
           });
         }
       }
@@ -3143,7 +3307,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
         })
@@ -3158,7 +3322,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
             })
@@ -3194,7 +3358,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)) {
@@ -3236,7 +3400,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
       })
     });
@@ -3304,7 +3468,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;
@@ -3370,6 +3534,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;
@@ -3377,6 +3729,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;