@grafana/scenes 6.35.1 → 6.35.2--canary.1148.17723429933.0

package/dist/index.d.ts

@@ -601,6 +601,14 @@ interface SceneDataProvider<T extends SceneObjectState = SceneDataState> extends
     isDataReadyToDisplay?: () => boolean;
     cancelQuery?: () => void;
     getResultsStream(): Observable<SceneDataProviderResult>;
+    /**
+     * Can be used to disable query execution for scene elements that are out of view
+     */
+    isInViewChanged?(isInView: boolean): void;
+    /**
+     * Returns the current state of the isInView flag. Useful for various edge cases like Dashboard datasource
+     */
+    getIsInView?(): boolean;
 }
 interface SceneDataLayerProviderState extends SceneDataState {
     name: string;
@@ -1781,6 +1789,8 @@ declare class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> impleme
     private _scopedVars;
     private _layerAnnotations?;
     private _resultAnnotations?;
+    private _isInView;
+    private _queryNotExecutedWhenOutOfView;
     getResultsStream(): ReplaySubject<SceneDataProviderResult>;
     protected _variableDependency: VariableDependencyConfig<QueryRunnerState>;
     private _drilldownDependenciesManager;
@@ -1829,6 +1839,8 @@ declare class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> impleme
      */
     private getClosestExtraQueryProviders;
     private isQueryModeAuto;
+    isInViewChanged(isInView: boolean): void;
+    getIsInView(): boolean;
 }
 
 interface DataProviderSharerState extends SceneDataState {
@@ -1921,6 +1933,8 @@ declare class SceneDataTransformer extends SceneObjectBase<SceneDataTransformerS
     cancelQuery(): void;
     getResultsStream(): ReplaySubject<SceneDataProviderResult>;
     clone(withState?: Partial<SceneDataTransformerState>): this;
+    isInViewChanged(isInView: boolean): void;
+    getIsInView(): boolean;
     private haveAlreadyTransformedData;
     private transform;
     private _interpolateVariablesInTransformationConfigs;

package/dist/index.js

@@ -6473,6 +6473,8 @@ class SceneQueryRunner extends SceneObjectBase {
     this._variableValueRecorder = new VariableValueRecorder();
     this._results = new rxjs.ReplaySubject(1);
     this._scopedVars = { __sceneObject: wrapInSafeSerializableSceneObject(this) };
+    this._isInView = true;
+    this._queryNotExecutedWhenOutOfView = false;
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["queries", "datasource", "minInterval"],
       onVariableUpdateCompleted: this.onVariableUpdatesCompleted.bind(this),
@@ -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,16 @@ class SceneQueryRunner extends SceneObjectBase {
     var _a;
     return ((_a = this.state.runQueriesMode) != null ? _a : "auto") === "auto";
   }
+  isInViewChanged(isInView) {
+    writeSceneLog("SceneQueryRunner", `isInViewChanged: ${isInView}`, this.state.key);
+    this._isInView = isInView;
+    if (isInView && this._queryNotExecutedWhenOutOfView) {
+      this.runQueries();
+    }
+  }
+  getIsInView() {
+    return this._isInView;
+  }
 }
 function findFirstDatasource(targets) {
   var _a, _b;
@@ -8315,6 +8332,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 ? 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 +8439,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) {
@@ -8917,6 +9005,14 @@ class SceneDataTransformer extends SceneObjectBase {
     }
     return clone;
   }
+  isInViewChanged(isInView) {
+    var _a, _b;
+    (_b = (_a = this.state.$data) == null ? void 0 : _a.isInViewChanged) == null ? void 0 : _b.call(_a, isInView);
+  }
+  getIsInView() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = this.state.$data) == null ? void 0 : _a.getIsInView) == null ? void 0 : _b.call(_a)) != null ? _c : true;
+  }
   haveAlreadyTransformedData(data) {
     if (!this._prevDataFromSource) {
       return false;
@@ -11224,10 +11320,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,
@@ -11413,67 +11509,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();