@grafana/scenes 6.34.0 → 6.34.1--canary.1148.17579589626.0

package/dist/index.js

@@ -6491,6 +6491,8 @@ class SceneQueryRunner extends SceneObjectBase {
       this.setState({ data: dataWithLayersApplied, _hasFetchedData: hasFetchedData });
       this._results.next({ origin: this, data: dataWithLayersApplied });
     };
+    this._isInView = true;
+    this._queryNotExecutedWhenOutOfView = false;
     this.addActivationHandler(() => this._onActivate());
   }
   getResultsStream() {
@@ -6712,6 +6714,11 @@ class SceneQueryRunner extends SceneObjectBase {
     if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {
       return;
     }
+    if (this.isQueryModeAuto() && !this._isInView) {
+      this._queryNotExecutedWhenOutOfView = true;
+      return;
+    }
+    this._queryNotExecutedWhenOutOfView = false;
     if (!this._dataLayersSub) {
       this._handleDataLayers();
     }
@@ -6875,6 +6882,12 @@ class SceneQueryRunner extends SceneObjectBase {
     var _a;
     return ((_a = this.state.runQueriesMode) != null ? _a : "auto") === "auto";
   }
+  isInViewChanged(isInView) {
+    this._isInView = isInView;
+    if (isInView && this._queryNotExecutedWhenOutOfView) {
+      this.runQueries();
+    }
+  }
 }
 function findFirstDatasource(targets) {
   var _a, _b;
@@ -8315,6 +8328,71 @@ const getStyles$8 = (theme) => ({
   })
 });
 
+function useUniqueId() {
+  var _a;
+  const idRefLazy = React.useRef(void 0);
+  (_a = idRefLazy.current) != null ? _a : idRefLazy.current = lodash.uniqueId();
+  return idRefLazy.current;
+}
+const LazyLoader = React__default.default.forwardRef(
+  ({ children, onLoad, onChange, className, ...rest }, ref) => {
+    const id = useUniqueId();
+    const { hideEmpty } = ui.useStyles2(getStyles$7);
+    const [loaded, setLoaded] = React.useState(false);
+    const [isInView, setIsInView] = React.useState(false);
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    reactUse.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);
+      }
+      return () => {
+        wrapperEl && LazyLoader.observer.unobserve(wrapperEl);
+        delete LazyLoader.callbacks[id];
+        if (Object.keys(LazyLoader.callbacks).length === 0) {
+          LazyLoader.observer.disconnect();
+        }
+      };
+    });
+    return /* @__PURE__ */ React__default.default.createElement("div", { id, ref: innerRef, className: `${hideEmpty} ${className}`, ...rest }, !loaded || !isInView ? i18n.t("grafana-scenes.components.lazy-loader.placeholder", "\xA0") : /* @__PURE__ */ React__default.default.createElement(LazyLoaderInViewContext.Provider, { value: isInView }, children));
+  }
+);
+function getStyles$7() {
+  return {
+    hideEmpty: css.css({
+      "&:empty": {
+        display: "none"
+      }
+    })
+  };
+}
+LazyLoader.displayName = "LazyLoader";
+LazyLoader.callbacks = {};
+LazyLoader.addCallback = (id, c) => LazyLoader.callbacks[id] = c;
+LazyLoader.observer = new IntersectionObserver(
+  (entries) => {
+    for (const entry of entries) {
+      if (typeof LazyLoader.callbacks[entry.target.id] === "function") {
+        LazyLoader.callbacks[entry.target.id](entry);
+      }
+    }
+  },
+  { rootMargin: "100px" }
+);
+const LazyLoaderInViewContext = React__default.default.createContext(true);
+function useLazyLoaderIsInView() {
+  return React__default.default.useContext(LazyLoaderInViewContext);
+}
+
 function VizPanelRenderer({ model }) {
   var _a;
   const {
@@ -8357,6 +8435,12 @@ function VizPanelRenderer({ model }) {
   const sceneTimeRange = sceneGraph.getTimeRange(model);
   const timeZone = sceneTimeRange.getTimeZone();
   const timeRange = model.getTimeRange(dataWithFieldConfig);
+  const isInView = useLazyLoaderIsInView();
+  React.useEffect(() => {
+    if (dataObject.isInViewChanged) {
+      dataObject.isInViewChanged(isInView);
+    }
+  }, [isInView, dataObject]);
   const titleInterpolated = model.interpolate(title, void 0, "text");
   const alertStateStyles = ui.useStyles2(getAlertStateStyles);
   if (!plugin) {
@@ -11218,10 +11302,10 @@ class EmbeddedScene extends SceneObjectBase {
 EmbeddedScene.Component = EmbeddedSceneRenderer;
 function EmbeddedSceneRenderer({ model }) {
   const { body, controls } = model.useState();
-  const styles = ui.useStyles2(getStyles$7);
+  const styles = ui.useStyles2(getStyles$6);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, controls && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.controls }, controls.map((control) => /* @__PURE__ */ React__default.default.createElement(control.Component, { key: control.state.key, model: control }))), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.body }, /* @__PURE__ */ React__default.default.createElement(body.Component, { model: body })));
 }
