Datatrails: Sync layout with URL values (#84865)

* Sync layout with URL values

* Refactor

.betterer.results

@@ -4085,6 +4085,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "11"],
       [0, 0, 0, "Do not use any type assertions.", "12"]
     ],
+    "public/app/features/trails/MetricScene.tsx:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
     "public/app/features/transformers/FilterByValueTransformer/ValueMatchers/BasicMatcherEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],

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

@@ -236,7 +236,6 @@ export function buildAllLayout(options: Array<SelectableValue<string>>, queryDef
       { value: 'grid', label: 'Grid' },
       { value: 'rows', label: 'Rows' },
     ],
-    active: 'grid',
     layouts: [
       new SceneCSSGridLayout({
         templateColumns: GRID_TEMPLATE_COLUMNS,
@@ -269,7 +268,6 @@ function buildNormalLayout(queryDef: AutoQueryDef) {
       { value: 'grid', label: 'Grid' },
       { value: 'rows', label: 'Rows' },
     ],
-    active: 'grid',
     layouts: [
       new SceneFlexLayout({
         direction: 'column',

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

@@ -1,11 +1,12 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { SceneComponentProps, SceneObject, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
+import { SceneComponentProps, sceneGraph, SceneObject, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
 import { Field, RadioButtonGroup } from '@grafana/ui';
 
+import { MetricScene } from '../MetricScene';
+
 export interface LayoutSwitcherState extends SceneObjectState {
-  active: LayoutType;
   layouts: SceneObject[];
   options: Array<SelectableValue<LayoutType>>;
 }
@@ -13,24 +14,30 @@ export interface LayoutSwitcherState extends SceneObjectState {
 export type LayoutType = 'single' | 'grid' | 'rows';
 
 export class LayoutSwitcher extends SceneObjectBase<LayoutSwitcherState> {
+  private getMetricScene() {
+    return sceneGraph.getAncestor(this, MetricScene);
+  }
+
   public Selector({ model }: { model: LayoutSwitcher }) {
-    const { active, options } = model.useState();
+    const { options } = model.useState();
+    const { layout } = model.getMetricScene().useState();
 
     return (
       <Field label="View">
-        <RadioButtonGroup options={options} value={active} onChange={model.onLayoutChange} />
+        <RadioButtonGroup options={options} value={layout} onChange={model.onLayoutChange} />
       </Field>
     );
   }
 
   public onLayoutChange = (active: LayoutType) => {
-    this.setState({ active });
+    this.getMetricScene().setState({ layout: active });
   };
 
   public static Component = ({ model }: SceneComponentProps<LayoutSwitcher>) => {
-    const { layouts, options, active } = model.useState();
+    const { layouts, options } = model.useState();
+    const { layout: activeLayout } = model.getMetricScene().useState();
 
-    const index = options.findIndex((o) => o.value === active);
+    const index = options.findIndex((o) => o.value === activeLayout);
     if (index === -1) {
       return null;
     }

public/app/features/trails/MetricScene.tsx

@@ -17,6 +17,7 @@ import { ToolbarButton, Box, Stack, Icon, TabsBar, Tab, useStyles2, LinkButton,
 import { getExploreUrl } from '../../core/utils/explore';
 
 import { buildBreakdownActionScene } from './ActionTabs/BreakdownScene';
+import { LayoutType } from './ActionTabs/LayoutSwitcher';
 import { buildMetricOverviewScene } from './ActionTabs/MetricOverviewScene';
 import { buildRelatedMetricsScene } from './ActionTabs/RelatedMetricsScene';
 import { getAutoQueriesForMetric } from './AutomaticMetricQueries/AutoQueryEngine';
@@ -40,21 +41,23 @@ export interface MetricSceneState extends SceneObjectState {
   body: MetricGraphScene;
   metric: string;
   actionView?: string;
+  layout: LayoutType;
 
   autoQuery: AutoQueryInfo;
   queryDef?: AutoQueryDef;
 }
 
 export class MetricScene extends SceneObjectBase<MetricSceneState> {
-  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['actionView'] });
+  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['actionView', 'layout'] });
 
-  public constructor(state: MakeOptional<MetricSceneState, 'body' | 'autoQuery'>) {
+  public constructor(state: MakeOptional<MetricSceneState, 'body' | 'autoQuery' | 'layout'>) {
     const autoQuery = state.autoQuery ?? getAutoQueriesForMetric(state.metric);
     super({
       $variables: state.$variables ?? getVariableSet(state.metric),
       body: state.body ?? new MetricGraphScene({}),
       autoQuery,
       queryDef: state.queryDef ?? autoQuery.main,
+      layout: state.layout ?? 'grid',
       ...state,
     });
 
@@ -68,7 +71,7 @@ export class MetricScene extends SceneObjectBase<MetricSceneState> {
   }
 
   getUrlState() {
-    return { actionView: this.state.actionView };
+    return { actionView: this.state.actionView, layout: this.state.layout };
   }
 
   updateFromUrl(values: SceneObjectUrlValues) {
@@ -82,6 +85,13 @@ export class MetricScene extends SceneObjectBase<MetricSceneState> {
     } else if (values.actionView === null) {
       this.setActionView(undefined);
     }
+
+    if (typeof values.layout === 'string') {
+      const newLayout = values.layout as LayoutType;
+      if (this.state.layout !== newLayout) {
+        this.setState({ layout: newLayout });
+      }
+    }
   }
 
   public setActionView(actionView?: ActionViewType) {