Scenes: Updates to scene v2.0 (#80953)

* Scenes: Updates to scene v2.0

* Update

package.json

@@ -245,7 +245,7 @@
     "@grafana/monaco-logql": "^0.0.7",
     "@grafana/o11y-ds-frontend": "workspace:*",
     "@grafana/runtime": "workspace:*",
-    "@grafana/scenes": "1.30.0",
+    "@grafana/scenes": "^2.0.0",
     "@grafana/schema": "workspace:*",
     "@grafana/ui": "workspace:*",
     "@kusto/monaco-kusto": "^7.4.0",

public/app/features/dashboard-scene/scene/DashboardScene.tsx

@@ -396,8 +396,8 @@ export class DashboardVariableDependency implements SceneVariableDependencyConfi
     return false;
   }
 
-  public variableUpdatesCompleted(changedVars: Set<SceneVariable>) {
-    if (changedVars.size > 0) {
+  public variableUpdateCompleted(variable: SceneVariable, hasChanged: boolean) {
+    if (hasChanged) {
       // Temp solution for some core panels (like dashlist) to know that variables have changed
       appEvents.publish(new VariablesChanged({ refreshAll: true, panelIds: [] }));
     }

public/app/features/dashboard-scene/scene/PanelRepeaterGridItem.tsx

@@ -6,7 +6,6 @@ import {
   VizPanel,
   SceneObjectBase,
   VariableDependencyConfig,
-  SceneVariable,
   SceneGridLayout,
   SceneVariableSet,
   SceneComponentProps,
@@ -36,11 +35,9 @@ export type RepeatDirection = 'v' | 'h';
 export class PanelRepeaterGridItem extends SceneObjectBase<PanelRepeaterGridItemState> implements SceneGridItemLike {
   protected _variableDependency = new VariableDependencyConfig(this, {
     variableNames: [this.state.variableName],
-    onVariableUpdatesCompleted: this._onVariableChanged.bind(this),
+    onVariableUpdateCompleted: this._onVariableUpdateCompleted.bind(this),
   });
 
-  private _isWaitingForVariables = false;
-
   public constructor(state: PanelRepeaterGridItemState) {
     super(state);
 
@@ -49,26 +46,11 @@ export class PanelRepeaterGridItem extends SceneObjectBase<PanelRepeaterGridItem
 
   private _activationHandler() {
     this._subs.add(this.subscribeToState((newState, prevState) => this._handleGridResize(newState, prevState)));
-
-    // If we our variable is ready we can process repeats on activation
-    if (sceneGraph.hasVariableDependencyInLoadingState(this)) {
-      this._isWaitingForVariables = true;
-    } else {
-      this._performRepeat();
-    }
+    this._performRepeat();
   }
 
-  private _onVariableChanged(changedVariables: Set<SceneVariable>, dependencyChanged: boolean): void {
-    if (dependencyChanged) {
-      this._performRepeat();
-      return;
-    }
-
-    // If we are waiting for variables and the variable is no longer loading then we are ready to repeat as well
-    if (this._isWaitingForVariables && !sceneGraph.hasVariableDependencyInLoadingState(this)) {
-      this._isWaitingForVariables = false;
-      this._performRepeat();
-    }
+  private _onVariableUpdateCompleted(): void {
+    this._performRepeat();
   }
 
   /**
@@ -97,6 +79,10 @@ export class PanelRepeaterGridItem extends SceneObjectBase<PanelRepeaterGridItem
   }
 
   private _performRepeat() {
+    if (this._variableDependency.hasDependencyInLoadingState()) {
+      return;
+    }
+
     const variable = sceneGraph.lookupVariable(this.state.variableName, this);
     if (!variable) {
       console.error('SceneGridItemRepeater: Variable not found');

public/app/features/dashboard-scene/scene/RowRepeaterBehavior.ts

@@ -7,7 +7,6 @@ import {
   SceneGridRow,
   SceneObjectBase,
   SceneObjectState,
-  SceneVariable,
   SceneVariableSet,
   VariableDependencyConfig,
   VariableValueSingle,
@@ -29,11 +28,9 @@ interface RowRepeaterBehaviorState extends SceneObjectState {
 export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorState> {
   protected _variableDependency = new VariableDependencyConfig(this, {
     variableNames: [this.state.variableName],
-    onVariableUpdatesCompleted: this._onVariableChanged.bind(this),
+    onVariableUpdateCompleted: this._onVariableUpdateCompleted.bind(this),
   });
 
-  private _isWaitingForVariables = false;
-
   public constructor(state: RowRepeaterBehaviorState) {
     super(state);
 
@@ -41,28 +38,18 @@ export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorStat
   }
 
   private _activationHandler() {
-    // If we our variable is ready we can process repeats on activation
-    if (sceneGraph.hasVariableDependencyInLoadingState(this)) {
-      this._isWaitingForVariables = true;
-    } else {
-      this._performRepeat();
-    }
+    this._performRepeat();
   }
 
-  private _onVariableChanged(changedVariables: Set<SceneVariable>, dependencyChanged: boolean): void {
-    if (dependencyChanged) {
-      this._performRepeat();
-      return;
-    }
-
-    // If we are waiting for variables and the variable is no longer loading then we are ready to repeat as well
-    if (this._isWaitingForVariables && !sceneGraph.hasVariableDependencyInLoadingState(this)) {
-      this._isWaitingForVariables = false;
-      this._performRepeat();
-    }
+  private _onVariableUpdateCompleted(): void {
+    this._performRepeat();
   }
 
   private _performRepeat() {
+    if (this._variableDependency.hasDependencyInLoadingState()) {
+      return;
+    }
+
     const variable = sceneGraph.lookupVariable(this.state.variableName, this.parent?.parent!);
 
     if (!variable) {

public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.test.ts

@@ -21,7 +21,6 @@ import {
   SceneGridItemLike,
   SceneGridLayout,
   SceneGridRow,
-  SceneVariable,
   VizPanel,
 } from '@grafana/scenes';
 import { Dashboard, LoadingState, Panel, RowPanel, VariableRefresh } from '@grafana/schema';
@@ -226,7 +225,7 @@ describe('transformSceneToSaveModel', () => {
       const rowRepeater = rowWithRepeat.state.$behaviors![0] as RowRepeaterBehavior;
 
       // trigger row repeater
-      rowRepeater.variableDependency?.variableUpdatesCompleted(new Set<SceneVariable>([variable]));
+      rowRepeater.variableDependency?.variableUpdateCompleted(variable, true);
 
       // Make sure the repeated rows have been added to runtime scene model
       expect(grid.state.children.length).toBe(5);

public/app/features/trails/MetricSelectScene.tsx

@@ -13,7 +13,6 @@ import {
   QueryVariable,
   sceneGraph,
   VariableDependencyConfig,
-  SceneVariable,
   SceneCSSGridLayout,
   SceneCSSGridItem,
   SceneObjectRef,
@@ -50,6 +49,7 @@ const ROW_CARD_HEIGHT = '64px';
 
 export class MetricSelectScene extends SceneObjectBase<MetricSelectSceneState> {
   private previewCache: Record<string, MetricPanel> = {};
+  private ignoreNextUpdate = false;
 
   constructor(state: Partial<MetricSelectSceneState>) {
     super({
@@ -71,17 +71,14 @@ export class MetricSelectScene extends SceneObjectBase<MetricSelectSceneState> {
 
   protected _variableDependency = new VariableDependencyConfig(this, {
     variableNames: [VAR_METRIC_NAMES],
-    onVariableUpdatesCompleted: this._onVariableChanged.bind(this),
+    onVariableUpdateCompleted: this.onVariableUpdateCompleted.bind(this),
   });
 
-  private _onVariableChanged(changedVariables: Set<SceneVariable>, dependencyChanged: boolean): void {
-    if (dependencyChanged) {
-      this.updateMetrics();
-      this.buildLayout();
-    }
+  private onVariableUpdateCompleted(): void {
+    this.updateMetrics();
+    this.buildLayout();
   }
 
-  private ignoreNextUpdate = false;
   private _onActivate() {
     if (this.state.body.state.children.length === 0) {
       this.buildLayout();

yarn.lock

@@ -3551,9 +3551,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes@npm:1.30.0":
-  version: 1.30.0
-  resolution: "@grafana/scenes@npm:1.30.0"
+"@grafana/scenes@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@grafana/scenes@npm:2.0.0"
   dependencies:
     "@grafana/e2e-selectors": "npm:10.0.2"
     react-grid-layout: "npm:1.3.4"
@@ -3565,7 +3565,7 @@ __metadata:
     "@grafana/runtime": 10.0.3
     "@grafana/schema": 10.0.3
     "@grafana/ui": 10.0.3
-  checksum: f8871d337ab87f52bce88efa3233b318a3ed043c7b16638acebc506e5e765636dfd908850fbe14d042e2d4d378df8345880fae469f8e43159a83f8f9fcbd63db
+  checksum: 47ae832a05a72ec0ae539bfdde967f5c69a8c5b7410216539b7a6f82b2ec6f86fcdc6509d15b8cfd399a16db3d3bd079a3e39b08846424693301cf27b867c2d3
   languageName: node
   linkType: hard
 
@@ -16969,7 +16969,7 @@ __metadata:
     "@grafana/monaco-logql": "npm:^0.0.7"
     "@grafana/o11y-ds-frontend": "workspace:*"
     "@grafana/runtime": "workspace:*"
-    "@grafana/scenes": "npm:1.30.0"
+    "@grafana/scenes": "npm:^2.0.0"
     "@grafana/schema": "workspace:*"
     "@grafana/tsconfig": "npm:^1.3.0-rc1"
     "@grafana/ui": "workspace:*"