-const getStyles$7 = (theme) => {
+const getStyles$6 = (theme) => {
   return {
     container: css.css({
       flexGrow: 1,
@@ -11407,67 +11491,6 @@ function isSceneGridLayout(child) {
   return child instanceof SceneGridLayout;
 }
 
-function useUniqueId() {
-  var _a;
-  const idRefLazy = React.useRef(void 0);
-  (_a = idRefLazy.current) != null ? _a : idRefLazy.current = lodash.uniqueId();
-  return idRefLazy.current;
-}
-const LazyLoader = React__default.default.forwardRef(
-  ({ children, onLoad, onChange, className, ...rest }, ref) => {
-    const id = useUniqueId();
-    const { hideEmpty } = ui.useStyles2(getStyles$6);
-    const [loaded, setLoaded] = React.useState(false);
-    const [isInView, setIsInView] = React.useState(false);
-    const innerRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => innerRef.current);
-    reactUse.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);
-      }
-      return () => {
-        wrapperEl && LazyLoader.observer.unobserve(wrapperEl);
-        delete LazyLoader.callbacks[id];
-        if (Object.keys(LazyLoader.callbacks).length === 0) {
-          LazyLoader.observer.disconnect();
-        }
-      };
-    });
-    return /* @__PURE__ */ React__default.default.createElement("div", { id, ref: innerRef, className: `${hideEmpty} ${className}`, ...rest }, !loaded || !isInView ? i18n.t("grafana-scenes.components.lazy-loader.placeholder", "\xA0") : children);
-  }
-);
-function getStyles$6() {
-  return {
-    hideEmpty: css.css({
-      "&:empty": {
-        display: "none"
-      }
-    })
-  };
-}
-LazyLoader.displayName = "LazyLoader";
-LazyLoader.callbacks = {};
-LazyLoader.addCallback = (id, c) => LazyLoader.callbacks[id] = c;
-LazyLoader.observer = new IntersectionObserver(
-  (entries) => {
-    for (const entry of entries) {
-      if (typeof LazyLoader.callbacks[entry.target.id] === "function") {
-        LazyLoader.callbacks[entry.target.id](entry);
-      }
-    }
-  },
-  { rootMargin: "100px" }
-);
-
 function SceneGridLayoutRenderer({ model }) {
   const { children, isLazy, isDraggable, isResizable } = model.useState();
   const [outerDivRef, { width, height }] = reactUse.useMeasure();
@@ -11522,15 +11545,14 @@ function SceneGridLayoutRenderer({ model }) {
       ))
     );
   };
-  return /* @__PURE__ */ React__default.default.createElement(
-    "div",
-    {
-      ref: outerDivRef,
-      style: { flex: "1 1 auto", position: "relative", zIndex: 1, width: "100%" }
-    },
-    renderGrid(width, height)
-  );
+  return /* @__PURE__ */ React__default.default.createElement("div", { ref: outerDivRef, className: gridWrapperClass }, renderGrid(width, height));
 }
