@parca/profile 0.16.373 → 0.16.375

package/dist/useQuery.d.ts

@@ -13,10 +13,8 @@ interface UseQueryOptions {
     sourceBuildID?: string;
     sourceFilename?: string;
     sourceOnly?: boolean;
-    showRuntimeRuby?: boolean;
-    showRuntimePython?: boolean;
-    showInterpretedOnly?: boolean;
     invertCallStack?: boolean;
+    binaryFrameFilter?: string[];
 }
 export declare const useQuery: (client: QueryServiceClient, profileSource: ProfileSource, reportType: QueryRequest_ReportType, options?: UseQueryOptions) => IQueryResult;
 export {};

package/dist/useQuery.js

@@ -25,10 +25,8 @@ export const useQuery = (client, profileSource, reportType, options) => {
             options?.sourceBuildID,
             options?.sourceOnly,
             options?.sourceOnly === true ? '' : options?.sourceFilename,
-            options?.showRuntimeRuby ?? false,
-            options?.showRuntimePython ?? false,
-            options?.showInterpretedOnly ?? false,
             options?.invertCallStack ?? false,
+            options?.binaryFrameFilter ?? '',
         ],
         queryFn: async () => {
             const req = profileSource.QueryRequest();
@@ -44,12 +42,27 @@ export const useQuery = (client, profileSource, reportType, options) => {
                     sourceOnly: options?.sourceOnly ?? false,
                 };
             }
-            req.runtimeFilter = {
-                showRuby: options?.showRuntimeRuby ?? false,
-                showPython: options?.showRuntimePython ?? false,
-                showInterpretedOnly: options?.showInterpretedOnly ?? false,
-            };
             req.invertCallStack = options?.invertCallStack ?? false;
+            if (options?.binaryFrameFilter !== undefined && options?.binaryFrameFilter.length > 0) {
+                req.filter = [
+                    {
+                        filter: {
+                            oneofKind: 'frameFilter',
+                            frameFilter: {
+                                filter: {
+                                    oneofKind: 'binaryFrameFilter',
+                                    binaryFrameFilter: {
+                                        includeBinaries: options?.binaryFrameFilter ?? [],
+                                    },
+                                },
+                            },
+                        },
+                    },
+                ];
+            }
+            else {
+                req.filter = [];
+            }
             try {
                 const { response } = await client.query(req, { meta: metadata });
                 return response;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.373",
+  "version": "0.16.375",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "^0.16.114",
-    "@parca/components": "^0.16.277",
+    "@parca/client": "^0.16.115",
+    "@parca/components": "^0.16.278",
     "@parca/dynamicsize": "^0.16.65",
-    "@parca/hooks": "^0.0.56",
+    "@parca/hooks": "^0.0.57",
     "@parca/icons": "^0.16.69",
     "@parca/parser": "^0.16.74",
-    "@parca/store": "^0.16.145",
-    "@parca/utilities": "^0.0.73",
+    "@parca/store": "^0.16.146",
+    "@parca/utilities": "^0.0.74",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@tanstack/react-query": "^4.0.5",
@@ -71,5 +71,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "80826885820b5f15cc6559c47293cad10249f85f"
+  "gitHead": "1c9338c7294c1df88345032cee964653ce4e349b"
 }

package/src/GraphTooltipArrow/Content.tsx

