@grafana/scenes 0.0.13 → 0.0.15

package/dist/esm/components/EmbeddedScene.js

@@ -41,7 +41,7 @@ function getStyles(theme) {
     container: css({
       flexGrow: 1,
       display: "flex",
-      gap: "8px",
+      gap: theme.spacing(2),
       minHeight: "100%",
       flexDirection: "column"
     }),
@@ -53,7 +53,8 @@ function getStyles(theme) {
     controls: css({
       display: "flex",
       gap: theme.spacing(1),
-      alignItems: "center"
+      alignItems: "center",
+      flexWrap: "wrap"
     })
   };
 }

package/dist/esm/components/EmbeddedScene.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmbeddedScene.js","sources":["../../../src/components/EmbeddedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectStatePlain, SceneObject } from '../core/types';\nimport { UrlSyncManager } from '../services/UrlSyncManager';\n\nexport interface EmbeddedSceneState extends SceneObjectStatePlain {\n  /**\n   * The main content of the scene (usually a SceneFlexLayout)\n   */\n  body: SceneObject;\n  /**\n   * Top row of variable selectors, filters, time pickers and custom actions.\n   */\n  controls?: SceneObject[];\n}\n\nexport class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {\n  public static Component = EmbeddedSceneRenderer;\n\n  private urlSyncManager?: UrlSyncManager;\n\n  /**\n   * initUrlSync should be called before the scene is rendered to ensure that objects are in sync\n   * before they get activated. This saves some unnecessary re-renders and makes sure variables\n   * queries are issued as needed.\n   */\n  public initUrlSync() {\n    this.urlSyncManager = new UrlSyncManager(this);\n    this.urlSyncManager.initSync();\n  }\n\n  public activate() {\n    super.activate();\n  }\n\n  public deactivate() {\n    super.deactivate();\n    if (this.urlSyncManager) {\n      this.urlSyncManager!.cleanUp();\n    }\n  }\n}\n\nfunction EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>) {\n  const { body, controls } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.container}>\n      {controls && (\n        <div className={styles.controls}>\n          {controls.map((control) => (\n            <control.Component key={control.state.key} model={control} />\n          ))}\n        </div>\n      )}\n      <div className={styles.body}>\n        <body.Component model={body} />\n      </div>\n    </div>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    container: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: '8px',\n      minHeight: '100%',\n      flexDirection: 'column',\n    }),\n    body: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: '8px',\n    }),\n    controls: css({\n      display: 'flex',\n      gap: theme.spacing(1),\n      alignItems: 'center',\n    }),\n  };\n}\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,sBAAsB,eAAoC,CAAA;AAAA,EAU9D,WAAc,GAAA;AACnB,IAAK,IAAA,CAAA,cAAA,GAAiB,IAAI,cAAA,CAAe,IAAI,CAAA,CAAA;AAC7C,IAAA,IAAA,CAAK,eAAe,QAAS,EAAA,CAAA;AAAA,GAC/B;AAAA,EAEO,QAAW,GAAA;AAChB,IAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAAA,GACjB;AAAA,EAEO,UAAa,GAAA;AAClB,IAAA,KAAA,CAAM,UAAW,EAAA,CAAA;AACjB,IAAA,IAAI,KAAK,cAAgB,EAAA;AACvB,MAAA,IAAA,CAAK,eAAgB,OAAQ,EAAA,CAAA;AAAA,KAC/B;AAAA,GACF;AACF,CAAA;AAzBa,aAAA,CACG,SAAY,GAAA,qBAAA,CAAA;AA0B5B,SAAS,qBAAA,CAAsB,EAAE,KAAA,EAA6C,EAAA;AAC5E,EAAA,MAAM,EAAE,IAAA,EAAM,QAAS,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAC1C,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AAEnC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,SAAA;AAAA,GAAA,EACpB,4BACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,QAAA;AAAA,GAAA,EACpB,SAAS,GAAI,CAAA,CAAC,OACb,qBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,SAAR,EAAA;AAAA,IAAkB,GAAA,EAAK,QAAQ,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,OAAA;AAAA,GAAS,CAC5D,CACH,CAAA,kBAED,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,IAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAC/B,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,KAAA;AAAA,MACL,SAAW,EAAA,MAAA;AAAA,MACX,aAAe,EAAA,QAAA;AAAA,KAChB,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,KAAA;AAAA,KACN,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,UAAY,EAAA,QAAA;AAAA,KACb,CAAA;AAAA,GACH,CAAA;AACF;;;;"}
+{"version":3,"file":"EmbeddedScene.js","sources":["../../../src/components/EmbeddedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectStatePlain, SceneObject } from '../core/types';\nimport { UrlSyncManager } from '../services/UrlSyncManager';\n\nexport interface EmbeddedSceneState extends SceneObjectStatePlain {\n  /**\n   * The main content of the scene (usually a SceneFlexLayout)\n   */\n  body: SceneObject;\n  /**\n   * Top row of variable selectors, filters, time pickers and custom actions.\n   */\n  controls?: SceneObject[];\n}\n\nexport class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {\n  public static Component = EmbeddedSceneRenderer;\n\n  private urlSyncManager?: UrlSyncManager;\n\n  /**\n   * initUrlSync should be called before the scene is rendered to ensure that objects are in sync\n   * before they get activated. This saves some unnecessary re-renders and makes sure variables\n   * queries are issued as needed.\n   */\n  public initUrlSync() {\n    this.urlSyncManager = new UrlSyncManager(this);\n    this.urlSyncManager.initSync();\n  }\n\n  public activate() {\n    super.activate();\n  }\n\n  public deactivate() {\n    super.deactivate();\n    if (this.urlSyncManager) {\n      this.urlSyncManager!.cleanUp();\n    }\n  }\n}\n\nfunction EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>) {\n  const { body, controls } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.container}>\n      {controls && (\n        <div className={styles.controls}>\n          {controls.map((control) => (\n            <control.Component key={control.state.key} model={control} />\n          ))}\n        </div>\n      )}\n      <div className={styles.body}>\n        <body.Component model={body} />\n      </div>\n    </div>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    container: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: theme.spacing(2),\n      minHeight: '100%',\n      flexDirection: 'column',\n    }),\n    body: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: '8px',\n    }),\n    controls: css({\n      display: 'flex',\n      gap: theme.spacing(1),\n      alignItems: 'center',\n      flexWrap: 'wrap',\n    }),\n  };\n}\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,sBAAsB,eAAoC,CAAA;AAAA,EAU9D,WAAc,GAAA;AACnB,IAAK,IAAA,CAAA,cAAA,GAAiB,IAAI,cAAA,CAAe,IAAI,CAAA,CAAA;AAC7C,IAAA,IAAA,CAAK,eAAe,QAAS,EAAA,CAAA;AAAA,GAC/B;AAAA,EAEO,QAAW,GAAA;AAChB,IAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAAA,GACjB;AAAA,EAEO,UAAa,GAAA;AAClB,IAAA,KAAA,CAAM,UAAW,EAAA,CAAA;AACjB,IAAA,IAAI,KAAK,cAAgB,EAAA;AACvB,MAAA,IAAA,CAAK,eAAgB,OAAQ,EAAA,CAAA;AAAA,KAC/B;AAAA,GACF;AACF,CAAA;AAzBa,aAAA,CACG,SAAY,GAAA,qBAAA,CAAA;AA0B5B,SAAS,qBAAA,CAAsB,EAAE,KAAA,EAA6C,EAAA;AAC5E,EAAA,MAAM,EAAE,IAAA,EAAM,QAAS,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAC1C,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AAEnC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,SAAA;AAAA,GAAA,EACpB,4BACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,QAAA;AAAA,GAAA,EACpB,SAAS,GAAI,CAAA,CAAC,OACb,qBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,SAAR,EAAA;AAAA,IAAkB,GAAA,EAAK,QAAQ,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,OAAA;AAAA,GAAS,CAC5D,CACH,CAAA,kBAED,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,IAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAC/B,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,SAAW,EAAA,MAAA;AAAA,MACX,aAAe,EAAA,QAAA;AAAA,KAChB,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,KAAA;AAAA,KACN,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,UAAY,EAAA,QAAA;AAAA,MACZ,QAAU,EAAA,MAAA;AAAA,KACX,CAAA;AAAA,GACH,CAAA;AACF;;;;"}

package/dist/esm/components/SceneApp/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/SceneApp/utils.ts"],"sourcesContent":["import { useLocation } from 'react-router-dom';\n\nimport { UrlQueryMap, urlUtil } from '@grafana/data';\nimport { locationSearchToObject } from '@grafana/runtime';\n\nexport function useAppQueryParams() {\n  const location = useLocation();\n  return locationSearchToObject(location.search || '');\n}\n\nexport function getLinkUrlWithAppUrlState(path: string, params: UrlQueryMap, preserveParams?: string[]): string {\n  // make a copy of params as the renderUrl function mutates the object\n  const paramsCopy = { ...params };\n\n  if (preserveParams) {\n    for (const key of Object.keys(paramsCopy)) {\n      // if param is not in preserveParams, remove it\n      if (!preserveParams.includes(key)) {\n        delete paramsCopy[key];\n      }\n    }\n  }\n\n  return urlUtil.renderUrl(path, paramsCopy);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAKO,SAAS,iBAAoB,GAAA;AAClC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAO,OAAA,sBAAA,CAAuB,QAAS,CAAA,MAAA,IAAU,EAAE,CAAA,CAAA;AACrD,CAAA;AAEgB,SAAA,yBAAA,CAA0B,IAAc,EAAA,MAAA,EAAqB,cAAmC,EAAA;AAE9G,EAAA,MAAM,aAAa,cAAK,CAAA,EAAA,EAAA,MAAA,CAAA,CAAA;AAExB,EAAA,IAAI,cAAgB,EAAA;AAClB,IAAA,KAAA,MAAW,GAAO,IAAA,MAAA,CAAO,IAAK,CAAA,UAAU,CAAG,EAAA;AAEzC,MAAA,IAAI,CAAC,cAAA,CAAe,QAAS,CAAA,GAAG,CAAG,EAAA;AACjC,QAAA,OAAO,UAAW,CAAA,GAAA,CAAA,CAAA;AAAA,OACpB;AAAA,KACF;AAAA,GACF;AAEA,EAAO,OAAA,OAAA,CAAQ,SAAU,CAAA,IAAA,EAAM,UAAU,CAAA,CAAA;AAC3C;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/SceneApp/utils.ts"],"sourcesContent":["import { useLocation } from 'react-router-dom';\n\nimport { UrlQueryMap, urlUtil } from '@grafana/data';\nimport { locationSearchToObject } from '@grafana/runtime';\n\nexport function useAppQueryParams(): UrlQueryMap {\n  const location = useLocation();\n  return locationSearchToObject(location.search || '');\n}\n\nexport function getLinkUrlWithAppUrlState(path: string, params: UrlQueryMap, preserveParams?: string[]): string {\n  // make a copy of params as the renderUrl function mutates the object\n  const paramsCopy = { ...params };\n\n  if (preserveParams) {\n    for (const key of Object.keys(paramsCopy)) {\n      // if param is not in preserveParams, remove it\n      if (!preserveParams.includes(key)) {\n        delete paramsCopy[key];\n      }\n    }\n  }\n\n  return urlUtil.renderUrl(path, paramsCopy);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAKO,SAAS,iBAAiC,GAAA;AAC/C,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAO,OAAA,sBAAA,CAAuB,QAAS,CAAA,MAAA,IAAU,EAAE,CAAA,CAAA;AACrD,CAAA;AAEgB,SAAA,yBAAA,CAA0B,IAAc,EAAA,MAAA,EAAqB,cAAmC,EAAA;AAE9G,EAAA,MAAM,aAAa,cAAK,CAAA,EAAA,EAAA,MAAA,CAAA,CAAA;AAExB,EAAA,IAAI,cAAgB,EAAA;AAClB,IAAA,KAAA,MAAW,GAAO,IAAA,MAAA,CAAO,IAAK,CAAA,UAAU,CAAG,EAAA;AAEzC,MAAA,IAAI,CAAC,cAAA,CAAe,QAAS,CAAA,GAAG,CAAG,EAAA;AACjC,QAAA,OAAO,UAAW,CAAA,GAAA,CAAA,CAAA;AAAA,OACpB;AAAA,KACF;AAAA,GACF;AAEA,EAAO,OAAA,OAAA,CAAQ,SAAU,CAAA,IAAA,EAAM,UAAU,CAAA,CAAA;AAC3C;;;;"}

package/dist/esm/components/SceneRefreshPicker.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { rangeUtil } from '@grafana/data';
+import { RefreshPicker } from '@grafana/ui';
+import { SceneObjectBase } from '../core/SceneObjectBase.js';
+import { sceneGraph } from '../core/sceneGraph.js';
+import { SceneObjectUrlSyncConfig } from '../services/SceneObjectUrlSyncConfig.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const DEFAULT_INTERVALS = ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"];
+class SceneRefreshPicker extends SceneObjectBase {
+  constructor(state) {
+    var _a;
+    super(__spreadProps(__spreadValues({
+      refresh: ""
+    }, state), {
+      intervals: (_a = state.intervals) != null ? _a : DEFAULT_INTERVALS
+    }));
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["refresh"] });
+    this.onRefresh = () => {
+      const timeRange = sceneGraph.getTimeRange(this);
+      if (this._intervalTimer) {
+        clearInterval(this._intervalTimer);
+      }
+      timeRange.onRefresh();
+      this.setupIntervalTimer();
+    };
+    this.onIntervalChanged = (interval) => {
+      this.setState({ refresh: interval });
+      this.setupIntervalTimer();
+    };
+    this.setupIntervalTimer = () => {
+      const timeRange = sceneGraph.getTimeRange(this);
+      const { refresh, intervals } = this.state;
+      if (this._intervalTimer || refresh === "") {
+        clearInterval(this._intervalTimer);
+      }
+      if (refresh === "") {
+        return;
+      }
+      if (intervals && !intervals.includes(refresh)) {
+        return;
+      }
+      const intervalMs = rangeUtil.intervalToMs(refresh);
+      this._intervalTimer = setInterval(() => {
+        timeRange.onRefresh();
+      }, intervalMs);
+    };
+  }
+  activate() {
+    super.activate();
+    this.setupIntervalTimer();
+  }
+  deactivate() {
+    if (this._intervalTimer) {
+      clearInterval(this._intervalTimer);
+    }
+  }
+  getUrlState() {
+    return {
+      refresh: this.state.refresh
+    };
+  }
+  updateFromUrl(values) {
+    const refresh = values.refresh;
+    if (refresh && typeof refresh === "string") {
+      this.setState({
+        refresh
+      });
+    }
+  }
+}
+SceneRefreshPicker.Component = SceneRefreshPickerRenderer;
+function SceneRefreshPickerRenderer({ model }) {
+  const { refresh, intervals } = model.useState();
+  return /* @__PURE__ */ React.createElement(RefreshPicker, {
+    value: refresh,
+    intervals,
+    onRefresh: model.onRefresh,
+    onIntervalChanged: model.onIntervalChanged
+  });
+}
+
+export { DEFAULT_INTERVALS, SceneRefreshPicker, SceneRefreshPickerRenderer };
+//# sourceMappingURL=SceneRefreshPicker.js.map

