DataTrails: Do not create a new VizPanel every activation (#85693)

public/app/features/trails/AutomaticMetricQueries/AutoVizPanel.tsx

@@ -20,10 +20,11 @@ export class AutoVizPanel extends SceneObjectBase<AutoVizPanelState> {
   }
 
   public onActivate() {
-    const { autoQuery } = getMetricSceneFor(this).state;
-    this.setState({
-      panel: this.getVizPanelFor(autoQuery.main),
-    });
+    if (!this.state.panel) {
+      const { autoQuery } = getMetricSceneFor(this).state;
+
+      this.setState({ panel: this.getVizPanelFor(autoQuery.main) });
+    }
   }
 
   private getQuerySelector(def: AutoQueryDef) {
@@ -43,9 +44,7 @@ export class AutoVizPanel extends SceneObjectBase<AutoVizPanelState> {
 
     const def = metricScene.state.autoQuery.variants.find((q) => q.variant === variant)!;
 
-    this.setState({
-      panel: this.getVizPanelFor(def),
-    });
+    this.setState({ panel: this.getVizPanelFor(def) });
     metricScene.setState({ queryDef: def });
   };
 

public/app/features/trails/MetricGraphScene.tsx

@@ -72,8 +72,6 @@ function getStyles(theme: GrafanaTheme2) {
 }
 
 function buildGraphTopView() {
-  const bodyAutoVizPanel = new AutoVizPanel({});
-
   return new SceneFlexLayout({
     direction: 'column',
     $behaviors: [new behaviors.CursorSync({ key: 'metricCrosshairSync', sync: DashboardCursorSync.Crosshair })],
@@ -81,7 +79,7 @@ function buildGraphTopView() {
       new SceneFlexItem({
         minHeight: MAIN_PANEL_MIN_HEIGHT,
         maxHeight: MAIN_PANEL_MAX_HEIGHT,
-        body: bodyAutoVizPanel,
+        body: new AutoVizPanel({}),
       }),
       new SceneFlexItem({
         ySizing: 'content',