Merge pull request #48 from grafana/scene-variable-set-detect-changes

SceneVariableSet: Detect state changes and init new variables

Author: torkelo

packages/scenes/src/variables/sets/SceneVariableSet.test.tsx

@@ -384,6 +384,41 @@ describe('SceneVariableList', () => {
       expect(nestedSceneObject.state.variableValueChanged).toBe(1);
     });
   });
+
+  describe('When variables array changes', () => {
+    it('Should start update process', async () => {
+      const A = new TestVariable({ name: 'A', query: 'A.*', value: '', text: '', options: [] });
+      const B = new TestVariable({ name: 'B', query: 'A.*', value: '', text: '', options: [] });
+      const nestedObj = new TestSceneObect({ title: '$B', variableValueChanged: 0 });
+      const set = new SceneVariableSet({ variables: [A] });
+
+      const scene = new TestScene({
+        $variables: set,
+        nested: nestedObj,
+      });
+
+      scene.activate();
+      nestedObj.activate();
+
+      A.signalUpdateCompleted();
+
+      // No  variable value changed for B yet as it is not part of scene yet
+      expect(nestedObj.state.variableValueChanged).toBe(0);
+
+      // Update state with a new variable
+      set.setState({ variables: [A, B] });
+
+      // Should not start loading A again, it has options already
+      expect(A.state.loading).toBe(false);
+      // Should start B
+      expect(B.state.loading).toBe(true);
+
+      B.signalUpdateCompleted();
+
+      // Depenedent scene object notified of change
+      expect(nestedObj.state.variableValueChanged).toBe(1);
+    });
+  });
 });
 
 interface TestSceneObjectState extends SceneLayoutChildState {

packages/scenes/src/variables/sets/SceneVariableSet.ts

@@ -39,6 +39,9 @@ export class SceneVariableSet extends SceneObjectBase<SceneVariableSetState> imp
       this.subscribeToEvent(SceneVariableValueChangedEvent, (event) => this.handleVariableValueChanged(event.payload))
     );
 
+    // Subscribe to state changes
+    this._subs.add(this.subscribeToState(this.handleStateChanged));
+
     this.checkForVariablesThatChangedWhileInactive();
 
     // Add all variables that need updating to queue
@@ -74,6 +77,39 @@ export class SceneVariableSet extends SceneObjectBase<SceneVariableSetState> imp
     this._updating.clear();
   };
 
+  /**
+   * Look for new variables that need to be initialized
+   */
+  private handleStateChanged = (newState: SceneVariableSetState, oldState: SceneVariableSetState) => {
+    const variablesToUpdateCountStart = this._variablesToUpdate.size;
+
+    // Check for removed variables
+    for (const variable of oldState.variables) {
+      if (!newState.variables.includes(variable)) {
+        const updating = this._updating.get(variable);
+        if (updating?.subscription) {
+          updating.subscription.unsubscribe();
+        }
+        this._updating.delete(variable);
+        this._variablesToUpdate.delete(variable);
+      }
+    }
+
+    // Check for new variables
+    for (const variable of newState.variables) {
+      if (!oldState.variables.includes(variable)) {
+        if (this.variableNeedsUpdate(variable)) {
+          this._variablesToUpdate.add(variable);
+        }
+      }
+    }
+
+    // Only start a new batch if there was no batch already running
+    if (variablesToUpdateCountStart === 0 && this._variablesToUpdate.size > 0) {
+      this.updateNextBatch();
+    }
+  };
+
   /**
    * If variables changed while in in-active state we don't get any change events, so we need to check for that here.
    */