@parca/profile 0.19.41 → 0.19.42

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.42](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.41...@parca/profile@0.19.42) (2025-08-25)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.41](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.40...@parca/profile@0.19.41) (2025-08-25)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileView/components/ProfileFilters/useProfileFilters.d.ts

@@ -6,6 +6,7 @@ export interface ProfileFilter {
     matchType?: 'equal' | 'not_equal' | 'contains' | 'not_contains';
     value: string;
 }
+export declare const convertFromProtoFilters: (protoFilters: Filter[]) => ProfileFilter[];
 export declare const convertToProtoFilters: (profileFilters: ProfileFilter[]) => Filter[];
 export declare const useProfileFilters: () => {
     localFilters: ProfileFilter[];

package/dist/ProfileView/components/ProfileFilters/useProfileFilters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProfileFilters.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFilters.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,eAAe,CAAC;AAK1C,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAClC,KAAK,CAAC,EAAE,eAAe,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAC5F,SAAS,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,eAAO,MAAM,qBAAqB,GAAI,gBAAgB,aAAa,EAAE,KAAG,MAAM,EAqG7E,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO;IACnC,YAAY,EAAE,aAAa,EAAE,CAAC;IAC9B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mBAAmB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,MAAM,IAAI,CAAC;CAsL1B,CAAC"}
+{"version":3,"file":"useProfileFilters.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFilters.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,MAAM,EAA6C,MAAM,eAAe,CAAC;AAKtF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAClC,KAAK,CAAC,EAAE,eAAe,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAC5F,SAAS,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;CACf;AAqBD,eAAO,MAAM,uBAAuB,GAAI,cAAc,MAAM,EAAE,KAAG,aAAa,EA+E7E,CAAC;AAGF,eAAO,MAAM,qBAAqB,GAAI,gBAAgB,aAAa,EAAE,KAAG,MAAM,EAmF7E,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO;IACnC,YAAY,EAAE,aAAa,EAAE,CAAC;IAC9B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mBAAmB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,MAAM,IAAI,CAAC;CAsL1B,CAAC"}

package/dist/ProfileView/components/ProfileFilters/useProfileFilters.js

@@ -13,6 +13,91 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getPresetByKey, isPresetKey } from './filterPresets';
 import { useProfileFiltersUrlState } from './useProfileFiltersUrlState';
