@grafana/scenes 6.33.0 → 6.33.1--canary.1235.17401388269.0

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,10 +1070,13 @@ class SceneRenderProfiler {
     __privateAdd$2(this, _trailAnimationFrameId, null);
     // Will keep measured lengths trailing frames
     __privateAdd$2(this, _recordedTrailingSpans, []);
-    this.lastFrameTime = 0;
+    // 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) {
@@ -894,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;
@@ -917,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,
@@ -925,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
@@ -944,6 +1189,7 @@ class SceneRenderProfiler {
         }
       }
     };
+    __privateSet$2(this, _longFrameDetector, new LongFrameDetector());
     this.setupVisibilityChangeHandler();
   }
   setQueryController(queryController) {
@@ -968,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) {
@@ -997,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(
@@ -1015,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));
     }
   }
@@ -1038,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) {
@@ -1052,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);
     }
   }
@@ -2868,6 +3140,49 @@ function getEnrichedDataRequest(sourceRunner) {
   return null;
 }
 
+let originalGetAdhocFilters = void 0;
+let allActiveFilterSets = /* @__PURE__ */ new Set();
+function patchGetAdhocFilters(filterVar) {
+  filterVar.addActivationHandler(() => {
+    allActiveFilterSets.add(filterVar);
+    return () => allActiveFilterSets.delete(filterVar);
+  });
+  if (originalGetAdhocFilters) {
+    return;
+  }
+  const templateSrv = runtime.getTemplateSrv();
+  if (!(templateSrv == null ? void 0 : templateSrv.getAdhocFilters)) {
+    console.log("Failed to patch getAdhocFilters");
+    return;
+  }
+  originalGetAdhocFilters = templateSrv.getAdhocFilters;
+  templateSrv.getAdhocFilters = function getAdhocFiltersScenePatch(dsName) {
+    var _a;
+    if (allActiveFilterSets.size === 0) {
+      return originalGetAdhocFilters.call(templateSrv, dsName);
+    }
+    const ds = runtime.getDataSourceSrv().getInstanceSettings(dsName);
+    if (!ds) {
+      return [];
+    }
+    for (const filter of allActiveFilterSets.values()) {
+      if (((_a = filter.state.datasource) == null ? void 0 : _a.uid) === ds.uid) {
+        return filter.state.filters;
+      }
+    }
+    return [];
+  }.bind(templateSrv);
+}
+function findActiveAdHocFilterVariableByUid(dsUid) {
+  var _a;
+  for (const filter of allActiveFilterSets.values()) {
+    if (interpolate(filter, (_a = filter.state.datasource) == null ? void 0 : _a.uid) === dsUid) {
+      return filter;
+    }
+  }
+  return void 0;
+}
+
 const allActiveGroupByVariables = /* @__PURE__ */ new Set();
 function findActiveGroupByVariablesByUid(dsUid) {
   var _a;
@@ -3536,13 +3851,13 @@ class GroupByVariable extends MultiValueVariable {
     const ds = await getDataSource(this.state.datasource, {
       __sceneObject: wrapInSafeSerializableSceneObject(this)
     });
-    if (!ds.getDrilldownsApplicability) {
+    if (!ds.getFiltersApplicability) {
       return;
     }
     const queries = getQueriesForVariables(this);
     const timeRange = sceneGraph.getTimeRange(this).state.value;
     const value = this.state.value;
-    const response = await ds.getDrilldownsApplicability({
+    const response = await ds.getFiltersApplicability({
       groupByKeys: Array.isArray(value) ? value.map((v) => String(v)) : value ? [String(value)] : [],
       queries,
       timeRange,
@@ -3679,11 +3994,12 @@ function GroupByVariableRenderer({ model }) {
         if (restorable !== model.state.restorable) {
           model.setState({ restorable });
         }
-        model._verifyApplicability();
       },
       onChange: (newValue, action) => {
         if (action.action === "clear" && noValueOnClear) {
           model.changeValueTo([], void 0, true);
+        } else {
+          model._verifyApplicability();
         }
         setUncommittedValue(newValue);
       },
@@ -3765,49 +4081,6 @@ function toSelectableValue$1(input) {
   return result;
 }
 
-let originalGetAdhocFilters = void 0;
-const allActiveFilterSets = /* @__PURE__ */ new Set();
-function patchGetAdhocFilters(filterVar) {
-  filterVar.addActivationHandler(() => {
-    allActiveFilterSets.add(filterVar);
-    return () => allActiveFilterSets.delete(filterVar);
-  });
-  if (originalGetAdhocFilters) {
-    return;
-  }
-  const templateSrv = runtime.getTemplateSrv();
-  if (!(templateSrv == null ? void 0 : templateSrv.getAdhocFilters)) {
-    console.log("Failed to patch getAdhocFilters");
-    return;
-  }
-  originalGetAdhocFilters = templateSrv.getAdhocFilters;
-  templateSrv.getAdhocFilters = function getAdhocFiltersScenePatch(dsName) {
-    var _a;
-    if (allActiveFilterSets.size === 0) {
-      return originalGetAdhocFilters.call(templateSrv, dsName);
-    }
-    const ds = runtime.getDataSourceSrv().getInstanceSettings(dsName);
-    if (!ds) {
-      return [];
-    }
-    for (const filter of allActiveFilterSets.values()) {
-      if (((_a = filter.state.datasource) == null ? void 0 : _a.uid) === ds.uid) {
-        return filter.state.filters;
-      }
-    }
-    return [];
-  }.bind(templateSrv);
-}
-function findActiveAdHocFilterVariableByUid(dsUid) {
-  var _a;
-  for (const filter of allActiveFilterSets.values()) {
-    if (interpolate(filter, (_a = filter.state.datasource) == null ? void 0 : _a.uid) === dsUid) {
-      return filter;
-    }
-  }
-  return void 0;
-}
-
 function LoadingIndicator(props) {
   return /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: i18n.t("grafana-scenes.utils.loading-indicator.content-cancel-query", "Cancel query") }, /* @__PURE__ */ React__default.default.createElement(
     ui.Icon,
@@ -6158,7 +6431,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
     var _a, _b, _c;
     const filters = [...this.state.filters, ...(_a = this.state.originFilters) != null ? _a : []];
     const ds = await this._dataSourceSrv.get(this.state.datasource, this._scopedVars);
-    if (!ds || !ds.getDrilldownsApplicability) {
+    if (!ds || !ds.getFiltersApplicability) {
       return;
     }
     if (!filters) {
@@ -6166,7 +6439,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
     }
     const timeRange = sceneGraph.getTimeRange(this).state.value;
     const queries = this.state.useQueriesAsFilterForOptions ? getQueriesForVariables(this) : void 0;
-    const response = await ds.getDrilldownsApplicability({
+    const response = await ds.getFiltersApplicability({
       filters,
       queries,
       timeRange,
@@ -6409,60 +6682,6 @@ function areDifferentLayers(a, b) {
   return false;
 }
 
-class DrilldownDependenciesManager {
-  constructor(variableDependency) {
-    this._variableDependency = variableDependency;
-  }
-  /**
-   * Walk up scene graph and find the closest filterset with matching data source
-   */
-  findAndSubscribeToDrilldowns(interpolatedUid) {
-    const filtersVar = findActiveAdHocFilterVariableByUid(interpolatedUid);
-    const groupByVar = findActiveGroupByVariablesByUid(interpolatedUid);
-    let hasChanges = false;
-    if (this._adhocFiltersVar !== filtersVar) {
-      this._adhocFiltersVar = filtersVar;
-      hasChanges = true;
-    }
-    if (this._groupByVar !== groupByVar) {
-      this._groupByVar = groupByVar;
-      hasChanges = true;
-    }
-    if (hasChanges) {
-      this._updateExplicitDrilldownVariableDependencies();
-    }
-  }
-  _updateExplicitDrilldownVariableDependencies() {
-    const explicitDependencies = [];
-    if (this._adhocFiltersVar) {
-      explicitDependencies.push(this._adhocFiltersVar.state.name);
-    }
-    if (this._groupByVar) {
-      explicitDependencies.push(this._groupByVar.state.name);
-    }
-    this._variableDependency.setVariableNames(explicitDependencies);
-  }
-  get adHocFiltersVar() {
-    return this._adhocFiltersVar;
-  }
-  get groupByVar() {
-    return this._groupByVar;
-  }
-  getFilters() {
-    var _a;
-    return this._adhocFiltersVar ? [...(_a = this._adhocFiltersVar.state.originFilters) != null ? _a : [], ...this._adhocFiltersVar.state.filters].filter(
-      (f) => isFilterComplete(f) && isFilterApplicable(f)
-    ) : void 0;
-  }
-  getGroupByKeys() {
-    return this._groupByVar ? this._groupByVar.getApplicableKeys() : void 0;
-  }
-  cleanup() {
-    this._adhocFiltersVar = void 0;
-    this._groupByVar = void 0;
-  }
-}
-
 let counter$1 = 100;
 function getNextRequestId$1() {
   return "SQR" + counter$1++;
@@ -6480,7 +6699,6 @@ class SceneQueryRunner extends SceneObjectBase {
       onAnyVariableChanged: this.onAnyVariableChanged.bind(this),
       dependsOnScopes: true
     });
-    this._drilldownDependenciesManager = new DrilldownDependenciesManager(this._variableDependency);
     this.onDataReceived = (data$1) => {
       const preProcessedData = data.preProcessPanelData(data$1, this.state.data);
       this._resultAnnotations = data$1.annotations;
@@ -6596,7 +6814,7 @@ class SceneQueryRunner extends SceneObjectBase {
    * Check if value changed is a adhoc filter o group by variable that did not exist when we issued the last query
    */
   onAnyVariableChanged(variable) {
-    if (this._drilldownDependenciesManager.adHocFiltersVar === variable || this._drilldownDependenciesManager.groupByVar === variable || !this.isQueryModeAuto()) {
+    if (this._adhocFiltersVar === variable || this._groupByVar === variable || !this.isQueryModeAuto()) {
       return;
     }
     if (variable instanceof AdHocFiltersVariable && this._isRelevantAutoVariable(variable)) {
@@ -6650,7 +6868,8 @@ class SceneQueryRunner extends SceneObjectBase {
     (_a = this._timeSub) == null ? void 0 : _a.unsubscribe();
     this._timeSub = void 0;
     this._timeSubRange = void 0;
-    this._drilldownDependenciesManager.cleanup();
+    this._adhocFiltersVar = void 0;
+    this._groupByVar = void 0;
   }
   setContainerWidth(width) {
     if (!this._containerWidth && width > 0) {
@@ -6731,7 +6950,7 @@ class SceneQueryRunner extends SceneObjectBase {
     try {
       const datasource = (_c = this.state.datasource) != null ? _c : findFirstDatasource(queries);
       const ds = await getDataSource(datasource, this._scopedVars);
-      this._drilldownDependenciesManager.findAndSubscribeToDrilldowns(ds.uid);
+      this.findAndSubscribeToAdHocFilters(ds.uid);
       const runRequest = runtime.getRunRequest();
       const { primary, secondaries, processors } = this.prepareRequests(timeRange, ds);
       writeSceneLog("SceneQueryRunner", "Starting runRequest", this.state.key);
@@ -6775,7 +6994,7 @@ class SceneQueryRunner extends SceneObjectBase {
     return clone;
   }
   prepareRequests(timeRange, ds) {
-    var _a;
+    var _a, _b;
     const { minInterval, queries } = this.state;
     let request = {
       app: "scenes",
@@ -6799,13 +7018,14 @@ class SceneQueryRunner extends SceneObjectBase {
       // This asks the scene root to provide context properties like app, panel and dashboardUID
       ...getEnrichedDataRequest(this)
     };
-    const filters = this._drilldownDependenciesManager.getFilters();
-    const groupByKeys = this._drilldownDependenciesManager.getGroupByKeys();
-    if (filters) {
-      request.filters = filters;
+    if (this._adhocFiltersVar) {
+      request.filters = [
+        ...(_a = this._adhocFiltersVar.state.originFilters) != null ? _a : [],
+        ...this._adhocFiltersVar.state.filters
+      ].filter((f) => isFilterComplete(f) && isFilterApplicable(f));
     }
-    if (groupByKeys) {
-      request.groupByKeys = groupByKeys;
+    if (this._groupByVar) {
+      request.groupByKeys = this._groupByVar.getApplicableKeys();
     }
     request.targets = request.targets.map((query) => {
       var _a2;
@@ -6825,7 +7045,7 @@ class SceneQueryRunner extends SceneObjectBase {
     const primaryTimeRange = timeRange.state.value;
     let secondaryRequests = [];
     let secondaryProcessors = /* @__PURE__ */ new Map();
-    for (const provider of (_a = this.getClosestExtraQueryProviders()) != null ? _a : []) {
+    for (const provider of (_b = this.getClosestExtraQueryProviders()) != null ? _b : []) {
       for (const { req, processor } of provider.getExtraQueries(request)) {
         const requestId = getNextRequestId$1();
         secondaryRequests.push({ ...req, requestId });
@@ -6872,6 +7092,31 @@ class SceneQueryRunner extends SceneObjectBase {
     });
     return Array.from(found.values());
   }
+  /**
+   * Walk up scene graph and find the closest filterset with matching data source
+   */
+  findAndSubscribeToAdHocFilters(interpolatedUid) {
+    const filtersVar = findActiveAdHocFilterVariableByUid(interpolatedUid);
+    if (this._adhocFiltersVar !== filtersVar) {
+      this._adhocFiltersVar = filtersVar;
+      this._updateExplicitVariableDependencies();
+    }
+    const groupByVar = findActiveGroupByVariablesByUid(interpolatedUid);
+    if (this._groupByVar !== groupByVar) {
+      this._groupByVar = groupByVar;
+      this._updateExplicitVariableDependencies();
+    }
+  }
+  _updateExplicitVariableDependencies() {
+    const explicitDependencies = [];
+    if (this._adhocFiltersVar) {
+      explicitDependencies.push(this._adhocFiltersVar.state.name);
+    }
+    if (this._groupByVar) {
+      explicitDependencies.push(this._groupByVar.state.name);
+    }
+    this._variableDependency.setVariableNames(explicitDependencies);
+  }
   isQueryModeAuto() {
     var _a;
     return ((_a = this.state.runQueriesMode) != null ? _a : "auto") === "auto";
@@ -9825,7 +10070,7 @@ let counter = 100;
 function getNextRequestId() {
   return "AQ" + counter++;
 }
-function executeAnnotationQuery(datasource, timeRange, query, layer, filters, groupByKeys) {
+function executeAnnotationQuery(datasource, timeRange, query, layer) {
   var _a;
   if (datasource.annotationQuery && shouldUseLegacyRunner(datasource)) {
     console.warn("Using deprecated annotationQuery method, please upgrade your datasource");
@@ -9892,8 +10137,6 @@ function executeAnnotationQuery(datasource, timeRange, query, layer, filters, gr
       }
     ],
     scopes: sceneGraph.getScopes(layer),
-    filters,
-    groupByKeys,
     ...getEnrichedDataRequest(layer)
   };
   const runRequest = runtime.getRunRequest();
@@ -9992,7 +10235,6 @@ class AnnotationsDataLayer extends SceneDataLayerBase {
     this._scopedVars = {
       __sceneObject: wrapInSafeSerializableSceneObject(this)
     };
-    this._drilldownDependenciesManager = new DrilldownDependenciesManager(this._variableDependency);
   }
   onEnable() {
     this.publishEvent(new runtime.RefreshEvent(), true);
@@ -10024,12 +10266,10 @@ class AnnotationsDataLayer extends SceneDataLayerBase {
     this.runWithTimeRange(timeRange);
   }
   async runWithTimeRange(timeRange) {
-    var _a;
     const { query } = this.state;
     if (!query.enable) {
       return;
     }
-    this._drilldownDependenciesManager.findAndSubscribeToDrilldowns((_a = query.datasource) == null ? void 0 : _a.uid);
     if (this.querySub) {
       this.querySub.unsubscribe();
     }
@@ -10039,14 +10279,7 @@ class AnnotationsDataLayer extends SceneDataLayerBase {
     }
     try {
       const ds = await this.resolveDataSource(query);
-      let stream = executeAnnotationQuery(
-        ds,
-        timeRange,
-        query,
-        this,
-        this._drilldownDependenciesManager.getFilters(),
-        this._drilldownDependenciesManager.getGroupByKeys()
-      ).pipe(
+      let stream = executeAnnotationQuery(ds, timeRange, query, this).pipe(
         registerQueryWithController({
           type: "AnnotationsDataLayer/annotationsLoading",
           origin: this,