@grafana/scenes 4.26.3--canary.765.9399849393.0 → 4.27.0--canary.766.9367073867.0

package/dist/index.js

@@ -11,8 +11,8 @@ var uuid = require('uuid');
 var lodash = require('lodash');
 var schema = require('@grafana/schema');
 var ui = require('@grafana/ui');
-var e2eSelectors = require('@grafana/e2e-selectors');
 var css = require('@emotion/css');
+var e2eSelectors = require('@grafana/e2e-selectors');
 var uFuzzy = require('@leeoniya/ufuzzy');
 var reactUse = require('react-use');
 var operators = require('rxjs/operators');
@@ -77,8 +77,8 @@ function renderSceneComponentWithRouteProps(sceneObject, routeProps) {
 }
 
 var __defProp$J = Object.defineProperty;
-var __defProps$t = Object.defineProperties;
-var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
+var __defProps$s = Object.defineProperties;
+var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$J = Object.getOwnPropertySymbols;
 var __hasOwnProp$J = Object.prototype.hasOwnProperty;
 var __propIsEnum$J = Object.prototype.propertyIsEnumerable;
@@ -94,13 +94,13 @@ var __spreadValues$J = (a, b) => {
     }
   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 runtimePanelPlugins = /* @__PURE__ */ new Map();
 function registerRuntimePanelPlugin({ pluginId, plugin }) {
   if (runtimePanelPlugins.has(pluginId)) {
     throw new Error(`A runtime panel plugin with id ${pluginId} has already been registered`);
   }
-  plugin.meta = __spreadProps$t(__spreadValues$J({}, plugin.meta), {
+  plugin.meta = __spreadProps$s(__spreadValues$J({}, plugin.meta), {
     id: pluginId,
     name: pluginId,
     module: "runtime plugin",
@@ -129,8 +129,8 @@ function loadPanelPluginSync(pluginId) {
 }
 
 var __defProp$I = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
+var __defProps$r = Object.defineProperties;
+var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$I = Object.getOwnPropertySymbols;
 var __hasOwnProp$I = Object.prototype.hasOwnProperty;
 var __propIsEnum$I = Object.prototype.propertyIsEnumerable;
@@ -146,7 +146,7 @@ var __spreadValues$I = (a, b) => {
     }
   return a;
 };
-var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
 var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -172,7 +172,7 @@ function SceneComponentWrapperWithoutMemo(_a) {
   if (!model.isActive) {
     return null;
   }
-  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$s(__spreadValues$I({}, otherProps), {
+  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$r(__spreadValues$I({}, otherProps), {
     model
   }));
 }
@@ -586,22 +586,103 @@ function registerRuntimeDataSource({ dataSource }) {
   runtimeDataSources.set(dataSource.uid, dataSource);
 }
 
-function lookupVariable(name, sceneObject) {
-  const variables = sceneObject.state.$variables;
-  if (!variables) {
-    if (sceneObject.parent) {
-      return lookupVariable(name, sceneObject.parent);
-    } else {
-      return null;
+class UniqueUrlKeyMapper {
+  constructor() {
+    this.index = /* @__PURE__ */ new Map();
+  }
+  getUniqueKey(key, obj) {
+    const objectsWithKey = this.index.get(key);
+    if (!objectsWithKey) {
+      throw new Error("Cannot find any scene object that uses the key '" + key + "'");
+    }
+    const address = objectsWithKey.findIndex((o) => o.sceneObject === obj);
+    if (address > 0) {
+      return `${key}-${address + 1}`;
     }
+    return key;
   }
-  const found = variables.getByName(name);
-  if (found) {
-    return found;
-  } else if (sceneObject.parent) {
-    return lookupVariable(name, sceneObject.parent);
+  rebuildIndex(root) {
+    this.index.clear();
+    this.buildIndex(root, 0);
+  }
+  buildIndex(sceneObject, depth) {
+    if (sceneObject.urlSync) {
+      for (const key of sceneObject.urlSync.getKeys()) {
+        const hit = this.index.get(key);
+        if (hit) {
+          hit.push({ sceneObject, depth });
+          hit.sort((a, b) => a.depth - b.depth);
+        } else {
+          this.index.set(key, [{ sceneObject, depth }]);
+        }
+      }
+    }
+    sceneObject.forEachChild((child) => this.buildIndex(child, depth + 1));
   }
-  return null;
+}
+
+function getUrlState(root) {
+  const urlKeyMapper = new UniqueUrlKeyMapper();
+  urlKeyMapper.rebuildIndex(root);
+  const result = {};
+  const visitNode = (obj) => {
+    if (obj.urlSync) {
+      const newUrlState = obj.urlSync.getUrlState();
+      for (const [key, value] of Object.entries(newUrlState)) {
+        if (value != null) {
+          const uniqueKey = urlKeyMapper.getUniqueKey(key, obj);
+          result[uniqueKey] = value;
+        }
+      }
+    }
+    obj.forEachChild(visitNode);
+  };
+  visitNode(root);
+  return result;
+}
+function syncStateFromSearchParams(root, urlParams) {
+  const urlKeyMapper = new UniqueUrlKeyMapper();
+  urlKeyMapper.rebuildIndex(root);
+  syncStateFromUrl(root, urlParams, urlKeyMapper);
+}
+function syncStateFromUrl(sceneObject, urlParams, urlKeyMapper) {
+  if (sceneObject.urlSync) {
+    const urlState = {};
+    const currentState = sceneObject.urlSync.getUrlState();
+    for (const key of sceneObject.urlSync.getKeys()) {
+      const uniqueKey = urlKeyMapper.getUniqueKey(key, sceneObject);
+      const newValue = urlParams.getAll(uniqueKey);
+      const currentValue = currentState[key];
+      if (isUrlValueEqual(newValue, currentValue)) {
+        continue;
+      }
+      if (newValue.length > 0) {
+        if (Array.isArray(currentValue)) {
+          urlState[key] = newValue;
+        } else {
+          urlState[key] = newValue[0];
+        }
+      } else {
+        urlState[key] = null;
+      }
+    }
+    if (Object.keys(urlState).length > 0) {
+      sceneObject.urlSync.updateFromUrl(urlState);
+    }
+  }
+  sceneObject.forEachChild((child) => syncStateFromUrl(child, urlParams, urlKeyMapper));
+}
+function isUrlValueEqual(currentUrlValue, newUrlValue) {
+  if (currentUrlValue.length === 0 && newUrlValue == null) {
+    return true;
+  }
+  if (!Array.isArray(newUrlValue) && (currentUrlValue == null ? void 0 : currentUrlValue.length) === 1) {
+    return newUrlValue === currentUrlValue[0];
+  }
+  if ((newUrlValue == null ? void 0 : newUrlValue.length) === 0 && currentUrlValue === null) {
+    return true;
+  }
+  return lodash.isEqual(currentUrlValue, newUrlValue);
 }
 
 var __defProp$F = Object.defineProperty;
@@ -1233,712 +1314,730 @@ function sqlStringFormatter(value) {
   })}'`;
 }
 
-class SkipFormattingValue {
-  constructor(_value) {
-    this._value = _value;
+function lookupVariable(name, sceneObject) {
+  const variables = sceneObject.state.$variables;
+  if (!variables) {
+    if (sceneObject.parent) {
+      return lookupVariable(name, sceneObject.parent);
+    } else {
+      return null;
+    }
   }
-  formatter() {
-    return this._value;
+  const found = variables.getByName(name);
+  if (found) {
+    return found;
+  } else if (sceneObject.parent) {
+    return lookupVariable(name, sceneObject.parent);
   }
+  return null;
 }
 
-class UrlTimeRangeMacro {
-  constructor(name, sceneObject) {
-    this.state = { name, type: "url_variable" };
-    this._sceneObject = sceneObject;
-  }
-  getValue() {
-    var _a;
-    const timeRange = getTimeRange(this._sceneObject);
-    const urlState = (_a = timeRange.urlSync) == null ? void 0 : _a.getUrlState();
-    return new SkipFormattingValue(data.urlUtil.toUrlParams(urlState));
-  }
-  getValueText() {
-    return "";
+function sceneInterpolator(sceneObject, target, scopedVars, format, interpolations) {
+  if (!target) {
+    return target != null ? target : "";
   }
+  VARIABLE_REGEX.lastIndex = 0;
+  return target.replace(VARIABLE_REGEX, (match, var1, var2, fmt2, var3, fieldPath, fmt3) => {
+    const variableName = var1 || var2 || var3;
+    const fmt = fmt2 || fmt3 || format;
+    const variable = lookupFormatVariable(variableName, match, scopedVars, sceneObject);
+    if (!variable) {
+      if (interpolations) {
+        interpolations.push({ match, variableName, fieldPath, format: fmt, value: match, found: false });
+      }
+      return match;
+    }
+    const value = formatValue(variable, variable.getValue(fieldPath), fmt);
+    if (interpolations) {
+      interpolations.push({ match, variableName, fieldPath, format: fmt, value, found: value !== match });
+    }
+    return value;
+  });
 }
-class TimeFromAndToMacro {
-  constructor(name, sceneObject) {
-    this.state = { name, type: "time_macro" };
-    this._sceneObject = sceneObject;
+function lookupFormatVariable(name, match, scopedVars, sceneObject) {
+  const scopedVar = scopedVars == null ? void 0 : scopedVars[name];
+  if (scopedVar) {
+    return getSceneVariableForScopedVar(name, scopedVar);
   }
-  getValue() {
-    const timeRange = getTimeRange(this._sceneObject);
-    if (this.state.name === "__from") {
-      return timeRange.state.value.from.valueOf();
-    } else {
-      return timeRange.state.value.to.valueOf();
-    }
+  const variable = lookupVariable(name, sceneObject);
+  if (variable) {
+    return variable;
   }
-  getValueText() {
-    const timeRange = getTimeRange(this._sceneObject);
-    if (this.state.name === "__from") {
-      return data.dateTimeFormat(timeRange.state.value.from, { timeZone: timeRange.getTimeZone() });
-    } else {
-      return data.dateTimeFormat(timeRange.state.value.to, { timeZone: timeRange.getTimeZone() });
-    }
+  if (macrosIndex[name]) {
+    return new macrosIndex[name](name, sceneObject, match, scopedVars);
   }
+  return null;
 }
-class TimezoneMacro {
-  constructor(name, sceneObject) {
-    this.state = { name, type: "time_macro" };
-    this._sceneObject = sceneObject;
+function formatValue(variable, value, formatNameOrFn) {
+  if (value === null || value === void 0) {
+    return "";
   }
-  getValue() {
-    const timeRange = getTimeRange(this._sceneObject);
-    const timeZone = timeRange.getTimeZone();
-    if (timeZone === "browser") {
-      return Intl.DateTimeFormat().resolvedOptions().timeZone;
-    }
-    return timeZone;
+  if (isCustomVariableValue(value)) {
+    return value.formatter(formatNameOrFn);
   }
-  getValueText() {
-    return this.getValue();
+  if (!Array.isArray(value) && typeof value === "object") {
+    value = `${value}`;
   }
-}
-class IntervalMacro {
-  constructor(name, sceneObject, match) {
-    this.state = { name, type: "time_macro", match };
-    this._sceneObject = sceneObject;
+  if (typeof formatNameOrFn === "function") {
+    return formatNameOrFn(value, {
+      name: variable.state.name,
+      type: variable.state.type,
+      multi: variable.state.isMulti,
+      includeAll: variable.state.includeAll
+    });
   }
-  getValue() {
-    var _a;
-    const data = getData(this._sceneObject);
-    if (data) {
-      const request = (_a = data.state.data) == null ? void 0 : _a.request;
-      if (!request) {
-        return this.state.match;
-      }
-      if (this.state.name === "__interval_ms") {
-        return request.intervalMs;
-      }
-      return request.interval;
+  let args = [];
+  if (!formatNameOrFn) {
+    formatNameOrFn = schema.VariableFormatID.Glob;
+  } else {
+    args = formatNameOrFn.split(":");
+    if (args.length > 1) {
+      formatNameOrFn = args[0];
+      args = args.slice(1);
+    } else {
+      args = [];
     }
-    return this.state.match;
   }
+  let formatter = formatRegistry.getIfExists(formatNameOrFn);
+  if (!formatter) {
+    console.error(`Variable format ${formatNameOrFn} not found. Using glob format as fallback.`);
+    formatter = formatRegistry.get(schema.VariableFormatID.Glob);
+  }
+  return formatter.formatter(value, args, variable);
 }
 
-class AllVariablesMacro {
-  constructor(name, sceneObject) {
-    this.state = { name, type: "url_variable" };
-    this._sceneObject = sceneObject;
-  }
-  getValue() {
-    const allVars = collectAllVariables(this._sceneObject);
-    const format = formatRegistry.get(schema.VariableFormatID.QueryParam);
-    const params = [];
-    for (const name of Object.keys(allVars)) {
-      const variable = allVars[name];
-      const value = variable.getValue();
-      if (!value) {
-        continue;
-      }
-      if (isCustomVariableValue(value)) {
-        params.push(value.formatter(schema.VariableFormatID.QueryParam));
-      } else {
-        params.push(format.formatter(value, [], variable));
-      }
-    }
-    return new SkipFormattingValue(params.join("&"));
-  }
-  getValueText() {
-    return "";
-  }
+function isSceneObject(obj) {
+  return obj.useState !== void 0;
 }
-function collectAllVariables(sceneObject, record = {}) {
-  if (sceneObject.state.$variables) {
-    for (const variable of sceneObject.state.$variables.state.variables) {
-      if (variable.state.skipUrlSync) {
-        continue;
-      }
-      if (!record[variable.state.name]) {
-        record[variable.state.name] = variable;
-      }
-    }
-  }
-  if (sceneObject.parent) {
-    collectAllVariables(sceneObject.parent, record);
-  }
-  return record;
+function isDataRequestEnricher(obj) {
+  return "enrichDataRequest" in obj;
+}
+function isDataLayer(obj) {
+  return "isDataLayer" in obj;
 }
 
-var __defProp$D = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = 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 __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
 };
-var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
-function getTemplateProxyForField(field, frame, frames) {
-  return new Proxy(
-    {},
-    {
-      get: (obj, key) => {
-        if (key === "name") {
-          return field.name;
-        }
-        if (key === "displayName") {
-          return data.getFieldDisplayName(field, frame, frames);
-        }
-        if (key === "labels" || key === "formattedLabels") {
-          if (!field.labels) {
-            return "";
-          }
-          return __spreadProps$r(__spreadValues$D({}, field.labels), {
-            __values: Object.values(field.labels).sort().join(", "),
-            toString: () => {
-              return data.formatLabels(field.labels, "", true);
-            }
-          });
-        }
-        return void 0;
-      }
-    }
-  );
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (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 ValueMacro {
-  constructor(name, sceneObject, _match, _scopedVars) {
-    this._match = _match;
-    this._scopedVars = _scopedVars;
-    this.state = { name, type: "__value" };
+class SceneQueryController extends SceneObjectBase {
+  constructor() {
+    super({ isRunning: false });
+    this.isQueryController = true;
+    __privateAdd(this, _running, /* @__PURE__ */ new Set());
+    this.addActivationHandler(() => {
+      return () => __privateGet(this, _running).clear();
+    });
   }
-  getValue(fieldPath) {
-    var _a, _b;
-    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
-    if (!dataContext) {
-      return this._match;
-    }
-    const { frame, rowIndex, field, calculatedValue } = dataContext.value;
-    if (calculatedValue) {
-      switch (fieldPath) {
-        case "numeric":
-          return calculatedValue.numeric;
-        case "raw":
-          return calculatedValue.numeric;
-        case "time":
-          return "";
-        case "text":
-        default:
-          return data.formattedValueToString(calculatedValue);
-      }
-    }
-    if (rowIndex == null) {
-      return this._match;
-    }
-    if (fieldPath === "time") {
-      const timeField = frame.fields.find((f) => f.type === data.FieldType.time);
-      return timeField ? timeField.values.get(rowIndex) : void 0;
+  queryStarted(entry) {
+    __privateGet(this, _running).add(entry);
+    this.changeRunningQueryCount(1);
+    if (!this.state.isRunning) {
+      this.setState({ isRunning: true });
     }
-    if (!field) {
-      return this._match;
+  }
+  queryCompleted(entry) {
+    if (!__privateGet(this, _running).has(entry)) {
+      return;
     }
-    const value = field.values.get(rowIndex);
-    if (fieldPath === "raw") {
-      return value;
+    __privateGet(this, _running).delete(entry);
+    this.changeRunningQueryCount(-1);
+    if (__privateGet(this, _running).size === 0) {
+      this.setState({ isRunning: false });
     }
-    const displayProcessor = (_b = field.display) != null ? _b : fallbackDisplayProcessor;
-    const result = displayProcessor(value);
-    switch (fieldPath) {
-      case "numeric":
-        return result.numeric;
-      case "text":
-      default:
-        return data.formattedValueToString(result);
+  }
+  changeRunningQueryCount(dir) {
+    var _a;
+    window.__grafanaRunningQueryCount = ((_a = window.__grafanaRunningQueryCount) != null ? _a : 0) + dir;
+  }
+  cancelAll() {
+    var _a;
+    for (const entry of __privateGet(this, _running).values()) {
+      (_a = entry.cancel) == null ? void 0 : _a.call(entry);
     }
   }
-  getValueText() {
+}
+_running = new WeakMap();
+
+function getVariables(sceneObject) {
+  var _a;
+  return (_a = getClosest(sceneObject, (s) => s.state.$variables)) != null ? _a : EmptyVariableSet;
+}
+function getData(sceneObject) {
+  var _a;
+  return (_a = getClosest(sceneObject, (s) => s.state.$data)) != null ? _a : EmptyDataNode;
+}
+function isSceneLayout(s) {
+  return "isDraggable" in s;
+}
+function getLayout(scene) {
+  const parent = getClosest(scene, (s) => isSceneLayout(s) ? s : void 0);
+  if (parent) {
+    return parent;
+  }
+  return null;
+}
+function interpolate(sceneObject, value, scopedVars, format, interpolations) {
+  if (value === "" || value == null) {
     return "";
   }
+  return sceneInterpolator(sceneObject, value, scopedVars, format, interpolations);
 }
-const fallbackDisplayProcessor = data.getDisplayProcessor();
-class DataMacro {
-  constructor(name, sceneObject, _match, _scopedVars) {
-    this._match = _match;
-    this._scopedVars = _scopedVars;
-    this.state = { name, type: "__data" };
+function hasVariableDependencyInLoadingState(sceneObject) {
+  if (!sceneObject.variableDependency) {
+    return false;
   }
-  getValue(fieldPath) {
-    var _a, _b;
-    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
-    if (!dataContext || !fieldPath) {
-      return this._match;
+  for (const name of sceneObject.variableDependency.getNames()) {
+    const variable = lookupVariable(name, sceneObject);
+    if (!variable) {
+      continue;
     }
-    const { frame, rowIndex } = dataContext.value;
-    if (rowIndex === void 0 || fieldPath === void 0) {
-      return this._match;
+    const set = variable.parent;
+    if (set.isVariableLoadingOrWaitingToUpdate(variable)) {
+      return true;
     }
-    const obj = {
-      name: frame.name,
-      refId: frame.refId,
-      fields: data.getFieldDisplayValuesProxy({ frame, rowIndex })
-    };
-    return (_b = getFieldAccessor(fieldPath)(obj)) != null ? _b : "";
-  }
-  getValueText() {
-    return "";
   }
+  return false;
 }
-class SeriesMacro {
-  constructor(name, sceneObject, _match, _scopedVars) {
-    this._match = _match;
-    this._scopedVars = _scopedVars;
-    this.state = { name, type: "__series" };
+function findObjectInternal(scene, check, alreadySearchedChild, shouldSearchUp) {
+  if (check(scene)) {
+    return scene;
   }
-  getValue(fieldPath) {
-    var _a;
-    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
-    if (!dataContext || !fieldPath) {
-      return this._match;
+  let found = null;
+  scene.forEachChild((child) => {
+    if (child === alreadySearchedChild) {
+      return;
     }
-    if (fieldPath !== "name") {
-      return this._match;
+    let maybe = findObjectInternal(child, check);
+    if (maybe) {
+      found = maybe;
     }
-    const { frame, frameIndex } = dataContext.value;
-    return data.getFrameDisplayName(frame, frameIndex);
+  });
+  if (found) {
+    return found;
   }
-  getValueText() {
-    return "";
+  if (shouldSearchUp && scene.parent) {
+    return findObjectInternal(scene.parent, check, scene, true);
   }
+  return null;
 }
-class FieldMacro {
-  constructor(name, sceneObject, _match, _scopedVars) {
-    this._match = _match;
-    this._scopedVars = _scopedVars;
-    this.state = { name, type: "__field" };
+function findByKey(sceneObject, key) {
+  const found = findObject(sceneObject, (sceneToCheck) => {
+    return sceneToCheck.state.key === key;
+  });
+  if (!found) {
+    throw new Error("Unable to find scene with key " + key);
   }
-  getValue(fieldPath) {
-    var _a, _b;
-    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
-    if (!dataContext || !fieldPath) {
-      return this._match;
-    }
-    if (fieldPath === void 0 || fieldPath === "") {
-      return this._match;
-    }
-    const { frame, field, data } = dataContext.value;
-    const obj = getTemplateProxyForField(field, frame, data);
-    return (_b = getFieldAccessor(fieldPath)(obj)) != null ? _b : "";
+  return found;
+}
+function findByKeyAndType(sceneObject, key, targetType) {
+  const found = findObject(sceneObject, (sceneToCheck) => {
+    return sceneToCheck.state.key === key;
+  });
+  if (!found) {
+    throw new Error("Unable to find scene with key " + key);
   }
-  getValueText() {
-    return "";
+  if (!(found instanceof targetType)) {
+    throw new Error(`Found scene object with key ${key} does not match type ${targetType.name}`);
   }
+  return found;
 }
-
-class UrlMacro {
-  constructor(name, _) {
-    this.state = { name, type: "url_macro" };
-  }
-  getValue(fieldPath) {
-    var _a;
-    const location = runtime.locationService.getLocation();
-    const subUrl = (_a = runtime.config.appSubUrl) != null ? _a : "";
-    switch (fieldPath != null ? fieldPath : "") {
-      case "params":
-        return new UrlStateFormatter(location.search);
-      case "path":
-        return subUrl + location.pathname;
-      case "":
-      default:
-        return subUrl + location.pathname + location.search;
+function findObject(scene, check) {
+  return findObjectInternal(scene, check, void 0, true);
+}
+function findAllObjects(scene, check) {
+  const found = [];
+  scene.forEachChild((child) => {
+    if (check(child)) {
+      found.push(child);
     }
-  }
-  getValueText() {
-    return "";
-  }
+    found.push(...findAllObjects(child, check));
+  });
+  return found;
 }
-class UrlStateFormatter {
-  constructor(_urlQueryParams) {
-    this._urlQueryParams = _urlQueryParams;
-  }
-  formatter(options) {
-    if (!options) {
-      return this._urlQueryParams;
+function getDataLayers(sceneObject, localOnly = false) {
+  let currentLevel = sceneObject;
+  let collected = [];
+  while (currentLevel) {
+    const dataProvider = currentLevel.state.$data;
+    if (!dataProvider) {
+      currentLevel = currentLevel.parent;
+      continue;
     }
-    const params = options.split(":");
-    if (params[0] === "exclude" && params.length > 1) {
-      const allParams = new URLSearchParams(this._urlQueryParams);
-      for (const param of params[1].split(",")) {
-        allParams.delete(param);
+    if (isDataLayer(dataProvider)) {
+      collected = collected.concat(dataProvider);
+    } else {
+      if (dataProvider.state.$data && isDataLayer(dataProvider.state.$data)) {
+        collected = collected.concat(dataProvider.state.$data);
       }
-      return `?${allParams}`;
     }
-    if (params[0] === "include" && params.length > 1) {
-      const allParams = new URLSearchParams(this._urlQueryParams);
-      const includeOnly = params[1].split(",");
-      for (const param of allParams.keys()) {
-        if (!includeOnly.includes(param)) {
-          allParams.delete(param);
+    if (localOnly && collected.length > 0) {
+      break;
+    }
+    currentLevel = currentLevel.parent;
+  }
+  return collected;
+}
+function getAncestor(sceneObject, ancestorType) {
+  let parent = sceneObject;
+  while (parent) {
+    if (parent instanceof ancestorType) {
+      return parent;
+    }
+    parent = parent.parent;
+  }
+  if (!parent) {
+    throw new Error("Unable to find parent of type " + ancestorType.name);
+  }
+  return parent;
+}
+function getQueryController(sceneObject) {
+  let parent = sceneObject;
+  while (parent) {
+    if (parent.state.$behaviors) {
+      for (const behavior of parent.state.$behaviors) {
+        if (isQueryController(behavior)) {
+          return behavior;
         }
       }
-      return `?${allParams}`;
     }
-    return this._urlQueryParams;
+    parent = parent.parent;
   }
+  return void 0;
 }
 
-class UserMacro {
-  constructor(name, _) {
-    this.state = { name, type: "user_macro" };
+class SkipFormattingValue {
+  constructor(_value) {
+    this._value = _value;
   }
-  getValue(fieldPath) {
-    const user = runtime.config.bootData.user;
-    switch (fieldPath) {
-      case "login":
-        return user.login;
-      case "email":
-        return user.email;
-      case "id":
-      default:
-        return String(user.id);
-    }
+  formatter() {
+    return this._value;
+  }
+}
+
+class UrlTimeRangeMacro {
+  constructor(name, sceneObject) {
+    this.state = { name, type: "url_variable" };
+    this._sceneObject = sceneObject;
+  }
+  getValue() {
+    var _a;
+    const timeRange = getTimeRange(this._sceneObject);
+    const urlState = (_a = timeRange.urlSync) == null ? void 0 : _a.getUrlState();
+    return new SkipFormattingValue(data.urlUtil.toUrlParams(urlState));
   }
   getValueText() {
     return "";
   }
 }
-class OrgMacro {
-  constructor(name, _) {
-    this.state = { name, type: "org_macro" };
+class TimeFromAndToMacro {
+  constructor(name, sceneObject) {
+    this.state = { name, type: "time_macro" };
+    this._sceneObject = sceneObject;
   }
-  getValue(fieldPath) {
-    const user = runtime.config.bootData.user;
-    switch (fieldPath) {
-      case "name":
-        return user.orgName;
-      case "id":
-      default:
-        return String(user.orgId);
+  getValue() {
+    const timeRange = getTimeRange(this._sceneObject);
+    if (this.state.name === "__from") {
+      return timeRange.state.value.from.valueOf();
+    } else {
+      return timeRange.state.value.to.valueOf();
     }
   }
   getValueText() {
-    return "";
+    const timeRange = getTimeRange(this._sceneObject);
+    if (this.state.name === "__from") {
+      return data.dateTimeFormat(timeRange.state.value.from, { timeZone: timeRange.getTimeZone() });
+    } else {
+      return data.dateTimeFormat(timeRange.state.value.to, { timeZone: timeRange.getTimeZone() });
+    }
   }
 }
-
-const macrosIndex = {
-  [data.DataLinkBuiltInVars.includeVars]: AllVariablesMacro,
-  [data.DataLinkBuiltInVars.keepTime]: UrlTimeRangeMacro,
-  ["__value"]: ValueMacro,
-  ["__data"]: DataMacro,
-  ["__series"]: SeriesMacro,
-  ["__field"]: FieldMacro,
-  ["__url"]: UrlMacro,
-  ["__from"]: TimeFromAndToMacro,
-  ["__to"]: TimeFromAndToMacro,
-  ["__timezone"]: TimezoneMacro,
-  ["__user"]: UserMacro,
-  ["__org"]: OrgMacro,
-  ["__interval"]: IntervalMacro,
-  ["__interval_ms"]: IntervalMacro
-};
-function registerVariableMacro(name, macro) {
-  if (macrosIndex[name]) {
-    throw new Error(`Macro already registered ${name}`);
+class TimezoneMacro {
+  constructor(name, sceneObject) {
+    this.state = { name, type: "time_macro" };
+    this._sceneObject = sceneObject;
+  }
+  getValue() {
+    const timeRange = getTimeRange(this._sceneObject);
+    const timeZone = timeRange.getTimeZone();
+    if (timeZone === "browser") {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+    return timeZone;
+  }
+  getValueText() {
+    return this.getValue();
   }
-  macrosIndex[name] = macro;
-  return () => {
-    delete macrosIndex[name];
-  };
 }
-
-function sceneInterpolator(sceneObject, target, scopedVars, format, interpolations) {
-  if (!target) {
-    return target != null ? target : "";
+class IntervalMacro {
+  constructor(name, sceneObject, match) {
+    this.state = { name, type: "time_macro", match };
+    this._sceneObject = sceneObject;
   }
-  VARIABLE_REGEX.lastIndex = 0;
-  return target.replace(VARIABLE_REGEX, (match, var1, var2, fmt2, var3, fieldPath, fmt3) => {
-    const variableName = var1 || var2 || var3;
-    const fmt = fmt2 || fmt3 || format;
-    const variable = lookupFormatVariable(variableName, match, scopedVars, sceneObject);
-    if (!variable) {
-      if (interpolations) {
-        interpolations.push({ match, variableName, fieldPath, format: fmt, value: match, found: false });
+  getValue() {
+    var _a;
+    const data = getData(this._sceneObject);
+    if (data) {
+      const request = (_a = data.state.data) == null ? void 0 : _a.request;
+      if (!request) {
+        return this.state.match;
       }
-      return match;
-    }
-    const value = formatValue(sceneObject, variable, variable.getValue(fieldPath), fmt);
-    if (interpolations) {
-      interpolations.push({ match, variableName, fieldPath, format: fmt, value, found: value !== match });
+      if (this.state.name === "__interval_ms") {
+        return request.intervalMs;
+      }
+      return request.interval;
     }
-    return value;
-  });
-}
-function lookupFormatVariable(name, match, scopedVars, sceneObject) {
-  const scopedVar = scopedVars == null ? void 0 : scopedVars[name];
-  if (scopedVar) {
-    return getSceneVariableForScopedVar(name, scopedVar);
-  }
-  const variable = lookupVariable(name, sceneObject);
-  if (variable) {
-    return variable;
-  }
-  if (macrosIndex[name]) {
-    return new macrosIndex[name](name, sceneObject, match, scopedVars);
+    return this.state.match;
   }
-  return null;
 }
-function formatValue(context, variable, value, formatNameOrFn) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  if (isCustomVariableValue(value)) {
-    return sceneInterpolator(context, value.formatter(formatNameOrFn));
+
+class AllVariablesMacro {
+  constructor(name, sceneObject) {
+    this.state = { name, type: "url_variable" };
+    this._sceneObject = sceneObject;
   }
-  if (!Array.isArray(value) && typeof value === "object") {
-    value = `${value}`;
+  getValue() {
+    const allVars = collectAllVariables(this._sceneObject);
+    const format = formatRegistry.get(schema.VariableFormatID.QueryParam);
+    const params = [];
+    for (const name of Object.keys(allVars)) {
+      const variable = allVars[name];
+      const value = variable.getValue();
+      if (!value) {
+        continue;
+      }
+      if (isCustomVariableValue(value)) {
+        params.push(value.formatter(schema.VariableFormatID.QueryParam));
+      } else {
+        params.push(format.formatter(value, [], variable));
+      }
+    }
+    return new SkipFormattingValue(params.join("&"));
   }
-  if (typeof formatNameOrFn === "function") {
-    return formatNameOrFn(value, {
-      name: variable.state.name,
-      type: variable.state.type,
-      multi: variable.state.isMulti,
-      includeAll: variable.state.includeAll
-    });
+  getValueText() {
+    return "";
   }
-  let args = [];
-  if (!formatNameOrFn) {
-    formatNameOrFn = schema.VariableFormatID.Glob;
-  } else {
-    args = formatNameOrFn.split(":");
-    if (args.length > 1) {
-      formatNameOrFn = args[0];
-      args = args.slice(1);
-    } else {
-      args = [];
+}
+function collectAllVariables(sceneObject, record = {}) {
+  if (sceneObject.state.$variables) {
+    for (const variable of sceneObject.state.$variables.state.variables) {
+      if (variable.state.skipUrlSync) {
+        continue;
+      }
+      if (!record[variable.state.name]) {
+        record[variable.state.name] = variable;
+      }
     }
   }
-  let formatter = formatRegistry.getIfExists(formatNameOrFn);
-  if (!formatter) {
-    console.error(`Variable format ${formatNameOrFn} not found. Using glob format as fallback.`);
-    formatter = formatRegistry.get(schema.VariableFormatID.Glob);
+  if (sceneObject.parent) {
+    collectAllVariables(sceneObject.parent, record);
   }
-  return formatter.formatter(value, args, variable);
-}
-
-function isSceneObject(obj) {
-  return obj.useState !== void 0;
-}
-function isDataRequestEnricher(obj) {
-  return "enrichDataRequest" in obj;
-}
-function isDataLayer(obj) {
-  return "isDataLayer" in obj;
+  return record;
 }
 
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (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 __defProp$D = Object.defineProperty;
+var __defProps$q = Object.defineProperties;
+var __getOwnPropDescs$q = 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 _running;
-function isQueryController(s) {
-  return "isQueryController" in s;
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
+function getTemplateProxyForField(field, frame, frames) {
+  return new Proxy(
+    {},
+    {
+      get: (obj, key) => {
+        if (key === "name") {
+          return field.name;
+        }
+        if (key === "displayName") {
+          return data.getFieldDisplayName(field, frame, frames);
+        }
+        if (key === "labels" || key === "formattedLabels") {
+          if (!field.labels) {
+            return "";
+          }
+          return __spreadProps$q(__spreadValues$D({}, field.labels), {
+            __values: Object.values(field.labels).sort().join(", "),
+            toString: () => {
+              return data.formatLabels(field.labels, "", true);
+            }
+          });
+        }
+        return void 0;
+      }
+    }
+  );
 }
-class SceneQueryController extends SceneObjectBase {
-  constructor() {
-    super({ isRunning: false });
-    this.isQueryController = true;
-    __privateAdd(this, _running, /* @__PURE__ */ new Set());
-    this.addActivationHandler(() => {
-      return () => __privateGet(this, _running).clear();
-    });
+
+class ValueMacro {
+  constructor(name, sceneObject, _match, _scopedVars) {
+    this._match = _match;
+    this._scopedVars = _scopedVars;
+    this.state = { name, type: "__value" };
   }
-  queryStarted(entry) {
-    __privateGet(this, _running).add(entry);
-    this.changeRunningQueryCount(1);
-    if (!this.state.isRunning) {
-      this.setState({ isRunning: true });
+  getValue(fieldPath) {
+    var _a, _b;
+    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
+    if (!dataContext) {
+      return this._match;
+    }
+    const { frame, rowIndex, field, calculatedValue } = dataContext.value;
+    if (calculatedValue) {
+      switch (fieldPath) {
+        case "numeric":
+          return calculatedValue.numeric;
+        case "raw":
+          return calculatedValue.numeric;
+        case "time":
+          return "";
+        case "text":
+        default:
+          return data.formattedValueToString(calculatedValue);
+      }
     }
-  }
-  queryCompleted(entry) {
-    if (!__privateGet(this, _running).has(entry)) {
-      return;
+    if (rowIndex == null) {
+      return this._match;
     }
-    __privateGet(this, _running).delete(entry);
-    this.changeRunningQueryCount(-1);
-    if (__privateGet(this, _running).size === 0) {
-      this.setState({ isRunning: false });
+    if (fieldPath === "time") {
+      const timeField = frame.fields.find((f) => f.type === data.FieldType.time);
+      return timeField ? timeField.values.get(rowIndex) : void 0;
     }
-  }
-  changeRunningQueryCount(dir) {
-    var _a;
-    window.__grafanaRunningQueryCount = ((_a = window.__grafanaRunningQueryCount) != null ? _a : 0) + dir;
-  }
-  cancelAll() {
-    var _a;
-    for (const entry of __privateGet(this, _running).values()) {
-      (_a = entry.cancel) == null ? void 0 : _a.call(entry);
+    if (!field) {
+      return this._match;
+    }
+    const value = field.values.get(rowIndex);
+    if (fieldPath === "raw") {
+      return value;
+    }
+    const displayProcessor = (_b = field.display) != null ? _b : fallbackDisplayProcessor;
+    const result = displayProcessor(value);
+    switch (fieldPath) {
+      case "numeric":
+        return result.numeric;
+      case "text":
+      default:
+        return data.formattedValueToString(result);
     }
   }
-}
-_running = new WeakMap();
-
-function getVariables(sceneObject) {
-  var _a;
-  return (_a = getClosest(sceneObject, (s) => s.state.$variables)) != null ? _a : EmptyVariableSet;
-}
-function getData(sceneObject) {
-  var _a;
-  return (_a = getClosest(sceneObject, (s) => s.state.$data)) != null ? _a : EmptyDataNode;
-}
-function isSceneLayout(s) {
-  return "isDraggable" in s;
-}
-function getLayout(scene) {
-  const parent = getClosest(scene, (s) => isSceneLayout(s) ? s : void 0);
-  if (parent) {
-    return parent;
-  }
-  return null;
-}
-function interpolate(sceneObject, value, scopedVars, format, interpolations) {
-  if (value === "" || value == null) {
+  getValueText() {
     return "";
   }
-  return sceneInterpolator(sceneObject, value, scopedVars, format, interpolations);
 }
-function hasVariableDependencyInLoadingState(sceneObject) {
-  if (!sceneObject.variableDependency) {
-    return false;
+const fallbackDisplayProcessor = data.getDisplayProcessor();
+class DataMacro {
+  constructor(name, sceneObject, _match, _scopedVars) {
+    this._match = _match;
+    this._scopedVars = _scopedVars;
+    this.state = { name, type: "__data" };
   }
-  for (const name of sceneObject.variableDependency.getNames()) {
-    const variable = lookupVariable(name, sceneObject);
-    if (!variable) {
-      continue;
+  getValue(fieldPath) {
+    var _a, _b;
+    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
+    if (!dataContext || !fieldPath) {
+      return this._match;
     }
-    const set = variable.parent;
-    if (set.isVariableLoadingOrWaitingToUpdate(variable)) {
-      return true;
+    const { frame, rowIndex } = dataContext.value;
+    if (rowIndex === void 0 || fieldPath === void 0) {
+      return this._match;
     }
+    const obj = {
+      name: frame.name,
+      refId: frame.refId,
+      fields: data.getFieldDisplayValuesProxy({ frame, rowIndex })
+    };
+    return (_b = getFieldAccessor(fieldPath)(obj)) != null ? _b : "";
+  }
+  getValueText() {
+    return "";
   }
-  return false;
 }
-function findObjectInternal(scene, check, alreadySearchedChild, shouldSearchUp) {
-  if (check(scene)) {
-    return scene;
+class SeriesMacro {
+  constructor(name, sceneObject, _match, _scopedVars) {
+    this._match = _match;
+    this._scopedVars = _scopedVars;
+    this.state = { name, type: "__series" };
   }
-  let found = null;
-  scene.forEachChild((child) => {
-    if (child === alreadySearchedChild) {
-      return;
+  getValue(fieldPath) {
+    var _a;
+    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
+    if (!dataContext || !fieldPath) {
+      return this._match;
     }
-    let maybe = findObjectInternal(child, check);
-    if (maybe) {
-      found = maybe;
+    if (fieldPath !== "name") {
+      return this._match;
     }
-  });
-  if (found) {
-    return found;
+    const { frame, frameIndex } = dataContext.value;
+    return data.getFrameDisplayName(frame, frameIndex);
   }
-  if (shouldSearchUp && scene.parent) {
-    return findObjectInternal(scene.parent, check, scene, true);
+  getValueText() {
+    return "";
   }
-  return null;
 }
-function findByKey(sceneObject, key) {
-  const found = findObject(sceneObject, (sceneToCheck) => {
-    return sceneToCheck.state.key === key;
-  });
-  if (!found) {
-    throw new Error("Unable to find scene with key " + key);
+class FieldMacro {
+  constructor(name, sceneObject, _match, _scopedVars) {
+    this._match = _match;
+    this._scopedVars = _scopedVars;
+    this.state = { name, type: "__field" };
   }
-  return found;
-}
-function findByKeyAndType(sceneObject, key, targetType) {
-  const found = findObject(sceneObject, (sceneToCheck) => {
-    return sceneToCheck.state.key === key;
-  });
-  if (!found) {
-    throw new Error("Unable to find scene with key " + key);
+  getValue(fieldPath) {
+    var _a, _b;
+    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
+    if (!dataContext || !fieldPath) {
+      return this._match;
+    }
+    if (fieldPath === void 0 || fieldPath === "") {
+      return this._match;
+    }
+    const { frame, field, data } = dataContext.value;
+    const obj = getTemplateProxyForField(field, frame, data);
+    return (_b = getFieldAccessor(fieldPath)(obj)) != null ? _b : "";
   }
-  if (!(found instanceof targetType)) {
-    throw new Error(`Found scene object with key ${key} does not match type ${targetType.name}`);
+  getValueText() {
+    return "";
   }
-  return found;
 }
-function findObject(scene, check) {
-  return findObjectInternal(scene, check, void 0, true);
-}
-function findAllObjects(scene, check) {
-  const found = [];
-  scene.forEachChild((child) => {
-    if (check(child)) {
-      found.push(child);
+
+class UrlMacro {
+  constructor(name, _) {
+    this.state = { name, type: "url_macro" };
+  }
+  getValue(fieldPath) {
+    var _a;
+    const location = runtime.locationService.getLocation();
+    const subUrl = (_a = runtime.config.appSubUrl) != null ? _a : "";
+    switch (fieldPath != null ? fieldPath : "") {
+      case "params":
+        return new UrlStateFormatter(location.search);
+      case "path":
+        return subUrl + location.pathname;
+      case "":
+      default:
+        return subUrl + location.pathname + location.search;
     }
-    found.push(...findAllObjects(child, check));
-  });
-  return found;
+  }
+  getValueText() {
+    return "";
+  }
 }
-function getDataLayers(sceneObject, localOnly = false) {
-  let currentLevel = sceneObject;
-  let collected = [];
-  while (currentLevel) {
-    const dataProvider = currentLevel.state.$data;
-    if (!dataProvider) {
-      currentLevel = currentLevel.parent;
-      continue;
+class UrlStateFormatter {
+  constructor(_urlQueryParams) {
+    this._urlQueryParams = _urlQueryParams;
+  }
+  formatter(options) {
+    if (!options) {
+      return this._urlQueryParams;
     }
-    if (isDataLayer(dataProvider)) {
-      collected = collected.concat(dataProvider);
-    } else {
-      if (dataProvider.state.$data && isDataLayer(dataProvider.state.$data)) {
-        collected = collected.concat(dataProvider.state.$data);
+    const params = options.split(":");
+    if (params[0] === "exclude" && params.length > 1) {
+      const allParams = new URLSearchParams(this._urlQueryParams);
+      for (const param of params[1].split(",")) {
+        allParams.delete(param);
       }
+      return `?${allParams}`;
     }
-    if (localOnly && collected.length > 0) {
-      break;
+    if (params[0] === "include" && params.length > 1) {
+      const allParams = new URLSearchParams(this._urlQueryParams);
+      const includeOnly = params[1].split(",");
+      for (const param of allParams.keys()) {
+        if (!includeOnly.includes(param)) {
+          allParams.delete(param);
+        }
+      }
+      return `?${allParams}`;
     }
-    currentLevel = currentLevel.parent;
+    return this._urlQueryParams;
   }
-  return collected;
 }
-function getAncestor(sceneObject, ancestorType) {
-  let parent = sceneObject;
-  while (parent) {
-    if (parent instanceof ancestorType) {
-      return parent;
+
+class UserMacro {
+  constructor(name, _) {
+    this.state = { name, type: "user_macro" };
+  }
+  getValue(fieldPath) {
+    const user = runtime.config.bootData.user;
+    switch (fieldPath) {
+      case "login":
+        return user.login;
+      case "email":
+        return user.email;
+      case "id":
+      default:
+        return String(user.id);
     }
-    parent = parent.parent;
   }
-  if (!parent) {
-    throw new Error("Unable to find parent of type " + ancestorType.name);
+  getValueText() {
+    return "";
   }
-  return parent;
 }
-function getQueryController(sceneObject) {
-  let parent = sceneObject;
-  while (parent) {
-    if (parent.state.$behaviors) {
-      for (const behavior of parent.state.$behaviors) {
-        if (isQueryController(behavior)) {
-          return behavior;
-        }
-      }
+class OrgMacro {
+  constructor(name, _) {
+    this.state = { name, type: "org_macro" };
+  }
+  getValue(fieldPath) {
+    const user = runtime.config.bootData.user;
+    switch (fieldPath) {
+      case "name":
+        return user.orgName;
+      case "id":
+      default:
+        return String(user.orgId);
     }
-    parent = parent.parent;
   }
-  return void 0;
+  getValueText() {
+    return "";
+  }
+}
+
+const macrosIndex = {
+  [data.DataLinkBuiltInVars.includeVars]: AllVariablesMacro,
+  [data.DataLinkBuiltInVars.keepTime]: UrlTimeRangeMacro,
+  ["__value"]: ValueMacro,
+  ["__data"]: DataMacro,
+  ["__series"]: SeriesMacro,
+  ["__field"]: FieldMacro,
+  ["__url"]: UrlMacro,
+  ["__from"]: TimeFromAndToMacro,
+  ["__to"]: TimeFromAndToMacro,
+  ["__timezone"]: TimezoneMacro,
+  ["__user"]: UserMacro,
+  ["__org"]: OrgMacro,
+  ["__interval"]: IntervalMacro,
+  ["__interval_ms"]: IntervalMacro
+};
+function registerVariableMacro(name, macro) {
+  if (macrosIndex[name]) {
+    throw new Error(`Macro already registered ${name}`);
+  }
+  macrosIndex[name] = macro;
+  return () => {
+    delete macrosIndex[name];
+  };
 }
 
 const sceneGraph = {
@@ -1958,117 +2057,6 @@ const sceneGraph = {
   getQueryController
 };
 
-class UniqueUrlKeyMapper {
-  constructor() {
-    this.index = /* @__PURE__ */ new Map();
-  }
-  getUniqueKey(key, obj) {
-    const objectsWithKey = this.index.get(key);
-    if (!objectsWithKey) {
-      this.index.set(key, [obj]);
-      return key;
-    }
-    let address = objectsWithKey.findIndex((o) => o === obj);
-    if (address === -1) {
-      filterOutOrphanedObjects(objectsWithKey);
-      objectsWithKey.push(obj);
-      address = objectsWithKey.length - 1;
-    }
-    if (address > 0) {
-      return `${key}-${address + 1}`;
-    }
-    return key;
-  }
-  clear() {
-    this.index.clear();
-  }
-}
-function filterOutOrphanedObjects(sceneObjects) {
-  for (const obj of sceneObjects) {
-    if (isOrphanOrInActive(obj)) {
-      const index = sceneObjects.indexOf(obj);
-      sceneObjects.splice(index, 1);
-    }
-  }
-}
-function isOrphanOrInActive(obj) {
-  const root = obj.getRoot();
-  if (!sceneGraph.findObject(root, (child) => child === obj)) {
-    return true;
-  }
-  return false;
-}
-
-function getUrlState(root) {
-  const urlKeyMapper = new UniqueUrlKeyMapper();
-  const result = {};
-  const visitNode = (obj) => {
-    if (obj.urlSync) {
-      const newUrlState = obj.urlSync.getUrlState();
-      for (const [key, value] of Object.entries(newUrlState)) {
-        if (value != null) {
-          const uniqueKey = urlKeyMapper.getUniqueKey(key, obj);
-          result[uniqueKey] = value;
-        }
-      }
-    }
-    obj.forEachChild(visitNode);
-  };
-  visitNode(root);
-  return result;
-}
-function syncStateFromSearchParams(root, urlParams) {
-  const urlKeyMapper = new UniqueUrlKeyMapper();
-  syncStateFromUrl(root, urlParams, urlKeyMapper);
-}
-function syncStateFromUrl(root, urlParams, urlKeyMapper) {
-  if (!root.parent) {
-    syncUrlStateToObject(root, urlParams, urlKeyMapper);
-  }
-  root.forEachChild((child) => {
-    syncUrlStateToObject(child, urlParams, urlKeyMapper);
-  });
-  root.forEachChild((child) => syncStateFromUrl(child, urlParams, urlKeyMapper));
-}
-function syncUrlStateToObject(sceneObject, urlParams, urlKeyMapper) {
-  if (sceneObject.urlSync) {
-    const urlState = {};
-    const currentState = sceneObject.urlSync.getUrlState();
-    for (const key of sceneObject.urlSync.getKeys()) {
-      const uniqueKey = urlKeyMapper.getUniqueKey(key, sceneObject);
-      const newValue = urlParams.getAll(uniqueKey);
-      const currentValue = currentState[key];
-      if (isUrlValueEqual(newValue, currentValue)) {
-        continue;
-      }
-      if (newValue.length > 0) {
-        if (Array.isArray(currentValue)) {
-          urlState[key] = newValue;
-        } else {
-          urlState[key] = newValue[0];
-        }
-      } else {
-        urlState[key] = null;
-      }
-    }
-    if (Object.keys(urlState).length > 0) {
-      sceneObject.urlSync.updateFromUrl(urlState);
-    }
-  }
-}
-function isUrlValueEqual(currentUrlValue, newUrlValue) {
-  if (currentUrlValue.length === 0 && newUrlValue == null) {
-    return true;
-  }
-  if (!Array.isArray(newUrlValue) && (currentUrlValue == null ? void 0 : currentUrlValue.length) === 1) {
-    return newUrlValue === currentUrlValue[0];
-  }
-  if ((newUrlValue == null ? void 0 : newUrlValue.length) === 0 && currentUrlValue === null) {
-    return true;
-  }
-  return lodash.isEqual(currentUrlValue, newUrlValue);
-}
-
 async function getDataSource(datasource, scopedVars) {
   if (datasource == null ? void 0 : datasource.uid) {
     const runtimeDataSource = runtimeDataSources.get(datasource.uid);
@@ -2083,11 +2071,7 @@ async function getDataSource(datasource, scopedVars) {
 }
 
 function writeSceneLog(logger, message, ...rest) {
-  let loggingEnabled = false;
-  if (typeof window !== "undefined") {
-    loggingEnabled = localStorage.getItem("grafana.debug.scenes") === "true";
-  }
-  if (loggingEnabled) {
+  if (window.grafanaSceneLogging) {
     console.log(`${logger}: `, message, ...rest);
   }
 }
@@ -2267,55 +2251,186 @@ class VariableValueRecorder {
         }
       }
     }
-    return false;
+    return false;
+  }
+}
+
+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$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;
+};
+const PREVIOUS_PERIOD_VALUE = "__previousPeriod";
+const NO_PERIOD_VALUE = "__noPeriod";
+const PREVIOUS_PERIOD_COMPARE_OPTION = {
+  label: "Previous period",
+  value: PREVIOUS_PERIOD_VALUE
+};
+const NO_COMPARE_OPTION = {
+  label: "No comparison",
+  value: NO_PERIOD_VALUE
+};
+const DEFAULT_COMPARE_OPTIONS = [
+  { label: "Day before", value: "24h" },
+  { label: "Week before", value: "1w" },
+  { label: "Month before", value: "1M" }
+];
+class SceneTimeRangeCompare extends SceneObjectBase {
+  constructor(state) {
+    super(__spreadValues$C({ compareOptions: DEFAULT_COMPARE_OPTIONS }, state));
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["compareWith"] });
+    this._onActivate = () => {
+      const sceneTimeRange = sceneGraph.getTimeRange(this);
+      this.setState({ compareOptions: this.getCompareOptions(sceneTimeRange.state.value) });
+      this._subs.add(
+        sceneTimeRange.subscribeToState((timeRange) => {
+          const compareOptions = this.getCompareOptions(timeRange.value);
+          const stateUpdate = { compareOptions };
+          if (Boolean(this.state.compareWith) && !compareOptions.find(({ value }) => value === this.state.compareWith)) {
+            stateUpdate.compareWith = PREVIOUS_PERIOD_VALUE;
+          }
+          this.setState(stateUpdate);
+        })
+      );
+    };
+    this.getCompareOptions = (timeRange) => {
+      const diffDays = Math.ceil(timeRange.to.diff(timeRange.from));
+      const matchIndex = DEFAULT_COMPARE_OPTIONS.findIndex(({ value }) => {
+        const intervalInMs = data.rangeUtil.intervalToMs(value);
+        return intervalInMs >= diffDays;
+      });
+      return [
+        NO_COMPARE_OPTION,
+        PREVIOUS_PERIOD_COMPARE_OPTION,
+        ...DEFAULT_COMPARE_OPTIONS.slice(matchIndex).map(({ label, value }) => ({ label, value }))
+      ];
+    };
+    this.onCompareWithChanged = (compareWith) => {
+      if (compareWith === NO_PERIOD_VALUE) {
+        this.onClearCompare();
+      } else {
+        this.setState({ compareWith });
+      }
+    };
+    this.onClearCompare = () => {
+      this.setState({ compareWith: void 0 });
+    };
+    this.addActivationHandler(this._onActivate);
+  }
+  getCompareTimeRange(timeRange) {
+    let compareFrom;
+    let compareTo;
+    if (this.state.compareWith) {
+      if (this.state.compareWith === PREVIOUS_PERIOD_VALUE) {
+        const diffMs = timeRange.to.diff(timeRange.from);
+        compareFrom = data.dateTime(timeRange.from).subtract(diffMs);
+        compareTo = data.dateTime(timeRange.to).subtract(diffMs);
+      } else {
+        compareFrom = data.dateTime(timeRange.from).subtract(data.rangeUtil.intervalToMs(this.state.compareWith));
+        compareTo = data.dateTime(timeRange.to).subtract(data.rangeUtil.intervalToMs(this.state.compareWith));
+      }
+      return {
+        from: compareFrom,
+        to: compareTo,
+        raw: {
+          from: compareFrom,
+          to: compareTo
+        }
+      };
+    }
+    return void 0;
+  }
+  getUrlState() {
+    return {
+      compareWith: this.state.compareWith
+    };
+  }
+  updateFromUrl(values) {
+    if (!values.compareWith) {
+      return;
+    }
+    const compareWith = parseUrlParam(values.compareWith);
+    if (compareWith) {
+      const compareOptions = this.getCompareOptions(sceneGraph.getTimeRange(this).state.value);
+      if (compareOptions.find(({ value }) => value === compareWith)) {
+        this.setState({
+          compareWith
+        });
+      } else {
+        this.setState({
+          compareWith: "__previousPeriod"
+        });
+      }
+    }
   }
 }
-
-function isExtraQueryProvider(obj) {
-  return typeof obj === "object" && "getExtraQueries" in obj;
-}
-
-var __defProp$C = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
-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$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]);
+SceneTimeRangeCompare.Component = SceneTimeRangeCompareRenderer;
+function SceneTimeRangeCompareRenderer({ model }) {
+  var _a;
+  const styles = ui.useStyles2(getStyles$9);
+  const { compareWith, compareOptions } = model.useState();
+  const [previousCompare, setPreviousCompare] = React__default["default"].useState(compareWith);
+  const previousValue = (_a = compareOptions.find(({ value: value2 }) => value2 === previousCompare)) != null ? _a : PREVIOUS_PERIOD_COMPARE_OPTION;
+  const value = compareOptions.find(({ value: value2 }) => value2 === compareWith);
+  const enabled = Boolean(value);
+  const onClick = () => {
+    if (enabled) {
+      setPreviousCompare(compareWith);
+      model.onClearCompare();
+    } else if (!enabled) {
+      model.onCompareWithChanged(previousValue.value);
     }
-  return a;
-};
-var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
-const passthroughProcessor = (_, secondary) => rxjs.of(secondary);
-const extraQueryProcessingOperator = (processors) => (data) => {
-  return data.pipe(
-    rxjs.mergeMap(([primary, ...secondaries]) => {
-      const processedSecondaries = secondaries.flatMap((s) => {
-        var _a, _b;
-        return (_b = (_a = processors.get(s.request.requestId)) == null ? void 0 : _a(primary, s)) != null ? _b : rxjs.of(s);
-      });
-      return rxjs.forkJoin([rxjs.of(primary), ...processedSecondaries]);
-    }),
-    rxjs.map(([primary, ...processedSecondaries]) => {
-      var _a;
-      return __spreadProps$q(__spreadValues$C({}, primary), {
-        series: [...primary.series, ...processedSecondaries.flatMap((s) => s.series)],
-        annotations: [...(_a = primary.annotations) != null ? _a : [], ...processedSecondaries.flatMap((s) => {
-          var _a2;
-          return (_a2 = s.annotations) != null ? _a2 : [];
-        })]
-      });
+  };
+  return /* @__PURE__ */ React__default["default"].createElement(ui.ButtonGroup, null, /* @__PURE__ */ React__default["default"].createElement(ui.ToolbarButton, {
+    variant: "canvas",
+    tooltip: "Enable time frame comparison",
+    onClick: (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      onClick();
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Checkbox, {
+    label: " ",
+    value: enabled,
+    onClick
+  }), "Comparison"), enabled ? /* @__PURE__ */ React__default["default"].createElement(ui.ButtonSelect, {
+    variant: "canvas",
+    value,
+    options: compareOptions,
+    onChange: (v) => {
+      model.onCompareWithChanged(v.value);
+    }
+  }) : /* @__PURE__ */ React__default["default"].createElement(ui.ToolbarButton, {
+    className: styles.previewButton,
+    disabled: true,
+    variant: "canvas",
+    isOpen: false
+  }, previousValue.label));
+}
+function getStyles$9(theme) {
+  return {
+    previewButton: css.css({
+      "&:disabled": {
+        border: `1px solid ${theme.colors.secondary.border}`,
+        color: theme.colors.text.disabled,
+        opacity: 1
+      }
     })
-  );
-};
+  };
+}
+
+const getCompareSeriesRefId = (refId) => `${refId}-compare`;
 
 var __defProp$B = Object.defineProperty;
 var __defProps$p = Object.defineProperties;
@@ -2336,6 +2451,59 @@ var __spreadValues$B = (a, b) => {
   return a;
 };
 var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+function timeShiftQueryResponseOperator(data$1) {
+  return data$1.pipe(
+    rxjs.map(([p, s]) => {
+      const diff = s.timeRange.from.diff(p.timeRange.from);
+      s.series.forEach((series) => {
+        series.refId = getCompareSeriesRefId(series.refId || "");
+        series.meta = __spreadProps$p(__spreadValues$B({}, series.meta), {
+          timeCompare: {
+            diffMs: diff,
+            isTimeShiftQuery: true
+          }
+        });
+        series.fields.forEach((field) => {
+          if (field.type === data.FieldType.time) {
+            field.values = field.values.map((v) => {
+              return diff < 0 ? v - diff : v + diff;
+            });
+          }
+          field.config = __spreadProps$p(__spreadValues$B({}, field.config), {
+            color: {
+              mode: "fixed",
+              fixedColor: runtime.config.theme.palette.gray60
+            }
+          });
+          return field;
+        });
+      });
+      return __spreadProps$p(__spreadValues$B({}, p), {
+        series: [...p.series, ...s.series]
+      });
+    })
+  );
+}
+
+var __defProp$A = Object.defineProperty;
+var __defProps$o = Object.defineProperties;
+var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
+var __hasOwnProp$A = Object.prototype.hasOwnProperty;
+var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$A = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$A.call(b, prop))
+      __defNormalProp$A(a, prop, b[prop]);
+  if (__getOwnPropSymbols$A)
+    for (var prop of __getOwnPropSymbols$A(b)) {
+      if (__propIsEnum$A.call(b, prop))
+        __defNormalProp$A(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
 function filterAnnotations(data, filters) {
   var _a;
   if (!Array.isArray(data) || data.length === 0) {
@@ -2386,11 +2554,11 @@ function filterAnnotations(data, filters) {
           continue;
         }
       }
-      fields.push(__spreadProps$p(__spreadValues$B({}, field), {
+      fields.push(__spreadProps$o(__spreadValues$A({}, field), {
         values: buffer
       }));
     }
-    processed.push(__spreadProps$p(__spreadValues$B({}, frame), {
+    processed.push(__spreadProps$o(__spreadValues$A({}, frame), {
       fields,
       length: frameLength
     }));
@@ -2822,33 +2990,33 @@ function getOptionSearcher(options, includeAll, value, text) {
   };
 }
 
-var __defProp$A = Object.defineProperty;
-var __defProps$o = Object.defineProperties;
-var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
-var __hasOwnProp$A = Object.prototype.hasOwnProperty;
-var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$A = (a, b) => {
+var __defProp$z = Object.defineProperty;
+var __defProps$n = Object.defineProperties;
+var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
+var __hasOwnProp$z = Object.prototype.hasOwnProperty;
+var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$z = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$A.call(b, prop))
-      __defNormalProp$A(a, prop, b[prop]);
-  if (__getOwnPropSymbols$A)
-    for (var prop of __getOwnPropSymbols$A(b)) {
-      if (__propIsEnum$A.call(b, prop))
-        __defNormalProp$A(a, prop, b[prop]);
+    if (__hasOwnProp$z.call(b, prop))
+      __defNormalProp$z(a, prop, b[prop]);
+  if (__getOwnPropSymbols$z)
+    for (var prop of __getOwnPropSymbols$z(b)) {
+      if (__propIsEnum$z.call(b, prop))
+        __defNormalProp$z(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
+var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
 var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$A.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$z.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$A)
-    for (var prop of __getOwnPropSymbols$A(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$A.call(source, prop))
+  if (source != null && __getOwnPropSymbols$z)
+    for (var prop of __getOwnPropSymbols$z(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$z.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2975,7 +3143,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$o(__spreadValues$A({
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$n(__spreadValues$z({
     ref: innerRef,
     className: css.cx(selectStyles.option, isFocused && selectStyles.optionFocused)
   }, rest), {
@@ -3069,28 +3237,28 @@ function fromUrlValues(urlValues) {
   );
 }
 
-var __defProp$z = Object.defineProperty;
-var __defProps$n = Object.defineProperties;
-var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
-var __hasOwnProp$z = Object.prototype.hasOwnProperty;
-var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$z = (a, b) => {
+var __defProp$y = Object.defineProperty;
+var __defProps$m = Object.defineProperties;
+var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
+var __hasOwnProp$y = Object.prototype.hasOwnProperty;
+var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$y = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$z.call(b, prop))
-      __defNormalProp$z(a, prop, b[prop]);
-  if (__getOwnPropSymbols$z)
-    for (var prop of __getOwnPropSymbols$z(b)) {
-      if (__propIsEnum$z.call(b, prop))
-        __defNormalProp$z(a, prop, b[prop]);
+    if (__hasOwnProp$y.call(b, prop))
+      __defNormalProp$y(a, prop, b[prop]);
+  if (__getOwnPropSymbols$y)
+    for (var prop of __getOwnPropSymbols$y(b)) {
+      if (__propIsEnum$y.call(b, prop))
+        __defNormalProp$y(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
+var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadProps$n(__spreadValues$z({
+    super(__spreadProps$m(__spreadValues$y({
       isMulti: true,
       name: "",
       value: [],
@@ -3289,7 +3457,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$9);
+  const styles = ui.useStyles2(getStyles$8);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3352,7 +3520,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$9 = (theme) => ({
+const getStyles$8 = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -3387,6 +3555,13 @@ const getStyles$9 = (theme) => ({
   })
 });
 
+function selectableValueToVariableValueOption(value) {
+  var _a;
+  return {
+    label: (_a = value.label) != null ? _a : String(value.value),
+    value: value.value
+  };
+}
 function keyLabelToOption(key, label) {
   return key !== "" ? {
     value: key,
@@ -3395,16 +3570,33 @@ function keyLabelToOption(key, label) {
 }
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b;
-  const styles = ui.useStyles2(getStyles$8);
+  const styles = ui.useStyles2(getStyles$7);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
   const [isValuesLoading, setIsValuesLoading] = React.useState(false);
   const [isKeysOpen, setIsKeysOpen] = React.useState(false);
   const [isValuesOpen, setIsValuesOpen] = React.useState(false);
+  const [valueInputValue, setValueInputValue] = React.useState("");
+  const [valueHasCustomValue, setValueHasCustomValue] = React.useState(false);
   const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
   const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
+  const optionSearcher = React.useMemo(
+    () => {
+      var _a2, _b2;
+      return getOptionSearcher(values.map(selectableValueToVariableValueOption), void 0, (_a2 = valueValue == null ? void 0 : valueValue.value) != null ? _a2 : "", (_b2 = valueValue == null ? void 0 : valueValue.label) != null ? _b2 : "");
+    },
+    [values, valueValue == null ? void 0 : valueValue.value, valueValue == null ? void 0 : valueValue.label]
+  );
+  const onValueInputChange = (value, { action }) => {
+    if (action === "input-change") {
+      setValueInputValue(value);
+    }
+    return value;
+  };
+  const filteredValueOptions = optionSearcher(valueInputValue);
   const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
+    virtualized: true,
     allowCustomValue: true,
     isValidNewOption: (inputValue) => inputValue.trim().length > 0,
     allowCreateWhileLoading: true,
@@ -3414,21 +3606,33 @@ function AdHocFilterRenderer({ filter, model }) {
     width: "auto",
     value: valueValue,
     placeholder: "Select value",
-    options: values,
-    onChange: (v) => model._updateFilter(filter, "value", v),
+    options: filteredValueOptions,
+    inputValue: valueInputValue,
+    onInputChange: onValueInputChange,
+    onChange: (v) => {
+      model._updateFilter(filter, "value", v);
+      if (valueHasCustomValue !== v.__isNew__) {
+        setValueHasCustomValue(v.__isNew__);
+      }
+    },
     isOpen: isValuesOpen && !isValuesLoading,
     isLoading: isValuesLoading,
     autoFocus: filter.key !== "" && filter.value === "",
     openMenuOnFocus: true,
     onOpenMenu: async () => {
+      var _a2;
       setIsValuesLoading(true);
       setIsValuesOpen(true);
       const values2 = await model._getValuesFor(filter);
       setIsValuesLoading(false);
       setValues(values2);
+      if (valueHasCustomValue) {
+        setValueInputValue((_a2 = valueValue == null ? void 0 : valueValue.label) != null ? _a2 : "");
+      }
     },
     onCloseMenu: () => {
       setIsValuesOpen(false);
+      setValueInputValue("");
     }
   });
   const keySelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
@@ -3500,7 +3704,7 @@ function AdHocFilterRenderer({ filter, model }) {
     onClick: () => model._removeFilter(filter)
   }));
 }
-const getStyles$8 = (theme) => ({
+const getStyles$7 = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -3638,29 +3842,29 @@ function isFilter(filter) {
   return filter !== null && typeof filter.key === "string" && typeof filter.value === "string";
 }
 
-var __defProp$y = Object.defineProperty;
-var __defProps$m = Object.defineProperties;
-var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
-var __hasOwnProp$y = Object.prototype.hasOwnProperty;
-var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$y = (a, b) => {
+var __defProp$x = Object.defineProperty;
+var __defProps$l = Object.defineProperties;
+var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
+var __hasOwnProp$x = Object.prototype.hasOwnProperty;
+var __propIsEnum$x = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$x = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$x = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$y.call(b, prop))
-      __defNormalProp$y(a, prop, b[prop]);
-  if (__getOwnPropSymbols$y)
-    for (var prop of __getOwnPropSymbols$y(b)) {
-      if (__propIsEnum$y.call(b, prop))
-        __defNormalProp$y(a, prop, b[prop]);
+    if (__hasOwnProp$x.call(b, prop))
+      __defNormalProp$x(a, prop, b[prop]);
+  if (__getOwnPropSymbols$x)
+    for (var prop of __getOwnPropSymbols$x(b)) {
+      if (__propIsEnum$x.call(b, prop))
+        __defNormalProp$x(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
+var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
 class AdHocFiltersVariable extends SceneObjectBase {
   constructor(state) {
     var _a, _b;
-    super(__spreadValues$y({
+    super(__spreadValues$x({
       type: "adhoc",
       name: (_a = state.name) != null ? _a : "Filters",
       filters: [],
@@ -3697,15 +3901,15 @@ class AdHocFiltersVariable extends SceneObjectBase {
     const propLabelKey = `${prop}Label`;
     if (filter === _wip) {
       if (prop === "value") {
-        this.setState({ filters: [...filters, __spreadProps$m(__spreadValues$y({}, _wip), { [prop]: value, [propLabelKey]: label })], _wip: void 0 });
+        this.setState({ filters: [...filters, __spreadProps$l(__spreadValues$x({}, _wip), { [prop]: value, [propLabelKey]: label })], _wip: void 0 });
       } else {
-        this.setState({ _wip: __spreadProps$m(__spreadValues$y({}, filter), { [prop]: value, [propLabelKey]: label }) });
+        this.setState({ _wip: __spreadProps$l(__spreadValues$x({}, filter), { [prop]: value, [propLabelKey]: label }) });
       }
       return;
     }
     const updatedFilters = this.state.filters.map((f) => {
       if (f === filter) {
-        const updatedFilter = __spreadProps$m(__spreadValues$y({}, f), { [prop]: value, [propLabelKey]: label });
+        const updatedFilter = __spreadProps$l(__spreadValues$x({}, f), { [prop]: value, [propLabelKey]: label });
         if (prop === "key" && filter[prop] !== value) {
           updatedFilter.value = "";
           updatedFilter.valueLabel = "";
@@ -3786,7 +3990,7 @@ function renderExpression(builder, filters) {
 }
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
-  const styles = ui.useStyles2(getStyles$7);
+  const styles = ui.useStyles2(getStyles$6);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.wrapper
   }, filters.map((filter, index) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, {
@@ -3800,7 +4004,7 @@ function AdHocFiltersVariableRenderer({ model }) {
     addFilterButtonText
   }));
 }
-const getStyles$7 = (theme) => ({
+const getStyles$6 = (theme) => ({
   wrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -3884,25 +4088,25 @@ function areDifferentLayers(a, b) {
   return false;
 }
 
-var __defProp$x = Object.defineProperty;
-var __defProps$l = Object.defineProperties;
-var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
-var __hasOwnProp$x = Object.prototype.hasOwnProperty;
-var __propIsEnum$x = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$x = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$x = (a, b) => {
+var __defProp$w = Object.defineProperty;
+var __defProps$k = Object.defineProperties;
+var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$w = Object.getOwnPropertySymbols;
+var __hasOwnProp$w = Object.prototype.hasOwnProperty;
+var __propIsEnum$w = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$w = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$w = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$x.call(b, prop))
-      __defNormalProp$x(a, prop, b[prop]);
-  if (__getOwnPropSymbols$x)
-    for (var prop of __getOwnPropSymbols$x(b)) {
-      if (__propIsEnum$x.call(b, prop))
-        __defNormalProp$x(a, prop, b[prop]);
+    if (__hasOwnProp$w.call(b, prop))
+      __defNormalProp$w(a, prop, b[prop]);
+  if (__getOwnPropSymbols$w)
+    for (var prop of __getOwnPropSymbols$w(b)) {
+      if (__propIsEnum$w.call(b, prop))
+        __defNormalProp$w(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
+var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
 let counter$1 = 100;
 function getNextRequestId$1() {
   return "SQR" + counter$1++;
@@ -3919,6 +4123,70 @@ class SceneQueryRunner extends SceneObjectBase {
       onVariableUpdateCompleted: this.onVariableUpdatesCompleted.bind(this),
       onAnyVariableChanged: this.onAnyVariableChanged.bind(this)
     });
+    this.prepareRequests = (timeRange, ds) => {
+      const comparer = this.getTimeCompare();
+      const { minInterval, queries } = this.state;
+      let secondaryRequest;
+      let request = __spreadValues$w({
+        app: "scenes",
+        requestId: getNextRequestId$1(),
+        timezone: timeRange.getTimeZone(),
+        panelId: 1,
+        range: timeRange.state.value,
+        interval: "1s",
+        intervalMs: 1e3,
+        targets: lodash.cloneDeep(queries),
+        maxDataPoints: this.getMaxDataPoints(),
+        scopedVars: this._scopedVars,
+        startTime: Date.now(),
+        liveStreaming: this.state.liveStreaming,
+        rangeRaw: {
+          from: timeRange.state.from,
+          to: timeRange.state.to
+        },
+        cacheTimeout: this.state.cacheTimeout,
+        queryCachingTTL: this.state.queryCachingTTL
+      }, getEnrichedDataRequest(this));
+      if (this._adhocFiltersVar) {
+        request.filters = this._adhocFiltersVar.state.filters.filter(isFilterComplete);
+      }
+      if (this._groupByVar) {
+        request.groupByKeys = this._groupByVar.state.value;
+      }
+      request.targets = request.targets.map((query) => {
+        var _a;
+        if (!query.datasource || query.datasource.uid !== ds.uid && !((_a = ds.meta) == null ? void 0 : _a.mixed) && runtime.isExpressionReference && !runtime.isExpressionReference(query.datasource)) {
+          query.datasource = ds.getRef();
+        }
+        return query;
+      });
+      const lowerIntervalLimit = minInterval ? minInterval : ds.interval;
+      const norm = data.rangeUtil.calculateInterval(timeRange.state.value, request.maxDataPoints, lowerIntervalLimit);
+      request.scopedVars = Object.assign({}, request.scopedVars, {
+        __interval: { text: norm.interval, value: norm.interval },
+        __interval_ms: { text: norm.intervalMs.toString(), value: norm.intervalMs }
+      });
+      request.interval = norm.interval;
+      request.intervalMs = norm.intervalMs;
+      const primaryTimeRange = timeRange.state.value;
+      if (comparer) {
+        const secondaryTimeRange = comparer.getCompareTimeRange(primaryTimeRange);
+        if (secondaryTimeRange) {
+          const secondaryTargets = request.targets.filter((query) => query.timeRangeCompare !== false);
+          if (secondaryTargets.length) {
+            secondaryRequest = __spreadProps$k(__spreadValues$w({}, request), {
+              targets: secondaryTargets,
+              range: secondaryTimeRange,
+              requestId: getNextRequestId$1()
+            });
+          }
+          request = __spreadProps$k(__spreadValues$w({}, request), {
+            range: primaryTimeRange
+          });
+        }
+      }
+      return [request, secondaryRequest];
+    };
     this.onDataReceived = (data$1) => {
       const preProcessedData = data.preProcessPanelData(data$1, this.state.data);
       this._resultAnnotations = data$1.annotations;
@@ -3937,11 +4205,11 @@ class SceneQueryRunner extends SceneObjectBase {
   }
   _onActivate() {
     const timeRange = sceneGraph.getTimeRange(this);
-    const providers = this.getClosestExtraQueryProviders();
-    for (const provider of providers) {
+    const comparer = this.getTimeCompare();
+    if (comparer) {
       this._subs.add(
-        provider.subscribeToState((n, p) => {
-          if (provider.shouldRerun(p, n)) {
+        comparer.subscribeToState((n, p) => {
+          if (n.compareWith !== p.compareWith) {
             this.runQueries();
           }
         })
@@ -4000,9 +4268,9 @@ class SceneQueryRunner extends SceneObjectBase {
       return;
     }
     this._layerAnnotations = annotations;
-    const baseStateUpdate = this.state.data ? this.state.data : __spreadProps$l(__spreadValues$x({}, emptyPanelData), { timeRange: timeRange.state.value });
+    const baseStateUpdate = this.state.data ? this.state.data : __spreadProps$k(__spreadValues$w({}, emptyPanelData), { timeRange: timeRange.state.value });
     this.setState({
-      data: __spreadProps$l(__spreadValues$x({}, baseStateUpdate), {
+      data: __spreadProps$k(__spreadValues$w({}, baseStateUpdate), {
         annotations: [...(_d = this._resultAnnotations) != null ? _d : [], ...annotations],
         alertState: alertState != null ? alertState : (_e = this.state.data) == null ? void 0 : _e.alertState
       })
@@ -4121,7 +4389,7 @@ class SceneQueryRunner extends SceneObjectBase {
       this._dataLayersSub = void 0;
     }
     this.setState({
-      data: __spreadProps$l(__spreadValues$x({}, this.state.data), { state: schema.LoadingState.Done })
+      data: __spreadProps$k(__spreadValues$w({}, this.state.data), { state: schema.LoadingState.Done })
     });
   }
   async runWithTimeRange(timeRange) {
@@ -4135,7 +4403,6 @@ class SceneQueryRunner extends SceneObjectBase {
     (_a = this._querySub) == null ? void 0 : _a.unsubscribe();
     if (this._variableDependency.hasDependencyInLoadingState()) {
       writeSceneLog("SceneQueryRunner", "Variable dependency is in loading state, skipping query execution");
-      this.setState({ data: __spreadProps$l(__spreadValues$x({}, this.state.data), { state: schema.LoadingState.Loading }) });
       return;
     }
     const { queries } = this.state;
@@ -4148,18 +4415,16 @@ class SceneQueryRunner extends SceneObjectBase {
       const ds = await getDataSource(datasource, this._scopedVars);
       this.findAndSubscribeToAdHocFilters(datasource == null ? void 0 : datasource.uid);
       const runRequest = runtime.getRunRequest();
-      const { primary, secondaries, processors } = this.prepareRequests(timeRange, ds);
+      const [request, secondaryRequest] = this.prepareRequests(timeRange, ds);
       writeSceneLog("SceneQueryRunner", "Starting runRequest", this.state.key);
-      let stream = runRequest(ds, primary);
-      if (secondaries.length > 0) {
-        const secondaryStreams = secondaries.map((r) => runRequest(ds, r));
-        const op = extraQueryProcessingOperator(processors);
-        stream = rxjs.forkJoin([stream, ...secondaryStreams]).pipe(op);
+      let stream = runRequest(ds, request);
+      if (secondaryRequest) {
+        stream = rxjs.forkJoin([stream, runRequest(ds, secondaryRequest)]).pipe(timeShiftQueryResponseOperator);
       }
       stream = stream.pipe(
         registerQueryWithController({
           type: "data",
-          request: primary,
+          request,
           origin: this,
           cancel: () => this.cancelQuery()
         })
@@ -4167,7 +4432,7 @@ class SceneQueryRunner extends SceneObjectBase {
       this._querySub = stream.subscribe(this.onDataReceived);
     } catch (err) {
       console.error("PanelQueryRunner Error", err);
-      this.onDataReceived(__spreadProps$l(__spreadValues$x(__spreadValues$x({}, emptyPanelData), this.state.data), {
+      this.onDataReceived(__spreadProps$k(__spreadValues$w(__spreadValues$w({}, emptyPanelData), this.state.data), {
         state: schema.LoadingState.Error,
         errors: [runtime.toDataQueryError(err)]
       }));
@@ -4177,73 +4442,16 @@ class SceneQueryRunner extends SceneObjectBase {
     var _a;
     const clone = super.clone(withState);
     if (this._resultAnnotations) {
-      clone["_resultAnnotations"] = this._resultAnnotations.map((frame) => __spreadValues$x({}, frame));
+      clone["_resultAnnotations"] = this._resultAnnotations.map((frame) => __spreadValues$w({}, frame));
     }
     if (this._layerAnnotations) {
-      clone["_layerAnnotations"] = this._layerAnnotations.map((frame) => __spreadValues$x({}, frame));
+      clone["_layerAnnotations"] = this._layerAnnotations.map((frame) => __spreadValues$w({}, frame));
     }
     clone["_variableValueRecorder"] = this._variableValueRecorder.cloneAndRecordCurrentValuesForSceneObject(this);
     clone["_containerWidth"] = this._containerWidth;
     clone["_results"].next({ origin: this, data: (_a = this.state.data) != null ? _a : emptyPanelData });
     return clone;
   }
-  prepareRequests(timeRange, ds) {
-    var _a;
-    const { minInterval, queries } = this.state;
-    let request = __spreadValues$x({
-      app: "scenes",
-      requestId: getNextRequestId$1(),
-      timezone: timeRange.getTimeZone(),
-      panelId: 1,
-      range: timeRange.state.value,
-      interval: "1s",
-      intervalMs: 1e3,
-      targets: lodash.cloneDeep(queries),
-      maxDataPoints: this.getMaxDataPoints(),
-      scopedVars: this._scopedVars,
-      startTime: Date.now(),
-      liveStreaming: this.state.liveStreaming,
-      rangeRaw: {
-        from: timeRange.state.from,
-        to: timeRange.state.to
-      },
-      cacheTimeout: this.state.cacheTimeout,
-      queryCachingTTL: this.state.queryCachingTTL
-    }, getEnrichedDataRequest(this));
-    if (this._adhocFiltersVar) {
-      request.filters = this._adhocFiltersVar.state.filters.filter(isFilterComplete);
-    }
-    if (this._groupByVar) {
-      request.groupByKeys = this._groupByVar.state.value;
-    }
-    request.targets = request.targets.map((query) => {
-      var _a2;
-      if (!query.datasource || query.datasource.uid !== ds.uid && !((_a2 = ds.meta) == null ? void 0 : _a2.mixed) && runtime.isExpressionReference && !runtime.isExpressionReference(query.datasource)) {
-        query.datasource = ds.getRef();
-      }
-      return query;
-    });
-    const lowerIntervalLimit = minInterval ? minInterval : ds.interval;
-    const norm = data.rangeUtil.calculateInterval(timeRange.state.value, request.maxDataPoints, lowerIntervalLimit);
-    request.scopedVars = Object.assign({}, request.scopedVars, {
-      __interval: { text: norm.interval, value: norm.interval },
-      __interval_ms: { text: norm.intervalMs.toString(), value: norm.intervalMs }
-    });
-    request.interval = norm.interval;
-    request.intervalMs = norm.intervalMs;
-    const primaryTimeRange = timeRange.state.value;
-    let secondaryRequests = [];
-    let secondaryProcessors = /* @__PURE__ */ new Map();
-    for (const provider of (_a = this.getClosestExtraQueryProviders()) != null ? _a : []) {
-      for (const { req, processor } of provider.getExtraQueries(request)) {
-        const requestId = getNextRequestId$1();
-        secondaryRequests.push(__spreadProps$l(__spreadValues$x({}, req), { requestId }));
-        secondaryProcessors.set(requestId, processor != null ? processor : passthroughProcessor);
-      }
-    }
-    request.range = primaryTimeRange;
-    return { primary: request, secondaries: secondaryRequests, processors: secondaryProcessors };
-  }
   _combineDataLayers(data) {
     if (this._layerAnnotations && this._layerAnnotations.length > 0) {
       data.annotations = (data.annotations || []).concat(this._layerAnnotations);
@@ -4258,23 +4466,22 @@ class SceneQueryRunner extends SceneObjectBase {
       this.setState({ data: emptyPanelData });
     }
   }
-  getClosestExtraQueryProviders() {
-    const found = /* @__PURE__ */ new Map();
+  getTimeCompare() {
     if (!this.parent) {
-      return [];
+      return null;
     }
-    getClosest(this.parent, (s) => {
-      if (isExtraQueryProvider(s) && !found.has(s.constructor)) {
-        found.set(s.constructor, s);
+    return getClosest(this.parent, (s) => {
+      let found = null;
+      if (s instanceof SceneTimeRangeCompare) {
+        return s;
       }
       s.forEachChild((child) => {
-        if (isExtraQueryProvider(child) && !found.has(child.constructor)) {
-          found.set(child.constructor, child);
+        if (child instanceof SceneTimeRangeCompare) {
+          found = child;
         }
       });
-      return null;
+      return found;
     });
-    return Array.from(found.values());
   }
   findAndSubscribeToAdHocFilters(uid) {
     const filtersVar = findActiveAdHocFilterVariableByUid(uid);
@@ -4473,28 +4680,28 @@ class ActWhenVariableChanged extends SceneObjectBase {
   }
 }
 
-var __defProp$w = Object.defineProperty;
-var __defProps$k = Object.defineProperties;
-var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$w = Object.getOwnPropertySymbols;
-var __hasOwnProp$w = Object.prototype.hasOwnProperty;
-var __propIsEnum$w = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$w = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$w = (a, b) => {
+var __defProp$v = Object.defineProperty;
+var __defProps$j = Object.defineProperties;
+var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
+var __hasOwnProp$v = Object.prototype.hasOwnProperty;
+var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$v = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$v = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$w.call(b, prop))
-      __defNormalProp$w(a, prop, b[prop]);
-  if (__getOwnPropSymbols$w)
-    for (var prop of __getOwnPropSymbols$w(b)) {
-      if (__propIsEnum$w.call(b, prop))
-        __defNormalProp$w(a, prop, b[prop]);
+    if (__hasOwnProp$v.call(b, prop))
+      __defNormalProp$v(a, prop, b[prop]);
+  if (__getOwnPropSymbols$v)
+    for (var prop of __getOwnPropSymbols$v(b)) {
+      if (__propIsEnum$v.call(b, prop))
+        __defNormalProp$v(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
 class CursorSync extends SceneObjectBase {
   constructor(state) {
-    super(__spreadProps$k(__spreadValues$w({}, state), {
+    super(__spreadProps$j(__spreadValues$v({}, state), {
       sync: state.sync || schema.DashboardCursorSync.Off
     }));
     this.getEventsBus = (panel) => {
@@ -4758,25 +4965,25 @@ const getAlertStateStyles = (theme) => {
   };
 };
 
-var __defProp$v = Object.defineProperty;
-var __defProps$j = Object.defineProperties;
-var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
-var __hasOwnProp$v = Object.prototype.hasOwnProperty;
-var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$v = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$v = (a, b) => {
+var __defProp$u = Object.defineProperty;
+var __defProps$i = Object.defineProperties;
+var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
+var __hasOwnProp$u = Object.prototype.hasOwnProperty;
+var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$u = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$v.call(b, prop))
-      __defNormalProp$v(a, prop, b[prop]);
-  if (__getOwnPropSymbols$v)
-    for (var prop of __getOwnPropSymbols$v(b)) {
-      if (__propIsEnum$v.call(b, prop))
-        __defNormalProp$v(a, prop, b[prop]);
+    if (__hasOwnProp$u.call(b, prop))
+      __defNormalProp$u(a, prop, b[prop]);
+  if (__getOwnPropSymbols$u)
+    for (var prop of __getOwnPropSymbols$u(b)) {
+      if (__propIsEnum$u.call(b, prop))
+        __defNormalProp$u(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
 const displayOverrideRef = "hideSeriesFrom";
 const isHideSeriesOverride = data.isSystemOverrideWithRef(displayOverrideRef);
 function seriesVisibilityConfigFactory(label, mode, fieldConfig, data) {
@@ -4786,13 +4993,13 @@ function seriesVisibilityConfigFactory(label, mode, fieldConfig, data) {
   if (currentIndex < 0) {
     if (mode === ui.SeriesVisibilityChangeMode.ToggleSelection) {
       const override3 = createOverride$1([displayName, ...getNamesOfHiddenFields(overrides, data)]);
-      return __spreadProps$j(__spreadValues$v({}, fieldConfig), {
+      return __spreadProps$i(__spreadValues$u({}, fieldConfig), {
         overrides: [...fieldConfig.overrides, override3]
       });
     }
     const displayNames = getDisplayNames(data, displayName);
     const override2 = createOverride$1(displayNames);
-    return __spreadProps$j(__spreadValues$v({}, fieldConfig), {
+    return __spreadProps$i(__spreadValues$u({}, fieldConfig), {
       overrides: [...fieldConfig.overrides, override2]
     });
   }
@@ -4805,22 +5012,22 @@ function seriesVisibilityConfigFactory(label, mode, fieldConfig, data) {
       existing = existing.filter((el) => nameOfHiddenFields.indexOf(el) < 0);
     }
     if (existing[0] === displayName && existing.length === 1) {
-      return __spreadProps$j(__spreadValues$v({}, fieldConfig), {
+      return __spreadProps$i(__spreadValues$u({}, fieldConfig), {
         overrides: overridesCopy
       });
     }
     const override2 = createOverride$1([displayName, ...nameOfHiddenFields]);
-    return __spreadProps$j(__spreadValues$v({}, fieldConfig), {
+    return __spreadProps$i(__spreadValues$u({}, fieldConfig), {
       overrides: [...overridesCopy, override2]
     });
   }
   const override = createExtendedOverride(current, displayName);
   if (allFieldsAreExcluded(override, data)) {
-    return __spreadProps$j(__spreadValues$v({}, fieldConfig), {
+    return __spreadProps$i(__spreadValues$u({}, fieldConfig), {
       overrides: overridesCopy
     });
   }
-  return __spreadProps$j(__spreadValues$v({}, fieldConfig), {
+  return __spreadProps$i(__spreadValues$u({}, fieldConfig), {
     overrides: [...overridesCopy, override]
   });
 }
@@ -4845,7 +5052,7 @@ function createOverride$1(names, mode = data.ByNamesMatcherMode.exclude, propert
       }
     },
     properties: [
-      __spreadProps$j(__spreadValues$v({}, property), {
+      __spreadProps$i(__spreadValues$u({}, property), {
         value: {
           viz: true,
           legend: false,
@@ -4917,32 +5124,32 @@ const getNamesOfHiddenFields = (overrides, data$1) => {
   return names;
 };
 
-var __defProp$u = Object.defineProperty;
-var __defProps$i = Object.defineProperties;
-var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
-var __hasOwnProp$u = Object.prototype.hasOwnProperty;
-var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$u = (a, b) => {
+var __defProp$t = Object.defineProperty;
+var __defProps$h = Object.defineProperties;
+var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
+var __hasOwnProp$t = Object.prototype.hasOwnProperty;
+var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$t = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$u.call(b, prop))
-      __defNormalProp$u(a, prop, b[prop]);
-  if (__getOwnPropSymbols$u)
-    for (var prop of __getOwnPropSymbols$u(b)) {
-      if (__propIsEnum$u.call(b, prop))
-        __defNormalProp$u(a, prop, b[prop]);
+    if (__hasOwnProp$t.call(b, prop))
+      __defNormalProp$t(a, prop, b[prop]);
+  if (__getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(b)) {
+      if (__propIsEnum$t.call(b, prop))
+        __defNormalProp$t(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
 const changeSeriesColorConfigFactory = (label, color, fieldConfig) => {
   const { overrides } = fieldConfig;
   const currentIndex = fieldConfig.overrides.findIndex((override) => {
     return override.matcher.id === data.FieldMatcherID.byName && override.matcher.options === label;
   });
   if (currentIndex < 0) {
-    return __spreadProps$i(__spreadValues$u({}, fieldConfig), {
+    return __spreadProps$h(__spreadValues$t({}, fieldConfig), {
       overrides: [...fieldConfig.overrides, createOverride(label, color)]
     });
   }
@@ -4950,19 +5157,19 @@ const changeSeriesColorConfigFactory = (label, color, fieldConfig) => {
   const existing = overridesCopy[currentIndex];
   const propertyIndex = existing.properties.findIndex((p) => p.id === "color");
   if (propertyIndex < 0) {
-    overridesCopy[currentIndex] = __spreadProps$i(__spreadValues$u({}, existing), {
+    overridesCopy[currentIndex] = __spreadProps$h(__spreadValues$t({}, existing), {
       properties: [...existing.properties, createProperty(color)]
     });
-    return __spreadProps$i(__spreadValues$u({}, fieldConfig), {
+    return __spreadProps$h(__spreadValues$t({}, fieldConfig), {
       overrides: overridesCopy
     });
   }
   const propertiesCopy = Array.from(existing.properties);
   propertiesCopy[propertyIndex] = createProperty(color);
-  overridesCopy[currentIndex] = __spreadProps$i(__spreadValues$u({}, existing), {
+  overridesCopy[currentIndex] = __spreadProps$h(__spreadValues$t({}, existing), {
     properties: propertiesCopy
   });
-  return __spreadProps$i(__spreadValues$u({}, fieldConfig), {
+  return __spreadProps$h(__spreadValues$t({}, fieldConfig), {
     overrides: overridesCopy
   });
 };
@@ -4985,29 +5192,29 @@ const createProperty = (color) => {
   };
 };
 
-var __defProp$t = Object.defineProperty;
-var __defProps$h = Object.defineProperties;
-var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
-var __hasOwnProp$t = Object.prototype.hasOwnProperty;
-var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$t = (a, b) => {
+var __defProp$s = Object.defineProperty;
+var __defProps$g = Object.defineProperties;
+var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
+var __hasOwnProp$s = Object.prototype.hasOwnProperty;
+var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$s = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$t.call(b, prop))
-      __defNormalProp$t(a, prop, b[prop]);
-  if (__getOwnPropSymbols$t)
-    for (var prop of __getOwnPropSymbols$t(b)) {
-      if (__propIsEnum$t.call(b, prop))
-        __defNormalProp$t(a, prop, b[prop]);
+    if (__hasOwnProp$s.call(b, prop))
+      __defNormalProp$s(a, prop, b[prop]);
+  if (__getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(b)) {
+      if (__propIsEnum$s.call(b, prop))
+        __defNormalProp$s(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
 class VizPanel extends SceneObjectBase {
   constructor(state) {
     var _a;
-    super(__spreadValues$t({
+    super(__spreadValues$s({
       options: {},
       fieldConfig: { defaults: {}, overrides: [] },
       title: "Title",
@@ -5120,7 +5327,7 @@ class VizPanel extends SceneObjectBase {
     };
     this._onInstanceStateChange = (state) => {
       if (this._panelContext) {
-        this._panelContext = __spreadProps$h(__spreadValues$t({}, this._panelContext), {
+        this._panelContext = __spreadProps$g(__spreadValues$s({}, this._panelContext), {
           instanceState: state
         });
       }
@@ -5144,8 +5351,8 @@ class VizPanel extends SceneObjectBase {
         sortBy = sortKey;
       }
       this.onOptionsChange(
-        __spreadProps$h(__spreadValues$t({}, this.state.options), {
-          legend: __spreadProps$h(__spreadValues$t({}, legendOptions), { sortBy, sortDesc })
+        __spreadProps$g(__spreadValues$s({}, this.state.options), {
+          legend: __spreadProps$g(__spreadValues$s({}, legendOptions), { sortBy, sortDesc })
         }),
         true
       );
@@ -5229,9 +5436,6 @@ class VizPanel extends SceneObjectBase {
     (_a = this._panelContext) != null ? _a : this._panelContext = this.buildPanelContext();
     return this._panelContext;
   }
-  clearFieldConfigCache() {
-    this._dataWithFieldConfig = void 0;
-  }
   applyFieldConfig(rawData) {
     var _a, _b, _c, _d;
     const plugin = this._plugin;
@@ -5255,7 +5459,7 @@ class VizPanel extends SceneObjectBase {
     if (!data.compareArrayValues(newFrames, prevFrames, data.compareDataFrameStructures)) {
       this._structureRev++;
     }
-    this._dataWithFieldConfig = __spreadProps$h(__spreadValues$t({}, rawData), {
+    this._dataWithFieldConfig = __spreadProps$g(__spreadValues$s({}, rawData), {
       structureRev: this._structureRev,
       series: newFrames
     });
@@ -5398,25 +5602,25 @@ function getMessageFromError(err) {
   return JSON.stringify(err);
 }
 
-var __defProp$s = Object.defineProperty;
-var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
-var __hasOwnProp$s = Object.prototype.hasOwnProperty;
-var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$s = (a, b) => {
+var __defProp$r = Object.defineProperty;
+var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
+var __hasOwnProp$r = Object.prototype.hasOwnProperty;
+var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$r = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$s.call(b, prop))
-      __defNormalProp$s(a, prop, b[prop]);
-  if (__getOwnPropSymbols$s)
-    for (var prop of __getOwnPropSymbols$s(b)) {
-      if (__propIsEnum$s.call(b, prop))
-        __defNormalProp$s(a, prop, b[prop]);
+    if (__hasOwnProp$r.call(b, prop))
+      __defNormalProp$r(a, prop, b[prop]);
+  if (__getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(b)) {
+      if (__propIsEnum$r.call(b, prop))
+        __defNormalProp$r(a, prop, b[prop]);
     }
   return a;
 };
 class SceneDataLayerBase extends SceneObjectBase {
   constructor(initialState, variableDependencyStatePaths = []) {
-    super(__spreadValues$s({
+    super(__spreadValues$r({
       isEnabled: true
     }, initialState));
     this._results = new rxjs.ReplaySubject(1);
@@ -5538,33 +5742,33 @@ function DataLayerControlSwitch({ layer }) {
 }
 const containerStyle$1 = css.css({ display: "flex" });
 
-var __defProp$r = Object.defineProperty;
-var __defProps$g = Object.defineProperties;
-var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
-var __hasOwnProp$r = Object.prototype.hasOwnProperty;
-var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$r = (a, b) => {
+var __defProp$q = Object.defineProperty;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
+var __hasOwnProp$q = Object.prototype.hasOwnProperty;
+var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$q = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$r.call(b, prop))
-      __defNormalProp$r(a, prop, b[prop]);
-  if (__getOwnPropSymbols$r)
-    for (var prop of __getOwnPropSymbols$r(b)) {
-      if (__propIsEnum$r.call(b, prop))
-        __defNormalProp$r(a, prop, b[prop]);
+    if (__hasOwnProp$q.call(b, prop))
+      __defNormalProp$q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b)) {
+      if (__propIsEnum$q.call(b, prop))
+        __defNormalProp$q(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
 var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$r.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$r)
-    for (var prop of __getOwnPropSymbols$r(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$r.call(source, prop))
+  if (source != null && __getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5573,7 +5777,7 @@ const standardAnnotationSupport = {
   prepareAnnotation: (json) => {
     if (lodash.isString(json == null ? void 0 : json.query)) {
       const _a = json, { query } = _a, rest = __objRest$2(_a, ["query"]);
-      return __spreadProps$g(__spreadValues$r({}, rest), {
+      return __spreadProps$f(__spreadValues$q({}, rest), {
         target: {
           refId: "annotation_query",
           query
@@ -5741,25 +5945,25 @@ function shouldUseLegacyRunner(datasource) {
   return !datasource.annotations || legacyRunner.includes(type);
 }
 
-var __defProp$q = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
-var __hasOwnProp$q = Object.prototype.hasOwnProperty;
-var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$q = (a, b) => {
+var __defProp$p = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
+var __hasOwnProp$p = Object.prototype.hasOwnProperty;
+var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$p = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$q.call(b, prop))
-      __defNormalProp$q(a, prop, b[prop]);
-  if (__getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(b)) {
-      if (__propIsEnum$q.call(b, prop))
-        __defNormalProp$q(a, prop, b[prop]);
+    if (__hasOwnProp$p.call(b, prop))
+      __defNormalProp$p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
+        __defNormalProp$p(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
 let counter = 100;
 function getNextRequestId() {
   return "AQ" + counter++;
@@ -5782,8 +5986,8 @@ function executeAnnotationQuery(datasource, timeRange, query, layer) {
       }))
     );
   }
-  const processor = __spreadValues$q(__spreadValues$q({}, standardAnnotationSupport), datasource.annotations);
-  const annotationWithDefaults = __spreadValues$q(__spreadValues$q({}, (_a = processor.getDefaultQuery) == null ? void 0 : _a.call(processor)), query);
+  const processor = __spreadValues$p(__spreadValues$p({}, standardAnnotationSupport), datasource.annotations);
+  const annotationWithDefaults = __spreadValues$p(__spreadValues$p({}, (_a = processor.getDefaultQuery) == null ? void 0 : _a.call(processor)), query);
   const annotation = processor.prepareAnnotation(annotationWithDefaults);
   if (!annotation) {
     return rxjs.of({
@@ -5806,7 +6010,7 @@ function executeAnnotationQuery(datasource, timeRange, query, layer) {
     __annotation: { text: annotation.name, value: annotation },
     __sceneObject: { text: "__sceneObject", value: layer }
   };
-  const queryRequest = __spreadValues$q(__spreadProps$f(__spreadValues$q({
+  const queryRequest = __spreadValues$p(__spreadProps$e(__spreadValues$p({
     startTime: Date.now(),
     requestId: getNextRequestId(),
     range: timeRange.state.value,
@@ -5816,7 +6020,7 @@ function executeAnnotationQuery(datasource, timeRange, query, layer) {
     app: data.CoreApp.Dashboard,
     timezone: timeRange.getTimeZone(),
     targets: [
-      __spreadProps$f(__spreadValues$q({}, processedQuery), {
+      __spreadProps$e(__spreadValues$p({}, processedQuery), {
         refId: "Anno"
       })
     ]
@@ -5834,7 +6038,7 @@ function executeAnnotationQuery(datasource, timeRange, query, layer) {
       data$1.forEach((frame) => {
         var _a2;
         if (!((_a2 = frame.meta) == null ? void 0 : _a2.dataTopic)) {
-          frame.meta = __spreadProps$f(__spreadValues$q({}, frame.meta || {}), { dataTopic: data.DataTopic.Annotations });
+          frame.meta = __spreadProps$e(__spreadValues$p({}, frame.meta || {}), { dataTopic: data.DataTopic.Annotations });
         }
       });
       return processor.processEvents(annotation, data$1).pipe(
@@ -5849,19 +6053,19 @@ function executeAnnotationQuery(datasource, timeRange, query, layer) {
   );
 }
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
-var __hasOwnProp$p = Object.prototype.hasOwnProperty;
-var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$p = (a, b) => {
+var __defProp$o = Object.defineProperty;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$o = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$p.call(b, prop))
-      __defNormalProp$p(a, prop, b[prop]);
-  if (__getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(b)) {
-      if (__propIsEnum$p.call(b, prop))
-        __defNormalProp$p(a, prop, b[prop]);
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
 };
@@ -5872,7 +6076,7 @@ function postProcessQueryResult(annotation, results) {
   }
   const processed = results.map((item) => {
     var _a;
-    const processedItem = __spreadValues$p({}, item);
+    const processedItem = __spreadValues$o({}, item);
     processedItem.source = annotation;
     processedItem.color = runtime.config.theme2.visualization.getColorByName(annotation.iconColor);
     processedItem.type = annotation.name;
@@ -5921,29 +6125,29 @@ function isPanelAlert(event) {
   return event.eventType === "panel-alert";
 }
 
-var __defProp$o = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
-var __hasOwnProp$o = Object.prototype.hasOwnProperty;
-var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$o = (a, b) => {
+var __defProp$n = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$o.call(b, prop))
-      __defNormalProp$o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(b)) {
-      if (__propIsEnum$o.call(b, prop))
-        __defNormalProp$o(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 class AnnotationsDataLayer extends SceneDataLayerBase {
   constructor(initialState) {
     super(
-      __spreadValues$o({
+      __spreadValues$n({
         isEnabled: true
       }, initialState),
       ["query"]
@@ -5991,7 +6195,7 @@ class AnnotationsDataLayer extends SceneDataLayerBase {
         this.publishResults(stateUpdate);
       });
     } catch (e) {
-      this.publishResults(__spreadProps$e(__spreadValues$o({}, emptyPanelData), {
+      this.publishResults(__spreadProps$d(__spreadValues$n({}, emptyPanelData), {
         state: schema.LoadingState.Error,
         errors: [
           {
@@ -6008,9 +6212,9 @@ class AnnotationsDataLayer extends SceneDataLayerBase {
   processEvents(query, events) {
     let processedEvents = postProcessQueryResult(query, events.events || []);
     processedEvents = dedupAnnotations(processedEvents);
-    const stateUpdate = __spreadProps$e(__spreadValues$o({}, emptyPanelData), { state: events.state });
+    const stateUpdate = __spreadProps$d(__spreadValues$n({}, emptyPanelData), { state: events.state });
     const df = data.arrayToDataFrame(processedEvents);
-    df.meta = __spreadProps$e(__spreadValues$o({}, df.meta), {
+    df.meta = __spreadProps$d(__spreadValues$n({}, df.meta), {
       dataTopic: data.DataTopic.Annotations
     });
     stateUpdate.series = [df];
@@ -6063,28 +6267,28 @@ class SceneTimeRangeTransformerBase extends SceneObjectBase {
   }
 }
 
-var __defProp$n = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$n = (a, b) => {
+var __defProp$m = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$n.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 class SceneTimeZoneOverride extends SceneTimeRangeTransformerBase {
   constructor(state) {
-    super(__spreadProps$d(__spreadValues$n({}, state), {
+    super(__spreadProps$c(__spreadValues$m({}, state), {
       timeZone: state.timeZone,
       from: "now-6h",
       to: "now",
@@ -6092,7 +6296,7 @@ class SceneTimeZoneOverride extends SceneTimeRangeTransformerBase {
     }));
   }
   ancestorTimeRangeChanged(timeRange) {
-    this.setState(__spreadProps$d(__spreadValues$n({}, timeRange), {
+    this.setState(__spreadProps$c(__spreadValues$m({}, timeRange), {
       timeZone: this.state.timeZone,
       value: evaluateTimeRange(
         timeRange.from,
@@ -6120,25 +6324,25 @@ class SceneTimeZoneOverride extends SceneTimeRangeTransformerBase {
   }
 }
 
-var __defProp$m = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
-var __hasOwnProp$m = Object.prototype.hasOwnProperty;
-var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$m = (a, b) => {
+var __defProp$l = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$l = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$m.call(b, prop))
-      __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$m(a, prop, b[prop]);
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
 class SceneDataLayerSetBase extends SceneObjectBase {
   constructor() {
     super(...arguments);
@@ -6162,7 +6366,7 @@ class SceneDataLayerSetBase extends SceneObjectBase {
         series = series.concat(result.data.series);
       }
     }
-    const combinedData = __spreadProps$c(__spreadValues$m({}, emptyPanelData), { series });
+    const combinedData = __spreadProps$b(__spreadValues$l({}, emptyPanelData), { series });
     this._results.next({ origin: this, data: combinedData });
     this.setStateHelper({ data: combinedData });
   }
@@ -6211,25 +6415,25 @@ SceneDataLayerSet.Component = ({ model }) => {
   })));
 };
 
-var __defProp$l = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (a, b) => {
+var __defProp$k = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
+    if (__hasOwnProp$k.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 class SceneDataTransformer extends SceneObjectBase {
   constructor(state) {
     super(state);
@@ -6306,7 +6510,7 @@ class SceneDataTransformer extends SceneObjectBase {
     const { series, annotations } = this._prevDataFromSource;
     if (data.series === series && data.annotations === annotations) {
       if (this.state.data && data.state !== this.state.data.state) {
-        this.setState({ data: __spreadProps$b(__spreadValues$l({}, this.state.data), { state: data.state }) });
+        this.setState({ data: __spreadProps$a(__spreadValues$k({}, this.state.data), { state: data.state }) });
       }
       return true;
     }
@@ -6354,7 +6558,7 @@ class SceneDataTransformer extends SceneObjectBase {
       rxjs.map((values) => {
         const transformedSeries = values[0];
         const transformedAnnotations = values[1];
-        return __spreadProps$b(__spreadValues$l({}, data$1), {
+        return __spreadProps$a(__spreadValues$k({}, data$1), {
           series: transformedSeries,
           annotations: transformedAnnotations != null ? transformedAnnotations : data$1.annotations
         });
@@ -6365,7 +6569,7 @@ class SceneDataTransformer extends SceneObjectBase {
         const sourceErr = ((_a2 = this.getSourceData().state.data) == null ? void 0 : _a2.errors) || [];
         const transformationError = runtime.toDataQueryError(err);
         transformationError.message = `Error transforming data: ${transformationError.message}`;
-        const result = __spreadProps$b(__spreadValues$l({}, data$1), {
+        const result = __spreadProps$a(__spreadValues$k({}, data$1), {
           state: data.LoadingState.Error,
           errors: [...sourceErr, transformationError]
         });
@@ -6698,28 +6902,28 @@ class SceneVariableSetVariableDependencyHandler {
   }
 }
 
-var __defProp$k = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$k = (a, b) => {
+var __defProp$j = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+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$k.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    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;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 class ConstantVariable extends SceneObjectBase {
   constructor(initialState) {
-    super(__spreadProps$a(__spreadValues$k({
+    super(__spreadProps$9(__spreadValues$j({
       type: "constant",
       value: "",
       name: ""
@@ -6732,25 +6936,25 @@ class ConstantVariable extends SceneObjectBase {
   }
 }
 
-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;
 };
 class CustomVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$j({
+    super(__spreadValues$i({
       type: "custom",
       query: "",
       value: "",
@@ -6784,25 +6988,25 @@ CustomVariable.Component = ({ model }) => {
   return renderSelectForVariable(model);
 };
 
-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) => {
+var __defProp$h = Object.defineProperty;
+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;
 };
 class DataSourceVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$i({
+    super(__spreadValues$h({
       type: "datasource",
       value: "",
       text: "",
@@ -6886,25 +7090,25 @@ const hasCustomVariableSupport = (datasource) => {
   return "query" in variableSupport && "editor" in variableSupport && Boolean(variableSupport.query) && Boolean(variableSupport.editor);
 };
 
-var __defProp$h = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = 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$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = 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$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 class StandardQueryRunner {
   constructor(datasource, _runRequest = runtime.getRunRequest()) {
     this.datasource = datasource;
@@ -6941,7 +7145,7 @@ class LegacyQueryRunner {
       return getEmptyMetricFindValueObservable();
     }
     return rxjs.from(
-      this.datasource.metricFindQuery(variable.state.query, __spreadProps$9(__spreadValues$h({}, request), {
+      this.datasource.metricFindQuery(variable.state.query, __spreadProps$8(__spreadValues$g({}, request), {
         variable: {
           name: variable.state.name,
           type: variable.state.type
@@ -7003,7 +7207,7 @@ function ensureVariableQueryModelIsADataQuery(variable) {
     return { query, refId: `variable-${variable.state.name}` };
   }
   if (query.refId == null) {
-    return __spreadProps$9(__spreadValues$h({}, query), { refId: `variable-${variable.state.name}` });
+    return __spreadProps$8(__spreadValues$g({}, query), { refId: `variable-${variable.state.name}` });
   }
   return variable.state.query;
 }
@@ -7218,25 +7422,25 @@ function areMetricFindValues(data$1) {
   return false;
 }
 
-var __defProp$g = Object.defineProperty;
-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 __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;
 };
 class QueryVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadValues$g({
+    super(__spreadValues$f({
       type: "query",
       name: "",
       value: "",
@@ -7389,25 +7593,25 @@ function queryMetricTree(query) {
   return queryTree(children, query.split("."), 0);
 }
 
-var __defProp$f = Object.defineProperty;
-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 __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;
 };
 class TestVariable extends MultiValueVariable {
   constructor(initialState, isLazy = false) {
-    super(__spreadValues$f({
+    super(__spreadValues$e({
       type: "custom",
       name: "Test",
       value: "Value",
@@ -7516,25 +7720,25 @@ function VariableValueInput({ model }) {
   });
 }
 
-var __defProp$e = Object.defineProperty;
-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) => {
+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) => {
   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]);
+    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;
 };
 class TextBoxVariable extends SceneObjectBase {
   constructor(initialState) {
-    super(__spreadValues$e({
+    super(__spreadValues$d({
       type: "textbox",
       value: "",
       name: ""
@@ -7571,28 +7775,28 @@ TextBoxVariable.Component = ({ model }) => {
   });
 };
 
-var __defProp$d = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = 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) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+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;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 class LocalValueVariable extends SceneObjectBase {
   constructor(initialState) {
-    super(__spreadProps$8(__spreadValues$d({
+    super(__spreadProps$7(__spreadValues$c({
       type: "system",
       value: "",
       text: "",
@@ -7624,25 +7828,25 @@ class LocalValueVariable extends SceneObjectBase {
   }
 }
 
-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;
 };
 class IntervalVariable extends SceneObjectBase {
   constructor(initialState) {
-    super(__spreadValues$c({
+    super(__spreadValues$b({
       type: "interval",
       value: "",
       intervals: ["1m", "10m", "30m", "1h", "6h", "12h", "1d", "7d", "14d", "30d"],
@@ -7732,12 +7936,28 @@ class UrlSyncManager {
   constructor() {
     this._urlKeyMapper = new UniqueUrlKeyMapper();
     this._stateSub = null;
+    this._locationSub = null;
+    this._ignoreNextLocationUpdate = false;
+    this._onLocationUpdate = (location) => {
+      if (this._ignoreNextLocationUpdate) {
+        this._ignoreNextLocationUpdate = false;
+        return;
+      }
+      if (this._lastPath !== location.pathname) {
+        return;
+      }
+      const urlParams = new URLSearchParams(location.search);
+      this._urlKeyMapper.rebuildIndex(this._sceneRoot);
+      syncStateFromUrl(this._sceneRoot, urlParams, this._urlKeyMapper);
+      this._lastPath = location.pathname;
+    };
     this._onStateChanged = ({ payload }) => {
       const changedObject = payload.changedObject;
       if (changedObject.urlSync) {
         const newUrlState = changedObject.urlSync.getUrlState();
         const searchParams = runtime.locationService.getSearch();
         const mappedUpdated = {};
+        this._urlKeyMapper.rebuildIndex(this._sceneRoot);
         for (const [key, newUrlValue] of Object.entries(newUrlState)) {
           const uniqueKey = this._urlKeyMapper.getUniqueKey(key, changedObject);
           const currentUrlValue = searchParams.getAll(uniqueKey);
@@ -7746,33 +7966,36 @@ class UrlSyncManager {
           }
         }
         if (Object.keys(mappedUpdated).length > 0) {
-          writeSceneLog("UrlSyncManager", "onStateChange updating URL");
+          this._ignoreNextLocationUpdate = true;
           runtime.locationService.partial(mappedUpdated, true);
-          this._lastLocation = runtime.locationService.getLocation();
-          this._urlParams = new URLSearchParams(this._lastLocation.search);
         }
       }
     };
   }
   initSync(root) {
-    var _a;
+    if (!this._locationSub) {
+      writeSceneLog("UrlSyncManager", "New location listen");
+      this._locationSub = runtime.locationService.getHistory().listen(this._onLocationUpdate);
+    }
     if (this._stateSub) {
-      writeSceneLog("UrlSyncManager", "Unregister previous scene state subscription", (_a = this._sceneRoot) == null ? void 0 : _a.state.key);
+      writeSceneLog("UrlSyncManager", "Unregister previous scene state subscription", this._sceneRoot.state.key);
       this._stateSub.unsubscribe();
     }
-    writeSceneLog("UrlSyncManager", "init", root.state.key);
     this._sceneRoot = root;
+    this._lastPath = runtime.locationService.getLocation().pathname;
     this._stateSub = root.subscribeToEvent(SceneObjectStateChangedEvent, this._onStateChanged);
-    this._urlKeyMapper.clear();
-    this._lastLocation = runtime.locationService.getLocation();
-    this._urlParams = new URLSearchParams(this._lastLocation.search);
-    this.handleNewObject(this._sceneRoot);
+    this.syncFrom(this._sceneRoot);
   }
   cleanUp(root) {
     if (this._sceneRoot !== root) {
       return;
     }
     writeSceneLog("UrlSyncManager", "Clean up");
+    if (this._locationSub) {
+      this._locationSub();
+      writeSceneLog("UrlSyncManager", "Unregister history listen");
+      this._locationSub = null;
+    }
     if (this._stateSub) {
       this._stateSub.unsubscribe();
       this._stateSub = null;
@@ -7783,23 +8006,11 @@ class UrlSyncManager {
         this._sceneRoot.state.key === root.state.key
       );
     }
-    this._sceneRoot = void 0;
-    this._urlParams = void 0;
   }
-  handleNewLocation(location) {
-    if (!this._sceneRoot || this._lastLocation === location) {
-      return;
-    }
-    writeSceneLog("UrlSyncManager", "handleNewLocation");
-    this._urlParams = new URLSearchParams(location.search);
-    this._lastLocation = location;
-    syncStateFromUrl(this._sceneRoot, this._urlParams, this._urlKeyMapper);
-  }
-  handleNewObject(sceneObj) {
-    if (!this._sceneRoot || !this._urlParams) {
-      return;
-    }
-    syncStateFromUrl(sceneObj, this._urlParams, this._urlKeyMapper);
+  syncFrom(sceneObj) {
+    const urlParams = runtime.locationService.getSearch();
+    this._urlKeyMapper.rebuildIndex(this._sceneRoot);
+    syncStateFromUrl(sceneObj, urlParams, this._urlKeyMapper);
   }
   getUrlState(root) {
     return getUrlState(root);
@@ -7813,34 +8024,6 @@ function getUrlSyncManager() {
   return urlSyncManager;
 }
 
-function useUrlSync(sceneRoot) {
-  const urlSyncManager = getUrlSyncManager();
-  const location = reactRouterDom.useLocation();
-  const [isInitialized, setIsInitialized] = React.useState(false);
-  React.useEffect(() => {
-    urlSyncManager.initSync(sceneRoot);
-    setIsInitialized(true);
-    return () => urlSyncManager.cleanUp(sceneRoot);
-  }, [sceneRoot, urlSyncManager]);
-  React.useEffect(() => {
-    const latestLocation = runtime.locationService.getLocation();
-    const locationToHandle = latestLocation !== location ? latestLocation : location;
-    if (latestLocation !== location) {
-      console.log("latestLocation different from location");
-    }
-    urlSyncManager.handleNewLocation(locationToHandle);
-  }, [sceneRoot, urlSyncManager, location]);
-  return isInitialized;
-}
-
-function UrlSyncContextProvider({ children, scene }) {
-  const isInitialized = useUrlSync(scene);
-  if (!isInitialized) {
-    return null;
-  }
-  return children;
-}
-
 function setWindowGrafanaSceneContext(activeScene) {
   const prevScene = window.__grafanaSceneContext;
   writeSceneLog("setWindowGrafanaScene", "set window.__grafanaSceneContext", activeScene);
@@ -7860,14 +8043,18 @@ class EmbeddedScene extends SceneObjectBase {
       const unsetGlobalScene = setWindowGrafanaSceneContext(this);
       return () => {
         unsetGlobalScene();
+        getUrlSyncManager().cleanUp(this);
       };
     });
   }
+  initUrlSync() {
+    getUrlSyncManager().initSync(this);
+  }
 }
 EmbeddedScene.Component = EmbeddedSceneRenderer;
 function EmbeddedSceneRenderer({ model }) {
   const { body, controls } = model.useState();
-  const styles = ui.useStyles2(getStyles$6);
+  const styles = ui.useStyles2(getStyles$5);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.container
   }, controls && /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -7881,7 +8068,7 @@ function EmbeddedSceneRenderer({ model }) {
     model: body
   })));
 }
-const getStyles$6 = (theme) => {
+const getStyles$5 = (theme) => {
   return {
     container: css.css({
       flexGrow: 1,
@@ -7984,30 +8171,30 @@ function isSceneGridLayout(child) {
   return child instanceof SceneGridLayout;
 }
 
-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) => {
+var __defProp$a = Object.defineProperty;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (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]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
 var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
+  if (source != null && __getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -8047,7 +8234,7 @@ const LazyLoader = React__default["default"].forwardRef(
         }
       };
     });
-    return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$b({
+    return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$a({
       id,
       ref: innerRef
     }, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
@@ -8065,33 +8252,33 @@ LazyLoader.observer = new IntersectionObserver(
   { rootMargin: "100px" }
 );
 
-var __defProp$a = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
+  if (source != null && __getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -8150,7 +8337,7 @@ const GridItemWrapper = React__default["default"].forwardRef((props, ref) => {
     key: sceneChild.state.key
   });
   if (isLazy) {
-    return /* @__PURE__ */ React__default["default"].createElement(LazyLoader, __spreadProps$7(__spreadValues$a({}, divProps), {
+    return /* @__PURE__ */ React__default["default"].createElement(LazyLoader, __spreadProps$6(__spreadValues$9({}, divProps), {
       key: sceneChild.state.key,
       "data-griditem-key": sceneChild.state.key,
       className: css.cx(className, props.className),
@@ -8158,7 +8345,7 @@ const GridItemWrapper = React__default["default"].forwardRef((props, ref) => {
       ref
     }), innerContent, children);
   }
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$7(__spreadValues$a({}, divProps), {
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$6(__spreadValues$9({}, divProps), {
     ref,
     key: sceneChild.state.key,
     "data-griditem-key": sceneChild.state.key,
@@ -8188,7 +8375,7 @@ function updateAnimationClass(ref, isDraggable, retry) {
 const ResizeHandle = React__default["default"].forwardRef((_a, ref) => {
   var _b = _a, divProps = __objRest(_b, ["handleAxis"]);
   const customCssClass = ui.useStyles2(getResizeHandleStyles);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$7(__spreadValues$a({
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$6(__spreadValues$9({
     ref
   }, divProps), {
     className: `${customCssClass} scene-resize-handle`
@@ -8222,41 +8409,9 @@ function getResizeHandleStyles(theme) {
     svg: {
       display: "block"
     },
-    ".react-resizable-hide &": {
-      display: "none"
-    }
-  });
-}
-
-var __defProp$9 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-function fitPanelsInHeight(cells, height) {
-  const visibleHeight = height - GRID_CELL_VMARGIN * 4;
-  const currentGridHeight = Math.max(...cells.map((cell) => cell.h + cell.y));
-  const visibleGridHeight = Math.floor(visibleHeight / (GRID_CELL_HEIGHT + GRID_CELL_VMARGIN));
-  const scaleFactor = currentGridHeight / visibleGridHeight;
-  return cells.map((cell) => {
-    return __spreadProps$6(__spreadValues$9({}, cell), {
-      y: Math.round(cell.y / scaleFactor) || 0,
-      h: Math.round(cell.h / scaleFactor) || 1
-    });
+    ".react-resizable-hide &": {
+      display: "none"
+    }
   });
 }
 
@@ -8279,9 +8434,41 @@ var __spreadValues$8 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+function fitPanelsInHeight(cells, height) {
+  const visibleHeight = height - GRID_CELL_VMARGIN * 4;
+  const currentGridHeight = Math.max(...cells.map((cell) => cell.h + cell.y));
+  const visibleGridHeight = Math.floor(visibleHeight / (GRID_CELL_HEIGHT + GRID_CELL_VMARGIN));
+  const scaleFactor = currentGridHeight / visibleGridHeight;
+  return cells.map((cell) => {
+    return __spreadProps$5(__spreadValues$8({}, cell), {
+      y: Math.round(cell.y / scaleFactor) || 0,
+      h: Math.round(cell.h / scaleFactor) || 1
+    });
+  });
+}
+
+var __defProp$7 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 const _SceneGridLayout = class extends SceneObjectBase {
   constructor(state) {
-    super(__spreadProps$5(__spreadValues$8({}, state), {
+    super(__spreadProps$4(__spreadValues$7({}, state), {
       children: sortChildrenByPosition(state.children)
     }));
     this._skipOnLayoutChange = false;
@@ -8305,7 +8492,7 @@ const _SceneGridLayout = class extends SceneObjectBase {
           height: item.h
         };
         if (!isItemSizeEqual(child.state, nextSize)) {
-          child.setState(__spreadValues$8({}, nextSize));
+          child.setState(__spreadValues$7({}, nextSize));
         }
       }
       this.setState({ children: sortChildrenByPosition(this.state.children) });
@@ -8379,7 +8566,7 @@ const _SceneGridLayout = class extends SceneObjectBase {
     const yDiff = firstPanelYPos - (rowY + 1);
     let yMax = rowY;
     for (const panel of rowChildren) {
-      const newSize = __spreadValues$8({}, panel.state);
+      const newSize = __spreadValues$7({}, panel.state);
       newSize.y = (_b = newSize.y) != null ? _b : rowY;
       newSize.y -= yDiff;
       if (newSize.y !== panel.state.y) {
@@ -8506,7 +8693,7 @@ const _SceneGridLayout = class extends SceneObjectBase {
     }
     if (width < 768) {
       this._skipOnLayoutChange = true;
-      return cells.map((cell) => __spreadProps$5(__spreadValues$8({}, cell), { w: 24 }));
+      return cells.map((cell) => __spreadProps$4(__spreadValues$7({}, cell), { w: 24 }));
     }
     this._skipOnLayoutChange = false;
     return cells;
@@ -8531,28 +8718,28 @@ function sortGridLayout(layout) {
   return [...layout].sort((a, b) => a.y - b.y || a.x - b.x);
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$6 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 class SceneGridRow extends SceneObjectBase {
   constructor(state) {
-    super(__spreadProps$4(__spreadValues$7({
+    super(__spreadProps$3(__spreadValues$6({
       children: state.children || [],
       isCollapsible: state.isCollapsible || true,
       title: state.title || ""
@@ -8717,7 +8904,7 @@ NestedScene.Component = NestedSceneRenderer;
 function NestedSceneRenderer({ model }) {
   const { title, isCollapsed, canCollapse, canRemove, body, controls } = model.useState();
   const gridRow = ui.useStyles2(getSceneGridRowStyles);
-  const styles = ui.useStyles2(getStyles$5);
+  const styles = ui.useStyles2(getStyles$4);
   const toolbarControls = (controls != null ? controls : []).map((action) => /* @__PURE__ */ React__default["default"].createElement(action.Component, {
     key: action.state.key,
     model: action
@@ -8752,7 +8939,7 @@ function NestedSceneRenderer({ model }) {
     model: body
   }));
 }
-const getStyles$5 = (theme) => ({
+const getStyles$4 = (theme) => ({
   wrapper: css.css({
     display: "flex",
     flexDirection: "column",
@@ -8919,30 +9106,30 @@ function getShiftedTimeRange(dir, timeRange, upperLimit) {
   };
 }
 
-var __defProp$6 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 const DEFAULT_INTERVALS = ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"];
 class SceneRefreshPicker extends SceneObjectBase {
   constructor(state) {
     var _a, _b, _c;
-    super(__spreadProps$3(__spreadValues$6({
+    super(__spreadProps$2(__spreadValues$5({
       refresh: ""
     }, state), {
       autoValue: void 0,
@@ -9027,279 +9214,51 @@ class SceneRefreshPicker extends SceneObjectBase {
     };
   }
   updateFromUrl(values) {
-    const refresh = values.refresh;
-    if (refresh && typeof refresh === "string") {
-      this.setState({
-        refresh
-      });
-    }
-  }
-}
-SceneRefreshPicker.Component = SceneRefreshPickerRenderer;
-function SceneRefreshPickerRenderer({ model }) {
-  var _a;
-  const { refresh, intervals, autoEnabled, autoValue, isOnCanvas, primary, withText } = model.useState();
-  const isRunning = useQueryControllerState(model);
-  let text = refresh === ((_a = ui.RefreshPicker.autoOption) == null ? void 0 : _a.value) ? autoValue : withText ? "Refresh" : void 0;
-  let tooltip;
-  let width;
-  if (isRunning) {
-    tooltip = "Cancel all queries";
-    if (withText) {
-      text = "Cancel";
-    }
-  }
-  if (withText) {
-    width = "96px";
-  }
-  return /* @__PURE__ */ React__default["default"].createElement(ui.RefreshPicker, {
-    showAutoInterval: autoEnabled,
-    value: refresh,
-    intervals,
-    tooltip,
-    width,
-    text,
-    onRefresh: model.onRefresh,
-    primary,
-    onIntervalChanged: model.onIntervalChanged,
-    isLoading: isRunning,
-    isOnCanvas: isOnCanvas != null ? isOnCanvas : true
-  });
-}
-function useQueryControllerState(model) {
-  const queryController = sceneGraph.getQueryController(model);
-  if (!queryController) {
-    return false;
-  }
-  return queryController.useState().isRunning;
-}
-
-const getCompareSeriesRefId = (refId) => `${refId}-compare`;
-
-var __defProp$5 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const PREVIOUS_PERIOD_VALUE = "__previousPeriod";
-const NO_PERIOD_VALUE = "__noPeriod";
-const PREVIOUS_PERIOD_COMPARE_OPTION = {
-  label: "Previous period",
-  value: PREVIOUS_PERIOD_VALUE
-};
-const NO_COMPARE_OPTION = {
-  label: "No comparison",
-  value: NO_PERIOD_VALUE
-};
-const DEFAULT_COMPARE_OPTIONS = [
-  { label: "Day before", value: "24h" },
-  { label: "Week before", value: "1w" },
-  { label: "Month before", value: "1M" }
-];
-class SceneTimeRangeCompare extends SceneObjectBase {
-  constructor(state) {
-    super(__spreadValues$5({ compareOptions: DEFAULT_COMPARE_OPTIONS }, state));
-    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["compareWith"] });
-    this._onActivate = () => {
-      const sceneTimeRange = sceneGraph.getTimeRange(this);
-      this.setState({ compareOptions: this.getCompareOptions(sceneTimeRange.state.value) });
-      this._subs.add(
-        sceneTimeRange.subscribeToState((timeRange) => {
-          const compareOptions = this.getCompareOptions(timeRange.value);
-          const stateUpdate = { compareOptions };
-          if (Boolean(this.state.compareWith) && !compareOptions.find(({ value }) => value === this.state.compareWith)) {
-            stateUpdate.compareWith = PREVIOUS_PERIOD_VALUE;
-          }
-          this.setState(stateUpdate);
-        })
-      );
-    };
-    this.getCompareOptions = (timeRange) => {
-      const diffDays = Math.ceil(timeRange.to.diff(timeRange.from));
-      const matchIndex = DEFAULT_COMPARE_OPTIONS.findIndex(({ value }) => {
-        const intervalInMs = data.rangeUtil.intervalToMs(value);
-        return intervalInMs >= diffDays;
-      });
-      return [
-        NO_COMPARE_OPTION,
-        PREVIOUS_PERIOD_COMPARE_OPTION,
-        ...DEFAULT_COMPARE_OPTIONS.slice(matchIndex).map(({ label, value }) => ({ label, value }))
-      ];
-    };
-    this.onCompareWithChanged = (compareWith) => {
-      if (compareWith === NO_PERIOD_VALUE) {
-        this.onClearCompare();
-      } else {
-        this.setState({ compareWith });
-      }
-    };
-    this.onClearCompare = () => {
-      this.setState({ compareWith: void 0 });
-    };
-    this.addActivationHandler(this._onActivate);
-  }
-  getExtraQueries(request) {
-    const extraQueries = [];
-    const compareRange = this.getCompareTimeRange(request.range);
-    if (!compareRange) {
-      return extraQueries;
-    }
-    const targets = request.targets.filter((query) => query.timeRangeCompare !== false);
-    if (targets.length) {
-      extraQueries.push({
-        req: __spreadProps$2(__spreadValues$5({}, request), {
-          targets,
-          range: compareRange
-        }),
-        processor: timeShiftAlignmentProcessor
-      });
-    }
-    return extraQueries;
-  }
-  shouldRerun(prev, next) {
-    return prev.compareWith !== next.compareWith;
-  }
-  getCompareTimeRange(timeRange) {
-    let compareFrom;
-    let compareTo;
-    if (this.state.compareWith) {
-      if (this.state.compareWith === PREVIOUS_PERIOD_VALUE) {
-        const diffMs = timeRange.to.diff(timeRange.from);
-        compareFrom = data.dateTime(timeRange.from).subtract(diffMs);
-        compareTo = data.dateTime(timeRange.to).subtract(diffMs);
-      } else {
-        compareFrom = data.dateTime(timeRange.from).subtract(data.rangeUtil.intervalToMs(this.state.compareWith));
-        compareTo = data.dateTime(timeRange.to).subtract(data.rangeUtil.intervalToMs(this.state.compareWith));
-      }
-      return {
-        from: compareFrom,
-        to: compareTo,
-        raw: {
-          from: compareFrom,
-          to: compareTo
-        }
-      };
-    }
-    return void 0;
-  }
-  getUrlState() {
-    return {
-      compareWith: this.state.compareWith
-    };
-  }
-  updateFromUrl(values) {
-    if (!values.compareWith) {
-      return;
-    }
-    const compareWith = parseUrlParam(values.compareWith);
-    if (compareWith) {
-      const compareOptions = this.getCompareOptions(sceneGraph.getTimeRange(this).state.value);
-      if (compareOptions.find(({ value }) => value === compareWith)) {
-        this.setState({
-          compareWith
-        });
-      } else {
-        this.setState({
-          compareWith: "__previousPeriod"
-        });
-      }
+    const refresh = values.refresh;
+    if (refresh && typeof refresh === "string") {
+      this.setState({
+        refresh
+      });
     }
   }
 }
-SceneTimeRangeCompare.Component = SceneTimeRangeCompareRenderer;
-const timeShiftAlignmentProcessor = (primary, secondary) => {
-  const diff = secondary.timeRange.from.diff(primary.timeRange.from);
-  secondary.series.forEach((series) => {
-    series.refId = getCompareSeriesRefId(series.refId || "");
-    series.meta = __spreadProps$2(__spreadValues$5({}, series.meta), {
-      timeCompare: {
-        diffMs: diff,
-        isTimeShiftQuery: true
-      }
-    });
-    series.fields.forEach((field) => {
-      if (field.type === data.FieldType.time) {
-        field.values = field.values.map((v) => {
-          return diff < 0 ? v - diff : v + diff;
-        });
-      }
-      field.config = __spreadProps$2(__spreadValues$5({}, field.config), {
-        color: {
-          mode: "fixed",
-          fixedColor: runtime.config.theme.palette.gray60
-        }
-      });
-      return field;
-    });
-  });
-  return rxjs.of(secondary);
-};
-function SceneTimeRangeCompareRenderer({ model }) {
+SceneRefreshPicker.Component = SceneRefreshPickerRenderer;
+function SceneRefreshPickerRenderer({ model }) {
   var _a;
-  const styles = ui.useStyles2(getStyles$4);
-  const { compareWith, compareOptions } = model.useState();
-  const [previousCompare, setPreviousCompare] = React__default["default"].useState(compareWith);
-  const previousValue = (_a = compareOptions.find(({ value: value2 }) => value2 === previousCompare)) != null ? _a : PREVIOUS_PERIOD_COMPARE_OPTION;
-  const value = compareOptions.find(({ value: value2 }) => value2 === compareWith);
-  const enabled = Boolean(value);
-  const onClick = () => {
-    if (enabled) {
-      setPreviousCompare(compareWith);
-      model.onClearCompare();
-    } else if (!enabled) {
-      model.onCompareWithChanged(previousValue.value);
-    }
-  };
-  return /* @__PURE__ */ React__default["default"].createElement(ui.ButtonGroup, null, /* @__PURE__ */ React__default["default"].createElement(ui.ToolbarButton, {
-    variant: "canvas",
-    tooltip: "Enable time frame comparison",
-    onClick: (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-      onClick();
-    }
-  }, /* @__PURE__ */ React__default["default"].createElement(ui.Checkbox, {
-    label: " ",
-    value: enabled,
-    onClick
-  }), "Comparison"), enabled ? /* @__PURE__ */ React__default["default"].createElement(ui.ButtonSelect, {
-    variant: "canvas",
-    value,
-    options: compareOptions,
-    onChange: (v) => {
-      model.onCompareWithChanged(v.value);
+  const { refresh, intervals, autoEnabled, autoValue, isOnCanvas, primary, withText } = model.useState();
+  const isRunning = useQueryControllerState(model);
+  let text = refresh === ((_a = ui.RefreshPicker.autoOption) == null ? void 0 : _a.value) ? autoValue : withText ? "Refresh" : void 0;
+  let tooltip;
+  let width;
+  if (isRunning) {
+    tooltip = "Cancel all queries";
+    if (withText) {
+      text = "Cancel";
     }
-  }) : /* @__PURE__ */ React__default["default"].createElement(ui.ToolbarButton, {
-    className: styles.previewButton,
-    disabled: true,
-    variant: "canvas",
-    isOpen: false
-  }, previousValue.label));
+  }
+  if (withText) {
+    width = "96px";
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(ui.RefreshPicker, {
+    showAutoInterval: autoEnabled,
+    value: refresh,
+    intervals,
+    tooltip,
+    width,
+    text,
+    onRefresh: model.onRefresh,
+    primary,
+    onIntervalChanged: model.onIntervalChanged,
+    isLoading: isRunning,
+    isOnCanvas: isOnCanvas != null ? isOnCanvas : true
+  });
 }
-function getStyles$4(theme) {
-  return {
-    previewButton: css.css({
-      "&:disabled": {
-        border: `1px solid ${theme.colors.secondary.border}`,
-        color: theme.colors.text.disabled,
-        opacity: 1
-      }
-    })
-  };
+function useQueryControllerState(model) {
+  const queryController = sceneGraph.getQueryController(model);
+  if (!queryController) {
+    return false;
+  }
+  return queryController.useState().isRunning;
 }
 
 class SceneByFrameRepeater extends SceneObjectBase {
@@ -10335,8 +10294,7 @@ function SceneAppPageView({ page, routeProps }) {
   React.useEffect(() => {
     return () => containerPage.setState({ initializedScene: void 0 });
   }, [containerPage]);
-  const urlSyncInitialized = useUrlSync(containerPage);
-  if (!isInitialized && !urlSyncInitialized) {
+  if (!isInitialized) {
     return null;
   }
   const pageNav = {
@@ -10409,9 +10367,13 @@ class SceneAppPage extends SceneObjectBase {
     super(state);
     this._sceneCache = /* @__PURE__ */ new Map();
     this._drilldownCache = /* @__PURE__ */ new Map();
+    this.addActivationHandler(() => {
+      return () => getUrlSyncManager().cleanUp(this);
+    });
   }
   initializeScene(scene) {
     this.setState({ initializedScene: scene });
+    getUrlSyncManager().initSync(this);
   }
   getScene(routeMatch) {
     let scene = this._sceneCache.get(routeMatch.url);
@@ -11163,174 +11125,6 @@ const PanelBuilders = {
   }
 };
 
-class VizConfigBuilder {
-  constructor(pluginId, pluginVersion, defaultOptions, defaultFieldConfig) {
-    this._pluginId = pluginId;
-    this._pluginVersion = pluginVersion;
-    this._fieldConfigBuilder = new FieldConfigBuilder(defaultFieldConfig);
-    this._panelOptionsBuilder = new PanelOptionsBuilder(defaultOptions);
-  }
-  setColor(color) {
-    this._fieldConfigBuilder.setColor(color);
-    return this;
-  }
-  setDecimals(decimals) {
-    this._fieldConfigBuilder.setDecimals(decimals);
-    return this;
-  }
-  setDisplayName(displayName) {
-    this._fieldConfigBuilder.setDisplayName(displayName);
-    return this;
-  }
-  setFilterable(filterable) {
-    this._fieldConfigBuilder.setFilterable(filterable);
-    return this;
-  }
-  setLinks(links) {
-    this._fieldConfigBuilder.setLinks(links);
-    return this;
-  }
-  setMappings(mappings) {
-    this._fieldConfigBuilder.setMappings(mappings);
-    return this;
-  }
-  setMax(max) {
-    this._fieldConfigBuilder.setMax(max);
-    return this;
-  }
-  setMin(min) {
-    this._fieldConfigBuilder.setMin(min);
-    return this;
-  }
-  setNoValue(noValue) {
-    this._fieldConfigBuilder.setNoValue(noValue);
-    return this;
-  }
-  setThresholds(thresholds) {
-    this._fieldConfigBuilder.setThresholds(thresholds);
-    return this;
-  }
-  setUnit(unit) {
-    this._fieldConfigBuilder.setUnit(unit);
-    return this;
-  }
-  setCustomFieldConfig(id, value) {
-    this._fieldConfigBuilder.setCustomFieldConfig(id, value);
-    return this;
-  }
-  setOverrides(builder) {
-    this._fieldConfigBuilder.setOverrides(builder);
-    return this;
-  }
-  setOption(id, value) {
-    this._panelOptionsBuilder.setOption(id, value);
-    return this;
-  }
-  build() {
-    return {
-      pluginId: this._pluginId,
-      pluginVersion: this._pluginVersion,
-      options: this._panelOptionsBuilder.build(),
-      fieldConfig: this._fieldConfigBuilder.build()
-    };
-  }
-}
-
-const VizConfigBuilders = {
-  barchart() {
-    return new VizConfigBuilder(
-      "barchart",
-      "10.0.0",
-      () => BarChartPanelCfg_types_gen.defaultOptions,
-      () => BarChartPanelCfg_types_gen.defaultFieldConfig
-    );
-  },
-  bargauge() {
-    return new VizConfigBuilder("bargauge", "10.0.0", () => BarGaugePanelCfg_types_gen.defaultOptions);
-  },
-  datagrid() {
-    return new VizConfigBuilder("datagrid", "10.0.0", () => DatagridPanelCfg_types_gen.defaultOptions);
-  },
-  flamegraph() {
-    return new VizConfigBuilder("flamegraph", "10.0.0");
-  },
-  gauge() {
-    return new VizConfigBuilder("gauge", "10.0.0", () => GaugePanelCfg_types_gen.defaultOptions);
-  },
-  geomap() {
-    return new VizConfigBuilder("geomap", "10.0.0", () => GeomapPanelCfg_types_gen.defaultOptions);
-  },
-  heatmap() {
-    return new VizConfigBuilder("heatmap", "10.0.0", () => HeatmapPanelCfg_types_gen.defaultOptions);
-  },
-  histogram() {
-    return new VizConfigBuilder(
-      "histogram",
-      "10.0.0",
-      () => HistogramPanelCfg_types_gen.defaultOptions,
-      () => HistogramPanelCfg_types_gen.defaultFieldConfig
-    );
-  },
-  logs() {
-    return new VizConfigBuilder("logs", "10.0.0");
-  },
-  news() {
-    return new VizConfigBuilder("news", "10.0.0", () => NewsPanelCfg_types_gen.defaultOptions);
-  },
-  nodegraph() {
-    return new VizConfigBuilder("nodeGraph", "10.0.0");
-  },
-  piechart() {
-    return new VizConfigBuilder(
-      "piechart",
-      "10.0.0",
-      () => PieChartPanelCfg_types_gen.defaultOptions
-    );
-  },
-  stat() {
-    return new VizConfigBuilder("stat", "10.0.0", () => StatPanelCfg_types_gen.defaultOptions);
-  },
-  statetimeline() {
-    return new VizConfigBuilder(
-      "state-timeline",
-      "10.0.0",
-      () => StateTimelinePanelCfg_types_gen.defaultOptions,
-      () => StateTimelinePanelCfg_types_gen.defaultFieldConfig
-    );
-  },
-  statushistory() {
-    return new VizConfigBuilder(
-      "status-history",
-      "10.0.0",
-      () => StatusHistoryPanelCfg_types_gen.defaultOptions,
-      () => StatusHistoryPanelCfg_types_gen.defaultFieldConfig
-    );
-  },
-  table() {
-    return new VizConfigBuilder("table", "10.0.0", () => TablePanelCfg_types_gen.defaultOptions);
-  },
-  text() {
-    return new VizConfigBuilder("text", "10.0.0", () => TextPanelCfg_types_gen.defaultOptions);
-  },
-  timeseries() {
-    return new VizConfigBuilder("timeseries", "10.0.0");
-  },
-  trend() {
-    return new VizConfigBuilder("trend", "10.0.0");
-  },
-  traces() {
-    return new VizConfigBuilder("traces", "10.0.0");
-  },
-  xychart() {
-    return new VizConfigBuilder(
-      "xychart",
-      "10.0.0",
-      () => XYChartPanelCfg_types_gen.defaultOptions,
-      () => XYChartPanelCfg_types_gen.defaultFieldConfig
-    );
-  }
-};
-
 const sceneUtils = {
   getUrlWithAppState,
   registerRuntimePanelPlugin,
@@ -11355,7 +11149,6 @@ exports.ConstantVariable = ConstantVariable;
 exports.CustomVariable = CustomVariable;
 exports.DataSourceVariable = DataSourceVariable;
 exports.EmbeddedScene = EmbeddedScene;
-exports.FieldConfigBuilder = FieldConfigBuilder;
 exports.FieldConfigBuilders = FieldConfigBuilders;
 exports.FieldConfigOverridesBuilder = FieldConfigOverridesBuilder;
 exports.GroupByVariable = GroupByVariable;
@@ -11406,15 +11199,11 @@ exports.SceneVariableValueChangedEvent = SceneVariableValueChangedEvent;
 exports.SplitLayout = SplitLayout;
 exports.TestVariable = TestVariable;
 exports.TextBoxVariable = TextBoxVariable;
-exports.UrlSyncContextProvider = UrlSyncContextProvider;
 exports.UrlSyncManager = UrlSyncManager;
 exports.UserActionEvent = UserActionEvent;
 exports.VariableDependencyConfig = VariableDependencyConfig;
 exports.VariableValueControl = VariableValueControl;
-exports.VariableValueSelectWrapper = VariableValueSelectWrapper;
 exports.VariableValueSelectors = VariableValueSelectors;
-exports.VizConfigBuilder = VizConfigBuilder;
-exports.VizConfigBuilders = VizConfigBuilders;
 exports.VizPanel = VizPanel;
 exports.VizPanelBuilder = VizPanelBuilder;
 exports.VizPanelMenu = VizPanelMenu;
@@ -11432,5 +11221,4 @@ exports.sceneGraph = sceneGraph;
 exports.sceneUtils = sceneUtils;
 exports.useSceneApp = useSceneApp;
 exports.useSceneObjectState = useSceneObjectState;
-exports.useUrlSync = useUrlSync;
 //# sourceMappingURL=index.js.map