@grafana/scenes 0.3.0 → 0.4.0

package/dist/index.js

@@ -32,43 +32,50 @@ class SceneObjectStateChangedEvent extends data.BusEventWithPayload {
 }
 SceneObjectStateChangedEvent.type = "scene-object-state-change";
 
-var __defProp$k = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$k = (a, b) => {
+var __defProp$n = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$1 = (source, exclude) => {
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
+  if (source != null && __getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function SceneComponentWrapperWithoutMemo(_a) {
-  var _b = _a, { model } = _b, otherProps = __objRest$1(_b, ["model"]);
+  var _b = _a, { model } = _b, otherProps = __objRest$2(_b, ["model"]);
   var _a2;
   const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
-  React.useEffect(() => model.activate(), [model]);
-  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$9(__spreadValues$k({}, otherProps), {
+  const [activated, setActivated] = React__default["default"].useState(false);
+  React.useEffect(() => {
+    setActivated(true);
+    return model.activate();
+  }, [model]);
+  if (!activated) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$b(__spreadValues$n({}, otherProps), {
     model
   }));
 }
@@ -77,24 +84,24 @@ function EmptyRenderer(_) {
   return null;
 }
 
-var __defProp$j = Object.defineProperty;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (a, b) => {
+var __defProp$m = Object.defineProperty;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$k.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
 function cloneSceneObject(sceneObject, withState) {
-  const clonedState = __spreadValues$j({}, sceneObject.state);
+  const clonedState = __spreadValues$m({}, sceneObject.state);
   for (const key in clonedState) {
     const propValue = clonedState[key];
     if (propValue instanceof SceneObjectBase) {
@@ -116,19 +123,19 @@ function cloneSceneObject(sceneObject, withState) {
   return new sceneObject.constructor(clonedState);
 }
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
+var __defProp$l = Object.defineProperty;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$l = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
 };
@@ -165,7 +172,9 @@ class SceneObjectBase {
     return SceneComponentWrapper;
   }
   _setParent() {
-    this.forEachChild((child) => child._parent = this);
+    this.forEachChild((child) => {
+      child._parent = this;
+    });
   }
   subscribeToState(handler) {
     return this._events.subscribe(SceneObjectStateChangedEvent, (event) => {
@@ -179,7 +188,7 @@ class SceneObjectBase {
   }
   setState(update) {
     const prevState = this._state;
-    const newState = __spreadValues$i(__spreadValues$i({}, this._state), update);
+    const newState = __spreadValues$l(__spreadValues$l({}, this._state), update);
     this._state = Object.freeze(newState);
     this._setParent();
     this.publishEvent(
@@ -203,7 +212,7 @@ class SceneObjectBase {
   }
   _internalActivate() {
     this._isActive = true;
-    const { $data, $variables, $timeRange } = this.state;
+    const { $data, $variables, $timeRange, $behaviors } = this.state;
     if ($timeRange && !$timeRange.isActive) {
       this._deactivationHandlers.push($timeRange.activate());
     }
@@ -213,6 +222,18 @@ class SceneObjectBase {
     if ($data && !$data.isActive) {
       this._deactivationHandlers.push($data.activate());
     }
+    if ($behaviors) {
+      for (const behavior of $behaviors) {
+        if (behavior instanceof SceneObjectBase) {
+          this._deactivationHandlers.push(behavior.activate());
+        } else if (typeof behavior === "function") {
+          const deactivationHandler = behavior(this);
+          if (deactivationHandler) {
+            this._deactivationHandlers.push();
+          }
+        }
+      }
+    }
     this._activationHandlers.forEach((handler) => {
       const result = handler();
       if (result) {
@@ -283,25 +304,25 @@ function useSceneObjectState(model) {
   return model.state;
 }
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b) => {
+var __defProp$k = Object.defineProperty;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$i.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
 class SceneDataNode extends SceneObjectBase {
   constructor(state) {
-    super(__spreadValues$h({
+    super(__spreadValues$k({
       data: emptyPanelData
     }, state));
   }
@@ -328,19 +349,19 @@ class SceneObjectUrlSyncConfig {
   }
 }
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b) => {
+var __defProp$j = Object.defineProperty;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$j = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$h.call(b, prop))
-      __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
+    if (__hasOwnProp$k.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
@@ -351,7 +372,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$g({ from, to, timeZone, value }, state));
+    super(__spreadValues$j({ from, to, timeZone, value }, state));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["from", "to"] });
     this.onTimeRangeChange = (timeRange) => {
       const update = {};
@@ -453,7 +474,16 @@ function isCustomVariableValue(value) {
   return typeof value === "object" && "formatter" in value;
 }
 
-const _ScopedVarsVariable = class {
+let fieldAccessorCache = {};
+function getFieldAccessor(fieldPath) {
+  const accessor = fieldAccessorCache[fieldPath];
+  if (accessor) {
+    return accessor;
+  }
+  return fieldAccessorCache[fieldPath] = lodash.property(fieldPath);
+}
+
+class ScopedVarsVariable {
   constructor(name, value) {
     this.state = { name, value, type: "scopedvar" };
   }
@@ -461,7 +491,7 @@ const _ScopedVarsVariable = class {
     let { value } = this.state;
     let realValue = value.value;
     if (fieldPath) {
-      realValue = this.getFieldAccessor(fieldPath)(value.value);
+      realValue = getFieldAccessor(fieldPath)(value.value);
     } else {
       realValue = value.value;
     }
@@ -477,16 +507,7 @@ const _ScopedVarsVariable = class {
     }
     return String(value);
   }
-  getFieldAccessor(fieldPath) {
-    const accessor = _ScopedVarsVariable.fieldAccessorCache[fieldPath];
-    if (accessor) {
-      return accessor;
-    }
-    return _ScopedVarsVariable.fieldAccessorCache[fieldPath] = lodash.property(fieldPath);
-  }
-};
-let ScopedVarsVariable = _ScopedVarsVariable;
-ScopedVarsVariable.fieldAccessorCache = {};
+}
 let scopedVarsVariable;
 function getSceneVariableForScopedVar(name, value) {
   if (!scopedVarsVariable) {
@@ -861,11 +882,58 @@ function collectAllVariables(sceneObject, record = {}) {
   return record;
 }
 
-class DataValueMacro {
+var __defProp$i = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$i = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+function getTemplateProxyForField(field, frame, frames) {
+  return new Proxy(
+    {},
+    {
+      get: (obj, key) => {
+        if (key === "name") {
+          return field.name;
+        }
+        if (key === "displayName") {
+          return data.getFieldDisplayName(field, frame, frames);
+        }
+        if (key === "labels" || key === "formattedLabels") {
+          if (!field.labels) {
+            return "";
+          }
+          return __spreadProps$a(__spreadValues$i({}, field.labels), {
+            __values: Object.values(field.labels).sort().join(", "),
+            toString: () => {
+              return data.formatLabels(field.labels, "", true);
+            }
+          });
+        }
+        return void 0;
+      }
+    }
+  );
+}
+
+class ValueMacro {
   constructor(name, sceneObject, _match, _scopedVars) {
     this._match = _match;
     this._scopedVars = _scopedVars;
-    this.state = { name, type: "url_variable" };
+    this.state = { name, type: "__value" };
   }
   getValue(fieldPath) {
     var _a, _b;
@@ -887,7 +955,7 @@ class DataValueMacro {
           return data.formattedValueToString(calculatedValue);
       }
     }
-    if (!rowIndex) {
+    if (rowIndex == null) {
       return this._match;
     }
     if (fieldPath === "time") {
@@ -916,11 +984,86 @@ class DataValueMacro {
   }
 }
 const fallbackDisplayProcessor = data.getDisplayProcessor();
+class DataMacro {
+  constructor(name, sceneObject, _match, _scopedVars) {
+    this._match = _match;
+    this._scopedVars = _scopedVars;
+    this.state = { name, type: "__data" };
+  }
+  getValue(fieldPath) {
+    var _a, _b;
+    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
+    if (!dataContext || !fieldPath) {
+      return this._match;
+    }
+    const { frame, rowIndex } = dataContext.value;
+    if (rowIndex === void 0 || fieldPath === void 0) {
+      return this._match;
+    }
+    const obj = {
+      name: frame.name,
+      refId: frame.refId,
+      fields: data.getFieldDisplayValuesProxy({ frame, rowIndex })
+    };
+    return (_b = getFieldAccessor(fieldPath)(obj)) != null ? _b : "";
+  }
+  getValueText() {
+    return "";
+  }
+}
+class SeriesMacro {
+  constructor(name, sceneObject, _match, _scopedVars) {
+    this._match = _match;
+    this._scopedVars = _scopedVars;
+    this.state = { name, type: "__series" };
+  }
+  getValue(fieldPath) {
+    var _a;
+    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
+    if (!dataContext || !fieldPath) {
+      return this._match;
+    }
+    if (fieldPath !== "name") {
+      return this._match;
+    }
+    const { frame, frameIndex } = dataContext.value;
+    return data.getFrameDisplayName(frame, frameIndex);
+  }
+  getValueText() {
+    return "";
+  }
+}
+class FieldMacro {
+  constructor(name, sceneObject, _match, _scopedVars) {
+    this._match = _match;
+    this._scopedVars = _scopedVars;
+    this.state = { name, type: "__field" };
+  }
+  getValue(fieldPath) {
+    var _a, _b;
+    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
+    if (!dataContext || !fieldPath) {
+      return this._match;
+    }
+    if (fieldPath === void 0 || fieldPath === "") {
+      return this._match;
+    }
+    const { frame, field, data } = dataContext.value;
+    const obj = getTemplateProxyForField(field, frame, data);
+    return (_b = getFieldAccessor(fieldPath)(obj)) != null ? _b : "";
+  }
+  getValueText() {
+    return "";
+  }
+}
 
 const macrosIndex = {
   [data.DataLinkBuiltInVars.includeVars]: AllVariablesMacro,
   [data.DataLinkBuiltInVars.keepTime]: UrlTimeRangeMacro,
-  ["__value"]: DataValueMacro
+  ["__value"]: ValueMacro,
+  ["__data"]: DataMacro,
+  ["__series"]: SeriesMacro,
+  ["__field"]: FieldMacro
 };
 
 function sceneInterpolator(sceneObject, target, scopedVars, format) {
@@ -990,41 +1133,34 @@ function formatValue(variable, value, formatNameOrFn) {
   return formatter.formatter(value, args, variable);
 }
 
+function getClosest(sceneObject, extract) {
+  let curSceneObject = sceneObject;
+  let extracted = void 0;
+  while (curSceneObject && !extracted) {
+    extracted = extract(curSceneObject);
+    curSceneObject = curSceneObject.parent;
+  }
+  return extracted;
+}
 function getVariables(sceneObject) {
-  if (sceneObject.state.$variables) {
-    return sceneObject.state.$variables;
-  }
-  if (sceneObject.parent) {
-    return getVariables(sceneObject.parent);
-  }
-  return EmptyVariableSet;
+  var _a;
+  return (_a = getClosest(sceneObject, (s) => s.state.$variables)) != null ? _a : EmptyVariableSet;
 }
 function getData(sceneObject) {
-  const { $data } = sceneObject.state;
-  if ($data) {
-    return $data;
-  }
-  if (sceneObject.parent) {
-    return getData(sceneObject.parent);
-  }
-  return EmptyDataNode;
+  var _a;
+  return (_a = getClosest(sceneObject, (s) => s.state.$data)) != null ? _a : EmptyDataNode;
 }
 function getTimeRange(sceneObject) {
-  const { $timeRange } = sceneObject.state;
-  if ($timeRange) {
-    return $timeRange;
-  }
-  if (sceneObject.parent) {
-    return getTimeRange(sceneObject.parent);
-  }
-  return DefaultTimeRange;
+  var _a;
+  return (_a = getClosest(sceneObject, (s) => s.state.$timeRange)) != null ? _a : DefaultTimeRange;
+}
+function isSceneLayout(s) {
+  return "isDraggable" in s;
 }
 function getLayout(scene) {
-  if ("isDraggable" in scene) {
-    return scene;
-  }
-  if (scene.parent) {
-    return getLayout(scene.parent);
+  const parent = getClosest(scene, (s) => isSceneLayout(s) ? s : void 0);
+  if (parent) {
+    return parent;
   }
   throw new Error("No layout found in scene tree");
 }
@@ -1048,6 +1184,31 @@ function hasVariableDependencyInLoadingState(sceneObject) {
   }
   return false;
 }
+function findObjectInternal(scene, check, alreadySearchedChild, shouldSearchUp) {
+  if (check(scene)) {
+    return scene;
+  }
+  let found = null;
+  scene.forEachChild((child) => {
+    if (child === alreadySearchedChild) {
+      return;
+    }
+    let maybe = findObjectInternal(child, check);
+    if (maybe) {
+      found = maybe;
+    }
+  });
+  if (found) {
+    return found;
+  }
+  if (shouldSearchUp && scene.parent) {
+    return findObjectInternal(scene.parent, check, scene, true);
+  }
+  return null;
+}
+function findObject(scene, check) {
+  return findObjectInternal(scene, check, void 0, true);
+}
 const sceneGraph = {
   getVariables,
   getData,
@@ -1055,7 +1216,8 @@ const sceneGraph = {
   getLayout,
   interpolate,
   lookupVariable,
-  hasVariableDependencyInLoadingState
+  hasVariableDependencyInLoadingState,
+  findObject
 };
 
 async function getDataSource(datasource, scopedVars) {
@@ -1323,11 +1485,8 @@ class SceneQueryRunner extends SceneObjectBase {
       __sceneObject: { text: "__sceneObject", value: this }
     };
     if (!(queries == null ? void 0 : queries.length)) {
-      this.onDataReceived({
-        state: schema.LoadingState.Done,
-        series: [],
-        timeRange
-      });
+      this._setNoDataState();
+      return;
     }
     const request = {
       app: data.CoreApp.Dashboard,
@@ -1367,35 +1526,36 @@ class SceneQueryRunner extends SceneObjectBase {
       console.error("PanelQueryRunner Error", err);
     }
   }
-}
-function findFirstDatasource(targets) {
-  for (const t of targets) {
-    if (t.datasource != null) {
-      return t.datasource;
+  _setNoDataState() {
+    if (this.state.data !== emptyPanelData) {
+      this.setState({ data: emptyPanelData });
     }
   }
-  return void 0;
+}
+function findFirstDatasource(targets) {
+  var _a, _b;
+  return (_b = (_a = targets.find((t) => t.datasource !== null)) == null ? void 0 : _a.datasource) != null ? _b : void 0;
 }
 
-var __defProp$f = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
+var __defProp$h = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$h = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$g.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 class SceneDataTransformer extends SceneObjectBase {
   constructor(state) {
     super(state);
@@ -1452,7 +1612,7 @@ class SceneDataTransformer extends SceneObjectBase {
         return sceneGraph.interpolate(this, value, (_a = data$1.request) == null ? void 0 : _a.scopedVars);
       }
     };
-    this._transformSub = data.transformDataFrame(transformations, data$1.series, ctx).pipe(rxjs.map((series) => __spreadProps$8(__spreadValues$f({}, data$1), { series }))).subscribe((data2) => this.setState({ data: data2 }));
+    this._transformSub = data.transformDataFrame(transformations, data$1.series, ctx).pipe(rxjs.map((series) => __spreadProps$9(__spreadValues$h({}, data$1), { series }))).subscribe((data2) => this.setState({ data: data2 }));
   }
 }
 
@@ -1536,12 +1696,18 @@ class SceneVariableSet extends SceneObjectBase {
     this._updating = /* @__PURE__ */ new Map();
     this._variableValueRecorder = new VariableValueRecorder();
     this._onActivate = () => {
+      const timeRange = sceneGraph.getTimeRange(this);
       this._subs.add(
         this.subscribeToEvent(SceneVariableValueChangedEvent, (event) => this._handleVariableValueChanged(event.payload))
       );
-      this._subs.add(this.subscribeToState(this._onStateChanged));
-      this._checkForVariablesThatChangedWhileInactive();
-      for (const variable of this.state.variables) {
+      this._subs.add(
+        timeRange.subscribeToState(() => {
+          this._refreshTimeRangeBasedVariables();
+        })
+      );
+      this._subs.add(this.subscribeToState(this._onStateChanged));
+      this._checkForVariablesThatChangedWhileInactive();
+      for (const variable of this.state.variables) {
         if (this._variableNeedsUpdate(variable)) {
           this._variablesToUpdate.add(variable);
         }
@@ -1590,6 +1756,14 @@ class SceneVariableSet extends SceneObjectBase {
   getByName(name) {
     return this.state.variables.find((x) => x.state.name === name);
   }
+  _refreshTimeRangeBasedVariables() {
+    for (const variable of this.state.variables) {
+      if ("refresh" in variable.state && variable.state.refresh === data.VariableRefresh.onTimeRangeChanged) {
+        this._variablesToUpdate.add(variable);
+      }
+    }
+    this._updateNextBatch();
+  }
   _checkForVariablesThatChangedWhileInactive() {
     if (!this._variableValueRecorder.hasValues()) {
       return;
@@ -1679,7 +1853,7 @@ class SceneVariableSet extends SceneObjectBase {
     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");
+          writeVariableTraceLog(otherVariable, "Added to update queue, dependant variable value changed");
           this._variablesToUpdate.add(otherVariable);
         }
       }
@@ -1715,28 +1889,28 @@ function writeVariableTraceLog(variable, message, err) {
   writeSceneLog("SceneVariableSet", `Variable[${variable.state.name}]: ${message}`, err);
 }
 
-var __defProp$e = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
+var __defProp$g = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
+    if (__hasOwnProp$h.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b)) {
+      if (__propIsEnum$h.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 class ConstantVariable extends SceneObjectBase {
   constructor(initialState) {
-    super(__spreadProps$7(__spreadValues$e({
+    super(__spreadProps$8(__spreadValues$g({
       type: "constant",
       value: "",
       name: ""
@@ -1985,25 +2159,25 @@ class CustomAllValue {
   }
 }
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = 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$f = Object.defineProperty;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = 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$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
     }
   return a;
 };
 class CustomVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$d({
+    super(__spreadValues$f({
       type: "custom",
       query: "",
       value: "",
@@ -2036,25 +2210,25 @@ CustomVariable.Component = ({ model }) => {
   return renderSelectForVariable(model);
 };
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = 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$e = Object.defineProperty;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = 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$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
     }
   return a;
 };
 class DataSourceVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$c({
+    super(__spreadValues$e({
       type: "datasource",
       value: "",
       text: "",
@@ -2142,25 +2316,25 @@ const hasCustomVariableSupport = (datasource) => {
   return "query" in variableSupport && "editor" in variableSupport && Boolean(variableSupport.query) && Boolean(variableSupport.editor);
 };
 
-var __defProp$b = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = 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$d = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = 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$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 class StandardQueryRunner {
   constructor(datasource, _runRequest = runtime.getRunRequest()) {
     this.datasource = datasource;
@@ -2197,7 +2371,7 @@ class LegacyQueryRunner {
       return getEmptyMetricFindValueObservable();
     }
     return rxjs.from(
-      this.datasource.metricFindQuery(variable.state.query, __spreadProps$6(__spreadValues$b({}, request), {
+      this.datasource.metricFindQuery(variable.state.query, __spreadProps$7(__spreadValues$d({}, request), {
         variable: {
           name: variable.state.name,
           type: variable.state.type
@@ -2428,25 +2602,25 @@ function areMetricFindValues(data$1) {
   return false;
 }
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = 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 __defProp$c = Object.defineProperty;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = 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$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
 class QueryVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$a({
+    super(__spreadValues$c({
       type: "query",
       name: "",
       value: "",
@@ -2461,22 +2635,6 @@ class QueryVariable extends MultiValueVariable {
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["regex", "query", "datasource"]
     });
-    this.addActivationHandler(() => this._onActivate());
-  }
-  _onActivate() {
-    const timeRange = sceneGraph.getTimeRange(this);
-    if (this.state.refresh === data.VariableRefresh.onTimeRangeChanged) {
-      this._subs.add(
-        timeRange.subscribeToState(() => {
-          this.updateSubscription = this.validateAndUpdate().subscribe();
-        })
-      );
-    }
-    return () => {
-      if (this.updateSubscription) {
-        this.updateSubscription.unsubscribe();
-      }
-    };
   }
   getValueOptions(args) {
     if (this.state.query === "" || !this.state.datasource) {
@@ -2595,31 +2753,32 @@ function queryMetricTree(query) {
   return queryTree(children, query.split("."), 0);
 }
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = 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$b = Object.defineProperty;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = 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$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
 class TestVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$9({
+    super(__spreadValues$b({
       type: "custom",
       name: "Test",
       value: "Value",
       text: "Text",
       query: "Query",
-      options: []
+      options: [],
+      refresh: data.VariableRefresh.onDashboardLoad
     }, initialState));
     this.completeUpdate = new rxjs.Subject();
     this.isGettingValues = true;
@@ -2692,25 +2851,25 @@ function VariableValueInput({ model }) {
   });
 }
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = 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$a = Object.defineProperty;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = 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$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
 class TextBoxVariable extends SceneObjectBase {
   constructor(initialState) {
-    super(__spreadValues$8({
+    super(__spreadValues$a({
       type: "textbox",
       value: "",
       name: ""
@@ -2746,13 +2905,14 @@ TextBoxVariable.Component = ({ model }) => {
 };
 
 class UrlSyncManager {
-  constructor(sceneRoot) {
-    this.sceneRoot = sceneRoot;
+  constructor() {
     this.urlKeyMapper = new UniqueUrlKeyMapper();
+    this._stateSub = null;
+    this._locationSub = null;
     this._onLocationUpdate = (location) => {
       const urlParams = new URLSearchParams(location.search);
-      this.urlKeyMapper.rebuldIndex(this.sceneRoot);
-      this._syncSceneStateFromUrl(this.sceneRoot, urlParams);
+      this.urlKeyMapper.rebuldIndex(this._sceneRoot);
+      this._syncSceneStateFromUrl(this._sceneRoot, urlParams);
     };
     this._onStateChanged = ({ payload }) => {
       const changedObject = payload.changedObject;
@@ -2760,7 +2920,7 @@ class UrlSyncManager {
         const newUrlState = changedObject.urlSync.getUrlState();
         const searchParams = runtime.locationService.getSearch();
         const mappedUpdated = {};
-        this.urlKeyMapper.rebuldIndex(this.sceneRoot);
+        this.urlKeyMapper.rebuldIndex(this._sceneRoot);
         for (const [key, newUrlValue] of Object.entries(newUrlState)) {
           const uniqueKey = this.urlKeyMapper.getUniqueKey(key, changedObject);
           const currentUrlValue = searchParams.getAll(uniqueKey);
@@ -2774,18 +2934,44 @@ class UrlSyncManager {
       }
     };
   }
-  initSync() {
-    this.sceneRoot.addActivationHandler(() => {
-      const stateChangeSub = this.sceneRoot.subscribeToEvent(SceneObjectStateChangedEvent, this._onStateChanged);
-      const locationListenerUnsub = runtime.locationService.getHistory().listen(this._onLocationUpdate);
-      return () => {
-        stateChangeSub.unsubscribe();
-        locationListenerUnsub();
-      };
-    });
+  initSync(root) {
+    if (!this._locationSub) {
+      writeSceneLog("UrlSyncManager", "New location listen");
+      this._locationSub = runtime.locationService.getHistory().listen(this._onLocationUpdate);
+    }
+    if (this._stateSub) {
+      writeSceneLog("UrlSyncManager", "Unregister previous scene state subscription", this._sceneRoot.state.key);
+      this._stateSub.unsubscribe();
+    }
+    this._sceneRoot = root;
+    this._stateSub = root.subscribeToEvent(SceneObjectStateChangedEvent, this._onStateChanged);
+    this.syncFrom(this._sceneRoot);
+  }
+  cleanUp(root) {
+    if (this._sceneRoot !== root) {
+      return;
+    }
+    writeSceneLog("UrlSyncManager", "Clean up");
+    if (this._locationSub) {
+      this._locationSub();
+      writeSceneLog("UrlSyncManager", "Unregister history listen");
+      this._locationSub = null;
+    }
+    if (this._stateSub) {
+      this._stateSub.unsubscribe();
+      this._stateSub = null;
+      writeSceneLog(
+        "UrlSyncManager",
+        "Root deactived, unsub to state",
+        "same key",
+        this._sceneRoot.state.key === root.state.key
+      );
+    }
+  }
+  syncFrom(sceneObj) {
     const urlParams = runtime.locationService.getSearch();
-    this.urlKeyMapper.rebuldIndex(this.sceneRoot);
-    this._syncSceneStateFromUrl(this.sceneRoot, urlParams);
+    this.urlKeyMapper.rebuldIndex(this._sceneRoot);
+    this._syncSceneStateFromUrl(sceneObj, urlParams);
   }
   _syncSceneStateFromUrl(sceneObject, urlParams) {
     if (sceneObject.urlSync) {
@@ -2861,13 +3047,23 @@ function isUrlValueEqual(currentUrlValue, newUrlValue) {
   }
   return lodash.isEqual(currentUrlValue, newUrlValue);
 }
+let urlSyncManager;
+function getUrlSyncManager() {
+  if (!urlSyncManager) {
+    urlSyncManager = new UrlSyncManager();
+  }
+  return urlSyncManager;
+}
 
 class EmbeddedScene extends SceneObjectBase {
+  constructor(state) {
+    super(state);
+    this.addActivationHandler(() => {
+      return () => getUrlSyncManager().cleanUp(this);
+    });
+  }
   initUrlSync() {
-    if (!this.urlSyncManager) {
-      this.urlSyncManager = new UrlSyncManager(this);
-    }
-    this.urlSyncManager.initSync();
+    getUrlSyncManager().initSync(this);
   }
 }
 EmbeddedScene.Component = EmbeddedSceneRenderer;
@@ -2910,17 +3106,17 @@ function getStyles$1(theme) {
   };
 }
 
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __objRest = (source, exclude) => {
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
+  if (source != null && __getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2938,7 +3134,7 @@ function VizPanelRenderer({ model }) {
     displayMode,
     hoverHeader,
     menu
-  } = _a, state = __objRest(_a, [
+  } = _a, state = __objRest$1(_a, [
     "title",
     "description",
     "options",
@@ -3034,25 +3230,25 @@ function getChromeStatusMessage(data, pluginLoadingError) {
   return data.error ? data.error.message : void 0;
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-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$9 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+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$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$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;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 const displayOverrideRef = "hideSeriesFrom";
 const isHideSeriesOverride = data.isSystemOverrideWithRef(displayOverrideRef);
 function seriesVisibilityConfigFactory(label, mode, fieldConfig, data) {
@@ -3062,13 +3258,13 @@ function seriesVisibilityConfigFactory(label, mode, fieldConfig, data) {
   if (currentIndex < 0) {
     if (mode === ui.SeriesVisibilityChangeMode.ToggleSelection) {
       const override3 = createOverride$1([displayName, ...getNamesOfHiddenFields(overrides, data)]);
-      return __spreadProps$5(__spreadValues$7({}, fieldConfig), {
+      return __spreadProps$6(__spreadValues$9({}, fieldConfig), {
         overrides: [...fieldConfig.overrides, override3]
       });
     }
     const displayNames = getDisplayNames(data, displayName);
     const override2 = createOverride$1(displayNames);
-    return __spreadProps$5(__spreadValues$7({}, fieldConfig), {
+    return __spreadProps$6(__spreadValues$9({}, fieldConfig), {
       overrides: [...fieldConfig.overrides, override2]
     });
   }
@@ -3081,22 +3277,22 @@ function seriesVisibilityConfigFactory(label, mode, fieldConfig, data) {
       existing = existing.filter((el) => nameOfHiddenFields.indexOf(el) < 0);
     }
     if (existing[0] === displayName && existing.length === 1) {
-      return __spreadProps$5(__spreadValues$7({}, fieldConfig), {
+      return __spreadProps$6(__spreadValues$9({}, fieldConfig), {
         overrides: overridesCopy
       });
     }
     const override2 = createOverride$1([displayName, ...nameOfHiddenFields]);
-    return __spreadProps$5(__spreadValues$7({}, fieldConfig), {
+    return __spreadProps$6(__spreadValues$9({}, fieldConfig), {
       overrides: [...overridesCopy, override2]
     });
   }
   const override = createExtendedOverride(current, displayName);
   if (allFieldsAreExcluded(override, data)) {
-    return __spreadProps$5(__spreadValues$7({}, fieldConfig), {
+    return __spreadProps$6(__spreadValues$9({}, fieldConfig), {
       overrides: overridesCopy
     });
   }
-  return __spreadProps$5(__spreadValues$7({}, fieldConfig), {
+  return __spreadProps$6(__spreadValues$9({}, fieldConfig), {
     overrides: [...overridesCopy, override]
   });
 }
@@ -3121,7 +3317,7 @@ function createOverride$1(names, mode = data.ByNamesMatcherMode.exclude, propert
       }
     },
     properties: [
-      __spreadProps$5(__spreadValues$7({}, property), {
+      __spreadProps$6(__spreadValues$9({}, property), {
         value: {
           viz: true,
           legend: false,
@@ -3193,32 +3389,32 @@ const getNamesOfHiddenFields = (overrides, data$1) => {
   return names;
 };
 
-var __defProp$6 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = 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 __defProp$8 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+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$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$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;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const changeSeriesColorConfigFactory = (label, color, fieldConfig) => {
   const { overrides } = fieldConfig;
   const currentIndex = fieldConfig.overrides.findIndex((override) => {
     return override.matcher.id === data.FieldMatcherID.byName && override.matcher.options === label;
   });
   if (currentIndex < 0) {
-    return __spreadProps$4(__spreadValues$6({}, fieldConfig), {
+    return __spreadProps$5(__spreadValues$8({}, fieldConfig), {
       overrides: [...fieldConfig.overrides, createOverride(label, color)]
     });
   }
@@ -3226,19 +3422,19 @@ const changeSeriesColorConfigFactory = (label, color, fieldConfig) => {
   const existing = overridesCopy[currentIndex];
   const propertyIndex = existing.properties.findIndex((p) => p.id === "color");
   if (propertyIndex < 0) {
-    overridesCopy[currentIndex] = __spreadProps$4(__spreadValues$6({}, existing), {
+    overridesCopy[currentIndex] = __spreadProps$5(__spreadValues$8({}, existing), {
       properties: [...existing.properties, createProperty(color)]
     });
-    return __spreadProps$4(__spreadValues$6({}, fieldConfig), {
+    return __spreadProps$5(__spreadValues$8({}, fieldConfig), {
       overrides: overridesCopy
     });
   }
   const propertiesCopy = Array.from(existing.properties);
   propertiesCopy[propertyIndex] = createProperty(color);
-  overridesCopy[currentIndex] = __spreadProps$4(__spreadValues$6({}, existing), {
+  overridesCopy[currentIndex] = __spreadProps$5(__spreadValues$8({}, existing), {
     properties: propertiesCopy
   });
-  return __spreadProps$4(__spreadValues$6({}, fieldConfig), {
+  return __spreadProps$5(__spreadValues$8({}, fieldConfig), {
     overrides: overridesCopy
   });
 };
@@ -3261,28 +3457,28 @@ const createProperty = (color) => {
   };
 };
 
-var __defProp$5 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-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$7 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+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$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$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;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 class VizPanel extends SceneObjectBase {
   constructor(state) {
-    super(__spreadValues$5({
+    super(__spreadValues$7({
       options: {},
       fieldConfig: { defaults: {}, overrides: [] },
       title: "Title",
@@ -3343,8 +3539,8 @@ class VizPanel extends SceneObjectBase {
         sortDesc = !sortDesc;
         sortBy = sortKey;
       }
-      this.onOptionsChange(__spreadProps$3(__spreadValues$5({}, this.state.options), {
-        legend: __spreadProps$3(__spreadValues$5({}, legendOptions), { sortBy, sortDesc })
+      this.onOptionsChange(__spreadProps$4(__spreadValues$7({}, this.state.options), {
+        legend: __spreadProps$4(__spreadValues$7({}, legendOptions), { sortBy, sortDesc })
       }));
     };
     this._panelContext = {
@@ -3419,7 +3615,7 @@ class VizPanel extends SceneObjectBase {
     if (rawData.structureRev == null && newFrames && prevFrames && !data.compareArrayValues(newFrames, prevFrames, data.compareDataFrameStructures)) {
       this._structureRev++;
     }
-    this._dataWithFieldConfig = __spreadProps$3(__spreadValues$5({}, rawData), {
+    this._dataWithFieldConfig = __spreadProps$4(__spreadValues$7({}, rawData), {
       structureRev: this._structureRev,
       series: data.applyFieldOverrides({
         data: newFrames,
@@ -3635,30 +3831,30 @@ function SceneTimePickerRenderer({ model }) {
   });
 }
 
-var __defProp$4 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$6 = 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) => {
   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$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;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 const DEFAULT_INTERVALS = ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"];
 class SceneRefreshPicker extends SceneObjectBase {
   constructor(state) {
     var _a;
-    super(__spreadProps$2(__spreadValues$4({
+    super(__spreadProps$3(__spreadValues$6({
       refresh: ""
     }, state), {
       intervals: (_a = state.intervals) != null ? _a : DEFAULT_INTERVALS
@@ -3769,6 +3965,22 @@ SceneControlsSpacer.Component = (_props) => {
   });
 };
 
+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$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 SceneFlexLayout extends SceneObjectBase {
   toggleDirection() {
     this.setState({
@@ -3780,9 +3992,12 @@ class SceneFlexLayout extends SceneObjectBase {
   }
 }
 SceneFlexLayout.Component = SceneFlexLayoutRenderer;
-function SceneFlexLayoutRenderer({ model }) {
-  const { direction = "row", children, wrap } = model.useState();
-  const style = {
+function SceneFlexLayoutRenderer({ model, parentDirection }) {
+  const { direction = "row", children, wrap, isHidden } = model.useState();
+  if (isHidden) {
+    return null;
+  }
+  let style = {
     display: "flex",
     flexGrow: 1,
     flexDirection: direction,
@@ -3791,28 +4006,33 @@ function SceneFlexLayoutRenderer({ model }) {
     alignContent: "baseline",
     minHeight: 0
   };
+  if (parentDirection) {
+    style = __spreadValues$5(__spreadValues$5({}, getFlexItemItemStyles(parentDirection || "row", model)), style);
+  }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     style
-  }, children.map((item) => /* @__PURE__ */ React__default["default"].createElement(item.Component, {
-    key: item.state.key,
-    model: item
-  })));
+  }, children.map((item) => {
+    const Component = item.Component;
+    return /* @__PURE__ */ React__default["default"].createElement(Component, {
+      key: item.state.key,
+      model: item,
+      parentDirection: direction
+    });
+  }));
 }
 class SceneFlexItem extends SceneObjectBase {
 }
 SceneFlexItem.Component = SceneFlexItemRenderer;
-function SceneFlexItemRenderer({ model }) {
-  const { body } = model.useState();
-  const parent = model.parent;
+function SceneFlexItemRenderer({ model, parentDirection }) {
+  const { body, isHidden } = model.useState();
+  if (!body || isHidden) {
+    return null;
+  }
   let style = {};
-  if (parent && isSceneFlexLayout(parent)) {
-    style = getFlexItemItemStyles(parent.state.direction || "row", model);
-  } else {
+  if (!parentDirection) {
     throw new Error("SceneFlexItem must be a child of SceneFlexLayout");
   }
-  if (!body) {
-    return null;
-  }
+  style = getFlexItemItemStyles(parentDirection, model);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     style
   }, /* @__PURE__ */ React__default["default"].createElement(body.Component, {
@@ -3855,15 +4075,155 @@ function getFlexItemItemStyles(direction, item) {
   }
   return style;
 }
-function isSceneFlexLayout(model) {
-  return model instanceof SceneFlexLayout;
-}
 
 const DEFAULT_PANEL_SPAN = 4;
 const GRID_CELL_HEIGHT = 30;
 const GRID_CELL_VMARGIN = 8;
 const GRID_COLUMN_COUNT = 24;
 
+var __defProp$4 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function useUniqueId() {
+  var _a;
+  const idRefLazy = React.useRef(void 0);
+  (_a = idRefLazy.current) != null ? _a : idRefLazy.current = lodash.uniqueId();
+  return idRefLazy.current;
+}
+function LazyLoader(_a) {
+  var _b = _a, { children, width, height, onLoad, onChange, style } = _b, rest = __objRest(_b, ["children", "width", "height", "onLoad", "onChange", "style"]);
+  const id = useUniqueId();
+  const [loaded, setLoaded] = React.useState(false);
+  const [isInView, setIsInView] = React.useState(false);
+  const wrapperRef = React.useRef(null);
+  reactUse.useEffectOnce(() => {
+    LazyLoader.addCallback(id, (entry) => {
+      if (!loaded && entry.isIntersecting) {
+        setLoaded(true);
+        onLoad == null ? void 0 : onLoad();
+      }
+      setIsInView(entry.isIntersecting);
+      onChange == null ? void 0 : onChange(entry.isIntersecting);
+    });
+    const wrapperEl = wrapperRef.current;
+    if (wrapperEl) {
+      LazyLoader.observer.observe(wrapperEl);
+    }
+    return () => {
+      delete LazyLoader.callbacks[id];
+      wrapperEl && LazyLoader.observer.unobserve(wrapperEl);
+      if (Object.keys(LazyLoader.callbacks).length === 0) {
+        LazyLoader.observer.disconnect();
+      }
+    };
+  });
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$4({
+    id,
+    ref: wrapperRef,
+    style: __spreadProps$2(__spreadValues$4({}, style), { width, height })
+  }, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
+}
+LazyLoader.callbacks = {};
+LazyLoader.addCallback = (id, c) => LazyLoader.callbacks[id] = c;
+LazyLoader.observer = new IntersectionObserver(
+  (entries) => {
+    for (const entry of entries) {
+      LazyLoader.callbacks[entry.target.id](entry);
+    }
+  },
+  { rootMargin: "100px" }
+);
+
+function SceneGridLayoutRenderer({ model }) {
+  const { children, isLazy } = model.useState();
+  const LazyWrapper = isLazy ? LazyLoader : ({ style, children: children2 }) => /* @__PURE__ */ React__default["default"].createElement("div", {
+    style
+  }, children2);
+  validateChildrenSize(children);
+  return /* @__PURE__ */ React__default["default"].createElement(AutoSizer__default["default"], {
+    disableHeight: true
+  }, ({ width }) => {
+    if (width === 0) {
+      return null;
+    }
+    const layout = model.buildGridLayout(width);
+    const cellWidth = (width - (GRID_COLUMN_COUNT - 1) * GRID_CELL_VMARGIN) / GRID_COLUMN_COUNT;
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      style: { width: `${width}px`, height: "100%" }
+    }, /* @__PURE__ */ React__default["default"].createElement(ReactGridLayout__default["default"], {
+      width,
+      isDraggable: width > 768,
+      isResizable: false,
+      containerPadding: [0, 0],
+      useCSSTransforms: false,
+      margin: [GRID_CELL_VMARGIN, GRID_CELL_VMARGIN],
+      cols: GRID_COLUMN_COUNT,
+      rowHeight: GRID_CELL_HEIGHT,
+      draggableHandle: `.grid-drag-handle-${model.state.key}`,
+      draggableCancel: ".grid-drag-cancel",
+      layout,
+      onDragStop: model.onDragStop,
+      onResizeStop: model.onResizeStop,
+      onLayoutChange: model.onLayoutChange,
+      isBounded: false
+    }, layout.map((gridItem) => {
+      var _a, _b;
+      const sceneChild = model.getSceneLayoutChild(gridItem.i);
+      const pixelWidth = cellToPixelSize((_a = sceneChild.state.width) != null ? _a : 0, cellWidth, GRID_CELL_VMARGIN);
+      const pixelHeight = cellToPixelSize((_b = sceneChild.state.height) != null ? _b : 0, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN);
+      return /* @__PURE__ */ React__default["default"].createElement("div", {
+        style: { display: "flex" },
+        key: sceneChild.state.key
+      }, /* @__PURE__ */ React__default["default"].createElement(LazyWrapper, {
+        width: pixelWidth,
+        height: pixelHeight,
+        style: { display: "flex" }
+      }, /* @__PURE__ */ React__default["default"].createElement(sceneChild.Component, {
+        model: sceneChild,
+        key: sceneChild.state.key
+      })));
+    })));
+  });
+}
+function validateChildrenSize(children) {
+  if (children.some(
+    (c) => c.state.height === void 0 || c.state.width === void 0 || c.state.x === void 0 || c.state.y === void 0
+  )) {
+    throw new Error("All children must have a size specified");
+  }
+}
+function cellToPixelSize(sizeInCells, sizeOfCellInPx, margin = 0) {
+  return Math.max(Math.round(sizeInCells * (sizeOfCellInPx + margin) - margin), 0);
+}
+
 function SceneDragHandle({ className, dragClass }) {
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: `${className} ${dragClass}`,
@@ -4215,46 +4575,6 @@ const _SceneGridLayout = class extends SceneObjectBase {
 };
 let SceneGridLayout = _SceneGridLayout;
 SceneGridLayout.Component = SceneGridLayoutRenderer;
-function SceneGridLayoutRenderer({ model }) {
-  const { children } = model.useState();
-  validateChildrenSize(children);
-  return /* @__PURE__ */ React__default["default"].createElement(AutoSizer__default["default"], {
-    disableHeight: true
-  }, ({ width }) => {
-    if (width === 0) {
-      return null;
-    }
-    const layout = model.buildGridLayout(width);
-    return /* @__PURE__ */ React__default["default"].createElement("div", {
-      style: { width: `${width}px`, height: "100%" }
-    }, /* @__PURE__ */ React__default["default"].createElement(ReactGridLayout__default["default"], {
-      width,
-      isDraggable: width > 768,
-      isResizable: false,
-      containerPadding: [0, 0],
-      useCSSTransforms: false,
-      margin: [GRID_CELL_VMARGIN, GRID_CELL_VMARGIN],
-      cols: GRID_COLUMN_COUNT,
-      rowHeight: GRID_CELL_HEIGHT,
-      draggableHandle: `.grid-drag-handle-${model.state.key}`,
-      draggableCancel: ".grid-drag-cancel",
-      layout,
-      onDragStop: model.onDragStop,
-      onResizeStop: model.onResizeStop,
-      onLayoutChange: model.onLayoutChange,
-      isBounded: false
-    }, layout.map((gridItem) => {
-      const sceneChild = model.getSceneLayoutChild(gridItem.i);
-      return /* @__PURE__ */ React__default["default"].createElement("div", {
-        key: sceneChild.state.key,
-        style: { display: "flex" }
-      }, /* @__PURE__ */ React__default["default"].createElement(sceneChild.Component, {
-        model: sceneChild,
-        key: sceneChild.state.key
-      }));
-    })));
-  });
-}
 class SceneGridItem extends SceneObjectBase {
 }
 SceneGridItem.Component = SceneGridItemRenderer;
@@ -4271,13 +4591,6 @@ function SceneGridItemRenderer({ model }) {
     model: body
   });
 }
-function validateChildrenSize(children) {
-  if (children.find(
-    (c) => c.state.height === void 0 || c.state.width === void 0 || c.state.x === void 0 || c.state.y === void 0
-  )) {
-    throw new Error("All children must have a size specified");
-  }
-}
 function isItemSizeEqual(a, b) {
   return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 }
@@ -4296,22 +4609,6 @@ function isSceneGridLayout(child) {
   return child instanceof SceneGridLayout;
 }
 
-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
-      });
-    }
-  })));
-};
-
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
 var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
@@ -4343,47 +4640,205 @@ function getLinkUrlWithAppUrlState(path, params, preserveParams) {
   }
   return data.urlUtil.renderUrl(path, paramsCopy);
 }
+function renderSceneComponentWithRouteProps(sceneObject, routeProps) {
+  return React__default["default"].createElement(sceneObject.Component, { model: sceneObject, routeProps });
+}
+
+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: (props) => renderSceneComponentWithRouteProps(page, props)
+  })));
+};
+
+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;
+};
+class SceneReactObject extends SceneObjectBase {
+}
+SceneReactObject.Component = ({ model }) => {
+  const { component: Component, props, reactNode } = model.useState();
+  if (Component) {
+    return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadValues({}, props));
+  }
+  if (reactNode) {
+    return reactNode;
+  }
+  return null;
+};
+
+function SceneAppPageView({ page, routeProps }) {
+  const containerPage = getParentPageIfTab(page);
+  const containerState = containerPage.useState();
+  const params = useAppQueryParams();
+  const scene = page.getScene(routeProps.match);
+  const [initialized, setInitialized] = React.useState(false);
+  React.useLayoutEffect(() => {
+    if (!initialized) {
+      containerPage.initializeScene(scene);
+      setInitialized(true);
+    }
+  }, [initialized, scene, containerPage]);
+  if (!initialized) {
+    return null;
+  }
+  const pageNav = {
+    text: containerState.title,
+    subTitle: containerState.subTitle,
+    img: containerState.titleImg,
+    icon: containerState.titleIcon,
+    url: getLinkUrlWithAppUrlState(containerState.url, params, containerState.preserveUrlKeys),
+    hideFromBreadcrumbs: containerState.hideFromBreadcrumbs,
+    parentItem: getParentBreadcrumbs(
+      containerState.getParentPage ? containerState.getParentPage() : page.parent,
+      params
+    )
+  };
+  if (containerState.tabs) {
+    pageNav.children = containerState.tabs.map((tab) => {
+      return {
+        text: tab.state.title,
+        active: page === tab,
+        url: getLinkUrlWithAppUrlState(tab.state.url, params, tab.state.preserveUrlKeys),
+        parentItem: pageNav
+      };
+    });
+  }
+  let pageActions = void 0;
+  if (containerState.controls) {
+    pageActions = containerState.controls.map((control) => /* @__PURE__ */ React__default["default"].createElement(control.Component, {
+      model: control,
+      key: control.state.key
+    }));
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(runtime.PluginPage, {
+    pageNav,
+    actions: pageActions
+  }, /* @__PURE__ */ React__default["default"].createElement(scene.Component, {
+    model: scene
+  }));
+}
+function getParentPageIfTab(page) {
+  if (page.parent instanceof SceneAppPage) {
+    return page.parent;
+  }
+  return page;
+}
+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;
+}
+function SceneAppDrilldownViewRender({ drilldown, parent, routeProps }) {
+  return renderSceneComponentWithRouteProps(parent.getDrilldownPage(drilldown, routeProps.match), routeProps);
+}
 
-const sceneCache = /* @__PURE__ */ new Map();
 class SceneAppPage extends SceneObjectBase {
+  constructor(state) {
+    super(state);
+    this._sceneCache = /* @__PURE__ */ new Map();
+    this._drilldownCache = /* @__PURE__ */ new Map();
+    this.addActivationHandler(() => {
+      return () => getUrlSyncManager().cleanUp(this);
+    });
+  }
+  initializeScene(scene) {
+    this.setState({ initializedScene: scene });
+    getUrlSyncManager().initSync(this);
+  }
+  getScene(routeMatch) {
+    let scene = this._sceneCache.get(routeMatch.url);
+    if (scene) {
+      return scene;
+    }
+    if (!this.state.getScene) {
+      throw new Error("Missing getScene on SceneAppPage " + this.state.title);
+    }
+    scene = this.state.getScene(routeMatch);
+    this._sceneCache.set(routeMatch.url, scene);
+    return scene;
+  }
+  getDrilldownPage(drilldown, routeMatch) {
+    let page = this._drilldownCache.get(routeMatch.url);
+    if (page) {
+      return page;
+    }
+    page = drilldown.getPage(routeMatch, this);
+    this._drilldownCache.set(routeMatch.url, page);
+    return page;
+  }
 }
 SceneAppPage.Component = SceneAppPageRenderer;
-function SceneAppPageRenderer({ model }) {
-  var _a;
-  const { tabs, drilldowns, url, routePath } = model.state;
+function SceneAppPageRenderer({ model, routeProps }) {
+  var _a, _b;
+  const { tabs, drilldowns } = model.useState();
   const routes = [];
-  if (tabs) {
-    for (const page2 of tabs) {
+  if (tabs && tabs.length > 0) {
+    for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
+      const tab = tabs[tabIndex];
+      if (tabIndex === 0) {
+        routes.push(
+          /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+            exact: true,
+            key: model.state.url,
+            path: (_a = model.state.routePath) != null ? _a : model.state.url,
+            render: (props) => renderSceneComponentWithRouteProps(tab, props)
+          })
+        );
+      }
       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
-            });
-          }
+          key: tab.state.url,
+          path: (_b = tab.state.routePath) != null ? _b : tab.state.url,
+          render: (props) => renderSceneComponentWithRouteProps(tab, props)
         })
       );
-      if (page2.state.drilldowns) {
-        for (const drilldown of page2.state.drilldowns) {
+      if (tab.state.drilldowns) {
+        for (const drilldown of tab.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
-                });
-              }
+              render: (props) => /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
+                drilldown,
+                parent: tab,
+                routeProps: props
+              })
             })
           );
         }
       }
     }
+    routes.push(getFallbackRoute(model, routeProps));
     return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, routes);
   }
   if (drilldowns) {
@@ -4393,128 +4848,74 @@ function SceneAppPageRenderer({ model }) {
           key: drilldown.routePath,
           exact: false,
           path: drilldown.routePath,
-          render: () => {
-            return /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
-              drilldown,
-              parent: model
-            });
-          }
+          render: (props) => /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
+            drilldown,
+            parent: model,
+            routeProps: props
+          })
         })
       );
     }
   }
-  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
+  if (isCurrentPageRouteMatch(model, routeProps.match)) {
+    return /* @__PURE__ */ React__default["default"].createElement(SceneAppPageView, {
+      page: model,
+      routeProps
     });
   }
-  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);
+  routes.push(getFallbackRoute(model, routeProps));
+  return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, 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);
+function getFallbackRoute(page, routeProps) {
+  return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+    key: "fallback route",
+    render: (props) => {
+      const fallbackPage = getDefaultFallbackPage();
+      return /* @__PURE__ */ React__default["default"].createElement(SceneAppPageView, {
+        page: fallbackPage,
+        routeProps
+      });
     }
-  }, [isInitialized, scene]);
-  if (!isInitialized) {
-    return null;
-  }
-  const pageNav = {
-    text: page.state.title,
-    subTitle: page.state.subTitle,
-    img: page.state.titleImg,
-    icon: page.state.titleIcon,
-    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
-      )
-    };
+function isCurrentPageRouteMatch(page, match) {
+  if (!match.isExact) {
+    return false;
   }
-  return void 0;
+  if (match.url === page.state.url) {
+    return true;
+  }
+  if (page.parent instanceof SceneAppPage && page.parent.state.tabs[0] === page && page.parent.state.url === match.url) {
+    return true;
+  }
+  return false;
 }
-
-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]);
+function getDefaultFallbackPage() {
+  return new SceneAppPage({
+    url: "",
+    title: "Not found",
+    subTitle: "The url did not match any page",
+    getScene: () => {
+      return new EmbeddedScene({
+        body: new SceneFlexLayout({
+          direction: "column",
+          children: [
+            new SceneFlexItem({
+              flexGrow: 1,
+              body: new SceneReactObject({
+                component: () => {
+                  return /* @__PURE__ */ React__default["default"].createElement("div", {
+                    "data-testid": "default-fallback-content"
+                  }, "If you found your way here using a link then there might be a bug in this application.");
+                }
+              })
+            })
+          ]
+        })
+      });
     }
-  return a;
-};
-class SceneReactObject extends SceneObjectBase {
+  });
 }
-SceneReactObject.Component = ({ model }) => {
-  const { component: Component, props, reactNode } = model.useState();
-  if (Component) {
-    return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadValues({}, props));
-  }
-  if (reactNode) {
-    return reactNode;
-  }
-  return null;
-};
 
 exports.ConstantVariable = ConstantVariable;
 exports.CustomVariable = CustomVariable;
@@ -4548,12 +4949,12 @@ exports.SceneVariableSet = SceneVariableSet;
 exports.SceneVariableValueChangedEvent = SceneVariableValueChangedEvent;
 exports.TestVariable = TestVariable;
 exports.TextBoxVariable = TextBoxVariable;
-exports.UrlSyncManager = UrlSyncManager;
 exports.VariableDependencyConfig = VariableDependencyConfig;
 exports.VariableValueSelectors = VariableValueSelectors;
 exports.VizPanel = VizPanel;
 exports.VizPanelMenu = VizPanelMenu;
 exports.formatRegistry = formatRegistry;
+exports.getUrlSyncManager = getUrlSyncManager;
 exports.isCustomVariableValue = isCustomVariableValue;
 exports.isSceneObject = isSceneObject;
 exports.sceneGraph = sceneGraph;