@grafana/scenes 6.11.1 → 6.12.0--canary.1121.15045230319.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 = [
@@ -3098,7 +3099,7 @@ class GroupByVariable extends MultiValueVariable {
      * 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;
@@ -3116,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)) {
@@ -5350,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);
             }
@@ -5390,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")
@@ -5592,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);
@@ -5611,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)) {
@@ -5631,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);
@@ -5644,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 {
@@ -5802,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);
@@ -5823,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(
@@ -5834,7 +5835,6 @@ class SceneQueryRunner extends SceneObjectBase {
           })
         );
       }
-      this.subscribeToScopesChanges(scopesBridge);
       this.subscribeToTimeRangeChanges(timeRange);
       if (this.shouldRunQueriesOnActivate()) {
         this.runQueries();
@@ -5998,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;
@@ -6022,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;
@@ -6052,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;
     }
@@ -6066,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) {
@@ -6122,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 = {
@@ -6143,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)
     };
@@ -6566,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 === "*") {
@@ -7094,87 +7075,73 @@ 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 : [];
   }
   /**
-   * 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(fieldPath) {
     var _a;
-    (_a = this.context) == null ? void 0 : _a.setEnabled(enabled);
+    const scopes = (_a = this.state.scopes) != null ? _a : [];
+    const scopeNames = scopes.map((scope) => scope.metadata.name);
+    return scopeNames.join(", ");
   }
-  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();
+  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 contextObservable() {
-    return this._contextSubject.asObservable();
+  /**
+   * 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 });
   }
 }
-SceneScopesBridge.Component = SceneScopesBridgeRenderer;
-function SceneScopesBridgeRenderer({ model }) {
-  const context = runtime.useScopes();
+function ScopesVariableRenderer({ model }) {
+  const context = React.useContext(runtime.ScopesContext);
   React.useEffect(() => {
-    model.updateContext(context);
+    return model.setContext(context);
   }, [context, model]);
   return null;
 }
@@ -7322,9 +7289,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 = {
@@ -7343,7 +7313,7 @@ const sceneGraph = {
   getAncestor,
   getQueryController,
   findDescendents,
-  getScopesBridge
+  getScopes
 };
 
 class UniqueUrlKeyMapper {
@@ -8381,8 +8351,8 @@ class VizPanel extends SceneObjectBase {
     this._prevData = rawData;
     return this._dataWithFieldConfig;
   }
-  clone(withState) {
-    return super.clone({ _pluginInstanceState: void 0, _pluginLoadError: void 0, ...withState });
+  clone() {
+    return super.clone({ _pluginInstanceState: void 0, _pluginLoadError: void 0 });
   }
   buildPanelContext() {
     const sync = getCursorSyncScope(this);
@@ -9437,6 +9407,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.hiddenRender) {
+      return variable.hiddenRender();
+    }
     return null;
   }
   if (layout === "vertical") {
@@ -9500,8 +9473,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  */
@@ -9628,7 +9599,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;
@@ -9684,7 +9656,6 @@ class SceneVariableSet extends SceneObjectBase {
     this._updateNextBatch();
   }
   _handleVariableValueChanged(variableThatChanged) {
-    this._variablesThatHaveChanged.add(variableThatChanged);
     this._addDependentVariablesToUpdateQueue(variableThatChanged);
     if (!this._updating.has(variableThatChanged)) {
       this._updateNextBatch();
@@ -9711,7 +9682,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);
         }
       }
     }
@@ -9723,8 +9697,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
@@ -9756,6 +9729,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;
     }
@@ -12644,8 +12620,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();
@@ -12921,25 +12897,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 });
@@ -14047,7 +14008,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;
@@ -14057,6 +14017,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;