@grafana/scenes 6.35.2 → 6.36.0--canary.1240.17760349466.0

package/dist/index.js

@@ -137,21 +137,21 @@ class UserActionEvent extends data.BusEventWithPayload {
 }
 UserActionEvent.type = "scene-object-user-action";
 
-var __typeError$5 = (msg) => {
+var __typeError$6 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
-var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
+var __privateGet$6 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$6 = (obj, member, value, setter) => (__accessCheck$6(obj, member, "write to private field"), member.set(obj, value), value);
 var _ref;
 class SceneObjectRef {
   constructor(ref) {
-    __privateAdd$5(this, _ref);
-    __privateSet$5(this, _ref, ref);
+    __privateAdd$6(this, _ref);
+    __privateSet$6(this, _ref, ref);
   }
   resolve() {
-    return __privateGet$5(this, _ref);
+    return __privateGet$6(this, _ref);
   }
 }
 _ref = new WeakMap();
@@ -609,62 +609,79 @@ function writeSceneLogStyled(logger, message, style, ...rest) {
   }
 }
 
-var __typeError$4 = (msg) => {
+var __typeError$5 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
-var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
+var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
 var _running, _tryCompleteProfileFrameId;
 function isQueryController(s) {
   return "isQueryController" in s;
 }
 class SceneQueryController extends SceneObjectBase {
-  constructor(state = {}, profiler) {
+  constructor(state = {}, renderProfiler, interactionProfiler) {
     super({ ...state, isRunning: false });
-    this.profiler = profiler;
+    this.renderProfiler = renderProfiler;
+    this.interactionProfiler = interactionProfiler;
     this.isQueryController = true;
-    __privateAdd$4(this, _running, /* @__PURE__ */ new Set());
-    __privateAdd$4(this, _tryCompleteProfileFrameId, null);
+    __privateAdd$5(this, _running, /* @__PURE__ */ new Set());
+    __privateAdd$5(this, _tryCompleteProfileFrameId, null);
     this.runningQueriesCount = () => {
-      return __privateGet$4(this, _running).size;
+      return __privateGet$5(this, _running).size;
     };
-    if (profiler) {
-      this.profiler = profiler;
-      profiler.setQueryController(this);
+    if (renderProfiler) {
+      this.renderProfiler = renderProfiler;
+      renderProfiler.setQueryController(this);
+    }
+    if (interactionProfiler) {
+      this.interactionProfiler = interactionProfiler;
+      interactionProfiler.setQueryController(this);
     }
     this.addActivationHandler(() => {
-      var _a;
-      (_a = this.profiler) == null ? void 0 : _a.setQueryController(this);
-      return () => __privateGet$4(this, _running).clear();
+      var _a, _b;
+      (_a = this.renderProfiler) == null ? void 0 : _a.setQueryController(this);
+      (_b = this.interactionProfiler) == null ? void 0 : _b.setQueryController(this);
+      return () => __privateGet$5(this, _running).clear();
     });
   }
+  startInteractionProfile(name) {
+    var _a;
+    if (!this.state.enableProfiling) {
+      return;
+    }
+    (_a = this.interactionProfiler) == null ? void 0 : _a.startProfile(name);
+  }
+  stopInteractionProfile() {
+    var _a;
+    (_a = this.interactionProfiler) == null ? void 0 : _a.stopProfile();
+  }
   startProfile(name) {
     var _a;
     if (!this.state.enableProfiling) {
       return;
     }
-    (_a = this.profiler) == null ? void 0 : _a.startProfile(name);
+    (_a = this.renderProfiler) == null ? void 0 : _a.startProfile(name);
   }
   cancelProfile() {
     var _a;
-    (_a = this.profiler) == null ? void 0 : _a.cancelProfile();
+    (_a = this.renderProfiler) == null ? void 0 : _a.cancelProfile();
   }
   queryStarted(entry) {
-    __privateGet$4(this, _running).add(entry);
+    __privateGet$5(this, _running).add(entry);
     this.changeRunningQueryCount(1, entry);
     if (!this.state.isRunning) {
       this.setState({ isRunning: true });
     }
   }
   queryCompleted(entry) {
-    if (!__privateGet$4(this, _running).has(entry)) {
+    if (!__privateGet$5(this, _running).has(entry)) {
       return;
     }
-    __privateGet$4(this, _running).delete(entry);
+    __privateGet$5(this, _running).delete(entry);
     this.changeRunningQueryCount(-1);
-    if (__privateGet$4(this, _running).size === 0) {
+    if (__privateGet$5(this, _running).size === 0) {
       this.setState({ isRunning: false });
     }
   }
@@ -673,26 +690,26 @@ class SceneQueryController extends SceneObjectBase {
     window.__grafanaRunningQueryCount = ((_a = window.__grafanaRunningQueryCount) != null ? _a : 0) + dir;
     if (dir === 1 && this.state.enableProfiling) {
       if (entry) {
-        (_b = this.profiler) == null ? void 0 : _b.addCrumb(`${entry.type}`);
+        (_b = this.renderProfiler) == null ? void 0 : _b.addCrumb(`${entry.type}`);
       }
-      if ((_c = this.profiler) == null ? void 0 : _c.isTailRecording()) {
+      if ((_c = this.renderProfiler) == null ? void 0 : _c.isTailRecording()) {
         writeSceneLog("SceneQueryController", "New query started, cancelling tail recording");
-        (_d = this.profiler) == null ? void 0 : _d.cancelTailRecording();
+        (_d = this.renderProfiler) == null ? void 0 : _d.cancelTailRecording();
       }
     }
     if (this.state.enableProfiling) {
-      if (__privateGet$4(this, _tryCompleteProfileFrameId)) {
-        cancelAnimationFrame(__privateGet$4(this, _tryCompleteProfileFrameId));
+      if (__privateGet$5(this, _tryCompleteProfileFrameId)) {
+        cancelAnimationFrame(__privateGet$5(this, _tryCompleteProfileFrameId));
       }
-      __privateSet$4(this, _tryCompleteProfileFrameId, requestAnimationFrame(() => {
+      __privateSet$5(this, _tryCompleteProfileFrameId, requestAnimationFrame(() => {
         var _a2;
-        (_a2 = this.profiler) == null ? void 0 : _a2.tryCompletingProfile();
+        (_a2 = this.renderProfiler) == null ? void 0 : _a2.tryCompletingProfile();
       }));
     }
   }
   cancelAll() {
     var _a;
-    for (const entry of __privateGet$4(this, _running).values()) {
+    for (const entry of __privateGet$5(this, _running).values()) {
       (_a = entry.cancel) == null ? void 0 : _a.call(entry);
     }
   }
@@ -862,41 +879,41 @@ function isValid$1(value, roundUp, timeZone) {
   return parsed.isValid();
 }
 
-var __typeError$3 = (msg) => {
+var __typeError$4 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
+var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
 var _isTracking, _callback, _frameTrackingId, _lastFrameTime, _loafObserver;
 const LONG_FRAME_THRESHOLD = 50;
 class LongFrameDetector {
   constructor() {
-    __privateAdd$3(this, _isTracking, false);
-    __privateAdd$3(this, _callback, null);
+    __privateAdd$4(this, _isTracking, false);
+    __privateAdd$4(this, _callback, null);
     // Manual tracking state
-    __privateAdd$3(this, _frameTrackingId, null);
-    __privateAdd$3(this, _lastFrameTime, 0);
+    __privateAdd$4(this, _frameTrackingId, null);
+    __privateAdd$4(this, _lastFrameTime, 0);
     // LoAF tracking state
-    __privateAdd$3(this, _loafObserver, null);
+    __privateAdd$4(this, _loafObserver, null);
     /**
      * Measure frame durations using requestAnimationFrame
      */
     this.measureFrames = () => {
-      if (!__privateGet$3(this, _isTracking)) {
+      if (!__privateGet$4(this, _isTracking)) {
         return;
       }
       const currentFrameTime = performance.now();
-      const frameLength = currentFrameTime - __privateGet$3(this, _lastFrameTime);
+      const frameLength = currentFrameTime - __privateGet$4(this, _lastFrameTime);
       if (frameLength > LONG_FRAME_THRESHOLD) {
         const event = {
           duration: frameLength,
           timestamp: currentFrameTime,
           method: "manual"
         };
-        if (__privateGet$3(this, _callback)) {
-          __privateGet$3(this, _callback).call(this, event);
+        if (__privateGet$4(this, _callback)) {
+          __privateGet$4(this, _callback).call(this, event);
         }
         if (typeof performance !== "undefined" && performance.mark && performance.measure) {
           const frameId = `long-frame-manual-${currentFrameTime.toFixed(0)}`;
@@ -916,9 +933,9 @@ class LongFrameDetector {
           `Long frame detected (manual): ${frameLength}ms (threshold: ${LONG_FRAME_THRESHOLD}ms)`
         );
       }
-      __privateSet$3(this, _lastFrameTime, currentFrameTime);
-      if (__privateGet$3(this, _isTracking)) {
-        __privateSet$3(this, _frameTrackingId, requestAnimationFrame(this.measureFrames));
+      __privateSet$4(this, _lastFrameTime, currentFrameTime);
+      if (__privateGet$4(this, _isTracking)) {
+        __privateSet$4(this, _frameTrackingId, requestAnimationFrame(this.measureFrames));
       }
     };
   }
@@ -932,12 +949,12 @@ class LongFrameDetector {
    * Start detecting long frames and call the provided callback when they occur
    */
   start(callback) {
-    if (__privateGet$3(this, _isTracking)) {
+    if (__privateGet$4(this, _isTracking)) {
       writeSceneLog("LongFrameDetector", "Already tracking frames, stopping previous session");
       this.stop();
     }
-    __privateSet$3(this, _callback, callback);
-    __privateSet$3(this, _isTracking, true);
+    __privateSet$4(this, _callback, callback);
+    __privateSet$4(this, _isTracking, true);
     if (this.isLoAFAvailable()) {
       this.startLoAFTracking();
     } else {
@@ -952,11 +969,11 @@ class LongFrameDetector {
    * Stop detecting long frames
    */
   stop() {
-    if (!__privateGet$3(this, _isTracking)) {
+    if (!__privateGet$4(this, _isTracking)) {
       return;
     }
-    __privateSet$3(this, _isTracking, false);
-    __privateSet$3(this, _callback, null);
+    __privateSet$4(this, _isTracking, false);
+    __privateSet$4(this, _callback, null);
     this.stopLoAFTracking();
     this.stopManualFrameTracking();
   }
@@ -964,7 +981,7 @@ class LongFrameDetector {
    * Check if currently tracking frames
    */
   isTracking() {
-    return __privateGet$3(this, _isTracking);
+    return __privateGet$4(this, _isTracking);
   }
   /**
    * Start tracking using the Long Animation Frame API
@@ -977,15 +994,15 @@ class LongFrameDetector {
       return;
     }
     try {
-      __privateSet$3(this, _loafObserver, new PerformanceObserver((list) => {
+      __privateSet$4(this, _loafObserver, new PerformanceObserver((list) => {
         for (const entry of list.getEntries()) {
           const event = {
             duration: entry.duration,
             timestamp: entry.startTime,
             method: "loaf"
           };
-          if (__privateGet$3(this, _callback)) {
-            __privateGet$3(this, _callback).call(this, event);
+          if (__privateGet$4(this, _callback)) {
+            __privateGet$4(this, _callback).call(this, event);
           }
           if (typeof performance !== "undefined" && performance.mark && performance.measure) {
             const frameId = `long-frame-${entry.startTime.toFixed(0)}`;
@@ -1003,7 +1020,7 @@ class LongFrameDetector {
           writeSceneLog("LongFrameDetector", `Long frame detected (LoAF): ${entry.duration}ms at ${entry.startTime}ms`);
         }
       }));
-      __privateGet$3(this, _loafObserver).observe({ type: "long-animation-frame", buffered: false });
+      __privateGet$4(this, _loafObserver).observe({ type: "long-animation-frame", buffered: false });
     } catch (error) {
       writeSceneLog("LongFrameDetector", "Failed to start LoAF tracking, falling back to manual:", error);
       this.startManualFrameTracking();
@@ -1013,9 +1030,9 @@ class LongFrameDetector {
    * Stop LoAF tracking
    */
   stopLoAFTracking() {
-    if (__privateGet$3(this, _loafObserver)) {
-      __privateGet$3(this, _loafObserver).disconnect();
-      __privateSet$3(this, _loafObserver, null);
+    if (__privateGet$4(this, _loafObserver)) {
+      __privateGet$4(this, _loafObserver).disconnect();
+      __privateSet$4(this, _loafObserver, null);
       writeSceneLog("LongFrameDetector", "Stopped LoAF tracking");
     }
   }
@@ -1023,16 +1040,16 @@ class LongFrameDetector {
    * Start manual frame tracking using requestAnimationFrame
    */
   startManualFrameTracking() {
-    __privateSet$3(this, _lastFrameTime, performance.now());
-    __privateSet$3(this, _frameTrackingId, requestAnimationFrame(() => this.measureFrames()));
+    __privateSet$4(this, _lastFrameTime, performance.now());
+    __privateSet$4(this, _frameTrackingId, requestAnimationFrame(() => this.measureFrames()));
   }
   /**
    * Stop manual frame tracking
    */
   stopManualFrameTracking() {
-    if (__privateGet$3(this, _frameTrackingId)) {
-      cancelAnimationFrame(__privateGet$3(this, _frameTrackingId));
-      __privateSet$3(this, _frameTrackingId, null);
+    if (__privateGet$4(this, _frameTrackingId)) {
+      cancelAnimationFrame(__privateGet$4(this, _frameTrackingId));
+      __privateSet$4(this, _frameTrackingId, null);
       writeSceneLog("LongFrameDetector", "Stopped manual frame tracking");
     }
   }
@@ -1043,38 +1060,38 @@ _frameTrackingId = new WeakMap();
 _lastFrameTime = new WeakMap();
 _loafObserver = new WeakMap();
 
-var __typeError$2 = (msg) => {
+var __typeError$3 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
-var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateWrapper = (obj, member, setter, getter) => ({
   set _(value) {
-    __privateSet$2(obj, member, value);
+    __privateSet$3(obj, member, value);
   },
   get _() {
-    return __privateGet$2(obj, member, getter);
+    return __privateGet$3(obj, member, getter);
   }
 });
-var _profileInProgress, _profileStartTs, _trailAnimationFrameId, _recordedTrailingSpans, _longFrameDetector, _longFramesCount, _longFramesTotalTime, _visibilityChangeHandler;
+var _profileInProgress$1, _profileStartTs, _trailAnimationFrameId, _recordedTrailingSpans, _longFrameDetector, _longFramesCount, _longFramesTotalTime, _visibilityChangeHandler;
 const POST_STORM_WINDOW = 2e3;
 const DEFAULT_LONG_FRAME_THRESHOLD = 30;
 const TAB_INACTIVE_THRESHOLD = 1e3;
 class SceneRenderProfiler {
   constructor(queryController) {
     this.queryController = queryController;
-    __privateAdd$2(this, _profileInProgress, null);
-    __privateAdd$2(this, _profileStartTs, null);
-    __privateAdd$2(this, _trailAnimationFrameId, null);
+    __privateAdd$3(this, _profileInProgress$1, null);
+    __privateAdd$3(this, _profileStartTs, null);
+    __privateAdd$3(this, _trailAnimationFrameId, null);
     // Will keep measured lengths trailing frames
-    __privateAdd$2(this, _recordedTrailingSpans, []);
+    __privateAdd$3(this, _recordedTrailingSpans, []);
     // Long frame tracking
-    __privateAdd$2(this, _longFrameDetector);
-    __privateAdd$2(this, _longFramesCount, 0);
-    __privateAdd$2(this, _longFramesTotalTime, 0);
-    __privateAdd$2(this, _visibilityChangeHandler, null);
+    __privateAdd$3(this, _longFrameDetector);
+    __privateAdd$3(this, _longFramesCount, 0);
+    __privateAdd$3(this, _longFramesTotalTime, 0);
+    __privateAdd$3(this, _visibilityChangeHandler, null);
     this.measureTrailingFrames = (measurementStartTs, lastFrameTime, profileStartTs) => {
       var _a, _b, _c, _d;
       const currentFrameTime = performance.now();
@@ -1084,26 +1101,26 @@ class SceneRenderProfiler {
         this.cancelProfile();
         return;
       }
-      __privateGet$2(this, _recordedTrailingSpans).push(frameLength);
+      __privateGet$3(this, _recordedTrailingSpans).push(frameLength);
       if (currentFrameTime - measurementStartTs < POST_STORM_WINDOW) {
-        if (__privateGet$2(this, _profileInProgress)) {
-          __privateSet$2(this, _trailAnimationFrameId, requestAnimationFrame(
+        if (__privateGet$3(this, _profileInProgress$1)) {
+          __privateSet$3(this, _trailAnimationFrameId, requestAnimationFrame(
             () => this.measureTrailingFrames(measurementStartTs, currentFrameTime, profileStartTs)
           ));
         }
       } else {
-        const slowFrames = processRecordedSpans(__privateGet$2(this, _recordedTrailingSpans));
+        const slowFrames = processRecordedSpans(__privateGet$3(this, _recordedTrailingSpans));
         const slowFramesTime = slowFrames.reduce((acc, val) => acc + val, 0);
         writeSceneLog(
           "SceneRenderProfiler",
           `Profile tail recorded - Slow frames: ${slowFramesTime.toFixed(1)}ms (${slowFrames.length} frames)`
         );
-        writeSceneLog("", `  \u251C\u2500 Origin: ${((_a = __privateGet$2(this, _profileInProgress)) == null ? void 0 : _a.origin) || "unknown"}`);
-        writeSceneLog("", `  \u2514\u2500 Crumbs:`, ((_b = __privateGet$2(this, _profileInProgress)) == null ? void 0 : _b.crumbs) || []);
-        __privateSet$2(this, _recordedTrailingSpans, []);
+        writeSceneLog("", `  \u251C\u2500 Origin: ${((_a = __privateGet$3(this, _profileInProgress$1)) == null ? void 0 : _a.origin) || "unknown"}`);
+        writeSceneLog("", `  \u2514\u2500 Crumbs:`, ((_b = __privateGet$3(this, _profileInProgress$1)) == null ? void 0 : _b.crumbs) || []);
+        __privateSet$3(this, _recordedTrailingSpans, []);
         const profileDuration = measurementStartTs - profileStartTs;
         if (typeof performance !== "undefined" && performance.mark) {
-          const profileName = ((_c = __privateGet$2(this, _profileInProgress)) == null ? void 0 : _c.origin) || "unknown";
+          const profileName = ((_c = __privateGet$3(this, _profileInProgress$1)) == null ? void 0 : _c.origin) || "unknown";
           const totalTime = profileDuration + slowFramesTime;
           performance.mark(`Dashboard Profile End: ${profileName}`);
           const startMarkName = `Dashboard Profile Start: ${profileName}`;
@@ -1124,7 +1141,7 @@ class SceneRenderProfiler {
             slowFrames.forEach((frameTime, index) => {
               if (frameTime > 16) {
                 try {
-                  const frameStartTime = __privateGet$2(this, _profileStartTs) + profileDuration + (index > 0 ? slowFrames.slice(0, index).reduce((sum, t) => sum + t, 0) : 0);
+                  const frameStartTime = __privateGet$3(this, _profileStartTs) + profileDuration + (index > 0 ? slowFrames.slice(0, index).reduce((sum, t) => sum + t, 0) : 0);
                   const frameId = `slow-frame-${index}`;
                   const frameStartMark = `${frameId}-start`;
                   const frameEndMark = `${frameId}-end`;
@@ -1143,33 +1160,33 @@ class SceneRenderProfiler {
         writeSceneLog("", `  \u251C\u2500 Timestamp: ${completionTimestamp.toFixed(1)}ms`);
         writeSceneLog("", `  \u251C\u2500 Total time: ${(profileDuration + slowFramesTime).toFixed(1)}ms`);
         writeSceneLog("", `  \u251C\u2500 Slow frames: ${slowFramesTime}ms (${slowFrames.length} frames)`);
-        writeSceneLog("", `  \u2514\u2500 Long frames: ${__privateGet$2(this, _longFramesTotalTime)}ms (${__privateGet$2(this, _longFramesCount)} frames)`);
-        __privateGet$2(this, _longFrameDetector).stop();
+        writeSceneLog("", `  \u2514\u2500 Long frames: ${__privateGet$3(this, _longFramesTotalTime)}ms (${__privateGet$3(this, _longFramesCount)} frames)`);
+        __privateGet$3(this, _longFrameDetector).stop();
         writeSceneLogStyled(
           "SceneRenderProfiler",
           `Stopped long frame detection - profile complete at ${completionTimestamp.toFixed(1)}ms`,
           "color: #00CC00; font-weight: bold;"
         );
-        __privateSet$2(this, _trailAnimationFrameId, null);
+        __privateSet$3(this, _trailAnimationFrameId, null);
         const profileEndTs = profileStartTs + profileDuration + slowFramesTime;
-        if (!__privateGet$2(this, _profileInProgress)) {
+        if (!__privateGet$3(this, _profileInProgress$1)) {
           return;
         }
-        performance.measure(`DashboardInteraction ${__privateGet$2(this, _profileInProgress).origin}`, {
+        performance.measure(`DashboardInteraction ${__privateGet$3(this, _profileInProgress$1).origin}`, {
           start: profileStartTs,
           end: profileEndTs
         });
         const networkDuration = captureNetwork(profileStartTs, profileEndTs);
-        if (((_d = this.queryController) == null ? void 0 : _d.state.onProfileComplete) && __privateGet$2(this, _profileInProgress)) {
+        if (((_d = this.queryController) == null ? void 0 : _d.state.onProfileComplete) && __privateGet$3(this, _profileInProgress$1)) {
           this.queryController.state.onProfileComplete({
-            origin: __privateGet$2(this, _profileInProgress).origin,
-            crumbs: __privateGet$2(this, _profileInProgress).crumbs,
+            origin: __privateGet$3(this, _profileInProgress$1).origin,
+            crumbs: __privateGet$3(this, _profileInProgress$1).crumbs,
             duration: profileDuration + slowFramesTime,
             networkDuration,
             startTs: profileStartTs,
             endTs: profileEndTs,
-            longFramesCount: __privateGet$2(this, _longFramesCount),
-            longFramesTotalTime: __privateGet$2(this, _longFramesTotalTime),
+            longFramesCount: __privateGet$3(this, _longFramesCount),
+            longFramesTotalTime: __privateGet$3(this, _longFramesTotalTime),
             // @ts-ignore
             jsHeapSizeLimit: performance.memory ? performance.memory.jsHeapSizeLimit : 0,
             // @ts-ignore
@@ -1177,8 +1194,8 @@ class SceneRenderProfiler {
             // @ts-ignore
             totalJSHeapSize: performance.memory ? performance.memory.totalJSHeapSize : 0
           });
-          __privateSet$2(this, _profileInProgress, null);
-          __privateSet$2(this, _trailAnimationFrameId, null);
+          __privateSet$3(this, _profileInProgress$1, null);
+          __privateSet$3(this, _trailAnimationFrameId, null);
         }
         if (window.__runs) {
           window.__runs += `${Date.now()}, ${profileDuration + slowFramesTime}
@@ -1189,32 +1206,32 @@ class SceneRenderProfiler {
         }
       }
     };
-    __privateSet$2(this, _longFrameDetector, new LongFrameDetector());
+    __privateSet$3(this, _longFrameDetector, new LongFrameDetector());
     this.setupVisibilityChangeHandler();
   }
   setQueryController(queryController) {
     this.queryController = queryController;
   }
   setupVisibilityChangeHandler() {
-    if (__privateGet$2(this, _visibilityChangeHandler)) {
+    if (__privateGet$3(this, _visibilityChangeHandler)) {
       return;
     }
-    __privateSet$2(this, _visibilityChangeHandler, () => {
-      if (document.hidden && __privateGet$2(this, _profileInProgress)) {
+    __privateSet$3(this, _visibilityChangeHandler, () => {
+      if (document.hidden && __privateGet$3(this, _profileInProgress$1)) {
         writeSceneLog("SceneRenderProfiler", "Tab became inactive, cancelling profile");
         this.cancelProfile();
       }
     });
     if (typeof document !== "undefined") {
-      document.addEventListener("visibilitychange", __privateGet$2(this, _visibilityChangeHandler));
+      document.addEventListener("visibilitychange", __privateGet$3(this, _visibilityChangeHandler));
     }
   }
   cleanup() {
-    if (__privateGet$2(this, _visibilityChangeHandler) && typeof document !== "undefined") {
-      document.removeEventListener("visibilitychange", __privateGet$2(this, _visibilityChangeHandler));
-      __privateSet$2(this, _visibilityChangeHandler, null);
+    if (__privateGet$3(this, _visibilityChangeHandler) && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", __privateGet$3(this, _visibilityChangeHandler));
+      __privateSet$3(this, _visibilityChangeHandler, null);
     }
-    __privateGet$2(this, _longFrameDetector).stop();
+    __privateGet$3(this, _longFrameDetector).stop();
     this.cancelProfile();
   }
   startProfile(name) {
@@ -1222,8 +1239,8 @@ class SceneRenderProfiler {
       writeSceneLog("SceneRenderProfiler", "Tab is inactive, skipping profile", name);
       return;
     }
-    if (__privateGet$2(this, _profileInProgress)) {
-      if (__privateGet$2(this, _trailAnimationFrameId)) {
+    if (__privateGet$3(this, _profileInProgress$1)) {
+      if (__privateGet$3(this, _trailAnimationFrameId)) {
         this.cancelProfile();
         this._startNewProfile(name, true);
       } else {
@@ -1245,10 +1262,10 @@ class SceneRenderProfiler {
    */
   _startNewProfile(name, force = false) {
     var _a;
-    __privateSet$2(this, _profileInProgress, { origin: name, crumbs: [] });
-    __privateSet$2(this, _profileStartTs, performance.now());
-    __privateSet$2(this, _longFramesCount, 0);
-    __privateSet$2(this, _longFramesTotalTime, 0);
+    __privateSet$3(this, _profileInProgress$1, { origin: name, crumbs: [] });
+    __privateSet$3(this, _profileStartTs, performance.now());
+    __privateSet$3(this, _longFramesCount, 0);
+    __privateSet$3(this, _longFramesTotalTime, 0);
     if (typeof performance !== "undefined" && performance.mark) {
       const markName = `Dashboard Profile Start: ${name}`;
       performance.mark(markName);
@@ -1258,66 +1275,66 @@ class SceneRenderProfiler {
       `Profile started[${force ? "forced" : "clean"}]`,
       "color: #FFCC00; font-weight: bold;"
     );
-    writeSceneLog("", `  \u251C\u2500 Origin: ${((_a = __privateGet$2(this, _profileInProgress)) == null ? void 0 : _a.origin) || "unknown"}`);
-    writeSceneLog("", `  \u2514\u2500 Timestamp: ${__privateGet$2(this, _profileStartTs).toFixed(1)}ms`);
-    __privateGet$2(this, _longFrameDetector).start((event) => {
-      if (!__privateGet$2(this, _profileInProgress) || !__privateGet$2(this, _profileStartTs)) {
+    writeSceneLog("", `  \u251C\u2500 Origin: ${((_a = __privateGet$3(this, _profileInProgress$1)) == null ? void 0 : _a.origin) || "unknown"}`);
+    writeSceneLog("", `  \u2514\u2500 Timestamp: ${__privateGet$3(this, _profileStartTs).toFixed(1)}ms`);
+    __privateGet$3(this, _longFrameDetector).start((event) => {
+      if (!__privateGet$3(this, _profileInProgress$1) || !__privateGet$3(this, _profileStartTs)) {
         return;
       }
-      if (event.timestamp < __privateGet$2(this, _profileStartTs)) {
+      if (event.timestamp < __privateGet$3(this, _profileStartTs)) {
         return;
       }
       __privateWrapper(this, _longFramesCount)._++;
-      __privateSet$2(this, _longFramesTotalTime, __privateGet$2(this, _longFramesTotalTime) + event.duration);
+      __privateSet$3(this, _longFramesTotalTime, __privateGet$3(this, _longFramesTotalTime) + event.duration);
     });
   }
   recordProfileTail(measurementStartTime, profileStartTs) {
-    __privateSet$2(this, _trailAnimationFrameId, requestAnimationFrame(
+    __privateSet$3(this, _trailAnimationFrameId, requestAnimationFrame(
       () => this.measureTrailingFrames(measurementStartTime, measurementStartTime, profileStartTs)
     ));
   }
   tryCompletingProfile() {
     var _a;
-    writeSceneLog("SceneRenderProfiler", "Trying to complete profile", __privateGet$2(this, _profileInProgress));
-    if (((_a = this.queryController) == null ? void 0 : _a.runningQueriesCount()) === 0 && __privateGet$2(this, _profileInProgress)) {
+    writeSceneLog("SceneRenderProfiler", "Trying to complete profile", __privateGet$3(this, _profileInProgress$1));
+    if (((_a = this.queryController) == null ? void 0 : _a.runningQueriesCount()) === 0 && __privateGet$3(this, _profileInProgress$1)) {
       writeSceneLog("SceneRenderProfiler", "All queries completed, starting tail measurement");
-      this.recordProfileTail(performance.now(), __privateGet$2(this, _profileStartTs));
+      this.recordProfileTail(performance.now(), __privateGet$3(this, _profileStartTs));
     }
   }
   isTailRecording() {
-    return Boolean(__privateGet$2(this, _trailAnimationFrameId));
+    return Boolean(__privateGet$3(this, _trailAnimationFrameId));
   }
   cancelTailRecording() {
-    if (__privateGet$2(this, _trailAnimationFrameId)) {
-      cancelAnimationFrame(__privateGet$2(this, _trailAnimationFrameId));
-      __privateSet$2(this, _trailAnimationFrameId, null);
+    if (__privateGet$3(this, _trailAnimationFrameId)) {
+      cancelAnimationFrame(__privateGet$3(this, _trailAnimationFrameId));
+      __privateSet$3(this, _trailAnimationFrameId, null);
       writeSceneLog("SceneRenderProfiler", "Cancelled recording frames, new profile started");
     }
   }
   // cancel profile
   cancelProfile() {
-    if (__privateGet$2(this, _profileInProgress)) {
-      writeSceneLog("SceneRenderProfiler", "Cancelling profile", __privateGet$2(this, _profileInProgress));
-      __privateSet$2(this, _profileInProgress, null);
-      if (__privateGet$2(this, _trailAnimationFrameId)) {
-        cancelAnimationFrame(__privateGet$2(this, _trailAnimationFrameId));
-        __privateSet$2(this, _trailAnimationFrameId, null);
-      }
-      __privateGet$2(this, _longFrameDetector).stop();
+    if (__privateGet$3(this, _profileInProgress$1)) {
+      writeSceneLog("SceneRenderProfiler", "Cancelling profile", __privateGet$3(this, _profileInProgress$1));
+      __privateSet$3(this, _profileInProgress$1, null);
+      if (__privateGet$3(this, _trailAnimationFrameId)) {
+        cancelAnimationFrame(__privateGet$3(this, _trailAnimationFrameId));
+        __privateSet$3(this, _trailAnimationFrameId, null);
+      }
+      __privateGet$3(this, _longFrameDetector).stop();
       writeSceneLog("SceneRenderProfiler", "Stopped long frame detection - profile cancelled");
-      __privateSet$2(this, _recordedTrailingSpans, []);
-      __privateSet$2(this, _longFramesCount, 0);
-      __privateSet$2(this, _longFramesTotalTime, 0);
+      __privateSet$3(this, _recordedTrailingSpans, []);
+      __privateSet$3(this, _longFramesCount, 0);
+      __privateSet$3(this, _longFramesTotalTime, 0);
     }
   }
   addCrumb(crumb) {
-    if (__privateGet$2(this, _profileInProgress)) {
+    if (__privateGet$3(this, _profileInProgress$1)) {
       writeSceneLog("SceneRenderProfiler", "Adding crumb:", crumb);
-      __privateGet$2(this, _profileInProgress).crumbs.push(crumb);
+      __privateGet$3(this, _profileInProgress$1).crumbs.push(crumb);
     }
   }
 }
-_profileInProgress = new WeakMap();
+_profileInProgress$1 = new WeakMap();
 _profileStartTs = new WeakMap();
 _trailAnimationFrameId = new WeakMap();
 _recordedTrailingSpans = new WeakMap();
@@ -3486,22 +3503,22 @@ function getEnrichedFiltersRequest(sourceRunner) {
   return null;
 }
 
-var __typeError$1 = (msg) => {
+var __typeError$2 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
 var _value;
 class SafeSerializableSceneObject {
   constructor(value) {
-    __privateAdd$1(this, _value);
+    __privateAdd$2(this, _value);
     this.text = "__sceneObject";
     this.valueOf = () => {
-      return __privateGet$1(this, _value);
+      return __privateGet$2(this, _value);
     };
-    __privateSet$1(this, _value, value);
+    __privateSet$2(this, _value, value);
   }
   toString() {
     return void 0;
@@ -3655,6 +3672,87 @@ const GroupByValueContainer = ({
   return /* @__PURE__ */ React__default.default.createElement("div", { className: css.cx(styles.multiValueContainer, !isApplicable && css.cx(disabledPill, strikethrough)) }, children);
 };
 
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), member.get(obj));
+var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
+var _profileInProgress;
+class SceneInteractionProfiler {
+  constructor() {
+    this.queryController = null;
+    this.isInteractionProfiler = true;
+    __privateAdd$1(this, _profileInProgress, null);
+    __privateSet$1(this, _profileInProgress, null);
+  }
+  setQueryController(queryController) {
+    this.queryController = queryController;
+  }
+  startProfile(interaction) {
+    if (__privateGet$1(this, _profileInProgress)) {
+      this.cancelProfile();
+    }
+    __privateSet$1(this, _profileInProgress, {
+      interaction,
+      startTs: performance.now()
+    });
+    writeSceneLog("SceneInteractionProfiler", "Started profiling interaction:", interaction);
+  }
+  stopProfile() {
+    var _a, _b;
+    if (!__privateGet$1(this, _profileInProgress)) {
+      return;
+    }
+    const endTs = performance.now();
+    const interactionDuration = endTs - __privateGet$1(this, _profileInProgress).startTs;
+    const networkDuration = captureNetwork(__privateGet$1(this, _profileInProgress).startTs, endTs);
+    const result = {
+      origin: __privateGet$1(this, _profileInProgress).interaction,
+      duration: interactionDuration,
+      networkDuration,
+      startTs: __privateGet$1(this, _profileInProgress).startTs,
+      endTs
+    };
+    writeSceneLog("SceneInteractionProfiler", "Completed profile:", result);
+    if (((_a = this.queryController) == null ? void 0 : _a.state.onProfileComplete) && __privateGet$1(this, _profileInProgress)) {
+      (_b = this.queryController) == null ? void 0 : _b.state.onProfileComplete(result);
+    }
+    performance.mark(`${__privateGet$1(this, _profileInProgress).interaction}_start`, {
+      startTime: __privateGet$1(this, _profileInProgress).startTs
+    });
+    performance.mark(`${__privateGet$1(this, _profileInProgress).interaction}_end`, {
+      startTime: endTs
+    });
+    performance.measure(
+      `Interaction_${__privateGet$1(this, _profileInProgress).interaction}`,
+      `${__privateGet$1(this, _profileInProgress).interaction}_start`,
+      `${__privateGet$1(this, _profileInProgress).interaction}_end`
+    );
+    __privateSet$1(this, _profileInProgress, null);
+  }
+  cancelProfile() {
+    if (__privateGet$1(this, _profileInProgress)) {
+      writeSceneLog("SceneInteractionProfiler", "Cancelled profile:", __privateGet$1(this, _profileInProgress).interaction);
+      __privateSet$1(this, _profileInProgress, null);
+    }
+  }
+  isProfileActive() {
+    return __privateGet$1(this, _profileInProgress) !== null;
+  }
+  getCurrentInteraction() {
+    var _a, _b;
+    return (_b = (_a = __privateGet$1(this, _profileInProgress)) == null ? void 0 : _a.interaction) != null ? _b : null;
+  }
+}
+_profileInProgress = new WeakMap();
+const USER_INTERACTIONS = {
+  ADHOC_KEYS_DROPDOWN: "adhoc_keys_dropdown",
+  ADHOC_VALUES_DROPDOWN: "adhoc_values_dropdown",
+  GROUPBY_DROPDOWN: "groupby_dropdown"
+};
+
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
     super({
@@ -3960,10 +4058,13 @@ function GroupByVariableRenderer({ model }) {
         setUncommittedValue(newValue);
       },
       onOpenMenu: async () => {
+        const profiler = getQueryController(model);
+        profiler == null ? void 0 : profiler.startInteractionProfile(USER_INTERACTIONS.GROUPBY_DROPDOWN);
         setIsFetchingOptions(true);
         await rxjs.lastValueFrom(model.validateAndUpdate());
         setIsFetchingOptions(false);
         setIsOptionsOpen(true);
+        profiler == null ? void 0 : profiler.stopInteractionProfile();
       },
       onCloseMenu: () => {
         setIsOptionsOpen(false);
@@ -4013,10 +4114,13 @@ function GroupByVariableRenderer({ model }) {
         }
       },
       onOpenMenu: async () => {
+        const profiler = getQueryController(model);
+        profiler == null ? void 0 : profiler.startInteractionProfile(USER_INTERACTIONS.GROUPBY_DROPDOWN);
         setIsFetchingOptions(true);
         await rxjs.lastValueFrom(model.validateAndUpdate());
         setIsFetchingOptions(false);
         setIsOptionsOpen(true);
+        profiler == null ? void 0 : profiler.stopInteractionProfile();
       },
       onCloseMenu: () => {
         setIsOptionsOpen(false);
@@ -5181,6 +5285,11 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const handleFetchOptions = React.useCallback(
     async (inputType) => {
       var _a2;
+      const profiler = getQueryController(model);
+      const interactionName = inputType === "key" ? USER_INTERACTIONS.ADHOC_KEYS_DROPDOWN : USER_INTERACTIONS.ADHOC_VALUES_DROPDOWN;
+      if (inputType !== "operator") {
+        profiler == null ? void 0 : profiler.startInteractionProfile(interactionName);
+      }
       setOptionsError(false);
       setOptionsLoading(true);
       setOptions([]);
@@ -5194,6 +5303,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
           options2 = await model._getValuesFor(filter);
         }
         if (filterInputTypeRef.current !== inputType) {
+          profiler == null ? void 0 : profiler.stopInteractionProfile();
           return;
         }
         setOptions(options2);
@@ -5206,6 +5316,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         setOptionsError(true);
       }
       setOptionsLoading(false);
+      profiler == null ? void 0 : profiler.stopInteractionProfile();
     },
     [filter, model]
   );
@@ -6746,6 +6857,9 @@ class SceneQueryRunner extends SceneObjectBase {
     this._variableValueRecorder = new VariableValueRecorder();
     this._results = new rxjs.ReplaySubject(1);
     this._scopedVars = { __sceneObject: wrapInSafeSerializableSceneObject(this) };
+    this._isInView = true;
+    this._bypassIsInView = false;
+    this._queryNotExecutedWhenOutOfView = false;
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["queries", "datasource", "minInterval"],
       onVariableUpdateCompleted: this.onVariableUpdatesCompleted.bind(this),
@@ -6985,6 +7099,11 @@ class SceneQueryRunner extends SceneObjectBase {
     if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {
       return;
     }
+    if (this.isQueryModeAuto() && !this._isInView && !this._bypassIsInView) {
+      this._queryNotExecutedWhenOutOfView = true;
+      return;
+    }
+    this._queryNotExecutedWhenOutOfView = false;
     if (!this._dataLayersSub) {
       this._handleDataLayers();
     }
@@ -7148,6 +7267,20 @@ 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();
+    }
+  }
+  bypassIsInViewChanged(bypassIsInView) {
+    writeSceneLog("SceneQueryRunner", `bypassIsInViewChanged: ${bypassIsInView}`, this.state.key);
+    this._bypassIsInView = bypassIsInView;
+    if (bypassIsInView && this._queryNotExecutedWhenOutOfView) {
+      this.runQueries();
+    }
+  }
 }
 function findFirstDatasource(targets) {
   var _a, _b;
@@ -8588,6 +8721,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 {
@@ -8630,6 +8828,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) {
@@ -9190,6 +9394,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);
+  }
+  bypassIsInViewChanged(bypassIsInView) {
+    var _a, _b;
+    (_b = (_a = this.state.$data) == null ? void 0 : _a.bypassIsInViewChanged) == null ? void 0 : _b.call(_a, bypassIsInView);
+  }
   haveAlreadyTransformedData(data) {
     if (!this._prevDataFromSource) {
       return false;
@@ -11497,10 +11709,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,
@@ -11686,67 +11898,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();
@@ -15172,6 +15323,7 @@ exports.SceneGridItem = SceneGridItem;
 exports.SceneGridLayout = SceneGridLayout;
 exports.SceneGridLayoutDragStartEvent = SceneGridLayoutDragStartEvent;
 exports.SceneGridRow = SceneGridRow;
+exports.SceneInteractionProfiler = SceneInteractionProfiler;
 exports.SceneObjectBase = SceneObjectBase;
 exports.SceneObjectRef = SceneObjectRef;
 exports.SceneObjectStateChangedEvent = SceneObjectStateChangedEvent;