@grafana/scenes 0.5.0 → 0.7.0

package/dist/index.js

@@ -7,10 +7,10 @@ var schema = require('@grafana/schema');
 var React = require('react');
 var rxjs = require('rxjs');
 var uuid = require('uuid');
-var ui = require('@grafana/ui');
 var lodash = require('lodash');
 var runtime = require('@grafana/runtime');
 var e2eSelectors = require('@grafana/e2e-selectors');
+var ui = require('@grafana/ui');
 var css = require('@emotion/css');
 var reactUse = require('react-use');
 var experimental = require('@grafana/experimental');
@@ -33,8 +33,8 @@ class SceneObjectStateChangedEvent extends data.BusEventWithPayload {
 SceneObjectStateChangedEvent.type = "scene-object-state-change";
 
 var __defProp$o = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
 var __hasOwnProp$p = Object.prototype.hasOwnProperty;
 var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
@@ -50,7 +50,7 @@ var __spreadValues$o = (a, b) => {
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -75,7 +75,7 @@ function SceneComponentWrapperWithoutMemo(_a) {
   if (!activated) {
     return null;
   }
-  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$c(__spreadValues$o({}, otherProps), {
+  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$d(__spreadValues$o({}, otherProps), {
     model
   }));
 }
@@ -122,6 +122,15 @@ function cloneSceneObject(sceneObject, withState) {
   Object.assign(clonedState, withState);
   return new sceneObject.constructor(clonedState);
 }
+function getClosest(sceneObject, extract) {
+  let curSceneObject = sceneObject;
+  let extracted = void 0;
+  while (curSceneObject && !extracted) {
+    extracted = extract(curSceneObject);
+    curSceneObject = curSceneObject.parent;
+  }
+  return extracted;
+}
 
 var __defProp$m = Object.defineProperty;
 var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
@@ -296,11 +305,15 @@ class SceneObjectBase {
   }
 }
 function useSceneObjectState(model) {
-  const forceUpdate = ui.useForceUpdate();
+  const [_, setState] = React.useState(model.state);
+  const stateAtFirstRender = model.state;
   React.useEffect(() => {
-    const s = model.subscribeToState(forceUpdate);
+    const s = model.subscribeToState(setState);
+    if (model.state !== stateAtFirstRender) {
+      setState(model.state);
+    }
     return () => s.unsubscribe();
-  }, [model, forceUpdate]);
+  }, [model]);
   return model.state;
 }
 
@@ -367,13 +380,29 @@ var __spreadValues$k = (a, b) => {
 };
 class SceneTimeRange extends SceneObjectBase {
   constructor(state = {}) {
-    var _a, _b, _c;
+    var _a, _b;
     const from = (_a = state.from) != null ? _a : "now-6h";
     const to = (_b = state.to) != null ? _b : "now";
-    const timeZone = (_c = state.timeZone) != null ? _c : data.getTimeZone();
-    const value = evaluateTimeRange(from, to, timeZone);
+    const timeZone = state.timeZone;
+    const value = evaluateTimeRange(from, to, timeZone || data.getTimeZone());
     super(__spreadValues$k({ from, to, timeZone, value }, state));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["from", "to"] });
