@parca/profile 0.19.1 → 0.19.3

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.3](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.2...@parca/profile@0.19.3) (2025-06-19)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.19.2 (2025-06-19)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.1](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.0...@parca/profile@0.19.1) (2025-06-18)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/MetricsContextMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsContextMenu/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,iBAAiB,EAAC,MAAM,KAAK,CAAC;AAEtC,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,CACjB,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AASD,QAAA,MAAM,kBAAkB,qFAMrB,uBAAuB,KAAG,GAAG,CAAC,OAmDhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsContextMenu/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,iBAAiB,EAAC,MAAM,KAAK,CAAC;AAEtC,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,CACjB,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AASD,QAAA,MAAM,kBAAkB,qFAMrB,uBAAuB,KAAG,GAAG,CAAC,OA4DhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/MetricsGraph/MetricsContextMenu/index.js

@@ -30,11 +30,11 @@ const MetricsContextMenu = ({ menuId, onAddLabelMatcher, highlighted, trackVisib
         }));
         labelsToAdd !== undefined && onAddLabelMatcher(labelsToAdd);
     };
-    return (_jsxs(Menu, { id: menuId, onVisibilityChange: trackVisibility, theme: isDarkMode ? 'dark' : '', children: [_jsx(Item, { id: "focus-on-single-series", onClick: handleFocusOnSingleSeries, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:star" }), _jsx("div", { children: "Focus only on this series" })] }) }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "material-symbols:add" }), _jsx("div", { children: "Add to query" })] }), children: _jsx("div", { className: "max-h-[300px] overflow-scroll", children: labels?.map((label) => (_jsx(Item, { id: label.name, onClick: () => {
+    return (_jsxs(Menu, { id: menuId, onVisibilityChange: trackVisibility, theme: isDarkMode ? 'dark' : '', children: [_jsx(Item, { id: "focus-on-single-series", onClick: handleFocusOnSingleSeries, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:star" }), _jsx("div", { children: "Focus only on this series" })] }) }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "material-symbols:add" }), _jsx("div", { children: "Add to query" })] }), children: _jsx("div", { className: "max-h-[300px] overflow-auto", children: labels == null || labels.length === 0 ? (_jsx(Item, { disabled: true, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:warning" }), _jsx("div", { children: "No labels available" })] }) })) : (labels.map((label) => (_jsx(Item, { id: label.name, onClick: () => {
                             onAddLabelMatcher({
                                 key: label.name,
                                 value: label.value,
                             });
-                        }, className: "max-w-[400px] overflow-hidden", children: _jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300", children: `${transformUtilizationLabels(label.name, utilizationMetrics)}="${label.value}"` }) }, label.name))) }) })] }));
+                        }, className: "max-w-[400px] overflow-hidden", children: _jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300", children: `${transformUtilizationLabels(label.name, utilizationMetrics)}="${label.value}"` }) }, label.name)))) }) })] }));
 };
 export default MetricsContextMenu;

package/dist/ProfileExplorer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGjD,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,kBAAkB,CAAC;AAQ1B,UAAU,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,GAAG,CAAC;IACjB,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAaD,eAAO,MAAM,sBAAsB,eAAgB,MAAM,GAAG,EAAE,KAAG,MAGhE,CAAC;AAmWF,QAAA,MAAM,eAAe,8CAIlB,oBAAoB,KAAG,GAAG,CAAC,OAkB7B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,kBAAkB,CAAC;AAU1B,UAAU,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,GAAG,CAAC;IACjB,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAaD,eAAO,MAAM,sBAAsB,eAAgB,MAAM,GAAG,EAAE,KAAG,MAGhE,CAAC;AAiXF,QAAA,MAAM,eAAe,8CAIlB,oBAAoB,KAAG,GAAG,CAAC,OAkB7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileExplorer/index.js

@@ -14,10 +14,13 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { Provider } from 'react-redux';
 import { DateTimeRange, KeyDownProvider, useParcaContext } from '@parca/components';
+import { Query } from '@parca/parser';
 import { createStore } from '@parca/store';
 import { capitalizeOnlyFirstLetter, decodeMultipleEncodings, isUrlEncoded, } from '@parca/utilities';
 import { ProfileSelectionFromParams, SuffixParams } from '..';
 import { useProfileTypes } from '../ProfileSelector';
+import { useResetStateOnNewSearch } from '../ProfileView/hooks/useResetStateOnNewSearch';
+import { useResetStateOnProfileTypeChange } from '../ProfileView/hooks/useResetStateOnProfileTypeChange';
 import { sumByToParam, useSumByFromParams } from '../useSumBy';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
 import ProfileExplorerSingle from './ProfileExplorerSingle';
@@ -93,6 +96,8 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
     /* eslint-enable @typescript-eslint/naming-convention */
     const [profileA, setProfileA] = useState(null);
     const [profileB, setProfileB] = useState(null);
+    const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
+    const resetStateOnNewSearch = useResetStateOnNewSearch();
     const sumByA = useSumByFromParams(sum_by_a);
     const sumByB = useSumByFromParams(sum_by_b);
     useEffect(() => {
@@ -151,6 +156,17 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
     // Show the SingleProfileExplorer when not comparing
     if (compare_a !== 'true' && compare_b !== 'true') {
         const selectQuery = (q) => {
+            const profileNameAfter = Query.parse(q.expression).profileName();
+            if (profileA != null) {
+                if (profileA.ProfileName() !== profileNameAfter) {
+                    // Reset required state when the profile type changes.
+                    resetStateOnProfileTypeChange();
+                }
+                else {
+                    // Reset the state when a new search is performed.
+                    resetStateOnNewSearch();
+                }
+            }
             const mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
                 ? {
                     merge_from_a: q.mergeFrom,

package/dist/ProfileView/components/FilterByFunctionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterByFunctionButton.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/FilterByFunctionButton.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,sBAAsB,QAAO,GAAG,CAAC,OAkGtC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"FilterByFunctionButton.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/FilterByFunctionButton.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,sBAAsB,QAAO,GAAG,CAAC,OAyGtC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/ProfileView/components/FilterByFunctionButton.js

@@ -11,7 +11,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Icon } from '@iconify/react';
 import { Input, Select, useURLState } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
@@ -30,6 +30,12 @@ const FilterByFunctionButton = () => {
                 ? excludeFunctionStoreValue === 'true'
                 : excludeFunctionStoreValue !== 'true'));
     }, [localValue, storeValue, excludeFunction, excludeFunctionStoreValue]);
+    useEffect(() => {
+        if (storeValue === undefined) {
+            setLocalValue('');
+            setExcludeFunction(false);
+        }
+    }, [storeValue]);
     const onAction = useCallback(() => {
         if (isClearAction) {
             setLocalValue('');

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

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

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

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

package/dist/ProfileView/hooks/useResetStateOnNewSearch.js

@@ -0,0 +1,21 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useURLState } from '@parca/components';
+export const useResetStateOnNewSearch = () => {
+    const [, setCurPath] = useURLState('cur_path');
+    return () => {
+        setTimeout(() => {
+            setCurPath(undefined);
+        });
+    };
+};

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

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

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

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

package/dist/ProfileView/hooks/useResetStateOnProfileTypeChange.js

@@ -0,0 +1,29 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useURLState } from '@parca/components';
+export const useResetStateOnProfileTypeChange = () => {
+    const [, setGroupBy] = useURLState('group_by');
+    const [, setFilterByFunction] = useURLState('filter_by_function');
+    const [, setExcludeFunction] = useURLState('exclude_function');
+    const [, setSearchString] = useURLState('search_string');
+    const [, setCurPath] = useURLState('cur_path');
+    return () => {
+        setTimeout(() => {
+            setGroupBy(undefined);
+            setFilterByFunction(undefined);
+            setExcludeFunction(undefined);
+            setSearchString(undefined);
+            setCurPath(undefined);
+        });
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -77,5 +77,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "958d63de0b6b7b583315a476e8836e25c8777bdb"
+  "gitHead": "20c7f506dd35795cbc417a5d94c75d72b4128b97"
 }

package/src/MetricsGraph/MetricsContextMenu/index.tsx

@@ -71,24 +71,33 @@ const MetricsContextMenu = ({
           </div>
         }
       >
-        <div className="max-h-[300px] overflow-scroll">
-          {labels?.map((label: Label) => (
-            <Item
-              key={label.name}
-              id={label.name}
-              onClick={() => {
-                onAddLabelMatcher({
-                  key: label.name,
-                  value: label.value,
-                });
-              }}
-              className="max-w-[400px] overflow-hidden"
-            >
-              <div className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300">
-                {`${transformUtilizationLabels(label.name, utilizationMetrics)}="${label.value}"`}
+        <div className="max-h-[300px] overflow-auto">
+          {labels == null || labels.length === 0 ? (
+            <Item disabled>
+              <div className="flex w-full items-center gap-2">
+                <Icon icon="ph:warning" />
+                <div>No labels available</div>
               </div>
             </Item>
-          ))}
+          ) : (
+            labels.map((label: Label) => (
+              <Item
+                key={label.name}
+                id={label.name}
+                onClick={() => {
+                  onAddLabelMatcher({
+                    key: label.name,
+                    value: label.value,
+                  });
+                }}
+                className="max-w-[400px] overflow-hidden"
+              >
+                <div className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300">
+                  {`${transformUtilizationLabels(label.name, utilizationMetrics)}="${label.value}"`}
+                </div>
+              </Item>
+            ))
+          )}
         </div>
       </Submenu>
     </Menu>

package/src/ProfileExplorer/index.tsx

@@ -17,6 +17,7 @@ import {Provider} from 'react-redux';
 
 import {QueryServiceClient} from '@parca/client';
 import {DateTimeRange, KeyDownProvider, useParcaContext} from '@parca/components';
+import {Query} from '@parca/parser';
 import {createStore} from '@parca/store';
 import {
   capitalizeOnlyFirstLetter,
@@ -27,6 +28,8 @@ import {
 
 import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
 import {QuerySelection, useProfileTypes} from '../ProfileSelector';
+import {useResetStateOnNewSearch} from '../ProfileView/hooks/useResetStateOnNewSearch';
+import {useResetStateOnProfileTypeChange} from '../ProfileView/hooks/useResetStateOnProfileTypeChange';
 import {sumByToParam, useSumByFromParams} from '../useSumBy';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
 import ProfileExplorerSingle from './ProfileExplorerSingle';
@@ -173,6 +176,9 @@ const ProfileExplorerApp = ({
   const [profileA, setProfileA] = useState<ProfileSelection | null>(null);
   const [profileB, setProfileB] = useState<ProfileSelection | null>(null);
 
+  const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
+  const resetStateOnNewSearch = useResetStateOnNewSearch();
+
   const sumByA = useSumByFromParams(sum_by_a);
   const sumByB = useSumByFromParams(sum_by_b);
 
@@ -258,6 +264,17 @@ const ProfileExplorerApp = ({
   // Show the SingleProfileExplorer when not comparing
   if (compare_a !== 'true' && compare_b !== 'true') {
     const selectQuery = (q: QuerySelection): void => {
+      const profileNameAfter = Query.parse(q.expression).profileName();
+      if (profileA != null) {
+        if (profileA.ProfileName() !== profileNameAfter) {
+          // Reset required state when the profile type changes.
+          resetStateOnProfileTypeChange();
+        } else {
+          // Reset the state when a new search is performed.
+          resetStateOnNewSearch();
+        }
+      }
+
       const mergeParams =
         q.mergeFrom !== undefined && q.mergeTo !== undefined
           ? {

package/src/ProfileView/components/FilterByFunctionButton.tsx

@@ -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, useEffect, useMemo, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 
@@ -39,6 +39,13 @@ const FilterByFunctionButton = (): JSX.Element => {
     );
   }, [localValue, storeValue, excludeFunction, excludeFunctionStoreValue]);
 
+  useEffect(() => {
+    if (storeValue === undefined) {
+      setLocalValue('');
+      setExcludeFunction(false);
+    }
+  }, [storeValue]);
+
   const onAction = useCallback((): void => {
     if (isClearAction) {
       setLocalValue('');

package/src/ProfileView/hooks/useResetStateOnNewSearch.ts

@@ -0,0 +1,24 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {useURLState} from '@parca/components';
+
+export const useResetStateOnNewSearch = (): (() => void) => {
+  const [, setCurPath] = useURLState('cur_path');
+
+  return () => {
+    setTimeout(() => {
+      setCurPath(undefined);
+    });
+  };
+};

package/src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts

@@ -0,0 +1,32 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {useURLState} from '@parca/components';
+
+export const useResetStateOnProfileTypeChange = (): (() => void) => {
+  const [, setGroupBy] = useURLState('group_by');
+  const [, setFilterByFunction] = useURLState('filter_by_function');
+  const [, setExcludeFunction] = useURLState('exclude_function');
+  const [, setSearchString] = useURLState('search_string');
+  const [, setCurPath] = useURLState('cur_path');
+
+  return () => {
+    setTimeout(() => {
+      setGroupBy(undefined);
+      setFilterByFunction(undefined);
+      setExcludeFunction(undefined);
+      setSearchString(undefined);
+      setCurPath(undefined);
+    });
+  };
+};