@grafana/scenes 0.17.1 → 0.18.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# v0.18.0 (Wed Jul 05 2023)
+
+#### 🚀 Enhancement
+
+- SceneGridLayout: Fixes draggable attribute [#245](https://github.com/grafana/scenes/pull/245) ([@torkelo](https://github.com/torkelo))
+- SceneGridLayout: Fixes issues with unmount on every re-render [#243](https://github.com/grafana/scenes/pull/243) ([@torkelo](https://github.com/torkelo))
+- Querying: Support runtime registered data source [#159](https://github.com/grafana/scenes/pull/159) ([@torkelo](https://github.com/torkelo))
+
+#### 🐛 Bug Fix
+
+- SceneGridRow: Fix rows auto collapsing on load due to url sync [#241](https://github.com/grafana/scenes/pull/241) ([@torkelo](https://github.com/torkelo))
+- SceneQueryRunner: Support `liveStreaming` [#239](https://github.com/grafana/scenes/pull/239) ([@kaydelaney](https://github.com/kaydelaney))
+
+#### Authors: 2
+
+- kay delaney ([@kaydelaney](https://github.com/kaydelaney))
+- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
+
+---
+
+# v0.17.2 (Tue Jun 27 2023)
+
+#### 🐛 Bug Fix
+
+- SceneQueryRunner: Cancel previous request when starting new one [#238](https://github.com/grafana/scenes/pull/238) ([@kaydelaney](https://github.com/kaydelaney))
+
+#### Authors: 1
+
+- kay delaney ([@kaydelaney](https://github.com/kaydelaney))
+
+---
+
 # v0.17.1 (Wed Jun 21 2023)
 
 #### 🐛 Bug Fix

package/README.md

@@ -31,15 +31,13 @@ To work on @grafana/scenes SDK, please follow the guides below.
 
 ### Setting up @grafana/scenes with a local Grafana instance
 
-It is currently possible to run a Scenes demo using Grafana. To do that, the following setup is required.
+To setup scenes with local Grafana, the following setup is required:
 
 1. Clone the [Grafana Scenes repository](https://github.com/grafana/scenes/).
 1. Clone the [Grafana](https://github.com/grafana/grafana/) repository and follow the [Development guide](https://github.com/grafana/grafana/blob/main/contribute/developer-guide.md#developer-guide).
 1. Setup env variable `GRAFANA_PATH` to point to your Grafana repository directory, `export GRAFANA_PATH=<path-to-grafana-directory>`
 1. From Grafana Scenes root directory run `./scripts/dev.sh`. This will compile @grafana/scenes with watch mode enabled and link it to your Grafana.
 1. From Grafana directory run `yarn install`.
-1. Start Grafana with `scenes` [feature toggle enabled](https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/#feature_toggles)
-1. Navigate to `http://localhost:3000/scenes` to explore demos.
 
 ### Setting up local version of @grafana/scenes with app plugin
 

package/dist/esm/components/layout/grid/LazyLoader.js

@@ -1,10 +1,8 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useImperativeHandle } from 'react';
 import { useEffectOnce } from 'react-use';
 import { uniqueId } from 'lodash';
 
 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;
@@ -20,7 +18,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -39,39 +36,42 @@ function useUniqueId() {
   (_a = idRefLazy.current) != null ? _a : idRefLazy.current = uniqueId();
   return idRefLazy.current;
 }
-function LazyLoader(_a) {
-  var _b = _a, { children, width, height, onLoad, onChange, style } = _b, rest = __objRest(_b, ["children", "width", "height", "onLoad", "onChange", "style"]);
-  const id = useUniqueId();
-  const [loaded, setLoaded] = useState(false);
-  const [isInView, setIsInView] = useState(false);
-  const wrapperRef = useRef(null);
-  useEffectOnce(() => {
-    LazyLoader.addCallback(id, (entry) => {
-      if (!loaded && entry.isIntersecting) {
-        setLoaded(true);
-        onLoad == null ? void 0 : onLoad();
+const LazyLoader = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, onLoad, onChange } = _b, rest = __objRest(_b, ["children", "onLoad", "onChange"]);
+    const id = useUniqueId();
+    const [loaded, setLoaded] = useState(false);
+    const [isInView, setIsInView] = useState(false);
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    useEffectOnce(() => {
+      LazyLoader.addCallback(id, (entry) => {
+        if (!loaded && entry.isIntersecting) {
+          setLoaded(true);
+          onLoad == null ? void 0 : onLoad();
+        }
+        setIsInView(entry.isIntersecting);
+        onChange == null ? void 0 : onChange(entry.isIntersecting);
+      });
+      const wrapperEl = innerRef.current;
+      if (wrapperEl) {
+        LazyLoader.observer.observe(wrapperEl);
       }
-      setIsInView(entry.isIntersecting);
-      onChange == null ? void 0 : onChange(entry.isIntersecting);
+      return () => {
+        delete LazyLoader.callbacks[id];
+        wrapperEl && LazyLoader.observer.unobserve(wrapperEl);
+        if (Object.keys(LazyLoader.callbacks).length === 0) {
+          LazyLoader.observer.disconnect();
+        }
+      };
     });
-    const wrapperEl = wrapperRef.current;
-    if (wrapperEl) {
-      LazyLoader.observer.observe(wrapperEl);
-    }
-    return () => {
-      delete LazyLoader.callbacks[id];
-      wrapperEl && LazyLoader.observer.unobserve(wrapperEl);
-      if (Object.keys(LazyLoader.callbacks).length === 0) {
-        LazyLoader.observer.disconnect();
-      }
-    };
-  });
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({
-    id,
-    ref: wrapperRef,
-    style: __spreadProps(__spreadValues({}, style), { width, height })
-  }, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
-}
+    return /* @__PURE__ */ React.createElement("div", __spreadValues({
+      id,
+      ref: innerRef
+    }, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
+  }
+);
+LazyLoader.displayName = "LazyLoader";
 LazyLoader.callbacks = {};
 LazyLoader.addCallback = (id, c) => LazyLoader.callbacks[id] = c;
 LazyLoader.observer = new IntersectionObserver(

package/dist/esm/components/layout/grid/LazyLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyLoader.js","sources":["../../../../../src/components/layout/grid/LazyLoader.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { useEffectOnce } from 'react-use';\n\nimport { uniqueId } from 'lodash';\n\nexport function useUniqueId(): string {\n  const idRefLazy = useRef<string | undefined>(undefined);\n  idRefLazy.current ??= uniqueId();\n  return idRefLazy.current;\n}\n\nexport interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {\n  children: React.ReactNode | (({ isInView }: { isInView: boolean }) => React.ReactNode);\n  width?: number;\n  height?: number;\n  onLoad?: () => void;\n  onChange?: (isInView: boolean) => void;\n}\n\nexport function LazyLoader({ children, width, height, onLoad, onChange, style, ...rest }: Props) {\n  const id = useUniqueId();\n  const [loaded, setLoaded] = useState(false);\n  const [isInView, setIsInView] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffectOnce(() => {\n    LazyLoader.addCallback(id, (entry) => {\n      if (!loaded && entry.isIntersecting) {\n        setLoaded(true);\n        onLoad?.();\n      }\n\n      setIsInView(entry.isIntersecting);\n      onChange?.(entry.isIntersecting);\n    });\n\n    const wrapperEl = wrapperRef.current;\n\n    if (wrapperEl) {\n      LazyLoader.observer.observe(wrapperEl);\n    }\n\n    return () => {\n      delete LazyLoader.callbacks[id];\n      wrapperEl && LazyLoader.observer.unobserve(wrapperEl);\n      if (Object.keys(LazyLoader.callbacks).length === 0) {\n        LazyLoader.observer.disconnect();\n      }\n    };\n  });\n\n  return (\n    <div id={id} ref={wrapperRef} style={{ ...style, width, height }} {...rest}>\n      {loaded && (typeof children === 'function' ? children({ isInView }) : children)}\n    </div>\n  );\n}\n\nLazyLoader.callbacks = {} as Record<string, (e: IntersectionObserverEntry) => void>;\nLazyLoader.addCallback = (id: string, c: (e: IntersectionObserverEntry) => void) => (LazyLoader.callbacks[id] = c);\nLazyLoader.observer = new IntersectionObserver(\n  (entries) => {\n    for (const entry of entries) {\n      LazyLoader.callbacks[entry.target.id](entry);\n    }\n  },\n  { rootMargin: '100px' }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,SAAS,WAAsB,GAAA;AALtC,EAAA,IAAA,EAAA,CAAA;AAME,EAAM,MAAA,SAAA,GAAY,OAA2B,KAAS,CAAA,CAAA,CAAA;AACtD,EAAU,CAAA,EAAA,GAAA,SAAA,CAAA,OAAA,KAAV,IAAU,GAAA,EAAA,GAAA,SAAA,CAAA,OAAA,GAAY,QAAS,EAAA,CAAA;AAC/B,EAAA,OAAO,SAAU,CAAA,OAAA,CAAA;AACnB,CAAA;AAUO,SAAS,WAAW,EAAsE,EAAA;AAAtE,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAU,QAAA,EAAA,KAAA,EAAO,MAAQ,EAAA,MAAA,EAAQ,UAAU,KAnBxE,EAAA,GAmB2B,EAAuD,EAAA,IAAA,GAAA,SAAA,CAAvD,IAAuD,CAArD,UAAA,EAAU,OAAO,EAAA,QAAA,EAAQ,UAAQ,UAAU,EAAA,OAAA,CAAA,CAAA,CAAA;AACtE,EAAA,MAAM,KAAK,WAAY,EAAA,CAAA;AACvB,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC9C,EAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA,CAAA;AAE9C,EAAA,aAAA,CAAc,MAAM;AAClB,IAAW,UAAA,CAAA,WAAA,CAAY,EAAI,EAAA,CAAC,KAAU,KAAA;AACpC,MAAI,IAAA,CAAC,MAAU,IAAA,KAAA,CAAM,cAAgB,EAAA;AACnC,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,QAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,EAAA,CAAA;AAAA,OACF;AAEA,MAAA,WAAA,CAAY,MAAM,cAAc,CAAA,CAAA;AAChC,MAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAM,CAAA,cAAA,CAAA,CAAA;AAAA,KAClB,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,UAAW,CAAA,OAAA,CAAA;AAE7B,IAAA,IAAI,SAAW,EAAA;AACb,MAAW,UAAA,CAAA,QAAA,CAAS,QAAQ,SAAS,CAAA,CAAA;AAAA,KACvC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,OAAO,WAAW,SAAU,CAAA,EAAA,CAAA,CAAA;AAC5B,MAAa,SAAA,IAAA,UAAA,CAAW,QAAS,CAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AACpD,MAAA,IAAI,OAAO,IAAK,CAAA,UAAA,CAAW,SAAS,CAAA,CAAE,WAAW,CAAG,EAAA;AAClD,QAAA,UAAA,CAAW,SAAS,UAAW,EAAA,CAAA;AAAA,OACjC;AAAA,KACF,CAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,cAAA,CAAA;AAAA,IAAI,EAAA;AAAA,IAAQ,GAAK,EAAA,UAAA;AAAA,IAAY,KAAO,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAK,KAAL,CAAA,EAAA,EAAY,OAAO,MAAO,EAAA,CAAA;AAAA,GAAO,EAAA,IAAA,CAAA,EACnE,MAAW,KAAA,OAAO,QAAa,KAAA,UAAA,GAAa,SAAS,EAAE,QAAA,EAAU,CAAA,GAAI,QACxE,CAAA,CAAA,CAAA;AAEJ,CAAA;AAEA,UAAA,CAAW,YAAY,EAAC,CAAA;AACxB,UAAA,CAAW,cAAc,CAAC,EAAA,EAAY,CAA+C,KAAA,UAAA,CAAW,UAAU,EAAM,CAAA,GAAA,CAAA,CAAA;AAChH,UAAA,CAAW,WAAW,IAAI,oBAAA;AAAA,EACxB,CAAC,OAAY,KAAA;AACX,IAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,MAAA,UAAA,CAAW,SAAU,CAAA,KAAA,CAAM,MAAO,CAAA,EAAA,CAAA,CAAI,KAAK,CAAA,CAAA;AAAA,KAC7C;AAAA,GACF;AAAA,EACA,EAAE,YAAY,OAAQ,EAAA;AACxB,CAAA;;;;"}
+{"version":3,"file":"LazyLoader.js","sources":["../../../../../src/components/layout/grid/LazyLoader.tsx"],"sourcesContent":["import React, { ForwardRefExoticComponent, useImperativeHandle, useRef, useState } from 'react';\nimport { useEffectOnce } from 'react-use';\n\nimport { uniqueId } from 'lodash';\n\nexport function useUniqueId(): string {\n  const idRefLazy = useRef<string | undefined>(undefined);\n  idRefLazy.current ??= uniqueId();\n  return idRefLazy.current;\n}\n\nexport interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {\n  children: React.ReactNode | (({ isInView }: { isInView: boolean }) => React.ReactNode);\n  key: string;\n  onLoad?: () => void;\n  onChange?: (isInView: boolean) => void;\n}\n\nexport interface LazyLoaderType extends ForwardRefExoticComponent<Props> {\n  addCallback: (id: string, c: (e: IntersectionObserverEntry) => void) => void;\n  callbacks: Record<string, (e: IntersectionObserverEntry) => void>;\n  observer: IntersectionObserver;\n}\n\nexport const LazyLoader: LazyLoaderType = React.forwardRef<HTMLDivElement, Props>(\n  ({ children, onLoad, onChange, ...rest }, ref) => {\n    const id = useUniqueId();\n    const [loaded, setLoaded] = useState(false);\n    const [isInView, setIsInView] = useState(false);\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => innerRef.current!);\n\n    useEffectOnce(() => {\n      LazyLoader.addCallback(id, (entry) => {\n        if (!loaded && entry.isIntersecting) {\n          setLoaded(true);\n          onLoad?.();\n        }\n\n        setIsInView(entry.isIntersecting);\n        onChange?.(entry.isIntersecting);\n      });\n\n      const wrapperEl = innerRef.current;\n\n      if (wrapperEl) {\n        LazyLoader.observer.observe(wrapperEl);\n      }\n\n      return () => {\n        delete LazyLoader.callbacks[id];\n        wrapperEl && LazyLoader.observer.unobserve(wrapperEl);\n        if (Object.keys(LazyLoader.callbacks).length === 0) {\n          LazyLoader.observer.disconnect();\n        }\n      };\n    });\n\n    return (\n      <div id={id} ref={innerRef} {...rest}>\n        {loaded && (typeof children === 'function' ? children({ isInView }) : children)}\n      </div>\n    );\n  }\n) as LazyLoaderType;\n\nLazyLoader.displayName = 'LazyLoader';\nLazyLoader.callbacks = {} as Record<string, (e: IntersectionObserverEntry) => void>;\nLazyLoader.addCallback = (id: string, c: (e: IntersectionObserverEntry) => void) => (LazyLoader.callbacks[id] = c);\nLazyLoader.observer = new IntersectionObserver(\n  (entries) => {\n    for (const entry of entries) {\n      LazyLoader.callbacks[entry.target.id](entry);\n    }\n  },\n  { rootMargin: '100px' }\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js

@@ -5,10 +5,7 @@ import { GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT } from './consta
 import { LazyLoader } from './LazyLoader.js';
 
 function SceneGridLayoutRenderer({ model }) {
-  const { children, isLazy } = model.useState();
-  const LazyWrapper = isLazy ? LazyLoader : ({ style, children: children2 }) => /* @__PURE__ */ React.createElement("div", {
-    style
-  }, children2);
+  const { children, isLazy, isDraggable } = model.useState();
   validateChildrenSize(children);
   return /* @__PURE__ */ React.createElement(AutoSizer, {
     disableHeight: true
@@ -17,12 +14,11 @@ function SceneGridLayoutRenderer({ model }) {
       return null;
     }
     const layout = model.buildGridLayout(width);
-    const cellWidth = (width - (GRID_COLUMN_COUNT - 1) * GRID_CELL_VMARGIN) / GRID_COLUMN_COUNT;
     return /* @__PURE__ */ React.createElement("div", {
       style: { width: `${width}px`, height: "100%" }
     }, /* @__PURE__ */ React.createElement(ReactGridLayout, {
       width,
-      isDraggable: width > 768,
+      isDraggable: isDraggable && width > 768,
       isResizable: false,
       containerPadding: [0, 0],
       useCSSTransforms: false,
@@ -37,21 +33,18 @@ function SceneGridLayoutRenderer({ model }) {
       onLayoutChange: model.onLayoutChange,
       isBounded: false
     }, layout.map((gridItem) => {
-      var _a, _b;
       const sceneChild = model.getSceneLayoutChild(gridItem.i);
-      const pixelWidth = cellToPixelSize((_a = sceneChild.state.width) != null ? _a : 0, cellWidth, GRID_CELL_VMARGIN);
-      const pixelHeight = cellToPixelSize((_b = sceneChild.state.height) != null ? _b : 0, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN);
-      return /* @__PURE__ */ React.createElement("div", {
-        style: { display: "flex" },
+      return isLazy ? /* @__PURE__ */ React.createElement(LazyLoader, {
         key: sceneChild.state.key
-      }, /* @__PURE__ */ React.createElement(LazyWrapper, {
-        width: pixelWidth,
-        height: pixelHeight,
-        style: { display: "flex" }
       }, /* @__PURE__ */ React.createElement(sceneChild.Component, {
         model: sceneChild,
         key: sceneChild.state.key
-      })));
+      })) : /* @__PURE__ */ React.createElement("div", {
+        key: sceneChild.state.key
+      }, /* @__PURE__ */ React.createElement(sceneChild.Component, {
+        model: sceneChild,
+        key: sceneChild.state.key
+      }));
     })));
   });
 }
@@ -62,9 +55,6 @@ function validateChildrenSize(children) {
     throw new Error("All children must have a size specified");
   }
 }
-function cellToPixelSize(sizeInCells, sizeOfCellInPx, margin = 0) {
-  return Math.max(Math.round(sizeInCells * (sizeOfCellInPx + margin) - margin), 0);
-}
 
 export { SceneGridLayoutRenderer };
 //# sourceMappingURL=SceneGridLayoutRenderer.js.map

package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneGridLayoutRenderer.js","sources":["../../../../../src/components/layout/grid/SceneGridLayoutRenderer.tsx"],"sourcesContent":["import React from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { SceneComponentProps } from '../../../core/types';\nimport { GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT } from './constants';\nimport { LazyLoader, Props } from './LazyLoader';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridItemLike } from './types';\n\nexport function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n  const { children, isLazy } = model.useState();\n  const LazyWrapper = isLazy ? LazyLoader : ({ style, children }: Props) => <div style={style}>{children}</div>;\n  validateChildrenSize(children);\n\n  return (\n    <AutoSizer disableHeight>\n      {({ width }) => {\n        if (width === 0) {\n          return null;\n        }\n\n        const layout = model.buildGridLayout(width);\n\n        const cellWidth = (width - (GRID_COLUMN_COUNT - 1) * GRID_CELL_VMARGIN) / GRID_COLUMN_COUNT;\n        return (\n          /**\n           * The children is using a width of 100% so we need to guarantee that it is wrapped\n           * in an element that has the calculated size given by the AutoSizer. The AutoSizer\n           * has a width of 0 and will let its content overflow its div.\n           */\n          <div style={{ width: `${width}px`, height: '100%' }}>\n            <ReactGridLayout\n              width={width}\n              /*\n                    Disable draggable if mobile device, solving an issue with unintentionally\n                    moving panels. https://github.com/grafana/grafana/issues/18497\n                    theme.breakpoints.md = 769\n                  */\n              isDraggable={width > 768}\n              isResizable={false}\n              containerPadding={[0, 0]}\n              useCSSTransforms={false}\n              margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}\n              cols={GRID_COLUMN_COUNT}\n              rowHeight={GRID_CELL_HEIGHT}\n              draggableHandle={`.grid-drag-handle-${model.state.key}`}\n              draggableCancel=\".grid-drag-cancel\"\n              // @ts-ignore: ignoring for now until we make the size type numbers-only\n              layout={layout}\n              onDragStop={model.onDragStop}\n              onResizeStop={model.onResizeStop}\n              onLayoutChange={model.onLayoutChange}\n              isBounded={false}\n            >\n              {layout.map((gridItem) => {\n                const sceneChild = model.getSceneLayoutChild(gridItem.i)!;\n                const pixelWidth = cellToPixelSize(sceneChild.state.width ?? 0, cellWidth, GRID_CELL_VMARGIN);\n                const pixelHeight = cellToPixelSize(sceneChild.state.height ?? 0, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN);\n\n                // Need a wrapper around LazyLoader as ReactGridLayout expects a\n                // class component to give a ref to.\n                return (\n                  <div style={{ display: 'flex' }} key={sceneChild.state.key}>\n                    <LazyWrapper width={pixelWidth} height={pixelHeight} style={{ display: 'flex' }}>\n                      <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />\n                    </LazyWrapper>\n                  </div>\n                );\n              })}\n            </ReactGridLayout>\n          </div>\n        );\n      }}\n    </AutoSizer>\n  );\n}\n\nfunction validateChildrenSize(children: SceneGridItemLike[]) {\n  if (\n    children.some(\n      (c) =>\n        c.state.height === undefined ||\n        c.state.width === undefined ||\n        c.state.x === undefined ||\n        c.state.y === undefined\n    )\n  ) {\n    throw new Error('All children must have a size specified');\n  }\n}\n\nfunction cellToPixelSize(sizeInCells: number, sizeOfCellInPx: number, margin = 0) {\n  return Math.max(Math.round(sizeInCells * (sizeOfCellInPx + margin) - margin), 0);\n}\n"],"names":["children"],"mappings":";;;;;;AASgB,SAAA,uBAAA,CAAwB,EAAE,KAAA,EAA+C,EAAA;AACvF,EAAA,MAAM,EAAE,QAAA,EAAU,MAAO,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAC5C,EAAM,MAAA,WAAA,GAAc,SAAS,UAAa,GAAA,CAAC,EAAE,KAAO,EAAA,QAAA,EAAAA,SAAS,EAAA,qBAAc,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAA;AAAA,GAAA,EAAeA,SAAS,CAAA,CAAA;AACvG,EAAA,oBAAA,CAAqB,QAAQ,CAAA,CAAA;AAE7B,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAU,aAAa,EAAA,IAAA;AAAA,GACrB,EAAA,CAAC,EAAE,KAAA,EAAY,KAAA;AACd,IAAA,IAAI,UAAU,CAAG,EAAA;AACf,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,MAAA,GAAS,KAAM,CAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAE1C,IAAA,MAAM,SAAa,GAAA,CAAA,KAAA,GAAA,CAAS,iBAAoB,GAAA,CAAA,IAAK,iBAAqB,IAAA,iBAAA,CAAA;AAC1E,IAAA,uBAMG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,OAAO,EAAE,KAAA,EAAO,CAAG,EAAA,KAAA,CAAA,EAAA,CAAA,EAAW,QAAQ,MAAO,EAAA;AAAA,KAAA,kBAC/C,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MACC,KAAA;AAAA,MAMA,aAAa,KAAQ,GAAA,GAAA;AAAA,MACrB,WAAa,EAAA,KAAA;AAAA,MACb,gBAAA,EAAkB,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,MACvB,gBAAkB,EAAA,KAAA;AAAA,MAClB,MAAA,EAAQ,CAAC,iBAAA,EAAmB,iBAAiB,CAAA;AAAA,MAC7C,IAAM,EAAA,iBAAA;AAAA,MACN,SAAW,EAAA,gBAAA;AAAA,MACX,eAAA,EAAiB,CAAqB,kBAAA,EAAA,KAAA,CAAM,KAAM,CAAA,GAAA,CAAA,CAAA;AAAA,MAClD,eAAgB,EAAA,mBAAA;AAAA,MAEhB,MAAA;AAAA,MACA,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,cAAc,KAAM,CAAA,YAAA;AAAA,MACpB,gBAAgB,KAAM,CAAA,cAAA;AAAA,MACtB,SAAW,EAAA,KAAA;AAAA,KAEV,EAAA,MAAA,CAAO,GAAI,CAAA,CAAC,QAAa,KAAA;AAtDxC,MAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAuDgB,MAAA,MAAM,UAAa,GAAA,KAAA,CAAM,mBAAoB,CAAA,QAAA,CAAS,CAAC,CAAA,CAAA;AACvD,MAAM,MAAA,UAAA,GAAa,iBAAgB,EAAW,GAAA,UAAA,CAAA,KAAA,CAAM,UAAjB,IAA0B,GAAA,EAAA,GAAA,CAAA,EAAG,WAAW,iBAAiB,CAAA,CAAA;AAC5F,MAAM,MAAA,WAAA,GAAc,iBAAgB,EAAW,GAAA,UAAA,CAAA,KAAA,CAAM,WAAjB,IAA2B,GAAA,EAAA,GAAA,CAAA,EAAG,kBAAkB,iBAAiB,CAAA,CAAA;AAIrG,MAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,QAAI,KAAA,EAAO,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,QAAG,GAAA,EAAK,WAAW,KAAM,CAAA,GAAA;AAAA,OAAA,kBACpD,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,QAAY,KAAO,EAAA,UAAA;AAAA,QAAY,MAAQ,EAAA,WAAA;AAAA,QAAa,KAAA,EAAO,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,OAC5E,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,SAAX,EAAA;AAAA,QAAqB,KAAO,EAAA,UAAA;AAAA,QAAY,GAAA,EAAK,WAAW,KAAM,CAAA,GAAA;AAAA,OAAK,CACtE,CACF,CAAA,CAAA;AAAA,KAEH,CACH,CACF,CAAA,CAAA;AAAA,GAGN,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,qBAAqB,QAA+B,EAAA;AAC3D,EAAA,IACE,QAAS,CAAA,IAAA;AAAA,IACP,CAAC,CACC,KAAA,CAAA,CAAE,KAAM,CAAA,MAAA,KAAW,UACnB,CAAE,CAAA,KAAA,CAAM,KAAU,KAAA,KAAA,CAAA,IAClB,EAAE,KAAM,CAAA,CAAA,KAAM,KACd,CAAA,IAAA,CAAA,CAAE,MAAM,CAAM,KAAA,KAAA,CAAA;AAAA,GAElB,EAAA;AACA,IAAM,MAAA,IAAI,MAAM,yCAAyC,CAAA,CAAA;AAAA,GAC3D;AACF,CAAA;AAEA,SAAS,eAAgB,CAAA,WAAA,EAAqB,cAAwB,EAAA,MAAA,GAAS,CAAG,EAAA;AAChF,EAAO,OAAA,IAAA,CAAK,IAAI,IAAK,CAAA,KAAA,CAAM,eAAe,cAAiB,GAAA,MAAA,CAAA,GAAU,MAAM,CAAA,EAAG,CAAC,CAAA,CAAA;AACjF;;;;"}
+{"version":3,"file":"SceneGridLayoutRenderer.js","sources":["../../../../../src/components/layout/grid/SceneGridLayoutRenderer.tsx"],"sourcesContent":["import React from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { SceneComponentProps } from '../../../core/types';\nimport { GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT } from './constants';\nimport { LazyLoader } from './LazyLoader';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridItemLike } from './types';\n\nexport function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n  const { children, isLazy, isDraggable } = model.useState();\n  validateChildrenSize(children);\n\n  return (\n    <AutoSizer disableHeight>\n      {({ width }) => {\n        if (width === 0) {\n          return null;\n        }\n\n        const layout = model.buildGridLayout(width);\n\n        return (\n          /**\n           * The children is using a width of 100% so we need to guarantee that it is wrapped\n           * in an element that has the calculated size given by the AutoSizer. The AutoSizer\n           * has a width of 0 and will let its content overflow its div.\n           */\n          <div style={{ width: `${width}px`, height: '100%' }}>\n            <ReactGridLayout\n              width={width}\n              /*\n                    Disable draggable if mobile device, solving an issue with unintentionally\n                    moving panels. https://github.com/grafana/grafana/issues/18497\n                    theme.breakpoints.md = 769\n                  */\n              isDraggable={isDraggable && width > 768}\n              isResizable={false}\n              containerPadding={[0, 0]}\n              useCSSTransforms={false}\n              margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}\n              cols={GRID_COLUMN_COUNT}\n              rowHeight={GRID_CELL_HEIGHT}\n              draggableHandle={`.grid-drag-handle-${model.state.key}`}\n              draggableCancel=\".grid-drag-cancel\"\n              // @ts-ignore: ignoring for now until we make the size type numbers-only\n              layout={layout}\n              onDragStop={model.onDragStop}\n              onResizeStop={model.onResizeStop}\n              onLayoutChange={model.onLayoutChange}\n              isBounded={false}\n            >\n              {layout.map((gridItem) => {\n                const sceneChild = model.getSceneLayoutChild(gridItem.i)!;\n\n                return isLazy ? (\n                  <LazyLoader key={sceneChild.state.key!}>\n                    <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />\n                  </LazyLoader>\n                ) : (\n                  <div key={sceneChild.state.key}>\n                    <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />\n                  </div>\n                );\n              })}\n            </ReactGridLayout>\n          </div>\n        );\n      }}\n    </AutoSizer>\n  );\n}\n\nfunction validateChildrenSize(children: SceneGridItemLike[]) {\n  if (\n    children.some(\n      (c) =>\n        c.state.height === undefined ||\n        c.state.width === undefined ||\n        c.state.x === undefined ||\n        c.state.y === undefined\n    )\n  ) {\n    throw new Error('All children must have a size specified');\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -58,8 +58,10 @@ class SceneGridRow extends SceneObjectBase {
     return { rowc: this.state.isCollapsed ? "1" : "0" };
   }
   updateFromUrl(values) {
-    const isCollapsed = values.rowc === "1";
-    if (isCollapsed !== this.state.isCollapsed) {
+    if (values.rowc == null) {
+      return;
+    }
+    if (values.rowc !== this.getUrlState().rowc) {
       this.onCollapseToggle();
     }
   }

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

@@ -1 +1 @@
-{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/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 { SceneComponentProps, SceneObjectUrlValues } from '../../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../../services/SceneObjectUrlSyncConfig';\nimport { SceneDragHandle } from '../../SceneDragHandle';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n  title: string;\n  isCollapsible?: boolean;\n  isCollapsed?: boolean;\n  children: SceneGridItemLike[];\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: Partial<SceneGridRowState>) {\n    super({\n      children: state.children || [],\n      isCollapsible: state.isCollapsible || true,\n      title: state.title || '',\n      isDraggable: state.isDraggable || true,\n      isResizable: state.isResizable || false,\n      ...state,\n      x: 0,\n      height: 1,\n      width: GRID_COLUMN_COUNT,\n    });\n  }\n\n  public getGridLayout(): SceneGridLayout {\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    return layout;\n  }\n\n  public onCollapseToggle = () => {\n    if (!this.state.isCollapsible) {\n      return;\n    }\n\n    this.getGridLayout().toggleRow(this);\n  };\n\n  public getUrlState() {\n    return { rowc: this.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, isDraggable } = model.useState();\n  const dragHandle = <SceneDragHandle dragClass={model.getGridLayout().getDragClass()} />;\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        {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":"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"}
+{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/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 { SceneComponentProps, SceneObjectUrlValues } from '../../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../../services/SceneObjectUrlSyncConfig';\nimport { SceneDragHandle } from '../../SceneDragHandle';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n  title: string;\n  isCollapsible?: boolean;\n  isCollapsed?: boolean;\n  children: SceneGridItemLike[];\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: Partial<SceneGridRowState>) {\n    super({\n      children: state.children || [],\n      isCollapsible: state.isCollapsible || true,\n      title: state.title || '',\n      isDraggable: state.isDraggable || true,\n      isResizable: state.isResizable || false,\n      ...state,\n      x: 0,\n      height: 1,\n      width: GRID_COLUMN_COUNT,\n    });\n  }\n\n  public getGridLayout(): SceneGridLayout {\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    return layout;\n  }\n\n  public onCollapseToggle = () => {\n    if (!this.state.isCollapsible) {\n      return;\n    }\n\n    this.getGridLayout().toggleRow(this);\n  };\n\n  public getUrlState() {\n    return { rowc: this.state.isCollapsed ? '1' : '0' };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    if (values.rowc == null) {\n      return;\n    }\n\n    if (values.rowc !== this.getUrlState().rowc) {\n      this.onCollapseToggle();\n    }\n  }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n  const styles = useStyles2(getSceneGridRowStyles);\n  const { isCollapsible, isCollapsed, title, isDraggable } = model.useState();\n  const dragHandle = <SceneDragHandle dragClass={model.getGridLayout().getDragClass()} />;\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        {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":"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"}

package/dist/esm/components/layout/split/SplitLayoutRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitLayoutRenderer.js","sources":["../../../../../src/components/layout/split/SplitLayoutRenderer.tsx"],"sourcesContent":["import React, { ComponentType } from 'react';\n\nimport { SceneComponentProps, SceneObjectState, SceneObject } from '../../../core/types';\nimport { SceneFlexItemPlacement } from '../SceneFlexLayout';\nimport { SplitLayout } from './SplitLayout';\nimport { Splitter } from './Splitter';\n\n\nexport function SplitLayoutRenderer({ model }: SceneFlexItemRenderProps<SplitLayout>) {\n  const { primary, secondary, direction, isHidden } = model.useState();\n\n  if (isHidden) {\n    return null;\n  }\n\n  const Prim = primary.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n  const Sec = secondary.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n  return (\n    <Splitter direction={direction}>\n      <Prim key={primary.state.key} model={primary} parentState={model.state} />\n      <Sec key={secondary.state.key} model={secondary} parentState={model.state} />\n    </Splitter>\n  );\n}\n\nexport interface SceneFlexItemState extends SceneFlexItemPlacement, SceneObjectState {\n  body: SceneObject | undefined;\n}\n\ninterface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {\n  parentState?: SceneFlexItemPlacement;\n}\n"],"names":[],"mappings":";;;AAQgB,SAAA,mBAAA,CAAoB,EAAE,KAAA,EAAgD,EAAA;AACpF,EAAA,MAAM,EAAE,OAAS,EAAA,SAAA,EAAW,WAAW,QAAS,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAEnE,EAAA,IAAI,QAAU,EAAA;AACZ,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,OAAO,OAAQ,CAAA,SAAA,CAAA;AACrB,EAAA,MAAM,MAAM,SAAU,CAAA,SAAA,CAAA;AACtB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IAAS,SAAA;AAAA,GAAA,kBACP,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,GAAA,EAAK,QAAQ,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,OAAA;AAAA,IAAS,aAAa,KAAM,CAAA,KAAA;AAAA,GAAO,mBACvE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAI,GAAA,EAAK,UAAU,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,SAAA;AAAA,IAAW,aAAa,KAAM,CAAA,KAAA;AAAA,GAAO,CAC7E,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SplitLayoutRenderer.js","sources":["../../../../../src/components/layout/split/SplitLayoutRenderer.tsx"],"sourcesContent":["import React, { ComponentType } from 'react';\n\nimport { SceneComponentProps, SceneObjectState, SceneObject } from '../../../core/types';\nimport { SceneFlexItemPlacement } from '../SceneFlexLayout';\nimport { SplitLayout } from './SplitLayout';\nimport { Splitter } from './Splitter';\n\nexport function SplitLayoutRenderer({ model }: SceneFlexItemRenderProps<SplitLayout>) {\n  const { primary, secondary, direction, isHidden } = model.useState();\n\n  if (isHidden) {\n    return null;\n  }\n\n  const Prim = primary.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n  const Sec = secondary.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n  return (\n    <Splitter direction={direction}>\n      <Prim key={primary.state.key} model={primary} parentState={model.state} />\n      <Sec key={secondary.state.key} model={secondary} parentState={model.state} />\n    </Splitter>\n  );\n}\n\nexport interface SceneFlexItemState extends SceneFlexItemPlacement, SceneObjectState {\n  body: SceneObject | undefined;\n}\n\ninterface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {\n  parentState?: SceneFlexItemPlacement;\n}\n"],"names":[],"mappings":";;;AAOgB,SAAA,mBAAA,CAAoB,EAAE,KAAA,EAAgD,EAAA;AACpF,EAAA,MAAM,EAAE,OAAS,EAAA,SAAA,EAAW,WAAW,QAAS,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAEnE,EAAA,IAAI,QAAU,EAAA;AACZ,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,OAAO,OAAQ,CAAA,SAAA,CAAA;AACrB,EAAA,MAAM,MAAM,SAAU,CAAA,SAAA,CAAA;AACtB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IAAS,SAAA;AAAA,GAAA,kBACP,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,GAAA,EAAK,QAAQ,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,OAAA;AAAA,IAAS,aAAa,KAAM,CAAA,KAAA;AAAA,GAAO,mBACvE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAI,GAAA,EAAK,UAAU,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,SAAA;AAAA,IAAW,aAAa,KAAM,CAAA,KAAA;AAAA,GAAO,CAC7E,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/index.js

@@ -1,5 +1,7 @@
 import { getUrlWithAppState } from './components/SceneApp/utils.js';
 import { registerRuntimePanelPlugin } from './components/VizPanel/registerRuntimePanelPlugin.js';
+import { registerRuntimeDataSource } from './querying/RuntimeDataSource.js';
+export { RuntimeDataSource, registerRuntimeDataSource } from './querying/RuntimeDataSource.js';
 export { isSceneObject } from './core/types.js';
 export { SceneObjectStateChangedEvent } from './core/events.js';
 export { sceneGraph } from './core/sceneGraph/index.js';
@@ -45,7 +47,8 @@ export { PanelBuilders } from './core/PanelBuilders/index.js';
 
 const sceneUtils = {
   getUrlWithAppState,
-  registerRuntimePanelPlugin
+  registerRuntimePanelPlugin,
+  registerRuntimeDataSource
 };
 
 export { sceneUtils };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { getUrlWithAppState } from './components/SceneApp/utils';\nimport { registerRuntimePanelPlugin } from './components/VizPanel/registerRuntimePanelPlugin';\n\nexport * from './core/types';\nexport * from './core/events';\nexport { sceneGraph } from './core/sceneGraph';\nexport * as behaviors from './behaviors';\n\nexport { SceneObjectBase } from './core/SceneObjectBase';\nexport { SceneDataNode } from './core/SceneDataNode';\nexport { SceneTimeRange } from './core/SceneTimeRange';\nexport { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride';\n\nexport { SceneQueryRunner, type QueryRunnerState } from './querying/SceneQueryRunner';\nexport { SceneDataTransformer } from './querying/SceneDataTransformer';\n\nexport * from './variables/types';\nexport { VariableDependencyConfig } from './variables/VariableDependencyConfig';\nexport { formatRegistry, type FormatVariable } from './variables/interpolation/formatRegistry';\nexport { VariableValueSelectors } from './variables/components/VariableValueSelectors';\nexport { SceneVariableSet } from './variables/sets/SceneVariableSet';\nexport { ConstantVariable } from './variables/variants/ConstantVariable';\nexport { CustomVariable } from './variables/variants/CustomVariable';\nexport { DataSourceVariable } from './variables/variants/DataSourceVariable';\nexport { QueryVariable } from './variables/variants/query/QueryVariable';\nexport { TestVariable } from './variables/variants/TestVariable';\nexport { TextBoxVariable } from './variables/variants/TextBoxVariable';\n\nexport { type UrlSyncManagerLike as UrlSyncManager, getUrlSyncManager } from './services/UrlSyncManager';\nexport { SceneObjectUrlSyncConfig } from './services/SceneObjectUrlSyncConfig';\n\nexport { EmbeddedScene, type EmbeddedSceneState } from './components/EmbeddedScene';\nexport { VizPanel, type VizPanelState } from './components/VizPanel/VizPanel';\nexport { VizPanelMenu } from './components/VizPanel/VizPanelMenu';\nexport { NestedScene } from './components/NestedScene';\nexport { SceneCanvasText } from './components/SceneCanvasText';\nexport { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton';\nexport { SceneTimePicker } from './components/SceneTimePicker';\nexport { SceneRefreshPicker } from './components/SceneRefreshPicker';\nexport { SceneByFrameRepeater } from './components/SceneByFrameRepeater';\nexport { SceneControlsSpacer } from './components/SceneControlsSpacer';\nexport { SceneFlexLayout, SceneFlexItem, type SceneFlexItemState } from './components/layout/SceneFlexLayout';\nexport { SceneGridLayout, SceneGridItem } from './components/layout/grid/SceneGridLayout';\nexport { SceneGridRow } from './components/layout/grid/SceneGridRow';\nexport { SplitLayout } from './components/layout/split/SplitLayout';\nexport {\n  type SceneAppPageLike,\n  type SceneRouteMatch,\n  type SceneAppPageState,\n  type SceneAppDrilldownView,\n  type SceneAppRoute,\n} from './components/SceneApp/types';\nexport { SceneApp } from './components/SceneApp/SceneApp';\nexport { SceneAppPage } from './components/SceneApp/SceneAppPage';\nexport { SceneReactObject } from './components/SceneReactObject';\nexport { PanelBuilders } from './core/PanelBuilders';\n\nexport const sceneUtils = {\n  getUrlWithAppState,\n  registerRuntimePanelPlugin,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDO,MAAM,UAAa,GAAA;AAAA,EACxB,kBAAA;AAAA,EACA,0BAAA;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { getUrlWithAppState } from './components/SceneApp/utils';\nimport { registerRuntimePanelPlugin } from './components/VizPanel/registerRuntimePanelPlugin';\nimport { registerRuntimeDataSource } from './querying/RuntimeDataSource';\n\nexport * from './core/types';\nexport * from './core/events';\nexport { sceneGraph } from './core/sceneGraph';\nexport * as behaviors from './behaviors';\n\nexport { SceneObjectBase } from './core/SceneObjectBase';\nexport { SceneDataNode } from './core/SceneDataNode';\nexport { SceneTimeRange } from './core/SceneTimeRange';\nexport { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride';\n\nexport { SceneQueryRunner, type QueryRunnerState } from './querying/SceneQueryRunner';\nexport { SceneDataTransformer } from './querying/SceneDataTransformer';\nexport { registerRuntimeDataSource, RuntimeDataSource } from './querying/RuntimeDataSource';\n\nexport * from './variables/types';\nexport { VariableDependencyConfig } from './variables/VariableDependencyConfig';\nexport { formatRegistry, type FormatVariable } from './variables/interpolation/formatRegistry';\nexport { VariableValueSelectors } from './variables/components/VariableValueSelectors';\nexport { SceneVariableSet } from './variables/sets/SceneVariableSet';\nexport { ConstantVariable } from './variables/variants/ConstantVariable';\nexport { CustomVariable } from './variables/variants/CustomVariable';\nexport { DataSourceVariable } from './variables/variants/DataSourceVariable';\nexport { QueryVariable } from './variables/variants/query/QueryVariable';\nexport { TestVariable } from './variables/variants/TestVariable';\nexport { TextBoxVariable } from './variables/variants/TextBoxVariable';\n\nexport { type UrlSyncManagerLike as UrlSyncManager, getUrlSyncManager } from './services/UrlSyncManager';\nexport { SceneObjectUrlSyncConfig } from './services/SceneObjectUrlSyncConfig';\n\nexport { EmbeddedScene, type EmbeddedSceneState } from './components/EmbeddedScene';\nexport { VizPanel, type VizPanelState } from './components/VizPanel/VizPanel';\nexport { VizPanelMenu } from './components/VizPanel/VizPanelMenu';\nexport { NestedScene } from './components/NestedScene';\nexport { SceneCanvasText } from './components/SceneCanvasText';\nexport { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton';\nexport { SceneTimePicker } from './components/SceneTimePicker';\nexport { SceneRefreshPicker } from './components/SceneRefreshPicker';\nexport { SceneByFrameRepeater } from './components/SceneByFrameRepeater';\nexport { SceneControlsSpacer } from './components/SceneControlsSpacer';\nexport { SceneFlexLayout, SceneFlexItem, type SceneFlexItemState } from './components/layout/SceneFlexLayout';\nexport { SceneGridLayout, SceneGridItem } from './components/layout/grid/SceneGridLayout';\nexport { SceneGridRow } from './components/layout/grid/SceneGridRow';\nexport { SplitLayout } from './components/layout/split/SplitLayout';\nexport {\n  type SceneAppPageLike,\n  type SceneRouteMatch,\n  type SceneAppPageState,\n  type SceneAppDrilldownView,\n  type SceneAppRoute,\n} from './components/SceneApp/types';\nexport { SceneApp } from './components/SceneApp/SceneApp';\nexport { SceneAppPage } from './components/SceneApp/SceneAppPage';\nexport { SceneReactObject } from './components/SceneReactObject';\nexport { PanelBuilders } from './core/PanelBuilders';\n\nexport const sceneUtils = {\n  getUrlWithAppState,\n  registerRuntimePanelPlugin,\n  registerRuntimeDataSource,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DO,MAAM,UAAa,GAAA;AAAA,EACxB,kBAAA;AAAA,EACA,0BAAA;AAAA,EACA,yBAAA;AACF;;;;"}

package/dist/esm/querying/RuntimeDataSource.js

@@ -0,0 +1,49 @@
+import { DataSourceApi, PluginType } from '@grafana/data';
+
+class RuntimeDataSource extends DataSourceApi {
+  constructor(pluginId, uid) {
+    super({
+      name: "RuntimeDataSource-" + pluginId,
+      uid,
+      type: pluginId,
+      id: 1,
+      readOnly: true,
+      jsonData: {},
+      access: "direct",
+      meta: {
+        id: pluginId,
+        name: "RuntimeDataSource-" + pluginId,
+        type: PluginType.datasource,
+        info: {
+          author: {
+            name: ""
+          },
+          description: "",
+          links: [],
+          logos: {
+            large: "",
+            small: ""
+          },
+          screenshots: [],
+          updated: "",
+          version: ""
+        },
+        module: "",
+        baseUrl: ""
+      }
+    });
+  }
+  testDatasource() {
+    return Promise.resolve({});
+  }
+}
+const runtimeDataSources = /* @__PURE__ */ new Map();
+function registerRuntimeDataSource({ dataSource }) {
+  if (runtimeDataSources.has(dataSource.uid)) {
+    throw new Error(`A runtime data source with uid ${dataSource.uid} has already been registered`);
+  }
+  runtimeDataSources.set(dataSource.uid, dataSource);
+}
+
+export { RuntimeDataSource, registerRuntimeDataSource, runtimeDataSources };
+//# sourceMappingURL=RuntimeDataSource.js.map

package/dist/esm/querying/RuntimeDataSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeDataSource.js","sources":["../../../src/querying/RuntimeDataSource.ts"],"sourcesContent":["import { DataQuery, DataSourceApi, PluginType } from '@grafana/data';\n\nexport abstract class RuntimeDataSource<TQuery extends DataQuery = DataQuery> extends DataSourceApi<TQuery> {\n  public constructor(pluginId: string, uid: string) {\n    super({\n      name: 'RuntimeDataSource-' + pluginId,\n      uid: uid,\n      type: pluginId,\n      id: 1,\n      readOnly: true,\n      jsonData: {},\n      access: 'direct',\n      meta: {\n        id: pluginId,\n        name: 'RuntimeDataSource-' + pluginId,\n        type: PluginType.datasource,\n        info: {\n          author: {\n            name: '',\n          },\n          description: '',\n          links: [],\n          logos: {\n            large: '',\n            small: '',\n          },\n          screenshots: [],\n          updated: '',\n          version: '',\n        },\n        module: '',\n        baseUrl: '',\n      },\n    });\n  }\n\n  public testDatasource(): Promise<any> {\n    return Promise.resolve({});\n  }\n}\n\nexport const runtimeDataSources = new Map<string, RuntimeDataSource>();\n\nexport interface RuntimeDataSourceOptions {\n  dataSource: RuntimeDataSource;\n}\n\n/**\n * Provides a way to register runtime panel plugins.\n * Please use a pluginId that is unlikely to collide with other plugins.\n */\nexport function registerRuntimeDataSource({ dataSource }: RuntimeDataSourceOptions) {\n  if (runtimeDataSources.has(dataSource.uid)) {\n    throw new Error(`A runtime data source with uid ${dataSource.uid} has already been registered`);\n  }\n\n  runtimeDataSources.set(dataSource.uid, dataSource);\n}\n"],"names":[],"mappings":";;AAEO,MAAe,0BAAgE,aAAsB,CAAA;AAAA,EACnG,WAAA,CAAY,UAAkB,GAAa,EAAA;AAChD,IAAM,KAAA,CAAA;AAAA,MACJ,MAAM,oBAAuB,GAAA,QAAA;AAAA,MAC7B,GAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,EAAI,EAAA,CAAA;AAAA,MACJ,QAAU,EAAA,IAAA;AAAA,MACV,UAAU,EAAC;AAAA,MACX,MAAQ,EAAA,QAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,EAAI,EAAA,QAAA;AAAA,QACJ,MAAM,oBAAuB,GAAA,QAAA;AAAA,QAC7B,MAAM,UAAW,CAAA,UAAA;AAAA,QACjB,IAAM,EAAA;AAAA,UACJ,MAAQ,EAAA;AAAA,YACN,IAAM,EAAA,EAAA;AAAA,WACR;AAAA,UACA,WAAa,EAAA,EAAA;AAAA,UACb,OAAO,EAAC;AAAA,UACR,KAAO,EAAA;AAAA,YACL,KAAO,EAAA,EAAA;AAAA,YACP,KAAO,EAAA,EAAA;AAAA,WACT;AAAA,UACA,aAAa,EAAC;AAAA,UACd,OAAS,EAAA,EAAA;AAAA,UACT,OAAS,EAAA,EAAA;AAAA,SACX;AAAA,QACA,MAAQ,EAAA,EAAA;AAAA,QACR,OAAS,EAAA,EAAA;AAAA,OACX;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAAA,EAEO,cAA+B,GAAA;AACpC,IAAO,OAAA,OAAA,CAAQ,OAAQ,CAAA,EAAE,CAAA,CAAA;AAAA,GAC3B;AACF,CAAA;AAEa,MAAA,kBAAA,uBAAyB,GAA+B,GAAA;AAUrD,SAAA,yBAAA,CAA0B,EAAE,UAAA,EAAwC,EAAA;AAClF,EAAA,IAAI,kBAAmB,CAAA,GAAA,CAAI,UAAW,CAAA,GAAG,CAAG,EAAA;AAC1C,IAAA,MAAM,IAAI,KAAA,CAAM,CAAkC,+BAAA,EAAA,UAAA,CAAW,GAAiC,CAAA,4BAAA,CAAA,CAAA,CAAA;AAAA,GAChG;AAEA,EAAmB,kBAAA,CAAA,GAAA,CAAI,UAAW,CAAA,GAAA,EAAK,UAAU,CAAA,CAAA;AACnD;;;;"}

package/dist/esm/querying/SceneQueryRunner.js

@@ -144,7 +144,8 @@ class SceneQueryRunner extends SceneObjectBase {
     });
   }
   async runWithTimeRange(timeRange) {
-    var _a;
+    var _a, _b;
+    (_a = this._querySub) == null ? void 0 : _a.unsubscribe();
     if (sceneGraph.hasVariableDependencyInLoadingState(this)) {
       writeSceneLog("SceneQueryRunner", "Variable dependency is in loading state, skipping query execution");
       this.setState({ isWaitingForVariables: true });
@@ -172,10 +173,11 @@ class SceneQueryRunner extends SceneObjectBase {
       targets: cloneDeep(queries),
       maxDataPoints: this.getMaxDataPoints(),
       scopedVars: sceneObjectScopedVar,
-      startTime: Date.now()
+      startTime: Date.now(),
+      liveStreaming: this.state.liveStreaming
     };
     try {
-      const datasource = (_a = this.state.datasource) != null ? _a : findFirstDatasource(request.targets);
+      const datasource = (_b = this.state.datasource) != null ? _b : findFirstDatasource(request.targets);
       const ds = await getDataSource(datasource, request.scopedVars);
       request.targets = request.targets.map((query) => {
         if (!query.datasource) {

package/dist/esm/querying/SceneQueryRunner.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneQueryRunner.js","sources":["../../../src/querying/SceneQueryRunner.ts"],"sourcesContent":["import { cloneDeep } from 'lodash';\nimport { Unsubscribable } from 'rxjs';\n\nimport { DataQuery, DataSourceRef, LoadingState } from '@grafana/schema';\n\nimport { CoreApp, DataQueryRequest, PanelData, preProcessPanelData, rangeUtil, ScopedVar } from '@grafana/data';\nimport { getRunRequest } from '@grafana/runtime';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneDataProvider, SceneObjectState, SceneTimeRangeLike } from '../core/types';\nimport { getDataSource } from '../utils/getDataSource';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\nimport { SceneVariable } from '../variables/types';\nimport { writeSceneLog } from '../utils/writeSceneLog';\nimport { VariableValueRecorder } from '../variables/VariableValueRecorder';\nimport { emptyPanelData } from '../core/SceneDataNode';\n\nlet counter = 100;\n\nexport function getNextRequestId() {\n  return 'SQR' + counter++;\n}\n\nexport interface QueryRunnerState extends SceneObjectState {\n  data?: PanelData;\n  queries: DataQueryExtended[];\n  datasource?: DataSourceRef;\n  minInterval?: string;\n  maxDataPoints?: number;\n  // Non persisted state\n  maxDataPointsFromWidth?: boolean;\n  isWaitingForVariables?: boolean;\n}\n\nexport interface DataQueryExtended extends DataQuery {\n  [key: string]: any;\n}\n\nexport class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implements SceneDataProvider {\n  private _querySub?: Unsubscribable;\n  private _containerWidth?: number;\n  private _variableValueRecorder = new VariableValueRecorder();\n  private _hasFetchedData = false;\n\n  protected _variableDependency: VariableDependencyConfig<QueryRunnerState> = new VariableDependencyConfig(this, {\n    statePaths: ['queries', 'datasource'],\n    onVariableUpdatesCompleted: (variables, dependencyChanged) =>\n      this.onVariableUpdatesCompleted(variables, dependencyChanged),\n  });\n\n  public constructor(initialState: QueryRunnerState) {\n    super(initialState);\n\n    this.addActivationHandler(() => this._onActivate());\n  }\n\n  private _onActivate() {\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    this._subs.add(\n      timeRange.subscribeToState(() => {\n        this.runWithTimeRange(timeRange);\n      })\n    );\n\n    if (this.shouldRunQueriesOnActivate()) {\n      this.runQueries();\n    }\n\n    return () => this._onDeactivate();\n  }\n\n  /**\n   * Handles some tricky cases where we need to run queries even when they have not changed in case\n   * the query execution on activate was stopped due to VariableSet still not having processed all variables.\n   */\n  private onVariableUpdatesCompleted(_variablesThatHaveChanged: Set<SceneVariable>, dependencyChanged: boolean) {\n    if (this.state.isWaitingForVariables && this.shouldRunQueriesOnActivate()) {\n      this.runQueries();\n      return;\n    }\n\n    if (dependencyChanged) {\n      this.runQueries();\n    }\n  }\n\n  private shouldRunQueriesOnActivate() {\n    // If no maxDataPoints specified we might need to wait for container width to be set from the outside\n    if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {\n      return false;\n    }\n\n    if (this._variableValueRecorder.hasDependenciesChanged(this)) {\n      writeSceneLog(\n        'SceneQueryRunner',\n        'Variable dependency changed while inactive, shouldRunQueriesOnActivate returns true'\n      );\n      return true;\n    }\n\n    // If we don't have any data we should run queries\n    if (!this.state.data) {\n      return true;\n    }\n\n    // If time range is stale / different we should run queries\n    if (this._isDataTimeRangeStale(this.state.data)) {\n      return true;\n    }\n\n    return false;\n  }\n\n  private _isDataTimeRangeStale(data: PanelData) {\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    if (data.timeRange === timeRange.state.value) {\n      return false;\n    }\n\n    writeSceneLog('SceneQueryRunner', 'Data time range is stale');\n    return true;\n  }\n\n  private _onDeactivate(): void {\n    if (this._querySub) {\n      this._querySub.unsubscribe();\n      this._querySub = undefined;\n    }\n\n    this._variableValueRecorder.recordCurrentDependencyValuesForSceneObject(this);\n  }\n\n  public setContainerWidth(width: number) {\n    // If we don't have a width we should run queries\n    if (!this._containerWidth && width > 0) {\n      this._containerWidth = width;\n\n      // If we don't have maxDataPoints specifically set and maxDataPointsFromWidth is true\n      if (this.state.maxDataPointsFromWidth && !this.state.maxDataPoints) {\n        // As this is called from render path we need to wait for next tick before running queries\n        setTimeout(() => {\n          if (this.isActive && !this._querySub) {\n            this.runQueries();\n          }\n        }, 0);\n      }\n    } else {\n      // if the updated container width is bigger than 0 let's remember the width until next query issue\n      if (width > 0) {\n        this._containerWidth = width;\n      }\n    }\n  }\n\n  public isDataReadyToDisplay() {\n    return this._hasFetchedData;\n  }\n\n  public runQueries() {\n    const timeRange = sceneGraph.getTimeRange(this);\n    this.runWithTimeRange(timeRange);\n  }\n\n  private getMaxDataPoints() {\n    if (this.state.maxDataPoints) {\n      return this.state.maxDataPoints;\n    }\n\n    return this.state.maxDataPointsFromWidth ? this._containerWidth ?? 500 : 500;\n  }\n\n  public cancelQuery() {\n    this._querySub?.unsubscribe();\n    this.setState({\n      data: { ...this.state.data!, state: LoadingState.Done },\n    });\n  }\n\n  private async runWithTimeRange(timeRange: SceneTimeRangeLike) {\n    // Skip executing queries if variable dependency is in loading state\n    if (sceneGraph.hasVariableDependencyInLoadingState(this)) {\n      writeSceneLog('SceneQueryRunner', 'Variable dependency is in loading state, skipping query execution');\n      this.setState({ isWaitingForVariables: true });\n      return;\n    }\n\n    // If we were waiting for variables, clear that flag\n    if (this.state.isWaitingForVariables) {\n      this.setState({ isWaitingForVariables: false });\n    }\n\n    const { minInterval, queries } = this.state;\n    const sceneObjectScopedVar: Record<string, ScopedVar<SceneQueryRunner>> = {\n      __sceneObject: { text: '__sceneObject', value: this },\n    };\n\n    // Simple path when no queries exist\n    if (!queries?.length) {\n      this._setNoDataState();\n      return;\n    }\n\n    const request: DataQueryRequest = {\n      app: CoreApp.Dashboard,\n      requestId: getNextRequestId(),\n      timezone: timeRange.getTimeZone(),\n      panelId: 1,\n      range: timeRange.state.value,\n      interval: '1s',\n      intervalMs: 1000,\n      targets: cloneDeep(queries),\n      maxDataPoints: this.getMaxDataPoints(),\n      scopedVars: sceneObjectScopedVar,\n      startTime: Date.now(),\n    };\n\n    try {\n      const datasource = this.state.datasource ?? findFirstDatasource(request.targets);\n      const ds = await getDataSource(datasource, request.scopedVars);\n\n      // Attach the data source name to each query\n      request.targets = request.targets.map((query) => {\n        if (!query.datasource) {\n          query.datasource = ds.getRef();\n        }\n        return query;\n      });\n\n      // TODO interpolate minInterval\n      const lowerIntervalLimit = minInterval ? minInterval : ds.interval;\n      const norm = rangeUtil.calculateInterval(timeRange.state.value, request.maxDataPoints!, lowerIntervalLimit);\n\n      // make shallow copy of scoped vars,\n      // and add built in variables interval and interval_ms\n      request.scopedVars = Object.assign({}, request.scopedVars, {\n        __interval: { text: norm.interval, value: norm.interval },\n        __interval_ms: { text: norm.intervalMs.toString(), value: norm.intervalMs },\n      });\n\n      request.interval = norm.interval;\n      request.intervalMs = norm.intervalMs;\n\n      const runRequest = getRunRequest();\n\n      writeSceneLog('SceneQueryRunner', 'Starting runRequest', this.state.key);\n\n      this._querySub = runRequest(ds, request).subscribe(this.onDataReceived);\n    } catch (err) {\n      console.error('PanelQueryRunner Error', err);\n    }\n  }\n\n  private onDataReceived = (data: PanelData) => {\n    const preProcessedData = preProcessPanelData(data, this.state.data);\n    if (!this._hasFetchedData && preProcessedData.state !== LoadingState.Loading) {\n      this._hasFetchedData = true;\n    }\n\n    this.setState({ data: preProcessedData });\n  };\n\n  private _setNoDataState() {\n    if (this.state.data !== emptyPanelData) {\n      this.setState({ data: emptyPanelData });\n    }\n  }\n}\n\nexport function findFirstDatasource(targets: DataQuery[]): DataSourceRef | undefined {\n  return targets.find((t) => t.datasource !== null)?.datasource ?? undefined;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SceneQueryRunner.js","sources":["../../../src/querying/SceneQueryRunner.ts"],"sourcesContent":["import { cloneDeep } from 'lodash';\nimport { Unsubscribable } from 'rxjs';\n\nimport { DataQuery, DataSourceRef, LoadingState } from '@grafana/schema';\n\nimport { CoreApp, DataQueryRequest, PanelData, preProcessPanelData, rangeUtil, ScopedVar } from '@grafana/data';\nimport { getRunRequest } from '@grafana/runtime';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneDataProvider, SceneObjectState, SceneTimeRangeLike } from '../core/types';\nimport { getDataSource } from '../utils/getDataSource';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\nimport { SceneVariable } from '../variables/types';\nimport { writeSceneLog } from '../utils/writeSceneLog';\nimport { VariableValueRecorder } from '../variables/VariableValueRecorder';\nimport { emptyPanelData } from '../core/SceneDataNode';\n\nlet counter = 100;\n\nexport function getNextRequestId() {\n  return 'SQR' + counter++;\n}\n\nexport interface QueryRunnerState extends SceneObjectState {\n  data?: PanelData;\n  queries: DataQueryExtended[];\n  datasource?: DataSourceRef;\n  minInterval?: string;\n  maxDataPoints?: number;\n  liveStreaming?: boolean;\n  // Non persisted state\n  maxDataPointsFromWidth?: boolean;\n  isWaitingForVariables?: boolean;\n}\n\nexport interface DataQueryExtended extends DataQuery {\n  [key: string]: any;\n}\n\nexport class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implements SceneDataProvider {\n  private _querySub?: Unsubscribable;\n  private _containerWidth?: number;\n  private _variableValueRecorder = new VariableValueRecorder();\n  private _hasFetchedData = false;\n\n  protected _variableDependency: VariableDependencyConfig<QueryRunnerState> = new VariableDependencyConfig(this, {\n    statePaths: ['queries', 'datasource'],\n    onVariableUpdatesCompleted: (variables, dependencyChanged) =>\n      this.onVariableUpdatesCompleted(variables, dependencyChanged),\n  });\n\n  public constructor(initialState: QueryRunnerState) {\n    super(initialState);\n\n    this.addActivationHandler(() => this._onActivate());\n  }\n\n  private _onActivate() {\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    this._subs.add(\n      timeRange.subscribeToState(() => {\n        this.runWithTimeRange(timeRange);\n      })\n    );\n\n    if (this.shouldRunQueriesOnActivate()) {\n      this.runQueries();\n    }\n\n    return () => this._onDeactivate();\n  }\n\n  /**\n   * Handles some tricky cases where we need to run queries even when they have not changed in case\n   * the query execution on activate was stopped due to VariableSet still not having processed all variables.\n   */\n  private onVariableUpdatesCompleted(_variablesThatHaveChanged: Set<SceneVariable>, dependencyChanged: boolean) {\n    if (this.state.isWaitingForVariables && this.shouldRunQueriesOnActivate()) {\n      this.runQueries();\n      return;\n    }\n\n    if (dependencyChanged) {\n      this.runQueries();\n    }\n  }\n\n  private shouldRunQueriesOnActivate() {\n    // If no maxDataPoints specified we might need to wait for container width to be set from the outside\n    if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {\n      return false;\n    }\n\n    if (this._variableValueRecorder.hasDependenciesChanged(this)) {\n      writeSceneLog(\n        'SceneQueryRunner',\n        'Variable dependency changed while inactive, shouldRunQueriesOnActivate returns true'\n      );\n      return true;\n    }\n\n    // If we don't have any data we should run queries\n    if (!this.state.data) {\n      return true;\n    }\n\n    // If time range is stale / different we should run queries\n    if (this._isDataTimeRangeStale(this.state.data)) {\n      return true;\n    }\n\n    return false;\n  }\n\n  private _isDataTimeRangeStale(data: PanelData) {\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    if (data.timeRange === timeRange.state.value) {\n      return false;\n    }\n\n    writeSceneLog('SceneQueryRunner', 'Data time range is stale');\n    return true;\n  }\n\n  private _onDeactivate(): void {\n    if (this._querySub) {\n      this._querySub.unsubscribe();\n      this._querySub = undefined;\n    }\n\n    this._variableValueRecorder.recordCurrentDependencyValuesForSceneObject(this);\n  }\n\n  public setContainerWidth(width: number) {\n    // If we don't have a width we should run queries\n    if (!this._containerWidth && width > 0) {\n      this._containerWidth = width;\n\n      // If we don't have maxDataPoints specifically set and maxDataPointsFromWidth is true\n      if (this.state.maxDataPointsFromWidth && !this.state.maxDataPoints) {\n        // As this is called from render path we need to wait for next tick before running queries\n        setTimeout(() => {\n          if (this.isActive && !this._querySub) {\n            this.runQueries();\n          }\n        }, 0);\n      }\n    } else {\n      // if the updated container width is bigger than 0 let's remember the width until next query issue\n      if (width > 0) {\n        this._containerWidth = width;\n      }\n    }\n  }\n\n  public isDataReadyToDisplay() {\n    return this._hasFetchedData;\n  }\n\n  public runQueries() {\n    const timeRange = sceneGraph.getTimeRange(this);\n    this.runWithTimeRange(timeRange);\n  }\n\n  private getMaxDataPoints() {\n    if (this.state.maxDataPoints) {\n      return this.state.maxDataPoints;\n    }\n\n    return this.state.maxDataPointsFromWidth ? this._containerWidth ?? 500 : 500;\n  }\n\n  public cancelQuery() {\n    this._querySub?.unsubscribe();\n    this.setState({\n      data: { ...this.state.data!, state: LoadingState.Done },\n    });\n  }\n\n  private async runWithTimeRange(timeRange: SceneTimeRangeLike) {\n    // Cancel any running queries\n    this._querySub?.unsubscribe();\n\n    // Skip executing queries if variable dependency is in loading state\n    if (sceneGraph.hasVariableDependencyInLoadingState(this)) {\n      writeSceneLog('SceneQueryRunner', 'Variable dependency is in loading state, skipping query execution');\n      this.setState({ isWaitingForVariables: true });\n      return;\n    }\n\n    // If we were waiting for variables, clear that flag\n    if (this.state.isWaitingForVariables) {\n      this.setState({ isWaitingForVariables: false });\n    }\n\n    const { minInterval, queries } = this.state;\n    const sceneObjectScopedVar: Record<string, ScopedVar<SceneQueryRunner>> = {\n      __sceneObject: { text: '__sceneObject', value: this },\n    };\n\n    // Simple path when no queries exist\n    if (!queries?.length) {\n      this._setNoDataState();\n      return;\n    }\n\n    const request: DataQueryRequest = {\n      app: CoreApp.Dashboard,\n      requestId: getNextRequestId(),\n      timezone: timeRange.getTimeZone(),\n      panelId: 1,\n      range: timeRange.state.value,\n      interval: '1s',\n      intervalMs: 1000,\n      targets: cloneDeep(queries),\n      maxDataPoints: this.getMaxDataPoints(),\n      scopedVars: sceneObjectScopedVar,\n      startTime: Date.now(),\n      liveStreaming: this.state.liveStreaming,\n    };\n\n    try {\n      const datasource = this.state.datasource ?? findFirstDatasource(request.targets);\n      const ds = await getDataSource(datasource, request.scopedVars);\n\n      // Attach the data source name to each query\n      request.targets = request.targets.map((query) => {\n        if (!query.datasource) {\n          query.datasource = ds.getRef();\n        }\n        return query;\n      });\n\n      // TODO interpolate minInterval\n      const lowerIntervalLimit = minInterval ? minInterval : ds.interval;\n      const norm = rangeUtil.calculateInterval(timeRange.state.value, request.maxDataPoints!, lowerIntervalLimit);\n\n      // make shallow copy of scoped vars,\n      // and add built in variables interval and interval_ms\n      request.scopedVars = Object.assign({}, request.scopedVars, {\n        __interval: { text: norm.interval, value: norm.interval },\n        __interval_ms: { text: norm.intervalMs.toString(), value: norm.intervalMs },\n      });\n\n      request.interval = norm.interval;\n      request.intervalMs = norm.intervalMs;\n\n      const runRequest = getRunRequest();\n\n      writeSceneLog('SceneQueryRunner', 'Starting runRequest', this.state.key);\n\n      this._querySub = runRequest(ds, request).subscribe(this.onDataReceived);\n    } catch (err) {\n      console.error('PanelQueryRunner Error', err);\n    }\n  }\n\n  private onDataReceived = (data: PanelData) => {\n    const preProcessedData = preProcessPanelData(data, this.state.data);\n    if (!this._hasFetchedData && preProcessedData.state !== LoadingState.Loading) {\n      this._hasFetchedData = true;\n    }\n\n    this.setState({ data: preProcessedData });\n  };\n\n  private _setNoDataState() {\n    if (this.state.data !== emptyPanelData) {\n      this.setState({ data: emptyPanelData });\n    }\n  }\n}\n\nexport function findFirstDatasource(targets: DataQuery[]): DataSourceRef | undefined {\n  return targets.find((t) => t.datasource !== null)?.datasource ?? undefined;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAI,OAAU,GAAA,GAAA,CAAA;AAEP,SAAS,gBAAmB,GAAA;AACjC,EAAA,OAAO,KAAQ,GAAA,OAAA,EAAA,CAAA;AACjB,CAAA;AAkBO,MAAM,yBAAyB,eAA+D,CAAA;AAAA,EAY5F,YAAY,YAAgC,EAAA;AACjD,IAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AAVpB,IAAQ,IAAA,CAAA,sBAAA,GAAyB,IAAI,qBAAsB,EAAA,CAAA;AAC3D,IAAA,IAAA,CAAQ,eAAkB,GAAA,KAAA,CAAA;AAE1B,IAAU,IAAA,CAAA,mBAAA,GAAkE,IAAI,wBAAA,CAAyB,IAAM,EAAA;AAAA,MAC7G,UAAA,EAAY,CAAC,SAAA,EAAW,YAAY,CAAA;AAAA,MACpC,4BAA4B,CAAC,SAAA,EAAW,sBACtC,IAAK,CAAA,0BAAA,CAA2B,WAAW,iBAAiB,CAAA;AAAA,KAC/D,CAAA,CAAA;AAkND,IAAQ,IAAA,CAAA,cAAA,GAAiB,CAAC,IAAoB,KAAA;AAC5C,MAAA,MAAM,gBAAmB,GAAA,mBAAA,CAAoB,IAAM,EAAA,IAAA,CAAK,MAAM,IAAI,CAAA,CAAA;AAClE,MAAA,IAAI,CAAC,IAAK,CAAA,eAAA,IAAmB,gBAAiB,CAAA,KAAA,KAAU,aAAa,OAAS,EAAA;AAC5E,QAAA,IAAA,CAAK,eAAkB,GAAA,IAAA,CAAA;AAAA,OACzB;AAEA,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,IAAM,EAAA,gBAAA,EAAkB,CAAA,CAAA;AAAA,KAC1C,CAAA;AApNE,IAAA,IAAA,CAAK,oBAAqB,CAAA,MAAM,IAAK,CAAA,WAAA,EAAa,CAAA,CAAA;AAAA,GACpD;AAAA,EAEQ,WAAc,GAAA;AACpB,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAE9C,IAAA,IAAA,CAAK,KAAM,CAAA,GAAA;AAAA,MACT,SAAA,CAAU,iBAAiB,MAAM;AAC/B,QAAA,IAAA,CAAK,iBAAiB,SAAS,CAAA,CAAA;AAAA,OAChC,CAAA;AAAA,KACH,CAAA;AAEA,IAAI,IAAA,IAAA,CAAK,4BAA8B,EAAA;AACrC,MAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAAA,KAClB;AAEA,IAAO,OAAA,MAAM,KAAK,aAAc,EAAA,CAAA;AAAA,GAClC;AAAA,EAMQ,0BAAA,CAA2B,2BAA+C,iBAA4B,EAAA;AAC5G,IAAA,IAAI,IAAK,CAAA,KAAA,CAAM,qBAAyB,IAAA,IAAA,CAAK,4BAA8B,EAAA;AACzE,MAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAChB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,iBAAmB,EAAA;AACrB,MAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAAA,KAClB;AAAA,GACF;AAAA,EAEQ,0BAA6B,GAAA;AAEnC,IAAI,IAAA,CAAC,KAAK,KAAM,CAAA,aAAA,IAAiB,KAAK,KAAM,CAAA,sBAAA,IAA0B,CAAC,IAAA,CAAK,eAAiB,EAAA;AAC3F,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAEA,IAAA,IAAI,IAAK,CAAA,sBAAA,CAAuB,sBAAuB,CAAA,IAAI,CAAG,EAAA;AAC5D,MAAA,aAAA;AAAA,QACE,kBAAA;AAAA,QACA,qFAAA;AAAA,OACF,CAAA;AACA,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAGA,IAAI,IAAA,CAAC,IAAK,CAAA,KAAA,CAAM,IAAM,EAAA;AACpB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAGA,IAAA,IAAI,IAAK,CAAA,qBAAA,CAAsB,IAAK,CAAA,KAAA,CAAM,IAAI,CAAG,EAAA;AAC/C,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAAA,EAEQ,sBAAsB,IAAiB,EAAA;AAC7C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAE9C,IAAA,IAAI,IAAK,CAAA,SAAA,KAAc,SAAU,CAAA,KAAA,CAAM,KAAO,EAAA;AAC5C,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAEA,IAAA,aAAA,CAAc,oBAAoB,0BAA0B,CAAA,CAAA;AAC5D,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAAA,EAEQ,aAAsB,GAAA;AAC5B,IAAA,IAAI,KAAK,SAAW,EAAA;AAClB,MAAA,IAAA,CAAK,UAAU,WAAY,EAAA,CAAA;AAC3B,MAAA,IAAA,CAAK,SAAY,GAAA,KAAA,CAAA,CAAA;AAAA,KACnB;AAEA,IAAK,IAAA,CAAA,sBAAA,CAAuB,4CAA4C,IAAI,CAAA,CAAA;AAAA,GAC9E;AAAA,EAEO,kBAAkB,KAAe,EAAA;AAEtC,IAAA,IAAI,CAAC,IAAA,CAAK,eAAmB,IAAA,KAAA,GAAQ,CAAG,EAAA;AACtC,MAAA,IAAA,CAAK,eAAkB,GAAA,KAAA,CAAA;AAGvB,MAAA,IAAI,KAAK,KAAM,CAAA,sBAAA,IAA0B,CAAC,IAAA,CAAK,MAAM,aAAe,EAAA;AAElE,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,IAAI,IAAK,CAAA,QAAA,IAAY,CAAC,IAAA,CAAK,SAAW,EAAA;AACpC,YAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAAA,WAClB;AAAA,WACC,CAAC,CAAA,CAAA;AAAA,OACN;AAAA,KACK,MAAA;AAEL,MAAA,IAAI,QAAQ,CAAG,EAAA;AACb,QAAA,IAAA,CAAK,eAAkB,GAAA,KAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF;AAAA,EAEO,oBAAuB,GAAA;AAC5B,IAAA,OAAO,IAAK,CAAA,eAAA,CAAA;AAAA,GACd;AAAA,EAEO,UAAa,GAAA;AAClB,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAC9C,IAAA,IAAA,CAAK,iBAAiB,SAAS,CAAA,CAAA;AAAA,GACjC;AAAA,EAEQ,gBAAmB,GAAA;AAvK7B,IAAA,IAAA,EAAA,CAAA;AAwKI,IAAI,IAAA,IAAA,CAAK,MAAM,aAAe,EAAA;AAC5B,MAAA,OAAO,KAAK,KAAM,CAAA,aAAA,CAAA;AAAA,KACpB;AAEA,IAAA,OAAO,KAAK,KAAM,CAAA,sBAAA,GAAA,CAAyB,EAAK,GAAA,IAAA,CAAA,eAAA,KAAL,YAAwB,GAAM,GAAA,GAAA,CAAA;AAAA,GAC3E;AAAA,EAEO,WAAc,GAAA;AA/KvB,IAAA,IAAA,EAAA,CAAA;AAgLI,IAAA,CAAA,EAAA,GAAA,IAAA,CAAK,cAAL,IAAgB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,EAAA,CAAA;AAChB,IAAA,IAAA,CAAK,QAAS,CAAA;AAAA,MACZ,IAAA,EAAM,iCAAK,IAAK,CAAA,KAAA,CAAM,OAAhB,EAAuB,KAAA,EAAO,aAAa,IAAK,EAAA,CAAA;AAAA,KACvD,CAAA,CAAA;AAAA,GACH;AAAA,EAEA,MAAc,iBAAiB,SAA+B,EAAA;AAtLhE,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAwLI,IAAA,CAAA,EAAA,GAAA,IAAA,CAAK,cAAL,IAAgB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,EAAA,CAAA;AAGhB,IAAI,IAAA,UAAA,CAAW,mCAAoC,CAAA,IAAI,CAAG,EAAA;AACxD,MAAA,aAAA,CAAc,oBAAoB,mEAAmE,CAAA,CAAA;AACrG,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,qBAAuB,EAAA,IAAA,EAAM,CAAA,CAAA;AAC7C,MAAA,OAAA;AAAA,KACF;AAGA,IAAI,IAAA,IAAA,CAAK,MAAM,qBAAuB,EAAA;AACpC,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,qBAAuB,EAAA,KAAA,EAAO,CAAA,CAAA;AAAA,KAChD;AAEA,IAAA,MAAM,EAAE,WAAA,EAAa,OAAQ,EAAA,GAAI,IAAK,CAAA,KAAA,CAAA;AACtC,IAAA,MAAM,oBAAoE,GAAA;AAAA,MACxE,aAAe,EAAA,EAAE,IAAM,EAAA,eAAA,EAAiB,OAAO,IAAK,EAAA;AAAA,KACtD,CAAA;AAGA,IAAI,IAAA,EAAC,mCAAS,MAAQ,CAAA,EAAA;AACpB,MAAA,IAAA,CAAK,eAAgB,EAAA,CAAA;AACrB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,OAA4B,GAAA;AAAA,MAChC,KAAK,OAAQ,CAAA,SAAA;AAAA,MACb,WAAW,gBAAiB,EAAA;AAAA,MAC5B,QAAA,EAAU,UAAU,WAAY,EAAA;AAAA,MAChC,OAAS,EAAA,CAAA;AAAA,MACT,KAAA,EAAO,UAAU,KAAM,CAAA,KAAA;AAAA,MACvB,QAAU,EAAA,IAAA;AAAA,MACV,UAAY,EAAA,GAAA;AAAA,MACZ,OAAA,EAAS,UAAU,OAAO,CAAA;AAAA,MAC1B,aAAA,EAAe,KAAK,gBAAiB,EAAA;AAAA,MACrC,UAAY,EAAA,oBAAA;AAAA,MACZ,SAAA,EAAW,KAAK,GAAI,EAAA;AAAA,MACpB,aAAA,EAAe,KAAK,KAAM,CAAA,aAAA;AAAA,KAC5B,CAAA;AAEA,IAAI,IAAA;AACF,MAAA,MAAM,cAAa,EAAK,GAAA,IAAA,CAAA,KAAA,CAAM,eAAX,IAAyB,GAAA,EAAA,GAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AAC/E,MAAA,MAAM,EAAK,GAAA,MAAM,aAAc,CAAA,UAAA,EAAY,QAAQ,UAAU,CAAA,CAAA;AAG7D,MAAA,OAAA,CAAQ,OAAU,GAAA,OAAA,CAAQ,OAAQ,CAAA,GAAA,CAAI,CAAC,KAAU,KAAA;AAC/C,QAAI,IAAA,CAAC,MAAM,UAAY,EAAA;AACrB,UAAM,KAAA,CAAA,UAAA,GAAa,GAAG,MAAO,EAAA,CAAA;AAAA,SAC/B;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAGD,MAAM,MAAA,kBAAA,GAAqB,WAAc,GAAA,WAAA,GAAc,EAAG,CAAA,QAAA,CAAA;AAC1D,MAAM,MAAA,IAAA,GAAO,UAAU,iBAAkB,CAAA,SAAA,CAAU,MAAM,KAAO,EAAA,OAAA,CAAQ,eAAgB,kBAAkB,CAAA,CAAA;AAI1G,MAAA,OAAA,CAAQ,aAAa,MAAO,CAAA,MAAA,CAAO,EAAC,EAAG,QAAQ,UAAY,EAAA;AAAA,QACzD,YAAY,EAAE,IAAA,EAAM,KAAK,QAAU,EAAA,KAAA,EAAO,KAAK,QAAS,EAAA;AAAA,QACxD,aAAA,EAAe,EAAE,IAAM,EAAA,IAAA,CAAK,WAAW,QAAS,EAAA,EAAG,KAAO,EAAA,IAAA,CAAK,UAAW,EAAA;AAAA,OAC3E,CAAA,CAAA;AAED,MAAA,OAAA,CAAQ,WAAW,IAAK,CAAA,QAAA,CAAA;AACxB,MAAA,OAAA,CAAQ,aAAa,IAAK,CAAA,UAAA,CAAA;AAE1B,MAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AAEjC,MAAA,aAAA,CAAc,kBAAoB,EAAA,qBAAA,EAAuB,IAAK,CAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AAEvE,MAAA,IAAA,CAAK,YAAY,UAAW,CAAA,EAAA,EAAI,OAAO,CAAE,CAAA,SAAA,CAAU,KAAK,cAAc,CAAA,CAAA;AAAA,aAC/D,GAAP,EAAA;AACA,MAAQ,OAAA,CAAA,KAAA,CAAM,0BAA0B,GAAG,CAAA,CAAA;AAAA,KAC7C;AAAA,GACF;AAAA,EAWQ,eAAkB,GAAA;AACxB,IAAI,IAAA,IAAA,CAAK,KAAM,CAAA,IAAA,KAAS,cAAgB,EAAA;AACtC,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,IAAM,EAAA,cAAA,EAAgB,CAAA,CAAA;AAAA,KACxC;AAAA,GACF;AACF,CAAA;AAEO,SAAS,oBAAoB,OAAiD,EAAA;AApRrF,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAqRE,EAAO,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAA,CAAQ,IAAK,CAAA,CAAC,CAAM,KAAA,CAAA,CAAE,eAAe,IAAI,CAAA,KAAzC,IAA4C,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,UAAA,KAA5C,IAA0D,GAAA,EAAA,GAAA,KAAA,CAAA,CAAA;AACnE;;;;"}

package/dist/esm/utils/getDataSource.js

@@ -1,6 +1,13 @@
 import { getDataSourceSrv } from '@grafana/runtime';
+import { runtimeDataSources } from '../querying/RuntimeDataSource.js';
 
 async function getDataSource(datasource, scopedVars) {
+  if (datasource == null ? void 0 : datasource.uid) {
+    const runtimeDataSource = runtimeDataSources.get(datasource.uid);
+    if (runtimeDataSource) {
+      return runtimeDataSource;
+    }
+  }
   if (datasource && datasource.query) {
     return datasource;
   }

package/dist/esm/utils/getDataSource.js.map

@@ -1 +1 @@
-{"version":3,"file":"getDataSource.js","sources":["../../../src/utils/getDataSource.ts"],"sourcesContent":["import { DataSourceApi, ScopedVars } from '@grafana/data';\nimport { getDataSourceSrv } from '@grafana/runtime';\nimport { DataSourceRef } from '@grafana/schema';\n\nexport async function getDataSource(\n  datasource: DataSourceRef | undefined,\n  scopedVars: ScopedVars\n): Promise<DataSourceApi> {\n  if (datasource && (datasource as any).query) {\n    return datasource as DataSourceApi;\n  }\n\n  return await getDataSourceSrv().get(datasource as string, scopedVars);\n}\n"],"names":[],"mappings":";;AAIsB,eAAA,aAAA,CACpB,YACA,UACwB,EAAA;AACxB,EAAI,IAAA,UAAA,IAAe,WAAmB,KAAO,EAAA;AAC3C,IAAO,OAAA,UAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,MAAM,gBAAA,EAAmB,CAAA,GAAA,CAAI,YAAsB,UAAU,CAAA,CAAA;AACtE;;;;"}
+{"version":3,"file":"getDataSource.js","sources":["../../../src/utils/getDataSource.ts"],"sourcesContent":["import { DataSourceApi, ScopedVars } from '@grafana/data';\nimport { getDataSourceSrv } from '@grafana/runtime';\nimport { DataSourceRef } from '@grafana/schema';\nimport { runtimeDataSources } from '../querying/RuntimeDataSource';\n\nexport async function getDataSource(\n  datasource: DataSourceRef | undefined,\n  scopedVars: ScopedVars\n): Promise<DataSourceApi> {\n  if (datasource?.uid) {\n    const runtimeDataSource = runtimeDataSources.get(datasource.uid);\n    if (runtimeDataSource) {\n      return runtimeDataSource;\n    }\n  }\n\n  if (datasource && (datasource as any).query) {\n    return datasource as DataSourceApi;\n  }\n\n  return await getDataSourceSrv().get(datasource as string, scopedVars);\n}\n"],"names":[],"mappings":";;;AAKsB,eAAA,aAAA,CACpB,YACA,UACwB,EAAA;AACxB,EAAA,IAAI,yCAAY,GAAK,EAAA;AACnB,IAAA,MAAM,iBAAoB,GAAA,kBAAA,CAAmB,GAAI,CAAA,UAAA,CAAW,GAAG,CAAA,CAAA;AAC/D,IAAA,IAAI,iBAAmB,EAAA;AACrB,MAAO,OAAA,iBAAA,CAAA;AAAA,KACT;AAAA,GACF;AAEA,EAAI,IAAA,UAAA,IAAe,WAAmB,KAAO,EAAA;AAC3C,IAAO,OAAA,UAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,MAAM,gBAAA,EAAmB,CAAA,GAAA,CAAI,YAAsB,UAAU,CAAA,CAAA;AACtE;;;;"}