@grafana/scenes 6.12.0--canary.1122.15063334499.0 → 6.12.0--canary.1121.15070832166.0

package/dist/index.js

@@ -1283,6 +1283,7 @@ const AUTO_VARIABLE_TEXT = "Auto";
 const AUTO_VARIABLE_VALUE = "$__auto";
 const VARIABLE_REGEX = /\$(\w+)|\[\[(\w+?)(?::(\w+))?\]\]|\${(\w+)(?:\.([^:^\}]+))?(?::([^\}]+))?}/g;
 const SEARCH_FILTER_VARIABLE = "__searchFilter";
+const SCOPES_VARIABLE_NAME = "__scopes";
 
 const formatRegistry = new data.Registry(() => {
   const formats = [
@@ -2964,34 +2965,18 @@ class GroupByVariableUrlSyncHandler {
     return [this.getKey()];
   }
   getUrlState() {
-    var _a;
     if (this._sceneObject.state.skipUrlSync) {
       return {};
     }
-    return {
-      [this.getKey()]: toUrlValues(
-        this._sceneObject.state.value,
-        this._sceneObject.state.text,
-        (_a = this._sceneObject.state.defaultValues) == null ? void 0 : _a.value
-      )
-    };
+    return { [this.getKey()]: toUrlValues(this._sceneObject.state.value, this._sceneObject.state.text) };
   }
   updateFromUrl(values) {
-    var _a, _b;
     let urlValue = values[this.getKey()];
     if (urlValue != null) {
       if (!this._sceneObject.isActive) {
         this._sceneObject.skipNextValidation = true;
       }
-      const { values: values2, texts, defaults } = fromUrlValues(urlValue);
-      if (lodash.isEqual(values2, defaults) && this._sceneObject.state.defaultValues) {
-        this._sceneObject.changeValueTo(
-          (_a = this._sceneObject.state.defaultValues) == null ? void 0 : _a.value,
-          (_b = this._sceneObject.state.defaultValues) == null ? void 0 : _b.text,
-          false
-        );
-        return;
-      }
+      const { values: values2, texts } = fromUrlValues(urlValue);
       this._sceneObject.changeValueTo(values2, texts);
     }
   }
@@ -3004,10 +2989,9 @@ class GroupByVariableUrlSyncHandler {
     return this._nextChangeShouldAddHistoryStep;
   }
 }
-function toUrlValues(values, texts, defaultValues) {
+function toUrlValues(values, texts) {
   values = Array.isArray(values) ? values : [values];
   texts = Array.isArray(texts) ? texts : [texts];
-  const defaults = defaultValues ? Array.isArray(defaultValues) ? defaultValues : [defaultValues] : [];
   return values.map((value, idx) => {
     if (value === void 0 || value === null) {
       return "";
@@ -3015,27 +2999,21 @@ function toUrlValues(values, texts, defaultValues) {
     value = String(value);
     let text = texts[idx];
     text = text === void 0 || text === null ? value : String(text);
-    return toUrlCommaDelimitedString(value, text) + (defaults.includes(value) ? escapeUrlPipeDelimiters("|default") : "");
+    return toUrlCommaDelimitedString(value, text);
   });
 }
 function fromUrlValues(urlValues) {
   urlValues = Array.isArray(urlValues) ? urlValues : [urlValues];
   return urlValues.reduce(
     (acc, urlValue) => {
-      const pipeEscapedVal = /__gfp__/g[Symbol.replace](urlValue, "|");
-      const [commaValues, isDefault] = (pipeEscapedVal != null ? pipeEscapedVal : "").split("|");
-      const [value, label] = (commaValues != null ? commaValues : "").split(",");
+      const [value, label] = (urlValue != null ? urlValue : "").split(",");
       acc.values.push(unescapeUrlDelimiters(value));
       acc.texts.push(unescapeUrlDelimiters(label != null ? label : value));
-      if (isDefault) {
-        acc.defaults.push(value);
-      }
       return acc;
     },
     {
       values: [],
-      texts: [],
-      defaults: []
+      texts: []
     }
   );
 }
@@ -3099,101 +3077,6 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
   return { value: sceneObject, text: "__sceneObject" };
 }
 
-function DefaultGroupByCustomIndicatorContainer(props) {
-  const { model } = props;
-  const theme = ui.useTheme2();
-  const styles = getStyles$h(theme);
-  const inputStyles = ui.getInputStyles({ theme, invalid: false });
-  const value = React.useMemo(
-    () => lodash.isArray(model.state.value) ? model.state.value : model.state.value ? [model.state.value] : [],
-    [model.state.value]
-  );
-  const isRestorable = React.useMemo(() => {
-    return model.checkIfRestorable(value);
-  }, [value, model]);
-  let buttons = [];
-  if (value && value.length) {
-    buttons.push(
-      /* @__PURE__ */ React__default.default.createElement(
-        ui.IconButton,
-        {
-          "aria-label": "clear",
-          key: "clear",
-          name: "times",
-          size: "md",
-          className: styles.clearIcon,
-          onClick: (e) => {
-            model.changeValueTo([], void 0, true);
-          }
-        }
-      )
-    );
-  }
-  if (isRestorable) {
-    buttons.push(
-      /* @__PURE__ */ React__default.default.createElement(
-        ui.IconButton,
-        {
-          onClick: (e) => {
-            props.model.restoreDefaultValues();
-          },
-          onKeyDownCapture: (e) => {
-            if (e.key === "Enter") {
-              props.model.restoreDefaultValues();
-            }
-          },
-          key: "restore",
-          name: "history",
-          size: "md",
-          className: styles.clearIcon,
-          tooltip: "Restore groupby set by this dashboard."
-        }
-      )
-    );
-  }
-  if (!isRestorable) {
-    buttons.push(
-      /* @__PURE__ */ React__default.default.createElement(
-        ui.Tooltip,
-        {
-          key: "tooltip",
-          content: "Applied by default in this dashboard. If edited, it carries over to other dashboards.",
-          placement: "bottom"
-        },
-        /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "md" })
-      )
-    );
-  }
-  return /* @__PURE__ */ React__default.default.createElement(
-    "div",
-    {
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      className: css.cx(
-        inputStyles.suffix,
-        css.css({
-          position: "relative"
-        })
-      )
-    },
-    buttons
-  );
-}
-const getStyles$h = (theme) => ({
-  clearIcon: css.css({
-    color: theme.colors.action.disabledText,
-    cursor: "pointer",
-    "&:hover:before": {
-      backgroundColor: "transparent"
-    },
-    "&:hover": {
-      color: theme.colors.text.primary
-    }
-  })
-});
-
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
     super({
@@ -3212,20 +3095,11 @@ class GroupByVariable extends MultiValueVariable {
     });
     this.isLazy = true;
     this._urlSync = new GroupByVariableUrlSyncHandler(this);
-    this._activationHandler = () => {
-      if (this.state.defaultValues && (lodash.isArray(this.state.value) && !this.state.value.length || !this.state.value)) {
-        this.setState({
-          value: this.state.defaultValues.value,
-          text: this.state.defaultValues.text
-        });
-        return;
-      }
-    };
     /**
      * Get possible keys given current filters. Do not call from plugins directly
      */
     this._getKeys = async (ds) => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c;
       const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, null));
       if (override && override.replace) {
         return override.values;
@@ -3243,7 +3117,7 @@ class GroupByVariable extends MultiValueVariable {
         filters: otherFilters,
         queries,
         timeRange,
-        scopes: (_d = this._scopesBridge) == null ? void 0 : _d.getValue(),
+        scopes: sceneGraph.getScopes(this),
         ...getEnrichedFiltersRequest(this)
       });
       if (responseHasError(response)) {
@@ -3265,7 +3139,6 @@ class GroupByVariable extends MultiValueVariable {
         return () => allActiveGroupByVariables.delete(this);
       });
     }
