@parca/profile 0.19.52 → 0.19.54

package/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 ?? []);

package/src/ProfileView/components/Toolbars/index.tsx

@@ -18,7 +18,7 @@ import {Icon} from '@iconify/react';
 import {QueryServiceClient} from '@parca/client';
 import {Button} from '@parca/components';
 import {ProfileType} from '@parca/parser';
-import {testId} from '@parca/test-utils';
+import {TEST_IDS, testId} from '@parca/test-utils';
 
 import {CurrentPathFrame} from '../../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {ProfileSource} from '../../../ProfileSource';
@@ -88,7 +88,7 @@ export const FlameGraphToolbar: FC<FlameGraphToolbarProps> = ({curPath, setNewCu
           onClick={() => setNewCurPath([])}
           disabled={curPath.length === 0}
           id="h-reset-graph"
-          {...testId('FLAMEGRAPH_RESET_BUTTON')}
+          {...testId(TEST_IDS.FLAMEGRAPH_RESET_BUTTON)}
         >
           Reset graph
           <Icon icon="system-uicons:reset" width={20} />

package/src/ProfileView/hooks/{useResetStateOnNewSearch.ts → 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 () => {

package/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,

package/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,

package/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;
     }

package/src/SimpleMatchers/index.tsx

@@ -20,7 +20,7 @@ import cx from 'classnames';
 import {QueryServiceClient} from '@parca/client';
 import {useGrpcMetadata} from '@parca/components';
 import {Query} from '@parca/parser';
-import {testId} from '@parca/test-utils';
+import {TEST_IDS, testId} from '@parca/test-utils';
 import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
 
 import {LabelProvider, useLabels} from '../contexts/SimpleMatchersLabelContext';
@@ -357,10 +357,10 @@ const SimpleMatchers = ({
     <div
       className={`flex items-center gap-3 ${maxWidthInPixels} w-full flex-wrap`}
       id="simple-matchers"
-      {...testId('SIMPLE_MATCHERS_CONTAINER')}
+      {...testId(TEST_IDS.SIMPLE_MATCHERS_CONTAINER)}
     >
       {visibleRows.map((row, index) => (
-        <div key={index} className="flex items-center" {...testId('SIMPLE_MATCHER_ROW')}>
+        <div key={index} className="flex items-center" {...testId(TEST_IDS.SIMPLE_MATCHER_ROW)}>
           <Select
             items={labelNameOptions}
             onSelection={value => handleUpdateRow(index, 'labelName', value)}
@@ -369,14 +369,14 @@ const SimpleMatchers = ({
             className="rounded-tr-none rounded-br-none ring-0 focus:ring-0 outline-none"
             loading={labelNamesLoading}
             searchable={true}
-            {...testId('LABEL_NAME_SELECT')}
+            {...testId(TEST_IDS.LABEL_NAME_SELECT)}
           />
           <Select
             items={operatorOptions}
             onSelection={value => handleUpdateRow(index, 'operator', value)}
             selectedKey={row.operator}
             className="rounded-none ring-0 focus:ring-0 outline-none"
-            {...testId('OPERATOR_SELECT')}
+            {...testId(TEST_IDS.OPERATOR_SELECT)}
           />
           <Select
             items={transformLabelsForSelect(row.labelValues)}
@@ -392,14 +392,14 @@ const SimpleMatchers = ({
             loading={row.isLoading}
             onButtonClick={() => handleLabelValueClick(index)}
             editable={isRowRegex(row)}
-            {...testId('LABEL_VALUE_SELECT')}
+            {...testId(TEST_IDS.LABEL_VALUE_SELECT)}
           />
           <button
             onClick={() => removeRow(index)}
             className={cx(
               'p-2 border-gray-200 border rounded rounded-tl-none rounded-bl-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900'
             )}
-            {...testId('REMOVE_MATCHER_BUTTON')}
+            {...testId(TEST_IDS.REMOVE_MATCHER_BUTTON)}
           >
             <Icon icon="carbon:close" className="h-5 w-5 text-gray-400" aria-hidden="true" />
           </button>
@@ -410,7 +410,7 @@ const SimpleMatchers = ({
         <button
           onClick={() => setShowAll(!showAll)}
           className="mr-2 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900"
-          {...testId(showAll ? 'SHOW_LESS_BUTTON' : 'SHOW_MORE_BUTTON')}
+          {...testId(showAll ? TEST_IDS.SHOW_LESS_BUTTON : TEST_IDS.SHOW_MORE_BUTTON)}
         >
           {showAll ? 'Show less' : `Show ${hiddenRowsCount} more`}
         </button>
@@ -419,7 +419,7 @@ const SimpleMatchers = ({
       <button
         onClick={addNewRow}
         className="p-2 border-gray-200 dark:bg-gray-900 dark:border-gray-600 border rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        {...testId('ADD_MATCHER_BUTTON')}
+        {...testId(TEST_IDS.ADD_MATCHER_BUTTON)}
       >
         <Icon icon="material-symbols:add" className="h-5 w-5 text-gray-400" aria-hidden="true" />
       </button>

package/src/ViewMatchers/index.tsx

@@ -19,7 +19,7 @@ import cx from 'classnames';
 import {QueryServiceClient} from '@parca/client';
 import {useGrpcMetadata} from '@parca/components';
 import {Query} from '@parca/parser';
-import {testId} from '@parca/test-utils';
+import {TEST_IDS, testId} from '@parca/test-utils';
 import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
 
 import CustomSelect, {SelectItem} from '../SimpleMatchers/Select';
@@ -173,7 +173,7 @@ const ViewMatchers: React.FC<Props> = ({
   }, []);
 
   return (
-    <div className="flex flex-wrap gap-2" {...testId('VIEW_MATCHERS_CONTAINER')}>
+    <div className="flex flex-wrap gap-2" {...testId(TEST_IDS.VIEW_MATCHERS_CONTAINER)}>
       {labelNames.map(labelName => (
         <div key={labelName} className="flex items-center">
           <div className="relative border shadow-sm px-4 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm flex gap-2 items-center justify-between bg-gray-100 dark:bg-gray-700 rounded-l-md border-gray-300 dark:border-gray-600">

package/dist/ProfileView/hooks/useResetStateOnNewSearch.d.ts

@@ -1,2 +0,0 @@
-export declare const useResetStateOnNewSearch: () => (() => void);
-//# sourceMappingURL=useResetStateOnNewSearch.d.ts.map

package/dist/ProfileView/hooks/useResetStateOnNewSearch.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResetStateOnNewSearch.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetStateOnNewSearch.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,wBAAwB,QAAO,CAAC,MAAM,IAAI,CAWtD,CAAC"}