[v11.0.x] DashboardScene: Fixing major row repeat issues (#87800)

DashboardScene: Fixing major row repeat issues (#87539)

* DashboardScene: Fixing major row repeat issues

* Fixing edit scope

* Use dashboard variableDependendency to notify row repeat behaviors

* update scenes lib

* Do not repeat if values are the same

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

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Updated scenes

* Update

* Update

* Do not render row actions for repeated rows

* Fixed e2e

---------

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
(cherry picked from commit 9cd7c87b48)

e2e/various-suite/solo-route.spec.ts

@@ -35,7 +35,7 @@ describe('Solo Route', () => {
   it('Can view solo in repeaterd row and panel in scenes', () => {
     // open Panel Tests - Graph NG
     e2e.pages.SoloPanel.visit(
-      'Repeating-rows-uid/repeating-rows?orgId=1&var-server=A&var-server=B&var-server=D&var-pod=1&var-pod=2&var-pod=3&panelId=panel-2-row-2-clone-2&__feature.dashboardSceneSolo=true'
+      'Repeating-rows-uid/repeating-rows?orgId=1&var-server=A&var-server=B&var-server=D&var-pod=1&var-pod=2&var-pod=3&panelId=panel-2-clone-D-clone-2&__feature.dashboardSceneSolo=true'
     );
 
     e2e.components.Panels.Panel.title('server = D, pod = Sod').should('exist');

package.json

@@ -254,7 +254,7 @@
     "@grafana/prometheus": "workspace:*",
     "@grafana/runtime": "workspace:*",
     "@grafana/saga-icons": "workspace:*",
-    "@grafana/scenes": "^4.14.0",
+    "@grafana/scenes": "^4.21.0",
     "@grafana/schema": "workspace:*",
     "@grafana/sql": "workspace:*",
     "@grafana/ui": "workspace:*",

public/app/features/dashboard-scene/panel-edit/PanelEditor.tsx

@@ -113,16 +113,17 @@ export class PanelEditor extends SceneObjectBase<PanelEditorState> {
       return;
     }
 
-    if (gridItem instanceof DashboardGridItem) {
-      this.handleRepeatOptionChanges(gridItem);
-    } else {
+    if (!(gridItem instanceof DashboardGridItem)) {
       console.error('Unsupported scene object type');
+      return;
     }
+
+    this.commitChangesToSource(gridItem);
   }
 
-  private handleRepeatOptionChanges(panelRepeater: DashboardGridItem) {
-    let width = panelRepeater.state.width ?? 1;
-    let height = panelRepeater.state.height;
+  private commitChangesToSource(gridItem: DashboardGridItem) {
+    let width = gridItem.state.width ?? 1;
+    let height = gridItem.state.height;
 
     const panelManager = this.state.vizManager;
     const horizontalToVertical =
@@ -130,12 +131,12 @@ export class PanelEditor extends SceneObjectBase<PanelEditorState> {
     const verticalToHorizontal =
       this._initialRepeatOptions.repeatDirection === 'v' && panelManager.state.repeatDirection === 'h';
     if (horizontalToVertical) {
-      width = Math.floor(width / (panelRepeater.state.maxPerRow ?? 1));
+      width = Math.floor(width / (gridItem.state.maxPerRow ?? 1));
     } else if (verticalToHorizontal) {
       width = 24;
     }
 
-    panelRepeater.setState({
+    gridItem.setState({
       body: panelManager.state.panel.clone(),
       repeatDirection: panelManager.state.repeatDirection,
       variableName: panelManager.state.repeat,

public/app/features/dashboard-scene/panel-edit/VizPanelManager.test.tsx

@@ -4,7 +4,14 @@ import { DataQueryRequest, DataSourceApi, DataSourceInstanceSettings, LoadingSta
 import { calculateFieldTransformer } from '@grafana/data/src/transformations/transformers/calculateField';
 import { mockTransformationsRegistry } from '@grafana/data/src/utils/tests/mockTransformationsRegistry';
 import { config, locationService } from '@grafana/runtime';
-import { SceneQueryRunner, VizPanel } from '@grafana/scenes';
+import {
+  LocalValueVariable,
+  SceneGridRow,
+  SceneQueryRunner,
+  SceneVariableSet,
+  VizPanel,
+  sceneGraph,
+} from '@grafana/scenes';
 import { DataQuery, DataSourceJsonData, DataSourceRef } from '@grafana/schema';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { InspectTab } from 'app/features/inspector/types';
@@ -813,6 +820,25 @@ describe('VizPanelManager', () => {
     expect(vizPanelManager.state.datasource).toEqual(ds1Mock);
     expect(vizPanelManager.state.dsSettings).toEqual(instance1SettingsMock);
   });
+
+  describe('Given a panel inside repeated row', () => {
+    it('Should include row variable scope', () => {
+      const { panel } = setupTest('panel-9');
+
+      const row = panel.parent?.parent;
+      if (!(row instanceof SceneGridRow)) {
+        throw new Error('Did not find parent row');
+      }
+
+      row.setState({
+        $variables: new SceneVariableSet({ variables: [new LocalValueVariable({ name: 'hello', value: 'A' })] }),
+      });
+
+      const editor = buildPanelEditScene(panel);
+      const variable = sceneGraph.lookupVariable('hello', editor.state.vizManager);
+      expect(variable?.getValue()).toBe('A');
+    });
+  });
 });
 
 const setupTest = (panelId: string) => {

public/app/features/dashboard-scene/panel-edit/VizPanelManager.tsx

@@ -23,6 +23,7 @@ import {
   SceneObjectState,
   SceneObjectStateChangedEvent,
   SceneQueryRunner,
+  SceneVariables,
   VizPanel,
   sceneUtils,
 } from '@grafana/scenes';
@@ -91,7 +92,14 @@ export class VizPanelManager extends SceneObjectBase<VizPanelManagerState> {
     const { variableName: repeat, repeatDirection, maxPerRow } = gridItem.state;
     repeatOptions = { repeat, repeatDirection, maxPerRow };
 
+    let variables: SceneVariables | undefined;
+
+    if (gridItem.parent?.state.$variables) {
+      variables = gridItem.parent.state.$variables.clone();
+    }
+
     return new VizPanelManager({
+      $variables: variables,
       panel: sourcePanel.clone(),
       sourcePanel: sourcePanel.getRef(),
       ...repeatOptions,

public/app/features/dashboard-scene/panel-edit/testfiles/testDashboard.ts

@@ -591,6 +591,18 @@ export const panelWithQueriesAndMixedDatasource = {
   type: 'timeseries',
 };
 
+const row = {
+  id: 8,
+  type: 'row',
+  gridPos: { h: 1, w: 24, x: 0, y: 20 },
+};
+
+const rowChild = {
+  id: 9,
+  type: 'timeseries',
+  gridPos: { h: 2, w: 24, x: 0, y: 21 },
+};
+
 export const testDashboard = {
   annotations: {
     list: [
@@ -622,6 +634,8 @@ export const testDashboard = {
     panelWithNoDataSource,
     panelWithDataSourceNotFound,
     panelWithQueriesAndMixedDatasource,
+    row,
+    rowChild,
   ],
   refresh: '',
   schemaVersion: 39,

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

@@ -64,6 +64,7 @@ import { DashboardGridItem } from './DashboardGridItem';
 import { DashboardSceneRenderer } from './DashboardSceneRenderer';
 import { DashboardSceneUrlSync } from './DashboardSceneUrlSync';
 import { LibraryVizPanel } from './LibraryVizPanel';
+import { RowRepeaterBehavior } from './RowRepeaterBehavior';
 import { ScopesScene } from './ScopesScene';
 import { ViewPanelScene } from './ViewPanelScene';
 import { setupKeyboardShortcuts } from './keyboardShortcuts';
@@ -127,7 +128,7 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
   /**
    * Get notified when variables change
    */
-  protected _variableDependency = new DashboardVariableDependency();
+  protected _variableDependency = new DashboardVariableDependency(this);
 
   /**
    * State before editing started
@@ -846,6 +847,8 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
 export class DashboardVariableDependency implements SceneVariableDependencyConfigLike {
   private _emptySet = new Set<string>();
 
+  public constructor(private _dashboard: DashboardScene) {}
+
   getNames(): Set<string> {
     return this._emptySet;
   }
@@ -859,5 +862,28 @@ export class DashboardVariableDependency implements SceneVariableDependencyConfi
       // Temp solution for some core panels (like dashlist) to know that variables have changed
       appEvents.publish(new VariablesChanged({ refreshAll: true, panelIds: [] }));
     }
+
+    /**
+     * Propagate variable changes to repeat row behavior as it does not get it when it's nested under local value
+     * The first repeated row has the row repeater behavior but it also has a local SceneVariableSet with a local variable value
+     */
+    const layout = this._dashboard.state.body;
+    if (!(layout instanceof SceneGridLayout)) {
+      return;
+    }
+
+    for (const child of layout.state.children) {
+      if (!(child instanceof SceneGridRow) || !child.state.$behaviors) {
+        continue;
+      }
+
+      for (const behavior of child.state.$behaviors) {
+        if (behavior instanceof RowRepeaterBehavior) {
+          if (behavior.isWaitingForVariables || (behavior.state.variableName === variable.state.name && hasChanged)) {
+            behavior.performRepeat();
+          }
+        }
+      }
+    }
   }
 }

public/app/features/dashboard-scene/scene/RowRepeaterBehavior.test.tsx

@@ -1,5 +1,4 @@
 import {
-  EmbeddedScene,
   SceneCanvasText,
   SceneGridLayout,
   SceneGridRow,
@@ -13,14 +12,21 @@ import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from 'app/features/variables/co
 import { activateFullSceneTree } from '../utils/test-utils';
 
 import { RepeatDirection } from './DashboardGridItem';
+import { DashboardScene } from './DashboardScene';
 import { RowRepeaterBehavior } from './RowRepeaterBehavior';
+import { RowActions } from './row-actions/RowActions';
 
 describe('RowRepeaterBehavior', () => {
   describe('Given scene with variable with 5 values', () => {
-    let scene: EmbeddedScene, grid: SceneGridLayout;
+    let scene: DashboardScene, grid: SceneGridLayout, repeatBehavior: RowRepeaterBehavior;
+    let gridStateUpdates: unknown[];
 
     beforeEach(async () => {
-      ({ scene, grid } = buildScene({ variableQueryTime: 0 }));
+      ({ scene, grid, repeatBehavior } = buildScene({ variableQueryTime: 0 }));
+
+      gridStateUpdates = [];
+      grid.subscribeToState((state) => gridStateUpdates.push(state));
+
       activateFullSceneTree(scene);
       await new Promise((r) => setTimeout(r, 1));
     });
@@ -28,17 +34,20 @@ describe('RowRepeaterBehavior', () => {
     it('Should repeat row', () => {
       // Verify that panel above row remains
       expect(grid.state.children[0]).toBeInstanceOf(SceneGridItem);
+
       // Verify that first row still has repeat behavior
       const row1 = grid.state.children[1] as SceneGridRow;
       expect(row1.state.$behaviors?.[0]).toBeInstanceOf(RowRepeaterBehavior);
-      expect(row1.state.$variables!.state.variables[0].getValue()).toBe('1');
+      expect(row1.state.$variables!.state.variables[0].getValue()).toBe('A1');
+      expect(row1.state.actions).toBeDefined();
 
       const row2 = grid.state.children[2] as SceneGridRow;
       expect(row2.state.$variables!.state.variables[0].getValueText?.()).toBe('B');
+      expect(row2.state.actions).toBeUndefined();
 
       // Should give repeated panels unique keys
       const gridItem = row2.state.children[0] as SceneGridItem;
-      expect(gridItem.state.body?.state.key).toBe('canvas-1-row-1');
+      expect(gridItem.state.body?.state.key).toBe('canvas-1-clone-B1');
     });
 
     it('Should push row at the bottom down', () => {
@@ -66,24 +75,34 @@ describe('RowRepeaterBehavior', () => {
     it('Should handle second repeat cycle and update remove old repeats', async () => {
       // trigger another repeat cycle by changing the variable
       const variable = scene.state.$variables!.state.variables[0] as TestVariable;
-      variable.changeValueTo(['2', '3']);
+      variable.changeValueTo(['B1', 'C1']);
 
       await new Promise((r) => setTimeout(r, 1));
 
       // should now only have 2 repeated rows (and the panel above + the row at the bottom)
       expect(grid.state.children.length).toBe(4);
     });
+
+    it('Should ignore repeat process if variable values are the same', async () => {
+      // trigger another repeat cycle by changing the variable
+      repeatBehavior.performRepeat();
+
+      await new Promise((r) => setTimeout(r, 1));
+
+      expect(gridStateUpdates.length).toBe(1);
+    });
   });
 
   describe('Given scene empty row', () => {
-    let scene: EmbeddedScene;
+    let scene: DashboardScene;
     let grid: SceneGridLayout;
-    let repeatBehavior: RowRepeaterBehavior;
+    let rowToRepeat: SceneGridRow;
 
     beforeEach(async () => {
-      ({ scene, grid, repeatBehavior } = buildScene({ variableQueryTime: 0 }));
+      ({ scene, grid, rowToRepeat } = buildScene({ variableQueryTime: 0 }));
+
+      rowToRepeat.setState({ children: [] });
 
-      repeatBehavior.setState({ sources: [] });
       activateFullSceneTree(scene);
       await new Promise((r) => setTimeout(r, 1));
     });
@@ -108,21 +127,7 @@ interface SceneOptions {
 }
 
 function buildScene(options: SceneOptions) {
-  const repeatBehavior = new RowRepeaterBehavior({
-    variableName: 'server',
-    sources: [
-      new SceneGridItem({
-        x: 0,
-        y: 11,
-        width: 24,
-        height: 5,
-        body: new SceneCanvasText({
-          key: 'canvas-1',
-          text: 'Panel inside repeated row, server = $server',
-        }),
-      }),
-    ],
-  });
+  const repeatBehavior = new RowRepeaterBehavior({ variableName: 'server' });
 
   const grid = new SceneGridLayout({
     children: [
@@ -140,7 +145,20 @@ function buildScene(options: SceneOptions) {
         y: 10,
         width: 24,
         height: 1,
+        actions: new RowActions({}),
         $behaviors: [repeatBehavior],
+        children: [
+          new SceneGridItem({
+            x: 0,
+            y: 11,
+            width: 24,
+            height: 5,
+            body: new SceneCanvasText({
+              key: 'canvas-1',
+              text: 'Panel inside repeated row, server = $server',
+            }),
+          }),
+        ],
       }),
       new SceneGridRow({
         x: 0,
@@ -148,6 +166,7 @@ function buildScene(options: SceneOptions) {
         width: 24,
         height: 5,
         title: 'Row at the bottom',
+
         children: [
           new SceneGridItem({
             key: 'griditem-2',
@@ -172,7 +191,7 @@ function buildScene(options: SceneOptions) {
     ],
   });
 
-  const scene = new EmbeddedScene({
+  const scene = new DashboardScene({
     $timeRange: new SceneTimeRange({ from: 'now-6h', to: 'now' }),
     $variables: new SceneVariableSet({
       variables: [
@@ -185,11 +204,11 @@ function buildScene(options: SceneOptions) {
           includeAll: true,
           delayMs: options.variableQueryTime,
           optionsToReturn: [
-            { label: 'A', value: '1' },
-            { label: 'B', value: '2' },
-            { label: 'C', value: '3' },
-            { label: 'D', value: '4' },
-            { label: 'E', value: '5' },
+            { label: 'A', value: 'A1' },
+            { label: 'B', value: 'B1' },
+            { label: 'C', value: 'C1' },
+            { label: 'D', value: 'D1' },
+            { label: 'E', value: 'E1' },
           ],
         }),
       ],
@@ -197,5 +216,7 @@ function buildScene(options: SceneOptions) {
     body: grid,
   });
 
-  return { scene, grid, repeatBehavior };
+  const rowToRepeat = repeatBehavior.parent as SceneGridRow;
+
+  return { scene, grid, repeatBehavior, rowToRepeat };
 }

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

@@ -1,3 +1,5 @@
+import { isEqual } from 'lodash';
+
 import {
   LocalValueVariable,
   MultiValueVariable,
@@ -18,7 +20,6 @@ import { DashboardRepeatsProcessedEvent } from './types';
 
 interface RowRepeaterBehaviorState extends SceneObjectState {
   variableName: string;
-  sources: SceneGridItemLike[];
 }
 
 /**
@@ -28,9 +29,12 @@ interface RowRepeaterBehaviorState extends SceneObjectState {
 export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorState> {
   protected _variableDependency = new VariableDependencyConfig(this, {
     variableNames: [this.state.variableName],
-    onVariableUpdateCompleted: this._onVariableUpdateCompleted.bind(this),
+    onVariableUpdateCompleted: () => {},
   });
 
+  public isWaitingForVariables = false;
+  private _prevRepeatValues?: VariableValueSingle[];
+
   public constructor(state: RowRepeaterBehaviorState) {
     super(state);
 
@@ -38,15 +42,31 @@ export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorStat
   }
 
   private _activationHandler() {
-    this._performRepeat();
+    this.performRepeat();
   }
 
-  private _onVariableUpdateCompleted(): void {
-    this._performRepeat();
+  private _getRow(): SceneGridRow {
+    if (!(this.parent instanceof SceneGridRow)) {
+      throw new Error('RepeatedRowBehavior: Parent is not a SceneGridRow');
+    }
+
+    return this.parent;
   }
 
-  private _performRepeat() {
-    if (this._variableDependency.hasDependencyInLoadingState()) {
+  private _getLayout(): SceneGridLayout {
+    const layout = sceneGraph.getLayout(this);
+
+    if (!(layout instanceof SceneGridLayout)) {
+      throw new Error('RepeatedRowBehavior: Layout is not a SceneGridLayout');
+    }
+
+    return layout;
+  }
+
+  public performRepeat() {
+    this.isWaitingForVariables = this._variableDependency.hasDependencyInLoadingState();
+
+    if (this.isWaitingForVariables) {
       return;
     }
 
@@ -62,40 +82,39 @@ export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorStat
       return;
     }
 
-    if (!(this.parent instanceof SceneGridRow)) {
-      console.error('RepeatedRowBehavior: Parent is not a SceneGridRow');
-      return;
-    }
-
-    const layout = sceneGraph.getLayout(this);
-
-    if (!(layout instanceof SceneGridLayout)) {
-      console.error('RepeatedRowBehavior: Layout is not a SceneGridLayout');
-      return;
-    }
-
-    const rowToRepeat = this.parent;
+    const rowToRepeat = this._getRow();
+    const layout = this._getLayout();
     const { values, texts } = getMultiVariableValues(variable);
+
+    // Do nothing if values are the same
+    if (isEqual(this._prevRepeatValues, values)) {
+      return;
+    }
+
+    this._prevRepeatValues = values;
+
     const rows: SceneGridRow[] = [];
-    const rowContentHeight = getRowContentHeight(this.state.sources);
+    const rowContent = rowToRepeat.state.children;
+    const rowContentHeight = getRowContentHeight(rowContent);
+
     let maxYOfRows = 0;
 
     // Loop through variable values and create repeates
     for (let index = 0; index < values.length; index++) {
       const children: SceneGridItemLike[] = [];
+      const localValue = values[index];
 
       // Loop through panels inside row
-      for (const source of this.state.sources) {
+      for (const source of rowContent) {
         const sourceItemY = source.state.y ?? 0;
         const itemY = sourceItemY + (rowContentHeight + 1) * index;
-
-        const itemClone = source.clone({
-          key: `${source.state.key}-clone-${index}`,
-          y: itemY,
-        });
+        const itemKey = index > 0 ? `${source.state.key}-clone-${localValue}` : source.state.key;
+        const itemClone = source.clone({ key: itemKey, y: itemY });
 
         //Make sure all the child scene objects have unique keys
-        ensureUniqueKeys(itemClone, index);
+        if (index > 0) {
+          ensureUniqueKeys(itemClone, localValue);
+        }
 
         children.push(itemClone);
 
@@ -104,7 +123,7 @@ export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorStat
         }
       }
 
-      const rowClone = this.getRowClone(rowToRepeat, index, values[index], texts[index], rowContentHeight, children);
+      const rowClone = this.getRowClone(rowToRepeat, index, localValue, texts[index], rowContentHeight, children);
       rows.push(rowClone);
     }
 
@@ -136,15 +155,27 @@ export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorStat
     const sourceRowY = rowToRepeat.state.y ?? 0;
 
     return rowToRepeat.clone({
-      key: `${rowToRepeat.state.key}-clone-${index}`,
+      key: `${rowToRepeat.state.key}-clone-${value}`,
       $variables: new SceneVariableSet({
         variables: [new LocalValueVariable({ name: this.state.variableName, value, text: String(text) })],
       }),
       $behaviors: [],
       children,
       y: sourceRowY + rowContentHeight * index + index,
+      actions: undefined,
     });
   }
+
+  public removeBehavior() {
+    const row = this._getRow();
+    const layout = this._getLayout();
+    const children = getLayoutChildrenFilterOutRepeatClones(this._getLayout(), this._getRow());
+
+    layout.setState({ children: children });
+
+    // Remove behavior and the scoped local variable
+    row.setState({ $behaviors: row.state.$behaviors!.filter((b) => b !== this), $variables: undefined });
+  }
 }
 
 function getRowContentHeight(panels: SceneGridItemLike[]): number {
@@ -207,9 +238,9 @@ function getLayoutChildrenFilterOutRepeatClones(layout: SceneGridLayout, rowToRe
   });
 }
 
-function ensureUniqueKeys(item: SceneGridItemLike, rowIndex: number) {
+function ensureUniqueKeys(item: SceneGridItemLike, localValue: VariableValueSingle) {
   item.forEachChild((child) => {
-    child.setState({ key: `${child.state.key}-row-${rowIndex}` });
-    ensureUniqueKeys(child, rowIndex);
+    child.setState({ key: `${child.state.key}-clone-${localValue}` });
+    ensureUniqueKeys(child, localValue);
   });
 }

public/app/features/dashboard-scene/scene/row-actions/RowActions.tsx

@@ -2,14 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import {
-  SceneComponentProps,
-  SceneGridLayout,
-  SceneGridRow,
-  SceneObjectBase,
-  SceneObjectState,
-  VizPanel,
-} from '@grafana/scenes';
+import { SceneComponentProps, SceneGridRow, SceneObjectBase, SceneObjectState, VizPanel } from '@grafana/scenes';
 import { Icon, TextLink, useStyles2 } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { SHARED_DASHBOARD_QUERY } from 'app/plugins/datasource/dashboard';
@@ -25,31 +18,6 @@ import { RowOptionsButton } from './RowOptionsButton';
 export interface RowActionsState extends SceneObjectState {}
 
 export class RowActions extends SceneObjectBase<RowActionsState> {
-  private updateLayout(rowClone: SceneGridRow): void {
-    const row = this.getParent();
-
-    const layout = this.getDashboard().state.body;
-
-    if (!(layout instanceof SceneGridLayout)) {
-      throw new Error('Layout is not a SceneGridLayout');
-    }
-
-    // remove the repeated rows
-    const children = layout.state.children.filter((child) => !child.state.key?.startsWith(`${row.state.key}-clone-`));
-
-    // get the index to replace later
-    const index = children.indexOf(row);
-
-    if (index === -1) {
-      throw new Error('Parent row not found in layout children');
-    }
-
-    // replace the row with the clone
-    layout.setState({
-      children: [...children.slice(0, index), rowClone, ...children.slice(index + 1)],
-    });
-  }
-
   public getParent(): SceneGridRow {
     if (!(this.parent instanceof SceneGridRow)) {
       throw new Error('RowActions must have a SceneGridRow parent');
@@ -64,39 +32,26 @@ export class RowActions extends SceneObjectBase<RowActionsState> {
 
   public onUpdate = (title: string, repeat?: string | null): void => {
     const row = this.getParent();
+    let repeatBehavior: RowRepeaterBehavior | undefined;
 
-    // return early if there is no repeat
-    if (!repeat) {
-      const clone = row.clone();
-
-      // remove the row repeater behaviour, leave the rest
-      clone.setState({
-        title,
-        $behaviors: row.state.$behaviors?.filter((b) => !(b instanceof RowRepeaterBehavior)) ?? [],
-      });
-
-      this.updateLayout(clone);
-
-      return;
+    if (row.state.$behaviors) {
+      for (let b of row.state.$behaviors) {
+        if (b instanceof RowRepeaterBehavior) {
+          repeatBehavior = b;
+        }
+      }
     }
 
-    const children = row.state.children.map((child) => child.clone());
+    if (repeat && !repeatBehavior) {
+      const repeatBehavior = new RowRepeaterBehavior({ variableName: repeat });
+      row.setState({ $behaviors: [...(row.state.$behaviors ?? []), repeatBehavior] });
+    } else if (repeatBehavior) {
+      repeatBehavior.removeBehavior();
+    }
 
-    const newBehaviour = new RowRepeaterBehavior({
-      variableName: repeat,
-      sources: children,
-    });
-
-    // get rest of behaviors except the old row repeater, if any, and push new one
-    const behaviors = row.state.$behaviors?.filter((b) => !(b instanceof RowRepeaterBehavior)) ?? [];
-    behaviors.push(newBehaviour);
-
-    row.setState({
-      title,
-      $behaviors: behaviors,
-    });
-
-    newBehaviour.activate();
+    if (title !== row.state.title) {
+      row.setState({ title });
+    }
   };
 
   public onDelete = () => {

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

@@ -141,6 +141,101 @@ exports[`transformSceneToSaveModel Given a scene with rows Should transform back
       "title": "Row for server $server",
       "type": "row",
     },
+    {
+      "datasource": {
+        "type": "testdata",
+        "uid": "PD8C576611E62080A",
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic",
+          },
+          "custom": {
+            "axisBorderShow": false,
+            "axisCenteredZero": false,
+            "axisColorMode": "text",
+            "axisLabel": "",
+            "axisPlacement": "auto",
+            "barAlignment": 0,
+            "drawStyle": "line",
+            "fillOpacity": 0,
+            "gradientMode": "none",
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false,
+            },
+            "insertNulls": false,
+            "lineInterpolation": "linear",
+            "lineWidth": 1,
+            "pointSize": 5,
+            "scaleDistribution": {
+              "type": "linear",
+            },
+            "showPoints": "auto",
+            "spanNulls": false,
+            "stacking": {
+              "group": "A",
+              "mode": "none",
+            },
+            "thresholdsStyle": {
+              "mode": "off",
+            },
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+              },
+              {
+                "color": "red",
+                "value": 80,
+              },
+            ],
+          },
+        },
+        "overrides": [],
+      },
+      "gridPos": {
+        "h": 10,
+        "w": 24,
+        "x": 0,
+        "y": 4,
+      },
+      "id": 2,
+      "maxPerRow": 3,
+      "options": {
+        "legend": {
+          "calcs": [],
+          "displayMode": "list",
+          "placement": "bottom",
+          "showLegend": true,
+        },
+        "tooltip": {
+          "mode": "single",
+          "sort": "none",
+        },
+      },
+      "repeat": "pod",
+      "repeatDirection": "h",
+      "targets": [
+        {
+          "alias": "server = $server, pod id = $pod ",
+          "datasource": {
+            "type": "testdata",
+            "uid": "PD8C576611E62080A",
+          },
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "seriesCount": 1,
+        },
+      ],
+      "title": "server = $server, pod = $pod",
+      "type": "timeseries",
+    },
     {
       "collapsed": true,
       "gridPos": {

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts

@@ -176,13 +176,7 @@ function createRowFromPanelModel(row: PanelModel, content: SceneGridItemLike[]):
 
   if (row.repeat) {
     // For repeated rows the children are stored in the behavior
-    children = [];
-    behaviors = [
-      new RowRepeaterBehavior({
-        variableName: row.repeat,
-        sources: content,
-      }),
-    ];
+    behaviors = [new RowRepeaterBehavior({ variableName: row.repeat })];
   }
 
   return new SceneGridRow({

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

@@ -227,7 +227,7 @@ describe('transformSceneToSaveModel', () => {
       const rowRepeater = rowWithRepeat.state.$behaviors![0] as RowRepeaterBehavior;
 
       // trigger row repeater
-      rowRepeater.variableDependency?.variableUpdateCompleted(variable, true);
+      rowRepeater.performRepeat();
 
       // Make sure the repeated rows have been added to runtime scene model
       expect(grid.state.children.length).toBe(5);

public/app/features/dashboard-scene/utils/test-utils.ts

@@ -68,6 +68,11 @@ export function mockResizeObserver() {
 export function activateFullSceneTree(scene: SceneObject): SceneDeactivationHandler {
   const deactivationHandlers: SceneDeactivationHandler[] = [];
 
+  // Important that variables are activated before other children
+  if (scene.state.$variables) {
+    deactivationHandlers.push(activateFullSceneTree(scene.state.$variables));
+  }
+
   scene.forEachChild((child) => {
     // For query runners which by default use the container width for maxDataPoints calculation we are setting a width.
     // In real life this is done by the React component when VizPanel is rendered.
@@ -130,18 +135,9 @@ export function buildPanelRepeaterScene(options: SceneOptions, source?: VizPanel
     }),
   });
 
-  const rowChildren = defaults.usePanelRepeater ? withRepeat : withoutRepeat;
-
   const row = new SceneGridRow({
-    $behaviors: defaults.useRowRepeater
-      ? [
-          new RowRepeaterBehavior({
-            variableName: 'handler',
-            sources: [rowChildren],
-          }),
-        ]
-      : [],
-    children: defaults.useRowRepeater ? [] : [rowChildren],
+    $behaviors: defaults.useRowRepeater ? [new RowRepeaterBehavior({ variableName: 'handler' })] : [],
+    children: [defaults.usePanelRepeater ? withRepeat : withoutRepeat],
   });
 
   const panelRepeatVariable = new TestVariable({

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

@@ -64,7 +64,20 @@ function findVizPanelInternal(scene: SceneObject, key: string | undefined): VizP
     return null;
   }
 
-  const panel = sceneGraph.findObject(scene, (obj) => obj.state.key === key);
+  const panel = sceneGraph.findObject(scene, (obj) => {
+    const objKey = obj.state.key!;
+
+    if (objKey === key) {
+      return true;
+    }
+
+    if (!(obj instanceof VizPanel)) {
+      return false;
+    }
+
+    return false;
+  });
+
   if (panel) {
     if (panel instanceof VizPanel) {
       return panel;

yarn.lock

@@ -133,15 +133,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.22.9, @babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4, @babel/generator@npm:^7.7.2":
-  version: 7.24.4
-  resolution: "@babel/generator@npm:7.24.4"
+"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.22.9, @babel/generator@npm:^7.24.5, @babel/generator@npm:^7.7.2":
+  version: 7.24.5
+  resolution: "@babel/generator@npm:7.24.5"
   dependencies:
-    "@babel/types": "npm:^7.24.0"
+    "@babel/types": "npm:^7.24.5"
     "@jridgewell/gen-mapping": "npm:^0.3.5"
     "@jridgewell/trace-mapping": "npm:^0.3.25"
     jsesc: "npm:^2.5.1"
-  checksum: 10/69e1772dcf8f95baec951f422cca091d59a3f29b5eedc989ad87f7262289b94625983f6fe654302ca17aae0a32f9232332b83fcc85533311d6267b09c58b1061
+  checksum: 10/7a3782f1d2f824025a538444a0fce44f5b30a7b013984279561bcb3450eec91a41526533fd0b25b1a6fde627bebd0e645c0ea2aa907cc15c7f3da2d9eb71f069
   languageName: node
   linkType: hard
 
@@ -157,6 +157,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/generator@npm:7.24.4"
+  dependencies:
+    "@babel/types": "npm:^7.24.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^2.5.1"
+  checksum: 10/69e1772dcf8f95baec951f422cca091d59a3f29b5eedc989ad87f7262289b94625983f6fe654302ca17aae0a32f9232332b83fcc85533311d6267b09c58b1061
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -189,21 +201,21 @@ __metadata:
   linkType: hard
 
 "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4":
-  version: 7.24.4
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4"
+  version: 7.24.5
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.24.5"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
+    "@babel/helper-member-expression-to-functions": "npm:^7.24.5"
     "@babel/helper-optimise-call-expression": "npm:^7.22.5"
     "@babel/helper-replace-supers": "npm:^7.24.1"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
-    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    "@babel/helper-split-export-declaration": "npm:^7.24.5"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/86153719d98e4402f92f24d6b1be94e6b59c0236a6cc36b173a570a64b5156dbc2f16ccfe3c8485dc795524ca88acca65b14863be63049586668c45567f2acd4
+  checksum: 10/9f65cf44ff838dae2a51ba7fdca1a27cc6eb7c0589e2446e807f7e8dc18e9866775f6e7a209d4f1d25bfed265e450ea338ca6c3570bc11a77fbfe683694130f3
   languageName: node
   linkType: hard
 
@@ -291,25 +303,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-member-expression-to-functions@npm:^7.0.0, @babel/helper-member-expression-to-functions@npm:^7.23.0":
-  version: 7.23.0
-  resolution: "@babel/helper-member-expression-to-functions@npm:7.23.0"
+"@babel/helper-member-expression-to-functions@npm:^7.0.0, @babel/helper-member-expression-to-functions@npm:^7.23.0, @babel/helper-member-expression-to-functions@npm:^7.24.5":
+  version: 7.24.5
+  resolution: "@babel/helper-member-expression-to-functions@npm:7.24.5"
   dependencies:
-    "@babel/types": "npm:^7.23.0"
-  checksum: 10/325feb6e200478c8cd6e10433fabe993a7d3315cc1a2a457e45514a5f95a73dff4c69bea04cc2daea0ffe72d8ed85d504b3f00b2e0767b7d4f5ae25fec9b35b2
+    "@babel/types": "npm:^7.24.5"
+  checksum: 10/4d0e0cab8af96fc22ce78ea4013fcbe130b98292d4357590a3f113cb0d830b360ebdc5a156bd0edce151e90eddfee39a106c501c88d1b6f48efc7396cacd038d
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.1":
-  version: 7.24.1
-  resolution: "@babel/helper-module-imports@npm:7.24.1"
+"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.1, @babel/helper-module-imports@npm:^7.24.3":
+  version: 7.24.3
+  resolution: "@babel/helper-module-imports@npm:7.24.3"
   dependencies:
     "@babel/types": "npm:^7.24.0"
-  checksum: 10/f771c1e8776890d85c2af06a6a36410cb41ff4bbcf162e7eecce7d53ebdc5196cc38c3abea3a06df9d778bb20edccb2909dfb8187ae82730e4d021329b631921
+  checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.23.0, @babel/helper-module-transforms@npm:^7.23.3":
+"@babel/helper-module-transforms@npm:^7.23.0":
   version: 7.23.3
   resolution: "@babel/helper-module-transforms@npm:7.23.3"
   dependencies:
@@ -324,6 +336,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.23.3":
+  version: 7.24.5
+  resolution: "@babel/helper-module-transforms@npm:7.24.5"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-module-imports": "npm:^7.24.3"
+    "@babel/helper-simple-access": "npm:^7.24.5"
+    "@babel/helper-split-export-declaration": "npm:^7.24.5"
+    "@babel/helper-validator-identifier": "npm:^7.24.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/1a91e8abc2f427f8273ce3b99ef7b9c013eb3628221428553e0d4bc9c6db2e73bc4fc1b8535bd258544936accab9380e0d095f2449f913cad650ddee744b2124
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.0.0, @babel/helper-optimise-call-expression@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-optimise-call-expression@npm:7.22.5"
@@ -340,6 +367,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-plugin-utils@npm:^7.24.5":
+  version: 7.24.5
+  resolution: "@babel/helper-plugin-utils@npm:7.24.5"
+  checksum: 10/6e11ca5da73e6bd366848236568c311ac10e433fc2034a6fe6243af28419b07c93b4386f87bbc940aa058b7c83f370ef58f3b0fd598106be040d21a3d1c14276
+  languageName: node
+  linkType: hard
+
 "@babel/helper-remap-async-to-generator@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-remap-async-to-generator@npm:7.22.20"
@@ -366,12 +400,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-simple-access@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/helper-simple-access@npm:7.22.5"
+"@babel/helper-simple-access@npm:^7.22.5, @babel/helper-simple-access@npm:^7.24.5":
+  version: 7.24.5
+  resolution: "@babel/helper-simple-access@npm:7.24.5"
   dependencies:
-    "@babel/types": "npm:^7.22.5"
-  checksum: 10/7d5430eecf880937c27d1aed14245003bd1c7383ae07d652b3932f450f60bfcf8f2c1270c593ab063add185108d26198c69d1aca0e6fb7c6fdada4bcf72ab5b7
+    "@babel/types": "npm:^7.24.5"
+  checksum: 10/db8768a16592faa1bde9061cac3d903bdbb2ddb2a7e9fb73c5904daee1f1b1dc69ba4d249dc22c45885c0d4b54fd0356ee78e6d67a9a90330c7dd37e6cd3acff
   languageName: node
   linkType: hard
 
@@ -393,6 +427,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-split-export-declaration@npm:^7.24.5":
+  version: 7.24.5
+  resolution: "@babel/helper-split-export-declaration@npm:7.24.5"
+  dependencies:
+    "@babel/types": "npm:^7.24.5"
+  checksum: 10/84777b6304ef0fe6501038985b61aaa118082688aa54eca8265f14f3ae2e01adf137e9111f4eb9870e0e9bc23901e0b8859bb2a9e4362ddf89d05e1c409c2422
+  languageName: node
+  linkType: hard
+
 "@babel/helper-string-parser@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/helper-string-parser@npm:7.23.4"
@@ -400,10 +443,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.22.20":
-  version: 7.22.20
-  resolution: "@babel/helper-validator-identifier@npm:7.22.20"
-  checksum: 10/df882d2675101df2d507b95b195ca2f86a3ef28cb711c84f37e79ca23178e13b9f0d8b522774211f51e40168bf5142be4c1c9776a150cddb61a0d5bf3e95750b
+"@babel/helper-string-parser@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/helper-string-parser@npm:7.24.1"
+  checksum: 10/04c0ede77b908b43e6124753b48bc485528112a9335f0a21a226bff1ace75bb6e64fab24c85cb4b1610ef3494dacd1cb807caeb6b79a7b36c43d48c289b35949
+  languageName: node
+  linkType: hard
+
+"@babel/helper-validator-identifier@npm:^7.22.20, @babel/helper-validator-identifier@npm:^7.24.5":
+  version: 7.24.5
+  resolution: "@babel/helper-validator-identifier@npm:7.24.5"
+  checksum: 10/38aaf6a64a0ea2e84766165b461deda3c24fd2173dff18419a2cc9e1ea1d3e709039aee94db29433a07011492717c80900a5eb564cdca7d137757c3c69e26898
   languageName: node
   linkType: hard
 
@@ -459,7 +509,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.22.7, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.22.7, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.5":
+  version: 7.24.5
+  resolution: "@babel/parser@npm:7.24.5"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/f5ed1c5fd4b0045a364fb906f54fd30e2fff93a45069068b6d80d3ab2b64f5569c90fb41d39aff80fb7e925ca4d44917965a76776a3ca11924ec1fae3be5d1ea
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.23.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4":
   version: 7.24.4
   resolution: "@babel/parser@npm:7.24.4"
   bin:
@@ -1245,7 +1304,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.24.1":
+"@babel/plugin-transform-optional-chaining@npm:^7.23.0":
   version: 7.24.1
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1"
   dependencies:
@@ -1258,6 +1317,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-optional-chaining@npm:^7.24.1":
+  version: 7.24.5
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.5"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/2bd83bb5d5ec63f694e66387f850977d800cd13d04b7b60b8ba24647727b6433f9e44269e95bc7379fc30529b38ab9ff4589b739ce60d16b3c4b26138394180b
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-parameters@npm:^7.22.15, @babel/plugin-transform-parameters@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/plugin-transform-parameters@npm:7.24.1"
@@ -1894,7 +1966,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.22.8, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.24.1":
+"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.22.8":
+  version: 7.24.5
+  resolution: "@babel/traverse@npm:7.24.5"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.2"
+    "@babel/generator": "npm:^7.24.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-function-name": "npm:^7.23.0"
+    "@babel/helper-hoist-variables": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.24.5"
+    "@babel/parser": "npm:^7.24.5"
+    "@babel/types": "npm:^7.24.5"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/e237de56e0c30795293fdb6f2cb09a75e6230836e3dc67dc4fa21781eb4d5842996bf3af95bc57ac5c7e6e97d06446f14732d0952eb57d5d9643de7c4f95bee6
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/traverse@npm:7.24.1"
   dependencies:
@@ -1923,6 +2013,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.24.5":
+  version: 7.24.5
+  resolution: "@babel/types@npm:7.24.5"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.24.1"
+    "@babel/helper-validator-identifier": "npm:^7.24.5"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: 10/259e7512476ae64830e73f2addf143159232bcbf0eba6a6a27cab25a960cd353a11c826eb54185fdf7d8d9865922cbcd6522149e9ec55b967131193f9c9111a1
+  languageName: node
+  linkType: hard
+
 "@base2/pretty-print-object@npm:1.0.1":
   version: 1.0.1
   resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -4116,13 +4217,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@grafana/faro-core@npm:^1.3.6, @grafana/faro-core@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "@grafana/faro-core@npm:1.6.0"
+"@grafana/faro-core@npm:^1.3.6":
+  version: 1.7.2
+  resolution: "@grafana/faro-core@npm:1.7.2"
   dependencies:
     "@opentelemetry/api": "npm:^1.7.0"
     "@opentelemetry/otlp-transformer": "npm:^0.48.0"
-  checksum: 10/42fe689be231126793e8129dd6c29661618ede36d479756aa02835c7687838861fd795119543c732359388d4f253bfe0ae01f04b2bee9253294ea9ff7bd3aa25
+  checksum: 10/4460a9160875af52da7f411c9407a58415378ae17e7f8dea2f5dc0c00f6ca2ca588b87b501d2f45477f106a20a6c3020dc9bc7855009ba8246da72012b645d54
   languageName: node
   linkType: hard
 
@@ -4136,6 +4237,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@grafana/faro-core@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "@grafana/faro-core@npm:1.6.0"
+  dependencies:
+    "@opentelemetry/api": "npm:^1.7.0"
+    "@opentelemetry/otlp-transformer": "npm:^0.48.0"
+  checksum: 10/42fe689be231126793e8129dd6c29661618ede36d479756aa02835c7687838861fd795119543c732359388d4f253bfe0ae01f04b2bee9253294ea9ff7bd3aa25
+  languageName: node
+  linkType: hard
+
 "@grafana/faro-web-sdk@npm:1.5.0":
   version: 1.5.0
   resolution: "@grafana/faro-web-sdk@npm:1.5.0"
@@ -4492,9 +4603,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes@npm:^4.14.0":
-  version: 4.14.0
-  resolution: "@grafana/scenes@npm:4.14.0"
+"@grafana/scenes@npm:^4.21.0":
+  version: 4.21.0
+  resolution: "@grafana/scenes@npm:4.21.0"
   dependencies:
     "@grafana/e2e-selectors": "npm:^10.4.1"
     react-grid-layout: "npm:1.3.4"
@@ -4508,7 +4619,7 @@ __metadata:
     "@grafana/ui": ^10.4.1
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 10/f8b5dc7e8b6aa5c7fa96d0b579292822ce1cbe274af6b9af7221660c3c960897a9744e2eaa1847ae0381cac72f8250e6e95a881a387fe42f8eeaebdd0241031e
+  checksum: 10/6ce273c3a2969fedb0dda89cbe97efe1b93b7b5e67844da75f2dd08356a11d51d5153f56e5057ca5e2b37bab728a5d23794001b03b1a591e647fd80c1a58d3d6
   languageName: node
   linkType: hard
 
@@ -6405,7 +6516,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11, @pmmmwh/react-refresh-webpack-plugin@npm:^0.5.5":
+"@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11":
   version: 0.5.11
   resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11"
   dependencies:
@@ -6444,6 +6555,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.5":
+  version: 0.5.13
+  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.13"
+  dependencies:
+    ansi-html-community: "npm:^0.0.8"
+    core-js-pure: "npm:^3.23.3"
+    error-stack-parser: "npm:^2.0.6"
+    html-entities: "npm:^2.1.0"
+    loader-utils: "npm:^2.0.4"
+    schema-utils: "npm:^3.0.0"
+    source-map: "npm:^0.7.3"
+  peerDependencies:
+    "@types/webpack": 4.x || 5.x
+    react-refresh: ">=0.10.0 <1.0.0"
+    sockjs-client: ^1.4.0
+    type-fest: ">=0.17.0 <5.0.0"
+    webpack: ">=4.43.0 <6.0.0"
+    webpack-dev-server: 3.x || 4.x || 5.x
+    webpack-hot-middleware: 2.x
+    webpack-plugin-serve: 0.x || 1.x
+  peerDependenciesMeta:
+    "@types/webpack":
+      optional: true
+    sockjs-client:
+      optional: true
+    type-fest:
+      optional: true
+    webpack-dev-server:
+      optional: true
+    webpack-hot-middleware:
+      optional: true
+    webpack-plugin-serve:
+      optional: true
+  checksum: 10/fe25c2e4d9b3af1329c1bf091e43f276ef258f7e7d7a54ff28b3092ffba8ab1a27907195dde33e63078d9c138b3a12bd6fa5638cf1ce22a345491905964ed559
+  languageName: node
+  linkType: hard
+
 "@polka/url@npm:^1.0.0-next.24":
   version: 1.0.0-next.24
   resolution: "@polka/url@npm:1.0.0-next.24"
@@ -10185,10 +10333,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:*, @types/lodash@npm:4.17.0, @types/lodash@npm:^4.14.167, @types/lodash@npm:^4.14.172":
-  version: 4.17.0
-  resolution: "@types/lodash@npm:4.17.0"
-  checksum: 10/2053203292b5af99352d108656ceb15d39da5922fc3fb8186e1552d65c82d6e545372cc97f36c95873aa7186404d59d9305e9d49254d4ae55e77df1e27ab7b5d
+"@types/lodash@npm:*, @types/lodash@npm:^4.14.167, @types/lodash@npm:^4.14.172":
+  version: 4.17.1
+  resolution: "@types/lodash@npm:4.17.1"
+  checksum: 10/384bdd29348a000f8e815f94839a1a8c7f5a4ca856b016ade7f2abdc1df0b4e3e009c113b69db320a8fde51d1f38e60c19462b9bf3e82e0e2e32d3ac3e7ba2c4
   languageName: node
   linkType: hard
 
@@ -10199,6 +10347,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:4.17.0":
+  version: 4.17.0
+  resolution: "@types/lodash@npm:4.17.0"
+  checksum: 10/2053203292b5af99352d108656ceb15d39da5922fc3fb8186e1552d65c82d6e545372cc97f36c95873aa7186404d59d9305e9d49254d4ae55e77df1e27ab7b5d
+  languageName: node
+  linkType: hard
+
 "@types/logfmt@npm:^1.2.3":
   version: 1.2.6
   resolution: "@types/logfmt@npm:1.2.6"
@@ -19061,7 +19216,7 @@ __metadata:
     "@grafana/prometheus": "workspace:*"
     "@grafana/runtime": "workspace:*"
     "@grafana/saga-icons": "workspace:*"
-    "@grafana/scenes": "npm:^4.14.0"
+    "@grafana/scenes": "npm:^4.21.0"
     "@grafana/schema": "workspace:*"
     "@grafana/sql": "workspace:*"
     "@grafana/tsconfig": "npm:^1.3.0-rc1"
@@ -20216,7 +20371,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"immutable@npm:4.3.5, immutable@npm:^4.0.0":
+"immutable@npm:4.3.5":
   version: 4.3.5
   resolution: "immutable@npm:4.3.5"
   checksum: 10/dbc1b8c808b9aa18bfce2e0c7bc23714a47267bc311f082145cc9220b2005e9b9cd2ae78330f164a19266a2b0f78846c60f4f74893853ac16fd68b5ae57092d2
@@ -20230,6 +20385,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.0.0":
+  version: 4.3.6
+  resolution: "immutable@npm:4.3.6"
+  checksum: 10/59fedb67f26e265035616b27e33ef90b53b434cf76fb09212ec2d6ae32ee8d2fe2641e6dc32dbc78498c521fbf5f72c6740d39affba63a0a36a3884272371857
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -22773,13 +22935,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:10.2.0, lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0, lru-cache@npm:^9.1.1 || ^10.0.0":
+"lru-cache@npm:10.2.0, lru-cache@npm:^9.1.1 || ^10.0.0":
   version: 10.2.0
   resolution: "lru-cache@npm:10.2.0"
   checksum: 10/502ec42c3309c0eae1ce41afca471f831c278566d45a5273a0c51102dee31e0e250a62fa9029c3370988df33a14188a38e682c16143b794de78668de3643e302
   languageName: node
   linkType: hard
 
+"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
+  version: 10.2.2
+  resolution: "lru-cache@npm:10.2.2"
+  checksum: 10/ff1a496d30b5eaec2c9079080965bb0cede203cf878371f7033a007f1e54cd4aa13cc8abf7ccec4c994a83a22ed5476e83a55bb57cc07e6c1547a42937e42c37
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^5.1.1":
   version: 5.1.1
   resolution: "lru-cache@npm:5.1.1"
@@ -23308,7 +23477,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:9.0.3, minimatch@npm:^9.0.0, minimatch@npm:^9.0.1, minimatch@npm:^9.0.3":
+"minimatch@npm:9.0.3":
   version: 9.0.3
   resolution: "minimatch@npm:9.0.3"
   dependencies:
@@ -23335,6 +23504,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:^9.0.0, minimatch@npm:^9.0.1, minimatch@npm:^9.0.3":
+  version: 9.0.4
+  resolution: "minimatch@npm:9.0.4"
+  dependencies:
+    brace-expansion: "npm:^2.0.1"
+  checksum: 10/4cdc18d112b164084513e890d6323370db14c22249d536ad1854539577a895e690a27513dc346392f61a4a50afbbd8abc88f3f25558bfbbbb862cd56508b20f5
+  languageName: node
+  linkType: hard
+
 "minimist-options@npm:4.1.0":
   version: 4.1.0
   resolution: "minimist-options@npm:4.1.0"
@@ -25155,7 +25333,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-scurry@npm:^1.10.2, path-scurry@npm:^1.6.1":
+"path-scurry@npm:^1.10.2":
   version: 1.10.2
   resolution: "path-scurry@npm:1.10.2"
   dependencies:
@@ -25165,6 +25343,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-scurry@npm:^1.6.1":
+  version: 1.11.0
+  resolution: "path-scurry@npm:1.11.0"
+  dependencies:
+    lru-cache: "npm:^10.2.0"
+    minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
+  checksum: 10/b97e52746427f37ff8e7dcd00a9ed4562b7ee8b24b87c5c85e47105d48ab408624c943417f22792215b986d71d5d7d855235ee2aec68cbec370eaa78f720bb42
+  languageName: node
+  linkType: hard
+
 "path-to-regexp@npm:0.1.7":
   version: 0.1.7
   resolution: "path-to-regexp@npm:0.1.7"
@@ -26544,7 +26732,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-tree@npm:5.8.5, rc-tree@npm:~5.8.1":
+"rc-tree@npm:5.8.5":
   version: 5.8.5
   resolution: "rc-tree@npm:5.8.5"
   dependencies:
@@ -26560,6 +26748,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rc-tree@npm:~5.8.1":
+  version: 5.8.7
+  resolution: "rc-tree@npm:5.8.7"
+  dependencies:
+    "@babel/runtime": "npm:^7.10.1"
+    classnames: "npm:2.x"
+    rc-motion: "npm:^2.0.1"
+    rc-util: "npm:^5.16.1"
+    rc-virtual-list: "npm:^3.5.1"
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: 10/d51b1bdc13408e9f6bed0af5ed312d50923a011139ad8b7166dd4f749afda819d80fad9a063347e2cbfbb9555e09f52976cd9117a1af54f9b5933a0bc49df9b1
+  languageName: node
+  linkType: hard
+
 "rc-trigger@npm:^2.2.0":
   version: 2.6.5
   resolution: "rc-trigger@npm:2.6.5"
@@ -28223,7 +28427,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:5.0.5, rimraf@npm:^5.0.5":
+"rimraf@npm:5.0.5":
   version: 5.0.5
   resolution: "rimraf@npm:5.0.5"
   dependencies:
@@ -28267,6 +28471,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rimraf@npm:^5.0.5":
+  version: 5.0.7
+  resolution: "rimraf@npm:5.0.7"
+  dependencies:
+    glob: "npm:^10.3.7"
+  bin:
+    rimraf: dist/esm/bin.mjs
+  checksum: 10/1e3cecfe59ee2383dfd9ba5373caeed48ed941318a0360119419b7dffc63115661408b9427f67e1f66b5bbb8855a3953db09e55a7362b3df904a44453dfa22fb
+  languageName: node
+  linkType: hard
+
 "rimraf@npm:~2.6.2":
   version: 2.6.3
   resolution: "rimraf@npm:2.6.3"
@@ -28680,7 +28895,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.6.0, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0":
+"semver@npm:7.6.0, semver@npm:^7.3.2":
   version: 7.6.0
   resolution: "semver@npm:7.6.0"
   dependencies:
@@ -28700,6 +28915,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0":
+  version: 7.6.2
+  resolution: "semver@npm:7.6.2"
+  bin:
+    semver: bin/semver.js
+  checksum: 10/296b17d027f57a87ef645e9c725bff4865a38dfc9caf29b26aa084b85820972fbe7372caea1ba6857162fa990702c6d9c1d82297cecb72d56c78ab29070d2ca2
+  languageName: node
+  linkType: hard
+
 "send@npm:0.17.2":
   version: 0.17.2
   resolution: "send@npm:0.17.2"
@@ -30660,11 +30884,11 @@ __metadata:
   linkType: hard
 
 "ts-api-utils@npm:^1.0.1":
-  version: 1.0.3
-  resolution: "ts-api-utils@npm:1.0.3"
+  version: 1.3.0
+  resolution: "ts-api-utils@npm:1.3.0"
   peerDependencies:
     typescript: ">=4.2.0"
-  checksum: 10/1350a5110eb1e534e9a6178f4081fb8a4fcc439749e19f4ad699baec9090fcb90fe532d5e191d91a062dc6e454a14a8d7eb2ad202f57135a30c4a44a3024f039
+  checksum: 10/3ee44faa24410cd649b5c864e068d438aa437ef64e9e4a66a41646a6d3024d3097a695eeb3fb26ee364705d3cb9653a65756d009e6a53badb6066a5f447bf7ed
   languageName: node
   linkType: hard
 
@@ -32656,8 +32880,8 @@ __metadata:
   linkType: hard
 
 "zod@npm:^3.21.4":
-  version: 3.22.3
-  resolution: "zod@npm:3.22.3"
-  checksum: 10/3aad6e6b61ddceaeb887dccc5f747903e619b09dfd208f6dc30eef15edf3942b8e6cd97a08e080c9c8723575446941edb823a8881c512e00e8dd3085f20659cc
+  version: 3.23.4
+  resolution: "zod@npm:3.23.4"
+  checksum: 10/29117ce59f16af155d9a3aab024d18e858e55b4b51c1f848772516ec6f019e617a0cdaf4c6e20f15154360a9f4c160056aba34502ec68072c8f0af31dfd653d6
   languageName: node
   linkType: hard