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

package/dist/index.js

@@ -137,21 +137,21 @@ class UserActionEvent extends data.BusEventWithPayload {
 }
 UserActionEvent.type = "scene-object-user-action";
 
-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 _ref;
 class SceneObjectRef {
   constructor(ref) {
-    __privateAdd$4(this, _ref);
-    __privateSet$4(this, _ref, ref);
+    __privateAdd$5(this, _ref);
+    __privateSet$5(this, _ref, ref);
   }
   resolve() {
-    return __privateGet$4(this, _ref);
+    return __privateGet$5(this, _ref);
   }
 }
 _ref = new WeakMap();
@@ -599,14 +599,23 @@ function writeSceneLog(logger, message, ...rest) {
     console.log(`${logger}: `, message, ...rest);
   }
 }
+function writeSceneLogStyled(logger, message, style, ...rest) {
+  let loggingEnabled = false;
+  if (typeof window !== "undefined") {
+    loggingEnabled = localStorage.getItem("grafana.debug.scenes") === "true";
+  }
+  if (loggingEnabled) {
+    console.log(`%c${logger}: ${message}`, style, ...rest);
+  }
+}
 
-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 _running, _tryCompleteProfileFrameId;
 function isQueryController(s) {
   return "isQueryController" in s;
@@ -616,10 +625,10 @@ class SceneQueryController extends SceneObjectBase {
     super({ ...state, isRunning: false });
     this.profiler = profiler;
     this.isQueryController = true;
-    __privateAdd$3(this, _running, /* @__PURE__ */ new Set());
-    __privateAdd$3(this, _tryCompleteProfileFrameId, null);
+    __privateAdd$4(this, _running, /* @__PURE__ */ new Set());
+    __privateAdd$4(this, _tryCompleteProfileFrameId, null);
     this.runningQueriesCount = () => {
-      return __privateGet$3(this, _running).size;
+      return __privateGet$4(this, _running).size;
     };
     if (profiler) {
       this.profiler = profiler;
@@ -628,7 +637,7 @@ class SceneQueryController extends SceneObjectBase {
     this.addActivationHandler(() => {
       var _a;
       (_a = this.profiler) == null ? void 0 : _a.setQueryController(this);
-      return () => __privateGet$3(this, _running).clear();
+      return () => __privateGet$4(this, _running).clear();
     });
   }
   startProfile(name) {
@@ -643,19 +652,19 @@ class SceneQueryController extends SceneObjectBase {
     (_a = this.profiler) == null ? void 0 : _a.cancelProfile();
   }
   queryStarted(entry) {
-    __privateGet$3(this, _running).add(entry);
+    __privateGet$4(this, _running).add(entry);
     this.changeRunningQueryCount(1, entry);
     if (!this.state.isRunning) {
       this.setState({ isRunning: true });
     }
   }
   queryCompleted(entry) {
-    if (!__privateGet$3(this, _running).has(entry)) {
+    if (!__privateGet$4(this, _running).has(entry)) {
       return;
     }
-    __privateGet$3(this, _running).delete(entry);
+    __privateGet$4(this, _running).delete(entry);
     this.changeRunningQueryCount(-1);
-    if (__privateGet$3(this, _running).size === 0) {
+    if (__privateGet$4(this, _running).size === 0) {
       this.setState({ isRunning: false });
     }
   }
@@ -672,10 +681,10 @@ class SceneQueryController extends SceneObjectBase {
       }
     }
     if (this.state.enableProfiling) {
-      if (__privateGet$3(this, _tryCompleteProfileFrameId)) {
-        cancelAnimationFrame(__privateGet$3(this, _tryCompleteProfileFrameId));
+      if (__privateGet$4(this, _tryCompleteProfileFrameId)) {
+        cancelAnimationFrame(__privateGet$4(this, _tryCompleteProfileFrameId));
       }
-      __privateSet$3(this, _tryCompleteProfileFrameId, requestAnimationFrame(() => {
+      __privateSet$4(this, _tryCompleteProfileFrameId, requestAnimationFrame(() => {
         var _a2;
         (_a2 = this.profiler) == null ? void 0 : _a2.tryCompletingProfile();
       }));
@@ -683,7 +692,7 @@ class SceneQueryController extends SceneObjectBase {
   }
   cancelAll() {
     var _a;
-    for (const entry of __privateGet$3(this, _running).values()) {
+    for (const entry of __privateGet$4(this, _running).values()) {
       (_a = entry.cancel) == null ? void 0 : _a.call(entry);
     }
   }
@@ -853,6 +862,187 @@ function isValid$1(value, roundUp, timeZone) {
   return parsed.isValid();
 }
 
+var __typeError$3 = (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 _isTracking, _callback, _frameTrackingId, _lastFrameTime, _loafObserver;
+const LONG_FRAME_THRESHOLD = 50;
+class LongFrameDetector {
+  constructor() {
+    __privateAdd$3(this, _isTracking, false);
+    __privateAdd$3(this, _callback, null);
+    // Manual tracking state
+    __privateAdd$3(this, _frameTrackingId, null);
+    __privateAdd$3(this, _lastFrameTime, 0);
+    // LoAF tracking state
+    __privateAdd$3(this, _loafObserver, null);
+    /**
+     * Measure frame durations using requestAnimationFrame
+     */
+    this.measureFrames = () => {
+      if (!__privateGet$3(this, _isTracking)) {
+        return;
+      }
+      const currentFrameTime = performance.now();
+      const frameLength = currentFrameTime - __privateGet$3(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 (typeof performance !== "undefined" && performance.mark && performance.measure) {
+          const frameId = `long-frame-manual-${currentFrameTime.toFixed(0)}`;
+          const startMarkName = `${frameId}-start`;
+          const endMarkName = `${frameId}-end`;
+          const measureName = `Long Frame (Manual): ${frameLength.toFixed(1)}ms`;
+          try {
+            performance.mark(startMarkName, { startTime: currentFrameTime - frameLength });
+            performance.mark(endMarkName, { startTime: currentFrameTime });
+            performance.measure(measureName, startMarkName, endMarkName);
+          } catch (e) {
+            performance.mark(measureName);
+          }
+        }
+        writeSceneLog(
+          "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));
+      }
+    };
+  }
+  /**
+   * Check if LoAF API is available in the browser
+   */
+  isLoAFAvailable() {
+    return typeof PerformanceObserver !== "undefined" && PerformanceObserver.supportedEntryTypes && PerformanceObserver.supportedEntryTypes.includes("long-animation-frame");
+  }
+  /**
+   * Start detecting long frames and call the provided callback when they occur
+   */
+  start(callback) {
+    if (__privateGet$3(this, _isTracking)) {
+      writeSceneLog("LongFrameDetector", "Already tracking frames, stopping previous session");
+      this.stop();
+    }
+    __privateSet$3(this, _callback, callback);
+    __privateSet$3(this, _isTracking, true);
+    if (this.isLoAFAvailable()) {
+      this.startLoAFTracking();
+    } else {
+      this.startManualFrameTracking();
+    }
+    writeSceneLog(
+      "LongFrameDetector",
+      `Started tracking with ${this.isLoAFAvailable() ? "LoAF API" : "manual"} method, threshold: ${LONG_FRAME_THRESHOLD}ms`
+    );
+  }
+  /**
+   * Stop detecting long frames
+   */
+  stop() {
+    if (!__privateGet$3(this, _isTracking)) {
+      return;
+    }
+    __privateSet$3(this, _isTracking, false);
+    __privateSet$3(this, _callback, null);
+    this.stopLoAFTracking();
+    this.stopManualFrameTracking();
+  }
+  /**
+   * Check if currently tracking frames
+   */
+  isTracking() {
+    return __privateGet$3(this, _isTracking);
+  }
+  /**
+   * Start tracking using the Long Animation Frame API
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongAnimationFrameTiming
+   */
+  startLoAFTracking() {
+    if (!this.isLoAFAvailable()) {
+      writeSceneLog("LongFrameDetector", "LoAF API not available, falling back to manual tracking");
+      this.startManualFrameTracking();
+      return;
+    }
+    try {
+      __privateSet$3(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 (typeof performance !== "undefined" && performance.mark && performance.measure) {
+            const frameId = `long-frame-${entry.startTime.toFixed(0)}`;
+            const startMarkName = `${frameId}-start`;
+            const endMarkName = `${frameId}-end`;
+            const measureName = `Long Frame (LoAF): ${entry.duration.toFixed(1)}ms`;
+            try {
+              performance.mark(startMarkName, { startTime: entry.startTime });
+              performance.mark(endMarkName, { startTime: entry.startTime + entry.duration });
+              performance.measure(measureName, startMarkName, endMarkName);
+            } catch (e) {
+              performance.mark(measureName);
+            }
+          }
+          writeSceneLog("LongFrameDetector", `Long frame detected (LoAF): ${entry.duration}ms at ${entry.startTime}ms`);
+        }
+      }));
+      __privateGet$3(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();
+    }
+  }
+  /**
+   * Stop LoAF tracking
+   */
+  stopLoAFTracking() {
+    if (__privateGet$3(this, _loafObserver)) {
+      __privateGet$3(this, _loafObserver).disconnect();
+      __privateSet$3(this, _loafObserver, null);
+      writeSceneLog("LongFrameDetector", "Stopped LoAF tracking");
+    }
+  }
+  /**
+   * Start manual frame tracking using requestAnimationFrame
+   */
+  startManualFrameTracking() {
+    __privateSet$3(this, _lastFrameTime, performance.now());
+    __privateSet$3(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);
+      writeSceneLog("LongFrameDetector", "Stopped manual frame tracking");
+    }
+  }
+}
+_isTracking = new WeakMap();
+_callback = new WeakMap();
+_frameTrackingId = new WeakMap();
+_lastFrameTime = new WeakMap();
+_loafObserver = new WeakMap();
+
 var __typeError$2 = (msg) => {
   throw TypeError(msg);
 };
@@ -860,9 +1050,17 @@ var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Ca
 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 _profileInProgress, _profileStartTs, _trailAnimationFrameId, _recordedTrailingSpans, _visibilityChangeHandler;
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet$2(obj, member, value);
+  },
+  get _() {
+    return __privateGet$2(obj, member, getter);
+  }
+});
+var _profileInProgress, _profileStartTs, _trailAnimationFrameId, _recordedTrailingSpans, _longFrameDetector, _longFramesCount, _longFramesTotalTime, _visibilityChangeHandler;
 const POST_STORM_WINDOW = 2e3;
-const SPAN_THRESHOLD = 30;
+const DEFAULT_LONG_FRAME_THRESHOLD = 30;
 const TAB_INACTIVE_THRESHOLD = 1e3;
 class SceneRenderProfiler {
   constructor(queryController) {
@@ -872,9 +1070,13 @@ class SceneRenderProfiler {
     __privateAdd$2(this, _trailAnimationFrameId, null);
     // Will keep measured lengths trailing frames
     __privateAdd$2(this, _recordedTrailingSpans, []);
+    // Long frame tracking
+    __privateAdd$2(this, _longFrameDetector);
+    __privateAdd$2(this, _longFramesCount, 0);
+    __privateAdd$2(this, _longFramesTotalTime, 0);
     __privateAdd$2(this, _visibilityChangeHandler, null);
     this.measureTrailingFrames = (measurementStartTs, lastFrameTime, profileStartTs) => {
-      var _a;
+      var _a, _b, _c, _d;
       const currentFrameTime = performance.now();
       const frameLength = currentFrameTime - lastFrameTime;
       if (frameLength > TAB_INACTIVE_THRESHOLD) {
@@ -893,18 +1095,60 @@ class SceneRenderProfiler {
         const slowFrames = processRecordedSpans(__privateGet$2(this, _recordedTrailingSpans));
         const slowFramesTime = slowFrames.reduce((acc, val) => acc + val, 0);
         writeSceneLog(
-          this.constructor.name,
-          "Profile tail recorded, slow frames duration:",
-          slowFramesTime,
-          slowFrames,
-          __privateGet$2(this, _profileInProgress)
+          "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, []);
         const profileDuration = measurementStartTs - profileStartTs;
-        writeSceneLog(
-          this.constructor.name,
-          "Stoped recording, total measured time (network included):",
-          profileDuration + slowFramesTime
+        if (typeof performance !== "undefined" && performance.mark) {
+          const profileName = ((_c = __privateGet$2(this, _profileInProgress)) == null ? void 0 : _c.origin) || "unknown";
+          const totalTime = profileDuration + slowFramesTime;
+          performance.mark(`Dashboard Profile End: ${profileName}`);
+          const startMarkName = `Dashboard Profile Start: ${profileName}`;
+          try {
+            performance.measure(
+              `Dashboard Profile: ${profileName} (${totalTime.toFixed(1)}ms)`,
+              startMarkName,
+              `Dashboard Profile End: ${profileName}`
+            );
+          } catch (e) {
+            performance.mark(`Dashboard Profile Complete: ${profileName} (${totalTime.toFixed(1)}ms)`);
+          }
+          if (slowFrames.length > 0) {
+            const slowFramesMarkName = `Slow Frames Summary: ${slowFrames.length} frames (${slowFramesTime.toFixed(
+              1
+            )}ms)`;
+            performance.mark(slowFramesMarkName);
+            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 frameId = `slow-frame-${index}`;
+                  const frameStartMark = `${frameId}-start`;
+                  const frameEndMark = `${frameId}-end`;
+                  performance.mark(frameStartMark, { startTime: frameStartTime });
+                  performance.mark(frameEndMark, { startTime: frameStartTime + frameTime });
+                  performance.measure(`Slow Frame ${index + 1}: ${frameTime.toFixed(1)}ms`, frameStartMark, frameEndMark);
+                } catch (e) {
+                  performance.mark(`Slow Frame ${index + 1}: ${frameTime.toFixed(1)}ms`);
+                }
+              }
+            });
+          }
+        }
+        const completionTimestamp = performance.now();
+        writeSceneLog("SceneRenderProfiler", "Profile completed");
+        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();
+        writeSceneLogStyled(
+          "SceneRenderProfiler",
+          `Stopped long frame detection - profile complete at ${completionTimestamp.toFixed(1)}ms`,
+          "color: #00CC00; font-weight: bold;"
         );
         __privateSet$2(this, _trailAnimationFrameId, null);
         const profileEndTs = profileStartTs + profileDuration + slowFramesTime;
@@ -916,7 +1160,7 @@ class SceneRenderProfiler {
           end: profileEndTs
         });
         const networkDuration = captureNetwork(profileStartTs, profileEndTs);
-        if (((_a = this.queryController) == null ? void 0 : _a.state.onProfileComplete) && __privateGet$2(this, _profileInProgress)) {
+        if (((_d = this.queryController) == null ? void 0 : _d.state.onProfileComplete) && __privateGet$2(this, _profileInProgress)) {
           this.queryController.state.onProfileComplete({
             origin: __privateGet$2(this, _profileInProgress).origin,
             crumbs: __privateGet$2(this, _profileInProgress).crumbs,
@@ -924,6 +1168,8 @@ class SceneRenderProfiler {
             networkDuration,
             startTs: profileStartTs,
             endTs: profileEndTs,
+            longFramesCount: __privateGet$2(this, _longFramesCount),
+            longFramesTotalTime: __privateGet$2(this, _longFramesTotalTime),
             // @ts-ignore
             jsHeapSizeLimit: performance.memory ? performance.memory.jsHeapSizeLimit : 0,
             // @ts-ignore
@@ -943,6 +1189,7 @@ class SceneRenderProfiler {
         }
       }
     };
+    __privateSet$2(this, _longFrameDetector, new LongFrameDetector());
     this.setupVisibilityChangeHandler();
   }
   setQueryController(queryController) {
@@ -967,6 +1214,7 @@ class SceneRenderProfiler {
       document.removeEventListener("visibilitychange", __privateGet$2(this, _visibilityChangeHandler));
       __privateSet$2(this, _visibilityChangeHandler, null);
     }
+    __privateGet$2(this, _longFrameDetector).stop();
     this.cancelProfile();
   }
   startProfile(name) {
@@ -996,14 +1244,32 @@ class SceneRenderProfiler {
    *               - "clean": Started when no profile is currently active
    */
   _startNewProfile(name, force = false) {
+    var _a;
     __privateSet$2(this, _profileInProgress, { origin: name, crumbs: [] });
     __privateSet$2(this, _profileStartTs, performance.now());
-    writeSceneLog(
+    __privateSet$2(this, _longFramesCount, 0);
+    __privateSet$2(this, _longFramesTotalTime, 0);
+    if (typeof performance !== "undefined" && performance.mark) {
+      const markName = `Dashboard Profile Start: ${name}`;
+      performance.mark(markName);
+    }
+    writeSceneLogStyled(
       "SceneRenderProfiler",
       `Profile started[${force ? "forced" : "clean"}]`,
-      __privateGet$2(this, _profileInProgress),
-      __privateGet$2(this, _profileStartTs)
+      "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)) {
+        return;
+      }
+      if (event.timestamp < __privateGet$2(this, _profileStartTs)) {
+        return;
+      }
+      __privateWrapper(this, _longFramesCount)._++;
+      __privateSet$2(this, _longFramesTotalTime, __privateGet$2(this, _longFramesTotalTime) + event.duration);
+    });
   }
   recordProfileTail(measurementStartTime, profileStartTs) {
     __privateSet$2(this, _trailAnimationFrameId, requestAnimationFrame(
@@ -1014,7 +1280,7 @@ class SceneRenderProfiler {
     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", "All queries completed, stopping profile");
+      writeSceneLog("SceneRenderProfiler", "All queries completed, starting tail measurement");
       this.recordProfileTail(performance.now(), __privateGet$2(this, _profileStartTs));
     }
   }
@@ -1037,7 +1303,11 @@ class SceneRenderProfiler {
         cancelAnimationFrame(__privateGet$2(this, _trailAnimationFrameId));
         __privateSet$2(this, _trailAnimationFrameId, null);
       }
+      __privateGet$2(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);
     }
   }
   addCrumb(crumb) {
@@ -1051,10 +1321,13 @@ _profileInProgress = new WeakMap();
 _profileStartTs = new WeakMap();
 _trailAnimationFrameId = new WeakMap();
 _recordedTrailingSpans = new WeakMap();
+_longFrameDetector = new WeakMap();
+_longFramesCount = new WeakMap();
+_longFramesTotalTime = new WeakMap();
 _visibilityChangeHandler = new WeakMap();
 function processRecordedSpans(spans) {
   for (let i = spans.length - 1; i >= 0; i--) {
-    if (spans[i] > SPAN_THRESHOLD) {
+    if (spans[i] > DEFAULT_LONG_FRAME_THRESHOLD) {
       return spans.slice(0, i + 1);
     }
   }
@@ -6473,8 +6746,6 @@ 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),
@@ -6714,11 +6985,6 @@ 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();
     }
@@ -6882,16 +7148,6 @@ 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;
@@ -8332,71 +8588,6 @@ 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 {
@@ -8439,12 +8630,6 @@ 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) {
@@ -9005,14 +9190,6 @@ 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;
@@ -11320,10 +11497,10 @@ class EmbeddedScene extends SceneObjectBase {
 EmbeddedScene.Component = EmbeddedSceneRenderer;
 function EmbeddedSceneRenderer({ model }) {
   const { body, controls } = model.useState();
-  const styles = ui.useStyles2(getStyles$6);
+  const styles = ui.useStyles2(getStyles$7);
   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$6 = (theme) => {
+const getStyles$7 = (theme) => {
   return {
     container: css.css({
       flexGrow: 1,
@@ -11509,6 +11686,67 @@ 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();