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

package/dist/index.js

@@ -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 "";
-  }
-}
-class TimeFromAndToMacro {
-  constructor(name, sceneObject) {
-    this.state = { name, type: "time_macro" };
-    this._sceneObject = sceneObject;
+function sceneInterpolator(sceneObject, target, scopedVars, format, interpolations) {
+  if (!target) {
+    return target != null ? target : "";
   }
-  getValue() {
-    const timeRange = getTimeRange(this._sceneObject);
-    if (this.state.name === "__from") {
-      return timeRange.state.value.from.valueOf();
-    } else {
-      return timeRange.state.value.to.valueOf();
+  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;
     }
-  }
-  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() });
+    const value = formatValue(sceneObject, variable, variable.getValue(fieldPath), fmt);
+    if (interpolations) {
+      interpolations.push({ match, variableName, fieldPath, format: fmt, value, found: value !== match });
     }
-  }
+    return value;
+  });
 }
-class TimezoneMacro {
-  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);
-    const timeZone = timeRange.getTimeZone();
-    if (timeZone === "browser") {
-      return Intl.DateTimeFormat().resolvedOptions().timeZone;
-    }
-    return timeZone;
+  const variable = lookupVariable(name, sceneObject);
+  if (variable) {
+    return variable;
   }
-  getValueText() {
-    return this.getValue();
+  if (macrosIndex[name]) {
+    return new macrosIndex[name](name, sceneObject, match, scopedVars);
   }
+  return null;
 }
-class IntervalMacro {
-  constructor(name, sceneObject, match) {
-    this.state = { name, type: "time_macro", match };
-    this._sceneObject = sceneObject;
+function formatValue(context, variable, value, formatNameOrFn) {
+  if (value === null || value === void 0) {
+    return "";
   }
-  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;
-    }
-    return this.state.match;
+  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));
-      }
+  if (typeof formatNameOrFn === "function") {
+    return formatNameOrFn(value, {
+      name: variable.state.name,
+      type: variable.state.type,
+      multi: variable.state.isMulti,
+      includeAll: variable.state.includeAll
+    });
+  }
+  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 new SkipFormattingValue(params.join("&"));
   }
-  getValueText() {
-    return "";
+  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);
 }