package/dist/esm/components/SceneRefreshPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneRefreshPicker.js","sources":["../../../src/components/SceneRefreshPicker.tsx"],"sourcesContent":["import React from 'react';\n\nimport { rangeUtil } from '@grafana/data';\nimport { RefreshPicker } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObjectStatePlain, SceneObjectUrlValues } from '../core/types';\nimport { SceneObjectUrlSyncConfig } from '../services/SceneObjectUrlSyncConfig';\n\nexport const DEFAULT_INTERVALS = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];\n\nexport interface SceneRefreshPickerState extends SceneObjectStatePlain {\n  // Refresh interval, e.g. 5s, 1m, 2h\n  refresh: string;\n  // List of allowed refresh intervals, e.g. ['5s', '1m']\n  intervals?: string[];\n  isOnCanvas?: boolean;\n}\n\nexport class SceneRefreshPicker extends SceneObjectBase<SceneRefreshPickerState> {\n  public static Component = SceneRefreshPickerRenderer;\n  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['refresh'] });\n\n  private _intervalTimer: ReturnType<typeof setInterval> | undefined;\n\n  public constructor(state: Partial<SceneRefreshPickerState>) {\n    super({\n      refresh: '',\n      ...state,\n      intervals: state.intervals ?? DEFAULT_INTERVALS,\n    });\n  }\n\n  public activate(): void {\n    super.activate();\n    this.setupIntervalTimer();\n  }\n\n  public deactivate(): void {\n    if (this._intervalTimer) {\n      clearInterval(this._intervalTimer);\n    }\n  }\n\n  public onRefresh = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    if (this._intervalTimer) {\n      clearInterval(this._intervalTimer);\n    }\n\n    timeRange.onRefresh();\n    this.setupIntervalTimer();\n  };\n\n  public onIntervalChanged = (interval: string) => {\n    this.setState({ refresh: interval });\n    this.setupIntervalTimer();\n  };\n\n  public getUrlState() {\n    return {\n      refresh: this.state.refresh,\n    };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    const refresh = values.refresh;\n\n    if (refresh && typeof refresh === 'string') {\n      this.setState({\n        refresh,\n      });\n    }\n  }\n\n  private setupIntervalTimer = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    const { refresh, intervals } = this.state;\n\n    if (this._intervalTimer || refresh === '') {\n      clearInterval(this._intervalTimer);\n    }\n\n    if (refresh === '') {\n      return;\n    }\n\n    //  When the provided interval is not allowed\n    if (intervals && !intervals.includes(refresh)) {\n      return;\n    }\n\n    const intervalMs = rangeUtil.intervalToMs(refresh);\n\n    this._intervalTimer = setInterval(() => {\n      timeRange.onRefresh();\n    }, intervalMs);\n  };\n}\n\nexport function SceneRefreshPickerRenderer({ model }: SceneComponentProps<SceneRefreshPicker>) {\n  const { refresh, intervals } = model.useState();\n\n  return (\n    <RefreshPicker\n      value={refresh}\n      intervals={intervals}\n      onRefresh={model.onRefresh}\n      onIntervalChanged={model.onIntervalChanged}\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/SceneTimePicker.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ToolbarButtonRow, TimeRangePicker, RefreshPicker } from '@grafana/ui';
+import { TimeRangePicker } from '@grafana/ui';
 import { SceneObjectBase } from '../core/SceneObjectBase.js';
 import { sceneGraph } from '../core/sceneGraph.js';
 
@@ -13,9 +13,7 @@ function SceneTimePickerRenderer({ model }) {
   if (hidePicker) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(ToolbarButtonRow, {
-    alignment: "right"
-  }, /* @__PURE__ */ React.createElement(TimeRangePicker, {
+  return /* @__PURE__ */ React.createElement(TimeRangePicker, {
     isOnCanvas,
     value: timeRangeState.value,
     onChange: timeRange.onTimeRangeChange,
@@ -31,11 +29,7 @@ function SceneTimePickerRenderer({ model }) {
     },
     onChangeFiscalYearStartMonth: () => {
     }
-  }), /* @__PURE__ */ React.createElement(RefreshPicker, {
-    onRefresh: timeRange.onRefresh,
-    onIntervalChanged: () => {
-    }
-  }));
+  });
 }
 
 export { SceneTimePicker };

package/dist/esm/components/SceneTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneTimePicker.js","sources":["../../../src/components/SceneTimePicker.tsx"],"sourcesContent":["import React from 'react';\n\nimport { RefreshPicker, TimeRangePicker, ToolbarButtonRow } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObjectStatePlain } from '../core/types';\n\nexport interface SceneTimePickerState extends SceneObjectStatePlain {\n  hidePicker?: boolean;\n  isOnCanvas?: boolean;\n}\n\nexport class SceneTimePicker extends SceneObjectBase<SceneTimePickerState> {\n  public static Component = SceneTimePickerRenderer;\n}\n\nfunction SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTimePicker>) {\n  const { hidePicker, isOnCanvas } = model.useState();\n  const timeRange = sceneGraph.getTimeRange(model);\n  const timeRangeState = timeRange.useState();\n\n  if (hidePicker) {\n    return null;\n  }\n\n  return (\n    <ToolbarButtonRow alignment=\"right\">\n      <TimeRangePicker\n        isOnCanvas={isOnCanvas}\n        value={timeRangeState.value}\n        onChange={timeRange.onTimeRangeChange}\n        timeZone={'browser'}\n        fiscalYearStartMonth={0}\n        onMoveBackward={() => {}}\n        onMoveForward={() => {}}\n        onZoom={() => {}}\n        onChangeTimeZone={() => {}}\n        onChangeFiscalYearStartMonth={() => {}}\n      />\n      <RefreshPicker onRefresh={timeRange.onRefresh} onIntervalChanged={() => {}} />\n    </ToolbarButtonRow>\n  );\n}\n"],"names":[],"mappings":";;;;;AAaO,MAAM,wBAAwB,eAAsC,CAAA;AAE3E,CAAA;AAFa,eAAA,CACG,SAAY,GAAA,uBAAA,CAAA;AAG5B,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAA+C,EAAA;AAChF,EAAA,MAAM,EAAE,UAAA,EAAY,UAAW,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAClD,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAC/C,EAAM,MAAA,cAAA,GAAiB,UAAU,QAAS,EAAA,CAAA;AAE1C,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAA,IAAiB,SAAU,EAAA,OAAA;AAAA,GAAA,kBACzB,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,IACC,UAAA;AAAA,IACA,OAAO,cAAe,CAAA,KAAA;AAAA,IACtB,UAAU,SAAU,CAAA,iBAAA;AAAA,IACpB,QAAU,EAAA,SAAA;AAAA,IACV,oBAAsB,EAAA,CAAA;AAAA,IACtB,gBAAgB,MAAM;AAAA,KAAC;AAAA,IACvB,eAAe,MAAM;AAAA,KAAC;AAAA,IACtB,QAAQ,MAAM;AAAA,KAAC;AAAA,IACf,kBAAkB,MAAM;AAAA,KAAC;AAAA,IACzB,8BAA8B,MAAM;AAAA,KAAC;AAAA,GACvC,mBACC,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,WAAW,SAAU,CAAA,SAAA;AAAA,IAAW,mBAAmB,MAAM;AAAA,KAAC;AAAA,GAAG,CAC9E,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SceneTimePicker.js","sources":["../../../src/components/SceneTimePicker.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TimeRangePicker } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObjectStatePlain } from '../core/types';\n\nexport interface SceneTimePickerState extends SceneObjectStatePlain {\n  hidePicker?: boolean;\n  isOnCanvas?: boolean;\n}\n\nexport class SceneTimePicker extends SceneObjectBase<SceneTimePickerState> {\n  public static Component = SceneTimePickerRenderer;\n}\n\nfunction SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTimePicker>) {\n  const { hidePicker, isOnCanvas } = model.useState();\n  const timeRange = sceneGraph.getTimeRange(model);\n  const timeRangeState = timeRange.useState();\n\n  if (hidePicker) {\n    return null;\n  }\n\n  return (\n    <TimeRangePicker\n      isOnCanvas={isOnCanvas}\n      value={timeRangeState.value}\n      onChange={timeRange.onTimeRangeChange}\n      timeZone={'browser'}\n      fiscalYearStartMonth={0}\n      onMoveBackward={() => {}}\n      onMoveForward={() => {}}\n      onZoom={() => {}}\n      onChangeTimeZone={() => {}}\n      onChangeFiscalYearStartMonth={() => {}}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAaO,MAAM,wBAAwB,eAAsC,CAAA;AAE3E,CAAA;AAFa,eAAA,CACG,SAAY,GAAA,uBAAA,CAAA;AAG5B,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAA+C,EAAA;AAChF,EAAA,MAAM,EAAE,UAAA,EAAY,UAAW,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAClD,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAC/C,EAAM,MAAA,cAAA,GAAiB,UAAU,QAAS,EAAA,CAAA;AAE1C,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,IACC,UAAA;AAAA,IACA,OAAO,cAAe,CAAA,KAAA;AAAA,IACtB,UAAU,SAAU,CAAA,iBAAA;AAAA,IACpB,QAAU,EAAA,SAAA;AAAA,IACV,oBAAsB,EAAA,CAAA;AAAA,IACtB,gBAAgB,MAAM;AAAA,KAAC;AAAA,IACvB,eAAe,MAAM;AAAA,KAAC;AAAA,IACtB,QAAQ,MAAM;AAAA,KAAC;AAAA,IACf,kBAAkB,MAAM;AAAA,KAAC;AAAA,IACzB,8BAA8B,MAAM;AAAA,KAAC;AAAA,GACvC,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/components/VizPanel/VizPanel.js

@@ -49,6 +49,9 @@ class VizPanel extends SceneObjectBase {
     this.onFieldConfigChange = (fieldConfig) => {
       this.setState({ fieldConfig });
     };
+    this.interpolate = (value, scoped, format) => {
+      return sceneGraph.interpolate(this, value, scoped, format);
+    };
   }
   activate() {
     super.activate();

package/dist/esm/components/VizPanel/VizPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"VizPanel.js","sources":["../../../../src/components/VizPanel/VizPanel.tsx"],"sourcesContent":["import {\n  AbsoluteTimeRange,\n  FieldConfigSource,\n  PanelModel,\n  PanelPlugin,\n  toUtc,\n  getPanelOptionsWithDefaults,\n} from '@grafana/data';\nimport { config, getPluginImportUtils } from '@grafana/runtime';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { DeepPartial, SceneLayoutChildState } from '../../core/types';\n\nimport { VizPanelRenderer } from './VizPanelRenderer';\nimport { VariableDependencyConfig } from '../../variables/VariableDependencyConfig';\n\nexport interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneLayoutChildState {\n  title: string;\n  description?: string;\n  pluginId: string;\n  options: DeepPartial<TOptions>;\n  fieldConfig: FieldConfigSource<DeepPartial<TFieldConfig>>;\n  pluginVersion?: string;\n  // internal state\n  pluginLoadError?: string;\n}\n\nexport class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase<VizPanelState<TOptions, TFieldConfig>> {\n  public static Component = VizPanelRenderer;\n\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['title', 'options', 'fieldConfig'],\n  });\n\n  // Not part of state as this is not serializable\n  private _plugin?: PanelPlugin;\n\n  public constructor(state: Partial<VizPanelState<TOptions, TFieldConfig>>) {\n    super({\n      options: {},\n      fieldConfig: { defaults: {}, overrides: [] },\n      title: 'Title',\n      pluginId: 'timeseries',\n      ...state,\n    });\n  }\n\n  public activate() {\n    super.activate();\n    const { getPanelPluginFromCache, importPanelPlugin } = getPluginImportUtils();\n    const plugin = getPanelPluginFromCache(this.state.pluginId);\n\n    if (plugin) {\n      this.pluginLoaded(plugin);\n    } else {\n      importPanelPlugin(this.state.pluginId)\n        .then((result) => this.pluginLoaded(result))\n        .catch((err: Error) => {\n          this.setState({ pluginLoadError: err.message });\n        });\n    }\n  }\n\n  private pluginLoaded(plugin: PanelPlugin) {\n    const { options, fieldConfig, title, pluginId, pluginVersion } = this.state;\n\n    const panel: PanelModel = { title, options, fieldConfig, id: 1, type: pluginId, pluginVersion: pluginVersion };\n    const currentVersion = this.getPluginVersion(plugin);\n\n    if (plugin.onPanelMigration) {\n      if (currentVersion !== this.state.pluginVersion) {\n        // These migration handlers also mutate panel.fieldConfig to migrate fieldConfig\n        panel.options = plugin.onPanelMigration(panel);\n      }\n    }\n\n    const withDefaults = getPanelOptionsWithDefaults({\n      plugin,\n      currentOptions: panel.options,\n      currentFieldConfig: panel.fieldConfig,\n      isAfterPluginChange: false,\n    });\n\n    this._plugin = plugin;\n    this.setState({\n      options: withDefaults.options,\n      fieldConfig: withDefaults.fieldConfig,\n      pluginVersion: currentVersion,\n    });\n  }\n\n  private getPluginVersion(plugin: PanelPlugin): string {\n    return plugin && plugin.meta.info.version ? plugin.meta.info.version : config.buildInfo.version;\n  }\n\n  public getPlugin(): PanelPlugin | undefined {\n    return this._plugin;\n  }\n\n  public onChangeTimeRange = (timeRange: AbsoluteTimeRange) => {\n    const sceneTimeRange = sceneGraph.getTimeRange(this);\n    sceneTimeRange.onTimeRangeChange({\n      raw: {\n        from: toUtc(timeRange.from),\n        to: toUtc(timeRange.to),\n      },\n      from: toUtc(timeRange.from),\n      to: toUtc(timeRange.to),\n    });\n  };\n\n  public onOptionsChange = (options: TOptions) => {\n    this.setState({ options });\n  };\n\n  public onFieldConfigChange = (fieldConfig: FieldConfigSource<TFieldConfig>) => {\n    this.setState({ fieldConfig });\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"VizPanel.js","sources":["../../../../src/components/VizPanel/VizPanel.tsx"],"sourcesContent":["import {\n  AbsoluteTimeRange,\n  FieldConfigSource,\n  PanelModel,\n  PanelPlugin,\n  toUtc,\n  getPanelOptionsWithDefaults,\n  ScopedVars,\n  InterpolateFunction,\n} from '@grafana/data';\nimport { config, getPluginImportUtils } from '@grafana/runtime';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { DeepPartial, SceneLayoutChildState } from '../../core/types';\n\nimport { VizPanelRenderer } from './VizPanelRenderer';\nimport { VariableDependencyConfig } from '../../variables/VariableDependencyConfig';\nimport { CustomFormatterFn } from '../../variables/interpolation/sceneInterpolator';\n\nexport interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneLayoutChildState {\n  title: string;\n  description?: string;\n  pluginId: string;\n  options: DeepPartial<TOptions>;\n  fieldConfig: FieldConfigSource<DeepPartial<TFieldConfig>>;\n  pluginVersion?: string;\n  displayMode?: 'default' | 'transparent';\n  hoverHeader?: boolean;\n  // internal state\n  pluginLoadError?: string;\n}\n\nexport class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase<VizPanelState<TOptions, TFieldConfig>> {\n  public static Component = VizPanelRenderer;\n\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['title', 'options', 'fieldConfig'],\n  });\n\n  // Not part of state as this is not serializable\n  private _plugin?: PanelPlugin;\n\n  public constructor(state: Partial<VizPanelState<TOptions, TFieldConfig>>) {\n    super({\n      options: {},\n      fieldConfig: { defaults: {}, overrides: [] },\n      title: 'Title',\n      pluginId: 'timeseries',\n      ...state,\n    });\n  }\n\n  public activate() {\n    super.activate();\n    const { getPanelPluginFromCache, importPanelPlugin } = getPluginImportUtils();\n    const plugin = getPanelPluginFromCache(this.state.pluginId);\n\n    if (plugin) {\n      this.pluginLoaded(plugin);\n    } else {\n      importPanelPlugin(this.state.pluginId)\n        .then((result) => this.pluginLoaded(result))\n        .catch((err: Error) => {\n          this.setState({ pluginLoadError: err.message });\n        });\n    }\n  }\n\n  private pluginLoaded(plugin: PanelPlugin) {\n    const { options, fieldConfig, title, pluginId, pluginVersion } = this.state;\n\n    const panel: PanelModel = { title, options, fieldConfig, id: 1, type: pluginId, pluginVersion: pluginVersion };\n    const currentVersion = this.getPluginVersion(plugin);\n\n    if (plugin.onPanelMigration) {\n      if (currentVersion !== this.state.pluginVersion) {\n        // These migration handlers also mutate panel.fieldConfig to migrate fieldConfig\n        panel.options = plugin.onPanelMigration(panel);\n      }\n    }\n\n    const withDefaults = getPanelOptionsWithDefaults({\n      plugin,\n      currentOptions: panel.options,\n      currentFieldConfig: panel.fieldConfig,\n      isAfterPluginChange: false,\n    });\n\n    this._plugin = plugin;\n\n    this.setState({\n      options: withDefaults.options,\n      fieldConfig: withDefaults.fieldConfig,\n      pluginVersion: currentVersion,\n    });\n  }\n\n  private getPluginVersion(plugin: PanelPlugin): string {\n    return plugin && plugin.meta.info.version ? plugin.meta.info.version : config.buildInfo.version;\n  }\n\n  public getPlugin(): PanelPlugin | undefined {\n    return this._plugin;\n  }\n\n  public onChangeTimeRange = (timeRange: AbsoluteTimeRange) => {\n    const sceneTimeRange = sceneGraph.getTimeRange(this);\n    sceneTimeRange.onTimeRangeChange({\n      raw: {\n        from: toUtc(timeRange.from),\n        to: toUtc(timeRange.to),\n      },\n      from: toUtc(timeRange.from),\n      to: toUtc(timeRange.to),\n    });\n  };\n\n  public onOptionsChange = (options: TOptions) => {\n    this.setState({ options });\n  };\n\n  public onFieldConfigChange = (fieldConfig: FieldConfigSource<TFieldConfig>) => {\n    this.setState({ fieldConfig });\n  };\n\n  public interpolate = ((value: string, scoped?: ScopedVars, format?: string | CustomFormatterFn) => {\n    return sceneGraph.interpolate(this, value, scoped, format);\n  }) as InterpolateFunction;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/VizPanel/VizPanelRenderer.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useMeasure } from 'react-use';
 import { useFieldOverrides, PluginContextProvider } from '@grafana/data';
 import { getAppEvents } from '@grafana/runtime';
@@ -10,11 +10,18 @@ import { SceneDragHandle } from '../SceneDragHandle.js';
 function VizPanelRenderer({ model }) {
   var _a;
   const theme = useTheme2();
-  const replace = useMemo(
-    () => (value, scoped, format) => sceneGraph.interpolate(model, value, scoped, format),
-    [model]
-  );
-  const { title, description, options, fieldConfig, pluginId, pluginLoadError, $data, placement } = model.useState();
+  const {
+    title,
+    description,
+    options,
+    fieldConfig,
+    pluginId,
+    pluginLoadError,
+    $data,
+    placement,
+    displayMode,
+    hoverHeader
+  } = model.useState();
   const [ref, { width, height }] = useMeasure();
   const plugin = model.getPlugin();
   const { data } = sceneGraph.getData(model).useState();
@@ -23,9 +30,9 @@ function VizPanelRenderer({ model }) {
   const dragHandle = /* @__PURE__ */ React.createElement(SceneDragHandle, {
     layoutKey: parentLayout.state.key
   });
-  const titleInterpolated = replace(title, void 0, "text");
+  const titleInterpolated = model.interpolate(title, void 0, "text");
   const timeZone = sceneGraph.getTimeRange(model).state.timeZone;
-  const dataWithOverrides = useFieldOverrides(plugin, fieldConfig, data, timeZone, theme, replace);
+  const dataWithOverrides = useFieldOverrides(plugin, fieldConfig, data, timeZone, theme, model.interpolate);
   if (pluginLoadError) {
     return /* @__PURE__ */ React.createElement("div", null, "Failed to load plugin: ", pluginLoadError);
   }
@@ -50,11 +57,13 @@ function VizPanelRenderer({ model }) {
     style: { position: "absolute", width: "100%", height: "100%" }
   }, /* @__PURE__ */ React.createElement(PanelChrome, {
     title: titleInterpolated,
-    description: description ? () => replace(description) : "",
+    description: description ? () => model.interpolate(description) : "",
     loadingState: dataWithOverrides == null ? void 0 : dataWithOverrides.state,
     statusMessage: (dataWithOverrides == null ? void 0 : dataWithOverrides.error) ? dataWithOverrides.error.message : "",
     width,
     height,
+    displayMode,
+    hoverHeader,
     titleItems: isDraggable ? [dragHandle] : []
   }, (innerWidth, innerHeight) => /* @__PURE__ */ React.createElement(React.Fragment, null, !dataWithOverrides && /* @__PURE__ */ React.createElement("div", null, "No data..."), dataWithOverrides && /* @__PURE__ */ React.createElement(ErrorBoundaryAlert, {
     dependencies: [plugin, data]
@@ -72,7 +81,7 @@ function VizPanelRenderer({ model }) {
     width: innerWidth,
     height: innerHeight,
     renderCounter: 0,
-    replaceVariables: replace,
+    replaceVariables: model.interpolate,
     onOptionsChange: model.onOptionsChange,
     onFieldConfigChange: model.onFieldConfigChange,
     onChangeTimeRange: model.onChangeTimeRange,

package/dist/esm/components/VizPanel/VizPanelRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"VizPanelRenderer.js","sources":["../../../../src/components/VizPanel/VizPanelRenderer.tsx"],"sourcesContent":["import React, { RefCallback, useMemo } from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { PluginContextProvider, useFieldOverrides, ScopedVars, InterpolateFunction } from '@grafana/data';\nimport { getAppEvents } from '@grafana/runtime';\nimport { PanelChrome, ErrorBoundaryAlert, useTheme2 } from '@grafana/ui';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\nimport { SceneQueryRunner } from '../../querying/SceneQueryRunner';\nimport { SceneDragHandle } from '../SceneDragHandle';\n\nimport { VizPanel } from './VizPanel';\nimport { CustomFormatterFn } from '../../variables/interpolation/sceneInterpolator';\n\nexport function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {\n  const theme = useTheme2();\n  const replace = useMemo(\n    () => (value: string, scoped?: ScopedVars, format?: string | CustomFormatterFn) =>\n      sceneGraph.interpolate(model, value, scoped, format),\n    [model]\n  ) as InterpolateFunction;\n  const { title, description, options, fieldConfig, pluginId, pluginLoadError, $data, placement } = model.useState();\n  const [ref, { width, height }] = useMeasure();\n  const plugin = model.getPlugin();\n  const { data } = sceneGraph.getData(model).useState();\n  const parentLayout = sceneGraph.getLayout(model);\n\n  // TODO: this should probably be parentLayout.isDraggingEnabled() ? placement?.isDraggable : false\n  // The current logic is not correct, just because parent layout itself is not draggable does not mean children are not\n  const isDraggable = parentLayout.state.placement?.isDraggable ? placement?.isDraggable : false;\n  const dragHandle = <SceneDragHandle layoutKey={parentLayout.state.key!} />;\n\n  const titleInterpolated = replace(title, undefined, 'text');\n\n  // Not sure we need to subscribe to this state\n  const timeZone = sceneGraph.getTimeRange(model).state.timeZone;\n\n  const dataWithOverrides = useFieldOverrides(plugin, fieldConfig, data, timeZone, theme, replace);\n\n  if (pluginLoadError) {\n    return <div>Failed to load plugin: {pluginLoadError}</div>;\n  }\n\n  if (!plugin || !plugin.hasPluginId(pluginId)) {\n    return <div>Loading plugin panel...</div>;\n  }\n\n  if (!plugin.panel) {\n    return <div>Panel plugin has no panel component</div>;\n  }\n\n  const PanelComponent = plugin.panel;\n\n  // Query runner needs to with for auto maxDataPoints\n  if ($data instanceof SceneQueryRunner) {\n    $data.setContainerWidth(width);\n  }\n\n  const titleItems: React.ReactNode[] = isDraggable ? [dragHandle] : [];\n\n  // If we have local time range show that in panel header\n  if (model.state.$timeRange) {\n    titleItems.push(<model.state.$timeRange.Component model={model.state.$timeRange} />);\n  }\n\n  return (\n    <div ref={ref as RefCallback<HTMLDivElement>} style={{ position: 'absolute', width: '100%', height: '100%' }}>\n      <PanelChrome\n        title={titleInterpolated}\n        description={description ? () => replace(description) : ''}\n        loadingState={dataWithOverrides?.state}\n        statusMessage={dataWithOverrides?.error ? dataWithOverrides.error.message : ''}\n        width={width}\n        height={height}\n        titleItems={isDraggable ? [dragHandle] : []}\n      >\n        {(innerWidth, innerHeight) => (\n          <>\n            {!dataWithOverrides && <div>No data...</div>}\n            {dataWithOverrides && (\n              <ErrorBoundaryAlert dependencies={[plugin, data]}>\n                <PluginContextProvider meta={plugin.meta}>\n                  <PanelComponent\n                    id={1}\n                    data={dataWithOverrides}\n                    title={title}\n                    timeRange={dataWithOverrides.timeRange}\n                    timeZone={timeZone}\n                    options={options}\n                    fieldConfig={fieldConfig}\n                    transparent={false}\n                    width={innerWidth}\n                    height={innerHeight}\n                    renderCounter={0}\n                    replaceVariables={replace}\n                    onOptionsChange={model.onOptionsChange}\n                    onFieldConfigChange={model.onFieldConfigChange}\n                    onChangeTimeRange={model.onChangeTimeRange}\n                    eventBus={getAppEvents()}\n                  />\n                </PluginContextProvider>\n              </ErrorBoundaryAlert>\n            )}\n          </>\n        )}\n      </PanelChrome>\n    </div>\n  );\n}\n\nVizPanelRenderer.displayName = 'ScenePanelRenderer';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"VizPanelRenderer.js","sources":["../../../../src/components/VizPanel/VizPanelRenderer.tsx"],"sourcesContent":["import React, { RefCallback } from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { PluginContextProvider, useFieldOverrides } from '@grafana/data';\nimport { getAppEvents } from '@grafana/runtime';\nimport { PanelChrome, ErrorBoundaryAlert, useTheme2 } from '@grafana/ui';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\nimport { SceneQueryRunner } from '../../querying/SceneQueryRunner';\nimport { SceneDragHandle } from '../SceneDragHandle';\n\nimport { VizPanel } from './VizPanel';\n\nexport function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {\n  const theme = useTheme2();\n  const {\n    title,\n    description,\n    options,\n    fieldConfig,\n    pluginId,\n    pluginLoadError,\n    $data,\n    placement,\n    displayMode,\n    hoverHeader,\n  } = model.useState();\n  const [ref, { width, height }] = useMeasure();\n  const plugin = model.getPlugin();\n  const { data } = sceneGraph.getData(model).useState();\n  const parentLayout = sceneGraph.getLayout(model);\n\n  // TODO: this should probably be parentLayout.isDraggingEnabled() ? placement?.isDraggable : false\n  // The current logic is not correct, just because parent layout itself is not draggable does not mean children are not\n  const isDraggable = parentLayout.state.placement?.isDraggable ? placement?.isDraggable : false;\n  const dragHandle = <SceneDragHandle layoutKey={parentLayout.state.key!} />;\n\n  const titleInterpolated = model.interpolate(title, undefined, 'text');\n\n  // Not sure we need to subscribe to this state\n  const timeZone = sceneGraph.getTimeRange(model).state.timeZone;\n  const dataWithOverrides = useFieldOverrides(plugin, fieldConfig, data, timeZone, theme, model.interpolate);\n\n  if (pluginLoadError) {\n    return <div>Failed to load plugin: {pluginLoadError}</div>;\n  }\n\n  if (!plugin || !plugin.hasPluginId(pluginId)) {\n    return <div>Loading plugin panel...</div>;\n  }\n\n  if (!plugin.panel) {\n    return <div>Panel plugin has no panel component</div>;\n  }\n\n  const PanelComponent = plugin.panel;\n\n  // Query runner needs to with for auto maxDataPoints\n  if ($data instanceof SceneQueryRunner) {\n    $data.setContainerWidth(width);\n  }\n\n  const titleItems: React.ReactNode[] = isDraggable ? [dragHandle] : [];\n\n  // If we have local time range show that in panel header\n  if (model.state.$timeRange) {\n    titleItems.push(<model.state.$timeRange.Component model={model.state.$timeRange} />);\n  }\n\n  return (\n    <div ref={ref as RefCallback<HTMLDivElement>} style={{ position: 'absolute', width: '100%', height: '100%' }}>\n      <PanelChrome\n        title={titleInterpolated}\n        description={description ? () => model.interpolate(description) : ''}\n        loadingState={dataWithOverrides?.state}\n        statusMessage={dataWithOverrides?.error ? dataWithOverrides.error.message : ''}\n        width={width}\n        height={height}\n        displayMode={displayMode}\n        hoverHeader={hoverHeader}\n        titleItems={isDraggable ? [dragHandle] : []}\n      >\n        {(innerWidth, innerHeight) => (\n          <>\n            {!dataWithOverrides && <div>No data...</div>}\n            {dataWithOverrides && (\n              <ErrorBoundaryAlert dependencies={[plugin, data]}>\n                <PluginContextProvider meta={plugin.meta}>\n                  <PanelComponent\n                    id={1}\n                    data={dataWithOverrides}\n                    title={title}\n                    timeRange={dataWithOverrides.timeRange}\n                    timeZone={timeZone}\n                    options={options}\n                    fieldConfig={fieldConfig}\n                    transparent={false}\n                    width={innerWidth}\n                    height={innerHeight}\n                    renderCounter={0}\n                    replaceVariables={model.interpolate}\n                    onOptionsChange={model.onOptionsChange}\n                    onFieldConfigChange={model.onFieldConfigChange}\n                    onChangeTimeRange={model.onChangeTimeRange}\n                    eventBus={getAppEvents()}\n                  />\n                </PluginContextProvider>\n              </ErrorBoundaryAlert>\n            )}\n          </>\n        )}\n      </PanelChrome>\n    </div>\n  );\n}\n\nVizPanelRenderer.displayName = 'ScenePanelRenderer';\n"],"names":[],"mappings":"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"}

package/dist/esm/components/layout/SceneGridRow.js

@@ -75,9 +75,9 @@ function SceneGridRowRenderer({ model }) {
     className: styles.row
   }, /* @__PURE__ */ React.createElement("div", {
     className: cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("button", {
     onClick: model.onCollapseToggle,
-    className: styles.rowTitleWrapper
+    className: styles.rowTitleButton
   }, isCollapsible && /* @__PURE__ */ React.createElement(Icon, {
     name: isCollapsed ? "angle-right" : "angle-down"
   }), /* @__PURE__ */ React.createElement("span", {
@@ -102,10 +102,13 @@ const getSceneGridRowStyles = (theme) => {
       marginBottom: "8px",
       border: `1px solid transparent`
     }),
-    rowTitleWrapper: css({
+    rowTitleButton: css({
       display: "flex",
       alignItems: "center",
-      cursor: "pointer"
+      cursor: "pointer",
+      background: "transparent",
+      border: "none",
+      gap: theme.spacing(1)
     }),
     rowHeaderCollapsed: css({
       marginBottom: "0px",
@@ -114,8 +117,8 @@ const getSceneGridRowStyles = (theme) => {
       borderRadius: theme.shape.borderRadius(1)
     }),
     rowTitle: css({
-      fontSize: theme.typography.h6.fontSize,
-      fontWeight: theme.typography.h6.fontWeight
+      fontSize: theme.typography.h5.fontSize,
+      fontWeight: theme.typography.fontWeightMedium
     })
   };
 };

package/dist/esm/components/layout/SceneGridRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneGridRow.js","sources":["../../../../src/components/layout/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps, SceneLayoutChildState, SceneObject, SceneObjectUrlValues } from '../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig';\nimport { SceneDragHandle } from '../SceneDragHandle';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\n\nexport interface SceneGridRowState extends SceneLayoutChildState {\n  title: string;\n  isCollapsible?: boolean;\n  isCollapsed?: boolean;\n  children: Array<SceneObject<SceneLayoutChildState>>;\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n  public static Component = SceneGridRowRenderer;\n\n  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['rowc'] });\n\n  public constructor(state: SceneGridRowState) {\n    super({\n      isCollapsible: true,\n      ...state,\n      placement: {\n        isResizable: false,\n        isDraggable: true,\n        ...state.placement,\n        x: 0,\n        height: 1,\n        width: GRID_COLUMN_COUNT,\n      },\n    });\n  }\n\n  public onCollapseToggle = () => {\n    if (!this.state.isCollapsible) {\n      return;\n    }\n\n    const layout = this.parent;\n\n    if (!layout || !(layout instanceof SceneGridLayout)) {\n      throw new Error('SceneGridRow must be a child of SceneGridLayout');\n    }\n\n    layout.toggleRow(this);\n  };\n\n  public getUrlState(state: SceneGridRowState) {\n    return { rowc: state.isCollapsed ? '1' : '0' };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    const isCollapsed = values.rowc === '1';\n    if (isCollapsed !== this.state.isCollapsed) {\n      this.onCollapseToggle();\n    }\n  }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n  const styles = useStyles2(getSceneGridRowStyles);\n  const { isCollapsible, isCollapsed, title, placement } = model.useState();\n  const layout = sceneGraph.getLayout(model);\n  const dragHandle = <SceneDragHandle layoutKey={layout.state.key!} />;\n\n  return (\n    <div className={styles.row}>\n      <div className={cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)}>\n        <div onClick={model.onCollapseToggle} className={styles.rowTitleWrapper}>\n          {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n          <span className={styles.rowTitle}>{title}</span>\n        </div>\n        {placement?.isDraggable && isCollapsed && <div>{dragHandle}</div>}\n      </div>\n    </div>\n  );\n}\n\nconst getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n  return {\n    row: css({\n      width: '100%',\n      height: '100%',\n      position: 'relative',\n      zIndex: 0,\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n    rowHeader: css({\n      width: '100%',\n      height: '30px',\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginBottom: '8px',\n      border: `1px solid transparent`,\n    }),\n    rowTitleWrapper: css({\n      display: 'flex',\n      alignItems: 'center',\n      cursor: 'pointer',\n    }),\n    rowHeaderCollapsed: css({\n      marginBottom: '0px',\n      background: theme.colors.background.primary,\n      border: `1px solid ${theme.colors.border.weak}`,\n      borderRadius: theme.shape.borderRadius(1),\n    }),\n    rowTitle: css({\n      fontSize: theme.typography.h6.fontSize,\n      fontWeight: theme.typography.h6.fontWeight,\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SceneGridRow.js","sources":["../../../../src/components/layout/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps, SceneLayoutChildState, SceneObject, SceneObjectUrlValues } from '../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig';\nimport { SceneDragHandle } from '../SceneDragHandle';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\n\nexport interface SceneGridRowState extends SceneLayoutChildState {\n  title: string;\n  isCollapsible?: boolean;\n  isCollapsed?: boolean;\n  children: Array<SceneObject<SceneLayoutChildState>>;\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n  public static Component = SceneGridRowRenderer;\n\n  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['rowc'] });\n\n  public constructor(state: SceneGridRowState) {\n    super({\n      isCollapsible: true,\n      ...state,\n      placement: {\n        isResizable: false,\n        isDraggable: true,\n        ...state.placement,\n        x: 0,\n        height: 1,\n        width: GRID_COLUMN_COUNT,\n      },\n    });\n  }\n\n  public onCollapseToggle = () => {\n    if (!this.state.isCollapsible) {\n      return;\n    }\n\n    const layout = this.parent;\n\n    if (!layout || !(layout instanceof SceneGridLayout)) {\n      throw new Error('SceneGridRow must be a child of SceneGridLayout');\n    }\n\n    layout.toggleRow(this);\n  };\n\n  public getUrlState(state: SceneGridRowState) {\n    return { rowc: state.isCollapsed ? '1' : '0' };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    const isCollapsed = values.rowc === '1';\n    if (isCollapsed !== this.state.isCollapsed) {\n      this.onCollapseToggle();\n    }\n  }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n  const styles = useStyles2(getSceneGridRowStyles);\n  const { isCollapsible, isCollapsed, title, placement } = model.useState();\n  const layout = sceneGraph.getLayout(model);\n  const dragHandle = <SceneDragHandle layoutKey={layout.state.key!} />;\n\n  return (\n    <div className={styles.row}>\n      <div className={cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)}>\n        <button onClick={model.onCollapseToggle} className={styles.rowTitleButton}>\n          {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n          <span className={styles.rowTitle}>{title}</span>\n        </button>\n        {placement?.isDraggable && isCollapsed && <div>{dragHandle}</div>}\n      </div>\n    </div>\n  );\n}\n\nconst getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n  return {\n    row: css({\n      width: '100%',\n      height: '100%',\n      position: 'relative',\n      zIndex: 0,\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n    rowHeader: css({\n      width: '100%',\n      height: '30px',\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginBottom: '8px',\n      border: `1px solid transparent`,\n    }),\n    rowTitleButton: css({\n      display: 'flex',\n      alignItems: 'center',\n      cursor: 'pointer',\n      background: 'transparent',\n      border: 'none',\n      gap: theme.spacing(1),\n    }),\n    rowHeaderCollapsed: css({\n      marginBottom: '0px',\n      background: theme.colors.background.primary,\n      border: `1px solid ${theme.colors.border.weak}`,\n      borderRadius: theme.shape.borderRadius(1),\n    }),\n    rowTitle: css({\n      fontSize: theme.typography.h5.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,qBAAqB,eAAmC,CAAA;AAAA,EAK5D,YAAY,KAA0B,EAAA;AAC3C,IAAM,KAAA,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACJ,aAAe,EAAA,IAAA;AAAA,KAAA,EACZ,KAFC,CAAA,EAAA;AAAA,MAGJ,SAAW,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,QACT,WAAa,EAAA,KAAA;AAAA,QACb,WAAa,EAAA,IAAA;AAAA,OAAA,EACV,MAAM,SAHA,CAAA,EAAA;AAAA,QAIT,CAAG,EAAA,CAAA;AAAA,QACH,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA,iBAAA;AAAA,OACT,CAAA;AAAA,KACD,CAAA,CAAA,CAAA;AAdH,IAAU,IAAA,CAAA,QAAA,GAAW,IAAI,wBAAyB,CAAA,IAAA,EAAM,EAAE,IAAM,EAAA,CAAC,MAAM,CAAA,EAAG,CAAA,CAAA;AAiB1E,IAAA,IAAA,CAAO,mBAAmB,MAAM;AAC9B,MAAI,IAAA,CAAC,IAAK,CAAA,KAAA,CAAM,aAAe,EAAA;AAC7B,QAAA,OAAA;AAAA,OACF;AAEA,MAAA,MAAM,SAAS,IAAK,CAAA,MAAA,CAAA;AAEpB,MAAA,IAAI,CAAC,MAAA,IAAU,EAAE,MAAA,YAAkB,eAAkB,CAAA,EAAA;AACnD,QAAM,MAAA,IAAI,MAAM,iDAAiD,CAAA,CAAA;AAAA,OACnE;AAEA,MAAA,MAAA,CAAO,UAAU,IAAI,CAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GAdA;AAAA,EAgBO,YAAY,KAA0B,EAAA;AAC3C,IAAA,OAAO,EAAE,IAAA,EAAM,KAAM,CAAA,WAAA,GAAc,MAAM,GAAI,EAAA,CAAA;AAAA,GAC/C;AAAA,EAEO,cAAc,MAA8B,EAAA;AACjD,IAAM,MAAA,WAAA,GAAc,OAAO,IAAS,KAAA,GAAA,CAAA;AACpC,IAAI,IAAA,WAAA,KAAgB,IAAK,CAAA,KAAA,CAAM,WAAa,EAAA;AAC1C,MAAA,IAAA,CAAK,gBAAiB,EAAA,CAAA;AAAA,KACxB;AAAA,GACF;AACF,CAAA;AA5Ca,YAAA,CACG,SAAY,GAAA,oBAAA,CAAA;AA6CZ,SAAA,oBAAA,CAAqB,EAAE,KAAA,EAA4C,EAAA;AACjF,EAAM,MAAA,MAAA,GAAS,WAAW,qBAAqB,CAAA,CAAA;AAC/C,EAAA,MAAM,EAAE,aAAe,EAAA,WAAA,EAAa,OAAO,SAAU,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AACxE,EAAM,MAAA,MAAA,GAAS,UAAW,CAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACzC,EAAA,MAAM,6BAAc,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,IAAgB,SAAA,EAAW,OAAO,KAAM,CAAA,GAAA;AAAA,GAAM,CAAA,CAAA;AAElE,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,GAAA;AAAA,GAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,EAAG,CAAA,MAAA,CAAO,SAAW,EAAA,WAAA,IAAe,OAAO,kBAAkB,CAAA;AAAA,GAAA,kBAC1E,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IAAO,SAAS,KAAM,CAAA,gBAAA;AAAA,IAAkB,WAAW,MAAO,CAAA,cAAA;AAAA,GAAA,EACxD,iCAAkB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAA,EAAM,cAAc,aAAgB,GAAA,YAAA;AAAA,GAAc,mBACzE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,QAAA;AAAA,GAAW,EAAA,KAAM,CAC3C,CAAA,EAAA,CACC,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,WAAA,KAAe,+BAAgB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAK,UAAW,CAC7D,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,qBAAA,GAAwB,CAAC,KAAyB,KAAA;AACtD,EAAO,OAAA;AAAA,IACL,KAAK,GAAI,CAAA;AAAA,MACP,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA,MAAA;AAAA,MACR,QAAU,EAAA,UAAA;AAAA,MACV,MAAQ,EAAA,CAAA;AAAA,MACR,OAAS,EAAA,MAAA;AAAA,MACT,aAAe,EAAA,QAAA;AAAA,KAChB,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA,MAAA;AAAA,MACR,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,eAAA;AAAA,MAChB,YAAc,EAAA,KAAA;AAAA,MACd,MAAQ,EAAA,CAAA,qBAAA,CAAA;AAAA,KACT,CAAA;AAAA,IACD,gBAAgB,GAAI,CAAA;AAAA,MAClB,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,MAAQ,EAAA,SAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,MAAQ,EAAA,MAAA;AAAA,MACR,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,KACrB,CAAA;AAAA,IACD,oBAAoB,GAAI,CAAA;AAAA,MACtB,YAAc,EAAA,KAAA;AAAA,MACd,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,OAAA;AAAA,MACpC,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,IAAA,CAAA,CAAA;AAAA,MACzC,YAAc,EAAA,KAAA,CAAM,KAAM,CAAA,YAAA,CAAa,CAAC,CAAA;AAAA,KACzC,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,EAAG,CAAA,QAAA;AAAA,MAC9B,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,KAC9B,CAAA;AAAA,GACH,CAAA;AACF,CAAA;;;;"}

package/dist/esm/core/SceneComponentWrapper.js

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-function SceneComponentWrapper(_a) {
+function SceneComponentWrapperWithoutMemo(_a) {
   var _b = _a, {
     model,
     isEditing
@@ -55,7 +55,6 @@ function SceneComponentWrapper(_a) {
       }
     };
   }, [model]);
-  model._renderCount += 1;
   if (!isEditing) {
     return inner;
   }
@@ -66,6 +65,7 @@ function SceneComponentWrapper(_a) {
     editor
   }, inner);
 }
+const SceneComponentWrapper = React.memo(SceneComponentWrapperWithoutMemo);
 function EmptyRenderer(_) {
   return null;
 }

package/dist/esm/core/SceneComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneComponentWrapper.js","sources":["../../../src/core/SceneComponentWrapper.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { SceneComponentProps, SceneEditor, SceneObject } from './types';\n\nexport function SceneComponentWrapper<T extends SceneObject>({\n  model,\n  isEditing,\n  ...otherProps\n}: SceneComponentProps<T>) {\n  const Component = (model as any).constructor['Component'] ?? EmptyRenderer;\n  const inner = <Component {...otherProps} model={model} isEditing={isEditing} />;\n\n  // Handle component activation state state\n  useEffect(() => {\n    if (!model.isActive) {\n      model.activate();\n    }\n    return () => {\n      if (model.isActive) {\n        model.deactivate();\n      }\n    };\n  }, [model]);\n\n  /** Useful for tests and evaluating efficiency in reducing renderings */\n  // @ts-ignore\n  model._renderCount += 1;\n\n  if (!isEditing) {\n    return inner;\n  }\n\n  const editor = getSceneEditor(model);\n  const EditWrapper = getSceneEditor(model).getEditComponentWrapper();\n\n  return (\n    <EditWrapper model={model} editor={editor}>\n      {inner}\n    </EditWrapper>\n  );\n}\n\nfunction EmptyRenderer<T>(_: SceneComponentProps<T>): React.ReactElement | null {\n  return null;\n}\n\nfunction getSceneEditor(sceneObject: SceneObject): SceneEditor {\n  const { $editor } = sceneObject.state;\n  if ($editor) {\n    return $editor;\n  }\n\n  if (sceneObject.parent) {\n    return getSceneEditor(sceneObject.parent);\n  }\n\n  throw new Error('No editor found in scene tree');\n}\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,SAAS,sBAA6C,EAIlC,EAAA;AAJkC,EAC3D,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,SAAA;AAAA,GANF,GAI6D,EAGxD,EAAA,UAAA,GAAA,SAAA,CAHwD,EAGxD,EAAA;AAAA,IAFH,OAAA;AAAA,IACA,WAAA;AAAA,GAAA,CAAA,CAAA;AANF,EAAAA,IAAAA,GAAAA,CAAAA;AASE,EAAA,MAAM,aAAaA,GAAA,GAAA,KAAA,CAAc,WAAY,CAAA,WAAA,CAAA,KAA1B,OAAAA,GAA0C,GAAA,aAAA,CAAA;AAC7D,EAAM,MAAA,KAAA,mBAAS,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAc,UAAd,CAAA,EAAA;AAAA,IAA0B,KAAA;AAAA,IAAc,SAAA;AAAA,GAAsB,CAAA,CAAA,CAAA;AAG7E,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,MAAM,QAAU,EAAA;AACnB,MAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAAA,KACjB;AACA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,MAAM,QAAU,EAAA;AAClB,QAAA,KAAA,CAAM,UAAW,EAAA,CAAA;AAAA,OACnB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAIV,EAAA,KAAA,CAAM,YAAgB,IAAA,CAAA,CAAA;AAEtB,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,MAAA,GAAS,eAAe,KAAK,CAAA,CAAA;AACnC,EAAA,MAAM,WAAc,GAAA,cAAA,CAAe,KAAK,CAAA,CAAE,uBAAwB,EAAA,CAAA;AAElE,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IAAY,KAAA;AAAA,IAAc,MAAA;AAAA,GAAA,EACxB,KACH,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,cAAiB,CAAsD,EAAA;AAC9E,EAAO,OAAA,IAAA,CAAA;AACT,CAAA;AAEA,SAAS,eAAe,WAAuC,EAAA;AAC7D,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,WAAY,CAAA,KAAA,CAAA;AAChC,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,OAAA,CAAA;AAAA,GACT;AAEA,EAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,IAAO,OAAA,cAAA,CAAe,YAAY,MAAM,CAAA,CAAA;AAAA,GAC1C;AAEA,EAAM,MAAA,IAAI,MAAM,+BAA+B,CAAA,CAAA;AACjD;;;;"}
+{"version":3,"file":"SceneComponentWrapper.js","sources":["../../../src/core/SceneComponentWrapper.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { SceneComponentProps, SceneEditor, SceneObject } from './types';\n\nfunction SceneComponentWrapperWithoutMemo<T extends SceneObject>({\n  model,\n  isEditing,\n  ...otherProps\n}: SceneComponentProps<T>) {\n  const Component = (model as any).constructor['Component'] ?? EmptyRenderer;\n  const inner = <Component {...otherProps} model={model} isEditing={isEditing} />;\n\n  // Handle component activation state state\n  useEffect(() => {\n    if (!model.isActive) {\n      model.activate();\n    }\n    return () => {\n      if (model.isActive) {\n        model.deactivate();\n      }\n    };\n  }, [model]);\n\n  if (!isEditing) {\n    return inner;\n  }\n\n  const editor = getSceneEditor(model);\n  const EditWrapper = getSceneEditor(model).getEditComponentWrapper();\n\n  return (\n    <EditWrapper model={model} editor={editor}>\n      {inner}\n    </EditWrapper>\n  );\n}\n\nexport const SceneComponentWrapper = React.memo(SceneComponentWrapperWithoutMemo);\n\nfunction EmptyRenderer<T>(_: SceneComponentProps<T>): React.ReactElement | null {\n  return null;\n}\n\nfunction getSceneEditor(sceneObject: SceneObject): SceneEditor {\n  const { $editor } = sceneObject.state;\n  if ($editor) {\n    return $editor;\n  }\n\n  if (sceneObject.parent) {\n    return getSceneEditor(sceneObject.parent);\n  }\n\n  throw new Error('No editor found in scene tree');\n}\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAAS,iCAAwD,EAItC,EAAA;AAJsC,EAC/D,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,SAAA;AAAA,GANF,GAIiE,EAG5D,EAAA,UAAA,GAAA,SAAA,CAH4D,EAG5D,EAAA;AAAA,IAFH,OAAA;AAAA,IACA,WAAA;AAAA,GAAA,CAAA,CAAA;AANF,EAAAA,IAAAA,GAAAA,CAAAA;AASE,EAAA,MAAM,aAAaA,GAAA,GAAA,KAAA,CAAc,WAAY,CAAA,WAAA,CAAA,KAA1B,OAAAA,GAA0C,GAAA,aAAA,CAAA;AAC7D,EAAM,MAAA,KAAA,mBAAS,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAc,UAAd,CAAA,EAAA;AAAA,IAA0B,KAAA;AAAA,IAAc,SAAA;AAAA,GAAsB,CAAA,CAAA,CAAA;AAG7E,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,MAAM,QAAU,EAAA;AACnB,MAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAAA,KACjB;AACA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,MAAM,QAAU,EAAA;AAClB,QAAA,KAAA,CAAM,UAAW,EAAA,CAAA;AAAA,OACnB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,MAAA,GAAS,eAAe,KAAK,CAAA,CAAA;AACnC,EAAA,MAAM,WAAc,GAAA,cAAA,CAAe,KAAK,CAAA,CAAE,uBAAwB,EAAA,CAAA;AAElE,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IAAY,KAAA;AAAA,IAAc,MAAA;AAAA,GAAA,EACxB,KACH,CAAA,CAAA;AAEJ,CAAA;AAEa,MAAA,qBAAA,GAAwB,KAAM,CAAA,IAAA,CAAK,gCAAgC,EAAA;AAEhF,SAAS,cAAiB,CAAsD,EAAA;AAC9E,EAAO,OAAA,IAAA,CAAA;AACT,CAAA;AAEA,SAAS,eAAe,WAAuC,EAAA;AAC7D,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,WAAY,CAAA,KAAA,CAAA;AAChC,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,OAAA,CAAA;AAAA,GACT;AAEA,EAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,IAAO,OAAA,cAAA,CAAe,YAAY,MAAM,CAAA,CAAA;AAAA,GAC1C;AAEA,EAAM,MAAA,IAAI,MAAM,+BAA+B,CAAA,CAAA;AACjD;;;;"}

package/dist/esm/core/SceneObjectBase.js

@@ -28,7 +28,6 @@ class SceneObjectBase {
     this._isActive = false;
     this._subject = new Subject();
     this._events = new EventBusSrv();
-    this._renderCount = 0;
     this._subs = new Subscription();
     if (!state.key) {
       state.key = v4();
@@ -99,12 +98,12 @@ class SceneObjectBase {
     if ($timeRange && !$timeRange.isActive) {
       $timeRange.activate();
     }
-    if ($data && !$data.isActive) {
-      $data.activate();
-    }
     if ($variables && !$variables.isActive) {
       $variables.activate();
     }
+    if ($data && !$data.isActive) {
+      $data.activate();
+    }
   }
   deactivate() {
     this._isActive = false;

package/dist/esm/core/SceneObjectBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneObjectBase.js","sources":["../../../src/core/SceneObjectBase.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { Observer, Subject, Subscription, Unsubscribable } from 'rxjs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { BusEvent, BusEventHandler, BusEventType, EventBusSrv } from '@grafana/data';\nimport { SceneObject, SceneComponent, SceneObjectState, SceneObjectUrlSyncHandler } from './types';\nimport { useForceUpdate } from '@grafana/ui';\n\nimport { SceneComponentWrapper } from './SceneComponentWrapper';\nimport { SceneObjectStateChangedEvent } from './events';\nimport { cloneSceneObject, forEachSceneObjectInState } from './utils';\nimport { SceneVariableDependencyConfigLike } from '../variables/types';\n\nexport abstract class SceneObjectBase<TState extends SceneObjectState = SceneObjectState>\n  implements SceneObject<TState>\n{\n  private _isActive = false;\n  private _subject = new Subject<TState>();\n  private _state: TState;\n  private _events = new EventBusSrv();\n\n  /** Incremented in SceneComponentWrapper, useful for tests and rendering optimizations */\n  protected _renderCount = 0;\n  protected _parent?: SceneObject;\n  protected _subs = new Subscription();\n\n  protected _variableDependency: SceneVariableDependencyConfigLike | undefined;\n  protected _urlSync: SceneObjectUrlSyncHandler<TState> | undefined;\n\n  public constructor(state: TState) {\n    if (!state.key) {\n      state.key = uuidv4();\n    }\n\n    this._state = Object.freeze(state);\n    this._subject.next(state);\n    this.setParent();\n  }\n\n  /** Current state */\n  public get state(): TState {\n    return this._state;\n  }\n\n  /** True if currently being active (ie displayed for visual objects) */\n  public get isActive(): boolean {\n    return this._isActive;\n  }\n\n  /** Returns the parent, undefined for root object */\n  public get parent(): SceneObject | undefined {\n    return this._parent;\n  }\n\n  /** Returns variable dependency config */\n  public get variableDependency(): SceneVariableDependencyConfigLike | undefined {\n    return this._variableDependency;\n  }\n\n  /** Returns url sync config */\n  public get urlSync(): SceneObjectUrlSyncHandler<TState> | undefined {\n    return this._urlSync;\n  }\n\n  /**\n   * Used in render functions when rendering a SceneObject.\n   * Wraps the component in an EditWrapper that handles edit mode\n   */\n  public get Component(): SceneComponent<this> {\n    return SceneComponentWrapper;\n  }\n\n  /**\n   * Temporary solution, should be replaced by declarative options\n   */\n  public get Editor(): SceneComponent<this> {\n    return ((this as any).constructor['Editor'] ?? (() => null)) as SceneComponent<this>;\n  }\n\n  private setParent() {\n    forEachSceneObjectInState(this._state, (child) => (child._parent = this));\n  }\n\n  /**\n   * Subscribe to the scene state subject\n   **/\n  public subscribeToState(observerOrNext?: Partial<Observer<TState>>): Subscription {\n    return this._subject.subscribe(observerOrNext);\n  }\n\n  /**\n   * Subscribe to the scene event\n   **/\n  public subscribeToEvent<T extends BusEvent>(eventType: BusEventType<T>, handler: BusEventHandler<T>): Unsubscribable {\n    return this._events.subscribe(eventType, handler);\n  }\n\n  public setState(update: Partial<TState>) {\n    const prevState = this._state;\n    const newState: TState = {\n      ...this._state,\n      ...update,\n    };\n\n    this._state = Object.freeze(newState);\n\n    this.setParent();\n    this._subject.next(newState);\n\n    // Bubble state change event. This is event is subscribed to by UrlSyncManager and UndoManager\n    this.publishEvent(\n      new SceneObjectStateChangedEvent({\n        prevState,\n        newState,\n        partialUpdate: update,\n        changedObject: this,\n      }),\n      true\n    );\n  }\n  /*\n   * Publish an event and optionally bubble it up the scene\n   **/\n  public publishEvent(event: BusEvent, bubble?: boolean) {\n    this._events.publish(event);\n\n    if (bubble && this.parent) {\n      this.parent.publishEvent(event, bubble);\n    }\n  }\n\n  public getRoot(): SceneObject {\n    return !this._parent ? this : this._parent.getRoot();\n  }\n\n  /**\n   * Called by the SceneComponentWrapper when the react component is mounted\n   */\n  public activate() {\n    this._isActive = true;\n\n    const { $data, $variables, $timeRange } = this.state;\n\n    if ($timeRange && !$timeRange.isActive) {\n      $timeRange.activate();\n    }\n\n    if ($data && !$data.isActive) {\n      $data.activate();\n    }\n\n    if ($variables && !$variables.isActive) {\n      $variables.activate();\n    }\n  }\n\n  /**\n   * Called by the SceneComponentWrapper when the react component is unmounted\n   */\n  public deactivate(): void {\n    this._isActive = false;\n\n    const { $data, $variables, $timeRange } = this.state;\n\n    if ($timeRange && $timeRange.isActive) {\n      $timeRange.deactivate();\n    }\n\n    if ($data && $data.isActive) {\n      $data.deactivate();\n    }\n\n    if ($variables && $variables.isActive) {\n      $variables.deactivate();\n    }\n\n    // Clear subscriptions and listeners\n    this._events.removeAllListeners();\n    this._subs.unsubscribe();\n    this._subs = new Subscription();\n\n    this._subject.complete();\n    this._subject = new Subject<TState>();\n  }\n\n  /**\n   * Utility hook to get and subscribe to state\n   */\n  public useState() {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useSceneObjectState(this);\n  }\n\n  /** Force a re-render, should only be needed when variable values change */\n  public forceRender(): void {\n    this.setState({});\n  }\n\n  /**\n   * Will create new SceneObject with shallow-cloned state, but all state items of type SceneObject are deep cloned\n   */\n  public clone(withState?: Partial<TState>): this {\n    return cloneSceneObject(this, withState);\n  }\n}\n\n/**\n * This hook is always returning model.state instead of a useState that remembers the last state emitted on the subject\n * The reason for this is so that if the model instance change this function will always return the latest state.\n */\nfunction useSceneObjectState<TState extends SceneObjectState>(model: SceneObjectBase<TState>): TState {\n  const forceUpdate = useForceUpdate();\n\n  useEffect(() => {\n    const s = model.subscribeToState({ next: forceUpdate });\n    return () => s.unsubscribe();\n  }, [model, forceUpdate]);\n\n  return model.state;\n}\n"],"names":["uuidv4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAe,eAEtB,CAAA;AAAA,EAcS,YAAY,KAAe,EAAA;AAblC,IAAA,IAAA,CAAQ,SAAY,GAAA,KAAA,CAAA;AACpB,IAAQ,IAAA,CAAA,QAAA,GAAW,IAAI,OAAgB,EAAA,CAAA;AAEvC,IAAQ,IAAA,CAAA,OAAA,GAAU,IAAI,WAAY,EAAA,CAAA;AAGlC,IAAA,IAAA,CAAU,YAAe,GAAA,CAAA,CAAA;AAEzB,IAAU,IAAA,CAAA,KAAA,GAAQ,IAAI,YAAa,EAAA,CAAA;AAMjC,IAAI,IAAA,CAAC,MAAM,GAAK,EAAA;AACd,MAAA,KAAA,CAAM,MAAMA,EAAO,EAAA,CAAA;AAAA,KACrB;AAEA,IAAK,IAAA,CAAA,MAAA,GAAS,MAAO,CAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACjC,IAAK,IAAA,CAAA,QAAA,CAAS,KAAK,KAAK,CAAA,CAAA;AACxB,IAAA,IAAA,CAAK,SAAU,EAAA,CAAA;AAAA,GACjB;AAAA,EAGA,IAAW,KAAgB,GAAA;AACzB,IAAA,OAAO,IAAK,CAAA,MAAA,CAAA;AAAA,GACd;AAAA,EAGA,IAAW,QAAoB,GAAA;AAC7B,IAAA,OAAO,IAAK,CAAA,SAAA,CAAA;AAAA,GACd;AAAA,EAGA,IAAW,MAAkC,GAAA;AAC3C,IAAA,OAAO,IAAK,CAAA,OAAA,CAAA;AAAA,GACd;AAAA,EAGA,IAAW,kBAAoE,GAAA;AAC7E,IAAA,OAAO,IAAK,CAAA,mBAAA,CAAA;AAAA,GACd;AAAA,EAGA,IAAW,OAAyD,GAAA;AAClE,IAAA,OAAO,IAAK,CAAA,QAAA,CAAA;AAAA,GACd;AAAA,EAMA,IAAW,SAAkC,GAAA;AAC3C,IAAO,OAAA,qBAAA,CAAA;AAAA,GACT;AAAA,EAKA,IAAW,MAA+B,GAAA;AA3E5C,IAAA,IAAA,EAAA,CAAA;AA4EI,IAAA,OAAA,CAAS,EAAa,GAAA,IAAA,CAAA,WAAA,CAAY,QAAzB,CAAA,KAAA,IAAA,GAAA,EAAA,GAAuC,MAAM,IAAA,CAAA;AAAA,GACxD;AAAA,EAEQ,SAAY,GAAA;AAClB,IAAA,yBAAA,CAA0B,KAAK,MAAQ,EAAA,CAAC,KAAW,KAAA,KAAA,CAAM,UAAU,IAAK,CAAA,CAAA;AAAA,GAC1E;AAAA,EAKO,iBAAiB,cAA0D,EAAA;AAChF,IAAO,OAAA,IAAA,CAAK,QAAS,CAAA,SAAA,CAAU,cAAc,CAAA,CAAA;AAAA,GAC/C;AAAA,EAKO,gBAAA,CAAqC,WAA4B,OAA6C,EAAA;AACnH,IAAA,OAAO,IAAK,CAAA,OAAA,CAAQ,SAAU,CAAA,SAAA,EAAW,OAAO,CAAA,CAAA;AAAA,GAClD;AAAA,EAEO,SAAS,MAAyB,EAAA;AACvC,IAAA,MAAM,YAAY,IAAK,CAAA,MAAA,CAAA;AACvB,IAAM,MAAA,QAAA,GAAmB,cACpB,CAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAK,MACL,CAAA,EAAA,MAAA,CAAA,CAAA;AAGL,IAAK,IAAA,CAAA,MAAA,GAAS,MAAO,CAAA,MAAA,CAAO,QAAQ,CAAA,CAAA;AAEpC,IAAA,IAAA,CAAK,SAAU,EAAA,CAAA;AACf,IAAK,IAAA,CAAA,QAAA,CAAS,KAAK,QAAQ,CAAA,CAAA;AAG3B,IAAK,IAAA,CAAA,YAAA;AAAA,MACH,IAAI,4BAA6B,CAAA;AAAA,QAC/B,SAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAe,EAAA,MAAA;AAAA,QACf,aAAe,EAAA,IAAA;AAAA,OAChB,CAAA;AAAA,MACD,IAAA;AAAA,KACF,CAAA;AAAA,GACF;AAAA,EAIO,YAAA,CAAa,OAAiB,MAAkB,EAAA;AACrD,IAAK,IAAA,CAAA,OAAA,CAAQ,QAAQ,KAAK,CAAA,CAAA;AAE1B,IAAI,IAAA,MAAA,IAAU,KAAK,MAAQ,EAAA;AACzB,MAAK,IAAA,CAAA,MAAA,CAAO,YAAa,CAAA,KAAA,EAAO,MAAM,CAAA,CAAA;AAAA,KACxC;AAAA,GACF;AAAA,EAEO,OAAuB,GAAA;AAC5B,IAAA,OAAO,CAAC,IAAK,CAAA,OAAA,GAAU,IAAO,GAAA,IAAA,CAAK,QAAQ,OAAQ,EAAA,CAAA;AAAA,GACrD;AAAA,EAKO,QAAW,GAAA;AAChB,IAAA,IAAA,CAAK,SAAY,GAAA,IAAA,CAAA;AAEjB,IAAA,MAAM,EAAE,KAAA,EAAO,UAAY,EAAA,UAAA,KAAe,IAAK,CAAA,KAAA,CAAA;AAE/C,IAAI,IAAA,UAAA,IAAc,CAAC,UAAA,CAAW,QAAU,EAAA;AACtC,MAAA,UAAA,CAAW,QAAS,EAAA,CAAA;AAAA,KACtB;AAEA,IAAI,IAAA,KAAA,IAAS,CAAC,KAAA,CAAM,QAAU,EAAA;AAC5B,MAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAAA,KACjB;AAEA,IAAI,IAAA,UAAA,IAAc,CAAC,UAAA,CAAW,QAAU,EAAA;AACtC,MAAA,UAAA,CAAW,QAAS,EAAA,CAAA;AAAA,KACtB;AAAA,GACF;AAAA,EAKO,UAAmB,GAAA;AACxB,IAAA,IAAA,CAAK,SAAY,GAAA,KAAA,CAAA;AAEjB,IAAA,MAAM,EAAE,KAAA,EAAO,UAAY,EAAA,UAAA,KAAe,IAAK,CAAA,KAAA,CAAA;AAE/C,IAAI,IAAA,UAAA,IAAc,WAAW,QAAU,EAAA;AACrC,MAAA,UAAA,CAAW,UAAW,EAAA,CAAA;AAAA,KACxB;AAEA,IAAI,IAAA,KAAA,IAAS,MAAM,QAAU,EAAA;AAC3B,MAAA,KAAA,CAAM,UAAW,EAAA,CAAA;AAAA,KACnB;AAEA,IAAI,IAAA,UAAA,IAAc,WAAW,QAAU,EAAA;AACrC,MAAA,UAAA,CAAW,UAAW,EAAA,CAAA;AAAA,KACxB;AAGA,IAAA,IAAA,CAAK,QAAQ,kBAAmB,EAAA,CAAA;AAChC,IAAA,IAAA,CAAK,MAAM,WAAY,EAAA,CAAA;AACvB,IAAK,IAAA,CAAA,KAAA,GAAQ,IAAI,YAAa,EAAA,CAAA;AAE9B,IAAA,IAAA,CAAK,SAAS,QAAS,EAAA,CAAA;AACvB,IAAK,IAAA,CAAA,QAAA,GAAW,IAAI,OAAgB,EAAA,CAAA;AAAA,GACtC;AAAA,EAKO,QAAW,GAAA;AAEhB,IAAA,OAAO,oBAAoB,IAAI,CAAA,CAAA;AAAA,GACjC;AAAA,EAGO,WAAoB,GAAA;AACzB,IAAK,IAAA,CAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AAAA,GAClB;AAAA,EAKO,MAAM,SAAmC,EAAA;AAC9C,IAAO,OAAA,gBAAA,CAAiB,MAAM,SAAS,CAAA,CAAA;AAAA,GACzC;AACF,CAAA;AAMA,SAAS,oBAAqD,KAAwC,EAAA;AACpG,EAAA,MAAM,cAAc,cAAe,EAAA,CAAA;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,IAAI,KAAM,CAAA,gBAAA,CAAiB,EAAE,IAAA,EAAM,aAAa,CAAA,CAAA;AACtD,IAAO,OAAA,MAAM,EAAE,WAAY,EAAA,CAAA;AAAA,GAC1B,EAAA,CAAC,KAAO,EAAA,WAAW,CAAC,CAAA,CAAA;AAEvB,EAAA,OAAO,KAAM,CAAA,KAAA,CAAA;AACf;;;;"}
+{"version":3,"file":"SceneObjectBase.js","sources":["../../../src/core/SceneObjectBase.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { Observer, Subject, Subscription, Unsubscribable } from 'rxjs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { BusEvent, BusEventHandler, BusEventType, EventBusSrv } from '@grafana/data';\nimport { SceneObject, SceneComponent, SceneObjectState, SceneObjectUrlSyncHandler } from './types';\nimport { useForceUpdate } from '@grafana/ui';\n\nimport { SceneComponentWrapper } from './SceneComponentWrapper';\nimport { SceneObjectStateChangedEvent } from './events';\nimport { cloneSceneObject, forEachSceneObjectInState } from './utils';\nimport { SceneVariableDependencyConfigLike } from '../variables/types';\n\nexport abstract class SceneObjectBase<TState extends SceneObjectState = SceneObjectState>\n  implements SceneObject<TState>\n{\n  private _isActive = false;\n  private _subject = new Subject<TState>();\n  private _state: TState;\n  private _events = new EventBusSrv();\n\n  protected _parent?: SceneObject;\n  protected _subs = new Subscription();\n\n  protected _variableDependency: SceneVariableDependencyConfigLike | undefined;\n  protected _urlSync: SceneObjectUrlSyncHandler<TState> | undefined;\n\n  public constructor(state: TState) {\n    if (!state.key) {\n      state.key = uuidv4();\n    }\n\n    this._state = Object.freeze(state);\n    this._subject.next(state);\n    this.setParent();\n  }\n\n  /** Current state */\n  public get state(): TState {\n    return this._state;\n  }\n\n  /** True if currently being active (ie displayed for visual objects) */\n  public get isActive(): boolean {\n    return this._isActive;\n  }\n\n  /** Returns the parent, undefined for root object */\n  public get parent(): SceneObject | undefined {\n    return this._parent;\n  }\n\n  /** Returns variable dependency config */\n  public get variableDependency(): SceneVariableDependencyConfigLike | undefined {\n    return this._variableDependency;\n  }\n\n  /** Returns url sync config */\n  public get urlSync(): SceneObjectUrlSyncHandler<TState> | undefined {\n    return this._urlSync;\n  }\n\n  /**\n   * Used in render functions when rendering a SceneObject.\n   * Wraps the component in an EditWrapper that handles edit mode\n   */\n  public get Component(): SceneComponent<this> {\n    return SceneComponentWrapper;\n  }\n\n  /**\n   * Temporary solution, should be replaced by declarative options\n   */\n  public get Editor(): SceneComponent<this> {\n    return ((this as any).constructor['Editor'] ?? (() => null)) as SceneComponent<this>;\n  }\n\n  private setParent() {\n    forEachSceneObjectInState(this._state, (child) => (child._parent = this));\n  }\n\n  /**\n   * Subscribe to the scene state subject\n   **/\n  public subscribeToState(observerOrNext?: Partial<Observer<TState>>): Subscription {\n    return this._subject.subscribe(observerOrNext);\n  }\n\n  /**\n   * Subscribe to the scene event\n   **/\n  public subscribeToEvent<T extends BusEvent>(eventType: BusEventType<T>, handler: BusEventHandler<T>): Unsubscribable {\n    return this._events.subscribe(eventType, handler);\n  }\n\n  public setState(update: Partial<TState>) {\n    const prevState = this._state;\n    const newState: TState = {\n      ...this._state,\n      ...update,\n    };\n\n    this._state = Object.freeze(newState);\n\n    this.setParent();\n    this._subject.next(newState);\n\n    // Bubble state change event. This is event is subscribed to by UrlSyncManager and UndoManager\n    this.publishEvent(\n      new SceneObjectStateChangedEvent({\n        prevState,\n        newState,\n        partialUpdate: update,\n        changedObject: this,\n      }),\n      true\n    );\n  }\n  /*\n   * Publish an event and optionally bubble it up the scene\n   **/\n  public publishEvent(event: BusEvent, bubble?: boolean) {\n    this._events.publish(event);\n\n    if (bubble && this.parent) {\n      this.parent.publishEvent(event, bubble);\n    }\n  }\n\n  public getRoot(): SceneObject {\n    return !this._parent ? this : this._parent.getRoot();\n  }\n\n  /**\n   * Called by the SceneComponentWrapper when the react component is mounted\n   */\n  public activate() {\n    this._isActive = true;\n\n    const { $data, $variables, $timeRange } = this.state;\n\n    if ($timeRange && !$timeRange.isActive) {\n      $timeRange.activate();\n    }\n\n    if ($variables && !$variables.isActive) {\n      $variables.activate();\n    }\n\n    if ($data && !$data.isActive) {\n      $data.activate();\n    }\n  }\n\n  /**\n   * Called by the SceneComponentWrapper when the react component is unmounted\n   */\n  public deactivate(): void {\n    this._isActive = false;\n\n    const { $data, $variables, $timeRange } = this.state;\n\n    if ($timeRange && $timeRange.isActive) {\n      $timeRange.deactivate();\n    }\n\n    if ($data && $data.isActive) {\n      $data.deactivate();\n    }\n\n    if ($variables && $variables.isActive) {\n      $variables.deactivate();\n    }\n\n    // Clear subscriptions and listeners\n    this._events.removeAllListeners();\n    this._subs.unsubscribe();\n    this._subs = new Subscription();\n\n    this._subject.complete();\n    this._subject = new Subject<TState>();\n  }\n\n  /**\n   * Utility hook to get and subscribe to state\n   */\n  public useState() {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useSceneObjectState(this);\n  }\n\n  /** Force a re-render, should only be needed when variable values change */\n  public forceRender(): void {\n    this.setState({});\n  }\n\n  /**\n   * Will create new SceneObject with shallow-cloned state, but all state items of type SceneObject are deep cloned\n   */\n  public clone(withState?: Partial<TState>): this {\n    return cloneSceneObject(this, withState);\n  }\n}\n\n/**\n * This hook is always returning model.state instead of a useState that remembers the last state emitted on the subject\n * The reason for this is so that if the model instance change this function will always return the latest state.\n */\nfunction useSceneObjectState<TState extends SceneObjectState>(model: SceneObjectBase<TState>): TState {\n  const forceUpdate = useForceUpdate();\n\n  useEffect(() => {\n    const s = model.subscribeToState({ next: forceUpdate });\n    return () => s.unsubscribe();\n  }, [model, forceUpdate]);\n\n  return model.state;\n}\n"],"names":["uuidv4"],"mappings":"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"}

package/dist/esm/core/sceneGraph.js

@@ -1,5 +1,6 @@
 import { EmptyVariableSet, EmptyDataNode, DefaultTimeRange } from '../variables/interpolation/defaults.js';
 import { sceneInterpolator } from '../variables/interpolation/sceneInterpolator.js';
+import { lookupVariable } from '../variables/lookupVariable.js';
 
 function getVariables(sceneObject) {
   if (sceneObject.state.$variables) {
@@ -55,14 +56,30 @@ function interpolate(sceneObject, value, scopedVars, format) {
   }
   return sceneInterpolator(sceneObject, value, scopedVars, format);
 }
+function hasVariableDependencyInLoadingState(sceneObject) {
+  if (!sceneObject.variableDependency) {
+    return false;
+  }
+  for (const name of sceneObject.variableDependency.getNames()) {
+    const variable = lookupVariable(name, sceneObject);
+    if (!variable) {
+      continue;
+    }
+    const set = variable.parent;
+    return set.isVariableLoadingOrWaitingToUpdate(variable);
+  }
+  return false;
+}
 const sceneGraph = {
   getVariables,
   getData,
   getTimeRange,
   getSceneEditor,
   getLayout,
-  interpolate
+  interpolate,
+  lookupVariable,
+  hasVariableDependencyInLoadingState
 };
 
-export { getData, getLayout, getSceneEditor, getTimeRange, getVariables, interpolate, sceneGraph };
+export { getData, getLayout, getSceneEditor, getTimeRange, getVariables, hasVariableDependencyInLoadingState, interpolate, sceneGraph };
 //# sourceMappingURL=sceneGraph.js.map