@grafana/scenes 0.0.1

package/dist/index.js

@@ -0,0 +1,3356 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var data = require('@grafana/data');
+var React = require('react');
+var rxjs = require('rxjs');
+var uuid = require('uuid');
+var ui = require('@grafana/ui');
+var lodash = require('lodash');
+var runtime = require('@grafana/runtime');
+var e2eSelectors = require('@grafana/e2e-selectors');
+var reactUse = require('react-use');
+var css = require('@emotion/css');
+var experimental = require('@grafana/experimental');
+var ReactGridLayout = require('react-grid-layout');
+var AutoSizer = require('react-virtualized-auto-sizer');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactGridLayout__default = /*#__PURE__*/_interopDefaultLegacy(ReactGridLayout);
+var AutoSizer__default = /*#__PURE__*/_interopDefaultLegacy(AutoSizer);
+
+function isSceneObject(obj) {
+  return obj.useState !== void 0;
+}
+
+class SceneObjectStateChangedEvent extends data.BusEventWithPayload {
+}
+SceneObjectStateChangedEvent.type = "scene-object-state-change";
+
+var __defProp$f = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$f = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function SceneComponentWrapper(_a) {
+  var _b = _a, {
+    model,
+    isEditing
+  } = _b, otherProps = __objRest(_b, [
+    "model",
+    "isEditing"
+  ]);
+  var _a2;
+  const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
+  const inner = /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$6(__spreadValues$f({}, otherProps), {
+    model,
+    isEditing
+  }));
+  React.useEffect(() => {
+    if (!model.isActive) {
+      model.activate();
+    }
+    return () => {
+      if (model.isActive) {
+        model.deactivate();
+      }
+    };
+  }, [model]);
+  model._renderCount += 1;
+  if (!isEditing) {
+    return inner;
+  }
+  const editor = getSceneEditor$1(model);
+  const EditWrapper = getSceneEditor$1(model).getEditComponentWrapper();
+  return /* @__PURE__ */ React__default["default"].createElement(EditWrapper, {
+    model,
+    editor
+  }, inner);
+}
+function EmptyRenderer(_) {
+  return null;
+}
+function getSceneEditor$1(sceneObject) {
+  const { $editor } = sceneObject.state;
+  if ($editor) {
+    return $editor;
+  }
+  if (sceneObject.parent) {
+    return getSceneEditor$1(sceneObject.parent);
+  }
+  throw new Error("No editor found in scene tree");
+}
+
+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$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;
+};
+function forEachSceneObjectInState(state, callback) {
+  for (const propValue of Object.values(state)) {
+    if (propValue instanceof SceneObjectBase) {
+      callback(propValue);
+    }
+    if (Array.isArray(propValue)) {
+      for (const child of propValue) {
+        if (child instanceof SceneObjectBase) {
+          callback(child);
+        }
+      }
+    }
+  }
+}
+function cloneSceneObject(sceneObject, withState) {
+  const clonedState = __spreadValues$e({}, sceneObject.state);
+  for (const key in clonedState) {
+    const propValue = clonedState[key];
+    if (propValue instanceof SceneObjectBase) {
+      clonedState[key] = propValue.clone();
+    }
+    if (Array.isArray(propValue)) {
+      const newArray = [];
+      for (const child of propValue) {
+        if (child instanceof SceneObjectBase) {
+          newArray.push(child.clone());
+        } else {
+          newArray.push(child);
+        }
+      }
+      clonedState[key] = newArray;
+    }
+  }
+  Object.assign(clonedState, withState);
+  return new sceneObject.constructor(clonedState);
+}
+
+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$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 SceneObjectBase {
+  constructor(state) {
+    this._isActive = false;
+    this._subject = new rxjs.Subject();
+    this._events = new data.EventBusSrv();
+    this._renderCount = 0;
+    this._subs = new rxjs.Subscription();
+    if (!state.key) {
+      state.key = uuid.v4();
+    }
+    this._state = Object.freeze(state);
+    this._subject.next(state);
+    this.setParent();
+  }
+  get state() {
+    return this._state;
+  }
+  get isActive() {
+    return this._isActive;
+  }
+  get parent() {
+    return this._parent;
+  }
+  get variableDependency() {
+    return this._variableDependency;
+  }
+  get urlSync() {
+    return this._urlSync;
+  }
+  get Component() {
+    return SceneComponentWrapper;
+  }
+  get Editor() {
+    var _a;
+    return (_a = this.constructor["Editor"]) != null ? _a : () => null;
+  }
+  setParent() {
+    forEachSceneObjectInState(this._state, (child) => child._parent = this);
+  }
+  subscribeToState(observerOrNext) {
+    return this._subject.subscribe(observerOrNext);
+  }
+  subscribeToEvent(eventType, handler) {
+    return this._events.subscribe(eventType, handler);
+  }
+  setState(update) {
+    const prevState = this._state;
+    const newState = __spreadValues$d(__spreadValues$d({}, this._state), update);
+    this._state = Object.freeze(newState);
+    this.setParent();
+    this._subject.next(newState);
+    this.publishEvent(
+      new SceneObjectStateChangedEvent({
+        prevState,
+        newState,
+        partialUpdate: update,
+        changedObject: this
+      }),
+      true
+    );
+  }
+  publishEvent(event, bubble) {
+    this._events.publish(event);
+    if (bubble && this.parent) {
+      this.parent.publishEvent(event, bubble);
+    }
+  }
+  getRoot() {
+    return !this._parent ? this : this._parent.getRoot();
+  }
+  activate() {
+    this._isActive = true;
+    const { $data, $variables } = this.state;
+    if ($data && !$data.isActive) {
+      $data.activate();
+    }
+    if ($variables && !$variables.isActive) {
+      $variables.activate();
+    }
+  }
+  deactivate() {
+    this._isActive = false;
+    const { $data, $variables } = this.state;
+    if ($data && $data.isActive) {
+      $data.deactivate();
+    }
+    if ($variables && $variables.isActive) {
+      $variables.deactivate();
+    }
+    this._events.removeAllListeners();
+    this._subs.unsubscribe();
+    this._subs = new rxjs.Subscription();
+    this._subject.complete();
+    this._subject = new rxjs.Subject();
+  }
+  useState() {
+    return useSceneObjectState(this);
+  }
+  forceRender() {
+    this.setState({});
+  }
+  clone(withState) {
+    return cloneSceneObject(this, withState);
+  }
+}
+function useSceneObjectState(model) {
+  const forceUpdate = ui.useForceUpdate();
+  React.useEffect(() => {
+    const s = model.subscribeToState({ next: forceUpdate });
+    return () => s.unsubscribe();
+  }, [model, forceUpdate]);
+  return model.state;
+}
+
+class SceneDataNode extends SceneObjectBase {
+}
+
+class SceneObjectUrlSyncConfig {
+  constructor(_sceneObject, _options) {
+    this._sceneObject = _sceneObject;
+    this._keys = _options.keys;
+  }
+  getKeys() {
+    return this._keys;
+  }
+  getUrlState(state) {
+    return this._sceneObject.getUrlState(state);
+  }
+  updateFromUrl(values) {
+    this._sceneObject.updateFromUrl(values);
+  }
+}
+
+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;
+};
+class SceneTimeRange extends SceneObjectBase {
+  constructor(state = {}) {
+    var _a, _b, _c;
+    const from = (_a = state.from) != null ? _a : "now-6h";
+    const to = (_b = state.to) != null ? _b : "now";
+    const timeZone = (_c = state.timeZone) != null ? _c : data.getTimeZone();
+    const value = evaluateTimeRange(from, to, timeZone);
+    super(__spreadValues$c({ from, to, timeZone, value }, state));
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["from", "to"] });
+    this.onTimeRangeChange = (timeRange) => {
+      const update = {};
+      if (typeof timeRange.raw.from === "string") {
+        update.from = timeRange.raw.from;
+      } else {
+        update.from = timeRange.raw.from.toISOString();
+      }
+      if (typeof timeRange.raw.to === "string") {
+        update.to = timeRange.raw.to;
+      } else {
+        update.to = timeRange.raw.to.toISOString();
+      }
+      update.value = evaluateTimeRange(update.from, update.to, this.state.timeZone);
+      this.setState(update);
+    };
+    this.onRefresh = () => {
+      this.setState({ value: evaluateTimeRange(this.state.from, this.state.to, this.state.timeZone) });
+    };
+    this.onIntervalChanged = (_) => {
+    };
+  }
+  getUrlState(state) {
+    return { from: state.from, to: state.to };
+  }
+  updateFromUrl(values) {
+    var _a, _b;
+    const update = {};
+    const from = parseUrlParam(values.from);
+    if (from) {
+      update.from = from;
+    }
+    const to = parseUrlParam(values.to);
+    if (to) {
+      update.to = to;
+    }
+    update.value = evaluateTimeRange((_a = update.from) != null ? _a : this.state.from, (_b = update.to) != null ? _b : this.state.to, this.state.timeZone);
+    this.setState(update);
+  }
+}
+function parseUrlParam(value) {
+  if (typeof value !== "string") {
+    return null;
+  }
+  if (value.indexOf("now") !== -1) {
+    return value;
+  }
+  if (value.length === 8) {
+    const utcValue = data.toUtc(value, "YYYYMMDD");
+    if (utcValue.isValid()) {
+      return utcValue.toISOString();
+    }
+  } else if (value.length === 15) {
+    const utcValue = data.toUtc(value, "YYYYMMDDTHHmmss");
+    if (utcValue.isValid()) {
+      return utcValue.toISOString();
+    }
+  } else if (value.length === 24) {
+    const utcValue = data.toUtc(value);
+    return utcValue.toISOString();
+  }
+  const epoch = parseInt(value, 10);
+  if (!isNaN(epoch)) {
+    return data.toUtc(epoch).toISOString();
+  }
+  return null;
+}
+function evaluateTimeRange(from, to, timeZone, fiscalYearStartMonth) {
+  return {
+    from: data.dateMath.parse(from, false, timeZone, fiscalYearStartMonth),
+    to: data.dateMath.parse(to, true, timeZone, fiscalYearStartMonth),
+    raw: {
+      from,
+      to
+    }
+  };
+}
+
+class SceneVariableValueChangedEvent extends data.BusEventWithPayload {
+}
+SceneVariableValueChangedEvent.type = "scene-variable-changed-value";
+
+class SceneVariableSet extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
+    this.variablesThatHaveChanged = /* @__PURE__ */ new Set();
+    this.variablesToUpdate = /* @__PURE__ */ new Set();
+    this.updating = /* @__PURE__ */ new Map();
+    this.onVariableValueChanged = (event) => {
+      const variableThatChanged = event.payload;
+      this.variablesThatHaveChanged.add(variableThatChanged);
+      if (this.updating.has(variableThatChanged)) {
+        return;
+      }
+      for (const otherVariable of this.state.variables) {
+        if (otherVariable.variableDependency) {
+          if (otherVariable.variableDependency.hasDependencyOn(variableThatChanged.state.name)) {
+            this.variablesToUpdate.add(otherVariable);
+          }
+        }
+      }
+      this.updateNextBatch();
+    };
+  }
+  getByName(name) {
+    return this.state.variables.find((x) => x.state.name === name);
+  }
+  activate() {
+    super.activate();
+    this._subs.add(this.subscribeToEvent(SceneVariableValueChangedEvent, this.onVariableValueChanged));
+    this.validateAndUpdateAll();
+  }
+  deactivate() {
+    var _a;
+    super.deactivate();
+    this.variablesToUpdate.clear();
+    for (const update of this.updating.values()) {
+      (_a = update.subscription) == null ? void 0 : _a.unsubscribe();
+    }
+  }
+  updateNextBatch() {
+    if (this.variablesToUpdate.size === 0 && this.variablesThatHaveChanged.size > 0) {
+      this.notifyDependentSceneObjects();
+      return;
+    }
+    for (const variable of this.variablesToUpdate) {
+      if (!variable.validateAndUpdate) {
+        throw new Error("Variable added to variablesToUpdate but does not have validateAndUpdate");
+      }
+      if (this.updating.has(variable)) {
+        continue;
+      }
+      if (this.hasDependendencyInUpdateQueue(variable)) {
+        continue;
+      }
+      const variableToUpdate = {
+        variable
+      };
+      this.updating.set(variable, variableToUpdate);
+      variableToUpdate.subscription = variable.validateAndUpdate().subscribe({
+        next: () => this.validateAndUpdateCompleted(variable),
+        error: (err) => this.handleVariableError(variable, err)
+      });
+    }
+  }
+  validateAndUpdateCompleted(variable) {
+    var _a;
+    const update = this.updating.get(variable);
+    (_a = update == null ? void 0 : update.subscription) == null ? void 0 : _a.unsubscribe();
+    this.updating.delete(variable);
+    this.variablesToUpdate.delete(variable);
+    this.updateNextBatch();
+  }
+  handleVariableError(variable, err) {
+    var _a;
+    const update = this.updating.get(variable);
+    (_a = update == null ? void 0 : update.subscription) == null ? void 0 : _a.unsubscribe();
+    this.updating.delete(variable);
+    this.variablesToUpdate.delete(variable);
+    variable.setState({ loading: false, error: err });
+  }
+  hasDependendencyInUpdateQueue(variable) {
+    var _a;
+    if (!variable.variableDependency) {
+      return false;
+    }
+    for (const otherVariable of this.variablesToUpdate.values()) {
+      if ((_a = variable.variableDependency) == null ? void 0 : _a.hasDependencyOn(otherVariable.state.name)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  validateAndUpdateAll() {
+    for (const variable of this.state.variables) {
+      if (variable.validateAndUpdate) {
+        this.variablesToUpdate.add(variable);
+      }
+    }
+    this.updateNextBatch();
+  }
+  notifyDependentSceneObjects() {
+    if (!this.parent) {
+      return;
+    }
+    this.traverseSceneAndNotify(this.parent);
+    this.variablesThatHaveChanged.clear();
+  }
+  traverseSceneAndNotify(sceneObject) {
+    if (this === sceneObject) {
+      return;
+    }
+    if (sceneObject.variableDependency) {
+      sceneObject.variableDependency.variableValuesChanged(this.variablesThatHaveChanged);
+    }
+    forEachSceneObjectInState(sceneObject.state, (child) => this.traverseSceneAndNotify(child));
+  }
+}
+
+const EmptyVariableSet = new SceneVariableSet({ variables: [] });
+const EmptyDataNode = new SceneDataNode({
+  data: {
+    state: data.LoadingState.Done,
+    series: [],
+    timeRange: data.getDefaultTimeRange()
+  }
+});
+const DefaultTimeRange = new SceneTimeRange();
+
+const _ScopedVarsVariable = class {
+  constructor(name, value) {
+    this.state = { name, value, type: "scopedvar" };
+  }
+  getValue(fieldPath) {
+    let { value } = this.state;
+    let realValue = value.value;
+    if (fieldPath) {
+      realValue = this.getFieldAccessor(fieldPath)(value.value);
+    } else {
+      realValue = value.value;
+    }
+    if (realValue === "string" || realValue === "number" || realValue === "boolean") {
+      return realValue;
+    }
+    return String(realValue);
+  }
+  getValueText() {
+    const { value } = this.state;
+    if (value.text != null) {
+      return String(value.text);
+    }
+    return String(value);
+  }
+  getFieldAccessor(fieldPath) {
+    const accessor = _ScopedVarsVariable.fieldAccessorCache[fieldPath];
+    if (accessor) {
+      return accessor;
+    }
+    return _ScopedVarsVariable.fieldAccessorCache[fieldPath] = lodash.property(fieldPath);
+  }
+};
+let ScopedVarsVariable = _ScopedVarsVariable;
+ScopedVarsVariable.fieldAccessorCache = {};
+let scopedVarsVariable;
+function getSceneVariableForScopedVar(name, value) {
+  if (!scopedVarsVariable) {
+    scopedVarsVariable = new ScopedVarsVariable(name, value);
+  } else {
+    scopedVarsVariable.state.name = name;
+    scopedVarsVariable.state.value = value;
+  }
+  return scopedVarsVariable;
+}
+
+const ALL_VARIABLE_TEXT = "All";
+const ALL_VARIABLE_VALUE = "$__all";
+const VARIABLE_REGEX = /\$(\w+)|\[\[(\w+?)(?::(\w+))?\]\]|\${(\w+)(?:\.([^:^\}]+))?(?::([^\}]+))?}/g;
+
+var FormatRegistryID = /* @__PURE__ */ ((FormatRegistryID2) => {
+  FormatRegistryID2["lucene"] = "lucene";
+  FormatRegistryID2["raw"] = "raw";
+  FormatRegistryID2["regex"] = "regex";
+  FormatRegistryID2["pipe"] = "pipe";
+  FormatRegistryID2["distributed"] = "distributed";
+  FormatRegistryID2["csv"] = "csv";
+  FormatRegistryID2["html"] = "html";
+  FormatRegistryID2["json"] = "json";
+  FormatRegistryID2["percentEncode"] = "percentencode";
+  FormatRegistryID2["singleQuote"] = "singlequote";
+  FormatRegistryID2["doubleQuote"] = "doublequote";
+  FormatRegistryID2["sqlString"] = "sqlstring";
+  FormatRegistryID2["date"] = "date";
+  FormatRegistryID2["glob"] = "glob";
+  FormatRegistryID2["text"] = "text";
+  FormatRegistryID2["queryParam"] = "queryparam";
+  return FormatRegistryID2;
+})(FormatRegistryID || {});
+const formatRegistry = new data.Registry(() => {
+  const formats = [
+    {
+      id: "lucene" /* lucene */,
+      name: "Lucene",
+      description: "Values are lucene escaped and multi-valued variables generate an OR expression",
+      formatter: (value) => {
+        if (typeof value === "string") {
+          return luceneEscape(value);
+        }
+        if (Array.isArray(value)) {
+          if (value.length === 0) {
+            return "__empty__";
+          }
+          const quotedValues = lodash.map(value, (val) => {
+            return '"' + luceneEscape(val) + '"';
+          });
+          return "(" + quotedValues.join(" OR ") + ")";
+        } else {
+          return luceneEscape(`${value}`);
+        }
+      }
+    },
+    {
+      id: "raw" /* raw */,
+      name: "raw",
+      description: "Keep value as is",
+      formatter: (value) => String(value)
+    },
+    {
+      id: "regex" /* regex */,
+      name: "Regex",
+      description: "Values are regex escaped and multi-valued variables generate a (<value>|<value>) expression",
+      formatter: (value) => {
+        if (typeof value === "string") {
+          return data.escapeRegex(value);
+        }
+        if (Array.isArray(value)) {
+          const escapedValues = value.map((item) => {
+            if (typeof item === "string") {
+              return data.escapeRegex(item);
+            } else {
+              return data.escapeRegex(String(item));
+            }
+          });
+          if (escapedValues.length === 1) {
+            return escapedValues[0];
+          }
+          return "(" + escapedValues.join("|") + ")";
+        }
+        return data.escapeRegex(`${value}`);
+      }
+    },
+    {
+      id: "pipe" /* pipe */,
+      name: "Pipe",
+      description: "Values are separated by | character",
+      formatter: (value) => {
+        if (typeof value === "string") {
+          return value;
+        }
+        if (Array.isArray(value)) {
+          return value.join("|");
+        }
+        return `${value}`;
+      }
+    },
+    {
+      id: "distributed" /* distributed */,
+      name: "Distributed",
+      description: "Multiple values are formatted like variable=value",
+      formatter: (value, args, variable) => {
+        if (typeof value === "string") {
+          return value;
+        }
+        if (Array.isArray(value)) {
+          value = lodash.map(value, (val, index) => {
+            if (index !== 0) {
+              return variable.state.name + "=" + val;
+            } else {
+              return val;
+            }
+          });
+          return value.join(",");
+        }
+        return `${value}`;
+      }
+    },
+    {
+      id: "csv" /* csv */,
+      name: "Csv",
+      description: "Comma-separated values",
+      formatter: (value) => {
+        if (typeof value === "string") {
+          return value;
+        }
+        if (lodash.isArray(value)) {
+          return value.join(",");
+        }
+        return String(value);
+      }
+    },
+    {
+      id: "html" /* html */,
+      name: "HTML",
+      description: "HTML escaping of values",
+      formatter: (value) => {
+        if (typeof value === "string") {
+          return data.textUtil.escapeHtml(value);
+        }
+        if (lodash.isArray(value)) {
+          return data.textUtil.escapeHtml(value.join(", "));
+        }
+        return data.textUtil.escapeHtml(String(value));
+      }
+    },
+    {
+      id: "json" /* json */,
+      name: "JSON",
+      description: "JSON stringify value",
+      formatter: (value) => {
+        return JSON.stringify(value);
+      }
+    },
+    {
+      id: "percentencode" /* percentEncode */,
+      name: "Percent encode",
+      description: "Useful for URL escaping values",
+      formatter: (value) => {
+        if (lodash.isArray(value)) {
+          return encodeURIComponentStrict("{" + value.join(",") + "}");
+        }
+        return encodeURIComponentStrict(value);
+      }
+    },
+    {
+      id: "singlequote" /* singleQuote */,
+      name: "Single quote",
+      description: "Single quoted values",
+      formatter: (value) => {
+        const regExp = new RegExp(`'`, "g");
+        if (lodash.isArray(value)) {
+          return lodash.map(value, (v) => `'${lodash.replace(v, regExp, `\\'`)}'`).join(",");
+        }
+        let strVal = typeof value === "string" ? value : String(value);
+        return `'${lodash.replace(strVal, regExp, `\\'`)}'`;
+      }
+    },
+    {
+      id: "doublequote" /* doubleQuote */,
+      name: "Double quote",
+      description: "Double quoted values",
+      formatter: (value) => {
+        const regExp = new RegExp('"', "g");
+        if (lodash.isArray(value)) {
+          return lodash.map(value, (v) => `"${lodash.replace(v, regExp, '\\"')}"`).join(",");
+        }
+        let strVal = typeof value === "string" ? value : String(value);
+        return `"${lodash.replace(strVal, regExp, '\\"')}"`;
+      }
+    },
+    {
+      id: "sqlstring" /* sqlString */,
+      name: "SQL string",
+      description: "SQL string quoting and commas for use in IN statements and other scenarios",
+      formatter: (value) => {
+        const regExp = new RegExp(`'`, "g");
+        if (lodash.isArray(value)) {
+          return lodash.map(value, (v) => `'${lodash.replace(v, regExp, "''")}'`).join(",");
+        }
+        let strVal = typeof value === "string" ? value : String(value);
+        return `'${lodash.replace(strVal, regExp, "''")}'`;
+      }
+    },
+    {
+      id: "date" /* date */,
+      name: "Date",
+      description: "Format date in different ways",
+      formatter: (value, args) => {
+        var _a;
+        let nrValue = NaN;
+        if (typeof value === "number") {
+          nrValue = value;
+        } else if (typeof value === "string") {
+          nrValue = parseInt(value, 10);
+        }
+        if (isNaN(nrValue)) {
+          return "NaN";
+        }
+        const arg = (_a = args[0]) != null ? _a : "iso";
+        switch (arg) {
+          case "ms":
+            return String(value);
+          case "seconds":
+            return `${Math.round(nrValue / 1e3)}`;
+          case "iso":
+            return data.dateTime(nrValue).toISOString();
+          default:
+            return data.dateTime(nrValue).format(arg);
+        }
+      }
+    },
+    {
+      id: "glob" /* glob */,
+      name: "Glob",
+      description: "Format multi-valued variables using glob syntax, example {value1,value2}",
+      formatter: (value) => {
+        if (lodash.isArray(value) && value.length > 1) {
+          return "{" + value.join(",") + "}";
+        }
+        return String(value);
+      }
+    },
+    {
+      id: "text" /* text */,
+      name: "Text",
+      description: "Format variables in their text representation. Example in multi-variable scenario A + B + C.",
+      formatter: (value, _args, variable) => {
+        if (variable.getValueText) {
+          return variable.getValueText();
+        }
+        return String(value);
+      }
+    },
+    {
+      id: "queryparam" /* queryParam */,
+      name: "Query parameter",
+      description: "Format variables as URL parameters. Example in multi-variable scenario A + B + C => var-foo=A&var-foo=B&var-foo=C.",
+      formatter: (value, _args, variable) => {
+        if (Array.isArray(value)) {
+          return value.map((v) => formatQueryParameter(variable.state.name, v)).join("&");
+        }
+        return formatQueryParameter(variable.state.name, value);
+      }
+    }
+  ];
+  return formats;
+});
+function luceneEscape(value) {
+  if (isNaN(+value) === false) {
+    return value;
+  }
+  return value.replace(/([\!\*\+\-\=<>\s\&\|\(\)\[\]\{\}\^\~\?\:\\/"])/g, "\\$1");
+}
+function encodeURIComponentStrict(str) {
+  if (typeof str === "object") {
+    str = String(str);
+  }
+  return encodeURIComponent(str).replace(/[!'()*]/g, (c) => {
+    return "%" + c.charCodeAt(0).toString(16).toUpperCase();
+  });
+}
+function formatQueryParameter(name, value) {
+  return `var-${name}=${encodeURIComponentStrict(value)}`;
+}
+
+function sceneInterpolator(sceneObject, target, getVariables, scopedVars, format) {
+  if (!target) {
+    return target != null ? target : "";
+  }
+  if (getVariables(sceneObject) === EmptyVariableSet) {
+    return 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;
+    let variable;
+    if (scopedVars && scopedVars[variableName]) {
+      variable = getSceneVariableForScopedVar(variableName, scopedVars[variableName]);
+    } else {
+      variable = lookupSceneVariable(variableName, sceneObject);
+    }
+    if (!variable) {
+      return match;
+    }
+    return formatValue(variable, variable.getValue(fieldPath), fmt);
+  });
+}
+function lookupSceneVariable(name, sceneObject) {
+  const variables = sceneObject.state.$variables;
+  if (!variables) {
+    if (sceneObject.parent) {
+      return lookupSceneVariable(name, sceneObject.parent);
+    } else {
+      return null;
+    }
+  }
+  const found = variables.getByName(name);
+  if (found) {
+    return found;
+  } else if (sceneObject.parent) {
+    return lookupSceneVariable(name, sceneObject.parent);
+  }
+  return null;
+}
+function formatValue(variable, value, formatNameOrFn) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "object" && "isCustomValue" in value && formatNameOrFn !== FormatRegistryID.text) {
+    return value.toString();
+  }
+  if (!Array.isArray(value) && typeof value === "object") {
+    value = `${value}`;
+  }
+  if (typeof formatNameOrFn === "function") {
+    return formatNameOrFn(value, {
+      name: variable.state.name,
+      type: variable.state.type
+    });
+  }
+  let args = [];
+  if (!formatNameOrFn) {
+    formatNameOrFn = FormatRegistryID.glob;
+  } else {
+    args = formatNameOrFn.split(":");
+    if (args.length > 1) {
+      formatNameOrFn = args[0];
+      args = args.slice(1);
+    } else {
+      args = [];
+    }
+  }
+  let formatter = formatRegistry.getIfExists(formatNameOrFn);
+  if (!formatter) {
+    console.error(`Variable format ${formatNameOrFn} not found. Using glob format as fallback.`);
+    formatter = formatRegistry.get(FormatRegistryID.glob);
+  }
+  return formatter.formatter(value, args, variable);
+}
+
+function getVariables(sceneObject) {
+  if (sceneObject.state.$variables) {
+    return sceneObject.state.$variables;
+  }
+  if (sceneObject.parent) {
+    return getVariables(sceneObject.parent);
+  }
+  return EmptyVariableSet;
+}
+function getData(sceneObject) {
+  const { $data } = sceneObject.state;
+  if ($data) {
+    return $data;
+  }
+  if (sceneObject.parent) {
+    return getData(sceneObject.parent);
+  }
+  return EmptyDataNode;
+}
+function getTimeRange(sceneObject) {
+  const { $timeRange } = sceneObject.state;
+  if ($timeRange) {
+    return $timeRange;
+  }
+  if (sceneObject.parent) {
+    return getTimeRange(sceneObject.parent);
+  }
+  return DefaultTimeRange;
+}
+function getSceneEditor(sceneObject) {
+  const { $editor } = sceneObject.state;
+  if ($editor) {
+    return $editor;
+  }
+  if (sceneObject.parent) {
+    return getSceneEditor(sceneObject.parent);
+  }
+  throw new Error("No editor found in scene tree");
+}
+function getLayout(scene) {
+  if (scene.constructor.name === "SceneFlexLayout" || scene.constructor.name === "SceneGridLayout") {
+    return scene;
+  }
+  if (scene.parent) {
+    return getLayout(scene.parent);
+  }
+  throw new Error("No layout found in scene tree");
+}
+function interpolate(sceneObject, value, scopedVars, format) {
+  if (!value || !sceneObject.variableDependency || sceneObject.variableDependency.getNames().size === 0) {
+    return value != null ? value : "";
+  }
+  return sceneInterpolator(sceneObject, value, getVariables, scopedVars, format);
+}
+const sceneGraph = {
+  getVariables,
+  getData,
+  getTimeRange,
+  getSceneEditor,
+  getLayout,
+  interpolate
+};
+
+class VariableDependencyConfig {
+  constructor(_sceneObject, options) {
+    this._sceneObject = _sceneObject;
+    this._dependencies = /* @__PURE__ */ new Set();
+    this.scanCount = 0;
+    this.defaultHandlerReferencedVariableValueChanged = () => {
+      this._sceneObject.forceRender();
+    };
+    var _a;
+    this._statePaths = options.statePaths;
+    this._onReferencedVariableValueChanged = (_a = options.onReferencedVariableValueChanged) != null ? _a : this.defaultHandlerReferencedVariableValueChanged;
+  }
+  hasDependencyOn(name) {
+    return this.getNames().has(name);
+  }
+  variableValuesChanged(variables) {
+    const deps = this.getNames();
+    for (const variable of variables) {
+      if (deps.has(variable.state.name)) {
+        this._onReferencedVariableValueChanged();
+        return;
+      }
+    }
+  }
+  getNames() {
+    const prevState = this._state;
+    const newState = this._state = this._sceneObject.state;
+    if (!prevState) {
+      this.scanStateForDependencies(this._state);
+      return this._dependencies;
+    }
+    if (newState !== prevState) {
+      if (this._statePaths) {
+        for (const path of this._statePaths) {
+          if (newState[path] !== prevState[path]) {
+            this.scanStateForDependencies(newState);
+            break;
+          }
+        }
+      } else {
+        this.scanStateForDependencies(newState);
+      }
+    }
+    return this._dependencies;
+  }
+  scanStateForDependencies(state) {
+    this._dependencies.clear();
+    this.scanCount += 1;
+    if (this._statePaths) {
+      for (const path of this._statePaths) {
+        const value = state[path];
+        if (value) {
+          this.extractVariablesFrom(value);
+        }
+      }
+    } else {
+      this.extractVariablesFrom(state);
+    }
+  }
+  extractVariablesFrom(value) {
+    VARIABLE_REGEX.lastIndex = 0;
+    const stringToCheck = typeof value !== "string" ? safeStringifyValue(value) : value;
+    const matches = stringToCheck.matchAll(VARIABLE_REGEX);
+    if (!matches) {
+      return;
+    }
+    for (const match of matches) {
+      const [, var1, var2, , var3] = match;
+      const variableName = var1 || var2 || var3;
+      this._dependencies.add(variableName);
+    }
+  }
+}
+const safeStringifyValue = (value) => {
+  try {
+    return JSON.stringify(value, null);
+  } catch (error) {
+    console.error(error);
+  }
+  return "";
+};
+
+var __defProp$b = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+let counter = 100;
+function getNextRequestId() {
+  return "QS" + counter++;
+}
+class SceneQueryRunner extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
+    this._variableDependency = new VariableDependencyConfig(this, {
+      statePaths: ["queries"],
+      onReferencedVariableValueChanged: () => this.runQueries()
+    });
+    this.onDataReceived = (data) => {
+      this.setState({ data });
+    };
+  }
+  activate() {
+    super.activate();
+    const timeRange = sceneGraph.getTimeRange(this);
+    this._subs.add(
+      timeRange.subscribeToState({
+        next: (timeRange2) => {
+          this.runWithTimeRange(timeRange2.value);
+        }
+      })
+    );
+    if (this.shouldRunQueriesOnActivate()) {
+      this.runQueries();
+    }
+  }
+  shouldRunQueriesOnActivate() {
+    if (this.state.data) {
+      return false;
+    }
+    if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {
+      return false;
+    }
+    return true;
+  }
+  deactivate() {
+    super.deactivate();
+    if (this._querySub) {
+      this._querySub.unsubscribe();
+      this._querySub = void 0;
+    }
+  }
+  setContainerWidth(width) {
+    if (!this._containerWidth && width > 0) {
+      this._containerWidth = width;
+      if (this.state.maxDataPointsFromWidth && !this.state.maxDataPoints) {
+        setTimeout(() => {
+          if (this.isActive && !this._querySub) {
+            this.runQueries();
+          }
+        }, 0);
+      }
+    } else {
+      this._containerWidth = width;
+    }
+  }
+  runQueries() {
+    const timeRange = sceneGraph.getTimeRange(this);
+    this.runWithTimeRange(timeRange.state.value);
+  }
+  getMaxDataPoints() {
+    var _a, _b;
+    return (_b = (_a = this.state.maxDataPoints) != null ? _a : this._containerWidth) != null ? _b : 500;
+  }
+  async runWithTimeRange(timeRange) {
+    const { datasource, minInterval, queries } = this.state;
+    const request = {
+      app: data.CoreApp.Dashboard,
+      requestId: getNextRequestId(),
+      timezone: "browser",
+      panelId: 1,
+      dashboardId: 1,
+      range: timeRange,
+      interval: "1s",
+      intervalMs: 1e3,
+      targets: lodash.cloneDeep(queries),
+      maxDataPoints: this.getMaxDataPoints(),
+      scopedVars: {},
+      startTime: Date.now()
+    };
+    try {
+      const ds = await getDataSource(datasource, request.scopedVars);
+      request.targets = request.targets.map((query) => {
+        if (!query.datasource) {
+          query.datasource = ds.getRef();
+        }
+        return query;
+      });
+      const lowerIntervalLimit = minInterval ? minInterval : ds.interval;
+      const norm = data.rangeUtil.calculateInterval(timeRange, 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 runRequest = runtime.getRunRequest();
+      this._querySub = runRequest(ds, request).pipe(getTransformationsStream(this, this.state.transformations)).subscribe({
+        next: this.onDataReceived
+      });
+    } catch (err) {
+      console.error("PanelQueryRunner Error", err);
+    }
+  }
+}
+async function getDataSource(datasource, scopedVars) {
+  if (datasource && datasource.query) {
+    return datasource;
+  }
+  return await runtime.getDataSourceSrv().get(datasource, scopedVars);
+}
+const getTransformationsStream = (sceneObject, transformations) => (inputStream) => {
+  return inputStream.pipe(
+    rxjs.mergeMap((data$1) => {
+      if (!transformations || transformations.length === 0) {
+        return rxjs.of(data$1);
+      }
+      const replace = (option) => {
+        var _a;
+        return sceneGraph.interpolate(sceneObject, option, (_a = data$1 == null ? void 0 : data$1.request) == null ? void 0 : _a.scopedVars);
+      };
+      transformations.forEach((transform) => {
+        transform.replace = replace;
+      });
+      return data.transformDataFrame(transformations, data$1.series).pipe(rxjs.map((series) => __spreadProps$5(__spreadValues$b({}, data$1), { series })));
+    })
+  );
+};
+
+class SceneDataTransformer extends SceneObjectBase {
+  activate() {
+    super.activate();
+    if (!this.parent || !this.parent.parent) {
+      return;
+    }
+    const initialData = sceneGraph.getData(this.parent.parent).state.data;
+    if (initialData) {
+      this.transformData(rxjs.of(initialData));
+    }
+    this._subs.add(
+      sceneGraph.getData(this.parent.parent).subscribeToState({
+        next: (data$1) => {
+          var _a;
+          if (((_a = data$1.data) == null ? void 0 : _a.state) === data.LoadingState.Done) {
+            this.transformData(rxjs.of(data$1.data));
+          } else {
+            this.setState({ data: data$1.data });
+          }
+        }
+      })
+    );
+  }
+  deactivate() {
+    super.deactivate();
+    if (this._transformationsSub) {
+      this._transformationsSub.unsubscribe();
+      this._transformationsSub = void 0;
+    }
+  }
+  transformData(data) {
+    if (this._transformationsSub) {
+      this._transformationsSub.unsubscribe();
+      this._transformationsSub = void 0;
+    }
+    this._transformationsSub = data.pipe(getTransformationsStream(this, this.state.transformations)).subscribe({
+      next: (data2) => {
+        this.setState({ data: data2 });
+      }
+    });
+  }
+}
+
+class VariableValueSelectors extends SceneObjectBase {
+}
+VariableValueSelectors.Component = VariableValueSelectorsRenderer;
+function VariableValueSelectorsRenderer({ model }) {
+  const variables = sceneGraph.getVariables(model).useState();
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, variables.variables.map((variable) => /* @__PURE__ */ React__default["default"].createElement(VariableValueSelectWrapper, {
+    key: variable.state.key,
+    variable
+  })));
+}
+function VariableValueSelectWrapper({ variable }) {
+  const state = variable.useState();
+  if (state.hide === data.VariableHide.hideVariable) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "gf-form"
+  }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
+    state
+  }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
+    model: variable
+  }));
+}
+function VariableLabel({ state }) {
+  var _a;
+  if (state.hide === data.VariableHide.hideLabel) {
+    return null;
+  }
+  const elementId = `var-${state.key}`;
+  const labelOrName = (_a = state.label) != null ? _a : state.name;
+  if (state.description) {
+    return /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {
+      content: state.description,
+      placement: "bottom"
+    }, /* @__PURE__ */ React__default["default"].createElement("label", {
+      className: "gf-form-label gf-form-label--variable",
+      "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName),
+      htmlFor: elementId
+    }, labelOrName));
+  }
+  return /* @__PURE__ */ React__default["default"].createElement("label", {
+    className: "gf-form-label gf-form-label--variable",
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName),
+    htmlFor: elementId
+  }, labelOrName);
+}
+
+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$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;
+};
+class ConstantVariable extends SceneObjectBase {
+  constructor(initialState) {
+    super(__spreadValues$a({
+      type: "constant",
+      value: "",
+      name: ""
+    }, initialState));
+  }
+  getValue() {
+    return this.state.value;
+  }
+}
+
+function VariableValueSelect({ model }) {
+  const { value, key, loading } = model.useState();
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
+    id: key,
+    placeholder: "Select value",
+    width: "auto",
+    value,
+    allowCustomValue: true,
+    tabSelectsValue: false,
+    isLoading: loading,
+    options: model.getOptionsForSelect(),
+    onChange: (newValue) => {
+      model.changeValueTo(newValue.value, newValue.label);
+    }
+  });
+}
+function VariableValueSelectMulti({ model }) {
+  const { value, key, loading } = model.useState();
+  const arrayValue = lodash.isArray(value) ? value : [value];
+  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
+    id: key,
+    placeholder: "Select value",
+    width: "auto",
+    value: arrayValue,
+    tabSelectsValue: false,
+    allowCustomValue: true,
+    isLoading: loading,
+    options: model.getOptionsForSelect(),
+    closeMenuOnSelect: false,
+    isClearable: true,
+    onOpenMenu: () => {
+    },
+    onChange: (newValue) => {
+      model.changeValueTo(
+        newValue.map((v) => v.value),
+        newValue.map((v) => v.label)
+      );
+    }
+  });
+}
+function renderSelectForVariable(model) {
+  if (model.state.isMulti) {
+    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelectMulti, {
+      model
+    });
+  } else {
+    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelect, {
+      model
+    });
+  }
+}
+
+class MultiValueVariable extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
+    this._urlSync = new MultiValueUrlSyncHandler(this);
+  }
+  validateAndUpdate() {
+    return this.getValueOptions({}).pipe(
+      rxjs.map((options) => {
+        this.updateValueGivenNewOptions(options);
+        return {};
+      })
+    );
+  }
+  updateValueGivenNewOptions(options) {
+    const stateUpdate = {
+      options,
+      loading: false,
+      value: this.state.value,
+      text: this.state.text
+    };
+    if (options.length === 0) ; else if (this.hasAllValue()) ; else if (this.state.isMulti) {
+      const currentValues = Array.isArray(this.state.value) ? this.state.value : [this.state.value];
+      const validValues = currentValues.filter((v) => options.find((o) => o.value === v));
+      if (validValues.length === 0) {
+        const defaultState = this.getDefaultMultiState(options);
+        stateUpdate.value = defaultState.value;
+        stateUpdate.text = defaultState.text;
+      } else if (!lodash.isEqual(validValues, this.state.value)) {
+        const validTexts = validValues.map((v) => options.find((o) => o.value === v).label);
+        stateUpdate.value = validValues;
+        stateUpdate.text = validTexts;
+      }
+    } else {
+      const foundCurrent = options.find((x) => x.value === this.state.value);
+      if (!foundCurrent) {
+        if (this.state.defaultToAll) {
+          stateUpdate.value = ALL_VARIABLE_VALUE;
+          stateUpdate.text = ALL_VARIABLE_TEXT;
+        } else {
+          stateUpdate.value = options[0].value;
+          stateUpdate.text = options[0].label;
+        }
+      }
+    }
+    const { value: prevValue, text: prevText } = this.state;
+    this.setStateHelper(stateUpdate);
+    if (stateUpdate.value !== prevValue || stateUpdate.text !== prevText || this.hasAllValue()) {
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    }
+  }
+  getValue() {
+    if (this.hasAllValue()) {
+      if (this.state.allValue) {
+        return new CustomAllValue(this.state.allValue);
+      }
+      return this.state.options.map((x) => x.value);
+    }
+    return this.state.value;
+  }
+  getValueText() {
+    if (this.hasAllValue()) {
+      return ALL_VARIABLE_TEXT;
+    }
+    if (Array.isArray(this.state.text)) {
+      return this.state.text.join(" + ");
+    }
+    return String(this.state.text);
+  }
+  hasAllValue() {
+    const value = this.state.value;
+    return value === ALL_VARIABLE_VALUE || Array.isArray(value) && value[0] === ALL_VARIABLE_VALUE;
+  }
+  getDefaultMultiState(options) {
+    if (this.state.defaultToAll) {
+      return { value: [ALL_VARIABLE_VALUE], text: [ALL_VARIABLE_TEXT] };
+    } else {
+      return { value: [options[0].value], text: [options[0].label] };
+    }
+  }
+  changeValueTo(value, text) {
+    if (value === this.state.value && text === this.state.text) {
+      return;
+    }
+    if (!text) {
+      if (Array.isArray(value)) {
+        text = value.map((v) => this.findLabelTextForValue(v));
+      } else {
+        text = this.findLabelTextForValue(value);
+      }
+    }
+    if (Array.isArray(value)) {
+      if (value.length === 0) {
+        const state = this.getDefaultMultiState(this.state.options);
+        value = state.value;
+        text = state.text;
+      }
+      if (value[value.length - 1] === ALL_VARIABLE_VALUE) {
+        value = [ALL_VARIABLE_VALUE];
+        text = [ALL_VARIABLE_TEXT];
+      } else if (value[0] === ALL_VARIABLE_VALUE && value.length > 1) {
+        value.shift();
+        if (Array.isArray(text)) {
+          text.shift();
+        }
+      }
+    }
+    this.setStateHelper({ value, text, loading: false });
+    this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+  }
+  findLabelTextForValue(value) {
+    const option = this.state.options.find((x) => x.value === value);
+    if (option) {
+      return option.label;
+    }
+    const optionByLabel = this.state.options.find((x) => x.label === value);
+    if (optionByLabel) {
+      return optionByLabel.label;
+    }
+    return value;
+  }
+  setStateHelper(state) {
+    const test = this;
+    test.setState(state);
+  }
+  getOptionsForSelect() {
+    let options = this.state.options;
+    if (this.state.includeAll) {
+      options = [{ value: ALL_VARIABLE_VALUE, label: ALL_VARIABLE_TEXT }, ...options];
+    }
+    if (!Array.isArray(this.state.value)) {
+      const current = options.find((x) => x.value === this.state.value);
+      if (!current) {
+        options = [{ value: this.state.value, label: String(this.state.text) }, ...options];
+      }
+    }
+    return options;
+  }
+}
+class CustomAllValue {
+  constructor(_value) {
+    this._value = _value;
+    this.isCustomValue = true;
+  }
+  toString() {
+    return this._value;
+  }
+}
+class MultiValueUrlSyncHandler {
+  constructor(_sceneObject) {
+    this._sceneObject = _sceneObject;
+  }
+  getKey() {
+    return `var-${this._sceneObject.state.name}`;
+  }
+  getKeys() {
+    return [this.getKey()];
+  }
+  getUrlState(state) {
+    let urlValue = null;
+    let value = state.value;
+    if (Array.isArray(value)) {
+      urlValue = value.map(String);
+    } else {
+      urlValue = String(value);
+    }
+    return { [this.getKey()]: urlValue };
+  }
+  updateFromUrl(values) {
+    const urlValue = values[this.getKey()];
+    if (urlValue != null) {
+      this._sceneObject.changeValueTo(urlValue);
+    }
+  }
+}
+
+var __defProp$9 = Object.defineProperty;
+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;
+};
+class CustomVariable extends MultiValueVariable {
+  constructor(initialState) {
+    super(__spreadValues$9({
+      type: "custom",
+      query: "",
+      value: "",
+      text: "",
+      options: [],
+      name: ""
+    }, initialState));
+    this._variableDependency = new VariableDependencyConfig(this, {
+      statePaths: ["query"]
+    });
+  }
+  getValueOptions(args) {
+    var _a;
+    const match = (_a = this.state.query.match(/(?:\\,|[^,])+/g)) != null ? _a : [];
+    const options = match.map((text) => {
+      var _a2;
+      text = text.replace(/\\,/g, ",");
+      const textMatch = (_a2 = /^(.+)\s:\s(.+)$/g.exec(text)) != null ? _a2 : [];
+      if (textMatch.length === 3) {
+        const [, key, value] = textMatch;
+        return { label: key.trim(), value: value.trim() };
+      } else {
+        return { label: text.trim(), value: text.trim() };
+      }
+    });
+    return rxjs.of(options);
+  }
+}
+CustomVariable.Component = ({ model }) => {
+  return renderSelectForVariable(model);
+};
+
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
+    }
+  return a;
+};
+class DataSourceVariable extends MultiValueVariable {
+  constructor(initialState) {
+    super(__spreadValues$8({
+      type: "datasource",
+      value: "",
+      text: "",
+      options: [],
+      name: "",
+      regex: "",
+      query: ""
+    }, initialState));
+    this._variableDependency = new VariableDependencyConfig(this, {
+      statePaths: ["regex"]
+    });
+  }
+  getValueOptions(args) {
+    if (!this.state.query) {
+      return rxjs.of([]);
+    }
+    const dataSourceTypes = this.getDataSourceTypes();
+    let regex;
+    if (this.state.regex) {
+      const interpolated = sceneGraph.interpolate(this, this.state.regex, void 0, "regex");
+      regex = data.stringToJsRegex(interpolated);
+    }
+    const options = [];
+    for (let i = 0; i < dataSourceTypes.length; i++) {
+      const source = dataSourceTypes[i];
+      if (source.meta.id !== this.state.query) {
+        continue;
+      }
+      if (isValid(source, regex)) {
+        options.push({ label: source.name, value: source.name });
+      }
+      if (isDefault(source, regex)) {
+        options.push({ label: "default", value: "default" });
+      }
+    }
+    if (options.length === 0) {
+      options.push({ label: "No data sources found", value: "" });
+    }
+    return rxjs.of(options);
+  }
+  getDataSourceTypes() {
+    return runtime.getDataSourceSrv().getList({ metrics: true, variables: false });
+  }
+}
+DataSourceVariable.Component = ({ model }) => {
+  return renderSelectForVariable(model);
+};
+function isValid(source, regex) {
+  if (!regex) {
+    return true;
+  }
+  return regex.exec(source.name);
+}
+function isDefault(source, regex) {
+  if (!source.isDefault) {
+    return false;
+  }
+  if (!regex) {
+    return true;
+  }
+  return regex.exec("default");
+}
+
+const hasLegacyVariableSupport = (datasource) => {
+  return Boolean(datasource.metricFindQuery) && !Boolean(datasource.variables);
+};
+const hasStandardVariableSupport = (datasource) => {
+  if (!datasource.variables) {
+    return false;
+  }
+  if (datasource.variables.getType() !== data.VariableSupportType.Standard) {
+    return false;
+  }
+  const variableSupport = datasource.variables;
+  return "toDataQuery" in variableSupport && Boolean(variableSupport.toDataQuery);
+};
+
+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));
+class StandardQueryRunner {
+  constructor(datasource, _runRequest = runtime.getRunRequest()) {
+    this.datasource = datasource;
+    this._runRequest = _runRequest;
+  }
+  getTarget(variable) {
+    if (hasStandardVariableSupport(this.datasource)) {
+      return this.datasource.variables.toDataQuery(variable.state.query);
+    }
+    throw new Error("Couldn't create a target with supplied arguments.");
+  }
+  runRequest(_, request) {
+    if (!hasStandardVariableSupport(this.datasource)) {
+      return getEmptyMetricFindValueObservable();
+    }
+    if (!this.datasource.variables.query) {
+      return this._runRequest(this.datasource, request);
+    }
+    return this._runRequest(this.datasource, request, this.datasource.variables.query);
+  }
+}
+class LegacyQueryRunner {
+  constructor(datasource) {
+    this.datasource = datasource;
+  }
+  getTarget(variable) {
+    if (hasLegacyVariableSupport(this.datasource)) {
+      return variable.state.query;
+    }
+    throw new Error("Couldn't create a target with supplied arguments.");
+  }
+  runRequest({ variable }, request) {
+    if (!hasLegacyVariableSupport(this.datasource)) {
+      return getEmptyMetricFindValueObservable();
+    }
+    return rxjs.from(
+      this.datasource.metricFindQuery(variable.state.query, __spreadProps$4(__spreadValues$7({}, request), {
+        variable: {
+          name: variable.state.name,
+          type: variable.state.type
+        }
+      }))
+    ).pipe(
+      rxjs.mergeMap((values) => {
+        if (!values || !values.length) {
+          return getEmptyMetricFindValueObservable();
+        }
+        const series = values;
+        return rxjs.of({ series, state: data.LoadingState.Done, timeRange: request.range });
+      })
+    );
+  }
+}
+function getEmptyMetricFindValueObservable() {
+  return rxjs.of({ state: data.LoadingState.Done, series: [], timeRange: data.getDefaultTimeRange() });
+}
+function createQueryVariableRunnerFactory(datasource) {
+  if (hasStandardVariableSupport(datasource)) {
+    return new StandardQueryRunner(datasource, runtime.getRunRequest());
+  }
+  if (hasLegacyVariableSupport(datasource)) {
+    return new LegacyQueryRunner(datasource);
+  }
+  throw new Error(`Couldn't create a query runner for datasource ${datasource.type}`);
+}
+let createQueryVariableRunner = createQueryVariableRunnerFactory;
+
+const metricNamesToVariableValues = (variableRegEx, sort, metricNames) => {
+  var _a, _b, _c, _d, _e, _f;
+  let regex;
+  let options = [];
+  if (variableRegEx) {
+    regex = data.stringToJsRegex(variableRegEx);
+  }
+  for (let i = 0; i < metricNames.length; i++) {
+    const item = metricNames[i];
+    let text = item.text === void 0 || item.text === null ? item.value : item.text;
+    let value = item.value === void 0 || item.value === null ? item.text : item.value;
+    if (lodash.isNumber(value)) {
+      value = value.toString();
+    }
+    if (lodash.isNumber(text)) {
+      text = text.toString();
+    }
+    if (regex) {
+      const matches = getAllMatches(value, regex);
+      if (!matches.length) {
+        continue;
+      }
+      const valueGroup = matches.find((m) => m.groups && m.groups.value);
+      const textGroup = matches.find((m) => m.groups && m.groups.text);
+      const firstMatch = matches.find((m) => m.length > 1);
+      const manyMatches = matches.length > 1 && firstMatch;
+      if (valueGroup || textGroup) {
+        value = (_c = (_a = valueGroup == null ? void 0 : valueGroup.groups) == null ? void 0 : _a.value) != null ? _c : (_b = textGroup == null ? void 0 : textGroup.groups) == null ? void 0 : _b.text;
+        text = (_f = (_d = textGroup == null ? void 0 : textGroup.groups) == null ? void 0 : _d.text) != null ? _f : (_e = valueGroup == null ? void 0 : valueGroup.groups) == null ? void 0 : _e.value;
+      } else if (manyMatches) {
+        for (let j = 0; j < matches.length; j++) {
+          const match = matches[j];
+          options.push({ label: match[1], value: match[1] });
+        }
+        continue;
+      } else if (firstMatch) {
+        text = firstMatch[1];
+        value = firstMatch[1];
+      }
+    }
+    options.push({ label: text, value });
+  }
+  options = lodash.uniqBy(options, "value");
+  return sortVariableValues(options, sort);
+};
+const getAllMatches = (str, regex) => {
+  const results = [];
+  let matches = null;
+  regex.lastIndex = 0;
+  do {
+    matches = regex.exec(str);
+    if (matches) {
+      results.push(matches);
+    }
+  } while (regex.global && matches && matches[0] !== "" && matches[0] !== void 0);
+  return results;
+};
+const sortVariableValues = (options, sortOrder) => {
+  if (sortOrder === data.VariableSort.disabled) {
+    return options;
+  }
+  const sortType = Math.ceil(sortOrder / 2);
+  const reverseSort = sortOrder % 2 === 0;
+  if (sortType === 1) {
+    options = lodash.sortBy(options, "text");
+  } else if (sortType === 2) {
+    options = lodash.sortBy(options, (opt) => {
+      if (!opt.text) {
+        return -1;
+      }
+      const matches = opt.text.match(/.*?(\d+).*/);
+      if (!matches || matches.length < 2) {
+        return -1;
+      } else {
+        return parseInt(matches[1], 10);
+      }
+    });
+  } else if (sortType === 3) {
+    options = lodash.sortBy(options, (opt) => {
+      return lodash.toLower(opt.text);
+    });
+  }
+  if (reverseSort) {
+    options = options.reverse();
+  }
+  return options;
+};
+
+function toMetricFindValues() {
+  return (source) => source.pipe(
+    rxjs.map((panelData) => {
+      const frames = panelData.series;
+      if (!frames || !frames.length) {
+        return [];
+      }
+      if (areMetricFindValues(frames)) {
+        return frames;
+      }
+      const processedDataFrames = data.getProcessedDataFrames(frames);
+      const metrics = [];
+      let valueIndex = -1;
+      let textIndex = -1;
+      let stringIndex = -1;
+      let expandableIndex = -1;
+      for (const frame of processedDataFrames) {
+        for (let index = 0; index < frame.fields.length; index++) {
+          const field = frame.fields[index];
+          const fieldName = data.getFieldDisplayName(field, frame, frames).toLowerCase();
+          if (field.type === data.FieldType.string && stringIndex === -1) {
+            stringIndex = index;
+          }
+          if (fieldName === "text" && field.type === data.FieldType.string && textIndex === -1) {
+            textIndex = index;
+          }
+          if (fieldName === "value" && field.type === data.FieldType.string && valueIndex === -1) {
+            valueIndex = index;
+          }
+          if (fieldName === "expandable" && (field.type === data.FieldType.boolean || field.type === data.FieldType.number) && expandableIndex === -1) {
+            expandableIndex = index;
+          }
+        }
+      }
+      if (stringIndex === -1) {
+        throw new Error("Couldn't find any field of type string in the results.");
+      }
+      for (const frame of frames) {
+        for (let index = 0; index < frame.length; index++) {
+          const expandable = expandableIndex !== -1 ? frame.fields[expandableIndex].values.get(index) : void 0;
+          const string = frame.fields[stringIndex].values.get(index);
+          const text = textIndex !== -1 ? frame.fields[textIndex].values.get(index) : null;
+          const value = valueIndex !== -1 ? frame.fields[valueIndex].values.get(index) : null;
+          if (valueIndex === -1 && textIndex === -1) {
+            metrics.push({ text: string, value: string, expandable });
+            continue;
+          }
+          if (valueIndex === -1 && textIndex !== -1) {
+            metrics.push({ text, value: text, expandable });
+            continue;
+          }
+          if (valueIndex !== -1 && textIndex === -1) {
+            metrics.push({ text: value, value, expandable });
+            continue;
+          }
+          metrics.push({ text, value, expandable });
+        }
+      }
+      return metrics;
+    })
+  );
+}
+function areMetricFindValues(data$1) {
+  if (!data$1) {
+    return false;
+  }
+  if (!data$1.length) {
+    return true;
+  }
+  const firstValue = data$1[0];
+  if (data.isDataFrame(firstValue)) {
+    return false;
+  }
+  for (const firstValueKey in firstValue) {
+    if (!firstValue.hasOwnProperty(firstValueKey)) {
+      continue;
+    }
+    if (firstValue[firstValueKey] !== null && typeof firstValue[firstValueKey] !== "string" && typeof firstValue[firstValueKey] !== "number") {
+      continue;
+    }
+    const key = firstValueKey.toLowerCase();
+    if (key === "text" || key === "value") {
+      return true;
+    }
+  }
+  return false;
+}
+
+var __defProp$6 = Object.defineProperty;
+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$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;
+};
+class QueryVariable extends MultiValueVariable {
+  constructor(initialState) {
+    super(__spreadValues$6({
+      type: "query",
+      name: "",
+      value: "",
+      text: "",
+      query: "",
+      options: [],
+      datasource: null,
+      regex: "",
+      refresh: data.VariableRefresh.onDashboardLoad,
+      sort: data.VariableSort.alphabeticalAsc
+    }, initialState));
+    this._variableDependency = new VariableDependencyConfig(this, {
+      statePaths: ["regex", "query", "datasource"]
+    });
+  }
+  activate() {
+    super.activate();
+    const timeRange = sceneGraph.getTimeRange(this);
+    if (this.state.refresh === data.VariableRefresh.onTimeRangeChanged) {
+      this._subs.add(
+        timeRange.subscribeToState({
+          next: () => {
+            this.updateSubscription = this.validateAndUpdate().subscribe();
+          }
+        })
+      );
+    }
+  }
+  deactivate() {
+    super.deactivate();
+    if (this.updateSubscription) {
+      this.updateSubscription.unsubscribe();
+    }
+    if (this.dataSourceSubject) {
+      this.dataSourceSubject.unsubscribe();
+    }
+  }
+  getValueOptions(args) {
+    if (this.state.query === "" || !this.state.datasource) {
+      return rxjs.of([]);
+    }
+    return rxjs.from(this.getDataSource()).pipe(
+      rxjs.mergeMap((ds) => {
+        const runner = createQueryVariableRunner(ds);
+        const target = runner.getTarget(this);
+        const request = this.getRequest(target);
+        return runner.runRequest({ variable: this }, request).pipe(
+          rxjs.filter((data$1) => data$1.state === data.LoadingState.Done || data$1.state === data.LoadingState.Error),
+          rxjs.take(1),
+          rxjs.mergeMap((data$1) => {
+            if (data$1.state === data.LoadingState.Error) {
+              return rxjs.throwError(() => data$1.error);
+            }
+            return rxjs.of(data$1);
+          }),
+          toMetricFindValues(),
+          rxjs.mergeMap((values) => {
+            let regex = "";
+            if (this.state.regex) {
+              regex = sceneGraph.interpolate(this, this.state.regex, void 0, "regex");
+            }
+            return rxjs.of(metricNamesToVariableValues(regex, this.state.sort, values));
+          }),
+          rxjs.catchError((error) => {
+            if (error.cancelled) {
+              return rxjs.of([]);
+            }
+            return rxjs.throwError(() => error);
+          })
+        );
+      })
+    );
+  }
+  async getDataSource() {
+    return runtime.getDataSourceSrv().get(this.state.datasource, {
+      __sceneObject: { text: "__sceneObject", value: this }
+    });
+  }
+  getRequest(target) {
+    const scopedVars = {
+      __sceneObject: { text: "__sceneObject", value: this }
+    };
+    const range = this.state.refresh === data.VariableRefresh.onTimeRangeChanged ? sceneGraph.getTimeRange(this).state.value : data.getDefaultTimeRange();
+    const request = {
+      app: data.CoreApp.Dashboard,
+      requestId: uuid.v4(),
+      timezone: "",
+      range,
+      interval: "",
+      intervalMs: 0,
+      targets: [target],
+      scopedVars,
+      startTime: Date.now()
+    };
+    return request;
+  }
+}
+QueryVariable.Component = ({ model }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelect, {
+    model
+  });
+};
+
+function buildMetricTree(parent, depth) {
+  const chars = ["A", "B", "C", "D", "E", "F", "G", "H"];
+  const children = [];
+  if (depth > 5) {
+    return [];
+  }
+  for (const letter of chars) {
+    const nodeName = `${parent}${letter}`;
+    children.push({
+      name: nodeName,
+      children: buildMetricTree(nodeName, depth + 1)
+    });
+  }
+  return children;
+}
+function queryTree(children, query, queryIndex) {
+  if (queryIndex >= query.length) {
+    return children;
+  }
+  if (query[queryIndex] === "*") {
+    return children;
+  }
+  const nodeQuery = query[queryIndex];
+  let result = [];
+  let namesToMatch = [nodeQuery];
+  if (nodeQuery.startsWith("{")) {
+    namesToMatch = nodeQuery.replace(/\{|\}/g, "").split(",");
+  }
+  for (const node of children) {
+    for (const nameToMatch of namesToMatch) {
+      if (nameToMatch.indexOf("*") !== -1) {
+        const pattern = nameToMatch.replace("*", "");
+        const regex = new RegExp(`^${pattern}.*`, "gi");
+        if (regex.test(node.name)) {
+          result = result.concat(queryTree([node], query, queryIndex + 1));
+        }
+      } else if (node.name === nameToMatch) {
+        result = result.concat(queryTree(node.children, query, queryIndex + 1));
+      }
+    }
+  }
+  return result;
+}
+function queryMetricTree(query) {
+  if (query.indexOf("value") === 0) {
+    return [{ name: query, children: [] }];
+  }
+  const children = buildMetricTree("", 0);
+  return queryTree(children, query.split("."), 0);
+}
+
+var __defProp$5 = Object.defineProperty;
+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;
+};
+class TestVariable extends MultiValueVariable {
+  constructor(initialState) {
+    super(__spreadValues$5({
+      type: "custom",
+      name: "Test",
+      value: "Value",
+      text: "Text",
+      query: "Query",
+      options: []
+    }, initialState));
+    this.completeUpdate = new rxjs.Subject();
+    this.isGettingValues = true;
+    this.getValueOptionsCount = 0;
+    this._variableDependency = new VariableDependencyConfig(this, {
+      statePaths: ["query"]
+    });
+  }
+  getValueOptions(args) {
+    const { delayMs } = this.state;
+    this.getValueOptionsCount += 1;
+    return new rxjs.Observable((observer) => {
+      this.setState({ loading: true });
+      const sub = this.completeUpdate.subscribe({
+        next: () => {
+          observer.next(this.issueQuery());
+        }
+      });
+      let timeout;
+      if (delayMs) {
+        timeout = setTimeout(() => this.signalUpdateCompleted(), delayMs);
+      }
+      this.isGettingValues = true;
+      return () => {
+        sub.unsubscribe();
+        clearTimeout(timeout);
+        this.isGettingValues = false;
+      };
+    });
+  }
+  issueQuery() {
+    const interpolatedQuery = sceneGraph.interpolate(this, this.state.query);
+    const options = queryMetricTree(interpolatedQuery).map((x) => ({ label: x.name, value: x.name }));
+    this.setState({
+      issuedQuery: interpolatedQuery,
+      options
+    });
+    return options;
+  }
+  signalUpdateCompleted() {
+    this.completeUpdate.next(1);
+  }
+}
+TestVariable.Component = ({ model }) => {
+  return renderSelectForVariable(model);
+};
+
+class UrlSyncManager {
+  constructor(sceneRoot) {
+    this.sceneRoot = sceneRoot;
+    this.initialStates = /* @__PURE__ */ new Map();
+    this.urlKeyMapper = new UniqueUrlKeyMapper();
+    this.onLocationUpdate = (location) => {
+      const urlParams = new URLSearchParams(location.search);
+      this.urlKeyMapper.rebuldIndex(this.sceneRoot);
+      this.syncSceneStateFromUrl(this.sceneRoot, urlParams);
+    };
+    this.onStateChanged = ({ payload }) => {
+      const changedObject = payload.changedObject;
+      if (changedObject.urlSync) {
+        const newUrlState = changedObject.urlSync.getUrlState(payload.newState);
+        const prevUrlState = changedObject.urlSync.getUrlState(payload.prevState);
+        const searchParams = runtime.locationService.getSearch();
+        const mappedUpdated = {};
+        this.urlKeyMapper.rebuldIndex(this.sceneRoot);
+        for (const [key, newUrlValue] of Object.entries(newUrlState)) {
+          const uniqueKey = this.urlKeyMapper.getUniqueKey(key, changedObject);
+          const currentUrlValue = searchParams.getAll(uniqueKey);
+          if (!isUrlValueEqual(currentUrlValue, newUrlValue)) {
+            mappedUpdated[uniqueKey] = newUrlValue;
+            if (!this.initialStates.has(uniqueKey) && prevUrlState[key] !== void 0) {
+              this.initialStates.set(uniqueKey, prevUrlState[key]);
+            }
+          }
+        }
+        if (Object.keys(mappedUpdated).length > 0) {
+          runtime.locationService.partial(mappedUpdated, true);
+        }
+      }
+    };
+    this.stateChangeSub = sceneRoot.subscribeToEvent(SceneObjectStateChangedEvent, this.onStateChanged);
+    this.locationListenerUnsub = runtime.locationService.getHistory().listen(this.onLocationUpdate);
+  }
+  initSync() {
+    const urlParams = runtime.locationService.getSearch();
+    this.urlKeyMapper.rebuldIndex(this.sceneRoot);
+    this.syncSceneStateFromUrl(this.sceneRoot, urlParams);
+  }
+  cleanUp() {
+    this.stateChangeSub.unsubscribe();
+    this.locationListenerUnsub();
+  }
+  syncSceneStateFromUrl(sceneObject, urlParams) {
+    if (sceneObject.urlSync) {
+      const urlState = {};
+      const currentState = sceneObject.urlSync.getUrlState(sceneObject.state);
+      for (const key of sceneObject.urlSync.getKeys()) {
+        const uniqueKey = this.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];
+          }
+          if (!this.initialStates.has(uniqueKey) && currentValue !== void 0) {
+            this.initialStates.set(uniqueKey, currentValue);
+          }
+        } else {
+          const initialValue = this.initialStates.get(uniqueKey);
+          if (initialValue !== void 0) {
+            urlState[key] = initialValue;
+          }
+        }
+      }
+      if (Object.keys(urlState).length > 0) {
+        sceneObject.urlSync.updateFromUrl(urlState);
+      }
+    }
+    forEachSceneObjectInState(sceneObject.state, (obj) => this.syncSceneStateFromUrl(obj, urlParams));
+  }
+}
+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;
+  }
+  rebuldIndex(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 }]);
+        }
+      }
+    }
+    forEachSceneObjectInState(sceneObject.state, (obj) => this.buildIndex(obj, depth + 1));
+  }
+}
+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);
+}
+
+class EmbeddedScene extends SceneObjectBase {
+  activate() {
+    super.activate();
+    this.urlSyncManager = new UrlSyncManager(this);
+    this.urlSyncManager.initSync();
+  }
+  deactivate() {
+    super.deactivate();
+    this.urlSyncManager.cleanUp();
+  }
+}
+EmbeddedScene.Component = EmbeddedSceneRenderer;
+function EmbeddedSceneRenderer({ model }) {
+  const { body, isEditing, subMenu } = model.useState();
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: {
+      flexGrow: 1,
+      display: "flex",
+      gap: "8px",
+      overflow: "auto",
+      minHeight: "100%",
+      flexDirection: "column"
+    }
+  }, subMenu && /* @__PURE__ */ React__default["default"].createElement(subMenu.Component, {
+    model: subMenu
+  }), /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: { flexGrow: 1, display: "flex", gap: "8px", overflow: "auto" }
+  }, /* @__PURE__ */ React__default["default"].createElement(body.Component, {
+    model: body,
+    isEditing
+  })));
+}
+
+function SceneDragHandle({ layoutKey, className }) {
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `${className} grid-drag-handle-${layoutKey}`,
+    style: {
+      width: "20px",
+      height: "20px",
+      cursor: "move"
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    name: "draggabledots"
+  }));
+}
+
+function VizPanelRenderer({ model }) {
+  var _a;
+  const theme = ui.useTheme2();
+  const replace = React.useMemo(
+    () => (value, scoped) => sceneGraph.interpolate(model, value, scoped),
+    [model]
+  );
+  const { title, options, fieldConfig, pluginId, pluginLoadError, $data, placement } = model.useState();
+  const [ref, { width, height }] = reactUse.useMeasure();
+  const plugin = model.getPlugin();
+  const { data: data$1 } = sceneGraph.getData(model).useState();
+  const parentLayout = sceneGraph.getLayout(model);
+  const isDraggable = ((_a = parentLayout.state.placement) == null ? void 0 : _a.isDraggable) ? placement == null ? void 0 : placement.isDraggable : false;
+  const dragHandle = /* @__PURE__ */ React__default["default"].createElement(SceneDragHandle, {
+    layoutKey: parentLayout.state.key
+  });
+  const titleInterpolated = sceneGraph.interpolate(model, title);
+  const timeZone = sceneGraph.getTimeRange(model).state.timeZone;
+  const dataWithOverrides = data.useFieldOverrides(plugin, fieldConfig, data$1, timeZone, theme, replace);
+  if (pluginLoadError) {
+    return /* @__PURE__ */ React__default["default"].createElement("div", null, "Failed to load plugin: ", pluginLoadError);
+  }
+  if (!plugin || !plugin.hasPluginId(pluginId)) {
+    return /* @__PURE__ */ React__default["default"].createElement("div", null, "Loading plugin panel...");
+  }
+  if (!plugin.panel) {
+    return /* @__PURE__ */ React__default["default"].createElement("div", null, "Panel plugin has no panel component");
+  }
+  const PanelComponent = plugin.panel;
+  if ($data instanceof SceneQueryRunner) {
+    $data.setContainerWidth(width);
+  }
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    ref,
+    style: { position: "absolute", width: "100%", height: "100%" }
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.PanelChrome, {
+    title: titleInterpolated,
+    width,
+    height,
+    leftItems: isDraggable ? [dragHandle] : void 0
+  }, (innerWidth, innerHeight) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, !dataWithOverrides && /* @__PURE__ */ React__default["default"].createElement("div", null, "No data..."), dataWithOverrides && /* @__PURE__ */ React__default["default"].createElement(ui.ErrorBoundaryAlert, {
+    dependencies: [plugin, data$1]
+  }, /* @__PURE__ */ React__default["default"].createElement(data.PluginContextProvider, {
+    meta: plugin.meta
+  }, /* @__PURE__ */ React__default["default"].createElement(PanelComponent, {
+    id: 1,
+    data: dataWithOverrides,
+    title,
+    timeRange: dataWithOverrides.timeRange,
+    timeZone,
+    options,
+    fieldConfig,
+    transparent: false,
+    width: innerWidth,
+    height: innerHeight,
+    renderCounter: 0,
+    replaceVariables: (str) => str,
+    onOptionsChange: model.onOptionsChange,
+    onFieldConfigChange: model.onFieldConfigChange,
+    onChangeTimeRange: model.onChangeTimeRange,
+    eventBus: runtime.getAppEvents()
+  }))))));
+}
+VizPanelRenderer.displayName = "ScenePanelRenderer";
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+class VizPanel extends SceneObjectBase {
+  constructor(state) {
+    super(__spreadValues$4({
+      options: {},
+      fieldConfig: { defaults: {}, overrides: [] },
+      title: "Title",
+      pluginId: "timeseries"
+    }, state));
+    this.onChangeTimeRange = (timeRange) => {
+      const sceneTimeRange = sceneGraph.getTimeRange(this);
+      sceneTimeRange.onTimeRangeChange({
+        raw: {
+          from: data.toUtc(timeRange.from),
+          to: data.toUtc(timeRange.to)
+        },
+        from: data.toUtc(timeRange.from),
+        to: data.toUtc(timeRange.to)
+      });
+    };
+    this.onOptionsChange = (options) => {
+      this.setState({ options });
+    };
+    this.onFieldConfigChange = (fieldConfig) => {
+      this.setState({ fieldConfig });
+    };
+  }
+  activate() {
+    super.activate();
+    const { getPanelPluginFromCache, importPanelPlugin } = runtime.getPluginImportUtils();
+    const plugin = getPanelPluginFromCache(this.state.pluginId);
+    if (plugin) {
+      this.pluginLoaded(plugin);
+    } else {
+      importPanelPlugin(this.state.pluginId).then((result) => this.pluginLoaded(result)).catch((err) => {
+        this.setState({ pluginLoadError: err.message });
+      });
+    }
+  }
+  pluginLoaded(plugin) {
+    const { options, fieldConfig, title, pluginId, pluginVersion } = this.state;
+    const panel = { title, options, fieldConfig, id: 1, type: pluginId, pluginVersion };
+    const currentVersion = this.getPluginVersion(plugin);
+    if (plugin.onPanelMigration) {
+      if (currentVersion !== this.state.pluginVersion) {
+        panel.options = plugin.onPanelMigration(panel);
+      }
+    }
+    const withDefaults = data.getPanelOptionsWithDefaults({
+      plugin,
+      currentOptions: panel.options,
+      currentFieldConfig: panel.fieldConfig,
+      isAfterPluginChange: false
+    });
+    this._plugin = plugin;
+    this.setState({
+      options: withDefaults.options,
+      fieldConfig: withDefaults.fieldConfig,
+      pluginVersion: currentVersion
+    });
+  }
+  getPluginVersion(plugin) {
+    return plugin && plugin.meta.info.version ? plugin.meta.info.version : runtime.config.buildInfo.version;
+  }
+  getPlugin() {
+    return this._plugin;
+  }
+}
+VizPanel.Component = VizPanelRenderer;
+VizPanel.Editor = VizPanelEditor;
+function VizPanelEditor({ model }) {
+  const { title } = model.useState();
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Field, {
+    label: "Title"
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Input, {
+    defaultValue: title,
+    onBlur: (evt) => model.setState({ title: evt.currentTarget.value })
+  }));
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+class NestedScene extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
+    this.onToggle = () => {
+      this.setState({
+        isCollapsed: !this.state.isCollapsed,
+        placement: __spreadProps$3(__spreadValues$3({}, this.state.placement), {
+          ySizing: this.state.isCollapsed ? "fill" : "content"
+        })
+      });
+    };
+    this.onRemove = () => {
+      const parent = this.parent;
+      if ("children" in parent.state) {
+        parent.setState({
+          children: parent.state.children.filter((x) => x !== this)
+        });
+      }
+    };
+  }
+}
+NestedScene.Component = NestedSceneRenderer;
+function NestedSceneRenderer({ model, isEditing }) {
+  const { title, isCollapsed, canCollapse, canRemove, body, actions } = model.useState();
+  const styles = ui.useStyles2(getStyles);
+  const toolbarActions = (actions != null ? actions : []).map((action) => /* @__PURE__ */ React__default["default"].createElement(action.Component, {
+    key: action.state.key,
+    model: action
+  }));
+  if (canRemove) {
+    toolbarActions.push(
+      /* @__PURE__ */ React__default["default"].createElement(ui.ToolbarButton, {
+        icon: "times",
+        variant: "default",
+        onClick: model.onRemove,
+        key: "remove-button",
+        "aria-label": "Remove scene"
+      })
+    );
+  }
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.row
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.rowHeader
+  }, /* @__PURE__ */ React__default["default"].createElement(experimental.Stack, {
+    gap: 0
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.title,
+    role: "heading",
+    "aria-level": 1
+  }, title), canCollapse && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.toggle
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Button, {
+    size: "sm",
+    icon: isCollapsed ? "angle-down" : "angle-up",
+    fill: "text",
+    variant: "secondary",
+    "aria-label": isCollapsed ? "Expand scene" : "Collapse scene",
+    onClick: model.onToggle
+  }))), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.actions
+  }, toolbarActions)), !isCollapsed && /* @__PURE__ */ React__default["default"].createElement(body.Component, {
+    model: body,
+    isEditing
+  }));
+}
+const getStyles = (theme) => ({
+  row: css.css({
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    gap: theme.spacing(1),
+    cursor: "pointer"
+  }),
+  toggle: css.css({}),
+  title: css.css({
+    fontSize: theme.typography.h5.fontSize
+  }),
+  rowHeader: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2)
+  }),
+  actions: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    justifyContent: "flex-end",
+    flexGrow: 1
+  })
+});
+
+class SceneCanvasText extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
+    this._variableDependency = new VariableDependencyConfig(this, { statePaths: ["text"] });
+  }
+}
+SceneCanvasText.Editor = Editor;
+SceneCanvasText.Component = ({ model }) => {
+  const { text, fontSize = 20, align = "left", key } = model.useState();
+  const style = {
+    fontSize,
+    display: "flex",
+    flexGrow: 1,
+    alignItems: "center",
+    padding: 16,
+    justifyContent: align
+  };
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    style,
+    "data-testid": key
+  }, sceneGraph.interpolate(model, text));
+};
+function Editor({ model }) {
+  const { fontSize } = model.useState();
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Field, {
+    label: "Font size"
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Input, {
+    type: "number",
+    defaultValue: fontSize,
+    onBlur: (evt) => model.setState({ fontSize: parseInt(evt.currentTarget.value, 10) })
+  }));
+}
+
+class SceneToolbarButton extends SceneObjectBase {
+}
+SceneToolbarButton.Component = ({ model }) => {
+  const state = model.useState();
+  return /* @__PURE__ */ React__default["default"].createElement(ui.ToolbarButton, {
+    onClick: state.onClick,
+    icon: state.icon
+  });
+};
+class SceneToolbarInput extends SceneObjectBase {
+}
+SceneToolbarInput.Component = ({ model }) => {
+  const state = model.useState();
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Input, {
+    defaultValue: state.value,
+    width: 8,
+    onBlur: (evt) => {
+      model.state.onChange(parseInt(evt.currentTarget.value, 10));
+    }
+  });
+};
+
+class SceneTimePicker extends SceneObjectBase {
+}
+SceneTimePicker.Component = SceneTimePickerRenderer;
+function SceneTimePickerRenderer({ model }) {
+  const { hidePicker } = model.useState();
+  const timeRange = sceneGraph.getTimeRange(model);
+  const timeRangeState = timeRange.useState();
+  if (hidePicker) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(ui.ToolbarButtonRow, {
+    alignment: "right"
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.TimeRangePicker, {
+    value: timeRangeState.value,
+    onChange: timeRange.onTimeRangeChange,
+    timeZone: "browser",
+    fiscalYearStartMonth: 0,
+    onMoveBackward: () => {
+    },
+    onMoveForward: () => {
+    },
+    onZoom: () => {
+    },
+    onChangeTimeZone: () => {
+    },
+    onChangeFiscalYearStartMonth: () => {
+    }
+  }), /* @__PURE__ */ React__default["default"].createElement(ui.RefreshPicker, {
+    onRefresh: timeRange.onRefresh,
+    onIntervalChanged: timeRange.onIntervalChanged
+  }));
+}
+
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+class ScenePanelRepeater extends SceneObjectBase {
+  activate() {
+    super.activate();
+    this._subs.add(
+      sceneGraph.getData(this).subscribeToState({
+        next: (data$1) => {
+          var _a;
+          if (((_a = data$1.data) == null ? void 0 : _a.state) === data.LoadingState.Done) {
+            this.performRepeat(data$1.data);
+          }
+        }
+      })
+    );
+  }
+  performRepeat(data) {
+    const firstChild = this.state.layout.state.children[0];
+    const newChildren = [];
+    for (const series of data.series) {
+      const clone = firstChild.clone({
+        key: `${newChildren.length}`,
+        $data: new SceneDataNode({
+          data: __spreadProps$2(__spreadValues$2({}, data), {
+            series: [series]
+          })
+        })
+      });
+      newChildren.push(clone);
+    }
+    this.state.layout.setState({ children: newChildren });
+  }
+}
+ScenePanelRepeater.Component = ({ model, isEditing }) => {
+  const { layout } = model.useState();
+  return /* @__PURE__ */ React__default["default"].createElement(layout.Component, {
+    model: layout,
+    isEditing
+  });
+};
+
+class SceneSubMenu extends SceneObjectBase {
+}
+SceneSubMenu.Component = SceneSubMenuRenderer;
+function SceneSubMenuRenderer({ model }) {
+  const { children } = model.useState();
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: { display: "flex", gap: "16px" }
+  }, children.map((child) => /* @__PURE__ */ React__default["default"].createElement(child.Component, {
+    key: child.state.key,
+    model: child
+  })));
+}
+
+class SceneFlexLayout extends SceneObjectBase {
+  toggleDirection() {
+    this.setState({
+      direction: this.state.direction === "row" ? "column" : "row"
+    });
+  }
+}
+SceneFlexLayout.Component = FlexLayoutRenderer;
+SceneFlexLayout.Editor = FlexLayoutEditor;
+function FlexLayoutRenderer({ model, isEditing }) {
+  const { direction = "row", children } = model.useState();
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: { flexGrow: 1, flexDirection: direction, display: "flex", gap: "8px" }
+  }, children.map((item) => /* @__PURE__ */ React__default["default"].createElement(FlexLayoutChildComponent, {
+    key: item.state.key,
+    item,
+    direction,
+    isEditing
+  })));
+}
+function FlexLayoutChildComponent({
+  item,
+  direction,
+  isEditing
+}) {
+  const { placement } = item.useState();
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: getItemStyles(direction, placement)
+  }, /* @__PURE__ */ React__default["default"].createElement(item.Component, {
+    model: item,
+    isEditing
+  }));
+}
+function getItemStyles(direction, layout = {}) {
+  const { xSizing = "fill", ySizing = "fill" } = layout;
+  const style = {
+    display: "flex",
+    flexDirection: direction,
+    minWidth: layout.minWidth,
+    minHeight: layout.minHeight,
+    position: "relative"
+  };
+  if (direction === "column") {
+    if (layout.height) {
+      style.height = layout.height;
+    } else {
+      style.flexGrow = ySizing === "fill" ? 1 : 0;
+    }
+    if (layout.width) {
+      style.width = layout.width;
+    } else {
+      style.alignSelf = xSizing === "fill" ? "stretch" : "flex-start";
+    }
+  } else {
+    if (layout.height) {
+      style.height = layout.height;
+    } else {
+      style.alignSelf = ySizing === "fill" ? "stretch" : "flex-start";
+    }
+    if (layout.width) {
+      style.width = layout.width;
+    } else {
+      style.flexGrow = xSizing === "fill" ? 1 : 0;
+    }
+  }
+  return style;
+}
+function FlexLayoutEditor({ model }) {
+  const { direction = "row" } = model.useState();
+  const options = [
+    { icon: "arrow-right", value: "row" },
+    { icon: "arrow-down", value: "column" }
+  ];
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Field, {
+    label: "Direction"
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.RadioButtonGroup, {
+    options,
+    value: direction,
+    onChange: (value) => model.setState({ direction: value })
+  }));
+}
+
+const DEFAULT_PANEL_SPAN = 4;
+const GRID_CELL_HEIGHT = 30;
+const GRID_CELL_VMARGIN = 8;
+const GRID_COLUMN_COUNT = 24;
+
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+class SceneGridRow extends SceneObjectBase {
+  constructor(state) {
+    super(__spreadProps$1(__spreadValues$1({
+      isCollapsible: true
+    }, state), {
+      placement: __spreadProps$1(__spreadValues$1({
+        isResizable: false,
+        isDraggable: true
+      }, state.placement), {
+        x: 0,
+        height: 1,
+        width: GRID_COLUMN_COUNT
+      })
+    }));
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["rowc"] });
+    this.onCollapseToggle = () => {
+      if (!this.state.isCollapsible) {
+        return;
+      }
+      const layout = this.parent;
+      if (!layout || !(layout instanceof SceneGridLayout)) {
+        throw new Error("SceneGridRow must be a child of SceneGridLayout");
+      }
+      layout.toggleRow(this);
+    };
+  }
+  getUrlState(state) {
+    return { rowc: state.isCollapsed ? "1" : "0" };
+  }
+  updateFromUrl(values) {
+    const isCollapsed = values.rowc === "1";
+    if (isCollapsed !== this.state.isCollapsed) {
+      this.onCollapseToggle();
+    }
+  }
+}
+SceneGridRow.Component = SceneGridRowRenderer;
+function SceneGridRowRenderer({ model }) {
+  const styles = ui.useStyles2(getSceneGridRowStyles);
+  const { isCollapsible, isCollapsed, title, placement } = model.useState();
+  const layout = sceneGraph.getLayout(model);
+  const dragHandle = /* @__PURE__ */ React__default["default"].createElement(SceneDragHandle, {
+    layoutKey: layout.state.key
+  });
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.row
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: css.cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    onClick: model.onCollapseToggle,
+    className: styles.rowTitleWrapper
+  }, isCollapsible && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    name: isCollapsed ? "angle-right" : "angle-down"
+  }), /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: styles.rowTitle
+  }, title)), (placement == null ? void 0 : placement.isDraggable) && isCollapsed && /* @__PURE__ */ React__default["default"].createElement("div", null, dragHandle)));
+}
+const getSceneGridRowStyles = (theme) => {
+  return {
+    row: css.css({
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      zIndex: 0,
+      display: "flex",
+      flexDirection: "column"
+    }),
+    rowHeader: css.css({
+      width: "100%",
+      height: "30px",
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: "8px",
+      border: `1px solid transparent`
+    }),
+    rowTitleWrapper: css.css({
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer"
+    }),
+    rowHeaderCollapsed: css.css({
+      marginBottom: "0px",
+      background: theme.colors.background.primary,
+      border: `1px solid ${theme.colors.border.weak}`,
+      borderRadius: theme.shape.borderRadius(1)
+    }),
+    rowTitle: css.css({
+      fontSize: theme.typography.h6.fontSize,
+      fontWeight: theme.typography.h6.fontWeight
+    })
+  };
+};
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+class SceneGridLayout extends SceneObjectBase {
+  constructor(state) {
+    super(__spreadProps(__spreadValues({}, state), {
+      placement: __spreadValues({
+        isDraggable: true
+      }, state.placement),
+      children: sortChildrenByPosition(state.children)
+    }));
+    this._skipOnLayoutChange = false;
+    this.onLayoutChange = (layout) => {
+      if (this._skipOnLayoutChange) {
+        this._skipOnLayoutChange = false;
+        return;
+      }
+      for (const item of layout) {
+        const child = this.getSceneLayoutChild(item.i);
+        const nextSize = {
+          x: item.x,
+          y: item.y,
+          width: item.w,
+          height: item.h
+        };
+        if (!isItemSizeEqual(child.state.placement, nextSize)) {
+          child.setState({
+            placement: __spreadValues(__spreadValues({}, child.state.placement), nextSize)
+          });
+        }
+      }
+      this.setState({ children: sortChildrenByPosition(this.state.children) });
+    };
+    this.onResizeStop = (_, o, n) => {
+      const child = this.getSceneLayoutChild(n.i);
+      child.setState({
+        placement: __spreadProps(__spreadValues({}, child.state.placement), {
+          width: n.w,
+          height: n.h
+        })
+      });
+    };
+    this.onDragStop = (gridLayout, o, updatedItem) => {
+      const sceneChild = this.getSceneLayoutChild(updatedItem.i);
+      gridLayout = sortGridLayout(gridLayout);
+      for (let i = 0; i < gridLayout.length; i++) {
+        const gridItem = gridLayout[i];
+        const child = this.getSceneLayoutChild(gridItem.i);
+        const childSize = child.state.placement;
+        if ((childSize == null ? void 0 : childSize.x) !== gridItem.x || (childSize == null ? void 0 : childSize.y) !== gridItem.y) {
+          child.setState({
+            placement: __spreadProps(__spreadValues({}, child.state.placement), {
+              x: gridItem.x,
+              y: gridItem.y
+            })
+          });
+        }
+      }
+      const indexOfUpdatedItem = gridLayout.findIndex((item) => item.i === updatedItem.i);
+      const newParent = this.findGridItemSceneParent(gridLayout, indexOfUpdatedItem - 1);
+      let newChildren = this.state.children;
+      if (newParent !== sceneChild.parent) {
+        newChildren = this.moveChildTo(sceneChild, newParent);
+      }
+      this.setState({ children: sortChildrenByPosition(newChildren) });
+      this._skipOnLayoutChange = true;
+    };
+  }
+  toggleRow(row) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const isCollapsed = row.state.isCollapsed;
+    if (!isCollapsed) {
+      row.setState({ isCollapsed: true });
+      this.setState({});
+      return;
+    }
+    const rowChildren = row.state.children;
+    if (rowChildren.length === 0) {
+      row.setState({ isCollapsed: false });
+      this.setState({});
+      return;
+    }
+    const rowY = (_a = row.state.placement) == null ? void 0 : _a.y;
+    const firstPanelYPos = (_c = (_b = rowChildren[0].state.placement) == null ? void 0 : _b.y) != null ? _c : rowY;
+    const yDiff = firstPanelYPos - (rowY + 1);
+    let yMax = rowY;
+    for (const panel of rowChildren) {
+      const newSize = __spreadValues({}, panel.state.placement);
+      newSize.y = (_d = newSize.y) != null ? _d : rowY;
+      newSize.y -= yDiff;
+      if (newSize.y > ((_e = panel.state.placement) == null ? void 0 : _e.y)) {
+        panel.setState({ placement: newSize });
+      }
+      yMax = Math.max(yMax, Number(newSize.y) + Number(newSize.height));
+    }
+    const pushDownAmount = yMax - rowY - 1;
+    for (const child of this.state.children) {
+      if (((_f = child.state.placement) == null ? void 0 : _f.y) > rowY) {
+        this.pushChildDown(child, pushDownAmount);
+      }
+      if (child instanceof SceneGridRow && child !== row) {
+        for (const rowChild of child.state.children) {
+          if (((_g = rowChild.state.placement) == null ? void 0 : _g.y) > rowY) {
+            this.pushChildDown(rowChild, pushDownAmount);
+          }
+        }
+      }
+    }
+    row.setState({ isCollapsed: false });
+    this.setState({});
+  }
+  getSceneLayoutChild(key) {
+    for (const child of this.state.children) {
+      if (child.state.key === key) {
+        return child;
+      }
+      if (child instanceof SceneGridRow) {
+        for (const rowChild of child.state.children) {
+          if (rowChild.state.key === key) {
+            return rowChild;
+          }
+        }
+      }
+    }
+    throw new Error("Scene layout child not found for GridItem");
+  }
+  pushChildDown(child, amount) {
+    var _a;
+    child.setState({
+      placement: __spreadProps(__spreadValues({}, child.state.placement), {
+        y: ((_a = child.state.placement) == null ? void 0 : _a.y) + amount
+      })
+    });
+  }
+  findGridItemSceneParent(layout, startAt) {
+    for (let i = startAt; i >= 0; i--) {
+      const gridItem = layout[i];
+      const sceneChild = this.getSceneLayoutChild(gridItem.i);
+      if (sceneChild instanceof SceneGridRow) {
+        if (sceneChild.state.isCollapsed) {
+          return this;
+        }
+        return sceneChild;
+      }
+    }
+    return this;
+  }
+  moveChildTo(child, target) {
+    const currentParent = child.parent;
+    let rootChildren = this.state.children;
+    const newChild = child.clone({ key: child.state.key });
+    if (currentParent instanceof SceneGridRow) {
+      const newRow = currentParent.clone({
+        children: currentParent.state.children.filter((c) => c.state.key !== child.state.key)
+      });
+      rootChildren = rootChildren.map((c) => c === currentParent ? newRow : c);
+      if (target instanceof SceneGridRow) {
+        const targetRow = target.clone({ children: [...target.state.children, newChild] });
+        rootChildren = rootChildren.map((c) => c === target ? targetRow : c);
+      } else {
+        rootChildren = [...rootChildren, newChild];
+      }
+    } else {
+      rootChildren = rootChildren.filter((c) => c.state.key !== child.state.key);
+      const targetRow = target.clone({ children: [...target.state.children, newChild] });
+      rootChildren = rootChildren.map((c) => c === target ? targetRow : c);
+    }
+    return rootChildren;
+  }
+  toGridCell(child) {
+    var _a, _b, _c, _d;
+    const size = child.state.placement;
+    let x = (_a = size.x) != null ? _a : 0;
+    let y = (_b = size.y) != null ? _b : 0;
+    const w = Number.isInteger(Number(size.width)) ? Number(size.width) : DEFAULT_PANEL_SPAN;
+    const h = Number.isInteger(Number(size.height)) ? Number(size.height) : DEFAULT_PANEL_SPAN;
+    let isDraggable = Boolean((_c = child.state.placement) == null ? void 0 : _c.isDraggable);
+    let isResizable = Boolean((_d = child.state.placement) == null ? void 0 : _d.isResizable);
+    if (child instanceof SceneGridRow) {
+      isDraggable = child.state.isCollapsed ? true : false;
+      isResizable = false;
+    }
+    return { i: child.state.key, x, y, h, w, isResizable, isDraggable };
+  }
+  buildGridLayout(width) {
+    let cells = [];
+    for (const child of this.state.children) {
+      cells.push(this.toGridCell(child));
+      if (child instanceof SceneGridRow && !child.state.isCollapsed) {
+        for (const rowChild of child.state.children) {
+          cells.push(this.toGridCell(rowChild));
+        }
+      }
+    }
+    cells = sortGridLayout(cells);
+    if (width < 768) {
+      this._skipOnLayoutChange = true;
+      return cells.map((cell) => __spreadProps(__spreadValues({}, cell), { w: 24 }));
+    }
+    this._skipOnLayoutChange = false;
+    return cells;
+  }
+}
+SceneGridLayout.Component = SceneGridLayoutRenderer;
+function SceneGridLayoutRenderer({ model }) {
+  const { children } = model.useState();
+  validateChildrenSize(children);
+  return /* @__PURE__ */ React__default["default"].createElement(AutoSizer__default["default"], {
+    disableHeight: true
+  }, ({ width }) => {
+    if (width === 0) {
+      return null;
+    }
+    const layout = model.buildGridLayout(width);
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      style: { width: `${width}px`, height: "100%" }
+    }, /* @__PURE__ */ React__default["default"].createElement(ReactGridLayout__default["default"], {
+      width,
+      isDraggable: width > 768,
+      isResizable: false,
+      containerPadding: [0, 0],
+      useCSSTransforms: false,
+      margin: [GRID_CELL_VMARGIN, GRID_CELL_VMARGIN],
+      cols: GRID_COLUMN_COUNT,
+      rowHeight: GRID_CELL_HEIGHT,
+      draggableHandle: `.grid-drag-handle-${model.state.key}`,
+      layout,
+      onDragStop: model.onDragStop,
+      onResizeStop: model.onResizeStop,
+      onLayoutChange: model.onLayoutChange,
+      isBounded: false
+    }, layout.map((gridItem) => {
+      const sceneChild = model.getSceneLayoutChild(gridItem.i);
+      return /* @__PURE__ */ React__default["default"].createElement("div", {
+        key: sceneChild.state.key,
+        style: { display: "flex" }
+      }, /* @__PURE__ */ React__default["default"].createElement(sceneChild.Component, {
+        model: sceneChild,
+        key: sceneChild.state.key
+      }));
+    })));
+  });
+}
+function validateChildrenSize(children) {
+  if (children.find(
+    (c) => !c.state.placement || c.state.placement.height === void 0 || c.state.placement.width === void 0 || c.state.placement.x === void 0 || c.state.placement.y === void 0
+  )) {
+    throw new Error("All children must have a size specified");
+  }
+}
+function isItemSizeEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+function sortChildrenByPosition(children) {
+  return [...children].sort((a, b) => {
+    var _a, _b, _c, _d;
+    return ((_a = a.state.placement) == null ? void 0 : _a.y) - ((_b = b.state.placement) == null ? void 0 : _b.y) || ((_c = a.state.placement) == null ? void 0 : _c.x) - ((_d = b.state.placement) == null ? void 0 : _d.x);
+  });
+}
+function sortGridLayout(layout) {
+  return [...layout].sort((a, b) => a.y - b.y || a.x - b.x);
+}
+
+exports.ConstantVariable = ConstantVariable;
+exports.CustomVariable = CustomVariable;
+exports.DataSourceVariable = DataSourceVariable;
+exports.EmbeddedScene = EmbeddedScene;
+exports.FormatRegistryID = FormatRegistryID;
+exports.NestedScene = NestedScene;
+exports.QueryVariable = QueryVariable;
+exports.SceneCanvasText = SceneCanvasText;
+exports.SceneDataNode = SceneDataNode;
+exports.SceneDataTransformer = SceneDataTransformer;
+exports.SceneFlexLayout = SceneFlexLayout;
+exports.SceneGridLayout = SceneGridLayout;
+exports.SceneGridRow = SceneGridRow;
+exports.SceneObjectBase = SceneObjectBase;
+exports.SceneObjectStateChangedEvent = SceneObjectStateChangedEvent;
+exports.SceneObjectUrlSyncConfig = SceneObjectUrlSyncConfig;
+exports.ScenePanelRepeater = ScenePanelRepeater;
+exports.SceneQueryRunner = SceneQueryRunner;
+exports.SceneSubMenu = SceneSubMenu;
+exports.SceneTimePicker = SceneTimePicker;
+exports.SceneTimeRange = SceneTimeRange;
+exports.SceneToolbarButton = SceneToolbarButton;
+exports.SceneToolbarInput = SceneToolbarInput;
+exports.SceneVariableSet = SceneVariableSet;
+exports.SceneVariableValueChangedEvent = SceneVariableValueChangedEvent;
+exports.TestVariable = TestVariable;
+exports.UrlSyncManager = UrlSyncManager;
+exports.VariableValueSelectors = VariableValueSelectors;
+exports.VizPanel = VizPanel;
+exports.formatRegistry = formatRegistry;
+exports.isSceneObject = isSceneObject;
+exports.sceneGraph = sceneGraph;
+//# sourceMappingURL=index.js.map