+    this._onActivate = () => {
+      if (!this.state.timeZone) {
+        const timeZoneSource = this.getTimeZoneSource();
+        if (timeZoneSource !== this) {
+          this._subs.add(
+            timeZoneSource.subscribeToState((n, p) => {
+              if (n.timeZone !== void 0 && n.timeZone !== p.timeZone) {
+                this.setState({
+                  value: evaluateTimeRange(this.state.from, this.state.to, timeZoneSource.getTimeZone())
+                });
+              }
+            })
+          );
+        }
+      }
+    };
     this.onTimeRangeChange = (timeRange) => {
       const update = {};
       if (typeof timeRange.raw.from === "string") {
@@ -386,12 +415,41 @@ class SceneTimeRange extends SceneObjectBase {
       } else {
         update.to = timeRange.raw.to.toISOString();
       }
-      update.value = evaluateTimeRange(update.from, update.to, this.state.timeZone);
+      update.value = evaluateTimeRange(update.from, update.to, this.getTimeZone());
       this.setState(update);
     };
+    this.onTimeZoneChange = (timeZone) => {
+      this.setState({ timeZone });
+    };
     this.onRefresh = () => {
-      this.setState({ value: evaluateTimeRange(this.state.from, this.state.to, this.state.timeZone) });
+      this.setState({ value: evaluateTimeRange(this.state.from, this.state.to, this.getTimeZone()) });
     };
+    this.addActivationHandler(this._onActivate);
+  }
+  getTimeZoneSource() {
+    if (!this.parent || !this.parent.parent) {
+      return this;
+    }
+    const source = getClosest(this.parent.parent, (o) => {
+      if (o.state.$timeRange && o.state.$timeRange.state.timeZone) {
+        return o.state.$timeRange;
+      }
+      return void 0;
+    });
+    if (!source) {
+      return this;
+    }
+    return source;
+  }
+  getTimeZone() {
+    if (this.state.timeZone) {
+      return this.state.timeZone;
+    }
+    const timeZoneSource = this.getTimeZoneSource();
+    if (timeZoneSource !== this) {
+      return timeZoneSource.state.timeZone;
+    }
+    return data.getTimeZone();
   }
   getUrlState() {
     return { from: this.state.from, to: this.state.to };
@@ -410,7 +468,7 @@ class SceneTimeRange extends SceneObjectBase {
     if (to) {
       update.to = to;
     }
-    update.value = evaluateTimeRange((_a = update.from) != null ? _a : this.state.from, (_b = update.to) != null ? _b : this.state.to, this.state.timeZone);
+    update.value = evaluateTimeRange((_a = update.from) != null ? _a : this.state.from, (_b = update.to) != null ? _b : this.state.to, this.getTimeZone());
     this.setState(update);
   }
 }
@@ -896,8 +954,8 @@ function collectAllVariables(sceneObject, record = {}) {
 }
 
 var __defProp$j = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
 var __hasOwnProp$k = Object.prototype.hasOwnProperty;
 var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
