@grafana/scenes 0.0.20 → 0.0.21

package/dist/index.js

@@ -8,6 +8,7 @@ var rxjs = require('rxjs');
 var uuid = require('uuid');
 var ui = require('@grafana/ui');
 var lodash = require('lodash');
+var schema = require('@grafana/schema');
 var runtime = require('@grafana/runtime');
 var e2eSelectors = require('@grafana/e2e-selectors');
 var css = require('@emotion/css');
@@ -31,21 +32,21 @@ class SceneObjectStateChangedEvent extends data.BusEventWithPayload {
 }
 SceneObjectStateChangedEvent.type = "scene-object-state-change";
 
-var __defProp$h = Object.defineProperty;
+var __defProp$i = Object.defineProperty;
 var __defProps$6 = Object.defineProperties;
 var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = 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$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = 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$h.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
 };
@@ -53,11 +54,11 @@ var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
+  if (source != null && __getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -72,7 +73,7 @@ function SceneComponentWrapperWithoutMemo(_a) {
   ]);
   var _a2;
   const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
-  const inner = /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$6(__spreadValues$h({}, otherProps), {
+  const inner = /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$6(__spreadValues$i({}, otherProps), {
     model,
     isEditing
   }));
@@ -111,19 +112,19 @@ function getSceneEditor$1(sceneObject) {
   throw new Error("No editor found in scene tree");
 }
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = 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$h = Object.defineProperty;
+var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+var __propIsEnum$h = 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$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
+    if (__hasOwnProp$h.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b)) {
+      if (__propIsEnum$h.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
     }
   return a;
 };
