@grafana/scenes 5.23.1--canary.955.11689118589.0 → 5.23.1--canary.858.11699916776.0

package/dist/index.js

@@ -188,32 +188,32 @@ class UserActionEvent extends data.BusEventWithPayload {
 }
 UserActionEvent.type = "scene-object-user-action";
 
-var __accessCheck$3 = (obj, member, msg) => {
+var __accessCheck$4 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$3 = (obj, member, getter) => {
-  __accessCheck$3(obj, member, "read from private field");
+var __privateGet$4 = (obj, member, getter) => {
+  __accessCheck$4(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$3 = (obj, member, value) => {
+var __privateAdd$4 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("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$3(obj, member, "write to private field");
+var __privateSet$4 = (obj, member, value, setter) => {
+  __accessCheck$4(obj, member, "write to private field");
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
 var _ref;
 class SceneObjectRef {
   constructor(ref) {
-    __privateAdd$3(this, _ref, void 0);
-    __privateSet$2(this, _ref, ref);
+    __privateAdd$4(this, _ref, void 0);
+    __privateSet$4(this, _ref, ref);
   }
   resolve() {
-    return __privateGet$3(this, _ref);
+    return __privateGet$4(this, _ref);
   }
 }
 _ref = new WeakMap();
@@ -611,7 +611,184 @@ function lookupVariable(name, sceneObject) {
   return null;
 }
 
+function writeSceneLog(logger, message, ...rest) {
+  let loggingEnabled = false;
+  if (typeof window !== "undefined") {
+    loggingEnabled = localStorage.getItem("grafana.debug.scenes") === "true";
+  }
+  if (loggingEnabled) {
+    console.log(`${logger}: `, message, ...rest);
+  }
+}
+
+var __accessCheck$3 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$3 = (obj, member, getter) => {
+  __accessCheck$3(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$3 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("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");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _profileInProgress, _profileStartTs, _trailAnimationFrameId, _recordedTrailingSpans;
+const POST_STORM_WINDOW = 2e3;
+const SPAN_THRESHOLD = 30;
+class SceneRenderProfiler {
+  constructor(queryController) {
+    this.queryController = queryController;
+    __privateAdd$3(this, _profileInProgress, null);
+    __privateAdd$3(this, _profileStartTs, null);
+    __privateAdd$3(this, _trailAnimationFrameId, null);
+    __privateAdd$3(this, _recordedTrailingSpans, []);
+    this.lastFrameTime = 0;
+    this.measureTrailingFrames = (measurementStartTs, lastFrameTime, profileStartTs) => {
+      const currentFrameTime = performance.now();
+      const frameLength = currentFrameTime - lastFrameTime;
+      __privateGet$3(this, _recordedTrailingSpans).push(frameLength);
+      if (currentFrameTime - measurementStartTs < POST_STORM_WINDOW) {
+        __privateSet$3(this, _trailAnimationFrameId, requestAnimationFrame(
+          () => this.measureTrailingFrames(measurementStartTs, currentFrameTime, profileStartTs)
+        ));
+      } else {
+        const slowFrames = processRecordedSpans(__privateGet$3(this, _recordedTrailingSpans));
+        const slowFramesTime = slowFrames.reduce((acc, val) => acc + val, 0);
+        writeSceneLog(
+          this.constructor.name,
+          "Profile tail recorded, slow frames duration:",
+          slowFramesTime,
+          slowFrames,
+          __privateGet$3(this, _profileInProgress)
+        );
+        __privateSet$3(this, _recordedTrailingSpans, []);
+        const profileDuration = measurementStartTs - profileStartTs;
+        writeSceneLog(
+          this.constructor.name,
+          "Stoped recording, total measured time (network included):",
+          profileDuration + slowFramesTime
+        );
+        __privateSet$3(this, _trailAnimationFrameId, null);
+        const profileEndTs = profileStartTs + profileDuration + slowFramesTime;
+        performance.measure("DashboardInteraction", {
+          start: profileStartTs,
+          end: profileEndTs
+        });
+        const networkDuration = captureNetwork(profileStartTs, profileEndTs);
+        if (this.queryController.state.onProfileComplete) {
+          this.queryController.state.onProfileComplete({
+            origin: __privateGet$3(this, _profileInProgress).origin,
+            crumbs: __privateGet$3(this, _profileInProgress).crumbs,
+            duration: profileDuration + slowFramesTime,
+            networkDuration,
+            jsHeapSizeLimit: performance.memory ? performance.memory.jsHeapSizeLimit : 0,
+            usedJSHeapSize: performance.memory ? performance.memory.usedJSHeapSize : 0,
+            totalJSHeapSize: performance.memory ? performance.memory.totalJSHeapSize : 0
+          });
+        }
+        if (window.__runs) {
+          window.__runs += `${Date.now()}, ${profileDuration + slowFramesTime}
+`;
+        } else {
+          window.__runs = `${Date.now()}, ${profileDuration + slowFramesTime}
+`;
+        }
+      }
+    };
+  }
+  startProfile(name) {
+    if (__privateGet$3(this, _trailAnimationFrameId)) {
+      cancelAnimationFrame(__privateGet$3(this, _trailAnimationFrameId));
+      __privateSet$3(this, _trailAnimationFrameId, null);
+      writeSceneLog(this.constructor.name, "New profile: Stopped recording frames");
+    }
+    __privateSet$3(this, _profileInProgress, { origin: name, crumbs: [] });
+    __privateSet$3(this, _profileStartTs, performance.now());
+    writeSceneLog(this.constructor.name, "Profile started:", __privateGet$3(this, _profileInProgress), __privateGet$3(this, _profileStartTs));
+  }
+  recordProfileTail(measurementStartTime, profileStartTs) {
+    __privateSet$3(this, _trailAnimationFrameId, requestAnimationFrame(
+      () => this.measureTrailingFrames(measurementStartTime, measurementStartTime, profileStartTs)
+    ));
+  }
+  tryCompletingProfile() {
+    writeSceneLog(this.constructor.name, "Trying to complete profile", __privateGet$3(this, _profileInProgress));
+    if (this.queryController.runningQueriesCount() === 0 && __privateGet$3(this, _profileInProgress)) {
+      writeSceneLog(this.constructor.name, "All queries completed, stopping profile");
+      this.recordProfileTail(performance.now(), __privateGet$3(this, _profileStartTs));
+    }
+  }
+  isTailRecording() {
+    return Boolean(__privateGet$3(this, _trailAnimationFrameId));
+  }
+  cancelTailRecording() {
+    if (__privateGet$3(this, _trailAnimationFrameId)) {
+      cancelAnimationFrame(__privateGet$3(this, _trailAnimationFrameId));
+      __privateSet$3(this, _trailAnimationFrameId, null);
+      writeSceneLog(this.constructor.name, "Cancelled recording frames, new profile started");
+    }
+  }
+  addCrumb(crumb) {
+    if (__privateGet$3(this, _profileInProgress)) {
+      __privateGet$3(this, _profileInProgress).crumbs.push(crumb);
+    }
+  }
+}
+_profileInProgress = new WeakMap();
+_profileStartTs = new WeakMap();
+_trailAnimationFrameId = new WeakMap();
+_recordedTrailingSpans = new WeakMap();
+function processRecordedSpans(spans) {
+  for (let i = spans.length - 1; i >= 0; i--) {
+    if (spans[i] > SPAN_THRESHOLD) {
+      return spans.slice(0, i + 1);
+    }
+  }
+  return [spans[0]];
+}
+function captureNetwork(startTs, endTs) {
+  const entries = performance.getEntriesByType("resource");
+  performance.clearResourceTimings();
+  const networkEntries = entries.filter((entry) => entry.startTime >= startTs && entry.startTime <= endTs);
+  for (const entry of networkEntries) {
+    performance.measure("Network entry " + entry.name, {
+      start: entry.startTime,
+      end: entry.responseEnd
+    });
+  }
+  return calculateNetworkTime(networkEntries);
+}
+function calculateNetworkTime(requests) {
+  if (requests.length === 0) {
+    return 0;
+  }
+  requests.sort((a, b) => a.startTime - b.startTime);
+  let totalNetworkTime = 0;
+  let currentStart = requests[0].startTime;
+  let currentEnd = requests[0].responseEnd;
+  for (let i = 1; i < requests.length; i++) {
+    if (requests[i].startTime <= currentEnd) {
+      currentEnd = Math.max(currentEnd, requests[i].responseEnd);
+    } else {
+      totalNetworkTime += currentEnd - currentStart;
+      currentStart = requests[i].startTime;
+      currentEnd = requests[i].responseEnd;
+    }
+  }
+  totalNetworkTime += currentEnd - currentStart;
+  return totalNetworkTime;
+}
+
 var __defProp$K = Object.defineProperty;
+var __defProps$u = Object.defineProperties;
+var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$K = Object.getOwnPropertySymbols;
 var __hasOwnProp$K = Object.prototype.hasOwnProperty;
 var __propIsEnum$K = Object.prototype.propertyIsEnumerable;
@@ -627,9 +804,131 @@ var __spreadValues$K = (a, b) => {
     }
   return a;
 };
+var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
+var __accessCheck$2 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$2 = (obj, member, getter) => {
+  __accessCheck$2(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$2 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("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");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _running, _tryCompleteProfileFrameId;
+function isQueryController(s) {
+  return "isQueryController" in s;
+}
+class SceneQueryController extends SceneObjectBase {
+  constructor(state = {}) {
+    super(__spreadProps$u(__spreadValues$K({}, state), { isRunning: false }));
+    this.isQueryController = true;
+    this.profiler = new SceneRenderProfiler(this);
+    __privateAdd$2(this, _running, /* @__PURE__ */ new Set());
+    __privateAdd$2(this, _tryCompleteProfileFrameId, null);
+    this.runningQueriesCount = () => {
+      return __privateGet$2(this, _running).size;
+    };
+    this.addActivationHandler(() => {
+      return () => __privateGet$2(this, _running).clear();
+    });
+  }
+  startProfile(source) {
+    if (!this.state.enableProfiling) {
+      return;
+    }
+    this.profiler.startProfile(source.constructor.name);
+  }
+  queryStarted(entry) {
+    __privateGet$2(this, _running).add(entry);
+    this.changeRunningQueryCount(1, entry);
+    if (!this.state.isRunning) {
+      this.setState({ isRunning: true });
+    }
+  }
+  queryCompleted(entry) {
+    if (!__privateGet$2(this, _running).has(entry)) {
+      return;
+    }
+    __privateGet$2(this, _running).delete(entry);
+    this.changeRunningQueryCount(-1);
+    if (__privateGet$2(this, _running).size === 0) {
+      this.setState({ isRunning: false });
+    }
+  }
+  changeRunningQueryCount(dir, entry) {
+    var _a;
+    window.__grafanaRunningQueryCount = ((_a = window.__grafanaRunningQueryCount) != null ? _a : 0) + dir;
+    if (dir === 1 && this.state.enableProfiling) {
+      if (entry) {
+        this.profiler.addCrumb(`${entry.origin.constructor.name}/${entry.type}`);
+      }
+      if (this.profiler.isTailRecording()) {
+        writeSceneLog(this.constructor.name, "New query started, cancelling tail recording");
+        this.profiler.cancelTailRecording();
+      }
+    }
+    if (this.state.enableProfiling) {
+      if (__privateGet$2(this, _tryCompleteProfileFrameId)) {
+        cancelAnimationFrame(__privateGet$2(this, _tryCompleteProfileFrameId));
+      }
+      __privateSet$2(this, _tryCompleteProfileFrameId, requestAnimationFrame(() => {
+        this.profiler.tryCompletingProfile();
+      }));
+    }
+  }
+  cancelAll() {
+    var _a;
+    for (const entry of __privateGet$2(this, _running).values()) {
+      (_a = entry.cancel) == null ? void 0 : _a.call(entry);
+    }
+  }
+}
+_running = new WeakMap();
+_tryCompleteProfileFrameId = new WeakMap();
+
+function getQueryController(sceneObject) {
+  let parent = sceneObject;
+  while (parent) {
+    if (parent.state.$behaviors) {
+      for (const behavior of parent.state.$behaviors) {
+        if (isQueryController(behavior)) {
+          return behavior;
+        }
+      }
+    }
+    parent = parent.parent;
+  }
+  return void 0;
+}
+
+var __defProp$J = Object.defineProperty;
+var __getOwnPropSymbols$J = Object.getOwnPropertySymbols;
+var __hasOwnProp$J = Object.prototype.hasOwnProperty;
+var __propIsEnum$J = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$J = (obj, key, value) => key in obj ? __defProp$J(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$J = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$J.call(b, prop))
+      __defNormalProp$J(a, prop, b[prop]);
+  if (__getOwnPropSymbols$J)
+    for (var prop of __getOwnPropSymbols$J(b)) {
+      if (__propIsEnum$J.call(b, prop))
+        __defNormalProp$J(a, prop, b[prop]);
+    }
+  return a;
+};
 class SceneDataNode extends SceneObjectBase {
   constructor(state) {
-    super(__spreadValues$K({
+    super(__spreadValues$J({
       data: emptyPanelData
     }, state));
   }
@@ -735,19 +1034,19 @@ function isValid$1(value, roundUp, timeZone) {
   return parsed.isValid();
 }
 
-var __defProp$J = Object.defineProperty;
-var __getOwnPropSymbols$J = Object.getOwnPropertySymbols;
-var __hasOwnProp$J = Object.prototype.hasOwnProperty;
-var __propIsEnum$J = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$J = (obj, key, value) => key in obj ? __defProp$J(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$J = (a, b) => {
+var __defProp$I = Object.defineProperty;
+var __getOwnPropSymbols$I = Object.getOwnPropertySymbols;
+var __hasOwnProp$I = Object.prototype.hasOwnProperty;
+var __propIsEnum$I = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$I = (obj, key, value) => key in obj ? __defProp$I(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$I = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$J.call(b, prop))
-      __defNormalProp$J(a, prop, b[prop]);
-  if (__getOwnPropSymbols$J)
-    for (var prop of __getOwnPropSymbols$J(b)) {
-      if (__propIsEnum$J.call(b, prop))
-        __defNormalProp$J(a, prop, b[prop]);
+    if (__hasOwnProp$I.call(b, prop))
+      __defNormalProp$I(a, prop, b[prop]);
+  if (__getOwnPropSymbols$I)
+    for (var prop of __getOwnPropSymbols$I(b)) {
+      if (__propIsEnum$I.call(b, prop))
+        __defNormalProp$I(a, prop, b[prop]);
     }
   return a;
 };
@@ -765,7 +1064,7 @@ class SceneTimeRange extends SceneObjectBase {
       state.UNSAFE_nowDelay
     );
     const refreshOnActivate = (_a = state.refreshOnActivate) != null ? _a : { percent: 10 };
-    super(__spreadValues$J({ from, to, timeZone, value, refreshOnActivate }, state));
+    super(__spreadValues$I({ from, to, timeZone, value, refreshOnActivate }, state));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["from", "to", "timezone", "time", "time.window"] });
     this.onTimeRangeChange = (timeRange) => {
       const update = {};
@@ -787,6 +1086,8 @@ class SceneTimeRange extends SceneObjectBase {
         this.state.UNSAFE_nowDelay
       );
       if (update.from !== this.state.from || update.to !== this.state.to) {
+        const queryController = getQueryController(this);
+        queryController == null ? void 0 : queryController.startProfile(this);
         this._urlSync.performBrowserHistoryAction(() => {
           this.setState(update);
         });
@@ -1749,25 +2050,25 @@ function collectAllVariables(sceneObject, record = {}) {
   return record;
 }
 
-var __defProp$I = Object.defineProperty;
-var __defProps$u = Object.defineProperties;
-var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$I = Object.getOwnPropertySymbols;
-var __hasOwnProp$I = Object.prototype.hasOwnProperty;
-var __propIsEnum$I = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$I = (obj, key, value) => key in obj ? __defProp$I(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$I = (a, b) => {
+var __defProp$H = Object.defineProperty;
+var __defProps$t = Object.defineProperties;
+var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$H = Object.getOwnPropertySymbols;
+var __hasOwnProp$H = Object.prototype.hasOwnProperty;
+var __propIsEnum$H = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$H = (obj, key, value) => key in obj ? __defProp$H(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$H = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$I.call(b, prop))
-      __defNormalProp$I(a, prop, b[prop]);
-  if (__getOwnPropSymbols$I)
-    for (var prop of __getOwnPropSymbols$I(b)) {
-      if (__propIsEnum$I.call(b, prop))
-        __defNormalProp$I(a, prop, b[prop]);
+    if (__hasOwnProp$H.call(b, prop))
+      __defNormalProp$H(a, prop, b[prop]);
+  if (__getOwnPropSymbols$H)
+    for (var prop of __getOwnPropSymbols$H(b)) {
+      if (__propIsEnum$H.call(b, prop))
+        __defNormalProp$H(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
+var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
 function getTemplateProxyForField(field, frame, frames) {
   return new Proxy(
     {},
@@ -1783,7 +2084,7 @@ function getTemplateProxyForField(field, frame, frames) {
           if (!field.labels) {
             return "";
           }
-          return __spreadProps$u(__spreadValues$I({}, field.labels), {
+          return __spreadProps$t(__spreadValues$H({}, field.labels), {
             __values: Object.values(field.labels).sort().join(", "),
             toString: () => {
               return data.formatLabels(field.labels, "", true);
@@ -2131,70 +2432,56 @@ function isDataLayer(obj) {
   return "isDataLayer" in obj;
 }
 
-var __accessCheck$2 = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet$2 = (obj, member, getter) => {
-  __accessCheck$2(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd$2 = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var _running;
-function isQueryController(s) {
-  return "isQueryController" in s;
-}
-class SceneQueryController extends SceneObjectBase {
-  constructor() {
-    super({ isRunning: false });
-    this.isQueryController = true;
-    __privateAdd$2(this, _running, /* @__PURE__ */ new Set());
-    this.addActivationHandler(() => {
-      return () => __privateGet$2(this, _running).clear();
-    });
-  }
-  queryStarted(entry) {
-    __privateGet$2(this, _running).add(entry);
-    this.changeRunningQueryCount(1);
-    if (!this.state.isRunning) {
-      this.setState({ isRunning: true });
-    }
-  }
-  queryCompleted(entry) {
-    if (!__privateGet$2(this, _running).has(entry)) {
-      return;
-    }
-    __privateGet$2(this, _running).delete(entry);
-    this.changeRunningQueryCount(-1);
-    if (__privateGet$2(this, _running).size === 0) {
-      this.setState({ isRunning: false });
-    }
-  }
-  changeRunningQueryCount(dir) {
-    var _a;
-    window.__grafanaRunningQueryCount = ((_a = window.__grafanaRunningQueryCount) != null ? _a : 0) + dir;
-  }
-  cancelAll() {
-    var _a;
-    for (const entry of __privateGet$2(this, _running).values()) {
-      (_a = entry.cancel) == null ? void 0 : _a.call(entry);
+function registerQueryWithController(entry) {
+  return (queryStream) => {
+    const queryControler = sceneGraph.getQueryController(entry.origin);
+    if (!queryControler) {
+      return queryStream;
     }
-  }
+    return new rxjs.Observable((observer) => {
+      if (!entry.cancel) {
+        entry.cancel = () => observer.complete();
+      }
+      queryControler.queryStarted(entry);
+      let markedAsCompleted = false;
+      const sub = queryStream.subscribe({
+        next: (v) => {
+          if (!markedAsCompleted && v.state !== schema.LoadingState.Loading) {
+            markedAsCompleted = true;
+            queryControler.queryCompleted(entry);
+          }
+          observer.next(v);
+        },
+        error: (e) => observer.error(e),
+        complete: () => {
+          observer.complete();
+        }
+      });
+      return () => {
+        sub.unsubscribe();
+        if (!markedAsCompleted) {
+          queryControler.queryCompleted(entry);
+        }
+      };
+    });
+  };
 }
-_running = new WeakMap();
-
-function writeSceneLog(logger, message, ...rest) {
-  let loggingEnabled = false;
-  if (typeof window !== "undefined") {
-    loggingEnabled = localStorage.getItem("grafana.debug.scenes") === "true";
-  }
-  if (loggingEnabled) {
-    console.log(`${logger}: `, message, ...rest);
-  }
+function wrapPromiseInStateObservable(promise) {
+  console.log("wrapPromiseInStateObservable", promise);
+  return new rxjs.Observable((observer) => {
+    observer.next({ state: schema.LoadingState.Loading });
+    const promiseObservable = rxjs.from(promise);
+    promiseObservable.pipe(
+      rxjs.map(() => ({ state: schema.LoadingState.Done })),
+      rxjs.catchError(() => {
+        observer.next({ state: schema.LoadingState.Error });
+        return [];
+      })
+    ).subscribe({
+      next: (result) => observer.next(result),
+      complete: () => observer.complete()
+    });
+  });
 }
 
 async function getDataSource(datasource, scopedVars) {
@@ -2207,7 +2494,21 @@ async function getDataSource(datasource, scopedVars) {
   if (datasource && datasource.query) {
     return datasource;
   }
-  return await runtime.getDataSourceSrv().get(datasource, scopedVars);
+  const dsPromise = runtime.getDataSourceSrv().get(datasource, scopedVars);
+  if (scopedVars.__sceneObject && scopedVars.__sceneObject.value.valueOf()) {
+    const queryControler = sceneGraph.getQueryController(scopedVars.__sceneObject.value.valueOf());
+    if (queryControler && queryControler.state.enableProfiling) {
+      wrapPromiseInStateObservable(dsPromise).pipe(
+        registerQueryWithController({
+          type: "plugin",
+          origin: scopedVars.__sceneObject.value.valueOf()
+        })
+      ).subscribe(() => {
+      });
+    }
+  }
+  const result = await dsPromise;
+  return result;
 }
 
 class VariableValueRecorder {
@@ -2280,25 +2581,25 @@ function isExtraQueryProvider(obj) {
   return typeof obj === "object" && "getExtraQueries" in obj;
 }
 
-var __defProp$H = Object.defineProperty;
-var __defProps$t = Object.defineProperties;
-var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$H = Object.getOwnPropertySymbols;
-var __hasOwnProp$H = Object.prototype.hasOwnProperty;
-var __propIsEnum$H = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$H = (obj, key, value) => key in obj ? __defProp$H(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$H = (a, b) => {
+var __defProp$G = Object.defineProperty;
+var __defProps$s = Object.defineProperties;
+var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
+var __hasOwnProp$G = Object.prototype.hasOwnProperty;
+var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$G = (obj, key, value) => key in obj ? __defProp$G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$G = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$H.call(b, prop))
-      __defNormalProp$H(a, prop, b[prop]);
-  if (__getOwnPropSymbols$H)
-    for (var prop of __getOwnPropSymbols$H(b)) {
-      if (__propIsEnum$H.call(b, prop))
-        __defNormalProp$H(a, prop, b[prop]);
+    if (__hasOwnProp$G.call(b, prop))
+      __defNormalProp$G(a, prop, b[prop]);
+  if (__getOwnPropSymbols$G)
+    for (var prop of __getOwnPropSymbols$G(b)) {
+      if (__propIsEnum$G.call(b, prop))
+        __defNormalProp$G(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
 const passthroughProcessor = (_, secondary) => rxjs.of(secondary);
 const extraQueryProcessingOperator = (processors) => (data) => {
   return data.pipe(
@@ -2311,7 +2612,7 @@ const extraQueryProcessingOperator = (processors) => (data) => {
     }),
     rxjs.map(([primary, ...processedSecondaries]) => {
       var _a;
-      return __spreadProps$t(__spreadValues$H({}, primary), {
+      return __spreadProps$s(__spreadValues$G({}, primary), {
         series: [...primary.series, ...processedSecondaries.flatMap((s) => s.series)],
         annotations: [...(_a = primary.annotations) != null ? _a : [], ...processedSecondaries.flatMap((s) => {
           var _a2;
@@ -2322,25 +2623,25 @@ const extraQueryProcessingOperator = (processors) => (data) => {
   );
 };
 
-var __defProp$G = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
-var __hasOwnProp$G = Object.prototype.hasOwnProperty;
-var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$G = (obj, key, value) => key in obj ? __defProp$G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$G = (a, b) => {
+var __defProp$F = Object.defineProperty;
+var __defProps$r = Object.defineProperties;
+var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
+var __hasOwnProp$F = Object.prototype.hasOwnProperty;
+var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$F = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$F = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$G.call(b, prop))
-      __defNormalProp$G(a, prop, b[prop]);
-  if (__getOwnPropSymbols$G)
-    for (var prop of __getOwnPropSymbols$G(b)) {
-      if (__propIsEnum$G.call(b, prop))
-        __defNormalProp$G(a, prop, b[prop]);
+    if (__hasOwnProp$F.call(b, prop))
+      __defNormalProp$F(a, prop, b[prop]);
+  if (__getOwnPropSymbols$F)
+    for (var prop of __getOwnPropSymbols$F(b)) {
+      if (__propIsEnum$F.call(b, prop))
+        __defNormalProp$F(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
 function filterAnnotations(data, filters) {
   var _a;
   if (!Array.isArray(data) || data.length === 0) {
@@ -2391,11 +2692,11 @@ function filterAnnotations(data, filters) {
           continue;
         }
       }
-      fields.push(__spreadProps$s(__spreadValues$G({}, field), {
+      fields.push(__spreadProps$r(__spreadValues$F({}, field), {
         values: buffer
       }));
     }
-    processed.push(__spreadProps$s(__spreadValues$G({}, frame), {
+    processed.push(__spreadProps$r(__spreadValues$F({}, frame), {
       fields,
       length: frameLength
     }));
@@ -2455,41 +2756,6 @@ function findActiveAdHocFilterVariableByUid(dsUid) {
   return void 0;
 }
 
-function registerQueryWithController(entry) {
-  return (queryStream) => {
-    const queryControler = sceneGraph.getQueryController(entry.origin);
-    if (!queryControler) {
-      return queryStream;
-    }
-    return new rxjs.Observable((observer) => {
-      if (!entry.cancel) {
-        entry.cancel = () => observer.complete();
-      }
-      queryControler.queryStarted(entry);
-      let markedAsCompleted = false;
-      const sub = queryStream.subscribe({
-        next: (v) => {
-          if (!markedAsCompleted && v.state !== schema.LoadingState.Loading) {
-            markedAsCompleted = true;
-            queryControler.queryCompleted(entry);
-          }
-          observer.next(v);
-        },
-        error: (e) => observer.error(e),
-        complete: () => {
-          observer.complete();
-        }
-      });
-      return () => {
-        sub.unsubscribe();
-        if (!markedAsCompleted) {
-          queryControler.queryCompleted(entry);
-        }
-      };
-    });
-  };
-}
-
 const allActiveGroupByVariables = /* @__PURE__ */ new Set();
 function findActiveGroupByVariablesByUid(dsUid) {
   var _a;
@@ -2545,33 +2811,33 @@ function getOptionSearcher(options, includeAll) {
   };
 }
 
-var __defProp$F = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
-var __hasOwnProp$F = Object.prototype.hasOwnProperty;
-var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$F = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$F = (a, b) => {
+var __defProp$E = Object.defineProperty;
+var __defProps$q = Object.defineProperties;
+var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
+var __hasOwnProp$E = Object.prototype.hasOwnProperty;
+var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$E = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$E = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$F.call(b, prop))
-      __defNormalProp$F(a, prop, b[prop]);
-  if (__getOwnPropSymbols$F)
-    for (var prop of __getOwnPropSymbols$F(b)) {
-      if (__propIsEnum$F.call(b, prop))
-        __defNormalProp$F(a, prop, b[prop]);
+    if (__hasOwnProp$E.call(b, prop))
+      __defNormalProp$E(a, prop, b[prop]);
+  if (__getOwnPropSymbols$E)
+    for (var prop of __getOwnPropSymbols$E(b)) {
+      if (__propIsEnum$E.call(b, prop))
+        __defNormalProp$E(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
 var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$F.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$E.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$F)
-    for (var prop of __getOwnPropSymbols$F(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$F.call(source, prop))
+  if (source != null && __getOwnPropSymbols$E)
+    for (var prop of __getOwnPropSymbols$E(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$E.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2598,6 +2864,7 @@ function VariableValueSelect({ model }) {
   const [inputValue, setInputValue] = React.useState("");
   const [hasCustomValue, setHasCustomValue] = React.useState(false);
   const selectValue = toSelectableValue$2(value, String(text));
+  const queryController = sceneGraph.getQueryController(model);
   const optionSearcher = React.useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);
   const onInputChange = (value2, { action }) => {
     if (action === "input-change") {
@@ -2637,6 +2904,7 @@ function VariableValueSelect({ model }) {
     "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
     onChange: (newValue) => {
       model.changeValueTo(newValue.value, newValue.label);
+      queryController == null ? void 0 : queryController.startProfile(model);
       if (hasCustomValue !== newValue.__isNew__) {
         setHasCustomValue(newValue.__isNew__);
       }
@@ -2648,6 +2916,7 @@ function VariableValueSelectMulti({ model }) {
   const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
   const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
   const [inputValue, setInputValue] = React.useState("");
+  const queryController = sceneGraph.getQueryController(model);
   const optionSearcher = React.useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);
   React.useEffect(() => {
     setUncommittedValue(arrayValue);
@@ -2693,6 +2962,7 @@ function VariableValueSelectMulti({ model }) {
     onInputChange,
     onBlur: () => {
       model.changeValueTo(uncommittedValue);
+      queryController == null ? void 0 : queryController.startProfile(model);
     },
     filterOption: filterNoOp$2,
     "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
@@ -2719,7 +2989,7 @@ const OptionWithCheckbox = ({
   const theme = ui.useTheme2();
   const selectStyles = ui.getSelectStyles(theme);
   const optionStyles = ui.useStyles2(getOptionStyles);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$r(__spreadValues$F({
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$q(__spreadValues$E({
     ref: innerRef,
     className: css.cx(selectStyles.option, isFocused && selectStyles.optionFocused)
   }, rest), {
@@ -2884,28 +3154,28 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
   return { value: sceneObject, text: "__sceneObject" };
 }
 
-var __defProp$E = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
-var __hasOwnProp$E = Object.prototype.hasOwnProperty;
-var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$E = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$E = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$E.call(b, prop))
-      __defNormalProp$E(a, prop, b[prop]);
-  if (__getOwnPropSymbols$E)
-    for (var prop of __getOwnPropSymbols$E(b)) {
-      if (__propIsEnum$E.call(b, prop))
-        __defNormalProp$E(a, prop, b[prop]);
+var __defProp$D = Object.defineProperty;
+var __defProps$p = Object.defineProperties;
+var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
+var __hasOwnProp$D = Object.prototype.hasOwnProperty;
+var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$D = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$D.call(b, prop))
+      __defNormalProp$D(a, prop, b[prop]);
+  if (__getOwnPropSymbols$D)
+    for (var prop of __getOwnPropSymbols$D(b)) {
+      if (__propIsEnum$D.call(b, prop))
+        __defNormalProp$D(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
+var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadProps$q(__spreadValues$E({
+    super(__spreadProps$p(__spreadValues$D({
       isMulti: true,
       name: "",
       value: [],
@@ -2936,7 +3206,7 @@ class GroupByVariable extends MultiValueVariable {
       const queries = getQueriesForVariables(this);
       const otherFilters = this.state.baseFilters || [];
       const timeRange = sceneGraph.getTimeRange(this).state.value;
-      const response = await ds.getTagKeys(__spreadValues$E({
+      const response = await ds.getTagKeys(__spreadValues$D({
         filters: otherFilters,
         queries,
         timeRange
@@ -3131,7 +3401,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$f);
+  const styles = ui.useStyles2(getStyles$e);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3194,7 +3464,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$f = (theme) => ({
+const getStyles$e = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -3270,19 +3540,19 @@ function getAdhocOptionSearcher(options) {
   };
 }
 
-var __defProp$D = Object.defineProperty;
-var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
-var __hasOwnProp$D = Object.prototype.hasOwnProperty;
-var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$D = (a, b) => {
+var __defProp$C = Object.defineProperty;
+var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
+var __hasOwnProp$C = Object.prototype.hasOwnProperty;
+var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$C = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$C = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$D.call(b, prop))
-      __defNormalProp$D(a, prop, b[prop]);
-  if (__getOwnPropSymbols$D)
-    for (var prop of __getOwnPropSymbols$D(b)) {
-      if (__propIsEnum$D.call(b, prop))
-        __defNormalProp$D(a, prop, b[prop]);
+    if (__hasOwnProp$C.call(b, prop))
+      __defNormalProp$C(a, prop, b[prop]);
+  if (__getOwnPropSymbols$C)
+    for (var prop of __getOwnPropSymbols$C(b)) {
+      if (__propIsEnum$C.call(b, prop))
+        __defNormalProp$C(a, prop, b[prop]);
     }
   return a;
 };
@@ -3295,7 +3565,7 @@ function keyLabelToOption(key, label) {
 const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b, _c;
-  const styles = ui.useStyles2(getStyles$e);
+  const styles = ui.useStyles2(getStyles$d);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -3305,10 +3575,12 @@ function AdHocFilterRenderer({ filter, model }) {
   const [isOperatorOpen, setIsOperatorOpen] = React.useState(false);
   const [valueInputValue, setValueInputValue] = React.useState("");
   const [valueHasCustomValue, setValueHasCustomValue] = React.useState(false);
-  const [uncommittedValue, setUncommittedValue] = React.useState(filter.values ? filter.values.map((value, index) => {
-    var _a2;
-    return keyLabelToOption(value, (_a2 = filter.valueLabels) == null ? void 0 : _a2[index]);
-  }) : []);
+  const [uncommittedValue, setUncommittedValue] = React.useState(
+    filter.values ? filter.values.map((value, index) => {
+      var _a2;
+      return keyLabelToOption(value, (_a2 = filter.valueLabels) == null ? void 0 : _a2[index]);
+    }) : []
+  );
   const isMultiValue = isMultiValueOperator(filter.operator);
   const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
   const valueValue = keyLabelToOption(filter.value, (_a = filter.valueLabels) == null ? void 0 : _a[0]);
@@ -3331,10 +3603,12 @@ function AdHocFilterRenderer({ filter, model }) {
       setUncommittedValue([]);
     } else if (!isMultiValueOperator(existingOperator) && isMultiValueOperator(newOperator) && filter.value) {
       update.values = [filter.value];
-      setUncommittedValue([{
-        value: filter.value,
-        label: (_b2 = (_a2 = filter.valueLabels) == null ? void 0 : _a2[0]) != null ? _b2 : filter.value
-      }]);
+      setUncommittedValue([
+        {
+          value: filter.value,
+          label: (_b2 = (_a2 = filter.valueLabels) == null ? void 0 : _a2[0]) != null ? _b2 : filter.value
+        }
+      ]);
     }
     model._updateFilter(filter, update);
   };
@@ -3366,7 +3640,7 @@ function AdHocFilterRenderer({ filter, model }) {
       });
     }
   };
-  const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, __spreadValues$D({
+  const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, __spreadValues$C({
     virtualized: true,
     allowCustomValue: true,
     isValidNewOption: (inputValue) => inputValue.trim().length > 0,
@@ -3498,7 +3772,7 @@ function AdHocFilterRenderer({ filter, model }) {
     onClick: () => model._removeFilter(filter)
   }));
 }
-const getStyles$e = (theme) => ({
+const getStyles$d = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -3613,10 +3887,7 @@ function deserializeUrlToFilters(value) {
 }
 function toArray(filter) {
   var _a;
-  const result = [
-    toUrlCommaDelimitedString(filter.key, filter.keyLabel),
-    filter.operator
-  ];
+  const result = [toUrlCommaDelimitedString(filter.key, filter.keyLabel), filter.operator];
   if (isMultiValueOperator(filter.operator)) {
     filter.values.forEach((value, index) => {
       var _a2;
@@ -3650,30 +3921,30 @@ function isFilter(filter) {
   return filter !== null && typeof filter.key === "string" && typeof filter.value === "string";
 }
 
-var __defProp$C = Object.defineProperty;
-var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
-var __hasOwnProp$C = Object.prototype.hasOwnProperty;
-var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$C = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$C = (a, b) => {
+var __defProp$B = Object.defineProperty;
+var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
+var __hasOwnProp$B = Object.prototype.hasOwnProperty;
+var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$B = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$B = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$C.call(b, prop))
-      __defNormalProp$C(a, prop, b[prop]);
-  if (__getOwnPropSymbols$C)
-    for (var prop of __getOwnPropSymbols$C(b)) {
-      if (__propIsEnum$C.call(b, prop))
-        __defNormalProp$C(a, prop, b[prop]);
+    if (__hasOwnProp$B.call(b, prop))
+      __defNormalProp$B(a, prop, b[prop]);
+  if (__getOwnPropSymbols$B)
+    for (var prop of __getOwnPropSymbols$B(b)) {
+      if (__propIsEnum$B.call(b, prop))
+        __defNormalProp$B(a, prop, b[prop]);
     }
   return a;
 };
 var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$C.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$B.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$C)
-    for (var prop of __getOwnPropSymbols$C(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$C.call(source, prop))
+  if (source != null && __getOwnPropSymbols$B)
+    for (var prop of __getOwnPropSymbols$B(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$B.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -3681,9 +3952,9 @@ var __objRest$3 = (source, exclude) => {
 const DropdownItem = React.forwardRef(
   function DropdownItem2(_a, ref) {
     var _b = _a, { children, active, addGroupBottomBorder, isMultiValueEdit, checked } = _b, rest = __objRest$3(_b, ["children", "active", "addGroupBottomBorder", "isMultiValueEdit", "checked"]);
-    const styles = ui.useStyles2(getStyles$d);
+    const styles = ui.useStyles2(getStyles$c);
     const id = React.useId();
-    return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$C({
+    return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$B({
       ref,
       role: "option",
       id,
@@ -3699,7 +3970,7 @@ const DropdownItem = React.forwardRef(
     }) : null, children)));
   }
 );
-const getStyles$d = (theme) => ({
+const getStyles$c = (theme) => ({
   option: css.css({
     label: "grafana-select-option",
     top: 0,
@@ -3770,7 +4041,7 @@ const OptionsErrorPlaceholder = ({ handleFetchOptions }) => {
   }, "An error has occurred fetching labels. Click to retry");
 };
 const MultiValueApplyButton = ({ onApply, floatingElement, maxOptionWidth, menuHeight }) => {
-  const styles = ui.useStyles2(getStyles$d);
+  const styles = ui.useStyles2(getStyles$c);
   const floatingElementRect = floatingElement == null ? void 0 : floatingElement.getBoundingClientRect();
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.multiValueApplyWrapper,
@@ -3951,19 +4222,6 @@ const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlways
   }
   return filter[filterInputType] && !isAlwaysWip ? `${filter[filterInputType]}` : INPUT_PLACEHOLDER;
 };
-const populateInputValueOnInputTypeSwitch = ({
-  populateInputOnEdit,
-  item,
-  filterInputType,
-  setInputValue,
-  filter
-}) => {
-  if (populateInputOnEdit && !isMultiValueOperator(item.value || "") && nextInputTypeMap[filterInputType] === "value") {
-    setInputValue((filter == null ? void 0 : filter.value) || "");
-  } else {
-    setInputValue("");
-  }
-};
 
 const MAX_MENU_HEIGHT = 300;
 const useFloatingInteractions = ({
@@ -4029,114 +4287,6 @@ const useFloatingInteractions = ({
   };
 };
 
-var __defProp$B = Object.defineProperty;
-var __defProps$p = Object.defineProperties;
-var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
-var __hasOwnProp$B = Object.prototype.hasOwnProperty;
-var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$B = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$B = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$B.call(b, prop))
-      __defNormalProp$B(a, prop, b[prop]);
-  if (__getOwnPropSymbols$B)
-    for (var prop of __getOwnPropSymbols$B(b)) {
-      if (__propIsEnum$B.call(b, prop))
-        __defNormalProp$B(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
-const MultiValuePill = ({
-  item,
-  handleRemoveMultiValue,
-  index,
-  handleEditMultiValuePill
-}) => {
-  var _a, _b;
-  const styles = ui.useStyles2(getStyles$c);
-  const editMultiValuePill = React.useCallback(
-    (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-      handleEditMultiValuePill(item);
-    },
-    [handleEditMultiValuePill, item]
-  );
-  const editMultiValuePillWithKeyboard = React.useCallback(
-    (e) => {
-      if (e.key === "Enter") {
-        editMultiValuePill(e);
-      }
-    },
-    [editMultiValuePill]
-  );
-  const removePillHandler = React.useCallback(
-    (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-      handleRemoveMultiValue(item);
-    },
-    [handleRemoveMultiValue, item]
-  );
-  const removePillHandlerWithKeyboard = React.useCallback(
-    (e) => {
-      if (e.key === "Enter") {
-        removePillHandler(e);
-      }
-    },
-    [removePillHandler]
-  );
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: css.cx(styles.basePill, styles.valuePill),
-    onClick: editMultiValuePill,
-    onKeyDown: editMultiValuePillWithKeyboard,
-    tabIndex: 0,
-    id: `${item.value}-${index}`
-  }, (_a = item.label) != null ? _a : item.value, /* @__PURE__ */ React__default["default"].createElement(ui.Button, {
-    onClick: removePillHandler,
-    onKeyDownCapture: removePillHandlerWithKeyboard,
-    fill: "text",
-    size: "sm",
-    variant: "secondary",
-    className: styles.removeButton,
-    tooltip: `Remove filter value - ${(_b = item.label) != null ? _b : item.value}`
-  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-    name: "times",
-    size: "md",
-    id: `${item.value}-${index}-close-icon`
-  })));
-};
-const getStyles$c = (theme) => ({
-  basePill: css.css(__spreadProps$p(__spreadValues$B({
-    display: "flex",
-    alignItems: "center",
-    background: theme.colors.action.disabledBackground,
-    border: `1px solid ${theme.colors.border.weak}`,
-    padding: theme.spacing(0.125, 1, 0.125, 1),
-    color: theme.colors.text.primary,
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    minHeight: theme.spacing(2.75)
-  }, theme.typography.bodySmall), {
-    cursor: "pointer"
-  })),
-  valuePill: css.css({
-    background: theme.colors.action.selected,
-    padding: theme.spacing(0.125, 0, 0.125, 1)
-  }),
-  removeButton: css.css({
-    marginInline: theme.spacing(0.5),
-    height: "100%",
-    padding: 0,
-    cursor: "pointer",
-    "&:hover": {
-      color: theme.colors.text.primary
-    }
-  })
-});
-
 var __defProp$A = Object.defineProperty;
 var __defProps$o = Object.defineProperties;
 var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
@@ -4156,7 +4306,7 @@ var __spreadValues$A = (a, b) => {
   return a;
 };
 var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
-const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef, populateInputOnEdit }, parentRef) {
+const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef }, parentRef) {
   var _a, _b, _c;
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState([]);
@@ -4243,13 +4393,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     ]
   );
   const outsidePressIdsToIgnore = React.useMemo(() => {
-    return [
-      operatorIdentifier,
-      ...filterMultiValues.reduce(
-        (acc, item, i) => [...acc, `${item.value}-${i}`, `${item.value}-${i}-close-icon`],
-        []
-      )
-    ];
+    return [operatorIdentifier, ...filterMultiValues.map((item, i) => `${item.value}-${i}`)];
   }, [operatorIdentifier, filterMultiValues]);
   const { refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps } = useFloatingInteractions({
     open,
@@ -4402,7 +4546,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         const selectedItem = filteredDropDownItems[activeIndex];
         if (multiValueEdit) {
           handleLocalMultiValueChange(selectedItem);
-          setInputValue("");
         } else {
           model._updateFilter(
             filter,
@@ -4413,13 +4556,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
               setFilterMultiValues
             })
           );
-          populateInputValueOnInputTypeSwitch({
-            populateInputOnEdit,
-            item: selectedItem,
-            filterInputType,
-            setInputValue,
-            filter
-          });
           switchToNextInputType(
             filterInputType,
             setInputType,
@@ -4432,6 +4568,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
             focusOnWipInputRef == null ? void 0 : focusOnWipInputRef();
           }
         }
+        setInputValue("");
       }
     },
     [
@@ -4441,23 +4578,12 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       model,
       filter,
       filterInputType,
-      populateInputOnEdit,
       handleChangeViewMode,
       refs.domReference,
       isLastFilter,
       focusOnWipInputRef
     ]
   );
-  const handleEditMultiValuePill = React.useCallback(
-    (value) => {
-      var _a2;
-      const valueLabel = value.label || value.value;
-      setFilterMultiValues((prev) => prev.filter((item) => item.value !== value.value));
-      setInputValue(valueLabel);
-      (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
-    },
-    [refs.domReference]
-  );
   React.useEffect(() => {
     if (open) {
       handleFetchOptions(filterInputType);
@@ -4466,6 +4592,8 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   React.useEffect(() => {
     var _a2, _b2;
     if (!isAlwaysWip) {
+      setInputType("value");
+      setInputValue("");
       if (hasMultiValueOperator && ((_a2 = filter == null ? void 0 : filter.values) == null ? void 0 : _a2.length)) {
         const multiValueOptions = filter.values.reduce(
           (acc, value, i) => {
@@ -4482,9 +4610,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         );
         setFilterMultiValues(multiValueOptions);
       }
-      if (!hasMultiValueOperator && populateInputOnEdit) {
-        setInputValue((filter == null ? void 0 : filter.value) || "");
-      }
       (_b2 = refs.domReference.current) == null ? void 0 : _b2.focus();
     }
   }, []);
@@ -4514,13 +4639,11 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     tabIndex: 0,
     onClick: (event) => {
       event.stopPropagation();
-      setInputValue("");
       switchInputType("operator", setInputType, void 0, refs.domReference.current);
     },
     onKeyDown: (event) => {
       handleShiftTabInput(event, hasMultiValueOperator);
       if (event.key === "Enter") {
-        setInputValue("");
         switchInputType("operator", setInputType, void 0, refs.domReference.current);
       }
     }
@@ -4530,8 +4653,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     key: `${item.value}-${i}`,
     item,
     index: i,
-    handleRemoveMultiValue,
-    handleEditMultiValuePill
+    handleRemoveMultiValue
   })) : null) : null, /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$o(__spreadValues$A({}, getReferenceProps({
     ref: refs.setReference,
     onChange,
@@ -4618,7 +4740,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
           event.preventDefault();
           event.stopPropagation();
           handleLocalMultiValueChange(item);
-          setInputValue("");
           (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
         } else {
           model._updateFilter(
@@ -4630,13 +4751,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
               setFilterMultiValues
             })
           );
-          populateInputValueOnInputTypeSwitch({
-            populateInputOnEdit,
-            item,
-            filterInputType,
-            setInputValue,
-            filter
-          });
+          setInputValue("");
           switchToNextInputType(
             filterInputType,
             setInputType,
@@ -4669,6 +4784,35 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     menuHeight: Math.min(rowVirtualizer.getTotalSize(), MAX_MENU_HEIGHT)
   }) : null))));
 });
+const MultiValuePill = ({ item, handleRemoveMultiValue, index }) => {
+  var _a, _b;
+  const styles = ui.useStyles2(getStyles$b);
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: css.cx(styles.basePill, styles.valuePill)
+  }, /* @__PURE__ */ React__default["default"].createElement("span", null, " ", (_a = item.label) != null ? _a : item.value), /* @__PURE__ */ React__default["default"].createElement(ui.Button, {
+    onClick: (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      handleRemoveMultiValue(item);
+    },
+    onKeyDownCapture: (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        handleRemoveMultiValue(item);
+      }
+    },
+    fill: "text",
+    size: "sm",
+    variant: "secondary",
+    className: styles.removeButton,
+    tooltip: `Remove filter value - ${(_b = item.label) != null ? _b : item.value}`
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    name: "times",
+    size: "md",
+    id: `${item.value}-${index}`
+  })));
+};
 const getStyles$b = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
@@ -4701,6 +4845,10 @@ const getStyles$b = (theme) => ({
       background: theme.colors.action.hover
     }
   }),
+  valuePill: css.css({
+    background: theme.colors.action.selected,
+    padding: theme.spacing(0.125, 0, 0.125, 1)
+  }),
   dropdownWrapper: css.css({
     backgroundColor: theme.colors.background.primary,
     color: theme.colors.text.primary,
@@ -4733,10 +4881,25 @@ const getStyles$b = (theme) => ({
       borderTop: `1px solid ${theme.colors.border.weak}`
     }
   }),
+  removeButton: css.css({
+    marginInline: theme.spacing(0.5),
+    height: "100%",
+    padding: 0,
+    cursor: "pointer",
+    "&:hover": {
+      color: theme.colors.text.primary
+    }
+  }),
   descriptionText: css.css(__spreadProps$o(__spreadValues$A({}, theme.typography.bodySmall), {
     color: theme.colors.text.secondary,
     paddingTop: theme.spacing(0.5)
-  }))
+  })),
+  multiValueApply: css.css({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    display: "flex"
+  })
 });
 
 var __defProp$z = Object.defineProperty;
@@ -4764,7 +4927,6 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
   const [viewMode, setViewMode] = React.useState(true);
   const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = React.useState(false);
   const pillWrapperRef = React.useRef(null);
-  const [populateInputOnEdit, setPopulateInputOnEdit] = React.useState(false);
   const keyLabel = (_a = filter.keyLabel) != null ? _a : filter.key;
   const valueLabel = ((_b = filter.valueLabels) == null ? void 0 : _b.join(", ")) || ((_c = filter.values) == null ? void 0 : _c.join(", ")) || filter.value;
   const handleChangeViewMode = React.useCallback(
@@ -4791,25 +4953,15 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
       model._updateFilter(filter, { forceEdit: void 0 });
     }
   }, [filter, model, viewMode]);
-  React.useEffect(() => {
-    if (populateInputOnEdit && viewMode) {
-      setPopulateInputOnEdit(false);
-    }
-  }, [viewMode]);
   if (viewMode) {
     const pillText = /* @__PURE__ */ React__default["default"].createElement("span", {
       className: styles.pillText
     }, keyLabel, " ", filter.operator, " ", valueLabel);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: css.cx(styles.combinedFilterPill, { [styles.readOnlyCombinedFilter]: readOnly }),
-      onClick: (e) => {
-        e.stopPropagation();
-        setPopulateInputOnEdit(true);
-        handleChangeViewMode();
-      },
+      onClick: handleChangeViewMode,
       onKeyDown: (e) => {
         if (e.key === "Enter") {
-          setPopulateInputOnEdit(true);
           handleChangeViewMode();
         }
       },
@@ -4846,8 +4998,7 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
     filter,
     model,
     handleChangeViewMode,
-    focusOnWipInputRef,
-    populateInputOnEdit
+    focusOnWipInputRef
   });
 }
 const getStyles$a = (theme) => ({
@@ -5343,9 +5494,7 @@ class SceneQueryRunner extends SceneObjectBase {
           })
         );
       }
-      this.subscribeToTimeRangeChanges(
-        timeRange
-      );
+      this.subscribeToTimeRangeChanges(timeRange);
       if (this.shouldRunQueriesOnActivate()) {
         this.runQueries();
       }
@@ -6597,30 +6746,6 @@ function findDescendents(scene, descendentType) {
   const targetScenes = findAllObjects(scene, isDescendentType);
   return targetScenes.filter(isDescendentType);
 }
-function getQueryController(sceneObject) {
-  let parent = sceneObject;
-  while (parent) {
-    if (parent.state.$behaviors) {
-      for (const behavior of parent.state.$behaviors) {
-        if (isQueryController(behavior)) {
-          return behavior;
-        }
-      }
-    }
-    parent = parent.parent;
-  }
-  return void 0;
-}
-function getUrlSyncManager(sceneObject) {
-  let parent = sceneObject;
-  while (parent) {
-    if ("urlSyncManager" in parent.state) {
-      return parent.state.urlSyncManager;
-    }
-    parent = parent.parent;
-  }
-  return void 0;
-}
 
 const sceneGraph = {
   getVariables,
@@ -6636,9 +6761,8 @@ const sceneGraph = {
   findObject,
   findAllObjects,
   getAncestor,
-  findDescendents,
   getQueryController,
-  getUrlSyncManager
+  findDescendents
 };
 
 class UniqueUrlKeyMapper {
@@ -7510,7 +7634,13 @@ class VizPanel extends SceneObjectBase {
     } else {
       const { importPanelPlugin } = runtime.getPluginImportUtils();
       try {
-        const result = await importPanelPlugin(pluginId);
+        const panelPromise = importPanelPlugin(pluginId);
+        const queryControler = sceneGraph.getQueryController(this);
+        if (queryControler && queryControler.state.enableProfiling) {
+          wrapPromiseInStateObservable(panelPromise).pipe(registerQueryWithController({ type: "plugin", origin: this })).subscribe(() => {
+          });
+        }
+        const result = await panelPromise;
         this._pluginLoaded(result, overwriteOptions, overwriteFieldConfig, isAfterPluginChange);
       } catch (err) {
         this._pluginLoaded(getPanelPluginNotFound(pluginId));
@@ -7579,11 +7709,7 @@ class VizPanel extends SceneObjectBase {
   }
   async changePluginType(pluginId, newOptions, newFieldConfig) {
     var _a, _b;
-    const {
-      options: prevOptions,
-      fieldConfig: prevFieldConfig,
-      pluginId: prevPluginId
-    } = this.state;
+    const { options: prevOptions, fieldConfig: prevFieldConfig, pluginId: prevPluginId } = this.state;
     this._dataWithFieldConfig = void 0;
     const isAfterPluginChange = this.state.pluginId !== pluginId;
     await this._loadPlugin(pluginId, newOptions != null ? newOptions : {}, newFieldConfig, isAfterPluginChange);
@@ -11057,6 +11183,7 @@ class SceneRefreshPicker extends SceneObjectBase {
     this._autoRefreshBlocked = false;
     this.onRefresh = () => {
       const queryController = sceneGraph.getQueryController(this);
+      queryController == null ? void 0 : queryController.startProfile(this);
       if (queryController == null ? void 0 : queryController.state.isRunning) {
         queryController.cancelAll();
         return;
@@ -11185,7 +11312,9 @@ function SceneRefreshPickerRenderer({ model }) {
     tooltip,
     width,
     text,
-    onRefresh: model.onRefresh,
+    onRefresh: () => {
+      model.onRefresh();
+    },
     primary,
     onIntervalChanged: model.onIntervalChanged,
     isLoading: isRunning,