-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 isSceneObject(obj) {
+  return obj.useState !== void 0;
+}
+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;
-    }
-    if (!field) {
-      return this._match;
+  queryStarted(entry) {
+    __privateGet(this, _running).add(entry);
+    this.changeRunningQueryCount(1);
+    if (!this.state.isRunning) {
+      this.setState({ isRunning: true });
     }
-    const value = field.values.get(rowIndex);
-    if (fieldPath === "raw") {
-      return value;
+  }
+  queryCompleted(entry) {
+    if (!__privateGet(this, _running).has(entry)) {
+      return;
     }
-    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);
+    __privateGet(this, _running).delete(entry);
+    this.changeRunningQueryCount(-1);
+    if (__privateGet(this, _running).size === 0) {
+      this.setState({ isRunning: false });
     }
   }
-  getValueText() {
-    return "";
-  }
-}
-const fallbackDisplayProcessor = data.getDisplayProcessor();
-class DataMacro {
-  constructor(name, sceneObject, _match, _scopedVars) {
-    this._match = _match;
-    this._scopedVars = _scopedVars;
-    this.state = { name, type: "__data" };
+  changeRunningQueryCount(dir) {
+    var _a;
+    window.__grafanaRunningQueryCount = ((_a = window.__grafanaRunningQueryCount) != null ? _a : 0) + dir;
   }
-  getValue(fieldPath) {
-    var _a, _b;
-    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
-    if (!dataContext || !fieldPath) {
-      return this._match;
-    }
-    const { frame, rowIndex } = dataContext.value;
-    if (rowIndex === void 0 || fieldPath === void 0) {
-      return this._match;
+  cancelAll() {
+    var _a;
+    for (const entry of __privateGet(this, _running).values()) {
+      (_a = entry.cancel) == null ? void 0 : _a.call(entry);
     }
-    const obj = {
-      name: frame.name,
-      refId: frame.refId,
-      fields: data.getFieldDisplayValuesProxy({ frame, rowIndex })
-    };
-    return (_b = getFieldAccessor(fieldPath)(obj)) != null ? _b : "";
   }
-  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);
 }
-class SeriesMacro {
-  constructor(name, sceneObject, _match, _scopedVars) {
-    this._match = _match;
-    this._scopedVars = _scopedVars;
-    this.state = { name, type: "__series" };
+function hasVariableDependencyInLoadingState(sceneObject) {
+  if (!sceneObject.variableDependency) {
+    return false;
   }
-  getValue(fieldPath) {
-    var _a;
-    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;
     }
-    if (fieldPath !== "name") {
-      return this._match;
+    const set = variable.parent;
+    if (set.isVariableLoadingOrWaitingToUpdate(variable)) {
+      return true;
     }
-    const { frame, frameIndex } = dataContext.value;
-    return data.getFrameDisplayName(frame, frameIndex);
-  }
-  getValueText() {
-    return "";
   }
+  return false;
 }
-class FieldMacro {
-  constructor(name, sceneObject, _match, _scopedVars) {
-    this._match = _match;
-    this._scopedVars = _scopedVars;
-    this.state = { name, type: "__field" };
+function findObjectInternal(scene, check, alreadySearchedChild, shouldSearchUp) {
+  if (check(scene)) {
+    return scene;
   }
-  getValue(fieldPath) {
-    var _a, _b;
-    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 === void 0 || fieldPath === "") {
-      return this._match;
+    let maybe = findObjectInternal(child, check);
+    if (maybe) {
+      found = maybe;
     }
-    const { frame, field, data } = dataContext.value;
-    const obj = getTemplateProxyForField(field, frame, data);
-    return (_b = getFieldAccessor(fieldPath)(obj)) != null ? _b : "";
+  });
+  if (found) {
+    return found;
   }
-  getValueText() {
-    return "";
+  if (shouldSearchUp && scene.parent) {
+    return findObjectInternal(scene.parent, check, scene, true);
   }
+  return null;
 }
-
-class UrlMacro {
-  constructor(name, _) {
-    this.state = { name, type: "url_macro" };
+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;
-    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;
-    }
+  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 UrlStateFormatter {
-  constructor(_urlQueryParams) {
-    this._urlQueryParams = _urlQueryParams;
-  }
-  formatter(options) {
-    if (!options) {
-      return this._urlQueryParams;
+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);
     }
-    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);
+    found.push(...findAllObjects(child, check));
+  });
+  return found;
+}
+function getDataLayers(sceneObject, localOnly = false) {
+  let currentLevel = sceneObject;
+  let collected = [];
+  while (currentLevel) {
+    const dataProvider = currentLevel.state.$data;
+    if (!dataProvider) {
+      currentLevel = currentLevel.parent;
+      continue;
+    }
+    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);
+    return this.state.match;
   }
-  const variable = lookupVariable(name, sceneObject);
-  if (variable) {
-    return variable;
+}
+
+class AllVariablesMacro {
+  constructor(name, sceneObject) {
+    this.state = { name, type: "url_variable" };
+    this._sceneObject = sceneObject;
   }
-  if (macrosIndex[name]) {
-    return new macrosIndex[name](name, sceneObject, match, scopedVars);
+  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("&"));
   }
-  return null;
-}
-function formatValue(context, variable, value, formatNameOrFn) {
-  if (value === null || value === void 0) {
+  getValueText() {
     return "";
   }
-  if (isCustomVariableValue(value)) {
-    return sceneInterpolator(context, value.formatter(formatNameOrFn));
-  }
-  if (!Array.isArray(value) && typeof value === "object") {
-    value = `${value}`;
+}
+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 (typeof formatNameOrFn === "function") {
-    return formatNameOrFn(value, {
-      name: variable.state.name,
-      type: variable.state.type,
-      multi: variable.state.isMulti,
-      includeAll: variable.state.includeAll
-    });
+  if (sceneObject.parent) {
+    collectAllVariables(sceneObject.parent, record);
   }
-  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 record;
+}
+
+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 __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;
+      }
     }
-  }
-  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);
-}
-
-function isSceneObject(obj) {
-  return obj.useState !== void 0;
-}
-function isDataRequestEnricher(obj) {
-  return "enrichDataRequest" in obj;
-}
-function isDataLayer(obj) {
-  return "isDataLayer" in obj;
+  );
 }
 
-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 _running;
-function isQueryController(s) {
-  return "isQueryController" in s;
-}
-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;
     }
-  }
-  queryCompleted(entry) {
-    if (!__privateGet(this, _running).has(entry)) {
-      return;
+    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);
+      }
     }
-    __privateGet(this, _running).delete(entry);
-    this.changeRunningQueryCount(-1);
-    if (__privateGet(this, _running).size === 0) {
-      this.setState({ isRunning: false });
+    if (rowIndex == null) {
+      return this._match;
     }
-  }
-  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 (fieldPath === "time") {
+      const timeField = frame.fields.find((f) => f.type === data.FieldType.time);
+      return timeField ? timeField.values.get(rowIndex) : void 0;
+    }
+    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;
+  getValueText() {
+    return "";
   }
-  return null;
 }