@@ -142,7 +143,7 @@ function forEachSceneObjectInState(state, callback) {
   }
 }
 function cloneSceneObject(sceneObject, withState) {
-  const clonedState = __spreadValues$g({}, sceneObject.state);
+  const clonedState = __spreadValues$h({}, sceneObject.state);
   for (const key in clonedState) {
     const propValue = clonedState[key];
     if (propValue instanceof SceneObjectBase) {
@@ -164,33 +165,33 @@ function cloneSceneObject(sceneObject, withState) {
   return new sceneObject.constructor(clonedState);
 }
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
+var __defProp$g = Object.defineProperty;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = 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$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
     }
   return a;
 };
 class SceneObjectBase {
   constructor(state) {
     this._isActive = false;
-    this._subject = new rxjs.Subject();
     this._events = new data.EventBusSrv();
+    this._activationHandlers = [];
+    this._deactivationHandlers = [];
     this._subs = new rxjs.Subscription();
     if (!state.key) {
       state.key = uuid.v4();
     }
     this._state = Object.freeze(state);
-    this._subject.next(state);
     this.setParent();
   }
   get state() {
@@ -218,18 +219,21 @@ class SceneObjectBase {
   setParent() {
     forEachSceneObjectInState(this._state, (child) => child._parent = this);
   }
-  subscribeToState(observerOrNext) {
-    return this._subject.subscribe(observerOrNext);
+  subscribeToState(handler) {
+    return this._events.subscribe(SceneObjectStateChangedEvent, (event) => {
+      if (event.payload.changedObject === this) {
+        handler(event.payload.newState, event.payload.prevState);
+      }
+    });
   }
   subscribeToEvent(eventType, handler) {
     return this._events.subscribe(eventType, handler);
   }
   setState(update) {
     const prevState = this._state;
-    const newState = __spreadValues$f(__spreadValues$f({}, this._state), update);
+    const newState = __spreadValues$g(__spreadValues$g({}, this._state), update);
     this._state = Object.freeze(newState);
     this.setParent();
-    this._subject.next(newState);
     this.publishEvent(
       new SceneObjectStateChangedEvent({
         prevState,
@@ -261,6 +265,12 @@ class SceneObjectBase {
     if ($data && !$data.isActive) {
       $data.activate();
     }
+    this._activationHandlers.forEach((handler) => {
+      const result = handler();
+      if (result) {
+        this._deactivationHandlers.push(result);
+      }
+    });
   }
   deactivate() {
     this._isActive = false;
@@ -274,11 +284,11 @@ class SceneObjectBase {
     if ($variables && $variables.isActive) {
       $variables.deactivate();
     }
+    this._deactivationHandlers.forEach((handler) => handler());
+    this._deactivationHandlers = [];
     this._events.removeAllListeners();
     this._subs.unsubscribe();
     this._subs = new rxjs.Subscription();
-    this._subject.complete();
-    this._subject = new rxjs.Subject();
   }
   useState() {
     return useSceneObjectState(this);
@@ -289,11 +299,14 @@ class SceneObjectBase {
   clone(withState) {
     return cloneSceneObject(this, withState);
   }
+  addActivationHandler(handler) {
+    this._activationHandlers.push(handler);
+  }
 }
 function useSceneObjectState(model) {
   const forceUpdate = ui.useForceUpdate();
   React.useEffect(() => {
-    const s = model.subscribeToState({ next: forceUpdate });
+    const s = model.subscribeToState(forceUpdate);
     return () => s.unsubscribe();
   }, [model, forceUpdate]);
   return model.state;
@@ -318,19 +331,19 @@ class SceneObjectUrlSyncConfig {
   }
 }
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
+var __defProp$f = Object.defineProperty;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$f = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
     }
   return a;
 };
@@ -341,7 +354,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$e({ from, to, timeZone, value }, state));
+    super(__spreadValues$f({ from, to, timeZone, value }, state));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["from", "to"] });
     this.onTimeRangeChange = (timeRange) => {
       const update = {};
@@ -1088,34 +1101,32 @@ class VariableValueRecorder {
 
 let counter = 100;
 function getNextRequestId() {
-  return "QS" + counter++;
+  return "SQR" + counter++;
 }
 class SceneQueryRunner extends SceneObjectBase {
-  constructor() {
-    super(...arguments);
+  constructor(initialState) {
+    super(initialState);
     this._variableValueRecorder = new VariableValueRecorder();
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["queries", "datasource"],
       onVariableUpdatesCompleted: (variables, dependencyChanged) => this.onVariableUpdatesCompleted(variables, dependencyChanged)
     });
+    this._onActivate = () => {
+      const timeRange = sceneGraph.getTimeRange(this);
+      this._subs.add(
+        timeRange.subscribeToState((timeRange2) => {
+          this.runWithTimeRange(timeRange2.value);
+        })
+      );
+      if (this.shouldRunQueriesOnActivate()) {
+        this.runQueries();
+      }
+    };
     this.onDataReceived = (data$1) => {
       const preProcessedData = data.preProcessPanelData(data$1, this.state.data);
       this.setState({ data: preProcessedData });
     };
-  }
-  activate() {
-    super.activate();
-    const timeRange = sceneGraph.getTimeRange(this);
-    this._subs.add(
-      timeRange.subscribeToState({
-        next: (timeRange2) => {
-          this.runWithTimeRange(timeRange2.value);
-        }
-      })
-    );
-    if (this.shouldRunQueriesOnActivate()) {
-      this.runQueries();
-    }
+    this.addActivationHandler(this._onActivate);
   }
   onVariableUpdatesCompleted(_variablesThatHaveChanged, dependencyChanged) {
     if (this.state.isWaitingForVariables && this.shouldRunQueriesOnActivate()) {
@@ -1175,6 +1186,7 @@ class SceneQueryRunner extends SceneObjectBase {
     return (_b = (_a = this.state.maxDataPoints) != null ? _a : this._containerWidth) != null ? _b : 500;
   }
   async runWithTimeRange(timeRange) {
+    var _a;
     if (sceneGraph.hasVariableDependencyInLoadingState(this)) {
       writeSceneLog("SceneQueryRunner", "Variable dependency is in loading state, skipping query execution");
       this.setState({ isWaitingForVariables: true });
@@ -1183,10 +1195,17 @@ class SceneQueryRunner extends SceneObjectBase {
     if (this.state.isWaitingForVariables) {
       this.setState({ isWaitingForVariables: false });
     }
-    const { datasource, minInterval, queries } = this.state;
+    const { minInterval, queries } = this.state;
     const sceneObjectScopedVar = {
       __sceneObject: { text: "__sceneObject", value: this }
     };
+    if (!(queries == null ? void 0 : queries.length)) {
+      this.onDataReceived({
+        state: schema.LoadingState.Done,
+        series: [],
+        timeRange
+      });
+    }
     const request = {
       app: data.CoreApp.Dashboard,
       requestId: getNextRequestId(),
@@ -1202,6 +1221,7 @@ class SceneQueryRunner extends SceneObjectBase {
       startTime: Date.now()
     };
     try {
+      const datasource = (_a = this.state.datasource) != null ? _a : findFirstDatasource(request.targets);
       const ds = await getDataSource(datasource, request.scopedVars);
       request.targets = request.targets.map((query) => {
         if (!query.datasource) {
@@ -1225,29 +1245,37 @@ class SceneQueryRunner extends SceneObjectBase {
     }
   }
 }
+function findFirstDatasource(targets) {
+  for (const t of targets) {
+    if (t.datasource != null) {
+      return t.datasource;
+    }
+  }
+  return void 0;
+}
 
-var __defProp$d = Object.defineProperty;
+var __defProp$e = Object.defineProperty;
 var __defProps$5 = Object.defineProperties;
 var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 class SceneDataTransformer extends SceneObjectBase {
-  constructor() {
-    super(...arguments);
+  constructor(state) {
+    super(state);
     this._variableDependency = new VariableDependencyConfig(
       this,
       {
@@ -1255,18 +1283,19 @@ class SceneDataTransformer extends SceneObjectBase {
         onReferencedVariableValueChanged: () => this.reprocessTransformations()
       }
     );
+    this.addActivationHandler(() => this.activationHandler());
   }
-  activate() {
-    super.activate();
+  activationHandler() {
     const sourceData = this.getSourceData();
-    this._subs.add(
-      sourceData.subscribeToState({
-        next: (state) => this.transform(state.data)
-      })
-    );
+    this._subs.add(sourceData.subscribeToState((state) => this.transform(state.data)));
     if (sourceData.state.data) {
       this.transform(sourceData.state.data);
     }
+    return () => {
+      if (this._transformSub) {
+        this._transformSub.unsubscribe();
+      }
+    };
   }
   getSourceData() {
     if (this.state.$data) {
@@ -1300,7 +1329,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$5(__spreadValues$d({}, data$1), { series }))).subscribe((data2) => this.setState({ data: data2 }));
+    this._transformSub = data.transformDataFrame(transformations, data$1.series, ctx).pipe(rxjs.map((series) => __spreadProps$5(__spreadValues$e({}, data$1), { series }))).subscribe((data2) => this.setState({ data: data2 }));
   }
 }
 
@@ -1381,29 +1410,43 @@ const getStyles$2 = (theme) => ({
 });
 
 class SceneVariableSet extends SceneObjectBase {
-  constructor() {
-    super(...arguments);
+  constructor(state) {
+    super(state);
     this._variablesThatHaveChanged = /* @__PURE__ */ new Set();
     this._variablesToUpdate = /* @__PURE__ */ new Set();
     this._updating = /* @__PURE__ */ new Map();
     this._variableValueRecorder = new VariableValueRecorder();
+    this._onActivate = () => {
+      this._subs.add(
+        this.subscribeToEvent(SceneVariableValueChangedEvent, (event) => this.handleVariableValueChanged(event.payload))
+      );
+      this.checkForVariablesThatChangedWhileInactive();
+      for (const variable of this.state.variables) {
+        if (this.variableNeedsUpdate(variable)) {
+          this._variablesToUpdate.add(variable);
+        }
+      }
+      this.updateNextBatch();
+      return this._onDeactivate;
+    };
+    this._onDeactivate = () => {
+      var _a;
+      for (const update of this._updating.values()) {
+        (_a = update.subscription) == null ? void 0 : _a.unsubscribe();
+      }
+      for (const variable of this.state.variables) {
+        if (!this._variablesToUpdate.has(variable) && !this._updating.has(variable)) {
+          this._variableValueRecorder.recordCurrentValue(variable);
+        }
+      }
+      this._variablesToUpdate.clear();
+      this._updating.clear();
+    };
+    this.addActivationHandler(this._onActivate);
   }
   getByName(name) {
     return this.state.variables.find((x) => x.state.name === name);
   }
-  activate() {
-    super.activate();
-    this._subs.add(
-      this.subscribeToEvent(SceneVariableValueChangedEvent, (event) => this.handleVariableValueChanged(event.payload))
-    );
-    this.checkForVariablesThatChangedWhileInactive();
-    for (const variable of this.state.variables) {
-      if (this.variableNeedsUpdate(variable)) {
-        this._variablesToUpdate.add(variable);
-      }
-    }
-    this.updateNextBatch();
-  }
   checkForVariablesThatChangedWhileInactive() {
     if (!this._variableValueRecorder.hasValues()) {
       return;
@@ -1425,20 +1468,6 @@ class SceneVariableSet extends SceneObjectBase {
     }
     return true;
   }
-  deactivate() {
-    var _a;
-    super.deactivate();
-    for (const update of this._updating.values()) {
-      (_a = update.subscription) == null ? void 0 : _a.unsubscribe();
-    }
-    for (const variable of this.state.variables) {
-      if (!this._variablesToUpdate.has(variable) && !this._updating.has(variable)) {
-        this._variableValueRecorder.recordCurrentValue(variable);
-      }
-    }
-    this._variablesToUpdate.clear();
-    this._updating.clear();
-  }
   updateNextBatch() {
     if (this._variablesToUpdate.size === 0) {
       this.notifyDependentSceneObjects();
@@ -1543,25 +1572,25 @@ function writeVariableTraceLog(variable, message, err) {
   writeSceneLog("SceneVariableSet", `Variable[${variable.state.name}]: ${message}`, err);
 }
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
 class ConstantVariable extends SceneObjectBase {
   constructor(initialState) {
-    super(__spreadValues$c({
+    super(__spreadValues$d({
       type: "constant",
       value: "",
       name: ""
@@ -1799,25 +1828,25 @@ class MultiValueUrlSyncHandler {
   }
 }
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
 class CustomVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$b({
+    super(__spreadValues$c({
       type: "custom",
       query: "",
       value: "",
@@ -1850,25 +1879,25 @@ CustomVariable.Component = ({ model }) => {
   return renderSelectForVariable(model);
 };
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
 class DataSourceVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$a({
+    super(__spreadValues$b({
       type: "datasource",
       value: "",
       text: "",
@@ -1956,21 +1985,21 @@ const hasCustomVariableSupport = (datasource) => {
   return "query" in variableSupport && "editor" in variableSupport && Boolean(variableSupport.query) && Boolean(variableSupport.editor);
 };
 
-var __defProp$9 = Object.defineProperty;
+var __defProp$a = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
 var __getOwnPropDescs$4 = 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$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
@@ -2011,7 +2040,7 @@ class LegacyQueryRunner {
       return getEmptyMetricFindValueObservable();
     }
     return rxjs.from(
-      this.datasource.metricFindQuery(variable.state.query, __spreadProps$4(__spreadValues$9({}, request), {
+      this.datasource.metricFindQuery(variable.state.query, __spreadProps$4(__spreadValues$a({}, request), {
         variable: {
           name: variable.state.name,
           type: variable.state.type
@@ -2242,25 +2271,25 @@ function areMetricFindValues(data$1) {
   return false;
 }
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
 class QueryVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$8({
+    super(__spreadValues$9({
       type: "query",
       name: "",
       value: "",
@@ -2275,19 +2304,17 @@ class QueryVariable extends MultiValueVariable {
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["regex", "query", "datasource"]
     });
-  }
-  activate() {
-    super.activate();
-    const timeRange = sceneGraph.getTimeRange(this);
-    if (this.state.refresh === data.VariableRefresh.onTimeRangeChanged) {
-      this._subs.add(
-        timeRange.subscribeToState({
-          next: () => {
+    this._onActivate = () => {
+      const timeRange = sceneGraph.getTimeRange(this);
+      if (this.state.refresh === data.VariableRefresh.onTimeRangeChanged) {
+        this._subs.add(
+          timeRange.subscribeToState(() => {
             this.updateSubscription = this.validateAndUpdate().subscribe();
-          }
-        })
-      );
-    }
+          })
+        );
+      }
+    };
+    this.addActivationHandler(this._onActivate);
   }
   deactivate() {
     super.deactivate();
@@ -2412,25 +2439,25 @@ function queryMetricTree(query) {
   return queryTree(children, query.split("."), 0);
 }
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
 class TestVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$7({
+    super(__spreadValues$8({
       type: "custom",
       name: "Test",
       value: "Value",
@@ -2509,25 +2536,25 @@ function VariableValueInput({ model }) {
   });
 }
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
 class TextBoxVariable extends SceneObjectBase {
   constructor(initialState) {
-    super(__spreadValues$6({
+    super(__spreadValues$7({
       type: "textbox",
       value: "",
       name: ""
@@ -2689,19 +2716,20 @@ function isUrlValueEqual(currentUrlValue, newUrlValue) {
 }
 
 class EmbeddedScene extends SceneObjectBase {
+  constructor(state) {
+    super(state);
+    this.addActivationHandler(() => {
+      return () => {
+        if (this.urlSyncManager) {
+          this.urlSyncManager.cleanUp();
+        }
+      };
+    });
+  }
   initUrlSync() {
     this.urlSyncManager = new UrlSyncManager(this);
     this.urlSyncManager.initSync();
   }
-  activate() {
-    super.activate();
-  }
-  deactivate() {
-    super.deactivate();
-    if (this.urlSyncManager) {
-      this.urlSyncManager.cleanUp();
-    }
-  }
 }
 EmbeddedScene.Component = EmbeddedSceneRenderer;
 function EmbeddedSceneRenderer({ model }) {
@@ -2756,17 +2784,18 @@ function VizPanelRenderer({ model }) {
     $data,
     placement,
     displayMode,
-    hoverHeader
+    hoverHeader,
+    menu
   } = model.useState();
   const [ref, { width, height }] = reactUse.useMeasure();
   const plugin = model.getPlugin();
-  const { data: data$1 } = sceneGraph.getData(model).useState();
   const parentLayout = sceneGraph.getLayout(model);
   const isDraggable = parentLayout.isDraggable() && ((_a = placement == null ? void 0 : placement.isDraggable) != null ? _a : true);
   const dragClass = isDraggable && parentLayout.getDragClass ? parentLayout.getDragClass() : "";
   const dragClassCancel = isDraggable && parentLayout.getDragClassCancel ? parentLayout.getDragClassCancel() : "";
   const titleInterpolated = model.interpolate(title, void 0, "text");
   const timeZone = sceneGraph.getTimeRange(model).state.timeZone;
+  const { data: data$1 } = sceneGraph.getData(model).useState();
   const dataWithOverrides = data.useFieldOverrides(plugin, fieldConfig, data$1, timeZone, theme, model.interpolate);
   if (pluginLoadError) {
     return /* @__PURE__ */ React__default["default"].createElement("div", null, "Failed to load plugin: ", pluginLoadError);
@@ -2787,6 +2816,12 @@ function VizPanelRenderer({ model }) {
       model: model.state.$timeRange
     }));
   }
+  let panelMenu;
+  if (menu) {
+    panelMenu = /* @__PURE__ */ React__default["default"].createElement(menu.Component, {
+      model: menu
+    });
+  }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     ref,
     style: { position: "absolute", width: "100%", height: "100%" }
@@ -2801,7 +2836,8 @@ function VizPanelRenderer({ model }) {
     hoverHeader,
     titleItems,
     dragClass,
-    dragClassCancel
+    dragClassCancel,
+    menu: panelMenu
   }, (innerWidth, innerHeight) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, !dataWithOverrides && /* @__PURE__ */ React__default["default"].createElement("div", null, "No data..."), dataWithOverrides && /* @__PURE__ */ React__default["default"].createElement(ui.ErrorBoundaryAlert, {
     dependencies: [plugin, data$1]
   }, /* @__PURE__ */ React__default["default"].createElement(data.PluginContextProvider, {
@@ -2827,25 +2863,25 @@ function VizPanelRenderer({ model }) {
 }
 VizPanelRenderer.displayName = "ScenePanelRenderer";
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
 class VizPanel extends SceneObjectBase {
   constructor(state) {
-    super(__spreadValues$5({
+    super(__spreadValues$6({
       options: {},
       fieldConfig: { defaults: {}, overrides: [] },
       title: "Title",
@@ -2918,21 +2954,57 @@ class VizPanel extends SceneObjectBase {
 }
 VizPanel.Component = VizPanelRenderer;
 
-var __defProp$4 = Object.defineProperty;
+class VizPanelMenu extends SceneObjectBase {
+  addItem(item) {
+    this.setState({
+      items: this.state.items ? [...this.state.items, item] : [item]
+    });
+  }
+  setItems(items) {
+    this.setState({
+      items
+    });
+  }
+}
+VizPanelMenu.Component = VizPanelMenuRenderer;
+function VizPanelMenuRenderer({ model }) {
+  const { items } = model.useState();
+  const renderItems = (items2) => {
+    return items2.map(
+      (item) => item.type === "divider" ? /* @__PURE__ */ React__default["default"].createElement(ui.Menu.Divider, {
+        key: item.text
+      }) : /* @__PURE__ */ React__default["default"].createElement(ui.Menu.Item, {
+        key: item.text,
+        label: item.text,
+        icon: item.iconClassName,
+        childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
+        url: item.href,
+        onClick: item.onClick,
+        shortcut: item.shortcut
+      })
+    );
+  };
+  if (!items) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Menu, null, renderItems(items));
+}
+
+var __defProp$5 = Object.defineProperty;
 var __defProps$3 = Object.defineProperties;
 var __getOwnPropDescs$3 = 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 __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
@@ -2943,7 +3015,7 @@ class NestedScene extends SceneObjectBase {
     this.onToggle = () => {
       this.setState({
         isCollapsed: !this.state.isCollapsed,
-        placement: __spreadProps$3(__spreadValues$4({}, this.state.placement), {
+        placement: __spreadProps$3(__spreadValues$5({}, this.state.placement), {
           ySizing: this.state.isCollapsed ? "fill" : "content"
         })
       });
@@ -3113,21 +3185,21 @@ function SceneTimePickerRenderer({ model }) {
   });
 }
 
-var __defProp$3 = Object.defineProperty;
+var __defProp$4 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
@@ -3136,7 +3208,7 @@ const DEFAULT_INTERVALS = ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "
 class SceneRefreshPicker extends SceneObjectBase {
   constructor(state) {
     var _a;
-    super(__spreadProps$2(__spreadValues$3({
+    super(__spreadProps$2(__spreadValues$4({
       refresh: ""
     }, state), {
       intervals: (_a = state.intervals) != null ? _a : DEFAULT_INTERVALS
@@ -3171,15 +3243,14 @@ class SceneRefreshPicker extends SceneObjectBase {
         timeRange.onRefresh();
       }, intervalMs);
     };
-  }
-  activate() {
-    super.activate();
-    this.setupIntervalTimer();
-  }
-  deactivate() {
-    if (this._intervalTimer) {
-      clearInterval(this._intervalTimer);
-    }
+    this.addActivationHandler(() => {
+      this.setupIntervalTimer();
+      return () => {
+        if (this._intervalTimer) {
+          clearInterval(this._intervalTimer);
+        }
+      };
+    });
   }
   getUrlState() {
     return {
@@ -3208,18 +3279,18 @@ function SceneRefreshPickerRenderer({ model }) {
 }
 
 class SceneByFrameRepeater extends SceneObjectBase {
-  activate() {
-    super.activate();
-    this._subs.add(
-      sceneGraph.getData(this).subscribeToState({
-        next: (data$1) => {
+  constructor(state) {
+    super(state);
+    this.addActivationHandler(() => {
+      this._subs.add(
+        sceneGraph.getData(this).subscribeToState((data$1) => {
           var _a;
           if (((_a = data$1.data) == null ? void 0 : _a.state) === data.LoadingState.Done) {
             this.performRepeat(data$1.data);
           }
-        }
-      })
-    );
+        })
+      );
+    });
   }
   performRepeat(data) {
     const newChildren = [];
@@ -3361,31 +3432,31 @@ function SceneDragHandle({ className, dragClass }) {
   }));
 }
 
-var __defProp$2 = Object.defineProperty;
+var __defProp$3 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 class SceneGridRow extends SceneObjectBase {
   constructor(state) {
-    super(__spreadProps$1(__spreadValues$2({
+    super(__spreadProps$1(__spreadValues$3({
       isCollapsible: true
     }, state), {
-      placement: __spreadProps$1(__spreadValues$2({
+      placement: __spreadProps$1(__spreadValues$3({
         isResizable: false,
         isDraggable: true
       }, state.placement), {
@@ -3478,28 +3549,28 @@ const getSceneGridRowStyles = (theme) => {
   };
 };
 
-var __defProp$1 = Object.defineProperty;
+var __defProp$2 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 class SceneGridLayout extends SceneObjectBase {
   constructor(state) {
-    super(__spreadProps(__spreadValues$1({}, state), {
+    super(__spreadProps(__spreadValues$2({}, state), {
       isDraggable: true,
       placement: state.placement,
       children: sortChildrenByPosition(state.children)
@@ -3520,7 +3591,7 @@ class SceneGridLayout extends SceneObjectBase {
         };
         if (!isItemSizeEqual(child.state.placement, nextSize)) {
           child.setState({
-            placement: __spreadValues$1(__spreadValues$1({}, child.state.placement), nextSize)
+            placement: __spreadValues$2(__spreadValues$2({}, child.state.placement), nextSize)
           });
         }
       }
@@ -3529,7 +3600,7 @@ class SceneGridLayout extends SceneObjectBase {
     this.onResizeStop = (_, o, n) => {
       const child = this.getSceneLayoutChild(n.i);
       child.setState({
-        placement: __spreadProps(__spreadValues$1({}, child.state.placement), {
+        placement: __spreadProps(__spreadValues$2({}, child.state.placement), {
           width: n.w,
           height: n.h
         })
@@ -3544,7 +3615,7 @@ class SceneGridLayout extends SceneObjectBase {
         const childSize = child.state.placement;
         if ((childSize == null ? void 0 : childSize.x) !== gridItem.x || (childSize == null ? void 0 : childSize.y) !== gridItem.y) {
           child.setState({
-            placement: __spreadProps(__spreadValues$1({}, child.state.placement), {
+            placement: __spreadProps(__spreadValues$2({}, child.state.placement), {
               x: gridItem.x,
               y: gridItem.y
             })
@@ -3590,7 +3661,7 @@ class SceneGridLayout extends SceneObjectBase {
     const yDiff = firstPanelYPos - (rowY + 1);
     let yMax = rowY;
     for (const panel of rowChildren) {
-      const newSize = __spreadValues$1({}, panel.state.placement);
+      const newSize = __spreadValues$2({}, panel.state.placement);
       newSize.y = (_d = newSize.y) != null ? _d : rowY;
       newSize.y -= yDiff;
       if (newSize.y > ((_e = panel.state.placement) == null ? void 0 : _e.y)) {
@@ -3632,7 +3703,7 @@ class SceneGridLayout extends SceneObjectBase {
   pushChildDown(child, amount) {
     var _a;
     child.setState({
-      placement: __spreadProps(__spreadValues$1({}, child.state.placement), {
+      placement: __spreadProps(__spreadValues$2({}, child.state.placement), {
         y: ((_a = child.state.placement) == null ? void 0 : _a.y) + amount
       })
     });
@@ -3700,7 +3771,7 @@ class SceneGridLayout extends SceneObjectBase {
     cells = sortGridLayout(cells);
     if (width < 768) {
       this._skipOnLayoutChange = true;
-      return cells.map((cell) => __spreadProps(__spreadValues$1({}, cell), { w: 24 }));
+      return cells.map((cell) => __spreadProps(__spreadValues$2({}, cell), { w: 24 }));
     }
     this._skipOnLayoutChange = false;
     return cells;
@@ -3783,19 +3854,19 @@ SceneApp.Component = ({ model }) => {
   })));
 };
 
-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) => {
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
@@ -3804,7 +3875,7 @@ function useAppQueryParams() {
   return runtime.locationSearchToObject(location.search || "");
 }
 function getLinkUrlWithAppUrlState(path, params, preserveParams) {
-  const paramsCopy = __spreadValues({}, params);
+  const paramsCopy = __spreadValues$1({}, params);
   if (preserveParams) {
     for (const key of Object.keys(paramsCopy)) {
       if (!preserveParams.includes(key)) {
@@ -3958,6 +4029,35 @@ function getParentBreadcrumbs(parent, params) {
   return void 0;
 }
 
+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;
+};
+
 exports.ConstantVariable = ConstantVariable;
 exports.CustomVariable = CustomVariable;
 exports.DataSourceVariable = DataSourceVariable;
@@ -3979,6 +4079,7 @@ exports.SceneObjectBase = SceneObjectBase;
 exports.SceneObjectStateChangedEvent = SceneObjectStateChangedEvent;
 exports.SceneObjectUrlSyncConfig = SceneObjectUrlSyncConfig;
 exports.SceneQueryRunner = SceneQueryRunner;
+exports.SceneReactObject = SceneReactObject;
 exports.SceneRefreshPicker = SceneRefreshPicker;
 exports.SceneTimePicker = SceneTimePicker;
 exports.SceneTimeRange = SceneTimeRange;
@@ -3992,6 +4093,7 @@ exports.UrlSyncManager = UrlSyncManager;
 exports.VariableDependencyConfig = VariableDependencyConfig;
 exports.VariableValueSelectors = VariableValueSelectors;
 exports.VizPanel = VizPanel;
+exports.VizPanelMenu = VizPanelMenu;
 exports.formatRegistry = formatRegistry;
 exports.isSceneObject = isSceneObject;
 exports.sceneGraph = sceneGraph;