+const createStringCondition = (matchType, value) => ({
+    condition: matchType === 'equal'
+        ? { oneofKind: 'equal', equal: value }
+        : matchType === 'not_equal'
+            ? { oneofKind: 'notEqual', notEqual: value }
+            : matchType === 'contains'
+                ? { oneofKind: 'contains', contains: value }
+                : { oneofKind: 'notContains', notContains: value },
+});
+const createNumberCondition = (matchType, value) => ({
+    condition: matchType === 'equal'
+        ? { oneofKind: 'equal', equal: value }
+        : { oneofKind: 'notEqual', notEqual: value },
+});
+// Convert protobuf Filter[] back to ProfileFilter[] format for editing
+export const convertFromProtoFilters = (protoFilters) => {
+    const profileFilters = [];
+    for (const [index, protoFilter] of protoFilters.entries()) {
+        if (protoFilter?.filter == null)
+            continue;
+        const filter = protoFilter.filter;
+        let type;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let criteria;
+        if (filter.oneofKind === 'stackFilter' &&
+            filter.stackFilter?.filter?.oneofKind === 'criteria') {
+            type = 'stack';
+            criteria = filter.stackFilter.filter.criteria;
+        }
+        else if (filter.oneofKind === 'frameFilter' &&
+            filter.frameFilter?.filter?.oneofKind === 'criteria') {
+            type = 'frame';
+            criteria = filter.frameFilter.filter.criteria;
+        }
+        else {
+            continue;
+        }
+        for (const [fieldName, condition] of Object.entries(criteria)) {
+            if (condition === undefined || typeof condition !== 'object')
+                continue;
+            const conditionObj = condition;
+            if (conditionObj.condition?.oneofKind === undefined)
+                continue;
+            let matchType;
+            let value;
+            switch (conditionObj.condition.oneofKind) {
+                case 'equal':
+                    matchType = 'equal';
+                    value = String(conditionObj.condition.equal);
+                    break;
+                case 'notEqual':
+                    matchType = 'not_equal';
+                    value = String(conditionObj.condition.notEqual);
+                    break;
+                case 'contains':
+                    matchType = 'contains';
+                    value = conditionObj.condition.contains ?? '';
+                    break;
+                case 'notContains':
+                    matchType = 'not_contains';
+                    value = conditionObj.condition.notContains ?? '';
+                    break;
+                default:
+                    continue;
+            }
+            const fieldMap = {
+                functionName: 'function_name',
+                binary: 'binary',
+                systemName: 'system_name',
+                filename: 'filename',
+                address: 'address',
+                lineNumber: 'line_number',
+            };
+            const field = fieldMap[fieldName] ?? fieldName;
+            profileFilters.push({
+                id: `parsed-${index}-${fieldName}`,
+                type: type,
+                field: field,
+                matchType: matchType,
+                value,
+            });
+        }
+    }
+    return profileFilters;
+};
 // Convert ProfileFilter[] to protobuf Filter[] matching the expected structure
 export const convertToProtoFilters = (profileFilters) => {
     // First, expand any preset filters to their constituent filters
@@ -41,26 +126,9 @@ export const convertToProtoFilters = (profileFilters) => {
         .map(f => {
         // Build the condition based on field type
         const isNumberField = f.field === 'address' || f.field === 'line_number';
-        let condition;
-        if (isNumberField) {
-            const numValue = BigInt(f.value);
-            condition = {
-                condition: f.matchType === 'equal'
-                    ? { oneofKind: 'equal', equal: numValue }
-                    : { oneofKind: 'notEqual', notEqual: numValue },
-            };
-        }
-        else {
-            condition = {
-                condition: f.matchType === 'equal'
-                    ? { oneofKind: 'equal', equal: f.value }
-                    : f.matchType === 'not_equal'
-                        ? { oneofKind: 'notEqual', notEqual: f.value }
-                        : f.matchType === 'contains'
-                            ? { oneofKind: 'contains', contains: f.value }
-                            : { oneofKind: 'notContains', notContains: f.value },
-            };
-        }
+        const condition = isNumberField
+            ? createNumberCondition(f.matchType, BigInt(f.value))
+            : createStringCondition(f.matchType, f.value);
         // Create FilterCriteria
         const criteria = {};
         switch (f.field) {

package/dist/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProfileFiltersUrlState.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts"],"names":[],"mappings":"AAaA,OAAO,EAAoB,KAAK,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAIjF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAsDvD,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,KAAG,aAAa,EAuCnE,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAO;IAC3C,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,EAAE,sBAAsB,CAAC,aAAa,EAAE,CAAC,CAAC;CAoB5D,CAAC"}
+{"version":3,"file":"useProfileFiltersUrlState.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts"],"names":[],"mappings":"AAeA,OAAO,EAAoB,KAAK,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAIjF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAoEvD,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,KAAG,aAAa,EAgDnE,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAO;IAC3C,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,EAAE,sBAAsB,CAAC,aAAa,EAAE,CAAC,CAAC;CAwB5D,CAAC"}

package/dist/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.js

@@ -10,6 +10,7 @@
 // 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 { useMemo } from 'react';
 import { useURLStateCustom } from '@parca/components';
 import { safeDecode } from '@parca/utilities';
 import { isPresetKey } from './filterPresets';
@@ -58,6 +59,16 @@ const encodeProfileFilters = (filters) => {
     })
         .join(',');
 };
+const generateFilterId = (filter, index) => {
+    const parts = [
+        filter.type ?? '',
+        filter.field ?? '',
+        filter.matchType ?? '',
+        filter.value,
+        index.toString(),
+    ];
+    return `filter-${parts.join('-').replace(/[^a-zA-Z0-9-]/g, '_')}`;
+};
 // Decode filters from compact string format
 export const decodeProfileFilters = (encoded) => {
     if (encoded === '' || encoded === undefined)
@@ -71,8 +82,9 @@ export const decodeProfileFilters = (encoded) => {
             if (parts[0] === 'p' && parts.length >= 3) {
                 const presetKey = parts[1];
                 const value = parts.slice(2).join(':'); // Handle values with colons
+                const filterData = { type: presetKey, value };
                 return {
-                    id: `filter-${Date.now()}-${index}`,
+                    id: generateFilterId(filterData, index),
                     type: presetKey,
                     value,
                 };
@@ -81,7 +93,12 @@ export const decodeProfileFilters = (encoded) => {
             const [type, field, match, ...valueParts] = parts;
             const value = valueParts.join(':'); // Handle values with colons
             const decodedFilter = {
-                id: `filter-${Date.now()}-${index}`,
+                id: generateFilterId({
+                    type: TYPE_MAP_REVERSE[type],
+                    field: FIELD_MAP_REVERSE[field],
+                    matchType: MATCH_MAP_REVERSE[match],
+                    value,
+                }, index),
                 type: TYPE_MAP_REVERSE[type],
                 field: FIELD_MAP_REVERSE[field],
                 matchType: MATCH_MAP_REVERSE[match],
@@ -105,8 +122,11 @@ export const useProfileFiltersUrlState = () => {
         },
         defaultValue: [],
     });
+    const memoizedAppliedFilters = useMemo(() => {
+        return appliedFilters ?? [];
+    }, [appliedFilters]);
     return {
-        appliedFilters: appliedFilters ?? [],
+        appliedFilters: memoizedAppliedFilters,
         setAppliedFilters,
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ViewMatchers/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAMpC,UAAU,KAAK;IACb,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqKjC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ViewMatchers/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAMpC,UAAU,KAAK;IACb,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyKjC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ViewMatchers/index.js

@@ -44,6 +44,9 @@ const ViewMatchers = ({ labelNames, profileType, queryClient, runQuery, setMatch
     useEffect(() => {
         runQueryRef.current = runQuery;
     }, [runQuery]);
+    useEffect(() => {
+        selectionsRef.current = initialSelections;
+    }, [initialSelections]);
     const fetchLabelValues = useCallback(async (labelName) => {
         try {
             const response = await queryClient.values({

package/dist/index.d.ts

@@ -4,13 +4,14 @@ import ProfileTypeSelector from './ProfileTypeSelector';
 import CustomSelect from './SimpleMatchers/Select';
 export * from './ProfileFlameGraph';
 export * from './ProfileSource';
-export { convertToProtoFilters } from './ProfileView/components/ProfileFilters/useProfileFilters';
+export { convertToProtoFilters, convertFromProtoFilters, } from './ProfileView/components/ProfileFilters/useProfileFilters';
 export * from './ProfileView';
 export * from './ProfileViewWithData';
 export * from './utils';
 export * from './ProfileTypeSelector';
 export * from './SourceView';
 export * from './ProfileMetricsGraph';
+export * from './useSumBy';
 export { default as ProfileFilters } from './ProfileView/components/ProfileFilters';
 export { useProfileFiltersUrlState } from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
 export declare const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: {

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,eAAe,EAAE,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAC,qBAAqB,EAAC,MAAM,2DAA2D,CAAC;AAChG,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAC,yBAAyB,EAAC,MAAM,mEAAmE,CAAC;AAE5G,eAAO,MAAM,qCAAqC;;CAEjD,CAAC;AAEF,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,YAAY,EAAE,aAAa,EAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,eAAe,EAAE,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EACL,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,2DAA2D,CAAC;AACnE,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAC,yBAAyB,EAAC,MAAM,mEAAmE,CAAC;AAE5G,eAAO,MAAM,qCAAqC;;CAEjD,CAAC;AAEF,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,YAAY,EAAE,aAAa,EAAC,CAAC"}

package/dist/index.js

@@ -16,13 +16,14 @@ import ProfileTypeSelector from './ProfileTypeSelector';
 import CustomSelect from './SimpleMatchers/Select';
 export * from './ProfileFlameGraph';
 export * from './ProfileSource';
-export { convertToProtoFilters } from './ProfileView/components/ProfileFilters/useProfileFilters';
+export { convertToProtoFilters, convertFromProtoFilters, } from './ProfileView/components/ProfileFilters/useProfileFilters';
 export * from './ProfileView';
 export * from './ProfileViewWithData';
 export * from './utils';
 export * from './ProfileTypeSelector';
 export * from './SourceView';
 export * from './ProfileMetricsGraph';
+export * from './useSumBy';
 export { default as ProfileFilters } from './ProfileView/components/ProfileFilters';
 export { useProfileFiltersUrlState } from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
 export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.41",
+  "version": "0.19.42",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
@@ -79,5 +79,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "955b455bf184681c297d1a2af7917fbeadfa9049"
+  "gitHead": "3d789485ed269766c55c137aee80bad8c68dd351"
 }

package/src/ProfileView/components/ProfileFilters/useProfileFilters.ts

@@ -13,7 +13,7 @@
 
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
-import {type Filter} from '@parca/client';
+import {type Filter, type NumberCondition, type StringCondition} from '@parca/client';
 
 import {getPresetByKey, isPresetKey} from './filterPresets';
 import {useProfileFiltersUrlState} from './useProfileFiltersUrlState';
@@ -26,6 +26,106 @@ export interface ProfileFilter {
   value: string;
 }
 
+const createStringCondition = (matchType: string, value: string): StringCondition => ({
+  condition:
+    matchType === 'equal'
+      ? {oneofKind: 'equal' as const, equal: value}
+      : matchType === 'not_equal'
+      ? {oneofKind: 'notEqual' as const, notEqual: value}
+      : matchType === 'contains'
+      ? {oneofKind: 'contains' as const, contains: value}
+      : {oneofKind: 'notContains' as const, notContains: value},
+});
+
+const createNumberCondition = (matchType: string, value: bigint): NumberCondition => ({
+  condition:
+    matchType === 'equal'
+      ? {oneofKind: 'equal' as const, equal: value}
+      : {oneofKind: 'notEqual' as const, notEqual: value},
+});
+
+// Convert protobuf Filter[] back to ProfileFilter[] format for editing
+export const convertFromProtoFilters = (protoFilters: Filter[]): ProfileFilter[] => {
+  const profileFilters: ProfileFilter[] = [];
+
+  for (const [index, protoFilter] of protoFilters.entries()) {
+    if (protoFilter?.filter == null) continue;
+
+    const filter = protoFilter.filter;
+    let type: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let criteria: Record<string, any>;
+
+    if (
+      filter.oneofKind === 'stackFilter' &&
+      filter.stackFilter?.filter?.oneofKind === 'criteria'
+    ) {
+      type = 'stack';
+      criteria = filter.stackFilter.filter.criteria;
+    } else if (
+      filter.oneofKind === 'frameFilter' &&
+      filter.frameFilter?.filter?.oneofKind === 'criteria'
+    ) {
+      type = 'frame';
+      criteria = filter.frameFilter.filter.criteria;
+    } else {
+      continue;
+    }
+
+    for (const [fieldName, condition] of Object.entries(criteria)) {
+      if (condition === undefined || typeof condition !== 'object') continue;
+
+      const conditionObj = condition;
+      if (conditionObj.condition?.oneofKind === undefined) continue;
+
+      let matchType: string;
+      let value: string;
+
+      switch (conditionObj.condition.oneofKind) {
+        case 'equal':
+          matchType = 'equal';
+          value = String(conditionObj.condition.equal);
+          break;
+        case 'notEqual':
+          matchType = 'not_equal';
+          value = String(conditionObj.condition.notEqual);
+          break;
+        case 'contains':
+          matchType = 'contains';
+          value = conditionObj.condition.contains ?? '';
+          break;
+        case 'notContains':
+          matchType = 'not_contains';
+          value = conditionObj.condition.notContains ?? '';
+          break;
+        default:
+          continue;
+      }
+
+      const fieldMap: Record<string, string> = {
+        functionName: 'function_name',
+        binary: 'binary',
+        systemName: 'system_name',
+        filename: 'filename',
+        address: 'address',
+        lineNumber: 'line_number',
+      };
+
+      const field = fieldMap[fieldName] ?? fieldName;
+
+      profileFilters.push({
+        id: `parsed-${index}-${fieldName}`,
+        type: type as ProfileFilter['type'],
+        field: field as ProfileFilter['field'],
+        matchType: matchType as ProfileFilter['matchType'],
+        value,
+      });
+    }
+  }
+
+  return profileFilters;
+};
+
 // Convert ProfileFilter[] to protobuf Filter[] matching the expected structure
 export const convertToProtoFilters = (profileFilters: ProfileFilter[]): Filter[] => {
   // First, expand any preset filters to their constituent filters
@@ -56,30 +156,12 @@ export const convertToProtoFilters = (profileFilters: ProfileFilter[]): Filter[]
       // Build the condition based on field type
       const isNumberField = f.field === 'address' || f.field === 'line_number';
 
-      let condition: any;
-      if (isNumberField) {
-        const numValue = BigInt(f.value);
-        condition = {
-          condition:
-            f.matchType === 'equal'
-              ? {oneofKind: 'equal' as const, equal: numValue}
-              : {oneofKind: 'notEqual' as const, notEqual: numValue},
-        };
-      } else {
-        condition = {
-          condition:
-            f.matchType === 'equal'
-              ? {oneofKind: 'equal' as const, equal: f.value}
-              : f.matchType === 'not_equal'
-              ? {oneofKind: 'notEqual' as const, notEqual: f.value}
-              : f.matchType === 'contains'
-              ? {oneofKind: 'contains' as const, contains: f.value}
-              : {oneofKind: 'notContains' as const, notContains: f.value},
-        };
-      }
+      const condition: StringCondition | NumberCondition = isNumberField
+        ? createNumberCondition(f.matchType as string, BigInt(f.value))
+        : createStringCondition(f.matchType as string, f.value);
 
       // Create FilterCriteria
-      const criteria: any = {};
+      const criteria: Record<string, StringCondition | NumberCondition> = {};
       switch (f.field) {
         case 'function_name':
           criteria.functionName = condition;

package/src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {useMemo} from 'react';
+
 import {useURLStateCustom, type ParamValueSetterCustom} from '@parca/components';
 import {safeDecode} from '@parca/utilities';
 
@@ -68,6 +70,20 @@ const encodeProfileFilters = (filters: ProfileFilter[]): string => {
     .join(',');
 };
 
+const generateFilterId = (
+  filter: {type?: string; field?: string; matchType?: string; value: string},
+  index: number
+): string => {
+  const parts = [
+    filter.type ?? '',
+    filter.field ?? '',
+    filter.matchType ?? '',
+    filter.value,
+    index.toString(),
+  ];
+  return `filter-${parts.join('-').replace(/[^a-zA-Z0-9-]/g, '_')}`;
+};
+
 // Decode filters from compact string format
 export const decodeProfileFilters = (encoded: string): ProfileFilter[] => {
   if (encoded === '' || encoded === undefined) return [];
@@ -84,8 +100,9 @@ export const decodeProfileFilters = (encoded: string): ProfileFilter[] => {
         const presetKey = parts[1];
         const value = parts.slice(2).join(':'); // Handle values with colons
 
+        const filterData = {type: presetKey, value};
         return {
-          id: `filter-${Date.now()}-${index}`,
+          id: generateFilterId(filterData, index),
           type: presetKey,
           value,
         };
@@ -96,7 +113,15 @@ export const decodeProfileFilters = (encoded: string): ProfileFilter[] => {
       const value = valueParts.join(':'); // Handle values with colons
 
       const decodedFilter = {
-        id: `filter-${Date.now()}-${index}`,
+        id: generateFilterId(
+          {
+            type: TYPE_MAP_REVERSE[type],
+            field: FIELD_MAP_REVERSE[field],
+            matchType: MATCH_MAP_REVERSE[match],
+            value,
+          },
+          index
+        ),
         type: TYPE_MAP_REVERSE[type] as ProfileFilter['type'],
         field: FIELD_MAP_REVERSE[field] as ProfileFilter['field'],
         matchType: MATCH_MAP_REVERSE[match] as ProfileFilter['matchType'],
@@ -128,8 +153,12 @@ export const useProfileFiltersUrlState = (): {
     }
   );
 
+  const memoizedAppliedFilters = useMemo(() => {
+    return appliedFilters ?? [];
+  }, [appliedFilters]);
+
   return {
-    appliedFilters: appliedFilters ?? [],
+    appliedFilters: memoizedAppliedFilters,
     setAppliedFilters,
   };
 };

package/src/ViewMatchers/index.tsx

@@ -78,6 +78,10 @@ const ViewMatchers: React.FC<Props> = ({
     runQueryRef.current = runQuery;
   }, [runQuery]);
 
+  useEffect(() => {
+    selectionsRef.current = initialSelections;
+  }, [initialSelections]);
+
   const fetchLabelValues = useCallback(
     async (labelName: string): Promise<string[]> => {
       try {

package/src/index.tsx

@@ -18,13 +18,17 @@ import CustomSelect from './SimpleMatchers/Select';
 
 export * from './ProfileFlameGraph';
 export * from './ProfileSource';
-export {convertToProtoFilters} from './ProfileView/components/ProfileFilters/useProfileFilters';
+export {
+  convertToProtoFilters,
+  convertFromProtoFilters,
+} from './ProfileView/components/ProfileFilters/useProfileFilters';
 export * from './ProfileView';
 export * from './ProfileViewWithData';
 export * from './utils';
 export * from './ProfileTypeSelector';
 export * from './SourceView';
 export * from './ProfileMetricsGraph';
+export * from './useSumBy';
 
 export {default as ProfileFilters} from './ProfileView/components/ProfileFilters';
 export {useProfileFiltersUrlState} from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';