@parca/profile 0.16.374 → 0.16.376

package/dist/ProfileIcicleGraph/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // 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.
@@ -11,19 +11,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Icon } from '@iconify/react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button, IcicleActionButtonPlaceholder, IcicleGraphSkeleton, IconButton, useParcaContext, useURLState, } from '@parca/components';
+import { Button, IcicleGraphSkeleton, IconButton, useParcaContext, useURLState, } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { capitalizeOnlyFirstLetter, divide } from '@parca/utilities';
+import { capitalizeOnlyFirstLetter, divide, selectQueryParam, } from '@parca/utilities';
 import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import DiffLegend from '../components/DiffLegend';
 import GroupByDropdown from './ActionButtons/GroupByDropdown';
-import RuntimeFilterDropdown from './ActionButtons/RuntimeFilterDropdown';
 import SortBySelect from './ActionButtons/SortBySelect';
 import IcicleGraph from './IcicleGraph';
 import IcicleGraphArrow, { FIELD_FUNCTION_NAME } from './IcicleGraphArrow';
+import ColorStackLegend from './IcicleGraphArrow/ColorStackLegend';
 const numberFormatter = new Intl.NumberFormat('en-US');
 const ErrorContent = ({ errorMessage }) => {
     return _jsx("div", { className: "flex justify-center p-10", children: errorMessage });
@@ -33,13 +33,20 @@ const ShowHideLegendButton = ({ navigateTo, isHalfScreen, }) => {
         param: 'color_stack_legend',
         navigateTo,
     });
+    const [binaryFrameFilter, setBinaryFrameFilter] = useURLState({
+        param: 'binary_frame_filter',
+        navigateTo,
+    });
     const { compareMode } = useProfileViewContext();
     const isColorStackLegendEnabled = colorStackLegend === 'true';
     const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
     const setColorStackLegend = useCallback((value) => {
         setStoreColorStackLegend(value);
     }, [setStoreColorStackLegend]);
