Add back and forward support for app actions

src/components/Explore/GroupBySelector.tsx

@@ -122,7 +122,10 @@ export function GroupBySelector({ options, radioAttributes, value, onChange, sho
           value={value && getModifiedSelectOptions(otherAttrOptions).some((x) => x.value === value) ? value : null} // remove value from select when radio button clicked
           placeholder={'Other attributes'}
           options={getModifiedSelectOptions(otherAttrOptions)}
-          onChange={(selected) => onChange(selected?.value ?? defaultOnChangeValue)}
+          onChange={(selected) => {
+            const newSelected = selected?.value ?? defaultOnChangeValue;
+            onChange(newSelected);
+          }}
           className={styles.select}
           isClearable
           onInputChange={(value: string, { action }: InputActionMeta) => {

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

@@ -37,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

@@ -39,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';
@@ -189,15 +189,21 @@ export class TraceExploration extends SceneObjectBase<TraceExplorationState> {
     if (!signal || this.state.primarySignal === signal) {
       return;
     }
-    this.setState({ primarySignal: signal });
+
+    this._urlSync.performBrowserHistoryAction(() => {
+      this.setState({ primarySignal: signal });
+    });
   };
 
   public onChangeMetricFunction = (metric: string) => {
     const variable = this.getMetricVariable();
     if (!metric || variable.getValue() === metric) {
       return;
     }
-    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 @@
   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,
@@ -61,7 +71,7 @@
 }
 
 export function getErrorMessage(data: SceneDataState) {
   return data?.data?.error?.message ?? 'There are no Tempo data sources';
 }
 
 export function getNoDataMessage(context: string) {