Use url sync

src/components/Explore/GroupBySelector.tsx

@@ -125,7 +125,6 @@ export function GroupBySelector({ options, radioAttributes, value, onChange, sho
           options={getModifiedSelectOptions(otherAttrOptions)}
           onChange={(selected) => {
             const newSelected = selected?.value ?? defaultOnChangeValue;
-            locationService.partial({ 'var-groupBy': newSelected });
             onChange(newSelected);
           }}
           className={styles.select}

src/components/Explore/TracesByService/TracesByServiceScene.tsx

@@ -57,7 +57,7 @@ export interface TraceSceneState extends SceneObjectState {
 }
 
 export class TracesByServiceScene extends SceneObjectBase<TraceSceneState> {
-  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['actionView', 'selection'] });
+  public _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['actionView', 'selection', 'metric'] });
 
   public constructor(state: MakeOptional<TraceSceneState, 'body'>) {
     super({
@@ -76,6 +76,7 @@ export class TracesByServiceScene extends SceneObjectBase<TraceSceneState> {
     this._subs.add(
       metricVariable.subscribeToState((newState, prevState) => {
         if (newState.value !== prevState.value) {
+          this.setState({ metric: newState.value as MetricFunction });
           const selection = getDefaultSelectionForMetric(newState.value as MetricFunction);
           if (selection) {
             this.setState({ selection });
@@ -155,6 +156,7 @@ export class TracesByServiceScene extends SceneObjectBase<TraceSceneState> {
   getUrlState() {
     return {
       actionView: this.state.actionView,
+      metric: this.state.metric,
       selection: this.state.selection ? JSON.stringify(this.state.selection) : undefined,
     };
   }

src/components/Explore/panels/histogram.ts

@@ -2,7 +2,6 @@ import { getTraceByServiceScene, shouldShowSelection } from '../../../utils/util
 import { ComparisonSelection } from '../../../utils/shared';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from '../../../utils/analytics';
 import { PanelBuilders, SceneFlexItem, SceneFlexLayout, SceneObject } from '@grafana/scenes';
-import { locationService } from '@grafana/runtime';
 
 export function getHistogramVizPanel(scene: SceneObject, yBuckets: number[]) {
   const parent = getTraceByServiceScene(scene);
@@ -23,7 +22,6 @@ export function getHistogramVizPanel(scene: SceneObject, yBuckets: number[]) {
         const rawSelection = args[0];
         // @ts-ignore
         const newSelection: ComparisonSelection = { type: 'manual', raw: rawSelection };
-        locationService.partial({ 'selection': newSelection });
 
         newSelection.timeRange = {
           from: Math.round((rawSelection.x?.from || 0) / 1000),
@@ -39,7 +37,9 @@ export function getHistogramVizPanel(scene: SceneObject, yBuckets: number[]) {
         const yTo = yBucketToDuration(args[0].y?.to || 0, yBuckets);
         newSelection.duration = { from: yFrom, to: yTo };
 
-        parent.setState({ selection: newSelection });
+        parent._urlSync.performBrowserHistoryAction(() => {
+          parent.setState({ selection: newSelection });
+        });
         if (!shouldShowSelection(parent.state.actionView)) {
           parent.setActionView('comparison');
         }

src/pages/Explore/TraceExploration.tsx

@@ -23,7 +23,6 @@ import {
 import {
   LocationService,
   config,
-  locationService,
   // @ts-ignore
   sidecarServiceSingleton_EXPERIMENTAL,
 } from '@grafana/runtime';
@@ -40,7 +39,7 @@ import {
   VAR_LATENCY_THRESHOLD,
   VAR_METRIC,
 } from '../../utils/shared';
-import { getTraceExplorationScene, getFilterSignature, getFiltersVariable } from '../../utils/utils';
+import { getTraceExplorationScene, getFilterSignature, getFiltersVariable, getTraceByServiceSceneAsDescendent } from '../../utils/utils';
 import { DetailsScene } from '../../components/Explore/TracesByService/DetailsScene';
 import { FilterByVariable } from 'components/Explore/filters/FilterByVariable';
 import { getSignalForKey, primarySignalOptions } from './primary-signals';
@@ -191,8 +190,9 @@ export class TraceExploration extends SceneObjectBase<TraceExplorationState> {
       return;
     }
 
-    locationService.partial({ 'primarySignal': signal });
-    this.setState({ primarySignal: signal });
+    this._urlSync.performBrowserHistoryAction(() => {
+      this.setState({ primarySignal: signal });
+    });
   };
 
   public onChangeMetricFunction = (metric: string) => {
@@ -201,8 +201,9 @@ export class TraceExploration extends SceneObjectBase<TraceExplorationState> {
       return;
     }
 
-    locationService.partial({ 'var-metric': metric });
-    variable.changeValueTo(metric);
+    getTraceByServiceSceneAsDescendent(this)._urlSync.performBrowserHistoryAction(() => {
+      variable.changeValueTo(metric);
+    });
   };
 
   public getMetricFunction() {

src/pages/Explore/TraceExplorationPage.tsx

@@ -44,7 +44,7 @@ export function TraceExplorationView({ exploration }: { exploration: TraceExplor
   }
 
   return (
-    <UrlSyncContextProvider scene={exploration} updateUrlOnInit={true} createBrowserHistorySteps={false}>
+    <UrlSyncContextProvider scene={exploration} updateUrlOnInit={true} createBrowserHistorySteps={true}>
       <exploration.Component model={exploration} />
     </UrlSyncContextProvider>
   );

src/utils/utils.ts

@@ -40,6 +40,16 @@ export function getTraceByServiceScene(model: SceneObject): TracesByServiceScene
   return sceneGraph.getAncestor(model, TracesByServiceScene);
 }
 
+export function getTraceByServiceSceneAsDescendent(model: SceneObject): TracesByServiceScene {
+  const scenes = sceneGraph.findDescendents(model, TracesByServiceScene);
+
+  if (!scenes || scenes.length < 1 || !(scenes[0] instanceof TracesByServiceScene)) {
+    throw new Error('TracesByServiceScene not found');
+  }
+
+  return scenes[0];
+}
+
 export function newTracesExploration(
   locationService: LocationService,
   initialDS?: string,