@grafana/scenes 5.29.0--canary.992.12182926395.0 → 5.29.1--canary.990.12238644149.0

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import * as _grafana_data from '@grafana/data';
-import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeRange, DataQueryRequest, DataSourceGetTagKeysOptions, DataSourceGetTagValuesOptions, DataTransformContext, DataFrame, UrlQueryMap, PanelPlugin, EventBus, DataQuery as DataQuery$1, DataSourceApi, Registry, RegistryItem, ScopedVars, AdHocVariableFilter, SelectableValue, MetricFindValue, GetTagResponse, VariableRefresh as VariableRefresh$1, VariableSort, EventFilterOptions, AnnotationEvent, AnnotationQuery, DataTransformerConfig, PanelMenuItem, FieldConfigSource, PanelModel, AbsoluteTimeRange, InterpolateFunction, IconName as IconName$1, PageLayoutType, FieldConfig, FieldType, FieldValueMatcherConfig, ScopedVar, RawTimeRange } from '@grafana/data';
+import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeRange, DataQueryRequest, DataSourceGetTagKeysOptions, DataSourceGetTagValuesOptions, DataTransformContext, DataFrame, UrlQueryMap, PanelPlugin, EventBus, DataQuery as DataQuery$1, DataSourceApi, Registry, RegistryItem, ScopedVars, AdHocVariableFilter, SelectableValue, MetricFindValue, GetTagResponse, VariableRefresh as VariableRefresh$1, VariableSort, Scope, EventFilterOptions, AnnotationEvent, AnnotationQuery, DataTransformerConfig, PanelMenuItem, FieldConfigSource, PanelModel, AbsoluteTimeRange, InterpolateFunction, IconName as IconName$1, PageLayoutType, FieldConfig, FieldType, FieldValueMatcherConfig, ScopedVar, RawTimeRange } from '@grafana/data';
 import * as React$1 from 'react';
 import React__default, { CSSProperties, ComponentType } from 'react';
 import * as rxjs from 'rxjs';
 import { Observable, Unsubscribable, MonoTypeOperatorFunction, Subscription, ReplaySubject } from 'rxjs';
 import * as _grafana_schema from '@grafana/schema';
 import { VariableType, VariableHide, TimeZone, DataTopic, DataQuery, DataSourceRef, VariableRefresh, LoadingState, DashboardCursorSync, MatcherConfig, TableFieldOptions } from '@grafana/schema';
-import { LocationService, VariableInterpolation } from '@grafana/runtime';
+import { LocationService, ScopesContextValue, VariableInterpolation } from '@grafana/runtime';
 import { Location } from 'history';
 import { PanelContext, IconName } from '@grafana/ui';
 import ReactGridLayout from 'react-grid-layout';
@@ -629,8 +629,10 @@ declare class AdHocFiltersVariable extends SceneObjectBase<AdHocFiltersVariableS
     static Component: typeof AdHocFiltersVariableRenderer;
     private _scopedVars;
     private _dataSourceSrv;
+    private _scopesBridge;
     protected _urlSync: AdHocFiltersVariableUrlSyncHandler;
     constructor(state: Partial<AdHocFiltersVariableState>);
+    private _activationHandler;
     setState(update: Partial<AdHocFiltersVariableState>): void;
     getValue(): VariableValue | undefined;
     _updateFilter(filter: AdHocFilterWithLabels, update: Partial<AdHocFilterWithLabels>): void;
@@ -917,6 +919,7 @@ declare class GroupByVariable extends MultiValueVariable<GroupByVariableState> {
     static Component: typeof GroupByVariableRenderer;
     isLazy: boolean;
     protected _urlSync: SceneObjectUrlSyncHandler;
+    private _scopesBridge;
     validateAndUpdate(): Observable<ValidateAndUpdateResult>;
     private _updateValueGivenNewOptions;
     getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]>;
@@ -933,7 +936,7 @@ declare class GroupByVariable extends MultiValueVariable<GroupByVariableState> {
         text: string[];
     };
 }
-declare function GroupByVariableRenderer({ model }: SceneComponentProps<MultiValueVariable>): React__default.JSX.Element;
+declare function GroupByVariableRenderer({ model }: SceneComponentProps<GroupByVariable>): React__default.JSX.Element;
 
 declare function isAdHocVariable(variable: SceneVariable): variable is AdHocFiltersVariable;
 declare function isConstantVariable(variable: SceneVariable): variable is ConstantVariable;