-    return (_jsx(_Fragment, { children: colorProfileName === 'default' || compareMode ? null : (_jsx(_Fragment, { children: isHalfScreen ? (_jsx(IconButton, { className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center !py-2 !px-3 cursor-pointer min-h-[38px]", icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', toolTipText: isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'), id: "h-show-legend-button" })) : (_jsxs(Button, { className: "gap-2 w-max", variant: "neutral", onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'), id: "h-show-legend-button", children: [isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', _jsx(Icon, { icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', width: 20 })] })) })) }));
+    const resetLegend = () => {
+        setBinaryFrameFilter([]);
+    };
+    return (_jsx(_Fragment, { children: colorProfileName === 'default' || compareMode ? null : (_jsx(_Fragment, { children: isHalfScreen ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center !py-2 !px-3 cursor-pointer min-h-[38px]", icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', toolTipText: isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'), id: "h-show-legend-button" }), binaryFrameFilter !== undefined && binaryFrameFilter.length > 0 && (_jsx(IconButton, { className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center !py-2 !px-3 cursor-pointer min-h-[38px]", icon: "system-uicons:reset", toolTipText: "Reset the legend selection", onClick: () => resetLegend(), id: "h-reset-legend-button" }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Button, { className: "gap-2 w-max", variant: "neutral", onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'), id: "h-show-legend-button", children: [isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', _jsx(Icon, { icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', width: 20 })] }), binaryFrameFilter !== undefined && binaryFrameFilter.length > 0 && (_jsxs(Button, { className: "gap-2 w-max", variant: "neutral", onClick: () => resetLegend(), id: "h-reset-legend-button", children: ["Reset Legend", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] })) })) }));
 };
 const GroupAndSortActionButtons = ({ navigateTo }) => {
     const [storeSortBy = FIELD_FUNCTION_NAME, setStoreSortBy] = useURLState({
@@ -68,23 +75,13 @@ const GroupAndSortActionButtons = ({ navigateTo }) => {
             ? setGroupBy(groupBy.filter(v => v !== key)) // remove
             : setGroupBy([...groupBy, key]); // add
     }, [groupBy, setGroupBy]);
-    const [showRuntimeRubyStr, setShowRuntimeRuby] = useURLState({
-        param: 'show_runtime_ruby',
-        navigateTo,
-    });
-    const [showRuntimePythonStr, setShowRuntimePython] = useURLState({
-        param: 'show_runtime_python',
-        navigateTo,
-    });
-    const [showInterpretedOnlyStr, setShowInterpretedOnly] = useURLState({
-        param: 'show_interpreted_only',
-        navigateTo,
-    });
-    return (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy }), _jsx(SortBySelect, { compareMode: compareMode, sortBy: storeSortBy, setSortBy: setStoreSortBy }), _jsx(RuntimeFilterDropdown, { showRuntimeRuby: showRuntimeRubyStr === 'true', toggleShowRuntimeRuby: () => setShowRuntimeRuby(showRuntimeRubyStr === 'true' ? 'false' : 'true'), showRuntimePython: showRuntimePythonStr === 'true', toggleShowRuntimePython: () => setShowRuntimePython(showRuntimePythonStr === 'true' ? 'false' : 'true'), showInterpretedOnly: showInterpretedOnlyStr === 'true', toggleShowInterpretedOnly: () => setShowInterpretedOnly(showInterpretedOnlyStr === 'true' ? 'false' : 'true') })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy }), _jsx(SortBySelect, { compareMode: compareMode, sortBy: storeSortBy, setSortBy: setStoreSortBy })] }));
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, navigateTo, loading, setActionButtons, error, width, isHalfScreen, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, navigateTo, loading, setActionButtons, error, width, isHalfScreen, mappings, mappingsLoading, }) {
     const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
     const { compareMode } = useProfileViewContext();
+    const [isLoading, setIsLoading] = useState(true);
+    const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
         param: 'sort_by',
         navigateTo,
@@ -113,14 +110,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         ];
     }, [graph, arrow, filtered, total]);
     useEffect(() => {
-        if (loading && setActionButtons !== undefined) {
-            setActionButtons(_jsx(IcicleActionButtonPlaceholder, { isHalfScreen: isHalfScreen }));
-            return;
-        }
-        if (setActionButtons === undefined) {
-            return;
-        }
-        setActionButtons(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [arrow !== undefined && _jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', toolTipText: isInvert ? 'Original Call Stack' : 'Invert Call Stack', onClick: () => setInvertStack(isInvert ? '' : 'true'), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setInvertStack(isInvert ? '' : 'true'), children: [isInvert ? 'Original Call Stack' : 'Invert Call Stack', _jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', width: 20 })] })), _jsx(ShowHideLegendButton, { isHalfScreen: isHalfScreen, navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: "system-uicons:reset", disabled: curPath.length === 0, toolTipText: "Reset View", onClick: () => setNewCurPath([]), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset View", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] }) }));
+        setActionButtons?.(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [_jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', toolTipText: isInvert ? 'Original Call Stack' : 'Invert Call Stack', onClick: () => setInvertStack(isInvert ? '' : 'true'), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setInvertStack(isInvert ? '' : 'true'), children: [isInvert ? 'Original Call Stack' : 'Invert Call Stack', _jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', width: 20 })] })), _jsx(ShowHideLegendButton, { isHalfScreen: isHalfScreen, navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: "system-uicons:reset", disabled: curPath.length === 0, toolTipText: "Reset View", onClick: () => setNewCurPath([]), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset View", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] }) }));
     }, [
         navigateTo,
         isInvert,
@@ -131,10 +121,16 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         setActionButtons,
         loading,
         isHalfScreen,
+        isLoading,
     ]);
-    if (loading) {
-        return (_jsx("div", { className: "h-auto overflow-clip", children: _jsx(IcicleGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
-    }
+    useEffect(() => {
+        if (!loading && (arrow !== undefined || graph !== undefined)) {
+            setIsLoading(false);
+        }
+        else {
+            setIsLoading(true);
+        }
+    }, [loading, arrow, graph]);
     if (error != null) {
         onError?.(error);
         if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
@@ -142,13 +138,38 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         }
         return _jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(error.message) });
     }
-    if (graph === undefined && arrow === undefined)
-        return _jsx("div", { className: "mx-auto text-center", children: "No data..." });
-    if (total === 0n && !loading)
-        return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const icicleGraph = useMemo(() => {
+        if (isLoading) {
+            return (_jsx("div", { className: "h-auto overflow-clip", children: _jsx(IcicleGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
+        }
+        if (graph === undefined && arrow === undefined)
+            return _jsx("div", { className: "mx-auto text-center", children: "No data..." });
+        if (total === 0n && !loading)
+            return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
+        if (graph !== undefined)
+            return (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo }));
+        if (arrow !== undefined)
+            return (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo, sortBy: storeSortBy, flamegraphLoading: isLoading, isHalfScreen: isHalfScreen }));
+    }, [
+        isLoading,
+        graph,
+        arrow,
+        total,
+        filtered,
+        curPath,
+        setNewCurPath,
+        profileType,
+        navigateTo,
+        width,
+        storeSortBy,
+        isHalfScreen,
+        isDarkMode,
+        loading,
+    ]);
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsxs("div", { className: "min-h-48", id: "h-icicle-graph", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
+    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, isColorStackLegendEnabled && (_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode, mappings: mappings, mappingsLoading: mappingsLoading })), _jsx("div", { className: "min-h-48", id: "h-icicle-graph", children: _jsx(_Fragment, { children: icicleGraph }) }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
 };
 export default ProfileIcicleGraph;

package/dist/ProfileSource.js

@@ -108,6 +108,7 @@ export class ProfileDiffSource {
             reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
             mode: QueryRequest_Mode.DIFF,
             filterQuery: this.filterQuery,
+            filter: [],
         };
     }
     ProfileType() {
@@ -158,6 +159,7 @@ export class MergedProfileSource {
             reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
             mode: QueryRequest_Mode.MERGE,
             filterQuery: this.filterQuery,
+            filter: [],
         };
     }
     ProfileType() {

package/dist/ProfileView/index.d.ts

@@ -11,6 +11,8 @@ export interface FlamegraphData {
     total?: bigint;
     filtered?: bigint;
     error?: any;
+    mappings?: string[];
+    mappingsLoading: boolean;
 }
 export interface TopTableData {
     loading: boolean;

package/dist/ProfileView/index.js

@@ -111,7 +111,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                             ? isHalfScreen
                                 ? (dimensions.width - 40) / 2
                                 : dimensions.width - 16
-                            : 0 }) }));
+                            : 0, mappings: flamegraphData.mappings, mappingsLoading: flamegraphData.mappingsLoading }) }));
             }
             case 'callgraph': {
                 return callgraphData?.data !== undefined &&

package/dist/ProfileViewWithData.js

@@ -25,14 +25,12 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
     const [sourceBuildID] = useURLState({ param: 'source_buildid', navigateTo });
     const [sourceFilename] = useURLState({ param: 'source_filename', navigateTo });
     const [groupBy = [FIELD_FUNCTION_NAME]] = useURLState({ param: 'group_by', navigateTo });
-    const [showRuntimeRubyStr] = useURLState({ param: 'show_runtime_ruby', navigateTo });
-    const showRuntimeRuby = showRuntimeRubyStr === 'true';
-    const [showRuntimePythonStr] = useURLState({ param: 'show_runtime_python', navigateTo });
-    const showRuntimePython = showRuntimePythonStr === 'true';
-    const [showInterpretedOnlyStr] = useURLState({ param: 'show_interpreted_only', navigateTo });
-    const showInterpretedOnly = showInterpretedOnlyStr === 'true';
     const [invertStack] = useURLState({ param: 'invert_call_stack', navigateTo });
     const invertCallStack = invertStack === 'true';
+    const [binaryFrameFilterStr] = useURLState({ param: 'binary_frame_filter', navigateTo });
+    const binaryFrameFilter = typeof binaryFrameFilterStr === 'string'
+        ? binaryFrameFilterStr.split(',')
+        : binaryFrameFilterStr;
     const [pprofDownloading, setPprofDownloading] = useState(false);
     const nodeTrimThreshold = useMemo(() => {
         let width = 
@@ -48,10 +46,15 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
         skip: !dashboardItems.includes('icicle'),
         nodeTrimThreshold,
         groupBy: groupByParam,
-        showRuntimeRuby,
-        showRuntimePython,
-        showInterpretedOnly,
         invertCallStack,
+        binaryFrameFilter,
+    });
+    const { isLoading: profilemetadataLoading, response: profilemetadataResponse } = useQuery(queryClient, profileSource, QueryRequest_ReportType.PROFILE_METADATA, {
+        skip: !dashboardItems.includes('icicle'),
+        nodeTrimThreshold,
+        groupBy: groupByParam,
+        invertCallStack,
+        binaryFrameFilter: undefined,
     });
     const { perf } = useParcaContext();
     const { isLoading: tableLoading, response: tableResponse, error: tableError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TABLE_ARROW, {
@@ -126,7 +129,7 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
         filtered = BigInt(sourceResponse.filtered);
     }
     return (_jsx(ProfileView, { total: total, filtered: filtered, flamegraphData: {
-            loading: flamegraphLoading,
+            loading: flamegraphLoading && profilemetadataLoading,
             data: flamegraphResponse?.report.oneofKind === 'flamegraph'
                 ? flamegraphResponse?.report?.flamegraph
                 : undefined,
@@ -136,6 +139,10 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
             total: BigInt(flamegraphResponse?.total ?? '0'),
             filtered: BigInt(flamegraphResponse?.filtered ?? '0'),
             error: flamegraphError,
+            mappings: profilemetadataResponse?.report.oneofKind === 'profileMetadata'
+                ? profilemetadataResponse?.report?.profileMetadata?.mappingFiles
+                : undefined,
+            mappingsLoading: profilemetadataLoading,
         }, topTableData: {
             loading: tableLoading,
             arrow: tableResponse?.report.oneofKind === 'tableArrow'

package/dist/Table/index.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { tableFromIPC } from 'apache-arrow';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button, TableActionButtonPlaceholder, Table as TableComponent, TableSkeleton, useParcaContext, useURLState, } from '@parca/components';
+import { Button, Table as TableComponent, TableSkeleton, useParcaContext, useURLState, } from '@parca/components';
 import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/utilities';
 import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import { hexifyAddress } from '../utils';
@@ -214,14 +214,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
         }
     }, [navigateTo, router, filterByFunctionInput]);
     useEffect(() => {
-        if (loading && setActionButtons !== undefined) {
-            setActionButtons(_jsx(TableActionButtonPlaceholder, {}));
-            return;
-        }
-        if (setActionButtons === undefined) {
-            return;
-        }
-        setActionButtons(_jsxs(_Fragment, { children: [_jsx(ColumnsVisibility, { columns: columns, visibility: columnVisibility, setVisibility: (id, visible) => {
+        setActionButtons?.(_jsxs(_Fragment, { children: [_jsx(ColumnsVisibility, { columns: columns, visibility: columnVisibility, setVisibility: (id, visible) => {
                         setColumnVisibility({ ...columnVisibility, [id]: visible });
                     } }), dashboardItems.length > 1 && (_jsx(Button, { color: "neutral", onClick: clearSelection, className: "w-auto", variant: "neutral", disabled: currentSearchString === undefined || currentSearchString.length === 0, children: "Clear selection" }))] }));
     }, [

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.374",
+  "version": "0.16.376",
   "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": "acf7298e22788f6f2c91cbdc36e0c90007526cf4"
+  "gitHead": "6f30d0d2d958ea4a32f58671bfc97bf72eb232d7"
 }

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

@@ -17,27 +17,59 @@ import {Icon} from '@iconify/react';
 import cx from 'classnames';
 
 import {useURLState} from '@parca/components';
-import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
-import {EVERYTHING_ELSE} from '@parca/store';
-import type {NavigateFunction} from '@parca/utilities';
+import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
+import {EVERYTHING_ELSE, selectDarkMode, useAppSelector} from '@parca/store';
+import {getLastItem, type NavigateFunction} from '@parca/utilities';
 
-import {mappingColors} from './IcicleGraphNodes';
+import {getMappingColors} from '.';
 
 interface Props {
-  mappingColors: mappingColors;
+  mappings?: string[];
+  mappingsLoading?: boolean;
   navigateTo?: NavigateFunction;
   compareMode?: boolean;
 }
 
 const ColorStackLegend = ({
-  mappingColors,
+  mappings,
   navigateTo,
   compareMode = false,
+  mappingsLoading,
 }: Props): React.JSX.Element => {
+  const isDarkMode = useAppSelector(selectDarkMode);
+  const currentColorProfile = useCurrentColorProfile();
   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 mappingsList = useMemo(() => {
+    if (mappings === undefined) {
+      return [];
+    }
+    const list =
+      mappings
+        ?.map(mapping => {
+          return getLastItem(mapping) as string;
+        })
+        .flat() ?? [];
+
+    // We add a EVERYTHING ELSE mapping to the list.
+    list.push('');
+
+    // We sort the mappings alphabetically to make sure that the order is always the same.
+    list.sort((a, b) => a.localeCompare(b));
+
+    return list;
+  }, [mappings]);
+
+  const mappingColors = useMemo(() => {
+    const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
+    return colors;
+  }, [isDarkMode, mappingsList, currentColorProfile]);
 
   const stackColorArray = useMemo(() => {
     return Object.entries(mappingColors).sort(([featureA], [featureB]) => {
@@ -51,7 +83,7 @@ const ColorStackLegend = ({
     });
   }, [mappingColors]);
 
-  if (mappingColors === undefined) {
+  if (mappingColors === undefined && mappingsLoading === false) {
     return <></>;
   }
 
@@ -67,7 +99,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 +112,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 +140,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);