@parca/profile 0.19.19 → 0.19.21

package/dist/useQuery.js

@@ -10,11 +10,15 @@
 // 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 { useGrpcMetadata } from '@parca/components';
 import useGrpcQuery from './useGrpcQuery';
 export const useQuery = (client, profileSource, reportType, options) => {
     const { skip = false } = options ?? {};
     const metadata = useGrpcMetadata();
+    const protoFiltersKey = useMemo(() => {
+        return JSON.stringify(options?.protoFilters ?? []);
+    }, [options?.protoFilters]);
     const { data, isLoading, error } = useGrpcQuery({
         key: [
             'query',
@@ -26,9 +30,8 @@ export const useQuery = (client, profileSource, reportType, options) => {
             options?.sourceOnly,
             options?.sourceOnly === true ? '' : options?.sourceFilename,
             options?.invertCallStack ?? false,
-            options?.binaryFrameFilter ?? '',
-            profileSource.excludeFunction ?? false,
             options?.sandwichByFunction ?? '',
+            protoFiltersKey,
         ],
         queryFn: async () => {
             const req = profileSource.QueryRequest();
@@ -45,49 +48,13 @@ export const useQuery = (client, profileSource, reportType, options) => {
                 };
             }
             req.invertCallStack = options?.invertCallStack ?? false;
-            // Handle filter from ProfileSource (filter by function toolbar)
-            const functionToFilter = req.filterQuery;
-            if (functionToFilter !== undefined && functionToFilter !== '') {
-                req.filter = [
-                    ...req.filter,
-                    {
-                        filter: {
-                            oneofKind: 'stackFilter',
-                            stackFilter: {
-                                filter: {
-                                    oneofKind: 'functionNameStackFilter',
-                                    functionNameStackFilter: {
-                                        functionToFilter,
-                                        exclude: profileSource.excludeFunction ?? false,
-                                    },
-                                },
-                            },
-                        },
-                    },
-                ];
+            if (options?.protoFilters != null && options?.protoFilters?.length > 0) {
+                req.filter = options.protoFilters;
             }
             // Handle sandwich view filter separately
             if (options?.sandwichByFunction !== undefined) {
                 req.sandwichByFunction = options.sandwichByFunction;
             }
-            if (options?.binaryFrameFilter !== undefined && options?.binaryFrameFilter.length > 0) {
-                req.filter = [
-                    ...req.filter,
-                    {
-                        filter: {
-                            oneofKind: 'frameFilter',
-                            frameFilter: {
-                                filter: {
-                                    oneofKind: 'binaryFrameFilter',
-                                    binaryFrameFilter: {
-                                        includeBinaries: options?.binaryFrameFilter ?? [],
-                                    },
-                                },
-                            },
-                        },
-                    },
-                ];
-            }
             try {
                 const { response } = await client.query(req, { meta: metadata });
                 return response;

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.19",
+  "version": "0.19.21",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "0.17.2",
-    "@parca/components": "0.16.348",
+    "@parca/client": "0.17.3",
+    "@parca/components": "0.16.350",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.93",
+    "@parca/hooks": "0.0.95",
     "@parca/icons": "0.16.72",
     "@parca/parser": "0.16.79",
-    "@parca/store": "0.16.177",
-    "@parca/utilities": "0.0.102",
+    "@parca/store": "0.16.179",
+    "@parca/utilities": "0.0.104",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -78,5 +78,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "55c867baa7c927d7184bc4811b0543f641d09633"
+  "gitHead": "7413b38e28af33df4787abb9ca34e259ca9c5014"
 }

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -61,8 +61,6 @@ const ProfileExplorerCompare = ({
   };
 
   const [compareAbsolute] = useURLState('compare_absolute');
-  const [functionFilter] = useURLState('filter_by_function');
-  const [excludeFunction] = useURLState('exclude_function');
 
   return (
     <>
@@ -109,8 +107,6 @@ const ProfileExplorerCompare = ({
                 new ProfileDiffSource(
                   profileA.ProfileSource(),
                   profileB.ProfileSource(),
-                  Array.isArray(functionFilter) ? functionFilter[0] : functionFilter,
-                  excludeFunction === 'true',
                   compareAbsolute === 'true'
                 )
               }

package/src/ProfileExplorer/index.tsx

@@ -156,8 +156,6 @@ const ProfileExplorerApp = ({
     time_selection_b,
     compare_b,
     sum_by_b,
-    filter_by_function,
-    exclude_function,
   } = queryParams;
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -188,14 +186,12 @@ const ProfileExplorerApp = ({
     const profileA = ProfileSelectionFromParams(
       mergeFrom as string,
       mergeTo as string,
-      selection_a,
-      filter_by_function as string,
-      exclude_function === 'true'
+      selection_a
     );
 
     setProfileA(profileA);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [merge_from_a, merge_to_a, selection_a, filter_by_function, exclude_function]);
+  }, [merge_from_a, merge_to_a, selection_a]);
 
   useEffect(() => {
     const mergeFrom = merge_from_b ?? undefined;
@@ -203,14 +199,12 @@ const ProfileExplorerApp = ({
     const profileB = ProfileSelectionFromParams(
       mergeFrom as string,
       mergeTo as string,
-      selection_b,
-      filter_by_function as string,
-      exclude_function === 'true'
+      selection_b
     );
 
     setProfileB(profileB);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [merge_from_b, merge_to_b, selection_b, filter_by_function, exclude_function]);
+  }, [merge_from_b, merge_to_b, selection_b]);
 
   if (profileTypesLoading) {
     return <>{loader}</>;
@@ -352,7 +346,6 @@ const ProfileExplorerApp = ({
           to_a: q.to.toString(),
           time_selection_a: q.timeSelection,
           sum_by_a: sumByToParam(q.sumBy),
-          filter_by_function: filter_by_function ?? '',
           ...mergeParams,
         },
       })
@@ -383,7 +376,6 @@ const ProfileExplorerApp = ({
           to_b: q.to.toString(),
           time_selection_b: q.timeSelection,
           sum_by_b: sumByToParam(q.sumBy),
-          filter_by_function: filter_by_function ?? '',
           ...mergeParams,
         },
       })
@@ -401,7 +393,6 @@ const ProfileExplorerApp = ({
       ...{
         compare_a: 'false',
         compare_b: 'false',
-        search_string: '',
       },
     });
   };

package/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx

@@ -82,7 +82,6 @@ const ContextMenu = ({
     inlined,
   } = useGraphTooltipMetaInfo({table, row});
 
-  const [_, setSearchString] = useURLState<string | undefined>('search_string');
   const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
     alwaysReturnArray: true,
   });
@@ -173,7 +172,6 @@ const ContextMenu = ({
       <Item
         id="show-in-table"
         onClick={() => {
-          setSearchString(functionName);
           if (isSandwich) {
             setDashboardItems(['table']);
           } else {

package/src/ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.tsx

@@ -17,7 +17,6 @@ import {Table} from 'apache-arrow';
 import cx from 'classnames';
 
 import {selectBinaries, useAppSelector} from '@parca/store';
-import {isSearchMatch} from '@parca/utilities';
 
 import 'react-contexify/dist/ReactContexify.css';
 
@@ -49,7 +48,6 @@ export interface FlameNodeProps {
   row: number;
   colors: colorByColors;
   colorBy: string;
-  searchString?: string;
   darkMode: boolean;
   compareMode: boolean;
   onContextMenu: (e: React.MouseEvent, row: number) => void;
@@ -86,7 +84,6 @@ export const FlameNode = React.memo(function FlameNodeNoMemo({
   colorBy,
   height,
   totalWidth,
-  searchString,
   darkMode,
   compareMode,
   colorForSimilarNodes,
@@ -151,13 +148,6 @@ export const FlameNode = React.memo(function FlameNodeNoMemo({
     return row === 0 ? 'root' : nodeLabel(table, row, binaries.length > 1);
   }, [table, row, binaries]);
 
-  const {isHighlightEnabled = false, isHighlighted = false} = useMemo(() => {
-    if (searchString === undefined || searchString === '') {
-      return {isHighlightEnabled: false};
-    }
-    return {isHighlightEnabled: true, isHighlighted: isSearchMatch(searchString, name)};
-  }, [searchString, name]);
-
   // Hide frames beyond effective depth limit
   if (effectiveDepth !== undefined && depth > effectiveDepth) {
     return <></>;
@@ -279,10 +269,7 @@ export const FlameNode = React.memo(function FlameNodeNoMemo({
           className={cx(
             shouldBeHighlighted
               ? `${colorForSimilarNodes} stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6`
-              : 'stroke-white dark:stroke-gray-700',
-            {
-              'opacity-50': isHighlightEnabled && !isHighlighted,
-            }
+              : 'stroke-white dark:stroke-gray-700'
           )}
         />
         {width > 5 && (

package/src/ProfileFlameGraph/FlameGraphArrow/index.tsx

@@ -32,6 +32,7 @@ import {getColorForFeature, selectDarkMode, useAppSelector} from '@parca/store';
 import {getLastItem, type ColorConfig} from '@parca/utilities';
 
 import {ProfileSource} from '../../ProfileSource';
+import {useProfileFilters} from '../../ProfileView/components/ProfileFilters/useProfileFilters';
 import {useProfileViewContext} from '../../ProfileView/context/ProfileViewContext';
 import ContextMenuWrapper, {ContextMenuWrapperRef} from './ContextMenuWrapper';
 import {FlameNode, RowHeight, colorByColors} from './FlameGraphNodes';
@@ -139,7 +140,6 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
   curPath,
   profileType,
   profileSource,
-  mappingsListFromMetadata,
   compareAbsolute,
   isFlameChart = false,
   isRenderedAsFlamegraph = false,
@@ -195,9 +195,8 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
     setSvgElement(svg.current);
   }, [tooltipId]);
 
-  const [binaryFrameFilter, setBinaryFrameFilter] = useURLState('binary_frame_filter');
+  const {excludeBinary} = useProfileFilters();
 
-  const [currentSearchString] = useURLState('search_string');
   const {compareMode} = useProfileViewContext();
   const currentColorProfile = useCurrentColorProfile();
   const colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
@@ -276,18 +275,8 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
   );
 
   const hideBinary = (binaryToRemove: string): void => {
-    // second/subsequent time filtering out a binary i.e. a binary has already been hidden
-    // and we want to hide more binaries, we simply remove the binary from the binaryFrameFilter array in the URL.
-    if (Array.isArray(binaryFrameFilter) && binaryFrameFilter.length > 0) {
-      const newMappingsList = binaryFrameFilter.filter(mapping => mapping !== binaryToRemove);
-
-      setBinaryFrameFilter(newMappingsList);
-      return;
-    }
-
-    // first time hiding a binary
-    const newMappingsList = mappingsListFromMetadata.filter(mapping => mapping !== binaryToRemove);
-    setBinaryFrameFilter(newMappingsList);
+    // Add a new frame filter to hide this binary using the new ProfileFilters system
+    excludeBinary(binaryToRemove);
   };
 
   const handleRowClick = (row: number): void => {
@@ -386,7 +375,6 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
               colorBy={colorByValue}
               totalWidth={width ?? 1}
               height={RowHeight}
-              searchString={(currentSearchString as string) ?? ''}
               darkMode={isDarkMode}
               compareMode={compareMode}
               colorForSimilarNodes={colorForSimilarNodes}

package/src/ProfileSelector/useAutoQuerySelector.ts

@@ -58,8 +58,7 @@ export const useAutoQuerySelector = ({
       const profileA = ProfileSelectionFromParams(
         querySelection.mergeFrom?.toString(),
         querySelection.mergeTo?.toString(),
-        querySelection.expression,
-        ''
+        querySelection.expression
       );
       const queryA = {
         expression: querySelection.expression,

package/src/ProfileSource.tsx

@@ -27,7 +27,6 @@ export interface ProfileSource {
   ProfileType: () => ProfileType;
   DiffSelection: () => ProfileDiffSelection;
   toString: (timezone?: string) => string;
-  excludeFunction?: boolean;
 }
 
 export interface ProfileSelection {
@@ -62,9 +61,7 @@ export function SuffixParams(params: {[key: string]: any}, suffix: string): {[ke
 export function ProfileSelectionFromParams(
   mergeFrom: string | undefined,
   mergeTo: string | undefined,
-  selection: string | undefined,
-  filterQuery?: string,
-  excludeFunction?: boolean
+  selection: string | undefined
 ): ProfileSelection | null {
   if (
     mergeFrom !== undefined &&
@@ -85,9 +82,7 @@ export function ProfileSelectionFromParams(
     return new MergedProfileSelection(
       parseInt(mergeFrom),
       parseInt(mergeTo),
-      Query.parse(selection),
-      filterQuery,
-      excludeFunction
+      Query.parse(selection)
     );
   }
 
@@ -98,29 +93,13 @@ export class MergedProfileSelection implements ProfileSelection {
   mergeFrom: number;
   mergeTo: number;
   query: Query;
-  filterQuery: string | undefined;
-  excludeFunction: boolean | undefined;
   profileSource: ProfileSource;
 
-  constructor(
-    mergeFrom: number,
-    mergeTo: number,
-    query: Query,
-    filterQuery?: string,
-    excludeFunction?: boolean
-  ) {
+  constructor(mergeFrom: number, mergeTo: number, query: Query) {
     this.mergeFrom = mergeFrom;
     this.mergeTo = mergeTo;
     this.query = query;
-    this.filterQuery = filterQuery;
-    this.excludeFunction = excludeFunction;
-    this.profileSource = new MergedProfileSource(
-      this.mergeFrom,
-      this.mergeTo,
-      this.query,
-      this.filterQuery,
-      this.excludeFunction
-    );
+    this.profileSource = new MergedProfileSource(this.mergeFrom, this.mergeTo, this.query);
   }
 
   ProfileName(): string {
@@ -147,22 +126,12 @@ export class MergedProfileSelection implements ProfileSelection {
 export class ProfileDiffSource implements ProfileSource {
   a: ProfileSource;
   b: ProfileSource;
-  filterQuery: string | undefined;
-  excludeFunction: boolean | undefined;
   profileType: ProfileType;
   absolute?: boolean;
 
-  constructor(
-    a: ProfileSource,
-    b: ProfileSource,
-    filterQuery?: string,
-    excludeFunction?: boolean,
-    absolute?: boolean
-  ) {
+  constructor(a: ProfileSource, b: ProfileSource, absolute?: boolean) {
     this.a = a;
     this.b = b;
-    this.filterQuery = filterQuery;
-    this.excludeFunction = excludeFunction;
     this.profileType = a.ProfileType();
     this.absolute = absolute;
   }
@@ -183,7 +152,6 @@ export class ProfileDiffSource implements ProfileSource {
       },
       reportType: QueryRequest_ReportType.FLAMEGRAPH_ARROW,
       mode: QueryRequest_Mode.DIFF,
-      filterQuery: this.filterQuery,
       filter: [],
     };
   }
@@ -216,22 +184,12 @@ export class MergedProfileSource implements ProfileSource {
   mergeFrom: number;
   mergeTo: number;
   query: Query;
-  filterQuery: string | undefined;
-  excludeFunction: boolean | undefined;
   profileType: ProfileType;
 
-  constructor(
-    mergeFrom: number,
-    mergeTo: number,
-    query: Query,
-    filterQuery?: string,
-    excludeFunction?: boolean
-  ) {
+  constructor(mergeFrom: number, mergeTo: number, query: Query) {
     this.mergeFrom = mergeFrom;
     this.mergeTo = mergeTo;
     this.query = query;
-    this.filterQuery = filterQuery;
-    this.excludeFunction = excludeFunction;
     this.profileType = ProfileType.fromString(Query.parse(this.query.toString()).profileName());
   }
 
@@ -261,7 +219,6 @@ export class MergedProfileSource implements ProfileSource {
       },
       reportType: QueryRequest_ReportType.FLAMEGRAPH_ARROW,
       mode: QueryRequest_Mode.MERGE,
-      filterQuery: this.filterQuery,
       filter: [],
     };
   }

package/src/ProfileView/components/ColorStackLegend.tsx

@@ -22,6 +22,7 @@ import {EVERYTHING_ELSE, selectDarkMode, useAppSelector} from '@parca/store';
 
 import {getMappingColors} from '../../ProfileFlameGraph/FlameGraphArrow';
 import useMappingList from '../../ProfileFlameGraph/FlameGraphArrow/useMappingList';
+import {useProfileFilters} from './ProfileFilters/useProfileFilters';
 
 interface Props {
   mappings?: string[];
@@ -40,10 +41,16 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
 
   const colorBy = colorByValue === 'binary' || colorByValue === undefined ? 'binary' : 'filename';
 
-  const [currentSearchString, setSearchString] = useURLState<string[]>(`binary_frame_filter`, {
-    alwaysReturnArray: true,
-    defaultValue: [],
-  });
+  const {appliedFilters, removeExcludeBinary, excludeBinary} = useProfileFilters();
+
+  // Get current binary filters from the new ProfileFilters system
+  const currentBinaryFilters = useMemo(() => {
+    return (appliedFilters ?? [])
+      .filter(f => f.type === 'frame' && f.field === 'binary')
+      .map(f => f.value);
+  }, [appliedFilters]);
+
+  console.log('currentBinaryFilters', currentBinaryFilters);
 
   const mappingsList = useMappingList(mappings);
 
@@ -80,8 +87,7 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
     <div className="my-4 flex w-full flex-wrap justify-start column-gap-2">
       {stackColorArray.map(([feature, color]) => {
         const filteringAllowed = feature !== EVERYTHING_ELSE;
-        const isHighlighted =
-          currentSearchString !== undefined ? currentSearchString.includes(feature) : false;
+        const isHighlighted = currentBinaryFilters.includes(feature);
         return (
           <div
             key={feature}
@@ -97,10 +103,8 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
                 return;
               }
 
-              // Check if the current search string is defined and an array
-              const updatedSearchString = [...currentSearchString, feature]; // If array, append the feature
-
-              setSearchString(updatedSearchString);
+              // Remove the exclude filter for this binary
+              removeExcludeBinary(feature);
             }}
           >
             <div className="flex w-11/12 items-center justify-start">
@@ -119,8 +123,8 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
                 <Icon
                   icon="radix-icons:cross-circled"
                   onClick={e => {
-                    // remove the current feature from the search string array of strings
-                    setSearchString(currentSearchString.filter((f: string) => f !== feature));
+                    // Find and remove the filter for this binary
+                    excludeBinary(feature);
                     e.stopPropagation();
                   }}
                 />

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

@@ -44,8 +44,6 @@ interface GetDashboardItemProps {
   setNewCurPath: (path: string[]) => void;
   curPathArrow: CurrentPathFrame[];
   setNewCurPathArrow: (path: CurrentPathFrame[]) => void;
-  currentSearchString?: string;
-  setSearchString?: (value: string) => void;
   perf?: {
     onRender?: ProfilerOnRenderCallback;
   };
@@ -65,8 +63,6 @@ export const getDashboardItem = ({
   filtered,
   curPathArrow,
   setNewCurPathArrow,
-  currentSearchString,
-  setSearchString,
   perf,
   queryClient,
 }: GetDashboardItemProps): JSX.Element => {
@@ -138,8 +134,6 @@ export const getDashboardItem = ({
           data={topTableData.arrow?.record}
           unit={topTableData.unit}
           profileType={profileSource?.ProfileType()}
-          currentSearchString={currentSearchString}
-          setSearchString={setSearchString}
           isHalfScreen={isHalfScreen}
           metadataMappingFiles={flamegraphData.metadataMappingFiles}
         />

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

@@ -28,7 +28,7 @@ interface Props {
 
 const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.Element => {
   return (
-    <div>
+    <div className="flex flex-col">
       <div className="flex items-center justify-between">
         <label className="text-sm">Group by</label>
       </div>
@@ -40,7 +40,7 @@ const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.
         defaultValue={undefined}
         name="labels"
         options={labels.map(label => ({label, value: `${FIELD_LABELS}.${label}`}))}
-        className="parca-select-container text-sm w-full rounded-md bg-white"
+        className="parca-select-container text-sm rounded-md bg-white"
         classNamePrefix="parca-select"
         value={groupBy
           .filter(l => l.startsWith(FIELD_LABELS))
@@ -66,12 +66,25 @@ const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.
             borderRight: '1px solid #e2e8f0',
             borderLeft: '1px solid #e2e8f0',
             borderTop: '1px solid #e2e8f0',
+            minWidth: '156px',
+            width: 'max-content',
+            minHeight: '38px',
             ':hover': {
               borderColor: '#e2e8f0',
               borderBottomLeftRadius: 0,
               borderBottomRightRadius: 0,
             },
           }),
+          valueContainer: provided => ({
+            ...provided,
+            flexWrap: 'nowrap',
+            overflowX: 'auto',
+            padding: '2px 8px',
+          }),
+          multiValue: provided => ({
+            ...provided,
+            flex: '0 0 auto',
+          }),
           option: provided => ({
             ...provided,
             ':hover': {

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

@@ -22,7 +22,7 @@ const InvertCallStack = (): JSX.Element => {
   return (
     <Button
       variant="neutral"
-      className="flex items-center gap-2"
+      className="flex items-center gap-2 whitespace-nowrap"
       onClick={() => setInvertStack(isInvert ? '' : 'true')}
       id="h-invert-call-stack"
     >