-    this.addActivationHandler(this._activationHandler);
   }
   validateAndUpdate() {
     return this.getValueOptions({}).pipe(
@@ -3324,21 +3197,6 @@ class GroupByVariable extends MultiValueVariable {
       })
     );
   }
-  checkIfRestorable(values) {
-    var _a, _b, _c, _d;
-    const originalValues = lodash.isArray((_a = this.state.defaultValues) == null ? void 0 : _a.value) ? (_b = this.state.defaultValues) == null ? void 0 : _b.value : ((_c = this.state.defaultValues) == null ? void 0 : _c.value) ? [(_d = this.state.defaultValues) == null ? void 0 : _d.value] : [];
-    const vals = lodash.isArray(values) ? values : [values];
-    if (vals.length !== originalValues.length) {
-      return true;
-    }
-    return !lodash.isEqual(vals, originalValues);
-  }
-  restoreDefaultValues() {
-    if (!this.state.defaultValues) {
-      return;
-    }
-    this.changeValueTo(this.state.defaultValues.value, this.state.defaultValues.text, true);
-  }
   /**
    * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable
    */
@@ -3357,8 +3215,7 @@ function GroupByVariableRenderer({ model }) {
     noValueOnClear,
     options,
     includeAll,
-    allowCustomValue = true,
-    defaultValues
+    allowCustomValue = true
   } = model.useState();
   const values = React.useMemo(() => {
     const arrayValue = lodash.isArray(value) ? value : [value];
@@ -3376,7 +3233,6 @@ function GroupByVariableRenderer({ model }) {
   const [inputValue, setInputValue] = React.useState("");
   const [uncommittedValue, setUncommittedValue] = React.useState(values);
   const optionSearcher = React.useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);
-  const hasDefaultValues = defaultValues !== void 0;
   React.useEffect(() => {
     setUncommittedValue(values);
   }, [values]);
@@ -3404,7 +3260,7 @@ function GroupByVariableRenderer({ model }) {
       "aria-label": "Group by selector",
       "data-testid": `GroupBySelect-${key}`,
       id: key,
-      placeholder: "Group by label",
+      placeholder: "Select value",
       width: "auto",
       allowCustomValue,
       inputValue,
@@ -3420,12 +3276,7 @@ function GroupByVariableRenderer({ model }) {
       isClearable: true,
       hideSelectedOptions: false,
       isLoading: isFetchingOptions,
-      components: {
-        Option: OptionWithCheckbox,
-        ...hasDefaultValues ? {
-          IndicatorsContainer: () => /* @__PURE__ */ React__default.default.createElement(DefaultGroupByCustomIndicatorContainer, { model })
-        } : {}
-      },
+      components: { Option: OptionWithCheckbox },
       onInputChange,
       onBlur: () => {
         model.changeValueTo(
@@ -3456,7 +3307,7 @@ function GroupByVariableRenderer({ model }) {
       "aria-label": "Group by selector",
       "data-testid": `GroupBySelect-${key}`,
       id: key,
-      placeholder: "Group by label",
+      placeholder: "Select value",
       width: "auto",
       inputValue,
       value: uncommittedValue && uncommittedValue.length > 0 ? uncommittedValue : null,
@@ -5500,25 +5351,21 @@ class AdHocFiltersVariable extends SceneObjectBase {
     // are set on construct and used to restore a baseFilter with an origin
     // to its original value if edited at some point
     this._originalValues = /* @__PURE__ */ new Map();
+    /** Needed for scopes dependency */
+    this._variableDependency = new VariableDependencyConfig(this, {
+      dependsOnScopes: true,
+      onReferencedVariableValueChanged: () => this._updateScopesFilters()
+    });
     this._urlSync = new AdHocFiltersVariableUrlSyncHandler(this);
     this._activationHandler = () => {
-      var _a, _b;
-      this._scopesBridge = sceneGraph.getScopesBridge(this);
-      const scopes = (_a = this._scopesBridge) == null ? void 0 : _a.getValue();
-      if (scopes) {
-        this._updateScopesFilters(scopes);
-      }
-      const sub = (_b = this._scopesBridge) == null ? void 0 : _b.subscribeToValue((n, _) => {
-        this._updateScopesFilters(n);
-      });
+      this._updateScopesFilters();
       return () => {
-        var _a2, _b2;
-        sub == null ? void 0 : sub.unsubscribe();
-        if ((_a2 = this.state.baseFilters) == null ? void 0 : _a2.length) {
+        var _a, _b;
+        if ((_a = this.state.baseFilters) == null ? void 0 : _a.length) {
           this.setState({
             baseFilters: [...this.state.baseFilters.filter((filter) => filter.origin !== "scope")]
           });
-          (_b2 = this.state.baseFilters) == null ? void 0 : _b2.forEach((filter) => {
+          (_b = this.state.baseFilters) == null ? void 0 : _b.forEach((filter) => {
             if (filter.origin === "dashboard" && filter.restorable) {
               this.restoreOriginalFilter(filter);
             }
@@ -5540,8 +5387,12 @@ class AdHocFiltersVariable extends SceneObjectBase {
     });
     this.addActivationHandler(this._activationHandler);
   }
-  _updateScopesFilters(scopes) {
+  _updateScopesFilters() {
     var _a, _b;
+    const scopes = sceneGraph.getScopes(this);
+    if (!scopes) {
+      return;
+    }
     if (!scopes.length) {
       this.setState({
         baseFilters: (_a = this.state.baseFilters) == null ? void 0 : _a.filter((filter) => filter.origin !== "scope")
@@ -5742,7 +5593,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
    * Get possible keys given current filters. Do not call from plugins directly
    */
   async _getKeys(currentKey) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, currentKey));
     if (override && override.replace) {
       return dataFromResponse(override.values).map(toSelectableValue);
@@ -5761,7 +5612,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
       filters: otherFilters,
       queries,
       timeRange,
-      scopes: (_d = this._scopesBridge) == null ? void 0 : _d.getValue(),
+      scopes: sceneGraph.getScopes(this),
       ...getEnrichedFiltersRequest(this)
     });
     if (responseHasError(response)) {
@@ -5781,7 +5632,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
    * Get possible key values for a specific key given current filters. Do not call from plugins directly
    */
   async _getValuesFor(filter) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const override = await ((_b = (_a = this.state).getTagValuesProvider) == null ? void 0 : _b.call(_a, this, filter));
     if (override && override.replace) {
       return dataFromResponse(override.values).map(toSelectableValue);
@@ -5794,7 +5645,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
     const otherFilters = this.state.filters.filter((f) => f.key !== filter.key).concat(filteredBaseFilters);
     const timeRange = sceneGraph.getTimeRange(this).state.value;
     const queries = this.state.useQueriesAsFilterForOptions ? getQueriesForVariables(this) : void 0;
-    let scopes = (_e = this._scopesBridge) == null ? void 0 : _e.getValue();
+    let scopes = sceneGraph.getScopes(this);
     if (filter.origin === "scope") {
       scopes = scopes == null ? void 0 : scopes.map((scope) => {
         return {
@@ -5952,7 +5803,8 @@ class SceneQueryRunner extends SceneObjectBase {
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["queries", "datasource", "minInterval"],
       onVariableUpdateCompleted: this.onVariableUpdatesCompleted.bind(this),
-      onAnyVariableChanged: this.onAnyVariableChanged.bind(this)
+      onAnyVariableChanged: this.onAnyVariableChanged.bind(this),
+      dependsOnScopes: true
     });
     this.onDataReceived = (data$1) => {
       const preProcessedData = data.preProcessPanelData(data$1, this.state.data);
@@ -5973,7 +5825,6 @@ class SceneQueryRunner extends SceneObjectBase {
   _onActivate() {
     if (this.isQueryModeAuto()) {
       const timeRange = sceneGraph.getTimeRange(this);
-      const scopesBridge = sceneGraph.getScopesBridge(this);
       const providers = this.getClosestExtraQueryProviders();
       for (const provider of providers) {
         this._subs.add(
@@ -5984,7 +5835,6 @@ class SceneQueryRunner extends SceneObjectBase {
           })
         );
       }
-      this.subscribeToScopesChanges(scopesBridge);
       this.subscribeToTimeRangeChanges(timeRange);
       if (this.shouldRunQueriesOnActivate()) {
         this.runQueries();
@@ -6148,21 +5998,6 @@ class SceneQueryRunner extends SceneObjectBase {
   isDataReadyToDisplay() {
     return Boolean(this.state._hasFetchedData);
   }
-  subscribeToScopesChanges(scopesBridge) {
-    if (!scopesBridge) {
-      return;
-    }
-    if (this._scopesSubBridge === scopesBridge) {
-      return;
-    }
-    if (this._scopesSub) {
-      this._scopesSub.unsubscribe();
-    }
-    this._scopesSubBridge = scopesBridge;
-    this._scopesSub = scopesBridge.subscribeToValue(() => {
-      this.runWithTimeRangeAndScopes(sceneGraph.getTimeRange(this), scopesBridge);
-    });
-  }
   subscribeToTimeRangeChanges(timeRange) {
     if (this._timeSubRange === timeRange) {
       return;
@@ -6172,17 +6007,15 @@ class SceneQueryRunner extends SceneObjectBase {
     }
     this._timeSubRange = timeRange;
     this._timeSub = timeRange.subscribeToState(() => {
-      this.runWithTimeRangeAndScopes(timeRange, sceneGraph.getScopesBridge(this));
+      this.runWithTimeRange(timeRange);
     });
   }
   runQueries() {
     const timeRange = sceneGraph.getTimeRange(this);
-    const scopesBridge = sceneGraph.getScopesBridge(this);
     if (this.isQueryModeAuto()) {
       this.subscribeToTimeRangeChanges(timeRange);
-      this.subscribeToScopesChanges(scopesBridge);
     }
-    this.runWithTimeRangeAndScopes(timeRange, scopesBridge);
+    this.runWithTimeRange(timeRange);
   }
   getMaxDataPoints() {
     var _a;
@@ -6202,8 +6035,8 @@ class SceneQueryRunner extends SceneObjectBase {
       data: { ...this.state.data, state: schema.LoadingState.Done }
     });
   }
-  async runWithTimeRangeAndScopes(timeRange, scopesBridge) {
-    var _a, _b, _c, _d;
+  async runWithTimeRange(timeRange) {
+    var _a, _b, _c;
     if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {
       return;
     }
@@ -6216,22 +6049,17 @@ class SceneQueryRunner extends SceneObjectBase {
       this.setState({ data: { ...(_b = this.state.data) != null ? _b : emptyPanelData, state: schema.LoadingState.Loading } });
       return;
     }
-    if ((scopesBridge == null ? void 0 : scopesBridge.isLoading()) && (scopesBridge == null ? void 0 : scopesBridge.getValue().length)) {
-      writeSceneLog("SceneQueryRunner", "Scopes are in loading state, skipping query execution");
-      this.setState({ data: { ...(_c = this.state.data) != null ? _c : emptyPanelData, state: schema.LoadingState.Loading } });
-      return;
-    }
     const { queries } = this.state;
     if (!(queries == null ? void 0 : queries.length)) {
       this._setNoDataState();
       return;
     }
     try {
-      const datasource = (_d = this.state.datasource) != null ? _d : findFirstDatasource(queries);
+      const datasource = (_c = this.state.datasource) != null ? _c : findFirstDatasource(queries);
       const ds = await getDataSource(datasource, this._scopedVars);
       this.findAndSubscribeToAdHocFilters(ds.uid);
       const runRequest = runtime.getRunRequest();
-      const { primary, secondaries, processors } = this.prepareRequests(timeRange, ds, scopesBridge);
+      const { primary, secondaries, processors } = this.prepareRequests(timeRange, ds);
       writeSceneLog("SceneQueryRunner", "Starting runRequest", this.state.key);
       let stream = runRequest(ds, primary);
       if (secondaries.length > 0) {
@@ -6272,7 +6100,7 @@ class SceneQueryRunner extends SceneObjectBase {
     clone["_results"].next({ origin: this, data: (_a = this.state.data) != null ? _a : emptyPanelData });
     return clone;
   }
-  prepareRequests(timeRange, ds, scopesBridge) {
+  prepareRequests(timeRange, ds) {
     var _a, _b;
     const { minInterval, queries } = this.state;
     let request = {
@@ -6293,7 +6121,7 @@ class SceneQueryRunner extends SceneObjectBase {
       },
       cacheTimeout: this.state.cacheTimeout,
       queryCachingTTL: this.state.queryCachingTTL,
-      scopes: scopesBridge == null ? void 0 : scopesBridge.getValue(),
+      scopes: sceneGraph.getScopes(this),
       // This asks the scene root to provide context properties like app, panel and dashboardUID
       ...getEnrichedDataRequest(this)
     };
@@ -6716,6 +6544,9 @@ class VariableDependencyConfig {
         this._dependencies.add(name);
       }
     }
+    if (this._options.dependsOnScopes) {
+      this._dependencies.add(SCOPES_VARIABLE_NAME);
+    }
     if (this._statePaths) {
       for (const path of this._statePaths) {
         if (path === "*") {
@@ -7244,90 +7075,83 @@ function containsSearchFilter(query) {
   return str.indexOf(SEARCH_FILTER_VARIABLE) > -1;
 }
 
-class SceneScopesBridge extends SceneObjectBase {
-  constructor() {
-    super(...arguments);
+class ScopesVariable extends SceneObjectBase {
+  constructor(state) {
+    super({
+      skipUrlSync: true,
+      loading: true,
+      scopes: [],
+      ...state,
+      type: "system",
+      name: SCOPES_VARIABLE_NAME,
+      hide: schema.VariableHide.hideVariable
+    });
     this._renderBeforeActivation = true;
-    this._contextSubject = new rxjs.BehaviorSubject(void 0);
-  }
-  getValue() {
-    var _a, _b;
-    return (_b = (_a = this.context) == null ? void 0 : _a.state.value) != null ? _b : [];
+    // Special options that enables variables to be hidden but still render to access react contexts
+    this.UNSAFE_renderAsHidden = true;
   }
   /**
-   * Emits values of the selected scopes array. It emits the current value and the previous value if there is a change.
-   * @param cb
+   * Temporary simple implementation to stringify the scopes.
    */
-  subscribeToValue(cb) {
-    return this.contextObservable.pipe(
-      rxjs.map((context) => {
-        var _a;
-        return (_a = context == null ? void 0 : context.state.value) != null ? _a : [];
-      }),
-      rxjs.pairwise(),
-      rxjs.filter(([prevScopes, newScopes]) => !lodash.isEqual(prevScopes, newScopes))
-    ).subscribe(([prevScopes, newScopes]) => {
-      cb(newScopes, prevScopes);
-    });
-  }
-  isLoading() {
-    var _a, _b;
-    return (_b = (_a = this.context) == null ? void 0 : _a.state.loading) != null ? _b : false;
-  }
-  subscribeToLoading(cb) {
-    return this.contextObservable.pipe(
-      rxjs.filter((context) => !!context),
-      rxjs.pairwise(),
-      rxjs.map(
-        ([prevContext, newContext]) => {
-          var _a, _b;
-          return [(_a = prevContext == null ? void 0 : prevContext.state.loading) != null ? _a : false, (_b = newContext == null ? void 0 : newContext.state.loading) != null ? _b : false];
-        }
-      ),
-      rxjs.filter(([prevLoading, newLoading]) => prevLoading !== newLoading)
-    ).subscribe(([_prevLoading, newLoading]) => {
-      cb(newLoading);
-    });
-  }
-  setEnabled(enabled) {
+  getValue() {
     var _a;
-    (_a = this.context) == null ? void 0 : _a.setEnabled(enabled);
+    const scopes = (_a = this.state.scopes) != null ? _a : [];
+    return new ScopesVariableFormatter(scopes.map((scope) => scope.metadata.name));
   }
-  setReadOnly(readOnly) {
-    var _a;
-    (_a = this.context) == null ? void 0 : _a.setReadOnly(readOnly);
+  getScopes() {
+    return this.state.scopes;
   }
   /**
    * This method is used to keep the context up to date with the scopes context received from React
-   *
-   * Its rationale is:
-   *   - When a new context is available, check if we have pending scopes passed from the URL
-   *      - If we have pending scopes, ask the new context to load them
-   *      - The loading should happen in a setTimeout to allow the existing context to pass its values to the URL sync handler
-   *   - If a new context is received, propagate it as a new value in the behavior subject
-   *   - If a new value is received, force a re-render to trigger the URL sync handler
+   * 1) Subscribes to ScopesContext state changes and synchronizes it with the variable state
+   * 2) Handles enable / disabling of scopes based on variable enable option.
    */
-  updateContext(newContext) {
-    var _a;
-    if (this.context !== newContext || ((_a = this.context) == null ? void 0 : _a.state) !== (newContext == null ? void 0 : newContext.state)) {
-      this._contextSubject.next(newContext);
+  setContext(context) {
+    if (!context) {
+      return;
     }
+    this._context = context;
+    const oldState = context.state;
+    if (this.state.enable != null) {
+      context.setEnabled(this.state.enable);
+    }
+    const sub = context.stateObservable.subscribe((state) => {
+      this.updateStateFromContext(state);
+    });
+    return () => {
+      sub.unsubscribe();
+      if (this.state.enable != null) {
+        context.setEnabled(oldState.enabled);
+      }
+    };
   }
-  get context() {
-    return this._contextSubject.getValue();
-  }
-  get contextObservable() {
-    return this._contextSubject.asObservable();
+  updateStateFromContext(state) {
+    const loading = state.value.length === 0 ? false : state.loading;
+    this.setState({ scopes: state.value, loading });
+    if (!loading) {
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    }
   }
 }
-SceneScopesBridge.Component = SceneScopesBridgeRenderer;
-function SceneScopesBridgeRenderer({ model }) {
-  const context = runtime.useScopes();
+ScopesVariable.Component = ScopesVariableRenderer;
+function ScopesVariableRenderer({ model }) {
+  const context = React.useContext(runtime.ScopesContext);
   React.useEffect(() => {
-    model.updateContext(context);
+    return model.setContext(context);
   }, [context, model]);
   return null;
 }
+class ScopesVariableFormatter {
+  constructor(_value) {
+    this._value = _value;
+  }
+  formatter(formatNameOrFn) {
+    if (formatNameOrFn === schema.VariableFormatID.QueryParam) {
+      return this._value.map((scope) => `scope=${encodeURIComponent(scope)}`).join("&");
+    }
+    return this._value.join(", ");
+  }
+}
 
 function getVariables(sceneObject) {
   var _a;
@@ -7472,9 +7296,12 @@ function findDescendents(scene, descendentType) {
   const targetScenes = findAllObjects(scene, isDescendentType);
   return targetScenes.filter(isDescendentType);
 }
-function getScopesBridge(sceneObject) {
-  var _a;
-  return (_a = findObject(sceneObject, (s) => s instanceof SceneScopesBridge)) != null ? _a : void 0;
+function getScopes(sceneObject) {
+  const scopesVariable = lookupVariable(SCOPES_VARIABLE_NAME, sceneObject);
+  if (scopesVariable instanceof ScopesVariable) {
+    return scopesVariable.state.scopes;
+  }
+  return void 0;
 }
 
 const sceneGraph = {
@@ -7493,7 +7320,7 @@ const sceneGraph = {
   getAncestor,
   getQueryController,
   findDescendents,
-  getScopesBridge
+  getScopes
 };
 
 class UniqueUrlKeyMapper {
@@ -9587,6 +9414,9 @@ function VariableValueSelectorsRenderer({ model }) {
 function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel }) {
   const state = useSceneObjectState(variable, { shouldActivateOrKeepAlive: true });
   if (state.hide === data.VariableHide.hideVariable && !showAlways) {
+    if (variable.UNSAFE_renderAsHidden) {
+      return /* @__PURE__ */ React__default.default.createElement(variable.Component, { model: variable });
+    }
     return null;
   }
   if (layout === "vertical") {
@@ -9650,8 +9480,6 @@ function VariableValueControlRenderer({ model }) {
 class SceneVariableSet extends SceneObjectBase {
   constructor(state) {
     super(state);
-    /** Variables that have changed in since the activation or since the first manual value change */
-    this._variablesThatHaveChanged = /* @__PURE__ */ new Set();
     /** Variables that are scheduled to be validated and updated */
     this._variablesToUpdate = /* @__PURE__ */ new Set();
     /** Variables currently updating  */
@@ -9778,7 +9606,8 @@ class SceneVariableSet extends SceneObjectBase {
   _updateNextBatch() {
     for (const variable of this._variablesToUpdate) {
       if (!variable.validateAndUpdate) {
-        throw new Error("Variable added to variablesToUpdate but does not have validateAndUpdate");
+        console.error("Variable added to variablesToUpdate but does not have validateAndUpdate");
+        continue;
       }
       if (this._updating.has(variable)) {
         continue;
@@ -9834,7 +9663,6 @@ class SceneVariableSet extends SceneObjectBase {
     this._updateNextBatch();
   }
   _handleVariableValueChanged(variableThatChanged) {
-    this._variablesThatHaveChanged.add(variableThatChanged);
     this._addDependentVariablesToUpdateQueue(variableThatChanged);
     if (!this._updating.has(variableThatChanged)) {
       this._updateNextBatch();
@@ -9861,7 +9689,10 @@ class SceneVariableSet extends SceneObjectBase {
           if (this._updating.has(otherVariable) && otherVariable.onCancel) {
             otherVariable.onCancel();
           }
-          this._variablesToUpdate.add(otherVariable);
+          if (otherVariable.validateAndUpdate) {
+            this._variablesToUpdate.add(otherVariable);
+          }
+          otherVariable.variableDependency.variableUpdateCompleted(variableThatChanged, true);
         }
       }
     }
@@ -9873,8 +9704,7 @@ class SceneVariableSet extends SceneObjectBase {
     if (!this.parent) {
       return;
     }
-    this._traverseSceneAndNotify(this.parent, variable, this._variablesThatHaveChanged.has(variable));
-    this._variablesThatHaveChanged.delete(variable);
+    this._traverseSceneAndNotify(this.parent, variable, true);
   }
   /**
    * Recursivly walk the full scene object graph and notify all objects with dependencies that include any of changed variables
@@ -9906,6 +9736,9 @@ class SceneVariableSet extends SceneObjectBase {
    * For example if C depends on variable B which depends on variable A and A is loading this returns true for variable C and B.
    */
   isVariableLoadingOrWaitingToUpdate(variable) {
+    if (variable.state.loading) {
+      return true;
+    }
     if (variable.isAncestorLoading && variable.isAncestorLoading()) {
       return true;
     }
@@ -12794,8 +12627,8 @@ class SceneApp extends SceneObjectBase {
   }
 }
 SceneApp.Component = ({ model }) => {
-  const { pages, scopesBridge } = model.useState();
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, scopesBridge && /* @__PURE__ */ React__default.default.createElement(scopesBridge.Component, { model: scopesBridge }), /* @__PURE__ */ React__default.default.createElement(SceneAppContext.Provider, { value: model }, /* @__PURE__ */ React__default.default.createElement(reactRouterDom.Routes, null, pages.map((page) => /* @__PURE__ */ React__default.default.createElement(reactRouterDom.Route, { key: page.state.url, path: page.state.routePath, element: /* @__PURE__ */ React__default.default.createElement(page.Component, { model: page }) })))));
+  const { pages } = model.useState();
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(SceneAppContext.Provider, { value: model }, /* @__PURE__ */ React__default.default.createElement(reactRouterDom.Routes, null, pages.map((page) => /* @__PURE__ */ React__default.default.createElement(reactRouterDom.Route, { key: page.state.url, path: page.state.routePath, element: /* @__PURE__ */ React__default.default.createElement(page.Component, { model: page }) })))));
 };
 const SceneAppContext = React.createContext(null);
 const sceneAppCache = /* @__PURE__ */ new Map();
@@ -13071,25 +12904,10 @@ function SceneAppDrilldownViewRender({ drilldown, parent }) {
 }
 
 class SceneAppPage extends SceneObjectBase {
-  constructor(state) {
-    super(state);
+  constructor() {
+    super(...arguments);
     this._sceneCache = /* @__PURE__ */ new Map();
     this._drilldownCache = /* @__PURE__ */ new Map();
-    this._activationHandler = () => {
-      if (!this.state.useScopes) {
-        return;
-      }
-      this._scopesBridge = sceneGraph.getScopesBridge(this);
-      if (!this._scopesBridge) {
-        throw new Error("Use of scopes is enabled but no scopes bridge found");
-      }
-      this._scopesBridge.setEnabled(true);
-      return () => {
-        var _a;
-        (_a = this._scopesBridge) == null ? void 0 : _a.setEnabled(false);
-      };
-    };
-    this.addActivationHandler(this._activationHandler);
   }
   initializeScene(scene) {
     this.setState({ initializedScene: scene });
@@ -14197,7 +14015,6 @@ exports.SceneObjectUrlSyncConfig = SceneObjectUrlSyncConfig;
 exports.SceneQueryRunner = SceneQueryRunner;
 exports.SceneReactObject = SceneReactObject;
 exports.SceneRefreshPicker = SceneRefreshPicker;
-exports.SceneScopesBridge = SceneScopesBridge;
 exports.SceneTimePicker = SceneTimePicker;
 exports.SceneTimeRange = SceneTimeRange;
 exports.SceneTimeRangeCompare = SceneTimeRangeCompare;
@@ -14207,6 +14024,7 @@ exports.SceneToolbarButton = SceneToolbarButton;
 exports.SceneToolbarInput = SceneToolbarInput;
 exports.SceneVariableSet = SceneVariableSet;
 exports.SceneVariableValueChangedEvent = SceneVariableValueChangedEvent;
+exports.ScopesVariable = ScopesVariable;
 exports.SplitLayout = SplitLayout;
 exports.TestVariable = TestVariable;
 exports.TextBoxVariable = TextBoxVariable;