+const gridWrapperClass = css.css({
+  flex: "1 1 auto",
+  position: "relative",
+  zIndex: 1,
+  width: "100%"
+});
 const GridItemWrapper = React__default.default.forwardRef((props, ref) => {
   var _a;
   const { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children, ...divProps } = props;
@@ -14775,25 +14797,25 @@ const VizConfigBuilders = {
 
 function __variableDynamicImportRuntime0__(path) {
   switch (path) {
-    case '../locales/cs-CZ/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CY85TD5F.js'); });
-    case '../locales/de-DE/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-n10eQkNF.js'); });
+    case '../locales/cs-CZ/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-BcDO8gk4.js'); });
+    case '../locales/de-DE/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CzZTvOrf.js'); });
     case '../locales/en-US/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-C_CT7peT.js'); });
-    case '../locales/es-ES/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-YMli37Xh.js'); });
-    case '../locales/fr-FR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DXM1LI4B.js'); });
-    case '../locales/hu-HU/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DlUSL8jI.js'); });
-    case '../locales/id-ID/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-D5qs_fc9.js'); });
-    case '../locales/it-IT/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-Dy2CLUY9.js'); });
-    case '../locales/ja-JP/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CBRfJ-2H.js'); });
-    case '../locales/ko-KR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CgIzGE5F.js'); });
-    case '../locales/nl-NL/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-Br6NPcwR.js'); });
-    case '../locales/pl-PL/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-B3ypGD5T.js'); });
-    case '../locales/pt-BR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-COr0P0oM.js'); });
-    case '../locales/pt-PT/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-Cub9Gl0n.js'); });
-    case '../locales/ru-RU/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-BGCbMCFm.js'); });
-    case '../locales/sv-SE/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CqRf9pRc.js'); });
-    case '../locales/tr-TR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CeVkPanY.js'); });
-    case '../locales/zh-Hans/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DObtL2WT.js'); });
-    case '../locales/zh-Hant/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-B0JDDOYY.js'); });
+    case '../locales/es-ES/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-zGpJY4O3.js'); });
+    case '../locales/fr-FR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CfoPR_PZ.js'); });
+    case '../locales/hu-HU/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CoXR5Z7T.js'); });
+    case '../locales/id-ID/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-kfW02M-K.js'); });
+    case '../locales/it-IT/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CMtHJ23j.js'); });
+    case '../locales/ja-JP/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-cTJt4LR7.js'); });
+    case '../locales/ko-KR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-BbJq3cEa.js'); });
+    case '../locales/nl-NL/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-BwQ_A3lk.js'); });
+    case '../locales/pl-PL/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-BbRDYrqK.js'); });
+    case '../locales/pt-BR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-naZktXG6.js'); });
+    case '../locales/pt-PT/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CixWq8rH.js'); });
+    case '../locales/ru-RU/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-VOzZRdKp.js'); });
+    case '../locales/sv-SE/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-BtGEpoZT.js'); });
+    case '../locales/tr-TR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CqMfWT-f.js'); });
+    case '../locales/zh-Hans/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CS09sc_L.js'); });
+    case '../locales/zh-Hant/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-C-CibbsO.js'); });
     default: return new Promise(function(resolve, reject) {
       (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
         reject.bind(null, new Error("Unknown variable dynamic import: " + path))
@@ -14916,6 +14938,7 @@ exports.VizPanelExploreButton = VizPanelExploreButton;
 exports.VizPanelMenu = VizPanelMenu;
 exports.behaviors = index$1;
 exports.dataLayers = index;
+exports.escapeUrlPipeDelimiters = escapeUrlPipeDelimiters;
 exports.formatRegistry = formatRegistry;
 exports.getExploreURL = getExploreURL;
 exports.isCustomVariableValue = isCustomVariableValue;