Persist selected function in the URL.

Author: mstange

src/actions/profile-view.ts

@@ -81,6 +81,7 @@ import {
   funcHasRecursiveCall,
 } from '../profile-logic/transforms';
 import { changeStoredProfileNameInDb } from 'firefox-profiler/app-logic/uploaded-profiles-db';
+import { withHistoryReplaceStateSync } from 'firefox-profiler/app-logic/url-handling';
 import type { TabSlug } from '../app-logic/tabs-handling';
 import type { CallNodeInfo } from '../profile-logic/call-node-info';
 import type { SingleColumnSortState } from '../components/shared/TreeView';
@@ -163,17 +164,25 @@ export function changeUpperWingSelectedCallNode(
 
 /**
  * Select a function for a given thread in the function list.
+ *
+ * Uses replaceState rather than pushState so that holding e.g. the down arrow
+ * key in the function list doesn't get rate-limited by the browser and doesn't
+ * flood the back/forward history.
  */
 export function changeSelectedFunctionIndex(
   threadsKey: ThreadsKey,
   selectedFunctionIndex: IndexIntoFuncTable | null,
   context: SelectionContext = { source: 'auto' }
-): Action {
-  return {
-    type: 'CHANGE_SELECTED_FUNCTION',
-    selectedFunctionIndex,
-    threadsKey,
-    context,
+): ThunkAction<void> {
+  return (dispatch) => {
+    withHistoryReplaceStateSync(() => {
+      dispatch({
+        type: 'CHANGE_SELECTED_FUNCTION',
+        selectedFunctionIndex,
+        threadsKey,
+        context,
+      });
+    });
   };
 }
 

src/app-logic/url-handling.ts

@@ -42,6 +42,7 @@ import type {
   IndexIntoFrameTable,
   MarkerIndex,
   SelectedMarkersPerThread,
+  SelectedFunctionsPerThread,
   FunctionListSectionsOpenState,
 } from 'firefox-profiler/types';
 import {
@@ -189,6 +190,7 @@ type CallTreeQuery = BaseQuery & {
   ctSummary: string;
   functionListSort?: string; // "total-desc~self-asc" — primary first
   funcListSections?: string; // "descendants,self" — comma-separated open sections
+  selectedFunc?: number; // Selected function index for the current thread, e.g. 42
 };
 
 type MarkersQuery = BaseQuery & {
@@ -238,6 +240,7 @@ type Query = BaseQuery & {
   // Function list specific
   functionListSort?: string;
   funcListSections?: string;
+  selectedFunc?: number;
 
   // Network specific
   networkSearch?: string;
@@ -400,6 +403,14 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
         query.funcListSections = convertFunctionListSectionsOpenToString(
           urlState.profileSpecific.functionListSectionsOpen
         );
+        query.selectedFunc =
+          selectedThreadsKey !== null &&
+          urlState.profileSpecific.selectedFunctions[selectedThreadsKey] !==
+            null &&
+          urlState.profileSpecific.selectedFunctions[selectedThreadsKey] !==
+            undefined
+            ? urlState.profileSpecific.selectedFunctions[selectedThreadsKey]
+            : undefined;
       }
       break;
     }
@@ -563,6 +574,19 @@ export function stateFromLocation(
     }
   }
 
+  // Parse the selected function for the current thread
+  const selectedFunctions: SelectedFunctionsPerThread = {};
+  if (
+    selectedThreadsKey !== null &&
+    query.selectedFunc !== undefined &&
+    query.selectedFunc !== null
+  ) {
+    const funcIndex = Number(query.selectedFunc);
+    if (Number.isInteger(funcIndex) && funcIndex >= 0) {
+      selectedFunctions[selectedThreadsKey] = funcIndex;
+    }
+  }
+
   // tabID is used for the tab selector that we have in our full view.
   let tabID = null;
   if (query.tabID && Number.isInteger(Number(query.tabID))) {
@@ -654,6 +678,7 @@ export function stateFromLocation(
         ? query.hiddenThreads.split('-').map((index) => Number(index))
         : null,
       selectedMarkers,
+      selectedFunctions,
       markerTableSort: convertMarkerTableSortFromString(query.markerSort),
       functionListSort: convertFunctionListSortFromString(
         query.functionListSort

src/reducers/profile-view.ts

@@ -146,7 +146,6 @@ export const defaultThreadViewOptions: ThreadViewOptions = {
   expandedInvertedCallNodePaths: new PathSet(),
   expandedLowerWingCallNodePaths: new PathSet(),
   expandedUpperWingCallNodePaths: new PathSet(),
-  selectedFunctionIndex: null,
   selectedNetworkMarker: null,
   lastSeenTransformCount: 0,
 };
@@ -296,17 +295,19 @@ const viewOptionsPerThread: Reducer<ThreadViewOptionsPerThreads> = (
 
       const threadState = _getThreadViewOptions(state, threadsKey);
 
-      const previousSelectedFunction = threadState.selectedFunctionIndex;
+      const previousLowerWingPath = threadState.selectedLowerWingCallNodePath;
+      const isSameSelection =
+        selectedFunctionIndex === null
+          ? previousLowerWingPath.length === 0
+          : previousLowerWingPath.length === 1 &&
+            previousLowerWingPath[0] === selectedFunctionIndex;
 
-      // If the selected function doesn't actually change, let's return the previous
-      // state to avoid rerenders.
-      if (selectedFunctionIndex === previousSelectedFunction) {
+      if (isSameSelection) {
         return state;
       }
 
       if (selectedFunctionIndex !== null) {
         return _updateThreadViewOptions(state, threadsKey, {
-          selectedFunctionIndex,
           selectedLowerWingCallNodePath: [selectedFunctionIndex],
           expandedLowerWingCallNodePaths: new PathSet([
             [selectedFunctionIndex],
@@ -319,7 +320,10 @@ const viewOptionsPerThread: Reducer<ThreadViewOptionsPerThreads> = (
       }
 
       return _updateThreadViewOptions(state, threadsKey, {
-        selectedFunctionIndex,
+        selectedLowerWingCallNodePath: [],
+        expandedLowerWingCallNodePaths: new PathSet(),
+        selectedUpperWingCallNodePath: [],
+        expandedUpperWingCallNodePaths: new PathSet(),
       });
     }
     case 'CHANGE_INVERT_CALLSTACK': {
@@ -459,8 +463,48 @@ const viewOptionsPerThread: Reducer<ThreadViewOptionsPerThreads> = (
         return state;
       }
 
-      const { transforms } = action.newUrlState.profileSpecific;
-      return objectMap(state, (viewOptions, threadsKey) => {
+      const { transforms, selectedFunctions } = action.newUrlState.profileSpecific;
+
+      // The selected function lives in URL state; mirror it into the per-thread
+      // wing paths so that initial loads and back/forward navigation restore the
+      // wings to the right function.
+      const newState: ThreadViewOptionsPerThreads = { ...state };
+      for (const threadsKey of Object.keys(selectedFunctions)) {
+        const selectedFunctionIndex = selectedFunctions[threadsKey];
+        const viewOptions = _getThreadViewOptions(newState, threadsKey);
+        const previousLowerWingPath = viewOptions.selectedLowerWingCallNodePath;
+        const matchesExisting =
+          selectedFunctionIndex === null
+            ? previousLowerWingPath.length === 0
+            : previousLowerWingPath.length === 1 &&
+              previousLowerWingPath[0] === selectedFunctionIndex;
+        if (matchesExisting) {
+          continue;
+        }
+        if (selectedFunctionIndex === null) {
+          newState[threadsKey] = {
+            ...viewOptions,
+            selectedLowerWingCallNodePath: [],
+            expandedLowerWingCallNodePaths: new PathSet(),
+            selectedUpperWingCallNodePath: [],
+            expandedUpperWingCallNodePaths: new PathSet(),
+          };
+        } else {
+          newState[threadsKey] = {
+            ...viewOptions,
+            selectedLowerWingCallNodePath: [selectedFunctionIndex],
+            expandedLowerWingCallNodePaths: new PathSet([
+              [selectedFunctionIndex],
+            ]),
+            selectedUpperWingCallNodePath: [selectedFunctionIndex],
+            expandedUpperWingCallNodePaths: new PathSet([
+              [selectedFunctionIndex],
+            ]),
+          };
+        }
+      }
+
+      return objectMap(newState, (viewOptions, threadsKey) => {
         const transformStack = transforms[threadsKey] || [];
         const newTransformCount = transformStack.length;
         const oldTransformCount = viewOptions.lastSeenTransformCount;

src/reducers/url-state.ts

@@ -24,6 +24,7 @@ import type {
   IsOpenPerPanelState,
   TabID,
   SelectedMarkersPerThread,
+  SelectedFunctionsPerThread,
   FunctionListSectionsOpenState,
 } from 'firefox-profiler/types';
 
@@ -795,6 +796,26 @@ const selectedMarkers: Reducer<SelectedMarkersPerThread> = (
   }
 };
 
+const selectedFunctions: Reducer<SelectedFunctionsPerThread> = (
+  state = {},
+  action
+): SelectedFunctionsPerThread => {
+  switch (action.type) {
+    case 'CHANGE_SELECTED_FUNCTION': {
+      const { threadsKey, selectedFunctionIndex } = action;
+      if (state[threadsKey] === selectedFunctionIndex) {
+        return state;
+      }
+      return {
+        ...state,
+        [threadsKey]: selectedFunctionIndex,
+      };
+    }
+    default:
+      return state;
+  }
+};
+
 /**
  * These values are specific to an individual profile.
  */
@@ -824,6 +845,7 @@ const profileSpecific = combineReducers({
   showJsTracerSummary,
   tabFilter,
   selectedMarkers,
+  selectedFunctions,
   markerTableSort,
   functionListSort,
   functionListSectionsOpen,

src/selectors/per-thread/stack-sample.ts

@@ -209,13 +209,9 @@ export function getStackAndSampleSelectorsPerThread(
       }
     );
 
-  const getSelectedFunctionIndex: Selector<IndexIntoFuncTable | null> =
-    createSelector(
-      threadSelectors.getViewOptions,
-      (threadViewOptions): IndexIntoFuncTable | null => {
-        return threadViewOptions.selectedFunctionIndex;
-      }
-    );
+  const getSelectedFunctionIndex: Selector<IndexIntoFuncTable | null> = (
+    state
+  ) => UrlState.getSelectedFunction(state, threadsKey);
 
   const getUpperWingCallNodeInfo: Selector<CallNodeInfo> = createSelector(
     _getNonInvertedCallNodeInfo,

src/selectors/url-state.ts

@@ -32,6 +32,7 @@ import type {
   TabID,
   IndexIntoSourceTable,
   MarkerIndex,
+  IndexIntoFuncTable,
   FunctionListSectionsOpenState,
 } from 'firefox-profiler/types';
 
@@ -254,6 +255,12 @@ export const getSelectedMarker: DangerousSelectorWithArguments<
 > = (state, threadsKey) =>
   getProfileSpecificState(state).selectedMarkers[threadsKey] ?? null;
 
+export const getSelectedFunction: DangerousSelectorWithArguments<
+  IndexIntoFuncTable | null,
+  ThreadsKey
+> = (state, threadsKey) =>
+  getProfileSpecificState(state).selectedFunctions[threadsKey] ?? null;
+
 export const getIsBottomBoxOpen: Selector<boolean> = (state) => {
   const tab = getSelectedTab(state);
   return getProfileSpecificState(state).isBottomBoxOpenPerPanel[tab];

src/test/store/__snapshots__/profile-view.test.ts.snap

@@ -4261,7 +4261,6 @@ Object {
     "_table": Map {},
   },
   "lastSeenTransformCount": 1,
-  "selectedFunctionIndex": null,
   "selectedInvertedCallNodePath": Array [],
   "selectedLowerWingCallNodePath": Array [],
   "selectedNetworkMarker": null,

src/types/state.ts

@@ -59,7 +59,6 @@ export type ThreadViewOptions = {
   readonly selectedInvertedCallNodePath: CallNodePath;
   readonly expandedNonInvertedCallNodePaths: PathSet;
   readonly expandedInvertedCallNodePaths: PathSet;
-  readonly selectedFunctionIndex: IndexIntoFuncTable | null;
   readonly selectedLowerWingCallNodePath: CallNodePath;
   readonly expandedLowerWingCallNodePaths: PathSet;
   readonly selectedUpperWingCallNodePath: CallNodePath;
@@ -107,6 +106,10 @@ export type SelectedMarkersPerThread = {
   [key: ThreadsKey]: MarkerIndex | null;
 };
 
+export type SelectedFunctionsPerThread = {
+  [key: ThreadsKey]: IndexIntoFuncTable | null;
+};
+
 /**
  * Profile view state
  */
@@ -399,6 +402,7 @@ export type ProfileSpecificUrlState = {
   legacyThreadOrder: ThreadIndex[] | null;
   legacyHiddenThreads: ThreadIndex[] | null;
   selectedMarkers: SelectedMarkersPerThread;
+  selectedFunctions: SelectedFunctionsPerThread;
   markerTableSort: SingleColumnSortState[];
   functionListSort: SingleColumnSortState[];
   functionListSectionsOpen: FunctionListSectionsOpenState;