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

package/dist/index.js

@@ -1283,7 +1283,6 @@ 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 = [
@@ -2965,18 +2964,34 @@ 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) };
+    return {
+      [this.getKey()]: toUrlValues(
+        this._sceneObject.state.value,
+        this._sceneObject.state.text,
+        (_a = this._sceneObject.state.defaultValues) == null ? void 0 : _a.value
+      )
+    };
   }
   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 } = fromUrlValues(urlValue);
+      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;
+      }
       this._sceneObject.changeValueTo(values2, texts);
     }
   }
@@ -2989,9 +3004,10 @@ class GroupByVariableUrlSyncHandler {
     return this._nextChangeShouldAddHistoryStep;
   }
 }
-function toUrlValues(values, texts) {
+function toUrlValues(values, texts, defaultValues) {
   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 "";
@@ -2999,21 +3015,27 @@ function toUrlValues(values, texts) {
     value = String(value);
     let text = texts[idx];
     text = text === void 0 || text === null ? value : String(text);
-    return toUrlCommaDelimitedString(value, text);
+    return toUrlCommaDelimitedString(value, text) + (defaults.includes(value) ? escapeUrlPipeDelimiters("|default") : "");
   });
 }
 function fromUrlValues(urlValues) {
   urlValues = Array.isArray(urlValues) ? urlValues : [urlValues];
   return urlValues.reduce(
     (acc, urlValue) => {
-      const [value, label] = (urlValue != null ? urlValue : "").split(",");
+      const pipeEscapedVal = /__gfp__/g[Symbol.replace](urlValue, "|");
+      const [commaValues, isDefault] = (pipeEscapedVal != null ? pipeEscapedVal : "").split("|");
+      const [value, label] = (commaValues != null ? commaValues : "").split(",");
       acc.values.push(unescapeUrlDelimiters(value));
       acc.texts.push(unescapeUrlDelimiters(label != null ? label : value));
+      if (isDefault) {
+        acc.defaults.push(value);
+      }
       return acc;
     },
     {
       values: [],
-      texts: []
+      texts: [],
+      defaults: []
     }
   );
 }
@@ -3077,6 +3099,101 @@ 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({
@@ -3095,11 +3212,20 @@ 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;
+      var _a, _b, _c, _d;
       const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, null));
       if (override && override.replace) {
         return override.values;
@@ -3117,7 +3243,7 @@ class GroupByVariable extends MultiValueVariable {
         filters: otherFilters,
         queries,
         timeRange,
-        scopes: sceneGraph.getScopes(this),
+        scopes: (_d = this._scopesBridge) == null ? void 0 : _d.getValue(),
         ...getEnrichedFiltersRequest(this)
       });
       if (responseHasError(response)) {
@@ -3139,6 +3265,7 @@ class GroupByVariable extends MultiValueVariable {
         return () => allActiveGroupByVariables.delete(this);
       });
     }