@@ -913,7 +971,7 @@ var __spreadValues$j = (a, b) => {
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 function getTemplateProxyForField(field, frame, frames) {
   return new Proxy(
     {},
@@ -929,7 +987,7 @@ function getTemplateProxyForField(field, frame, frames) {
           if (!field.labels) {
             return "";
           }
-          return __spreadProps$b(__spreadValues$j({}, field.labels), {
+          return __spreadProps$c(__spreadValues$j({}, field.labels), {
             __values: Object.values(field.labels).sort().join(", "),
             toString: () => {
               return data.formatLabels(field.labels, "", true);
@@ -1146,15 +1204,6 @@ 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) {
   var _a;
   return (_a = getClosest(sceneObject, (s) => s.state.$variables)) != null ? _a : EmptyVariableSet;
@@ -1233,6 +1282,75 @@ const sceneGraph = {
   findObject
 };
 
+var __defProp$i = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = 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$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+class SceneTimeZoneOverride extends SceneObjectBase {
+  constructor(state) {
+    super(__spreadProps$b(__spreadValues$i({}, state), {
+      timeZone: state.timeZone,
+      from: "now-6h",
+      to: "now",
+      value: evaluateTimeRange("now-6h", "now", state.timeZone)
+    }));
+    this._activationHandler = () => {
+      const timeRangeObject = this.getTimeRangeObject();
+      const { from, to } = timeRangeObject.state;
+      this.setState({
+        from,
+        to,
+        value: evaluateTimeRange(from, to, this.state.timeZone)
+      });
+      this._subs.add(
+        timeRangeObject.subscribeToState((n) => {
+          this.setState({
+            from: n.from,
+            to: n.to,
+            value: evaluateTimeRange(n.from, n.to, this.state.timeZone)
+          });
+        })
+      );
+    };
+    this.addActivationHandler(this._activationHandler);
+  }
+  getTimeRangeObject() {
+    if (!this.parent || !this.parent.parent) {
+      throw new Error("SceneTimeZoneOverride must be used within $timeRange scope");
+    }
+    return sceneGraph.getTimeRange(this.parent.parent);
+  }
+  getTimeZone() {
+    return this.state.timeZone;
+  }
+  onTimeRangeChange(timeRange) {
+    const timeRangeObject = this.getTimeRangeObject();
+    timeRangeObject.onTimeRangeChange(timeRange);
+  }
+  onTimeZoneChange(timeZone) {
+    this.setState({ timeZone, value: evaluateTimeRange(this.state.from, this.state.to, timeZone) });
+  }
+  onRefresh() {
+    const timeRangeObject = this.getTimeRangeObject();
+    timeRangeObject.onRefresh();
+  }
+}
+
 async function getDataSource(datasource, scopedVars) {
   if (datasource && datasource.query) {
     return datasource;
@@ -1418,8 +1536,8 @@ class SceneQueryRunner extends SceneObjectBase {
   _onActivate() {
     const timeRange = sceneGraph.getTimeRange(this);
     this._subs.add(
-      timeRange.subscribeToState((timeRange2) => {
-        this.runWithTimeRange(timeRange2.value);
+      timeRange.subscribeToState(() => {
+        this.runWithTimeRange(timeRange);
       })
     );
     if (this.shouldRunQueriesOnActivate()) {
@@ -1477,7 +1595,7 @@ class SceneQueryRunner extends SceneObjectBase {
   }
   runQueries() {
     const timeRange = sceneGraph.getTimeRange(this);
-    this.runWithTimeRange(timeRange.state.value);
+    this.runWithTimeRange(timeRange);
   }
   getMaxDataPoints() {
     var _a, _b;
@@ -1504,9 +1622,9 @@ class SceneQueryRunner extends SceneObjectBase {
     const request = {
       app: data.CoreApp.Dashboard,
       requestId: getNextRequestId(),
-      timezone: "browser",
+      timezone: timeRange.getTimeZone(),
       panelId: 1,
-      range: timeRange,
+      range: timeRange.state.value,
       interval: "1s",
       intervalMs: 1e3,
       targets: lodash.cloneDeep(queries),
@@ -1524,7 +1642,7 @@ class SceneQueryRunner extends SceneObjectBase {
         return query;
       });
       const lowerIntervalLimit = minInterval ? minInterval : ds.interval;
-      const norm = data.rangeUtil.calculateInterval(timeRange, request.maxDataPoints, lowerIntervalLimit);
+      const norm = data.rangeUtil.calculateInterval(timeRange.state.value, request.maxDataPoints, lowerIntervalLimit);
       request.scopedVars = Object.assign({}, request.scopedVars, {
         __interval: { text: norm.interval, value: norm.interval },
         __interval_ms: { text: norm.intervalMs.toString(), value: norm.intervalMs }
@@ -1549,21 +1667,21 @@ function findFirstDatasource(targets) {
   return (_b = (_a = targets.find((t) => t.datasource !== null)) == null ? void 0 : _a.datasource) != null ? _b : void 0;
 }
 
-var __defProp$i = Object.defineProperty;
+var __defProp$h = 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) => {
+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$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$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;
 };
@@ -1624,7 +1742,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$a(__spreadValues$i({}, data$1), { series }))).subscribe((data2) => this.setState({ data: data2 }));
+    this._transformSub = data.transformDataFrame(transformations, data$1.series, ctx).pipe(rxjs.map((series) => __spreadProps$a(__spreadValues$h({}, data$1), { series }))).subscribe((data2) => this.setState({ data: data2 }));
   }
 }
 
@@ -1901,28 +2019,28 @@ function writeVariableTraceLog(variable, message, err) {
   writeSceneLog("SceneVariableSet", `Variable[${variable.state.name}]: ${message}`, err);
 }
 
-var __defProp$h = Object.defineProperty;
+var __defProp$g = 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) => {
+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$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$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$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 class ConstantVariable extends SceneObjectBase {
   constructor(initialState) {
-    super(__spreadProps$9(__spreadValues$h({
+    super(__spreadProps$9(__spreadValues$g({
       type: "constant",
       value: "",
       name: ""
@@ -2171,25 +2289,25 @@ class CustomAllValue {
   }
 }
 
-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$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$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$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$g({
+    super(__spreadValues$f({
       type: "custom",
       query: "",
       value: "",
@@ -2222,25 +2340,25 @@ CustomVariable.Component = ({ model }) => {
   return renderSelectForVariable(model);
 };
 
-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) => {
+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$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$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$f({
+    super(__spreadValues$e({
       type: "datasource",
       value: "",
       text: "",
@@ -2328,21 +2446,21 @@ const hasCustomVariableSupport = (datasource) => {
   return "query" in variableSupport && "editor" in variableSupport && Boolean(variableSupport.query) && Boolean(variableSupport.editor);
 };
 
-var __defProp$e = Object.defineProperty;
+var __defProp$d = Object.defineProperty;
 var __defProps$8 = Object.defineProperties;
 var __getOwnPropDescs$8 = 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 __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$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$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;
 };
@@ -2383,7 +2501,7 @@ class LegacyQueryRunner {
       return getEmptyMetricFindValueObservable();
     }
     return rxjs.from(
-      this.datasource.metricFindQuery(variable.state.query, __spreadProps$8(__spreadValues$e({}, request), {
+      this.datasource.metricFindQuery(variable.state.query, __spreadProps$8(__spreadValues$d({}, request), {
         variable: {
           name: variable.state.name,
           type: variable.state.type
@@ -2614,25 +2732,25 @@ function areMetricFindValues(data$1) {
   return false;
 }
 
-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$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$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$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$d({
+    super(__spreadValues$c({
       type: "query",
       name: "",
       value: "",
@@ -2765,25 +2883,25 @@ function queryMetricTree(query) {
   return queryTree(children, query.split("."), 0);
 }
 
-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$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$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$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$c({
+    super(__spreadValues$b({
       type: "custom",
       name: "Test",
       value: "Value",
@@ -2863,25 +2981,25 @@ function VariableValueInput({ model }) {
   });
 }
 
-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) => {
+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$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$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$b({
+    super(__spreadValues$a({
       type: "textbox",
       value: "",
       name: ""
@@ -3118,24 +3236,46 @@ function getStyles$1(theme) {
   };
 }
 
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+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$b.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$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.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;
 };
 function VizPanelRenderer({ model }) {
   var _b;
-  const _a = model.useState(), { title, description, options, fieldConfig, pluginLoadError, $data, displayMode, hoverHeader, menu } = _a, state = __objRest$1(_a, ["title", "description", "options", "fieldConfig", "pluginLoadError", "$data", "displayMode", "hoverHeader", "menu"]);
+  const _a = model.useState(), {
+    title,
+    description,
+    options,
+    fieldConfig,
+    pluginLoadError,
+    $data,
+    displayMode,
+    hoverHeader,
+    menu,
+    headerActions
+  } = _a, state = __objRest$1(_a, [
+    "title",
+    "description",
+    "options",
+    "fieldConfig",
+    "pluginLoadError",
+    "$data",
+    "displayMode",
+    "hoverHeader",
+    "menu",
+    "headerActions"
+  ]);
   const [ref, { width, height }] = reactUse.useMeasure();
   const plugin = model.getPlugin();
   const parentLayout = sceneGraph.getLayout(model);
@@ -3145,7 +3285,7 @@ function VizPanelRenderer({ model }) {
   const rawData = sceneGraph.getData(model).useState();
   const dataWithFieldConfig = model.applyFieldConfig(rawData.data);
   const titleInterpolated = model.interpolate(title, void 0, "text");
-  const timeZone = sceneGraph.getTimeRange(model).state.timeZone;
+  const timeZone = sceneGraph.getTimeRange(model).getTimeZone();
   if (pluginLoadError) {
     return /* @__PURE__ */ React__default["default"].createElement("div", null, "Failed to load plugin: ", pluginLoadError);
   }
@@ -3171,6 +3311,16 @@ function VizPanelRenderer({ model }) {
       model: menu
     });
   }
+  let actionsElement;
+  if (headerActions) {
+    if (isSceneObject(headerActions)) {
+      actionsElement = /* @__PURE__ */ React__default["default"].createElement(headerActions.Component, {
+        model: headerActions
+      });
+    } else {
+      actionsElement = headerActions;
+    }
+  }
   const data$1 = dataWithFieldConfig;
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     ref,
@@ -3186,6 +3336,7 @@ function VizPanelRenderer({ model }) {
     hoverHeader,
     titleItems,
     dragClass,
+    actions: actionsElement,
     dragClassCancel,
     padding: plugin.noPadding ? "none" : "md",
     menu: panelMenu
@@ -3221,21 +3372,21 @@ function getChromeStatusMessage(data, pluginLoadingError) {
   return data.error ? data.error.message : void 0;
 }
 
-var __defProp$a = Object.defineProperty;
+var __defProp$9 = Object.defineProperty;
 var __defProps$7 = Object.defineProperties;
 var __getOwnPropDescs$7 = 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$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$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$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;
 };
@@ -3249,13 +3400,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$7(__spreadValues$a({}, fieldConfig), {
+      return __spreadProps$7(__spreadValues$9({}, fieldConfig), {
         overrides: [...fieldConfig.overrides, override3]
       });
     }
     const displayNames = getDisplayNames(data, displayName);
     const override2 = createOverride$1(displayNames);
-    return __spreadProps$7(__spreadValues$a({}, fieldConfig), {
+    return __spreadProps$7(__spreadValues$9({}, fieldConfig), {
       overrides: [...fieldConfig.overrides, override2]
     });
   }
@@ -3268,22 +3419,22 @@ function seriesVisibilityConfigFactory(label, mode, fieldConfig, data) {
       existing = existing.filter((el) => nameOfHiddenFields.indexOf(el) < 0);
     }
     if (existing[0] === displayName && existing.length === 1) {
-      return __spreadProps$7(__spreadValues$a({}, fieldConfig), {
+      return __spreadProps$7(__spreadValues$9({}, fieldConfig), {
         overrides: overridesCopy
       });
     }
     const override2 = createOverride$1([displayName, ...nameOfHiddenFields]);
-    return __spreadProps$7(__spreadValues$a({}, fieldConfig), {
+    return __spreadProps$7(__spreadValues$9({}, fieldConfig), {
       overrides: [...overridesCopy, override2]
     });
   }
   const override = createExtendedOverride(current, displayName);
   if (allFieldsAreExcluded(override, data)) {
-    return __spreadProps$7(__spreadValues$a({}, fieldConfig), {
+    return __spreadProps$7(__spreadValues$9({}, fieldConfig), {
       overrides: overridesCopy
     });
   }
-  return __spreadProps$7(__spreadValues$a({}, fieldConfig), {
+  return __spreadProps$7(__spreadValues$9({}, fieldConfig), {
     overrides: [...overridesCopy, override]
   });
 }
@@ -3308,7 +3459,7 @@ function createOverride$1(names, mode = data.ByNamesMatcherMode.exclude, propert
       }
     },
     properties: [
-      __spreadProps$7(__spreadValues$a({}, property), {
+      __spreadProps$7(__spreadValues$9({}, property), {
         value: {
           viz: true,
           legend: false,
@@ -3380,21 +3531,21 @@ const getNamesOfHiddenFields = (overrides, data$1) => {
   return names;
 };
 
-var __defProp$9 = Object.defineProperty;
+var __defProp$8 = 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) => {
+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$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$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;
 };
@@ -3405,7 +3556,7 @@ const changeSeriesColorConfigFactory = (label, color, fieldConfig) => {
     return override.matcher.id === data.FieldMatcherID.byName && override.matcher.options === label;
   });
   if (currentIndex < 0) {
-    return __spreadProps$6(__spreadValues$9({}, fieldConfig), {
+    return __spreadProps$6(__spreadValues$8({}, fieldConfig), {
       overrides: [...fieldConfig.overrides, createOverride(label, color)]
     });
   }
@@ -3413,19 +3564,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$6(__spreadValues$9({}, existing), {
+    overridesCopy[currentIndex] = __spreadProps$6(__spreadValues$8({}, existing), {
       properties: [...existing.properties, createProperty(color)]
     });
-    return __spreadProps$6(__spreadValues$9({}, fieldConfig), {
+    return __spreadProps$6(__spreadValues$8({}, fieldConfig), {
       overrides: overridesCopy
     });
   }
   const propertiesCopy = Array.from(existing.properties);
   propertiesCopy[propertyIndex] = createProperty(color);
-  overridesCopy[currentIndex] = __spreadProps$6(__spreadValues$9({}, existing), {
+  overridesCopy[currentIndex] = __spreadProps$6(__spreadValues$8({}, existing), {
     properties: propertiesCopy
   });
-  return __spreadProps$6(__spreadValues$9({}, fieldConfig), {
+  return __spreadProps$6(__spreadValues$8({}, fieldConfig), {
     overrides: overridesCopy
   });
 };
@@ -3448,21 +3599,21 @@ const createProperty = (color) => {
   };
 };
 
-var __defProp$8 = Object.defineProperty;
+var __defProp$7 = 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) => {
+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$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$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;
 };
@@ -3472,7 +3623,7 @@ function registerRuntimePanelPlugin({ pluginId, plugin }) {
   if (runtimePanelPlugins.has(pluginId)) {
     throw new Error(`A runtime panel plugin with id ${pluginId} has already been registered`);
   }
-  plugin.meta = __spreadProps$5(__spreadValues$8({}, plugin.meta), {
+  plugin.meta = __spreadProps$5(__spreadValues$7({}, plugin.meta), {
     id: pluginId,
     name: pluginId,
     module: "runtime plugin",
@@ -3500,28 +3651,28 @@ function loadPanelPluginSync(pluginId) {
   return (_a = getPanelPluginFromCache(pluginId)) != null ? _a : runtimePanelPlugins.get(pluginId);
 }
 
-var __defProp$7 = Object.defineProperty;
+var __defProp$6 = 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) => {
+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$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$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$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 class VizPanel extends SceneObjectBase {
   constructor(state) {
-    super(__spreadValues$7({
+    super(__spreadValues$6({
       options: {},
       fieldConfig: { defaults: {}, overrides: [] },
       title: "Title",
@@ -3582,8 +3733,8 @@ class VizPanel extends SceneObjectBase {
         sortDesc = !sortDesc;
         sortBy = sortKey;
       }
-      this.onOptionsChange(__spreadProps$4(__spreadValues$7({}, this.state.options), {
-        legend: __spreadProps$4(__spreadValues$7({}, legendOptions), { sortBy, sortDesc })
+      this.onOptionsChange(__spreadProps$4(__spreadValues$6({}, this.state.options), {
+        legend: __spreadProps$4(__spreadValues$6({}, legendOptions), { sortBy, sortDesc })
       }));
     };
     this._panelContext = {
@@ -3665,7 +3816,7 @@ class VizPanel extends SceneObjectBase {
     if (rawData.structureRev == null && newFrames && prevFrames && !data.compareArrayValues(newFrames, prevFrames, data.compareDataFrameStructures)) {
       this._structureRev++;
     }
-    this._dataWithFieldConfig = __spreadProps$4(__spreadValues$7({}, rawData), {
+    this._dataWithFieldConfig = __spreadProps$4(__spreadValues$6({}, rawData), {
       structureRev: this._structureRev,
       series: data.applyFieldOverrides({
         data: newFrames,
@@ -3815,17 +3966,18 @@ class SceneCanvasText extends SceneObjectBase {
   }
 }
 SceneCanvasText.Component = ({ model }) => {
-  const { text, fontSize = 20, align = "left", key } = model.useState();
-  const style = {
+  const { text, fontSize = 20, align = "left", key, spacing } = model.useState();
+  const theme = ui.useTheme2();
+  const style = css.css({
     fontSize,
     display: "flex",
     flexGrow: 1,
     alignItems: "center",
-    padding: 16,
+    padding: spacing ? theme.spacing(spacing, 0) : void 0,
     justifyContent: align
-  };
+  });
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    style,
+    className: style,
     "data-testid": key
   }, sceneGraph.interpolate(model, text));
 };
@@ -3858,6 +4010,7 @@ SceneTimePicker.Component = SceneTimePickerRenderer;
 function SceneTimePickerRenderer({ model }) {
   const { hidePicker, isOnCanvas } = model.useState();
   const timeRange = sceneGraph.getTimeRange(model);
+  const timeZone = timeRange.getTimeZone();
   const timeRangeState = timeRange.useState();
   if (hidePicker) {
     return null;
@@ -3866,7 +4019,7 @@ function SceneTimePickerRenderer({ model }) {
     isOnCanvas,
     value: timeRangeState.value,
     onChange: timeRange.onTimeRangeChange,
-    timeZone: "browser",
+    timeZone,
     fiscalYearStartMonth: 0,
     onMoveBackward: () => {
     },
@@ -3874,28 +4027,27 @@ function SceneTimePickerRenderer({ model }) {
     },
     onZoom: () => {
     },
-    onChangeTimeZone: () => {
-    },
+    onChangeTimeZone: timeRange.onTimeZoneChange,
     onChangeFiscalYearStartMonth: () => {
     }
   });
 }
 
-var __defProp$6 = Object.defineProperty;
+var __defProp$5 = 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$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$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$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;
 };
@@ -3904,7 +4056,7 @@ const DEFAULT_INTERVALS = ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "
 class SceneRefreshPicker extends SceneObjectBase {
   constructor(state) {
     var _a;
-    super(__spreadProps$3(__spreadValues$6({
+    super(__spreadProps$3(__spreadValues$5({
       refresh: ""
     }, state), {
       intervals: (_a = state.intervals) != null ? _a : DEFAULT_INTERVALS
@@ -4015,22 +4167,6 @@ 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({
@@ -4042,89 +4178,119 @@ class SceneFlexLayout extends SceneObjectBase {
   }
 }
 SceneFlexLayout.Component = SceneFlexLayoutRenderer;
-function SceneFlexLayoutRenderer({ model, parentDirection }) {
-  const { direction = "row", children, wrap, isHidden } = model.useState();
+function SceneFlexLayoutRenderer({ model, parentState }) {
+  const { children, isHidden } = model.useState();
+  const style = useLayoutStyle(model.state, parentState);
   if (isHidden) {
     return null;
   }
-  let style = {
-    display: "flex",
-    flexGrow: 1,
-    flexDirection: direction,
-    gap: "8px",
-    flexWrap: wrap || "nowrap",
-    alignContent: "baseline",
-    minHeight: 0
-  };
-  if (parentDirection) {
-    style = __spreadValues$5(__spreadValues$5({}, getFlexItemItemStyles(parentDirection || "row", model)), style);
-  }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    style
+    className: style
   }, children.map((item) => {
     const Component = item.Component;
     return /* @__PURE__ */ React__default["default"].createElement(Component, {
       key: item.state.key,
       model: item,
-      parentDirection: direction
+      parentState: model.state
     });
   }));
 }
 class SceneFlexItem extends SceneObjectBase {
 }
 SceneFlexItem.Component = SceneFlexItemRenderer;
-function SceneFlexItemRenderer({ model, parentDirection }) {
+function SceneFlexItemRenderer({ model, parentState }) {
+  if (!parentState) {
+    throw new Error("SceneFlexItem must be a child of SceneFlexLayout");
+  }
   const { body, isHidden } = model.useState();
+  const style = useLayoutItemStyle(model.state, parentState);
   if (!body || isHidden) {
     return null;
   }
-  let style = {};
-  if (!parentDirection) {
-    throw new Error("SceneFlexItem must be a child of SceneFlexLayout");
-  }
-  style = getFlexItemItemStyles(parentDirection, model);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    style
+    className: style
   }, /* @__PURE__ */ React__default["default"].createElement(body.Component, {
     model: body
   }));
 }
-function getFlexItemItemStyles(direction, item) {
-  const { xSizing = "fill", ySizing = "fill" } = item.state;
-  const style = {
-    display: "flex",
-    position: "relative",
-    flexDirection: direction,
-    minWidth: item.state.minWidth,
-    minHeight: item.state.minHeight,
-    maxWidth: item.state.maxWidth,
-    maxHeight: item.state.maxHeight
-  };
-  if (direction === "column") {
-    if (item.state.height) {
-      style.height = item.state.height;
+function applyItemStyles(style, state, parentState) {
+  var _a, _b, _c;
+  const parentDirection = (_a = parentState.direction) != null ? _a : "row";
+  const { xSizing = "fill", ySizing = "fill" } = state;
+  style.display = "flex";
+  style.position = "relative";
+  style.flexDirection = parentDirection;
+  if (parentDirection === "column") {
+    if (state.height) {
+      style.height = state.height;
     } else {
       style.flexGrow = ySizing === "fill" ? 1 : 0;
     }
-    if (item.state.width) {
-      style.width = item.state.width;
+    if (state.width) {
+      style.width = state.width;
     } else {
       style.alignSelf = xSizing === "fill" ? "stretch" : "flex-start";
     }
   } else {
-    if (item.state.height) {
-      style.height = item.state.height;
+    if (state.height) {
+      style.height = state.height;
     } else {
       style.alignSelf = ySizing === "fill" ? "stretch" : "flex-start";
     }
-    if (item.state.width) {
-      style.width = item.state.width;
+    if (state.width) {
+      style.width = state.width;
     } else {
       style.flexGrow = xSizing === "fill" ? 1 : 0;
     }
   }
+  style.minWidth = state.minWidth;
+  style.maxWidth = state.maxWidth;
+  style.maxHeight = state.maxHeight;
+  style.minHeight = (_b = state.minHeight) != null ? _b : parentState.minHeight;
+  style.height = (_c = state.height) != null ? _c : parentState.height;
   return style;
 }
+function useLayoutItemStyle(state, parentState) {
+  return React.useMemo(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    const theme = runtime.config.theme2;
+    const style = applyItemStyles({}, state, parentState);
+    style[theme.breakpoints.down("md")] = {
+      maxWidth: (_b = (_a = state.md) == null ? void 0 : _a.maxWidth) != null ? _b : "unset",
+      maxHeight: (_d = (_c = state.md) == null ? void 0 : _c.maxHeight) != null ? _d : "unset",
+      height: (_g = (_e = state.md) == null ? void 0 : _e.height) != null ? _g : (_f = parentState.md) == null ? void 0 : _f.height,
+      width: (_j = (_h = state.md) == null ? void 0 : _h.width) != null ? _j : (_i = parentState.md) == null ? void 0 : _i.width
+    };
+    return css.css(style);
+  }, [state, parentState]);
+}
+function useLayoutStyle(state, parentState) {
+  return React.useMemo(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    const { direction = "row", wrap } = state;
+    const theme = runtime.config.theme2;
+    const style = {};
+    if (parentState) {
+      applyItemStyles(style, state, parentState);
+    } else {
+      style.display = "flex";
+      style.flexGrow = 1;
+    }
+    style.flexDirection = direction;
+    style.gap = "8px";
+    style.flexWrap = wrap || "nowrap";
+    style.alignContent = "baseline";
+    style.minHeight = style.minHeight || 0;
+    style[theme.breakpoints.down("md")] = {
+      flexDirection: (_b = (_a = state.md) == null ? void 0 : _a.direction) != null ? _b : "column",
+      maxWidth: (_d = (_c = state.md) == null ? void 0 : _c.maxWidth) != null ? _d : "unset",
+      maxHeight: (_f = (_e = state.md) == null ? void 0 : _e.maxHeight) != null ? _f : "unset",
+      height: (_h = (_g = state.md) == null ? void 0 : _g.height) != null ? _h : "unset",
+      width: (_j = (_i = state.md) == null ? void 0 : _i.width) != null ? _j : "unset"
+    };
+    return css.css(style);
+  }, [parentState, state]);
+}
 
 const DEFAULT_PANEL_SPAN = 4;
 const GRID_CELL_HEIGHT = 30;
@@ -4781,7 +4947,8 @@ function SceneAppPageView({ page, routeProps }) {
   }
   return /* @__PURE__ */ React__default["default"].createElement(runtime.PluginPage, {
     pageNav,
-    actions: pageActions
+    actions: pageActions,
+    renderTitle: containerState.renderTitle
   }, /* @__PURE__ */ React__default["default"].createElement(scene.Component, {
     model: scene
   }));
@@ -4951,7 +5118,6 @@ function getDefaultFallbackPage() {
           direction: "column",
           children: [
             new SceneFlexItem({
-              flexGrow: 1,
               body: new SceneReactObject({
                 component: () => {
                   return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4993,6 +5159,7 @@ exports.SceneReactObject = SceneReactObject;
 exports.SceneRefreshPicker = SceneRefreshPicker;
 exports.SceneTimePicker = SceneTimePicker;
 exports.SceneTimeRange = SceneTimeRange;
+exports.SceneTimeZoneOverride = SceneTimeZoneOverride;
 exports.SceneToolbarButton = SceneToolbarButton;
 exports.SceneToolbarInput = SceneToolbarInput;
 exports.SceneVariableSet = SceneVariableSet;