Merge pull request #5953 from parca-dev/toolbar-flamegraph-expansion

ui: Ensure Flame Graph is reset on all toolbar interactions

Author: yomete

ui/packages/shared/profile/src/ProfileExplorer/index.tsx

@@ -23,7 +23,7 @@ import {capitalizeOnlyFirstLetter, safeDecode, type NavigateFunction} from '@par
 
 import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
 import {QuerySelection, useProfileTypes} from '../ProfileSelector';
-import {useResetStateOnNewSearch} from '../ProfileView/hooks/useResetStateOnNewSearch';
+import {useResetFlameGraphState} from '../ProfileView/hooks/useResetFlameGraphState';
 import {useResetStateOnProfileTypeChange} from '../ProfileView/hooks/useResetStateOnProfileTypeChange';
 import {sumByToParam, useSumByFromParams} from '../useSumBy';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
@@ -162,7 +162,7 @@ const ProfileExplorerApp = ({
   const [profileB, setProfileB] = useState<ProfileSelection | null>(null);
 
   const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
-  const resetStateOnNewSearch = useResetStateOnNewSearch();
+  const resetFlameGraphState = useResetFlameGraphState();
 
   const sumByA = useSumByFromParams(sum_by_a);
   const sumByB = useSumByFromParams(sum_by_b);
@@ -250,7 +250,7 @@ const ProfileExplorerApp = ({
           resetStateOnProfileTypeChange();
         } else {
           // Reset the state when a new search is performed.
-          resetStateOnNewSearch();
+          resetFlameGraphState();
         }
       }
 

ui/packages/shared/profile/src/ProfileView/components/DashboardItems/index.tsx

@@ -42,8 +42,6 @@ interface GetDashboardItemProps {
   profileSource: ProfileSource;
   total: bigint;
   filtered: bigint;
-  curPath: string[];
-  setNewCurPath: (path: string[]) => void;
   curPathArrow: CurrentPathFrame[];
   setNewCurPathArrow: (path: CurrentPathFrame[]) => void;
   perf?: {

ui/packages/shared/profile/src/ProfileView/components/ProfileFilters/useProfileFilters.ts

@@ -15,6 +15,7 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 import {type Filter, type NumberCondition, type StringCondition} from '@parca/client';
 
+import {useResetFlameGraphState} from '../../hooks/useResetFlameGraphState';
 import {getPresetByKey, isPresetKey} from './filterPresets';
 import {useProfileFiltersUrlState} from './useProfileFiltersUrlState';
 
@@ -226,6 +227,7 @@ export const useProfileFilters = (): {
   resetFilters: () => void;
 } => {
   const {appliedFilters, setAppliedFilters} = useProfileFiltersUrlState();
+  const resetFlameGraphState = useResetFlameGraphState();
 
   const [localFilters, setLocalFilters] = useState<ProfileFilter[]>(appliedFilters ?? []);
 
@@ -327,9 +329,10 @@ export const useProfileFilters = (): {
       // Auto-apply the filter since it has a value
       const filtersToApply = [...(appliedFilters ?? []), newFilter];
       setAppliedFilters(filtersToApply);
+      resetFlameGraphState();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setAppliedFilters]
+    [setAppliedFilters, resetFlameGraphState]
   );
 
   const removeExcludeBinary = useCallback(
@@ -349,12 +352,13 @@ export const useProfileFilters = (): {
           f => f.id !== filterToRemove.id
         );
         setAppliedFilters(updatedAppliedFilters);
+        resetFlameGraphState();
 
         // Also remove from local filters
         setLocalFilters(localFiltersRef.current.filter(f => f.id !== filterToRemove.id));
       }
     },
-    [appliedFilters, setAppliedFilters]
+    [appliedFilters, setAppliedFilters, resetFlameGraphState]
   );
 
   const removeFilter = useCallback((id: string) => {
@@ -368,7 +372,8 @@ export const useProfileFilters = (): {
   const resetFilters = useCallback(() => {
     setLocalFilters([]);
     setAppliedFilters([]);
-  }, [setAppliedFilters]);
+    resetFlameGraphState();
+  }, [setAppliedFilters, resetFlameGraphState]);
 
   const onApplyFilters = useCallback((): void => {
     const validFilters = localFiltersRef.current.filter(f => {
@@ -386,7 +391,8 @@ export const useProfileFilters = (): {
     }));
 
     setAppliedFilters(filtersToApply);
-  }, [setAppliedFilters]);
+    resetFlameGraphState();
+  }, [setAppliedFilters, resetFlameGraphState]);
 
   const protoFilters = useMemo(() => {
     return convertToProtoFilters(appliedFilters ?? []);

…leView/hooks/useResetStateOnNewSearch.ts …ileView/hooks/useResetFlameGraphState.tsui/packages/shared/profile/src/ProfileView/hooks/useResetStateOnNewSearch.ts renamed to ui/packages/shared/profile/src/ProfileView/hooks/useResetFlameGraphState.ts ui/packages/shared/profile/src/ProfileView/hooks/useResetStateOnNewSearch.ts renamed to ui/packages/shared/profile/src/ProfileView/hooks/useResetFlameGraphState.ts

@@ -13,7 +13,7 @@
 
 import {useURLState} from '@parca/components';
 
-export const useResetStateOnNewSearch = (): (() => void) => {
+export const useResetFlameGraphState = (): (() => void) => {
   const [val, setCurPath] = useURLState('cur_path');
 
   return () => {

ui/packages/shared/profile/src/ProfileView/hooks/useVisualizationState.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useMemo, useState} from 'react';
+import {useCallback, useMemo} from 'react';
 
 import {JSONParser, JSONSerializer, useURLState, useURLStateCustom} from '@parca/components';
 
@@ -23,10 +23,9 @@ import {
   FIELD_MAPPING_FILE,
 } from '../../ProfileFlameGraph/FlameGraphArrow';
 import {CurrentPathFrame} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
+import {useResetFlameGraphState} from './useResetFlameGraphState';
 
 export const useVisualizationState = (): {
-  curPath: string[];
-  setCurPath: (path: string[]) => void;
   curPathArrow: CurrentPathFrame[];
   setCurPathArrow: (path: CurrentPathFrame[]) => void;
   colorStackLegend: string | undefined;
@@ -40,7 +39,6 @@ export const useVisualizationState = (): {
   setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
   resetSandwichFunctionName: () => void;
 } => {
-  const [curPath, setCurPath] = useState<string[]>([]);
   const [curPathArrow, setCurPathArrow] = useURLStateCustom<CurrentPathFrame[]>('cur_path', {
     parse: JSONParser<CurrentPathFrame[]>,
     stringify: JSONSerializer,
@@ -55,6 +53,7 @@ export const useVisualizationState = (): {
   const [sandwichFunctionName, setSandwichFunctionName] = useURLState<string | undefined>(
     'sandwich_function_name'
   );
+  const resetFlameGraphState = useResetFlameGraphState();
 
   const levelsOfProfiling = useMemo(
     () => [
@@ -81,8 +80,10 @@ export const useVisualizationState = (): {
         const filteredGroupBy = groupBy.filter(item => !levelsOfProfiling.includes(item));
         setGroupBy([...filteredGroupBy, key]); // add
       }
+
+      resetFlameGraphState();
     },
-    [groupBy, setGroupBy, levelsOfProfiling]
+    [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState]
   );
 
   const setGroupByLabels = useCallback(
@@ -97,8 +98,6 @@ export const useVisualizationState = (): {
   }, [setSandwichFunctionName]);
 
   return {
-    curPath,
-    setCurPath,
     curPathArrow,
     setCurPathArrow,
     colorStackLegend,

ui/packages/shared/profile/src/ProfileView/index.tsx

@@ -56,8 +56,6 @@ export const ProfileView = ({
   const {ref, dimensions} = useContainerDimensions();
 
   const {
-    curPath,
-    setCurPath,
     curPathArrow,
     setCurPathArrow,
     colorStackLegend,
@@ -100,8 +98,6 @@ export const ProfileView = ({
       profileSource,
       total,
       filtered,
-      curPath,
-      setNewCurPath: setCurPath,
       curPathArrow,
       setNewCurPathArrow: setCurPathArrow,
       perf,

ui/packages/shared/profile/src/ProfileViewWithData.tsx

@@ -58,7 +58,7 @@ export const ProfileViewWithData = ({
 
   useEffect(() => {
     // If profile type is not delta, remove flamechart from the dashboard items
-    // and set it to flame if no other items are selected.
+    // and set it to flame graph if no other items are selected.
     if (profileSource == null) {
       return;
     }