-function interpolate(sceneObject, value, scopedVars, format, interpolations) {
-  if (value === "" || value == null) {
+const fallbackDisplayProcessor = data.getDisplayProcessor();
+class DataMacro {
+  constructor(name, sceneObject, _match, _scopedVars) {
+    this._match = _match;
+    this._scopedVars = _scopedVars;
+    this.state = { name, type: "__data" };
+  }
+  getValue(fieldPath) {
+    var _a, _b;
+    const dataContext = (_a = this._scopedVars) == null ? void 0 : _a.__dataContext;
+    if (!dataContext || !fieldPath) {
+      return this._match;
+    }
+    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 sceneInterpolator(sceneObject, value, scopedVars, format, interpolations);
 }
-function hasVariableDependencyInLoadingState(sceneObject) {
-  if (!sceneObject.variableDependency) {
-    return false;
+class SeriesMacro {
+  constructor(name, sceneObject, _match, _scopedVars) {
+    this._match = _match;
+    this._scopedVars = _scopedVars;
+    this.state = { name, type: "__series" };
   }
-  for (const name of sceneObject.variableDependency.getNames()) {
-    const variable = lookupVariable(name, sceneObject);
-    if (!variable) {
-      continue;
+  getValue(fieldPath) {
+    var _a;
+    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;
+    if (fieldPath !== "name") {
+      return this._match;
     }
+    const { frame, frameIndex } = dataContext.value;
+    return data.getFrameDisplayName(frame, frameIndex);
+  }
+  getValueText() {
+    return "";
   }
-  return false;
 }
-function findObjectInternal(scene, check, alreadySearchedChild, shouldSearchUp) {
-  if (check(scene)) {
-    return scene;
+class FieldMacro {
+  constructor(name, sceneObject, _match, _scopedVars) {
+    this._match = _match;
+    this._scopedVars = _scopedVars;
+    this.state = { name, type: "__field" };
   }
-  let found = null;
-  scene.forEachChild((child) => {
-    if (child === alreadySearchedChild) {
-      return;
+  getValue(fieldPath) {
+    var _a, _b;
+    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 === void 0 || fieldPath === "") {
+      return this._match;
     }
-  });
-  if (found) {
-    return found;
+    const { frame, field, data } = dataContext.value;
+    const obj = getTemplateProxyForField(field, frame, data);
+    return (_b = getFieldAccessor(fieldPath)(obj)) != null ? _b : "";
   }
-  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 UrlMacro {
+  constructor(name, _) {
+    this.state = { name, type: "url_macro" };
   }
-  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;
+    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;
+    }
   }
-  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);
-    }
-    found.push(...findAllObjects(child, check));
-  });
-  return found;
 }
-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);
@@ -2971,6 +2959,7 @@ const OptionWithCheckbox = ({
   isSelected,
   renderOptionLabel
 }) => {
+  var _b;
   const _a = innerProps, rest = __objRest$3(_a, ["onMouseMove", "onMouseOver"]);
   const theme = ui.useTheme2();
   const selectStyles = ui.getSelectStyles(theme);
@@ -2979,17 +2968,17 @@ const OptionWithCheckbox = ({
     ref: innerRef,
     className: css.cx(selectStyles.option, isFocused && selectStyles.optionFocused)
   }, rest), {
-    "aria-label": "Select option",
-    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(
-      data.label || String(data.value)
-    ),
+    "data-testid": e2eSelectors.selectors.components.Select.option,
     title: data.title
   }), /* @__PURE__ */ React__default["default"].createElement("div", {
     className: optionStyles.checkbox
   }, /* @__PURE__ */ React__default["default"].createElement(ui.Checkbox, {
     value: isSelected
   })), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: selectStyles.optionBody
+    className: selectStyles.optionBody,
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(
+      (_b = data.label) != null ? _b : String(data.value)
+    )
   }, /* @__PURE__ */ React__default["default"].createElement("span", null, children)));
 };
 OptionWithCheckbox.displayName = "SelectMenuOptions";
@@ -7732,12 +7721,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 +7751,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 +7791,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 +7809,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,9 +7828,13 @@ class EmbeddedScene extends SceneObjectBase {
       const unsetGlobalScene = setWindowGrafanaSceneContext(this);
       return () => {
         unsetGlobalScene();
+        getUrlSyncManager().cleanUp(this);
       };
     });
   }
+  initUrlSync() {
+    getUrlSyncManager().initSync(this);
+  }
 }
 EmbeddedScene.Component = EmbeddedSceneRenderer;
 function EmbeddedSceneRenderer({ model }) {
@@ -10335,8 +10307,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 +10380,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);
@@ -11406,7 +11381,6 @@ exports.SceneVariableValueChangedEvent = SceneVariableValueChangedEvent;
 exports.SplitLayout = SplitLayout;
 exports.TestVariable = TestVariable;
 exports.TextBoxVariable = TextBoxVariable;
-exports.UrlSyncContextProvider = UrlSyncContextProvider;
 exports.UrlSyncManager = UrlSyncManager;
 exports.UserActionEvent = UserActionEvent;
 exports.VariableDependencyConfig = VariableDependencyConfig;
@@ -11432,5 +11406,4 @@ exports.sceneGraph = sceneGraph;
 exports.sceneUtils = sceneUtils;
 exports.useSceneApp = useSceneApp;
 exports.useSceneObjectState = useSceneObjectState;
-exports.useUrlSync = useUrlSync;
 //# sourceMappingURL=index.js.map