+    this.addActivationHandler(this._activationHandler);
   }
   validateAndUpdate() {
     return this.getValueOptions({}).pipe(
@@ -3197,6 +3324,21 @@ 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
    */
@@ -3215,7 +3357,8 @@ function GroupByVariableRenderer({ model }) {
     noValueOnClear,
     options,
     includeAll,
-    allowCustomValue = true
+    allowCustomValue = true,
+    defaultValues
   } = model.useState();
   const values = React.useMemo(() => {
     const arrayValue = lodash.isArray(value) ? value : [value];
@@ -3233,6 +3376,7 @@ 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]);
@@ -3260,7 +3404,7 @@ function GroupByVariableRenderer({ model }) {
       "aria-label": "Group by selector",
       "data-testid": `GroupBySelect-${key}`,
       id: key,
-      placeholder: "Select value",
+      placeholder: "Group by label",
       width: "auto",
       allowCustomValue,
       inputValue,
@@ -3276,7 +3420,12 @@ function GroupByVariableRenderer({ model }) {
       isClearable: true,
       hideSelectedOptions: false,
       isLoading: isFetchingOptions,
-      components: { Option: OptionWithCheckbox },
+      components: {
+        Option: OptionWithCheckbox,
+        ...hasDefaultValues ? {
+          IndicatorsContainer: () => /* @__PURE__ */ React__default.default.createElement(DefaultGroupByCustomIndicatorContainer, { model })
+        } : {}
+      },
       onInputChange,
       onBlur: () => {
         model.changeValueTo(
@@ -3307,7 +3456,7 @@ function GroupByVariableRenderer({ model }) {
       "aria-label": "Group by selector",
       "data-testid": `GroupBySelect-${key}`,
       id: key,
-      placeholder: "Select value",
+      placeholder: "Group by label",
       width: "auto",
       inputValue,
       value: uncommittedValue && uncommittedValue.length > 0 ? uncommittedValue : null,
@@ -5351,21 +5500,25 @@ 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 = () => {
-      this._updateScopesFilters();
+      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);
+      });
       return () => {
-        var _a, _b;
-        if ((_a = this.state.baseFilters) == null ? void 0 : _a.length) {
+        var _a2, _b2;
+        sub == null ? void 0 : sub.unsubscribe();
+        if ((_a2 = this.state.baseFilters) == null ? void 0 : _a2.length) {
           this.setState({
             baseFilters: [...this.state.baseFilters.filter((filter) => filter.origin !== "scope")]
           });
-          (_b = this.state.baseFilters) == null ? void 0 : _b.forEach((filter) => {
+          (_b2 = this.state.baseFilters) == null ? void 0 : _b2.forEach((filter) => {
             if (filter.origin === "dashboard" && filter.restorable) {
               this.restoreOriginalFilter(filter);
             }
@@ -5387,12 +5540,8 @@ class AdHocFiltersVariable extends SceneObjectBase {
     });
     this.addActivationHandler(this._activationHandler);
   }
-  _updateScopesFilters() {
+  _updateScopesFilters(scopes) {
     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")
@@ -5593,7 +5742,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
    * Get possible keys given current filters. Do not call from plugins directly
    */
   async _getKeys(currentKey) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     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);
@@ -5612,7 +5761,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
       filters: otherFilters,
       queries,
       timeRange,
-      scopes: sceneGraph.getScopes(this),
+      scopes: (_d = this._scopesBridge) == null ? void 0 : _d.getValue(),
       ...getEnrichedFiltersRequest(this)
     });
     if (responseHasError(response)) {
@@ -5632,7 +5781,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;
+    var _a, _b, _c, _d, _e;
     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);
@@ -5645,7 +5794,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 = sceneGraph.getScopes(this);
+    let scopes = (_e = this._scopesBridge) == null ? void 0 : _e.getValue();
     if (filter.origin === "scope") {
       scopes = scopes == null ? void 0 : scopes.map((scope) => {
         return {
@@ -5803,8 +5952,7 @@ class SceneQueryRunner extends SceneObjectBase {
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["queries", "datasource", "minInterval"],
       onVariableUpdateCompleted: this.onVariableUpdatesCompleted.bind(this),
-      onAnyVariableChanged: this.onAnyVariableChanged.bind(this),
-      dependsOnScopes: true
+      onAnyVariableChanged: this.onAnyVariableChanged.bind(this)
     });
     this.onDataReceived = (data$1) => {
       const preProcessedData = data.preProcessPanelData(data$1, this.state.data);
@@ -5825,6 +5973,7 @@ 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(
@@ -5835,6 +5984,7 @@ class SceneQueryRunner extends SceneObjectBase {
           })
         );
       }
+      this.subscribeToScopesChanges(scopesBridge);
       this.subscribeToTimeRangeChanges(timeRange);
       if (this.shouldRunQueriesOnActivate()) {
         this.runQueries();
@@ -5998,6 +6148,21 @@ 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;
@@ -6007,15 +6172,17 @@ class SceneQueryRunner extends SceneObjectBase {
     }
     this._timeSubRange = timeRange;
     this._timeSub = timeRange.subscribeToState(() => {
-      this.runWithTimeRange(timeRange);
+      this.runWithTimeRangeAndScopes(timeRange, sceneGraph.getScopesBridge(this));
     });
   }
   runQueries() {
     const timeRange = sceneGraph.getTimeRange(this);
+    const scopesBridge = sceneGraph.getScopesBridge(this);
     if (this.isQueryModeAuto()) {
       this.subscribeToTimeRangeChanges(timeRange);
+      this.subscribeToScopesChanges(scopesBridge);
     }
-    this.runWithTimeRange(timeRange);
+    this.runWithTimeRangeAndScopes(timeRange, scopesBridge);
   }
   getMaxDataPoints() {
     var _a;
@@ -6035,8 +6202,8 @@ class SceneQueryRunner extends SceneObjectBase {
       data: { ...this.state.data, state: schema.LoadingState.Done }
     });
   }
-  async runWithTimeRange(timeRange) {
-    var _a, _b, _c;
+  async runWithTimeRangeAndScopes(timeRange, scopesBridge) {
+    var _a, _b, _c, _d;
     if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {
       return;
     }
@@ -6049,17 +6216,22 @@ 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 = (_c = this.state.datasource) != null ? _c : findFirstDatasource(queries);
+      const datasource = (_d = this.state.datasource) != null ? _d : 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);
+      const { primary, secondaries, processors } = this.prepareRequests(timeRange, ds, scopesBridge);
       writeSceneLog("SceneQueryRunner", "Starting runRequest", this.state.key);
       let stream = runRequest(ds, primary);
       if (secondaries.length > 0) {
@@ -6100,7 +6272,7 @@ class SceneQueryRunner extends SceneObjectBase {
     clone["_results"].next({ origin: this, data: (_a = this.state.data) != null ? _a : emptyPanelData });
     return clone;
   }
-  prepareRequests(timeRange, ds) {
+  prepareRequests(timeRange, ds, scopesBridge) {
     var _a, _b;
     const { minInterval, queries } = this.state;
     let request = {
@@ -6121,7 +6293,7 @@ class SceneQueryRunner extends SceneObjectBase {
       },
       cacheTimeout: this.state.cacheTimeout,
       queryCachingTTL: this.state.queryCachingTTL,
-      scopes: sceneGraph.getScopes(this),
+      scopes: scopesBridge == null ? void 0 : scopesBridge.getValue(),
       // This asks the scene root to provide context properties like app, panel and dashboardUID
       ...getEnrichedDataRequest(this)
     };
@@ -6544,9 +6716,6 @@ 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 === "*") {
@@ -7075,73 +7244,87 @@ function containsSearchFilter(query) {
   return str.indexOf(SEARCH_FILTER_VARIABLE) > -1;
 }
 
-class ScopesVariable extends SceneObjectBase {
-  constructor(state) {
-    super({
-      skipUrlSync: true,
-      loading: true,
-      scopes: [],
-      ...state,
-      type: "system",
-      name: SCOPES_VARIABLE_NAME,
-      hide: schema.VariableHide.hideVariable
-    });
+class SceneScopesBridge extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
     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 : [];
   }
   /**
-   * Temporary simple implementation to stringify the scopes.
+   * Emits values of the selected scopes array. It emits the current value and the previous value if there is a change.
+   * @param cb
    */
-  getValue(fieldPath) {
+  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) {
     var _a;
-    const scopes = (_a = this.state.scopes) != null ? _a : [];
-    const scopeNames = scopes.map((scope) => scope.metadata.name);
-    return scopeNames.join(", ");
+    (_a = this.context) == null ? void 0 : _a.setEnabled(enabled);
   }
-  getScopes() {
-    return this.state.scopes;
+  setReadOnly(readOnly) {
+    var _a;
+    (_a = this.context) == null ? void 0 : _a.setReadOnly(readOnly);
   }
   /**
    * This method is used to keep the context up to date with the scopes context received from React
-   * 1) Subscribes to ScopesContext state changes and synchronizes it with the variable state
-   * 2) Handles enable / disabling of scopes based on variable enable option.
+   *
+   * 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
    */
-  setContext(context) {
-    if (!context) {
-      return;
-    }
-    this._context = context;
-    const oldState = context.state;
-    if (this.state.enable != null) {
-      context.setEnabled(this.state.enable);
+  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);
     }
-    const sub = context.stateObservable.subscribe((state) => {
-      this.updateStateFromContext(state);
-    });
-    return () => {
-      sub.unsubscribe();
-      if (this.state.enable != null) {
-        context.setEnabled(oldState.enabled);
-      }
-    };
   }
-  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);
-    }
+  get context() {
+    return this._contextSubject.getValue();
   }
-  /**
-   * Special function that enables variables to be hidden but still render to access react contexts
-   */
-  hiddenRender() {
-    return /* @__PURE__ */ React__default.default.createElement(ScopesVariableRenderer, { model: this });
+  get contextObservable() {
+    return this._contextSubject.asObservable();
   }
 }
-function ScopesVariableRenderer({ model }) {
-  const context = React.useContext(runtime.ScopesContext);
+SceneScopesBridge.Component = SceneScopesBridgeRenderer;
+function SceneScopesBridgeRenderer({ model }) {
+  const context = runtime.useScopes();
   React.useEffect(() => {
-    return model.setContext(context);
+    model.updateContext(context);
   }, [context, model]);
   return null;
 }
@@ -7289,12 +7472,9 @@ function findDescendents(scene, descendentType) {
   const targetScenes = findAllObjects(scene, isDescendentType);
   return targetScenes.filter(isDescendentType);
 }
-function getScopes(sceneObject) {
-  const scopesVariable = lookupVariable(SCOPES_VARIABLE_NAME, sceneObject);
-  if (scopesVariable instanceof ScopesVariable) {
-    return scopesVariable.state.scopes;
-  }
-  return void 0;
+function getScopesBridge(sceneObject) {
+  var _a;
+  return (_a = findObject(sceneObject, (s) => s instanceof SceneScopesBridge)) != null ? _a : void 0;
 }
 
 const sceneGraph = {
@@ -7313,7 +7493,7 @@ const sceneGraph = {
   getAncestor,
   getQueryController,
   findDescendents,
-  getScopes
+  getScopesBridge
 };
 
 class UniqueUrlKeyMapper {
@@ -8351,8 +8531,8 @@ class VizPanel extends SceneObjectBase {
     this._prevData = rawData;
     return this._dataWithFieldConfig;
   }
-  clone() {
-    return super.clone({ _pluginInstanceState: void 0, _pluginLoadError: void 0 });
+  clone(withState) {
+    return super.clone({ _pluginInstanceState: void 0, _pluginLoadError: void 0, ...withState });
   }
   buildPanelContext() {
     const sync = getCursorSyncScope(this);
@@ -9407,9 +9587,6 @@ function VariableValueSelectorsRenderer({ model }) {
 function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel }) {
   const state = useSceneObjectState(variable, { shouldActivateOrKeepAlive: true });
   if (state.hide === data.VariableHide.hideVariable && !showAlways) {
-    if (variable.hiddenRender) {
-      return variable.hiddenRender();
-    }
     return null;
   }
   if (layout === "vertical") {
@@ -9473,6 +9650,8 @@ 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  */
@@ -9599,8 +9778,7 @@ class SceneVariableSet extends SceneObjectBase {
   _updateNextBatch() {
     for (const variable of this._variablesToUpdate) {
       if (!variable.validateAndUpdate) {
-        console.error("Variable added to variablesToUpdate but does not have validateAndUpdate");
-        continue;
+        throw new Error("Variable added to variablesToUpdate but does not have validateAndUpdate");
       }
       if (this._updating.has(variable)) {
         continue;
@@ -9656,6 +9834,7 @@ class SceneVariableSet extends SceneObjectBase {
     this._updateNextBatch();
   }
   _handleVariableValueChanged(variableThatChanged) {
+    this._variablesThatHaveChanged.add(variableThatChanged);
     this._addDependentVariablesToUpdateQueue(variableThatChanged);
     if (!this._updating.has(variableThatChanged)) {
       this._updateNextBatch();
@@ -9682,10 +9861,7 @@ class SceneVariableSet extends SceneObjectBase {
           if (this._updating.has(otherVariable) && otherVariable.onCancel) {
             otherVariable.onCancel();
           }
-          if (otherVariable.validateAndUpdate) {
-            this._variablesToUpdate.add(otherVariable);
-          }
-          otherVariable.variableDependency.variableUpdateCompleted(variableThatChanged, true);
+          this._variablesToUpdate.add(otherVariable);
         }
       }
     }
@@ -9697,7 +9873,8 @@ class SceneVariableSet extends SceneObjectBase {
     if (!this.parent) {
       return;
     }
-    this._traverseSceneAndNotify(this.parent, variable, true);
+    this._traverseSceneAndNotify(this.parent, variable, this._variablesThatHaveChanged.has(variable));
+    this._variablesThatHaveChanged.delete(variable);
   }
   /**
    * Recursivly walk the full scene object graph and notify all objects with dependencies that include any of changed variables
@@ -9729,9 +9906,6 @@ 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;
     }
@@ -12620,8 +12794,8 @@ class SceneApp extends SceneObjectBase {
   }
 }
 SceneApp.Component = ({ model }) => {
-  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 { 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 SceneAppContext = React.createContext(null);
 const sceneAppCache = /* @__PURE__ */ new Map();
@@ -12897,10 +13071,25 @@ function SceneAppDrilldownViewRender({ drilldown, parent }) {
 }
 
 class SceneAppPage extends SceneObjectBase {
-  constructor() {
-    super(...arguments);
+  constructor(state) {
+    super(state);
     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 });
@@ -14008,6 +14197,7 @@ exports.SceneObjectUrlSyncConfig = SceneObjectUrlSyncConfig;
 exports.SceneQueryRunner = SceneQueryRunner;
 exports.SceneReactObject = SceneReactObject;
 exports.SceneRefreshPicker = SceneRefreshPicker;
+exports.SceneScopesBridge = SceneScopesBridge;
 exports.SceneTimePicker = SceneTimePicker;
 exports.SceneTimeRange = SceneTimeRange;
 exports.SceneTimeRangeCompare = SceneTimeRangeCompare;
@@ -14017,7 +14207,6 @@ exports.SceneToolbarButton = SceneToolbarButton;
 exports.SceneToolbarInput = SceneToolbarInput;
 exports.SceneVariableSet = SceneVariableSet;
 exports.SceneVariableValueChangedEvent = SceneVariableValueChangedEvent;
-exports.ScopesVariable = ScopesVariable;
 exports.SplitLayout = SplitLayout;
 exports.TestVariable = TestVariable;
 exports.TextBoxVariable = TextBoxVariable;