@@ -1034,6 +1037,41 @@ declare class UrlSyncManager implements UrlSyncManagerLike {
     getUrlState(root: SceneObject): SceneObjectUrlValues;
 }
 
+interface SceneObjectUrlSyncConfigOptions {
+    keys: string[] | (() => string[]);
+}
+declare class SceneObjectUrlSyncConfig implements SceneObjectUrlSyncHandler {
+    private _sceneObject;
+    private _keys;
+    private _nextChangeShouldAddHistoryStep;
+    constructor(_sceneObject: SceneObjectWithUrlSync, _options: SceneObjectUrlSyncConfigOptions);
+    getKeys(): string[];
+    getUrlState(): SceneObjectUrlValues;
+    updateFromUrl(values: SceneObjectUrlValues): void;
+    performBrowserHistoryAction(callback: () => void): void;
+    shouldCreateHistoryStep(values: SceneObjectUrlValues): boolean;
+}
+
+declare class SceneScopesBridge extends SceneObjectBase implements SceneObjectWithUrlSync {
+    static Component: typeof SceneScopesBridgeRenderer;
+    protected _urlSync: SceneObjectUrlSyncConfig;
+    protected _renderBeforeActivation: boolean;
+    private _contextSubject;
+    private _pendingScopes;
+    getUrlState(): SceneObjectUrlValues;
+    updateFromUrl(values: SceneObjectUrlValues): void;
+    getValue(): Scope[];
+    subscribeToValue(cb: (newScopes: Scope[], prevScopes: Scope[]) => void): Unsubscribable;
+    isLoading(): boolean;
+    subscribeToLoading(cb: (loading: boolean) => void): Unsubscribable;
+    setEnabled(enabled: boolean): void;
+    setReadOnly(readOnly: boolean): void;
+    updateContext(newContext: ScopesContextValue | undefined): void;
+    private get context();
+    private get contextObservable();
+}
+declare function SceneScopesBridgeRenderer({ model }: SceneComponentProps<SceneScopesBridge>): null;
+
 /**
  * Get the closest node with variables
  */
@@ -1112,6 +1150,10 @@ declare function getQueryController(sceneObject: SceneObject): SceneQueryControl
  * name urlSyncManager that is of type UrlSyncManager
  */
 declare function getUrlSyncManager(sceneObject: SceneObject): UrlSyncManagerLike | undefined;
