@grafana/scenes 6.5.1--canary.1077.13965250047.0 → 6.5.1--canary.1079.13967087962.0

package/dist/esm/components/SceneApp/SceneAppPage.js

@@ -76,22 +76,34 @@ function SceneAppPageRenderer({ model }) {
     for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
       const tab = tabs[tabIndex];
       if (tabIndex === 0) {
-        routes.push(/* @__PURE__ */ React.createElement(Route, { key: model.state.routePath, path: "", element: /* @__PURE__ */ React.createElement(tab.Component, { model: tab }) }));
+        routes.push(/* @__PURE__ */ React.createElement(Route, {
+          key: model.state.routePath,
+          path: "",
+          element: /* @__PURE__ */ React.createElement(tab.Component, {
+            model: tab
+          })
+        }));
       }
       routes.push(
-        /* @__PURE__ */ React.createElement(Route, { key: tab.state.url, path: tab.state.routePath, element: /* @__PURE__ */ React.createElement(tab.Component, { model: tab }) })
+        /* @__PURE__ */ React.createElement(Route, {
+          key: tab.state.url,
+          path: tab.state.routePath,
+          element: /* @__PURE__ */ React.createElement(tab.Component, {
+            model: tab
+          })
+        })
       );
       if (tab.state.drilldowns) {
         for (const drilldown of tab.state.drilldowns) {
           routes.push(
-            /* @__PURE__ */ React.createElement(
-              Route,
-              {
-                key: drilldown.routePath,
-                path: drilldown.routePath,
-                element: /* @__PURE__ */ React.createElement(SceneAppDrilldownViewRender, { drilldown, parent: tab })
-              }
-            )
+            /* @__PURE__ */ React.createElement(Route, {
+              key: drilldown.routePath,
+              path: drilldown.routePath,
+              element: /* @__PURE__ */ React.createElement(SceneAppDrilldownViewRender, {
+                drilldown,
+                parent: tab
+              })
+            })
           );
         }
       }
@@ -100,32 +112,37 @@ function SceneAppPageRenderer({ model }) {
   if (drilldowns) {
     for (const drilldown of drilldowns) {
       routes.push(
-        /* @__PURE__ */ React.createElement(
-          Route,
-          {
-            key: drilldown.routePath,
-            path: drilldown.routePath,
-            Component: () => /* @__PURE__ */ React.createElement(SceneAppDrilldownViewRender, { drilldown, parent: model })
-          }
-        )
+        /* @__PURE__ */ React.createElement(Route, {
+          key: drilldown.routePath,
+          path: drilldown.routePath,
+          Component: () => /* @__PURE__ */ React.createElement(SceneAppDrilldownViewRender, {
+            drilldown,
+            parent: model
+          })
+        })
       );
     }
   }
   if (!tabs) {
-    routes.push(/* @__PURE__ */ React.createElement(Route, { key: "home route", path: "/", element: /* @__PURE__ */ React.createElement(SceneAppPageView, { page: model }) }));
+    routes.push(/* @__PURE__ */ React.createElement(Route, {
+      key: "home route",
+      path: "/",
+      element: /* @__PURE__ */ React.createElement(SceneAppPageView, {
+        page: model
+      })
+    }));
   }
   return /* @__PURE__ */ React.createElement(Routes, null, routes);
 }
 function getFallbackRoute(page) {
   var _a, _b, _c;
-  return /* @__PURE__ */ React.createElement(
-    Route,
-    {
-      key: "fallback route",
-      path: "*",
-      element: /* @__PURE__ */ React.createElement(SceneAppPageView, { page: (_c = (_b = (_a = page.state).getFallbackPage) == null ? void 0 : _b.call(_a)) != null ? _c : getDefaultFallbackPage() })
-    }
-  );
+  return /* @__PURE__ */ React.createElement(Route, {
+    key: "fallback route",
+    path: "*",
+    element: /* @__PURE__ */ React.createElement(SceneAppPageView, {
+      page: (_c = (_b = (_a = page.state).getFallbackPage) == null ? void 0 : _b.call(_a)) != null ? _c : getDefaultFallbackPage()
+    })
+  });
 }
 function getDefaultFallbackPage() {
   return new SceneAppPage({
@@ -141,7 +158,9 @@ function getDefaultFallbackPage() {
             new SceneFlexItem({
               body: new SceneReactObject({
                 component: () => {
-                  return /* @__PURE__ */ React.createElement("div", { "data-testid": "default-fallback-content" }, "If you found your way here using a link then there might be a bug in this application.");
+                  return /* @__PURE__ */ React.createElement("div", {
+                    "data-testid": "default-fallback-content"
+                  }, "If you found your way here using a link then there might be a bug in this application.");
                 }
               })
             })

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

@@ -1 +1 @@
-{"version":3,"file":"SceneAppPage.js","sources":["../../../../src/components/SceneApp/SceneAppPage.tsx"],"sourcesContent":["import React from 'react';\nimport { Route, Routes } from 'react-router-dom';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneScopesBridge } from '../../core/SceneScopesBridge';\nimport { SceneComponentProps, SceneObject, isDataRequestEnricher } from '../../core/types';\nimport { EmbeddedScene } from '../EmbeddedScene';\nimport { SceneFlexItem, SceneFlexLayout } from '../layout/SceneFlexLayout';\nimport { SceneReactObject } from '../SceneReactObject';\nimport { SceneAppDrilldownViewRender, SceneAppPageView } from './SceneAppPageView';\nimport { SceneAppDrilldownView, SceneAppPageLike, SceneAppPageState, SceneRouteMatch } from './types';\n\n/**\n * Responsible for page's drilldown & tabs routing\n */\nexport class SceneAppPage extends SceneObjectBase<SceneAppPageState> implements SceneAppPageLike {\n  public static Component = SceneAppPageRenderer;\n  private _sceneCache = new Map<string, EmbeddedScene>();\n  private _drilldownCache = new Map<string, SceneAppPageLike>();\n  private _scopesBridge: SceneScopesBridge | undefined;\n\n  public constructor(state: SceneAppPageState) {\n    super(state);\n\n    this.addActivationHandler(this._activationHandler);\n  }\n\n  private _activationHandler = () => {\n    if (!this.state.useScopes) {\n      return;\n    }\n\n    this._scopesBridge = sceneGraph.getScopesBridge(this);\n\n    if (!this._scopesBridge) {\n      throw new Error('Use of scopes is enabled but no scopes bridge found');\n    }\n\n    this._scopesBridge.setEnabled(true);\n\n    return () => {\n      this._scopesBridge?.setEnabled(false);\n    };\n  };\n\n  public initializeScene(scene: EmbeddedScene) {\n    this.setState({ initializedScene: scene });\n  }\n\n  public getScene(routeMatch: SceneRouteMatch): EmbeddedScene {\n    let scene = this._sceneCache.get(routeMatch.url);\n\n    if (scene) {\n      return scene;\n    }\n\n    if (!this.state.getScene) {\n      throw new Error('Missing getScene on SceneAppPage ' + this.state.title);\n    }\n\n    scene = this.state.getScene(routeMatch);\n    this._sceneCache.set(routeMatch.url, scene);\n\n    return scene;\n  }\n\n  public getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch<{}>): SceneAppPageLike {\n    let page = this._drilldownCache.get(routeMatch!.url);\n    if (page) {\n      return page;\n    }\n\n    page = drilldown.getPage(routeMatch, this);\n    this._drilldownCache.set(routeMatch!.url, page);\n\n    return page;\n  }\n\n  public enrichDataRequest(source: SceneObject) {\n    if (this.state.getParentPage) {\n      return this.state.getParentPage().enrichDataRequest(source);\n    }\n\n    if (!this.parent) {\n      return null;\n    }\n\n    const root = this.getRoot();\n\n    if (isDataRequestEnricher(root)) {\n      return root.enrichDataRequest(source);\n    }\n\n    return null;\n  }\n}\nfunction SceneAppPageRenderer({ model }: SceneComponentProps<SceneAppPage>) {\n  const { tabs, drilldowns } = model.useState();\n  const routes: React.ReactNode[] = [];\n\n  routes.push(getFallbackRoute(model));\n\n  if (tabs && tabs.length > 0) {\n    for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {\n      const tab = tabs[tabIndex];\n\n      // Add first tab as a default route, this makes it possible for the first tab to render with the url of the parent page\n      if (tabIndex === 0) {\n        routes.push(<Route key={model.state.routePath} path=\"\" element={<tab.Component model={tab} />}></Route>);\n      }\n\n      routes.push(\n        <Route key={tab.state.url} path={tab.state.routePath} element={<tab.Component model={tab} />}></Route>\n      );\n\n      if (tab.state.drilldowns) {\n        for (const drilldown of tab.state.drilldowns) {\n          routes.push(\n            <Route\n              key={drilldown.routePath}\n              path={drilldown.routePath}\n              element={<SceneAppDrilldownViewRender drilldown={drilldown} parent={tab} />}\n            ></Route>\n          );\n        }\n      }\n    }\n  }\n\n  if (drilldowns) {\n    for (const drilldown of drilldowns) {\n      routes.push(\n        <Route\n          key={drilldown.routePath}\n          path={drilldown.routePath}\n          Component={() => <SceneAppDrilldownViewRender drilldown={drilldown} parent={model} />}\n        ></Route>\n      );\n    }\n  }\n\n  if (!tabs) {\n    routes.push(<Route key=\"home route\" path=\"/\" element={<SceneAppPageView page={model} />}></Route>);\n  }\n\n  return <Routes>{routes}</Routes>;\n}\n\nfunction getFallbackRoute(page: SceneAppPage) {\n  return (\n    <Route\n      key={'fallback route'}\n      path=\"*\"\n      element={<SceneAppPageView page={page.state.getFallbackPage?.() ?? getDefaultFallbackPage()} />}\n    ></Route>\n  );\n}\n\nfunction getDefaultFallbackPage() {\n  return new SceneAppPage({\n    url: '',\n    title: 'Not found',\n    subTitle: 'The url did not match any page',\n    routePath: '*',\n    getScene: () => {\n      return new EmbeddedScene({\n        body: new SceneFlexLayout({\n          direction: 'column',\n          children: [\n            new SceneFlexItem({\n              body: new SceneReactObject({\n                component: () => {\n                  return (\n                    <div data-testid=\"default-fallback-content\">\n                      If you found your way here using a link then there might be a bug in this application.\n                    </div>\n                  );\n                },\n              }),\n            }),\n          ],\n        }),\n      });\n    },\n  });\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SceneAppPage.js","sources":["../../../../src/components/SceneApp/SceneAppPage.tsx"],"sourcesContent":["import React from 'react';\nimport { Route, Routes } from 'react-router-dom';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneScopesBridge } from '../../core/SceneScopesBridge';\nimport { SceneComponentProps, SceneObject, isDataRequestEnricher } from '../../core/types';\nimport { EmbeddedScene } from '../EmbeddedScene';\nimport { SceneFlexItem, SceneFlexLayout } from '../layout/SceneFlexLayout';\nimport { SceneReactObject } from '../SceneReactObject';\nimport { SceneAppDrilldownViewRender, SceneAppPageView } from './SceneAppPageView';\nimport { SceneAppDrilldownView, SceneAppPageLike, SceneAppPageState, SceneRouteMatch } from './types';\n\n/**\n * Responsible for page's drilldown & tabs routing\n */\nexport class SceneAppPage extends SceneObjectBase<SceneAppPageState> implements SceneAppPageLike {\n  public static Component = SceneAppPageRenderer;\n  private _sceneCache = new Map<string, EmbeddedScene>();\n  private _drilldownCache = new Map<string, SceneAppPageLike>();\n  private _scopesBridge: SceneScopesBridge | undefined;\n\n  public constructor(state: SceneAppPageState) {\n    super(state);\n\n    this.addActivationHandler(this._activationHandler);\n  }\n\n  private _activationHandler = () => {\n    if (!this.state.useScopes) {\n      return;\n    }\n\n    this._scopesBridge = sceneGraph.getScopesBridge(this);\n\n    if (!this._scopesBridge) {\n      throw new Error('Use of scopes is enabled but no scopes bridge found');\n    }\n\n    this._scopesBridge.setEnabled(true);\n\n    return () => {\n      this._scopesBridge?.setEnabled(false);\n    };\n  };\n\n  public initializeScene(scene: EmbeddedScene) {\n    this.setState({ initializedScene: scene });\n  }\n\n  public getScene(routeMatch: SceneRouteMatch): EmbeddedScene {\n    let scene = this._sceneCache.get(routeMatch.url);\n\n    if (scene) {\n      return scene;\n    }\n\n    if (!this.state.getScene) {\n      throw new Error('Missing getScene on SceneAppPage ' + this.state.title);\n    }\n\n    scene = this.state.getScene(routeMatch);\n    this._sceneCache.set(routeMatch.url, scene);\n\n    return scene;\n  }\n\n  public getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch<{}>): SceneAppPageLike {\n    let page = this._drilldownCache.get(routeMatch!.url);\n    if (page) {\n      return page;\n    }\n\n    page = drilldown.getPage(routeMatch, this);\n    this._drilldownCache.set(routeMatch!.url, page);\n\n    return page;\n  }\n\n  public enrichDataRequest(source: SceneObject) {\n    if (this.state.getParentPage) {\n      return this.state.getParentPage().enrichDataRequest(source);\n    }\n\n    if (!this.parent) {\n      return null;\n    }\n\n    const root = this.getRoot();\n\n    if (isDataRequestEnricher(root)) {\n      return root.enrichDataRequest(source);\n    }\n\n    return null;\n  }\n}\nfunction SceneAppPageRenderer({ model }: SceneComponentProps<SceneAppPage>) {\n  const { tabs, drilldowns } = model.useState();\n  const routes: React.ReactNode[] = [];\n\n  routes.push(getFallbackRoute(model));\n\n  if (tabs && tabs.length > 0) {\n    for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {\n      const tab = tabs[tabIndex];\n\n      // Add first tab as a default route, this makes it possible for the first tab to render with the url of the parent page\n      if (tabIndex === 0) {\n        routes.push(<Route key={model.state.routePath} path=\"\" element={<tab.Component model={tab} />}></Route>);\n      }\n\n      routes.push(\n        <Route key={tab.state.url} path={tab.state.routePath} element={<tab.Component model={tab} />}></Route>\n      );\n\n      if (tab.state.drilldowns) {\n        for (const drilldown of tab.state.drilldowns) {\n          routes.push(\n            <Route\n              key={drilldown.routePath}\n              path={drilldown.routePath}\n              element={<SceneAppDrilldownViewRender drilldown={drilldown} parent={tab} />}\n            ></Route>\n          );\n        }\n      }\n    }\n  }\n\n  if (drilldowns) {\n    for (const drilldown of drilldowns) {\n      routes.push(\n        <Route\n          key={drilldown.routePath}\n          path={drilldown.routePath}\n          Component={() => <SceneAppDrilldownViewRender drilldown={drilldown} parent={model} />}\n        ></Route>\n      );\n    }\n  }\n\n  if (!tabs) {\n    routes.push(<Route key=\"home route\" path=\"/\" element={<SceneAppPageView page={model} />}></Route>);\n  }\n\n  return <Routes>{routes}</Routes>;\n}\n\nfunction getFallbackRoute(page: SceneAppPage) {\n  return (\n    <Route\n      key={'fallback route'}\n      path=\"*\"\n      element={<SceneAppPageView page={page.state.getFallbackPage?.() ?? getDefaultFallbackPage()} />}\n    ></Route>\n  );\n}\n\nfunction getDefaultFallbackPage() {\n  return new SceneAppPage({\n    url: '',\n    title: 'Not found',\n    subTitle: 'The url did not match any page',\n    routePath: '*',\n    getScene: () => {\n      return new EmbeddedScene({\n        body: new SceneFlexLayout({\n          direction: 'column',\n          children: [\n            new SceneFlexItem({\n              body: new SceneReactObject({\n                component: () => {\n                  return (\n                    <div data-testid=\"default-fallback-content\">\n                      If you found your way here using a link then there might be a bug in this application.\n                    </div>\n                  );\n                },\n              }),\n            }),\n          ],\n        }),\n      });\n    },\n  });\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/SceneApp/SceneAppPageView.js

@@ -55,22 +55,26 @@ function SceneAppPageView({ page }) {
   }
   let pageActions = [];
   if (containerState.controls) {
-    pageActions = containerState.controls.map((control) => /* @__PURE__ */ React.createElement(control.Component, { model: control, key: control.state.key }));
+    pageActions = containerState.controls.map((control) => /* @__PURE__ */ React.createElement(control.Component, {
+      model: control,
+      key: control.state.key
+    }));
   }
   if (params["scene-debugger"]) {
-    pageActions.push(/* @__PURE__ */ React.createElement(SceneDebugger, { scene: containerPage, key: "scene-debugger" }));
+    pageActions.push(/* @__PURE__ */ React.createElement(SceneDebugger, {
+      scene: containerPage,
+      key: "scene-debugger"
+    }));
   }
-  return /* @__PURE__ */ React.createElement(
-    PluginPage,
-    {
-      layout,
-      pageNav,
-      actions: pageActions,
-      renderTitle: containerState.renderTitle,
-      subTitle: containerState.subTitle
-    },
-    /* @__PURE__ */ React.createElement(scene.Component, { model: scene })
-  );
+  return /* @__PURE__ */ React.createElement(PluginPage, {
+    layout,
+    pageNav,
+    actions: pageActions,
+    renderTitle: containerState.renderTitle,
+    subTitle: containerState.subTitle
+  }, /* @__PURE__ */ React.createElement(scene.Component, {
+    model: scene
+  }));
 }
 function getParentPageIfTab(page) {
   if (page.parent instanceof SceneAppPage) {
@@ -96,7 +100,9 @@ function getParentBreadcrumbs(parent, params, searchObject) {
 function SceneAppDrilldownViewRender({ drilldown, parent }) {
   const routeMatch = useSceneRouteMatch(drilldown.routePath);
   const page = parent.getDrilldownPage(drilldown, routeMatch);
-  return /* @__PURE__ */ React.createElement(page.Component, { model: page });
+  return /* @__PURE__ */ React.createElement(page.Component, {
+    model: page
+  });
 }
 
 export { SceneAppDrilldownViewRender, SceneAppPageView };

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

@@ -1 +1 @@
-{"version":3,"file":"SceneAppPageView.js","sources":["../../../../src/components/SceneApp/SceneAppPageView.tsx"],"sourcesContent":["import { NavModelItem, UrlQueryMap } from '@grafana/data';\nimport { PluginPage } from '@grafana/runtime';\nimport React, { useContext, useEffect, useLayoutEffect } from 'react';\n\nimport { SceneObject } from '../../core/types';\nimport { SceneDebugger } from '../SceneDebugger/SceneDebugger';\nimport { SceneAppPage } from './SceneAppPage';\nimport { SceneAppDrilldownView, SceneAppPageLike } from './types';\nimport { getUrlWithAppState, useAppQueryParams, useSceneRouteMatch } from './utils';\nimport { useUrlSync } from '../../services/useUrlSync';\nimport { SceneAppContext } from './SceneApp';\nimport { useLocationServiceSafe } from '../../utils/utils';\n\nexport interface Props {\n  page: SceneAppPageLike;\n}\n\nexport function SceneAppPageView({ page }: Props) {\n  const routeMatch = useSceneRouteMatch(page.state.url);\n  const containerPage = getParentPageIfTab(page);\n  const containerState = containerPage.useState();\n  const params = useAppQueryParams();\n  const scene = page.getScene(routeMatch);\n  const appContext = useContext(SceneAppContext);\n  const isInitialized = containerState.initializedScene === scene;\n  const { layout } = page.state;\n  const locationService = useLocationServiceSafe();\n\n  useLayoutEffect(() => {\n    // Before rendering scene components, we are making sure the URL sync is enabled for.\n    if (!isInitialized) {\n      containerPage.initializeScene(scene);\n    }\n  }, [scene, containerPage, isInitialized]);\n\n  useEffect(() => {\n    // Clear initializedScene when unmounting\n    return () => containerPage.setState({ initializedScene: undefined });\n  }, [containerPage]);\n\n  const urlSyncInitialized = useUrlSync(containerPage, appContext?.state.urlSyncOptions);\n\n  if (!isInitialized && !urlSyncInitialized) {\n    return null;\n  }\n\n  const pageNav: NavModelItem = {\n    text: containerState.title,\n    img: containerState.titleImg,\n    icon: containerState.titleIcon,\n    url: getUrlWithAppState(containerState.url, locationService.getSearchObject(), containerState.preserveUrlKeys),\n    hideFromBreadcrumbs: containerState.hideFromBreadcrumbs,\n    parentItem: getParentBreadcrumbs(\n      containerState.getParentPage ? containerState.getParentPage() : containerPage.parent,\n      params,\n      locationService.getSearchObject()\n    ),\n  };\n\n  if (containerState.tabs) {\n    pageNav.children = containerState.tabs.map((tab) => {\n      return {\n        text: tab.state.title,\n        icon: tab.state.titleIcon,\n        tabSuffix: tab.state.tabSuffix,\n        active: page === tab,\n        url: getUrlWithAppState(tab.state.url, locationService.getSearchObject(), tab.state.preserveUrlKeys),\n        parentItem: pageNav,\n      };\n    });\n  }\n\n  let pageActions: React.ReactNode[] = [];\n  if (containerState.controls) {\n    pageActions = containerState.controls.map((control) => (\n      <control.Component model={control} key={control.state.key} />\n    ));\n  }\n\n  if (params['scene-debugger']) {\n    pageActions.push(<SceneDebugger scene={containerPage} key={'scene-debugger'} />);\n  }\n\n  return (\n    <PluginPage\n      layout={layout}\n      pageNav={pageNav}\n      actions={pageActions}\n      renderTitle={containerState.renderTitle}\n      subTitle={containerState.subTitle}\n    >\n      <scene.Component model={scene} />\n    </PluginPage>\n  );\n}\n\n/**\n * For pages that are \"tabs\" this will return the parent page\n */\nfunction getParentPageIfTab(page: SceneAppPageLike) {\n  if (page.parent instanceof SceneAppPage) {\n    return page.parent;\n  }\n\n  return page;\n}\n\nfunction getParentBreadcrumbs(\n  parent: SceneObject | undefined,\n  params: UrlQueryMap,\n  searchObject: UrlQueryMap\n): NavModelItem | undefined {\n  if (parent instanceof SceneAppPage) {\n    return {\n      text: parent.state.title,\n      url: getUrlWithAppState(parent.state.url, searchObject, parent.state.preserveUrlKeys),\n      hideFromBreadcrumbs: parent.state.hideFromBreadcrumbs,\n      parentItem: getParentBreadcrumbs(\n        parent.state.getParentPage ? parent.state.getParentPage() : parent.parent,\n        params,\n        searchObject\n      ),\n    };\n  }\n\n  return undefined;\n}\n\nexport interface SceneAppDrilldownViewRenderProps {\n  drilldown: SceneAppDrilldownView;\n  parent: SceneAppPageLike;\n}\n\nexport function SceneAppDrilldownViewRender({ drilldown, parent }: SceneAppDrilldownViewRenderProps) {\n  const routeMatch = useSceneRouteMatch(drilldown.routePath!);\n  const page = parent.getDrilldownPage(drilldown, routeMatch);\n  return <page.Component model={page} />;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SceneAppPageView.js","sources":["../../../../src/components/SceneApp/SceneAppPageView.tsx"],"sourcesContent":["import { NavModelItem, UrlQueryMap } from '@grafana/data';\nimport { PluginPage } from '@grafana/runtime';\nimport React, { useContext, useEffect, useLayoutEffect } from 'react';\n\nimport { SceneObject } from '../../core/types';\nimport { SceneDebugger } from '../SceneDebugger/SceneDebugger';\nimport { SceneAppPage } from './SceneAppPage';\nimport { SceneAppDrilldownView, SceneAppPageLike } from './types';\nimport { getUrlWithAppState, useAppQueryParams, useSceneRouteMatch } from './utils';\nimport { useUrlSync } from '../../services/useUrlSync';\nimport { SceneAppContext } from './SceneApp';\nimport { useLocationServiceSafe } from '../../utils/utils';\n\nexport interface Props {\n  page: SceneAppPageLike;\n}\n\nexport function SceneAppPageView({ page }: Props) {\n  const routeMatch = useSceneRouteMatch(page.state.url);\n  const containerPage = getParentPageIfTab(page);\n  const containerState = containerPage.useState();\n  const params = useAppQueryParams();\n  const scene = page.getScene(routeMatch);\n  const appContext = useContext(SceneAppContext);\n  const isInitialized = containerState.initializedScene === scene;\n  const { layout } = page.state;\n  const locationService = useLocationServiceSafe();\n\n  useLayoutEffect(() => {\n    // Before rendering scene components, we are making sure the URL sync is enabled for.\n    if (!isInitialized) {\n      containerPage.initializeScene(scene);\n    }\n  }, [scene, containerPage, isInitialized]);\n\n  useEffect(() => {\n    // Clear initializedScene when unmounting\n    return () => containerPage.setState({ initializedScene: undefined });\n  }, [containerPage]);\n\n  const urlSyncInitialized = useUrlSync(containerPage, appContext?.state.urlSyncOptions);\n\n  if (!isInitialized && !urlSyncInitialized) {\n    return null;\n  }\n\n  const pageNav: NavModelItem = {\n    text: containerState.title,\n    img: containerState.titleImg,\n    icon: containerState.titleIcon,\n    url: getUrlWithAppState(containerState.url, locationService.getSearchObject(), containerState.preserveUrlKeys),\n    hideFromBreadcrumbs: containerState.hideFromBreadcrumbs,\n    parentItem: getParentBreadcrumbs(\n      containerState.getParentPage ? containerState.getParentPage() : containerPage.parent,\n      params,\n      locationService.getSearchObject()\n    ),\n  };\n\n  if (containerState.tabs) {\n    pageNav.children = containerState.tabs.map((tab) => {\n      return {\n        text: tab.state.title,\n        icon: tab.state.titleIcon,\n        tabSuffix: tab.state.tabSuffix,\n        active: page === tab,\n        url: getUrlWithAppState(tab.state.url, locationService.getSearchObject(), tab.state.preserveUrlKeys),\n        parentItem: pageNav,\n      };\n    });\n  }\n\n  let pageActions: React.ReactNode[] = [];\n  if (containerState.controls) {\n    pageActions = containerState.controls.map((control) => (\n      <control.Component model={control} key={control.state.key} />\n    ));\n  }\n\n  if (params['scene-debugger']) {\n    pageActions.push(<SceneDebugger scene={containerPage} key={'scene-debugger'} />);\n  }\n\n  return (\n    <PluginPage\n      layout={layout}\n      pageNav={pageNav}\n      actions={pageActions}\n      renderTitle={containerState.renderTitle}\n      subTitle={containerState.subTitle}\n    >\n      <scene.Component model={scene} />\n    </PluginPage>\n  );\n}\n\n/**\n * For pages that are \"tabs\" this will return the parent page\n */\nfunction getParentPageIfTab(page: SceneAppPageLike) {\n  if (page.parent instanceof SceneAppPage) {\n    return page.parent;\n  }\n\n  return page;\n}\n\nfunction getParentBreadcrumbs(\n  parent: SceneObject | undefined,\n  params: UrlQueryMap,\n  searchObject: UrlQueryMap\n): NavModelItem | undefined {\n  if (parent instanceof SceneAppPage) {\n    return {\n      text: parent.state.title,\n      url: getUrlWithAppState(parent.state.url, searchObject, parent.state.preserveUrlKeys),\n      hideFromBreadcrumbs: parent.state.hideFromBreadcrumbs,\n      parentItem: getParentBreadcrumbs(\n        parent.state.getParentPage ? parent.state.getParentPage() : parent.parent,\n        params,\n        searchObject\n      ),\n    };\n  }\n\n  return undefined;\n}\n\nexport interface SceneAppDrilldownViewRenderProps {\n  drilldown: SceneAppDrilldownView;\n  parent: SceneAppPageLike;\n}\n\nexport function SceneAppDrilldownViewRender({ drilldown, parent }: SceneAppDrilldownViewRenderProps) {\n  const routeMatch = useSceneRouteMatch(drilldown.routePath!);\n  const page = parent.getDrilldownPage(drilldown, routeMatch);\n  return <page.Component model={page} />;\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,13 +1,29 @@
-import { useParams, useLocation, matchPath } from 'react-router-dom';
+import { useLocation, useParams, matchPath } from 'react-router-dom';
 import { urlUtil, locationUtil } from '@grafana/data';
 import { locationSearchToObject } from '@grafana/runtime';
 
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 function useAppQueryParams() {
   const location = useLocation();
   return locationSearchToObject(location.search || "");
 }
 function getUrlWithAppState(path, searchObject, preserveParams) {
-  const paramsCopy = { ...searchObject };
+  const paramsCopy = __spreadValues({}, searchObject);
   if (preserveParams) {
     for (const key of Object.keys(paramsCopy)) {
       if (!preserveParams.includes(key)) {

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/SceneApp/utils.ts"],"sourcesContent":["import { matchPath, useLocation, useParams } from 'react-router-dom';\nimport { UrlQueryMap, locationUtil, urlUtil } from '@grafana/data';\nimport { locationSearchToObject } from '@grafana/runtime';\nimport { SceneRouteMatch } from './types';\n\nexport function useAppQueryParams(): UrlQueryMap {\n  const location = useLocation();\n  return locationSearchToObject(location.search || '');\n}\n\n/**\n *\n * @param path Url to append query params to\n * @param searchObject Query params of the URL\n * @param preserveParams Query params to preserve\n * @returns Url with query params\n */\nexport function getUrlWithAppState(path: string, searchObject: UrlQueryMap, preserveParams?: string[]): string {\n  // make a copy of params as the renderUrl function mutates the object\n  const paramsCopy = { ...searchObject };\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(locationUtil.assureBaseUrl(path), paramsCopy);\n}\n\nexport function useSceneRouteMatch(path: string) {\n  const params = useParams();\n  const location = useLocation();\n  const isExact = matchPath(\n    {\n      path,\n      caseSensitive: false,\n      end: true,\n    },\n    location.pathname\n  );\n\n  const match: SceneRouteMatch = {\n    params,\n    isExact: isExact !== null,\n    path: location.pathname,\n    url: location.pathname,\n  };\n\n  return match;\n}\n"],"names":[],"mappings":";;;;AAKO,SAAS,iBAAiC,GAAA;AAC/C,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAO,OAAA,sBAAA,CAAuB,QAAS,CAAA,MAAA,IAAU,EAAE,CAAA;AACrD;AASgB,SAAA,kBAAA,CAAmB,IAAc,EAAA,YAAA,EAA2B,cAAmC,EAAA;AAE7G,EAAM,MAAA,UAAA,GAAa,EAAE,GAAG,YAAa,EAAA;AAErC,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,WAAW,GAAG,CAAA;AAAA;AACvB;AACF;AAGF,EAAA,OAAO,QAAQ,SAAU,CAAA,YAAA,CAAa,aAAc,CAAA,IAAI,GAAG,UAAU,CAAA;AACvE;AAEO,SAAS,mBAAmB,IAAc,EAAA;AAC/C,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,OAAU,GAAA,SAAA;AAAA,IACd;AAAA,MACE,IAAA;AAAA,MACA,aAAe,EAAA,KAAA;AAAA,MACf,GAAK,EAAA;AAAA,KACP;AAAA,IACA,QAAS,CAAA;AAAA,GACX;AAEA,EAAA,MAAM,KAAyB,GAAA;AAAA,IAC7B,MAAA;AAAA,IACA,SAAS,OAAY,KAAA,IAAA;AAAA,IACrB,MAAM,QAAS,CAAA,QAAA;AAAA,IACf,KAAK,QAAS,CAAA;AAAA,GAChB;AAEA,EAAO,OAAA,KAAA;AACT;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/SceneApp/utils.ts"],"sourcesContent":["import { matchPath, useLocation, useParams } from 'react-router-dom';\nimport { UrlQueryMap, locationUtil, urlUtil } from '@grafana/data';\nimport { locationSearchToObject } from '@grafana/runtime';\nimport { SceneRouteMatch } from './types';\n\nexport function useAppQueryParams(): UrlQueryMap {\n  const location = useLocation();\n  return locationSearchToObject(location.search || '');\n}\n\n/**\n *\n * @param path Url to append query params to\n * @param searchObject Query params of the URL\n * @param preserveParams Query params to preserve\n * @returns Url with query params\n */\nexport function getUrlWithAppState(path: string, searchObject: UrlQueryMap, preserveParams?: string[]): string {\n  // make a copy of params as the renderUrl function mutates the object\n  const paramsCopy = { ...searchObject };\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(locationUtil.assureBaseUrl(path), paramsCopy);\n}\n\nexport function useSceneRouteMatch(path: string) {\n  const params = useParams();\n  const location = useLocation();\n  const isExact = matchPath(\n    {\n      path,\n      caseSensitive: false,\n      end: true,\n    },\n    location.pathname\n  );\n\n  const match: SceneRouteMatch = {\n    params,\n    isExact: isExact !== null,\n    path: location.pathname,\n    url: location.pathname,\n  };\n\n  return match;\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;AASgB,SAAA,kBAAA,CAAmB,IAAc,EAAA,YAAA,EAA2B,cAAmC,EAAA;AAE7G,EAAA,MAAM,aAAa,cAAK,CAAA,EAAA,EAAA,YAAA,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,EAAA,OAAO,QAAQ,SAAU,CAAA,YAAA,CAAa,aAAc,CAAA,IAAI,GAAG,UAAU,CAAA,CAAA;AACvE,CAAA;AAEO,SAAS,mBAAmB,IAAc,EAAA;AAC/C,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAA,MAAM,OAAU,GAAA,SAAA;AAAA,IACd;AAAA,MACE,IAAA;AAAA,MACA,aAAe,EAAA,KAAA;AAAA,MACf,GAAK,EAAA,IAAA;AAAA,KACP;AAAA,IACA,QAAS,CAAA,QAAA;AAAA,GACX,CAAA;AAEA,EAAA,MAAM,KAAyB,GAAA;AAAA,IAC7B,MAAA;AAAA,IACA,SAAS,OAAY,KAAA,IAAA;AAAA,IACrB,MAAM,QAAS,CAAA,QAAA;AAAA,IACf,KAAK,QAAS,CAAA,QAAA;AAAA,GAChB,CAAA;AAEA,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}

package/dist/esm/components/SceneByFrameRepeater.js

@@ -32,7 +32,9 @@ class SceneByFrameRepeater extends SceneObjectBase {
 }
 SceneByFrameRepeater.Component = ({ model }) => {
   const { body } = model.useState();
-  return /* @__PURE__ */ React.createElement(body.Component, { model: body });
+  return /* @__PURE__ */ React.createElement(body.Component, {
+    model: body
+  });
 };
 
 export { SceneByFrameRepeater };

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

@@ -1 +1 @@
-{"version":3,"file":"SceneByFrameRepeater.js","sources":["../../../src/components/SceneByFrameRepeater.tsx"],"sourcesContent":["import React from 'react';\n\nimport { LoadingState, PanelData, DataFrame } from '@grafana/data';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneLayout, SceneObject, SceneObjectState } from '../core/types';\n\ninterface SceneByFrameRepeaterState extends SceneObjectState {\n  body: SceneLayout;\n  getLayoutChild(data: PanelData, frame: DataFrame, frameIndex: number): SceneObject;\n}\n\nexport class SceneByFrameRepeater extends SceneObjectBase<SceneByFrameRepeaterState> {\n  public constructor(state: SceneByFrameRepeaterState) {\n    super(state);\n\n    this.addActivationHandler(() => {\n      const dataProvider = sceneGraph.getData(this);\n\n      this._subs.add(\n        dataProvider.subscribeToState((data) => {\n          if (data.data?.state === LoadingState.Done) {\n            this.performRepeat(data.data);\n          }\n        })\n      );\n\n      if (dataProvider.state.data) {\n        this.performRepeat(dataProvider.state.data);\n      }\n    });\n  }\n\n  private performRepeat(data: PanelData) {\n    const newChildren: SceneObject[] = [];\n\n    for (let seriesIndex = 0; seriesIndex < data.series.length; seriesIndex++) {\n      const layoutChild = this.state.getLayoutChild(data, data.series[seriesIndex], seriesIndex);\n      newChildren.push(layoutChild);\n    }\n\n    this.state.body.setState({ children: newChildren });\n  }\n\n  public static Component = ({ model }: SceneComponentProps<SceneByFrameRepeater>) => {\n    const { body } = model.useState();\n    return <body.Component model={body} />;\n  };\n}\n"],"names":[],"mappings":";;;;;AAaO,MAAM,6BAA6B,eAA2C,CAAA;AAAA,EAC5E,YAAY,KAAkC,EAAA;AACnD,IAAA,KAAA,CAAM,KAAK,CAAA;AAEX,IAAA,IAAA,CAAK,qBAAqB,MAAM;AAC9B,MAAM,MAAA,YAAA,GAAe,UAAW,CAAA,OAAA,CAAQ,IAAI,CAAA;AAE5C,MAAA,IAAA,CAAK,KAAM,CAAA,GAAA;AAAA,QACT,YAAA,CAAa,gBAAiB,CAAA,CAAC,IAAS,KAAA;AArBhD,UAAA,IAAA,EAAA;AAsBU,UAAA,IAAA,CAAA,CAAI,EAAK,GAAA,IAAA,CAAA,IAAA,KAAL,IAAW,GAAA,MAAA,GAAA,EAAA,CAAA,KAAA,MAAU,aAAa,IAAM,EAAA;AAC1C,YAAK,IAAA,CAAA,aAAA,CAAc,KAAK,IAAI,CAAA;AAAA;AAC9B,SACD;AAAA,OACH;AAEA,MAAI,IAAA,YAAA,CAAa,MAAM,IAAM,EAAA;AAC3B,QAAK,IAAA,CAAA,aAAA,CAAc,YAAa,CAAA,KAAA,CAAM,IAAI,CAAA;AAAA;AAC5C,KACD,CAAA;AAAA;AACH,EAEQ,cAAc,IAAiB,EAAA;AACrC,IAAA,MAAM,cAA6B,EAAC;AAEpC,IAAA,KAAA,IAAS,cAAc,CAAG,EAAA,WAAA,GAAc,IAAK,CAAA,MAAA,CAAO,QAAQ,WAAe,EAAA,EAAA;AACzE,MAAM,MAAA,WAAA,GAAc,KAAK,KAAM,CAAA,cAAA,CAAe,MAAM,IAAK,CAAA,MAAA,CAAO,WAAW,CAAA,EAAG,WAAW,CAAA;AACzF,MAAA,WAAA,CAAY,KAAK,WAAW,CAAA;AAAA;AAG9B,IAAA,IAAA,CAAK,MAAM,IAAK,CAAA,QAAA,CAAS,EAAE,QAAA,EAAU,aAAa,CAAA;AAAA;AAOtD;AApCa,oBAAA,CAgCG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAuD,KAAA;AAClF,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,EAAA;AAChC,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,SAAL,EAAA,EAAe,OAAO,IAAM,EAAA,CAAA;AACtC,CAAA;;;;"}
+{"version":3,"file":"SceneByFrameRepeater.js","sources":["../../../src/components/SceneByFrameRepeater.tsx"],"sourcesContent":["import React from 'react';\n\nimport { LoadingState, PanelData, DataFrame } from '@grafana/data';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneLayout, SceneObject, SceneObjectState } from '../core/types';\n\ninterface SceneByFrameRepeaterState extends SceneObjectState {\n  body: SceneLayout;\n  getLayoutChild(data: PanelData, frame: DataFrame, frameIndex: number): SceneObject;\n}\n\nexport class SceneByFrameRepeater extends SceneObjectBase<SceneByFrameRepeaterState> {\n  public constructor(state: SceneByFrameRepeaterState) {\n    super(state);\n\n    this.addActivationHandler(() => {\n      const dataProvider = sceneGraph.getData(this);\n\n      this._subs.add(\n        dataProvider.subscribeToState((data) => {\n          if (data.data?.state === LoadingState.Done) {\n            this.performRepeat(data.data);\n          }\n        })\n      );\n\n      if (dataProvider.state.data) {\n        this.performRepeat(dataProvider.state.data);\n      }\n    });\n  }\n\n  private performRepeat(data: PanelData) {\n    const newChildren: SceneObject[] = [];\n\n    for (let seriesIndex = 0; seriesIndex < data.series.length; seriesIndex++) {\n      const layoutChild = this.state.getLayoutChild(data, data.series[seriesIndex], seriesIndex);\n      newChildren.push(layoutChild);\n    }\n\n    this.state.body.setState({ children: newChildren });\n  }\n\n  public static Component = ({ model }: SceneComponentProps<SceneByFrameRepeater>) => {\n    const { body } = model.useState();\n    return <body.Component model={body} />;\n  };\n}\n"],"names":[],"mappings":";;;;;AAaO,MAAM,6BAA6B,eAA2C,CAAA;AAAA,EAC5E,YAAY,KAAkC,EAAA;AACnD,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAEX,IAAA,IAAA,CAAK,qBAAqB,MAAM;AAC9B,MAAM,MAAA,YAAA,GAAe,UAAW,CAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAE5C,MAAA,IAAA,CAAK,KAAM,CAAA,GAAA;AAAA,QACT,YAAA,CAAa,gBAAiB,CAAA,CAAC,IAAS,KAAA;AArBhD,UAAA,IAAA,EAAA,CAAA;AAsBU,UAAA,IAAA,CAAA,CAAI,EAAK,GAAA,IAAA,CAAA,IAAA,KAAL,IAAW,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,MAAU,aAAa,IAAM,EAAA;AAC1C,YAAK,IAAA,CAAA,aAAA,CAAc,KAAK,IAAI,CAAA,CAAA;AAAA,WAC9B;AAAA,SACD,CAAA;AAAA,OACH,CAAA;AAEA,MAAI,IAAA,YAAA,CAAa,MAAM,IAAM,EAAA;AAC3B,QAAK,IAAA,CAAA,aAAA,CAAc,YAAa,CAAA,KAAA,CAAM,IAAI,CAAA,CAAA;AAAA,OAC5C;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAAA,EAEQ,cAAc,IAAiB,EAAA;AACrC,IAAA,MAAM,cAA6B,EAAC,CAAA;AAEpC,IAAA,KAAA,IAAS,cAAc,CAAG,EAAA,WAAA,GAAc,IAAK,CAAA,MAAA,CAAO,QAAQ,WAAe,EAAA,EAAA;AACzE,MAAM,MAAA,WAAA,GAAc,KAAK,KAAM,CAAA,cAAA,CAAe,MAAM,IAAK,CAAA,MAAA,CAAO,cAAc,WAAW,CAAA,CAAA;AACzF,MAAA,WAAA,CAAY,KAAK,WAAW,CAAA,CAAA;AAAA,KAC9B;AAEA,IAAA,IAAA,CAAK,MAAM,IAAK,CAAA,QAAA,CAAS,EAAE,QAAA,EAAU,aAAa,CAAA,CAAA;AAAA,GACpD;AAMF,CAAA;AApCa,oBAAA,CAgCG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAuD,KAAA;AAClF,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAChC,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAAA,CAAA;AACtC,CAAA;;;;"}

package/dist/esm/components/SceneByVariableRepeater.js

@@ -36,7 +36,9 @@ class SceneByVariableRepeater extends SceneObjectBase {
 }
 SceneByVariableRepeater.Component = ({ model }) => {
   const { body } = model.useState();
-  return /* @__PURE__ */ React.createElement(body.Component, { model: body });
+  return /* @__PURE__ */ React.createElement(body.Component, {
+    model: body
+  });
 };
 function getMultiVariableValues(variable) {
   const { value, text, options } = variable.state;

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

@@ -1 +1 @@
-{"version":3,"file":"SceneByVariableRepeater.js","sources":["../../../src/components/SceneByVariableRepeater.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneLayout, SceneObject, SceneObjectState } from '../core/types';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\nimport { VariableValueOption } from '../variables/types';\nimport { MultiValueVariable } from '../variables/variants/MultiValueVariable';\n\ninterface SceneByVariableRepeaterState extends SceneObjectState {\n  body: SceneLayout;\n  variableName: string;\n  getLayoutChild(option: VariableValueOption): SceneObject;\n}\n\nexport class SceneByVariableRepeater extends SceneObjectBase<SceneByVariableRepeaterState> {\n  protected _variableDependency: VariableDependencyConfig<SceneByVariableRepeaterState> = new VariableDependencyConfig(\n    this,\n    {\n      variableNames: [this.state.variableName],\n      onVariableUpdateCompleted: () => this.performRepeat(),\n    }\n  );\n\n  public constructor(state: SceneByVariableRepeaterState) {\n    super(state);\n\n    this.addActivationHandler(() => this.performRepeat());\n  }\n\n  private performRepeat() {\n    if (this._variableDependency.hasDependencyInLoadingState()) {\n      return;\n    }\n\n    const variable = sceneGraph.lookupVariable(this.state.variableName, this);\n    if (!(variable instanceof MultiValueVariable)) {\n      console.error('SceneByVariableRepeater: variable is not a MultiValueVariable');\n      return;\n    }\n\n    const values = getMultiVariableValues(variable);\n    const newChildren: SceneObject[] = [];\n\n    for (const option of values) {\n      const layoutChild = this.state.getLayoutChild(option);\n      newChildren.push(layoutChild);\n    }\n\n    this.state.body.setState({ children: newChildren });\n  }\n\n  public static Component = ({ model }: SceneComponentProps<SceneByVariableRepeater>) => {\n    const { body } = model.useState();\n    return <body.Component model={body} />;\n  };\n}\n\nexport function getMultiVariableValues(variable: MultiValueVariable): VariableValueOption[] {\n  const { value, text, options } = variable.state;\n\n  if (variable.hasAllValue()) {\n    return options;\n  }\n\n  if (Array.isArray(value) && Array.isArray(text)) {\n    return value.map((v, i) => ({ value: v, label: text[i] as string }));\n  }\n\n  return [{ value: value as string, label: text as string }];\n}\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,gCAAgC,eAA8C,CAAA;AAAA,EASlF,YAAY,KAAqC,EAAA;AACtD,IAAA,KAAA,CAAM,KAAK,CAAA;AATb,IAAA,IAAA,CAAU,sBAA8E,IAAI,wBAAA;AAAA,MAC1F,IAAA;AAAA,MACA;AAAA,QACE,aAAe,EAAA,CAAC,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA;AAAA,QACvC,yBAAA,EAA2B,MAAM,IAAA,CAAK,aAAc;AAAA;AACtD,KACF;AAKE,IAAA,IAAA,CAAK,oBAAqB,CAAA,MAAM,IAAK,CAAA,aAAA,EAAe,CAAA;AAAA;AACtD,EAEQ,aAAgB,GAAA;AACtB,IAAI,IAAA,IAAA,CAAK,mBAAoB,CAAA,2BAAA,EAA+B,EAAA;AAC1D,MAAA;AAAA;AAGF,IAAA,MAAM,WAAW,UAAW,CAAA,cAAA,CAAe,IAAK,CAAA,KAAA,CAAM,cAAc,IAAI,CAAA;AACxE,IAAI,IAAA,EAAE,oBAAoB,kBAAqB,CAAA,EAAA;AAC7C,MAAA,OAAA,CAAQ,MAAM,+DAA+D,CAAA;AAC7E,MAAA;AAAA;AAGF,IAAM,MAAA,MAAA,GAAS,uBAAuB,QAAQ,CAAA;AAC9C,IAAA,MAAM,cAA6B,EAAC;AAEpC,IAAA,KAAA,MAAW,UAAU,MAAQ,EAAA;AAC3B,MAAA,MAAM,WAAc,GAAA,IAAA,CAAK,KAAM,CAAA,cAAA,CAAe,MAAM,CAAA;AACpD,MAAA,WAAA,CAAY,KAAK,WAAW,CAAA;AAAA;AAG9B,IAAA,IAAA,CAAK,MAAM,IAAK,CAAA,QAAA,CAAS,EAAE,QAAA,EAAU,aAAa,CAAA;AAAA;AAOtD;AAzCa,uBAAA,CAqCG,SAAY,GAAA,CAAC,EAAE,KAAA,EAA0D,KAAA;AACrF,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,EAAA;AAChC,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,SAAL,EAAA,EAAe,OAAO,IAAM,EAAA,CAAA;AACtC,CAAA;AAGK,SAAS,uBAAuB,QAAqD,EAAA;AAC1F,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,OAAA,KAAY,QAAS,CAAA,KAAA;AAE1C,EAAI,IAAA,QAAA,CAAS,aAAe,EAAA;AAC1B,IAAO,OAAA,OAAA;AAAA;AAGT,EAAA,IAAI,MAAM,OAAQ,CAAA,KAAK,KAAK,KAAM,CAAA,OAAA,CAAQ,IAAI,CAAG,EAAA;AAC/C,IAAA,OAAO,KAAM,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAO,MAAA,EAAE,KAAO,EAAA,CAAA,EAAG,KAAO,EAAA,IAAA,CAAK,CAAC,CAAA,EAAc,CAAA,CAAA;AAAA;AAGrE,EAAA,OAAO,CAAC,EAAE,KAAwB,EAAA,KAAA,EAAO,MAAgB,CAAA;AAC3D;;;;"}
+{"version":3,"file":"SceneByVariableRepeater.js","sources":["../../../src/components/SceneByVariableRepeater.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneLayout, SceneObject, SceneObjectState } from '../core/types';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\nimport { VariableValueOption } from '../variables/types';\nimport { MultiValueVariable } from '../variables/variants/MultiValueVariable';\n\ninterface SceneByVariableRepeaterState extends SceneObjectState {\n  body: SceneLayout;\n  variableName: string;\n  getLayoutChild(option: VariableValueOption): SceneObject;\n}\n\nexport class SceneByVariableRepeater extends SceneObjectBase<SceneByVariableRepeaterState> {\n  protected _variableDependency: VariableDependencyConfig<SceneByVariableRepeaterState> = new VariableDependencyConfig(\n    this,\n    {\n      variableNames: [this.state.variableName],\n      onVariableUpdateCompleted: () => this.performRepeat(),\n    }\n  );\n\n  public constructor(state: SceneByVariableRepeaterState) {\n    super(state);\n\n    this.addActivationHandler(() => this.performRepeat());\n  }\n\n  private performRepeat() {\n    if (this._variableDependency.hasDependencyInLoadingState()) {\n      return;\n    }\n\n    const variable = sceneGraph.lookupVariable(this.state.variableName, this);\n    if (!(variable instanceof MultiValueVariable)) {\n      console.error('SceneByVariableRepeater: variable is not a MultiValueVariable');\n      return;\n    }\n\n    const values = getMultiVariableValues(variable);\n    const newChildren: SceneObject[] = [];\n\n    for (const option of values) {\n      const layoutChild = this.state.getLayoutChild(option);\n      newChildren.push(layoutChild);\n    }\n\n    this.state.body.setState({ children: newChildren });\n  }\n\n  public static Component = ({ model }: SceneComponentProps<SceneByVariableRepeater>) => {\n    const { body } = model.useState();\n    return <body.Component model={body} />;\n  };\n}\n\nexport function getMultiVariableValues(variable: MultiValueVariable): VariableValueOption[] {\n  const { value, text, options } = variable.state;\n\n  if (variable.hasAllValue()) {\n    return options;\n  }\n\n  if (Array.isArray(value) && Array.isArray(text)) {\n    return value.map((v, i) => ({ value: v, label: text[i] as string }));\n  }\n\n  return [{ value: value as string, label: text as string }];\n}\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,gCAAgC,eAA8C,CAAA;AAAA,EASlF,YAAY,KAAqC,EAAA;AACtD,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AATb,IAAA,IAAA,CAAU,sBAA8E,IAAI,wBAAA;AAAA,MAC1F,IAAA;AAAA,MACA;AAAA,QACE,aAAe,EAAA,CAAC,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA;AAAA,QACvC,yBAAA,EAA2B,MAAM,IAAA,CAAK,aAAc,EAAA;AAAA,OACtD;AAAA,KACF,CAAA;AAKE,IAAA,IAAA,CAAK,oBAAqB,CAAA,MAAM,IAAK,CAAA,aAAA,EAAe,CAAA,CAAA;AAAA,GACtD;AAAA,EAEQ,aAAgB,GAAA;AACtB,IAAI,IAAA,IAAA,CAAK,mBAAoB,CAAA,2BAAA,EAA+B,EAAA;AAC1D,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,WAAW,UAAW,CAAA,cAAA,CAAe,IAAK,CAAA,KAAA,CAAM,cAAc,IAAI,CAAA,CAAA;AACxE,IAAI,IAAA,EAAE,oBAAoB,kBAAqB,CAAA,EAAA;AAC7C,MAAA,OAAA,CAAQ,MAAM,+DAA+D,CAAA,CAAA;AAC7E,MAAA,OAAA;AAAA,KACF;AAEA,IAAM,MAAA,MAAA,GAAS,uBAAuB,QAAQ,CAAA,CAAA;AAC9C,IAAA,MAAM,cAA6B,EAAC,CAAA;AAEpC,IAAA,KAAA,MAAW,UAAU,MAAQ,EAAA;AAC3B,MAAA,MAAM,WAAc,GAAA,IAAA,CAAK,KAAM,CAAA,cAAA,CAAe,MAAM,CAAA,CAAA;AACpD,MAAA,WAAA,CAAY,KAAK,WAAW,CAAA,CAAA;AAAA,KAC9B;AAEA,IAAA,IAAA,CAAK,MAAM,IAAK,CAAA,QAAA,CAAS,EAAE,QAAA,EAAU,aAAa,CAAA,CAAA;AAAA,GACpD;AAMF,CAAA;AAzCa,uBAAA,CAqCG,SAAY,GAAA,CAAC,EAAE,KAAA,EAA0D,KAAA;AACrF,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAChC,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAAA,CAAA;AACtC,CAAA,CAAA;AAGK,SAAS,uBAAuB,QAAqD,EAAA;AAC1F,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,OAAA,KAAY,QAAS,CAAA,KAAA,CAAA;AAE1C,EAAI,IAAA,QAAA,CAAS,aAAe,EAAA;AAC1B,IAAO,OAAA,OAAA,CAAA;AAAA,GACT;AAEA,EAAA,IAAI,MAAM,OAAQ,CAAA,KAAK,KAAK,KAAM,CAAA,OAAA,CAAQ,IAAI,CAAG,EAAA;AAC/C,IAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,CAAG,EAAA,CAAA,MAAO,EAAE,KAAA,EAAO,CAAG,EAAA,KAAA,EAAO,IAAK,CAAA,CAAA,CAAA,EAAe,CAAA,CAAA,CAAA;AAAA,GACrE;AAEA,EAAA,OAAO,CAAC,EAAE,KAAwB,EAAA,KAAA,EAAO,MAAgB,CAAA,CAAA;AAC3D;;;;"}

package/dist/esm/components/SceneCanvasText.js

@@ -22,7 +22,10 @@ SceneCanvasText.Component = ({ model }) => {
     padding: spacing ? theme.spacing(spacing, 0) : void 0,
     justifyContent: align
   });
-  return /* @__PURE__ */ React.createElement("div", { className: style, "data-testid": key }, sceneGraph.interpolate(model, text));
+  return /* @__PURE__ */ React.createElement("div", {
+    className: style,
+    "data-testid": key
+  }, sceneGraph.interpolate(model, text));
 };
 
 export { SceneCanvasText };

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

@@ -1 +1 @@
-{"version":3,"file":"SceneCanvasText.js","sources":["../../../src/components/SceneCanvasText.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObjectState } from '../core/types';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\nimport { useTheme2 } from '@grafana/ui';\nimport { css } from '@emotion/css';\n\nexport interface SceneCanvasTextState extends SceneObjectState {\n  text: string;\n  fontSize?: number;\n  align?: 'left' | 'center' | 'right';\n  spacing?: number;\n}\n\n/**\n * Not a really useful component, just an example of how to create one\n * @internal\n */\nexport class SceneCanvasText extends SceneObjectBase<SceneCanvasTextState> {\n  protected _variableDependency = new VariableDependencyConfig(this, { statePaths: ['text'] });\n\n  public static Component = ({ model }: SceneComponentProps<SceneCanvasText>) => {\n    const { text, fontSize = 20, align = 'left', key, spacing } = model.useState();\n    const theme = useTheme2();\n\n    const style = css({\n      fontSize: fontSize,\n      display: 'flex',\n      flexGrow: 1,\n      alignItems: 'center',\n      padding: spacing ? theme.spacing(spacing, 0) : undefined,\n      justifyContent: align,\n    });\n\n    return (\n      <div className={style} data-testid={key}>\n        {sceneGraph.interpolate(model, text)}\n      </div>\n    );\n  };\n}\n"],"names":[],"mappings":";;;;;;;AAoBO,MAAM,wBAAwB,eAAsC,CAAA;AAAA,EAApE,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA;AACL,IAAU,IAAA,CAAA,mBAAA,GAAsB,IAAI,wBAAyB,CAAA,IAAA,EAAM,EAAE,UAAY,EAAA,CAAC,MAAM,CAAA,EAAG,CAAA;AAAA;AAqB7F;AAtBa,eAAA,CAGG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAkD,KAAA;AAC7E,EAAM,MAAA,EAAE,IAAM,EAAA,QAAA,GAAW,EAAI,EAAA,KAAA,GAAQ,QAAQ,GAAK,EAAA,OAAA,EAAY,GAAA,KAAA,CAAM,QAAS,EAAA;AAC7E,EAAA,MAAM,QAAQ,SAAU,EAAA;AAExB,EAAA,MAAM,QAAQ,GAAI,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,CAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,SAAS,OAAU,GAAA,KAAA,CAAM,OAAQ,CAAA,OAAA,EAAS,CAAC,CAAI,GAAA,MAAA;AAAA,IAC/C,cAAgB,EAAA;AAAA,GACjB,CAAA;AAED,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,KAAO,EAAA,aAAA,EAAa,OACjC,UAAW,CAAA,WAAA,CAAY,KAAO,EAAA,IAAI,CACrC,CAAA;AAEJ,CAAA;;;;"}
+{"version":3,"file":"SceneCanvasText.js","sources":["../../../src/components/SceneCanvasText.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObjectState } from '../core/types';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\nimport { useTheme2 } from '@grafana/ui';\nimport { css } from '@emotion/css';\n\nexport interface SceneCanvasTextState extends SceneObjectState {\n  text: string;\n  fontSize?: number;\n  align?: 'left' | 'center' | 'right';\n  spacing?: number;\n}\n\n/**\n * Not a really useful component, just an example of how to create one\n * @internal\n */\nexport class SceneCanvasText extends SceneObjectBase<SceneCanvasTextState> {\n  protected _variableDependency = new VariableDependencyConfig(this, { statePaths: ['text'] });\n\n  public static Component = ({ model }: SceneComponentProps<SceneCanvasText>) => {\n    const { text, fontSize = 20, align = 'left', key, spacing } = model.useState();\n    const theme = useTheme2();\n\n    const style = css({\n      fontSize: fontSize,\n      display: 'flex',\n      flexGrow: 1,\n      alignItems: 'center',\n      padding: spacing ? theme.spacing(spacing, 0) : undefined,\n      justifyContent: align,\n    });\n\n    return (\n      <div className={style} data-testid={key}>\n        {sceneGraph.interpolate(model, text)}\n      </div>\n    );\n  };\n}\n"],"names":[],"mappings":";;;;;;;AAoBO,MAAM,wBAAwB,eAAsC,CAAA;AAAA,EAApE,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA,CAAA;AACL,IAAU,IAAA,CAAA,mBAAA,GAAsB,IAAI,wBAAyB,CAAA,IAAA,EAAM,EAAE,UAAY,EAAA,CAAC,MAAM,CAAA,EAAG,CAAA,CAAA;AAAA,GAAA;AAqB7F,CAAA;AAtBa,eAAA,CAGG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAkD,KAAA;AAC7E,EAAM,MAAA,EAAE,IAAM,EAAA,QAAA,GAAW,EAAI,EAAA,KAAA,GAAQ,QAAQ,GAAK,EAAA,OAAA,EAAY,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAC7E,EAAA,MAAM,QAAQ,SAAU,EAAA,CAAA;AAExB,EAAA,MAAM,QAAQ,GAAI,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,CAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,SAAS,OAAU,GAAA,KAAA,CAAM,OAAQ,CAAA,OAAA,EAAS,CAAC,CAAI,GAAA,KAAA,CAAA;AAAA,IAC/C,cAAgB,EAAA,KAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,KAAA;AAAA,IAAO,aAAa,EAAA,GAAA;AAAA,GAAA,EACjC,UAAW,CAAA,WAAA,CAAY,KAAO,EAAA,IAAI,CACrC,CAAA,CAAA;AAEJ,CAAA;;;;"}

package/dist/esm/components/SceneControlsSpacer.js

@@ -8,7 +8,9 @@ class SceneControlsSpacer extends SceneObjectBase {
   }
 }
 SceneControlsSpacer.Component = (_props) => {
-  return /* @__PURE__ */ React.createElement("div", { style: { flexGrow: 1 } });
+  return /* @__PURE__ */ React.createElement("div", {
+    style: { flexGrow: 1 }
+  });
 };
 
 export { SceneControlsSpacer };

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

@@ -1 +1 @@
-{"version":3,"file":"SceneControlsSpacer.js","sources":["../../../src/components/SceneControlsSpacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps } from '../core/types';\n\nexport class SceneControlsSpacer extends SceneObjectBase {\n  public constructor() {\n    super({});\n\n    this._renderBeforeActivation = true;\n  }\n\n  public static Component = (_props: SceneComponentProps<SceneControlsSpacer>) => {\n    return <div style={{ flexGrow: 1 }} />;\n  };\n}\n"],"names":[],"mappings":";;;AAKO,MAAM,4BAA4B,eAAgB,CAAA;AAAA,EAChD,WAAc,GAAA;AACnB,IAAA,KAAA,CAAM,EAAE,CAAA;AAER,IAAA,IAAA,CAAK,uBAA0B,GAAA,IAAA;AAAA;AAMnC;AAVa,mBAOG,CAAA,SAAA,GAAY,CAAC,MAAqD,KAAA;AAC9E,EAAA,2CAAQ,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,QAAA,EAAU,GAAK,EAAA,CAAA;AACtC,CAAA;;;;"}
+{"version":3,"file":"SceneControlsSpacer.js","sources":["../../../src/components/SceneControlsSpacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps } from '../core/types';\n\nexport class SceneControlsSpacer extends SceneObjectBase {\n  public constructor() {\n    super({});\n\n    this._renderBeforeActivation = true;\n  }\n\n  public static Component = (_props: SceneComponentProps<SceneControlsSpacer>) => {\n    return <div style={{ flexGrow: 1 }} />;\n  };\n}\n"],"names":[],"mappings":";;;AAKO,MAAM,4BAA4B,eAAgB,CAAA;AAAA,EAChD,WAAc,GAAA;AACnB,IAAA,KAAA,CAAM,EAAE,CAAA,CAAA;AAER,IAAA,IAAA,CAAK,uBAA0B,GAAA,IAAA,CAAA;AAAA,GACjC;AAKF,CAAA;AAVa,mBAOG,CAAA,SAAA,GAAY,CAAC,MAAqD,KAAA;AAC9E,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAA,EAAO,EAAE,QAAA,EAAU,CAAE,EAAA;AAAA,GAAG,CAAA,CAAA;AACtC,CAAA;;;;"}

package/dist/esm/components/SceneDebugger/DebugDetails.js

@@ -7,7 +7,16 @@ import { isSceneObject } from '../../core/types.js';
 function DebugDetails({ node }) {
   const state = node.useState();
   const styles = useStyles2(getStyles);
-  return /* @__PURE__ */ React.createElement("div", { className: styles.container }, Object.keys(state).map((key) => /* @__PURE__ */ React.createElement("div", { className: styles.row, key }, /* @__PURE__ */ React.createElement("div", { className: styles.keyName }, key), /* @__PURE__ */ React.createElement("div", { className: styles.value }, renderValue(key, state[key], node)))));
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles.container
+  }, Object.keys(state).map((key) => /* @__PURE__ */ React.createElement("div", {
+    className: styles.row,
+    key
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles.keyName
+  }, key), /* @__PURE__ */ React.createElement("div", {
+    className: styles.value
+  }, renderValue(key, state[key], node)))));
 }
 function renderValue(key, value, node) {
   if (value === null) {
@@ -15,22 +24,26 @@ function renderValue(key, value, node) {
   }
   switch (typeof value) {
     case "number":
-      return /* @__PURE__ */ React.createElement(
-        Input,
-        {
-          type: "number",
-          defaultValue: value,
-          onBlur: (evt) => node.setState({ [key]: evt.currentTarget.valueAsNumber })
-        }
-      );
+      return /* @__PURE__ */ React.createElement(Input, {
+        type: "number",
+        defaultValue: value,
+        onBlur: (evt) => node.setState({ [key]: evt.currentTarget.valueAsNumber })
+      });
     case "string":
-      return /* @__PURE__ */ React.createElement(Input, { type: "text", defaultValue: value, onBlur: (evt) => node.setState({ [key]: evt.currentTarget.value }) });
+      return /* @__PURE__ */ React.createElement(Input, {
+        type: "text",
+        defaultValue: value,
+        onBlur: (evt) => node.setState({ [key]: evt.currentTarget.value })
+      });
     case "object":
       if (isSceneObject(value)) {
         return value.constructor.name;
       }
       if (isPlainObject(value) || isArray(value)) {
-        return /* @__PURE__ */ React.createElement(JSONFormatter, { json: value, open: 0 });
+        return /* @__PURE__ */ React.createElement(JSONFormatter, {
+          json: value,
+          open: 0
+        });
       }
       return String(value);
     default:

package/dist/esm/components/SceneDebugger/DebugDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebugDetails.js","sources":["../../../../src/components/SceneDebugger/DebugDetails.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Input, JSONFormatter, useStyles2 } from '@grafana/ui';\nimport { isArray, isPlainObject } from 'lodash';\nimport React from 'react';\nimport { isSceneObject, SceneObject } from '../../core/types';\n\nexport interface Props {\n  node: SceneObject;\n}\n\nexport function DebugDetails({ node }: Props) {\n  const state = node.useState();\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.container}>\n      {Object.keys(state).map((key) => (\n        <div className={styles.row} key={key}>\n          <div className={styles.keyName}>{key}</div>\n          <div className={styles.value}>{renderValue(key, (state as any)[key], node)}</div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction renderValue(key: string, value: any, node: SceneObject) {\n  if (value === null) {\n    return 'null';\n  }\n\n  switch (typeof value) {\n    case 'number':\n      return (\n        <Input\n          type=\"number\"\n          defaultValue={value}\n          onBlur={(evt) => node.setState({ [key]: evt.currentTarget.valueAsNumber })}\n        />\n      );\n    case 'string':\n      return (\n        <Input type=\"text\" defaultValue={value} onBlur={(evt) => node.setState({ [key]: evt.currentTarget.value })} />\n      );\n    case 'object':\n      if (isSceneObject(value)) {\n        return value.constructor.name;\n      }\n      if (isPlainObject(value) || isArray(value)) {\n        return <JSONFormatter json={value} open={0} />;\n      }\n      return String(value);\n    default:\n      return typeof value;\n  }\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    container: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: theme.spacing(0.5),\n      flexDirection: 'column',\n    }),\n    row: css({\n      display: 'flex',\n      gap: theme.spacing(2),\n    }),\n    keyName: css({\n      display: 'flex',\n      flexGrow: '0',\n      width: 120,\n      alignItems: 'center',\n      height: theme.spacing(theme.components.height.md),\n    }),\n    value: css({\n      flexGrow: 1,\n      minHeight: theme.spacing(theme.components.height.md),\n      display: 'flex',\n      alignItems: 'center',\n    }),\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DebugDetails.js","sources":["../../../../src/components/SceneDebugger/DebugDetails.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Input, JSONFormatter, useStyles2 } from '@grafana/ui';\nimport { isArray, isPlainObject } from 'lodash';\nimport React from 'react';\nimport { isSceneObject, SceneObject } from '../../core/types';\n\nexport interface Props {\n  node: SceneObject;\n}\n\nexport function DebugDetails({ node }: Props) {\n  const state = node.useState();\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.container}>\n      {Object.keys(state).map((key) => (\n        <div className={styles.row} key={key}>\n          <div className={styles.keyName}>{key}</div>\n          <div className={styles.value}>{renderValue(key, (state as any)[key], node)}</div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction renderValue(key: string, value: any, node: SceneObject) {\n  if (value === null) {\n    return 'null';\n  }\n\n  switch (typeof value) {\n    case 'number':\n      return (\n        <Input\n          type=\"number\"\n          defaultValue={value}\n          onBlur={(evt) => node.setState({ [key]: evt.currentTarget.valueAsNumber })}\n        />\n      );\n    case 'string':\n      return (\n        <Input type=\"text\" defaultValue={value} onBlur={(evt) => node.setState({ [key]: evt.currentTarget.value })} />\n      );\n    case 'object':\n      if (isSceneObject(value)) {\n        return value.constructor.name;\n      }\n      if (isPlainObject(value) || isArray(value)) {\n        return <JSONFormatter json={value} open={0} />;\n      }\n      return String(value);\n    default:\n      return typeof value;\n  }\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    container: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: theme.spacing(0.5),\n      flexDirection: 'column',\n    }),\n    row: css({\n      display: 'flex',\n      gap: theme.spacing(2),\n    }),\n    keyName: css({\n      display: 'flex',\n      flexGrow: '0',\n      width: 120,\n      alignItems: 'center',\n      height: theme.spacing(theme.components.height.md),\n    }),\n    value: css({\n      flexGrow: 1,\n      minHeight: theme.spacing(theme.components.height.md),\n      display: 'flex',\n      alignItems: 'center',\n    }),\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/SceneDebugger/DebugTreeNode.js

@@ -8,10 +8,22 @@ function DebugTreeNode({ node, selectedObject, onSelect }) {
   const isSelected = node === selectedObject;
   node.forEachChild((child) => {
     children.push(
-      /* @__PURE__ */ React.createElement(DebugTreeNode, { node: child, key: child.state.key, selectedObject, onSelect })
+      /* @__PURE__ */ React.createElement(DebugTreeNode, {
+        node: child,
+        key: child.state.key,
+        selectedObject,
+        onSelect
+      })
     );
   });
-  return /* @__PURE__ */ React.createElement("div", { className: styles.container }, /* @__PURE__ */ React.createElement("div", { className: cx(styles.name, isSelected && styles.selected), onClick: () => onSelect(node) }, node.constructor.name), /* @__PURE__ */ React.createElement("div", { className: styles.children }, children));
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles.container
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles.name, isSelected && styles.selected),
+    onClick: () => onSelect(node)
+  }, node.constructor.name), /* @__PURE__ */ React.createElement("div", {
+    className: styles.children
+  }, children));
 }
 function getStyles(theme) {
   return {

package/dist/esm/components/SceneDebugger/DebugTreeNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebugTreeNode.js","sources":["../../../../src/components/SceneDebugger/DebugTreeNode.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport React, { ReactNode } from 'react';\nimport { SceneObject } from '../../core/types';\n\nexport interface Props {\n  node: SceneObject;\n  selectedObject?: SceneObject;\n  onSelect: (node: SceneObject) => void;\n}\n\nexport function DebugTreeNode({ node, selectedObject, onSelect }: Props) {\n  const styles = useStyles2(getStyles);\n  const children: ReactNode[] = [];\n  const isSelected = node === selectedObject;\n\n  node.forEachChild((child) => {\n    children.push(\n      <DebugTreeNode node={child} key={child.state.key} selectedObject={selectedObject} onSelect={onSelect} />\n    );\n  });\n\n  return (\n    <div className={styles.container}>\n      <div className={cx(styles.name, isSelected && styles.selected)} onClick={() => onSelect(node)}>\n        {node.constructor.name}\n      </div>\n      <div className={styles.children}>{children}</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(0.5),\n      flexDirection: 'column',\n    }),\n    name: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: theme.spacing(1),\n      fontSize: theme.typography.bodySmall.fontSize,\n      cursor: 'pointer',\n      padding: theme.spacing(0, 1),\n      borderRadius: theme.shape.borderRadius(2),\n      position: 'relative',\n      '&:hover': {\n        background: theme.colors.background.secondary,\n      },\n    }),\n    selected: css({\n      '&::before': {\n        display: 'block',\n        content: \"' '\",\n        position: 'absolute',\n        left: 0,\n        width: 4,\n        bottom: 2,\n        top: 2,\n        borderRadius: theme.shape.radius.default,\n        backgroundImage: theme.colors.gradients.brandVertical,\n      },\n    }),\n    children: css({\n      flexGrow: 1,\n      display: 'flex',\n      flexDirection: 'column',\n      paddingLeft: theme.spacing(1),\n    }),\n  };\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,aAAc,CAAA,EAAE,IAAM,EAAA,cAAA,EAAgB,UAAmB,EAAA;AACvE,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,WAAwB,EAAC;AAC/B,EAAA,MAAM,aAAa,IAAS,KAAA,cAAA;AAE5B,EAAK,IAAA,CAAA,YAAA,CAAa,CAAC,KAAU,KAAA;AAC3B,IAAS,QAAA,CAAA,IAAA;AAAA,sBACP,KAAA,CAAA,aAAA,CAAC,iBAAc,IAAM,EAAA,KAAA,EAAO,KAAK,KAAM,CAAA,KAAA,CAAM,GAAK,EAAA,cAAA,EAAgC,QAAoB,EAAA;AAAA,KACxG;AAAA,GACD,CAAA;AAED,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,SACrB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,IAAM,EAAA,UAAA,IAAc,OAAO,QAAQ,CAAA,EAAG,OAAS,EAAA,MAAM,QAAS,CAAA,IAAI,CACzF,EAAA,EAAA,IAAA,CAAK,WAAY,CAAA,IACpB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,QAAA,EAAA,EAAW,QAAS,CAC7C,CAAA;AAEJ;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,GAAG,CAAA;AAAA,MACtB,aAAe,EAAA;AAAA,KAChB,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,MAAQ,EAAA,SAAA;AAAA,MACR,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,MAC3B,YAAc,EAAA,KAAA,CAAM,KAAM,CAAA,YAAA,CAAa,CAAC,CAAA;AAAA,MACxC,QAAU,EAAA,UAAA;AAAA,MACV,SAAW,EAAA;AAAA,QACT,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA;AAAA;AACtC,KACD,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,WAAa,EAAA;AAAA,QACX,OAAS,EAAA,OAAA;AAAA,QACT,OAAS,EAAA,KAAA;AAAA,QACT,QAAU,EAAA,UAAA;AAAA,QACV,IAAM,EAAA,CAAA;AAAA,QACN,KAAO,EAAA,CAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,GAAK,EAAA,CAAA;AAAA,QACL,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,QACjC,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,SAAU,CAAA;AAAA;AAC1C,KACD,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,aAAe,EAAA,QAAA;AAAA,MACf,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC7B;AAAA,GACH;AACF;;;;"}
+{"version":3,"file":"DebugTreeNode.js","sources":["../../../../src/components/SceneDebugger/DebugTreeNode.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport React, { ReactNode } from 'react';\nimport { SceneObject } from '../../core/types';\n\nexport interface Props {\n  node: SceneObject;\n  selectedObject?: SceneObject;\n  onSelect: (node: SceneObject) => void;\n}\n\nexport function DebugTreeNode({ node, selectedObject, onSelect }: Props) {\n  const styles = useStyles2(getStyles);\n  const children: ReactNode[] = [];\n  const isSelected = node === selectedObject;\n\n  node.forEachChild((child) => {\n    children.push(\n      <DebugTreeNode node={child} key={child.state.key} selectedObject={selectedObject} onSelect={onSelect} />\n    );\n  });\n\n  return (\n    <div className={styles.container}>\n      <div className={cx(styles.name, isSelected && styles.selected)} onClick={() => onSelect(node)}>\n        {node.constructor.name}\n      </div>\n      <div className={styles.children}>{children}</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(0.5),\n      flexDirection: 'column',\n    }),\n    name: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: theme.spacing(1),\n      fontSize: theme.typography.bodySmall.fontSize,\n      cursor: 'pointer',\n      padding: theme.spacing(0, 1),\n      borderRadius: theme.shape.borderRadius(2),\n      position: 'relative',\n      '&:hover': {\n        background: theme.colors.background.secondary,\n      },\n    }),\n    selected: css({\n      '&::before': {\n        display: 'block',\n        content: \"' '\",\n        position: 'absolute',\n        left: 0,\n        width: 4,\n        bottom: 2,\n        top: 2,\n        borderRadius: theme.shape.radius.default,\n        backgroundImage: theme.colors.gradients.brandVertical,\n      },\n    }),\n    children: css({\n      flexGrow: 1,\n      display: 'flex',\n      flexDirection: 'column',\n      paddingLeft: theme.spacing(1),\n    }),\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/SceneDebugger/SceneDebugger.js

@@ -8,7 +8,35 @@ function SceneDebugger({ scene }) {
   const styles = useStyles2(getStyles);
   const [isOpen, setIsOpen] = useState(false);
   const [selectedObject, setSelectedObject] = useState();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ToolbarButton, { variant: "canvas", icon: "bug", onClick: () => setIsOpen(true) }), isOpen && /* @__PURE__ */ React.createElement(Drawer, { title: "Scene debugger", onClose: () => setIsOpen(false), size: "lg" }, /* @__PURE__ */ React.createElement("div", { className: styles.panes }, /* @__PURE__ */ React.createElement("div", { className: styles.pane1 }, /* @__PURE__ */ React.createElement("div", { className: styles.paneHeading }, "Scene graph"), /* @__PURE__ */ React.createElement(CustomScrollbar, { autoHeightMin: "100%" }, /* @__PURE__ */ React.createElement("div", { className: styles.treeWrapper }, /* @__PURE__ */ React.createElement(DebugTreeNode, { node: scene, selectedObject, onSelect: setSelectedObject })))), /* @__PURE__ */ React.createElement("div", { className: styles.pane2 }, /* @__PURE__ */ React.createElement("div", { className: styles.paneHeading }, "Object details"), selectedObject && /* @__PURE__ */ React.createElement(DebugDetails, { node: selectedObject })))));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ToolbarButton, {
+    variant: "canvas",
+    icon: "bug",
+    onClick: () => setIsOpen(true)
+  }), isOpen && /* @__PURE__ */ React.createElement(Drawer, {
+    title: "Scene debugger",
+    onClose: () => setIsOpen(false),
+    size: "lg"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles.panes
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles.pane1
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles.paneHeading
+  }, "Scene graph"), /* @__PURE__ */ React.createElement(CustomScrollbar, {
+    autoHeightMin: "100%"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles.treeWrapper
+  }, /* @__PURE__ */ React.createElement(DebugTreeNode, {
+    node: scene,
+    selectedObject,
+    onSelect: setSelectedObject
+  })))), /* @__PURE__ */ React.createElement("div", {
+    className: styles.pane2
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles.paneHeading
+  }, "Object details"), selectedObject && /* @__PURE__ */ React.createElement(DebugDetails, {
+    node: selectedObject
+  })))));
 }
 function getStyles(theme) {
   return {