@@ -201,11 +201,7 @@ const TooltipMetaInfo = ({
       <tr>
         <td className="w-1/4">Build Id</td>
         <td className="w-3/4 break-all">
-          {isMappingBuildIDAvailable ? (
-            <div>{truncateString(getLastItem(mappingBuildID) as string, 28)}</div>
-          ) : (
-            <NoData />
-          )}
+          {isMappingBuildIDAvailable ? <div>{truncateString(mappingBuildID, 28)}</div> : <NoData />}
         </td>
       </tr>
       {labelPairs.length > 0 && (

package/src/GraphTooltipArrow/DockedGraphTooltip/index.tsx

@@ -145,7 +145,7 @@ export const DockedGraphTooltip = ({
             title="Build ID"
             value={
               isMappingBuildIDAvailable ? (
-                <div>{truncateString(getLastItem(mappingBuildID) as string, 28)}</div>
+                <div>{truncateString(mappingBuildID, 28)}</div>
               ) : (
                 <NoData />
               )

package/src/ProfileIcicleGraph/IcicleGraph/useColoredGraph.ts

@@ -71,7 +71,7 @@ const colorNodes = (
         features
       );
     }
-    const feature = extractFeature(node, mappings, locations, strings, functions);
+    const feature = extractFeature(node, mappings, locations, strings);
     coloredNode.feature = feature.name;
     features[feature.name] = feature.type;
     return coloredNode;

package/src/ProfileIcicleGraph/IcicleGraph/utils.ts

@@ -91,14 +91,8 @@ export const extractFeature = (
   data: FlamegraphNode,
   mappings: Mapping[],
   locations: Location[],
-  strings: string[],
-  functions: ParcaFunction[]
+  strings: string[]
 ): Feature => {
-  const name = nodeLabel(data, strings, mappings, locations, functions, false).trim();
-  if (name.startsWith('runtime') || name === 'root') {
-    return {name: 'runtime', type: FEATURE_TYPES.Runtime};
-  }
-
   const binaryName = getBinaryName(data, mappings, locations, strings);
   if (binaryName != null) {
     return {name: binaryName, type: FEATURE_TYPES.Binary};

package/src/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.tsx

@@ -37,7 +37,10 @@ const ColorStackLegend = ({
   const [colorProfileName] = useUserPreference<string>(
     USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
   );
-  const [currentSearchString, setSearchString] = useURLState({param: 'search_string', navigateTo});
+  const [currentSearchString, setSearchString] = useURLState({
+    param: 'binary_frame_filter',
+    navigateTo,
+  });
 
   const stackColorArray = useMemo(() => {
     return Object.entries(mappingColors).sort(([featureA], [featureB]) => {
@@ -67,7 +70,8 @@ const ColorStackLegend = ({
     <div className="my-4 flex w-full flex-wrap justify-start">
       {stackColorArray.map(([feature, color]) => {
         const filteringAllowed = feature !== EVERYTHING_ELSE;
-        const isHighlighted = currentSearchString === feature;
+        const isHighlighted =
+          currentSearchString !== undefined ? currentSearchString.includes(feature) : false;
         return (
           <div
             key={feature}
@@ -79,14 +83,19 @@ const ColorStackLegend = ({
               }
             )}
             onClick={() => {
-              if (!filteringAllowed) {
+              if (!filteringAllowed || isHighlighted) {
                 return;
               }
-              if (isHighlighted) {
-                setSearchString('');
-                return;
-              }
-              setSearchString(feature);
+
+              // Check if the current search string is defined and an array
+              const updatedSearchString = Array.isArray(currentSearchString)
+                ? [...currentSearchString, feature] // If array, append the feature
+                : // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+                currentSearchString // If not array, preserve current value
+                ? currentSearchString.split(',') // If string, split by commas
+                : [feature]; // If undefined, initialize array with feature
+
+              setSearchString(updatedSearchString);
             }}
           >
             <div className="flex w-11/12 items-center justify-start">
@@ -102,7 +111,15 @@ const ColorStackLegend = ({
                 <Icon
                   icon="radix-icons:cross-circled"
                   onClick={e => {
-                    setSearchString('');
+                    let searchString: string[] = [];
+                    if (typeof currentSearchString === 'string') {
+                      searchString.push(currentSearchString);
+                    } else {
+                      searchString = currentSearchString;
+                    }
+
+                    // remove the current feature from the search string array of strings
+                    setSearchString(searchString.filter((f: string) => f !== feature));
                     e.stopPropagation();
                   }}
                 />

package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx

@@ -19,7 +19,7 @@ import {Tooltip} from 'react-tooltip';
 import {useParcaContext} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
-import {type NavigateFunction} from '@parca/utilities';
+import {getLastItem, type NavigateFunction} from '@parca/utilities';
 
 import {useGraphTooltip} from '../../GraphTooltipArrow/useGraphTooltip';
 import {useGraphTooltipMetaInfo} from '../../GraphTooltipArrow/useGraphTooltipMetaInfo';
@@ -38,6 +38,7 @@ interface ContextMenuProps {
   curPath: string[];
   setCurPath: (path: string[]) => void;
   hideMenu: () => void;
+  hideBinary: (binaryToRemove: string) => void;
 }
 
 const ContextMenu = ({
@@ -53,6 +54,7 @@ const ContextMenu = ({
   setCurPath,
   hideMenu,
   profileType,
+  hideBinary,
 }: ContextMenuProps): JSX.Element => {
   const {isDarkMode} = useParcaContext();
   const {enableSourcesView} = useParcaContext();
@@ -157,6 +159,24 @@ const ContextMenu = ({
           <div>Reset view</div>
         </div>
       </Item>
+      <Item
+        id="hide-binary"
+        onClick={() => hideBinary(getLastItem(mappingFile) as string)}
+        disabled={mappingFile === null || mappingFile === ''}
+      >
+        <div
+          data-tooltip-id="hide-binary-help"
+          data-tooltip-content="Hide all frames for this binary"
+        >
+          <div className="flex w-full items-center gap-2">
+            <Icon icon="bx:bxs-hide" />
+            <div>
+              Hide Binary {mappingFile !== null && `(${getLastItem(mappingFile) as string})`}
+            </div>
+          </div>
+        </div>
+        <Tooltip place="left" id="hide-binary-help" />
+      </Item>
       <Submenu
         label={
           <div className="flex w-full items-center gap-2">

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx

@@ -362,7 +362,6 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     diffPerSecond,
     mappingColors,
     mappingFile,
-    functionName,
   });
   const name = useMemo(() => {
     return isRoot ? 'root' : nodeLabel(table, row, level, binaries.length > 1);

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -13,10 +13,11 @@
 
 import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
-import {Dictionary, Table, Vector, tableFromIPC} from 'apache-arrow';
+import {Table, tableFromIPC} from 'apache-arrow';
 import {useContextMenu} from 'react-contexify';
 
 import {FlamegraphArrow} from '@parca/client';
+import {useURLState} from '@parca/components';
 import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
 import {
@@ -35,7 +36,7 @@ import {useProfileViewContext} from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import ContextMenu from './ContextMenu';
 import {IcicleNode, RowHeight, mappingColors} from './IcicleGraphNodes';
-import {arrowToString, extractFeature} from './utils';
+import {extractFeature} from './utils';
 
 export const FIELD_LABELS_ONLY = 'labels_only';
 export const FIELD_MAPPING_FILE = 'mapping_file';
@@ -64,6 +65,7 @@ interface IcicleGraphArrowProps {
   setCurPath: (path: string[]) => void;
   navigateTo?: NavigateFunction;
   sortBy: string;
+  mappings?: string[];
 }
 
 export const IcicleGraphArrow = memo(function IcicleGraphArrow({
@@ -76,6 +78,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   profileType,
   navigateTo,
   sortBy,
+  mappings,
 }: IcicleGraphArrowProps): React.JSX.Element {
   const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
   const dispatch = useAppDispatch();
@@ -96,68 +99,39 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   const svg = useRef(null);
   const ref = useRef<SVGGElement>(null);
 
+  const [binaryFrameFilter, setBinaryFrameFilter] = useURLState({
+    param: 'binary_frame_filter',
+    navigateTo,
+  });
+
   const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
   const {compareMode} = useProfileViewContext();
   const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
   const currentColorProfile = useCurrentColorProfile();
   const colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
 
-  const mappings = useMemo(() => {
-    // Read the mappings from the dictionary that contains all mapping strings.
-    // This is great, as might only have a dozen or so mappings,
-    // and don't need to read through all the rows (potentially thousands).
-    const mappingsDict: Vector<Dictionary> | null = table.getChild(FIELD_MAPPING_FILE);
-    const mappings =
-      mappingsDict?.data
-        .map(mapping => {
-          if (mapping.dictionary == null) {
-            return [];
-          }
-          const len = mapping.dictionary.length;
-          const entries: string[] = [];
-          for (let i = 0; i < len; i++) {
-            const fn = arrowToString(mapping.dictionary.get(i));
-            entries.push(getLastItem(fn) ?? '');
-          }
-          return entries;
+  const mappingsList = useMemo(() => {
+    const list =
+      mappings
+        ?.map(mapping => {
+          return getLastItem(mapping) as string;
         })
         .flat() ?? [];
 
     // We add a EVERYTHING ELSE mapping to the list.
-    mappings.push('');
-
-    // We look through the function names to find out if there's a runtime function.
-    // Again, we only read through the dictionary, which is much faster than reading through all the rows.
-    // We stop as soon as we find a runtime function.
-    const functionNamesDict: Vector<Dictionary> | null = table.getChild(FIELD_FUNCTION_NAME);
-    functionNamesDict?.data.forEach(fn => {
-      if (fn.dictionary == null) {
-        return;
-      }
-      const len = fn.dictionary.length;
-      for (let i = 0; i < len; i++) {
-        const fn: string | null = arrowToString(functionNamesDict?.get(i));
-        if (fn?.startsWith('runtime') === true) {
-          mappings.push('runtime');
-          break;
-        }
-      }
-    });
+    list.push('');
 
     // We sort the mappings alphabetically to make sure that the order is always the same.
-    mappings.sort((a, b) => a.localeCompare(b));
-    return mappings;
-  }, [table]);
+    list.sort((a, b) => a.localeCompare(b));
 
-  // TODO: Somehow figure out how to add runtime to this, if stacks are present.
-  // Potentially read the function name dictionary and check if it contains strings starting with runtime.
-  const mappingFeatures = useMemo(() => {
-    return mappings.map(mapping => extractFeature(mapping));
+    return list;
   }, [mappings]);
 
-  // TODO: Unify with mappingFeatures
   const mappingColors = useMemo(() => {
+    const mappingFeatures = mappingsList.map(mapping => extractFeature(mapping));
+
     const colors: mappingColors = {};
+
     Object.entries(mappingFeatures).forEach(([_, feature]) => {
       colors[feature.name] = getColorForFeature(
         feature.name,
@@ -165,8 +139,9 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
         currentColorProfile.colors
       );
     });
+
     return colors;
-  }, [isDarkMode, mappingFeatures, currentColorProfile]);
+  }, [mappingsList, isDarkMode, currentColorProfile]);
 
   useEffect(() => {
     if (ref.current != null) {
@@ -198,6 +173,21 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
     setIsContextMenuOpen(isVisible);
   };
 
+  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 = mappingsList.filter(mapping => mapping !== binaryToRemove);
+    setBinaryFrameFilter(newMappingsList);
+  };
+
   // useMemo for the root graph as it otherwise renders the whole graph if the hoveringRow changes.
   const root = useMemo(() => {
     return (
@@ -286,6 +276,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
           curPath={curPath}
           setCurPath={setCurPath}
           hideMenu={hideAll}
+          hideBinary={hideBinary}
         />
         {isColorStackLegendEnabled && (
           <ColorStackLegend

package/src/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.ts

@@ -26,7 +26,6 @@ interface Props {
   diff: bigint | null;
   diffPerSecond: number | null;
   mappingColors: mappingColors;
-  functionName: string | null;
   mappingFile: string | null;
 }
 
@@ -38,7 +37,6 @@ const useNodeColor = ({
   diff,
   diffPerSecond,
   mappingColors,
-  functionName,
   mappingFile,
 }: Props): string => {
   if (compareMode) {
@@ -49,12 +47,7 @@ const useNodeColor = ({
     return diffColor(diff ?? 0n, cumulative, isDarkMode);
   }
 
-  // To get the color we first check if the function name starts with 'runtime'.
-  // If it does, we color it as runtime. Otherwise, we check the mapping file.
-  // If there is no mapping file, we color it as 'everything else'.
-  return functionName?.startsWith('runtime') === true
-    ? mappingColors.runtime
-    : mappingColors[getLastItem(mappingFile ?? '') ?? EVERYTHING_ELSE];
+  return mappingColors[getLastItem(mappingFile ?? '') ?? EVERYTHING_ELSE];
 };
 
 export default useNodeColor;

package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts

@@ -19,7 +19,6 @@ import {divide, getLastItem, valueFormatter} from '@parca/utilities';
 import {hexifyAddress} from '../../utils';
 import {
   FIELD_FUNCTION_NAME,
-  FIELD_LABELS,
   FIELD_LABELS_ONLY,
   FIELD_LOCATION_ADDRESS,
   FIELD_MAPPING_FILE,
@@ -66,10 +65,6 @@ export function nodeLabel(
 }
 
 export const extractFeature = (mapping: string): Feature => {
-  if (mapping === 'runtime' || mapping === 'root') {
-    return {name: 'runtime', type: FEATURE_TYPES.Runtime};
-  }
-
   if (mapping != null && mapping !== '') {
     return {name: mapping, type: FEATURE_TYPES.Binary};
   }