+/**
+ * Will walk up the scene object graph to the closest $scopesBridge scene object
+ */
+declare function getScopesBridge(sceneObject: SceneObject): SceneScopesBridge | undefined;
 
 declare const sceneGraph: {
     getVariables: typeof getVariables;
@@ -1130,6 +1172,7 @@ declare const sceneGraph: {
     findDescendents: typeof findDescendents;
     getQueryController: typeof getQueryController;
     getUrlSyncManager: typeof getUrlSyncManager;
+    getScopesBridge: typeof getScopesBridge;
 };
 
 interface ActWhenVariableChangedState extends SceneObjectState {
@@ -1294,21 +1337,6 @@ declare class SceneDataNode extends SceneObjectBase<SceneDataNodeState> implemen
     getResultsStream(): rxjs.Observable<SceneDataProviderResult>;
 }
 
-interface SceneObjectUrlSyncConfigOptions {
-    keys: string[] | (() => string[]);
-}
-declare class SceneObjectUrlSyncConfig implements SceneObjectUrlSyncHandler {
-    private _sceneObject;
-    private _keys;
-    private _nextChangeShouldAddHistoryStep;
-    constructor(_sceneObject: SceneObjectWithUrlSync, _options: SceneObjectUrlSyncConfigOptions);
-    getKeys(): string[];
-    getUrlState(): SceneObjectUrlValues;
-    updateFromUrl(values: SceneObjectUrlValues): void;
-    performBrowserHistoryAction(callback: () => void): void;
-    shouldCreateHistoryStep(values: SceneObjectUrlValues): boolean;
-}
-
 declare class SceneTimeRange extends SceneObjectBase<SceneTimeRangeState> implements SceneTimeRangeLike {
     protected _urlSync: SceneObjectUrlSyncConfig;
     constructor(state?: Partial<SceneTimeRangeState>);
@@ -1383,6 +1411,8 @@ declare class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> impleme
     private _dataLayersMerger;
     private _timeSub?;
     private _timeSubRange?;
+    private _scopesSub?;
+    private _scopesSubBridge?;
     private _containerWidth?;
     private _variableValueRecorder;
     private _results;
@@ -1421,11 +1451,12 @@ declare class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> impleme
     private _onDeactivate;
     setContainerWidth(width: number): void;
     isDataReadyToDisplay(): boolean;
+    private subscribeToScopesChanges;
     private subscribeToTimeRangeChanges;
     runQueries(): void;
     private getMaxDataPoints;
     cancelQuery(): void;
-    private runWithTimeRange;
+    private runWithTimeRangeAndScopes;
     clone(withState?: Partial<QueryRunnerState>): this;
     private prepareRequests;
     private onDataReceived;
@@ -2267,6 +2298,7 @@ interface SceneAppState extends SceneObjectState {
     pages: SceneAppPageLike[];
     name?: string;
     urlSyncOptions?: SceneUrlSyncOptions;
+    scopesBridge?: SceneScopesBridge;
 }
 interface SceneAppRoute {
     path: string;
@@ -2311,6 +2343,7 @@ interface SceneAppPageState extends SceneObjectState {
      */
     getFallbackPage?: () => SceneAppPageLike;
     layout?: PageLayoutType;
+    useScopes?: boolean;
 }
 interface SceneAppPageLike extends SceneObject<SceneAppPageState>, DataRequestEnricher {
     initializeScene(scene: SceneObject): void;
@@ -2335,6 +2368,7 @@ interface SceneAppDrilldownView {
  * Responsible for top level pages routing
  */
 declare class SceneApp extends SceneObjectBase<SceneAppState> implements DataRequestEnricher {
+    protected _renderBeforeActivation: boolean;
     enrichDataRequest(): {
         app: string;
     };
@@ -2352,7 +2386,9 @@ declare class SceneAppPage extends SceneObjectBase<SceneAppPageState> implements
     static Component: typeof SceneAppPageRenderer;
     private _sceneCache;
     private _drilldownCache;
+    private _scopesBridge;
     constructor(state: SceneAppPageState);
+    private _activationHandler;
     initializeScene(scene: EmbeddedScene): void;
     getScene(routeMatch: SceneRouteMatch): EmbeddedScene;
     getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch<{}>): SceneAppPageLike;
@@ -2853,4 +2889,4 @@ declare const sceneUtils: {
     isGroupByVariable: typeof isGroupByVariable;
 };
 
-export { AdHocFiltersVariable, CancelActivationHandler, ConstantVariable, ControlsLabel, ControlsLayout, CustomFormatterVariable, CustomTransformOperator, CustomTransformerDefinition, CustomVariable, CustomVariableValue, DataLayerFilter, DataProviderProxy, DataRequestEnricher, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, ExtraQueryDataProcessor, ExtraQueryDescriptor, ExtraQueryProvider, FieldConfigBuilder, FieldConfigBuilders, FieldConfigOverridesBuilder, FiltersRequestEnricher, FormatVariable, GroupByVariable, InterpolationFormatParameter, IntervalVariable, LocalValueVariable, MacroVariableConstructor, MultiValueVariable, MultiValueVariableState, NestedScene, NewSceneObjectAddedEvent, PanelBuilders, PanelOptionsBuilders, QueryRunnerState, QueryVariable, RuntimeDataSource, SafeSerializableSceneObject, SceneActivationHandler, SceneApp, SceneAppDrilldownView, SceneAppPage, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneByFrameRepeater, SceneByVariableRepeater, SceneCSSGridItem, SceneCSSGridLayout, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataLayerBase, SceneDataLayerControls, SceneDataLayerProvider, SceneDataLayerProviderState, SceneDataLayerSet, SceneDataLayerSetBase, SceneDataNode, SceneDataProvider, SceneDataProviderResult, SceneDataQuery, SceneDataState, SceneDataTransformer, SceneDataTransformerState, SceneDeactivationHandler, SceneDebugger, SceneFlexItem, SceneFlexItemLike, SceneFlexItemState, SceneFlexLayout, SceneGridItem, SceneGridItemLike, SceneGridItemStateLike, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChildOptions, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryControllerEntry, SceneQueryControllerEntryType, SceneQueryControllerLike, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneRefreshPickerState, SceneRouteMatch, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeLike, SceneTimeRangeState, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneUrlSyncOptions, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, SplitLayout, TestVariable, TextBoxVariable, UrlSyncContextProvider, UrlSyncManager, UrlSyncManagerLike, UseStateHookOptions, UserActionEvent, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableGetOptionsArgs, VariableValue, VariableValueControl, VariableValueOption, VariableValueSelectWrapper, VariableValueSelectors, VariableValueSingle, VizConfig, VizConfigBuilder, VizConfigBuilders, VizPanel, VizPanelBuilder, VizPanelExploreButton, VizPanelMenu, VizPanelState, index$1 as behaviors, index as dataLayers, formatRegistry, getExploreURL, isCustomVariableValue, isDataLayer, isDataRequestEnricher, isFiltersRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, renderSelectForVariable, sceneGraph, sceneUtils, useSceneApp, useSceneObjectState, useUrlSync };
+export { AdHocFiltersVariable, CancelActivationHandler, ConstantVariable, ControlsLabel, ControlsLayout, CustomFormatterVariable, CustomTransformOperator, CustomTransformerDefinition, CustomVariable, CustomVariableValue, DataLayerFilter, DataProviderProxy, DataRequestEnricher, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, ExtraQueryDataProcessor, ExtraQueryDescriptor, ExtraQueryProvider, FieldConfigBuilder, FieldConfigBuilders, FieldConfigOverridesBuilder, FiltersRequestEnricher, FormatVariable, GroupByVariable, InterpolationFormatParameter, IntervalVariable, LocalValueVariable, MacroVariableConstructor, MultiValueVariable, MultiValueVariableState, NestedScene, NewSceneObjectAddedEvent, PanelBuilders, PanelOptionsBuilders, QueryRunnerState, QueryVariable, RuntimeDataSource, SafeSerializableSceneObject, SceneActivationHandler, SceneApp, SceneAppDrilldownView, SceneAppPage, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneByFrameRepeater, SceneByVariableRepeater, SceneCSSGridItem, SceneCSSGridLayout, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataLayerBase, SceneDataLayerControls, SceneDataLayerProvider, SceneDataLayerProviderState, SceneDataLayerSet, SceneDataLayerSetBase, SceneDataNode, SceneDataProvider, SceneDataProviderResult, SceneDataQuery, SceneDataState, SceneDataTransformer, SceneDataTransformerState, SceneDeactivationHandler, SceneDebugger, SceneFlexItem, SceneFlexItemLike, SceneFlexItemState, SceneFlexLayout, SceneGridItem, SceneGridItemLike, SceneGridItemStateLike, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChildOptions, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryControllerEntry, SceneQueryControllerEntryType, SceneQueryControllerLike, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneRefreshPickerState, SceneRouteMatch, SceneScopesBridge, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeLike, SceneTimeRangeState, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneUrlSyncOptions, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, SplitLayout, TestVariable, TextBoxVariable, UrlSyncContextProvider, UrlSyncManager, UrlSyncManagerLike, UseStateHookOptions, UserActionEvent, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableGetOptionsArgs, VariableValue, VariableValueControl, VariableValueOption, VariableValueSelectWrapper, VariableValueSelectors, VariableValueSingle, VizConfig, VizConfigBuilder, VizConfigBuilders, VizPanel, VizPanelBuilder, VizPanelExploreButton, VizPanelMenu, VizPanelState, index$1 as behaviors, index as dataLayers, formatRegistry, getExploreURL, isCustomVariableValue, isDataLayer, isDataRequestEnricher, isFiltersRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, renderSelectForVariable, sceneGraph, sceneUtils, useSceneApp, useSceneObjectState, useUrlSync };

package/dist/index.js

@@ -2904,7 +2904,7 @@ class GroupByVariable extends MultiValueVariable {
     this.isLazy = true;
     this._urlSync = new GroupByVariableUrlSyncHandler(this);
     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;
@@ -2921,7 +2921,8 @@ class GroupByVariable extends MultiValueVariable {
       const response = await ds.getTagKeys(__spreadValues$F({
         filters: otherFilters,
         queries,
-        timeRange
+        timeRange,
+        scopes: (_d = this._scopesBridge) == null ? void 0 : _d.getValue()
       }, getEnrichedFiltersRequest(this)));
       if (responseHasError(response)) {
         this.setState({ error: response.error.message });
@@ -2937,6 +2938,7 @@ class GroupByVariable extends MultiValueVariable {
       return keys;
     };
     this.addActivationHandler(() => {
+      this._scopesBridge = sceneGraph.getScopesBridge(this);
       allActiveGroupByVariables.add(this);
       return () => allActiveGroupByVariables.delete(this);
     });
@@ -4986,9 +4988,13 @@ class AdHocFiltersVariable extends SceneObjectBase {
     this._scopedVars = { __sceneObject: wrapInSafeSerializableSceneObject(this) };
     this._dataSourceSrv = runtime.getDataSourceSrv();
     this._urlSync = new AdHocFiltersVariableUrlSyncHandler(this);
+    this._activationHandler = () => {
+      this._scopesBridge = sceneGraph.getScopesBridge(this);
+    };
     if (this.state.applyMode === "auto") {
       patchGetAdhocFilters(this);
     }
+    this.addActivationHandler(this._activationHandler);
   }
   setState(update) {
     let filterExpressionChanged = false;
@@ -5057,7 +5063,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
     }
   }
   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);
@@ -5075,7 +5081,8 @@ class AdHocFiltersVariable extends SceneObjectBase {
     const response = await ds.getTagKeys(__spreadValues$z({
       filters: otherFilters,
       queries,
-      timeRange
+      timeRange,
+      scopes: (_d = this._scopesBridge) == null ? void 0 : _d.getValue()
     }, getEnrichedFiltersRequest(this)));
     if (responseHasError(response)) {
       this.setState({ error: response.error.message });
@@ -5091,7 +5098,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
     return keys.map(toSelectableValue);
   }
   async _getValuesFor(filter) {
-    var _a, _b, _c;
+    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);
@@ -5107,7 +5114,8 @@ class AdHocFiltersVariable extends SceneObjectBase {
       key: filter.key,
       filters: otherFilters,
       timeRange,
-      queries
+      queries,
+      scopes: (_d = this._scopesBridge) == null ? void 0 : _d.getValue()
     }, getEnrichedFiltersRequest(this)));
     if (responseHasError(response)) {
       this.setState({ error: response.error.message });
@@ -5284,6 +5292,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(
@@ -5294,6 +5303,7 @@ class SceneQueryRunner extends SceneObjectBase {
           })
         );
       }
+      this.subscribeToScopesChanges(scopesBridge);
       this.subscribeToTimeRangeChanges(timeRange);
       if (this.shouldRunQueriesOnActivate()) {
         this.runQueries();
@@ -5439,6 +5449,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;
@@ -5448,15 +5473,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;
@@ -5476,8 +5503,8 @@ class SceneQueryRunner extends SceneObjectBase {
       data: __spreadProps$m(__spreadValues$y({}, 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;
     }
@@ -5490,17 +5517,22 @@ class SceneQueryRunner extends SceneObjectBase {
       this.setState({ data: __spreadProps$m(__spreadValues$y({}, (_b = this.state.data) != null ? _b : emptyPanelData), { state: schema.LoadingState.Loading }) });
       return;
     }
+    if (scopesBridge == null ? void 0 : scopesBridge.isLoading()) {
+      writeSceneLog("SceneQueryRunner", "Scopes are in loading state, skipping query execution");
+      this.setState({ data: __spreadProps$m(__spreadValues$y({}, (_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(datasource == null ? void 0 : datasource.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) {
@@ -5539,7 +5571,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;
     const { minInterval, queries } = this.state;
     let request = __spreadValues$y({
@@ -5559,7 +5591,8 @@ class SceneQueryRunner extends SceneObjectBase {
         to: timeRange.state.to
       },
       cacheTimeout: this.state.cacheTimeout,
-      queryCachingTTL: this.state.queryCachingTTL
+      queryCachingTTL: this.state.queryCachingTTL,
+      scopes: scopesBridge == null ? void 0 : scopesBridge.getValue()
     }, getEnrichedDataRequest(this));
     if (this._adhocFiltersVar) {
       request.filters = this._adhocFiltersVar.state.filters.filter(isFilterComplete);
@@ -6486,6 +6519,108 @@ function containsSearchFilter(query) {
   return str.indexOf(SEARCH_FILTER_VARIABLE) > -1;
 }
 
+class SceneScopesBridge extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["scopes"] });
+    this._renderBeforeActivation = true;
+    this._contextSubject = new rxjs.BehaviorSubject(void 0);
+    this._pendingScopes = null;
+  }
+  getUrlState() {
+    var _a, _b, _c;
+    return {
+      scopes: (_c = this._pendingScopes) != null ? _c : ((_b = (_a = this.context) == null ? void 0 : _a.state.value) != null ? _b : []).map((scope) => scope.metadata.name)
+    };
+  }
+  updateFromUrl(values) {
+    var _a, _b;
+    let scopes = (_a = values["scopes"]) != null ? _a : [];
+    scopes = (Array.isArray(scopes) ? scopes : [scopes]).map(String);
+    if (!this.context) {
+      this._pendingScopes = scopes;
+      return;
+    }
+    (_b = this.context) == null ? void 0 : _b.changeScopes(scopes);
+  }
+  getValue() {
+    var _a, _b;
+    return (_b = (_a = this.context) == null ? void 0 : _a.state.value) != null ? _b : [];
+  }
+  subscribeToValue(cb) {
+    return this.contextObservable.pipe(
+      rxjs.filter((context) => !!context && !context.state.loading),
+      rxjs.pairwise(),
+      rxjs.map(
+        ([prevContext, newContext]) => {
+          var _a, _b;
+          return [(_a = prevContext == null ? void 0 : prevContext.state.value) != null ? _a : [], (_b = newContext == null ? void 0 : newContext.state.value) != null ? _b : []];
+        }
+      ),
+      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;
+    (_a = this.context) == null ? void 0 : _a.setEnabled(enabled);
+  }
+  setReadOnly(readOnly) {
+    var _a;
+    (_a = this.context) == null ? void 0 : _a.setReadOnly(readOnly);
+  }
+  updateContext(newContext) {
+    var _a, _b;
+    if (this._pendingScopes && newContext) {
+      setTimeout(() => {
+        newContext == null ? void 0 : newContext.changeScopes(this._pendingScopes);
+        this._pendingScopes = null;
+      });
+    }
+    if (this.context !== newContext || ((_a = this.context) == null ? void 0 : _a.state) !== (newContext == null ? void 0 : newContext.state)) {
+      const shouldUpdate = ((_b = this.context) == null ? void 0 : _b.state.value) !== (newContext == null ? void 0 : newContext.state.value);
+      this._contextSubject.next(newContext);
+      if (shouldUpdate) {
+        this.forceRender();
+      }
+    }
+  }
+  get context() {
+    return this._contextSubject.getValue();
+  }
+  get contextObservable() {
+    return this._contextSubject.asObservable();
+  }
+}
+SceneScopesBridge.Component = SceneScopesBridgeRenderer;
+function SceneScopesBridgeRenderer({ model }) {
+  const context = runtime.useScopes();
+  React.useEffect(() => {
+    model.updateContext(context);
+  }, [context, model]);
+  return null;
+}
+
 function getVariables(sceneObject) {
   var _a;
   return (_a = getClosest(sceneObject, (s) => s.state.$variables)) != null ? _a : EmptyVariableSet;
@@ -6653,6 +6788,10 @@ function getUrlSyncManager(sceneObject) {
   }
   return void 0;
 }
+function getScopesBridge(sceneObject) {
+  var _a;
+  return (_a = findObject(sceneObject, (s) => s instanceof SceneScopesBridge)) != null ? _a : void 0;
+}
 
 const sceneGraph = {
   getVariables,
@@ -6670,7 +6809,8 @@ const sceneGraph = {
   getAncestor,
   findDescendents,
   getQueryController,
-  getUrlSyncManager
+  getUrlSyncManager,
+  getScopesBridge
 };
 
 class UniqueUrlKeyMapper {
@@ -12355,6 +12495,10 @@ class SplitLayout extends SceneObjectBase {
 SplitLayout.Component = SplitLayoutRenderer;
 
 class SceneApp extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
+    this._renderBeforeActivation = true;
+  }
   enrichDataRequest() {
     return {
       app: this.state.name || "app"
@@ -12362,15 +12506,17 @@ class SceneApp extends SceneObjectBase {
   }
 }
 SceneApp.Component = ({ model }) => {
-  const { pages } = model.useState();
-  return /* @__PURE__ */ React__default["default"].createElement(SceneAppContext.Provider, {
+  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.Switch, null, pages.map((page) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
     key: page.state.url,
     exact: false,
     path: page.state.url,
     render: (props) => renderSceneComponentWithRouteProps(page, props)
-  }))));
+  })))));
 };
 const SceneAppContext = React.createContext(null);
 const sceneAppCache = /* @__PURE__ */ new Map();
@@ -12720,6 +12866,21 @@ class SceneAppPage extends SceneObjectBase {
     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 });
@@ -13729,6 +13890,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;