Data trails: Avoid setting state in MetricScene component (#80746)

* Move setting default action view to activate handler

* Update breakdown when adding label to filters

public/app/features/trails/ActionTabs/AddToFiltersGraphAction.tsx

@@ -10,8 +10,6 @@ import {
 } from '@grafana/scenes';
 import { Button } from '@grafana/ui';
 
-import { getMetricSceneFor } from '../utils';
-
 export interface AddToFiltersGraphActionState extends SceneObjectState {
   frame: DataFrame;
 }
@@ -28,10 +26,6 @@ export class AddToFiltersGraphAction extends SceneObjectBase<AddToFiltersGraphAc
       return;
     }
 
-    // close action view
-    const metricScene = getMetricSceneFor(this);
-    metricScene.setActionView(undefined);
-
     const labelName = Object.keys(labels)[0];
 
     variable.state.set.setState({

public/app/features/trails/ActionTabs/BreakdownScene.tsx

@@ -17,6 +17,7 @@ import {
   SceneObjectBase,
   SceneObjectState,
   SceneQueryRunner,
+  VariableDependencyConfig,
 } from '@grafana/scenes';
 import { Button, Field, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 import { ALL_VARIABLE_VALUE } from 'app/features/variables/constants';
@@ -24,7 +25,7 @@ import { ALL_VARIABLE_VALUE } from 'app/features/variables/constants';
 import { getAutoQueriesForMetric } from '../AutomaticMetricQueries/AutoQueryEngine';
 import { AutoQueryDef } from '../AutomaticMetricQueries/types';
 import { MetricScene } from '../MetricScene';
-import { trailDS, VAR_GROUP_BY, VAR_GROUP_BY_EXP } from '../shared';
+import { trailDS, VAR_FILTERS, VAR_GROUP_BY, VAR_GROUP_BY_EXP } from '../shared';
 import { getColorByIndex } from '../utils';
 
 import { AddToFiltersGraphAction } from './AddToFiltersGraphAction';
@@ -40,6 +41,11 @@ export interface BreakdownSceneState extends SceneObjectState {
 }
 
 export class BreakdownScene extends SceneObjectBase<BreakdownSceneState> {
+  protected _variableDependency = new VariableDependencyConfig(this, {
+    variableNames: [VAR_FILTERS],
+    onReferencedVariableValueChanged: this.onReferencedVariableValueChanged.bind(this),
+  });
+
   constructor(state: Partial<BreakdownSceneState>) {
     super({
       labels: state.labels ?? [],
@@ -79,6 +85,12 @@ export class BreakdownScene extends SceneObjectBase<BreakdownSceneState> {
     return variable;
   }
 
+  private onReferencedVariableValueChanged() {
+    const variable = this.getVariable();
+    variable.changeValueTo(ALL_VARIABLE_VALUE);
+    this.updateBody(variable);
+  }
+
   private updateBody(variable: QueryVariable) {
     const options = getLabelOptions(this, variable);
 
@@ -88,7 +100,7 @@ export class BreakdownScene extends SceneObjectBase<BreakdownSceneState> {
       labels: options,
     };
 
-    if (!this.state.body && !variable.state.loading) {
+    if (!variable.state.loading) {
       stateUpdate.body = variable.hasAllValue()
         ? buildAllLayout(options, this._query!)
         : buildNormalLayout(this._query!);
@@ -101,7 +113,7 @@ export class BreakdownScene extends SceneObjectBase<BreakdownSceneState> {
     const variable = this.getVariable();
 
     if (value === ALL_VARIABLE_VALUE) {
-      this.setState({ body: buildAllLayout(getLabelOptions(this, variable), this._query!) });
+      this.setState({ body: buildAllLayout(this.state.labels, this._query!) });
     } else if (variable.hasAllValue()) {
       this.setState({ body: buildNormalLayout(this._query!) });
     }

public/app/features/trails/DataTrail.tsx

@@ -205,7 +205,7 @@ function getVariableSet(initialDS?: string, metric?: string, initialFilters?: Ad
         pluginId: metric === LOGS_METRIC ? 'loki' : 'prometheus',
       }),
       AdHocFiltersVariable.create({
-        name: 'filters',
+        name: VAR_FILTERS,
         datasource: trailDS,
         layout: 'vertical',
         filters: initialFilters ?? [],

public/app/features/trails/MetricScene.tsx

@@ -51,6 +51,14 @@ export class MetricScene extends SceneObjectBase<MetricSceneState> {
       body: state.body ?? buildGraphScene(state.metric),
       ...state,
     });
+
+    this.addActivationHandler(this._onActivate.bind(this));
+  }
+
+  private _onActivate() {
+    if (this.state.actionView === undefined) {
+      this.setActionView('overview');
+    }
   }
 
   getUrlState() {
@@ -119,10 +127,6 @@ export class MetricActionBar extends SceneObjectBase<MetricActionBarState> {
       setBookmarked(!isBookmarked);
     };
 
-    if (!actionView) {
-      metricScene.setActionView('overview');
-    }
-
     return (
       <Box paddingY={1}>
         <div className={styles.actions}>