@parca/profile 0.16.373 → 0.16.375

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.375](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.374...@parca/profile@0.16.375) (2024-05-23)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.374 (2024-05-21)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.373](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.372...@parca/profile@0.16.373) (2024-05-16)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/Content.js

@@ -32,6 +32,6 @@ const TooltipMetaInfo = ({ table, row, navigateTo, }) => {
     const labels = labelPairs.map((l) => (_jsx("span", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: `${l[0]}="${l[1]}"` }, l[0])));
     const isMappingBuildIDAvailable = mappingBuildID !== null && mappingBuildID !== '';
     const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';
-    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx("div", { className: "flex gap-4", children: _jsx("div", { className: "whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 30) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? _jsx(NoData, {}) : _jsx("div", { children: hexifyAddress(locationAddress) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Inlined" }), _jsx("td", { className: "w-3/4 break-all", children: inlinedText })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: isMappingBuildIDAvailable ? (_jsx("div", { children: truncateString(getLastItem(mappingBuildID), 28) })) : (_jsx(NoData, {})) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx("div", { className: "flex gap-4", children: _jsx("div", { className: "whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 30) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? _jsx(NoData, {}) : _jsx("div", { children: hexifyAddress(locationAddress) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Inlined" }), _jsx("td", { className: "w-3/4 break-all", children: inlinedText })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: isMappingBuildIDAvailable ? _jsx("div", { children: truncateString(mappingBuildID, 28) }) : _jsx(NoData, {}) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
 };
 export default GraphTooltipArrowContent;

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.js

@@ -51,5 +51,5 @@ export const DockedGraphTooltip = ({ table, total, totalUnfiltered, row, level,
                                 ? name
                                 : locationAddress !== 0n
                                     ? hexifyAddress(locationAddress)
-                                    : 'unknown' })) }), _jsxs("div", { className: "flex justify-between gap-3", children: [_jsx(InfoSection, { title: "Cumulative", value: cumulativeText, minWidth: "w-44" }), diff !== 0n ? _jsx(InfoSection, { title: "Diff", value: diffText, minWidth: "w-44" }) : null, _jsx(InfoSection, { title: "File", value: functionFilename !== '' ? truncateStringReverse(file, 45) : _jsx(NoData, {}), minWidth: 'w-[460px]' }), _jsx(InfoSection, { title: "Address", value: addressText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Inlined", value: inlinedText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Binary", value: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}), minWidth: "w-44" }), _jsx(InfoSection, { title: "Build ID", value: isMappingBuildIDAvailable ? (_jsx("div", { children: truncateString(getLastItem(mappingBuildID), 28) })) : (_jsx(NoData, {})) })] }), _jsx("div", { children: _jsx("div", { className: "flex h-5 gap-1", children: labels }) })] }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to show context menu" })] })] }));
+                                    : 'unknown' })) }), _jsxs("div", { className: "flex justify-between gap-3", children: [_jsx(InfoSection, { title: "Cumulative", value: cumulativeText, minWidth: "w-44" }), diff !== 0n ? _jsx(InfoSection, { title: "Diff", value: diffText, minWidth: "w-44" }) : null, _jsx(InfoSection, { title: "File", value: functionFilename !== '' ? truncateStringReverse(file, 45) : _jsx(NoData, {}), minWidth: 'w-[460px]' }), _jsx(InfoSection, { title: "Address", value: addressText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Inlined", value: inlinedText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Binary", value: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}), minWidth: "w-44" }), _jsx(InfoSection, { title: "Build ID", value: isMappingBuildIDAvailable ? (_jsx("div", { children: truncateString(mappingBuildID, 28) })) : (_jsx(NoData, {})) })] }), _jsx("div", { children: _jsx("div", { className: "flex h-5 gap-1", children: labels }) })] }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to show context menu" })] })] }));
 };

package/dist/ProfileIcicleGraph/IcicleGraph/useColoredGraph.js

@@ -25,7 +25,7 @@ const colorNodes = (nodes, strings, mappings, locations, functions, features) =>
         if (node.children != null) {
             coloredNode.children = colorNodes(node.children, strings, mappings, locations, functions, 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/dist/ProfileIcicleGraph/IcicleGraph/utils.d.ts

@@ -3,4 +3,4 @@ import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist
 import { type Feature } from '@parca/store';
 export declare const getBinaryName: (node: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[]) => string | undefined;
 export declare function nodeLabel(node: FlamegraphNode, strings: string[], mappings: Mapping[], locations: Location[], functions: ParcaFunction[], showBinaryName: boolean): string;
-export declare const extractFeature: (data: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[], functions: ParcaFunction[]) => Feature;
+export declare const extractFeature: (data: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[]) => Feature;

package/dist/ProfileIcicleGraph/IcicleGraph/utils.js

@@ -57,11 +57,7 @@ export function nodeLabel(node, strings, mappings, locations, functions, showBin
     const fallback = `${mappingString}${address}`;
     return fallback === '' ? '<unknown>' : fallback;
 }
-export const extractFeature = (data, mappings, locations, strings, functions) => {
-    const name = nodeLabel(data, strings, mappings, locations, functions, false).trim();
-    if (name.startsWith('runtime') || name === 'root') {
-        return { name: 'runtime', type: FEATURE_TYPES.Runtime };
-    }
+export const extractFeature = (data, mappings, locations, strings) => {
     const binaryName = getBinaryName(data, mappings, locations, strings);
     if (binaryName != null) {
         return { name: binaryName, type: FEATURE_TYPES.Binary };

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.js

@@ -19,7 +19,10 @@ import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { EVERYTHING_ELSE } from '@parca/store';
 const ColorStackLegend = ({ mappingColors, navigateTo, compareMode = false, }) => {
     const [colorProfileName] = useUserPreference(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]) => {
             if (featureA === EVERYTHING_ELSE) {
@@ -42,21 +45,32 @@ const ColorStackLegend = ({ mappingColors, navigateTo, compareMode = false, }) =
     }
     return (_jsx("div", { className: "my-4 flex w-full flex-wrap justify-start", children: stackColorArray.map(([feature, color]) => {
             const filteringAllowed = feature !== EVERYTHING_ELSE;
-            const isHighlighted = currentSearchString === feature;
+            const isHighlighted = currentSearchString !== undefined ? currentSearchString.includes(feature) : false;
             return (_jsxs("div", { className: cx('flex-no-wrap mb-1 flex w-1/5 items-center justify-between text-ellipsis p-1', {
                     'cursor-pointer': filteringAllowed,
                     'bg-gray-200 dark:bg-gray-800': isHighlighted,
                 }), 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);
                 }, children: [_jsxs("div", { className: "flex w-11/12 items-center justify-start", children: [_jsx("div", { className: "flex w-5 items-center", children: _jsx("div", { className: "mr-1 inline-block h-4 w-4", style: { backgroundColor: color } }) }), _jsx("div", { className: "shrink overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:whitespace-normal", children: feature })] }), _jsx("div", { className: "flex w-1/12 justify-end", children: isHighlighted && (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
-                                setSearchString('');
+                                let searchString = [];
+                                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) => f !== feature));
                                 e.stopPropagation();
                             } })) })] }, feature));
         }) }));

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.d.ts

@@ -15,6 +15,7 @@ interface ContextMenuProps {
     curPath: string[];
     setCurPath: (path: string[]) => void;
     hideMenu: () => void;
+    hideBinary: (binaryToRemove: string) => void;
 }
-declare const ContextMenu: ({ menuId, table, total, totalUnfiltered, row, level, navigateTo, trackVisibility, curPath, setCurPath, hideMenu, profileType, }: ContextMenuProps) => JSX.Element;
+declare const ContextMenu: ({ menuId, table, total, totalUnfiltered, row, level, navigateTo, trackVisibility, curPath, setCurPath, hideMenu, profileType, hideBinary, }: ContextMenuProps) => JSX.Element;
 export default ContextMenu;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.js

@@ -16,10 +16,11 @@ import { Item, Menu, Separator, Submenu } from 'react-contexify';
 import { Tooltip } from 'react-tooltip';
 import { useParcaContext } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
+import { getLastItem } from '@parca/utilities';
 import { useGraphTooltip } from '../../GraphTooltipArrow/useGraphTooltip';
 import { useGraphTooltipMetaInfo } from '../../GraphTooltipArrow/useGraphTooltipMetaInfo';
 import { hexifyAddress, truncateString } from '../../utils';
-const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, level, navigateTo, trackVisibility, curPath, setCurPath, hideMenu, profileType, }) => {
+const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, level, navigateTo, trackVisibility, curPath, setCurPath, hideMenu, profileType, hideBinary, }) => {
     const { isDarkMode } = useParcaContext();
     const { enableSourcesView } = useParcaContext();
     const [isGraphTooltipDocked, setIsDocked] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
@@ -75,6 +76,6 @@ const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, level, naviga
         { id: 'Build Id', value: buildIdText },
     ];
     const nonEmptyValuesToCopy = valuesToCopy.filter(({ value }) => value !== '');
-    return (_jsxs(Menu, { id: menuId, onVisibilityChange: trackVisibility, theme: isDarkMode ? 'dark' : '', children: [_jsxs(Item, { id: "view-source-file", onClick: handleViewSourceFile, disabled: enableSourcesView === false || !isSourceAvailable, children: [_jsx("div", { "data-tooltip-id": "view-source-file-help", "data-tooltip-content": "There is no source code uploaded for this build", children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "wpf:view-file" }), _jsx("div", { children: "View source file" })] }) }), !isSourceAvailable ? _jsx(Tooltip, { id: "view-source-file-help" }) : null] }), _jsx(Item, { id: "reset-view", onClick: handleResetView, disabled: curPath.length === 0, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "system-uicons:reset" }), _jsx("div", { children: "Reset view" })] }) }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:copy" }), _jsx("div", { children: "Copy" })] }), children: _jsx("div", { className: "max-h-[300px] overflow-scroll", children: nonEmptyValuesToCopy.map(({ id, value }) => (_jsx(Item, { id: id, onClick: () => handleCopyItem(value), className: "dark:bg-gray-800", children: _jsxs("div", { className: "flex flex-col dark:text-gray-300 hover:dark:text-gray-100", children: [_jsx("div", { className: "text-sm", children: id }), _jsx("div", { className: "text-xs", children: truncateString(value, 30) })] }) }, id))) }) }), _jsx(Separator, {}), _jsx(Item, { id: "dock-tooltip", onClick: handleDockTooltip, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "bx:dock-bottom" }), isGraphTooltipDocked ? 'Undock tooltip' : 'Dock tooltip'] }) })] }));
+    return (_jsxs(Menu, { id: menuId, onVisibilityChange: trackVisibility, theme: isDarkMode ? 'dark' : '', children: [_jsxs(Item, { id: "view-source-file", onClick: handleViewSourceFile, disabled: enableSourcesView === false || !isSourceAvailable, children: [_jsx("div", { "data-tooltip-id": "view-source-file-help", "data-tooltip-content": "There is no source code uploaded for this build", children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "wpf:view-file" }), _jsx("div", { children: "View source file" })] }) }), !isSourceAvailable ? _jsx(Tooltip, { id: "view-source-file-help" }) : null] }), _jsx(Item, { id: "reset-view", onClick: handleResetView, disabled: curPath.length === 0, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "system-uicons:reset" }), _jsx("div", { children: "Reset view" })] }) }), _jsxs(Item, { id: "hide-binary", onClick: () => hideBinary(getLastItem(mappingFile)), disabled: mappingFile === null || mappingFile === '', children: [_jsx("div", { "data-tooltip-id": "hide-binary-help", "data-tooltip-content": "Hide all frames for this binary", children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "bx:bxs-hide" }), _jsxs("div", { children: ["Hide Binary ", mappingFile !== null && `(${getLastItem(mappingFile)})`] })] }) }), _jsx(Tooltip, { place: "left", id: "hide-binary-help" })] }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:copy" }), _jsx("div", { children: "Copy" })] }), children: _jsx("div", { className: "max-h-[300px] overflow-scroll", children: nonEmptyValuesToCopy.map(({ id, value }) => (_jsx(Item, { id: id, onClick: () => handleCopyItem(value), className: "dark:bg-gray-800", children: _jsxs("div", { className: "flex flex-col dark:text-gray-300 hover:dark:text-gray-100", children: [_jsx("div", { className: "text-sm", children: id }), _jsx("div", { className: "text-xs", children: truncateString(value, 30) })] }) }, id))) }) }), _jsx(Separator, {}), _jsx(Item, { id: "dock-tooltip", onClick: handleDockTooltip, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "bx:dock-bottom" }), isGraphTooltipDocked ? 'Undock tooltip' : 'Dock tooltip'] }) })] }));
 };
 export default ContextMenu;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

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

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts

@@ -28,6 +28,7 @@ interface IcicleGraphArrowProps {
     setCurPath: (path: string[]) => void;
     navigateTo?: NavigateFunction;
     sortBy: string;
+    mappings?: string[];
 }
 export declare const IcicleGraphArrow: React.NamedExoticComponent<IcicleGraphArrowProps>;
 export default IcicleGraphArrow;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { tableFromIPC } from 'apache-arrow';
 import { useContextMenu } from 'react-contexify';
+import { useURLState } from '@parca/components';
 import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@parca/hooks';
 import { getColorForFeature, selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector, } from '@parca/store';
 import { getLastItem, scaleLinear, selectQueryParam } from '@parca/utilities';
@@ -24,7 +25,7 @@ import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import ContextMenu from './ContextMenu';
 import { IcicleNode, RowHeight } 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';
 export const FIELD_MAPPING_BUILD_ID = 'mapping_build_id';
@@ -41,7 +42,7 @@ export const FIELD_CUMULATIVE = 'cumulative';
 export const FIELD_CUMULATIVE_PER_SECOND = 'cumulative_per_second';
 export const FIELD_DIFF = 'diff';
 export const FIELD_DIFF_PER_SECOND = 'diff_per_second';
-export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, navigateTo, sortBy, }) {
+export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, navigateTo, sortBy, mappings, }) {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const dispatch = useAppDispatch();
     const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
@@ -56,66 +57,35 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     const [hoveringName, setHoveringName] = useState(null);
     const svg = useRef(null);
     const ref = useRef(null);
+    const [binaryFrameFilter, setBinaryFrameFilter] = useURLState({
+        param: 'binary_frame_filter',
+        navigateTo,
+    });
     const currentSearchString = selectQueryParam('search_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 = table.getChild(FIELD_MAPPING_FILE);
-        const mappings = mappingsDict?.data
-            .map(mapping => {
-            if (mapping.dictionary == null) {
-                return [];
-            }
-            const len = mapping.dictionary.length;
-            const entries = [];
-            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);
         })
             .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 = 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 = 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]);
-    // 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));
+        list.sort((a, b) => a.localeCompare(b));
+        return list;
     }, [mappings]);
-    // TODO: Unify with mappingFeatures
     const mappingColors = useMemo(() => {
+        const mappingFeatures = mappingsList.map(mapping => extractFeature(mapping));
         const colors = {};
         Object.entries(mappingFeatures).forEach(([_, feature]) => {
             colors[feature.name] = getColorForFeature(feature.name, isDarkMode, currentColorProfile.colors);
         });
         return colors;
-    }, [isDarkMode, mappingFeatures, currentColorProfile]);
+    }, [mappingsList, isDarkMode, currentColorProfile]);
     useEffect(() => {
         if (ref.current != null) {
             setHeight(ref?.current.getBoundingClientRect().height);
@@ -139,6 +109,18 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     const trackVisibility = (isVisible) => {
         setIsContextMenuOpen(isVisible);
     };
+    const hideBinary = (binaryToRemove) => {
+        // 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 (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { table: table, row: 0, mappingColors: mappingColors, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
@@ -166,6 +148,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     if (table.numRows === 0 || width === undefined) {
         return _jsx(_Fragment, {});
     }
-    return (_jsx(_Fragment, { children: _jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ContextMenu, { menuId: MENU_ID, table: table, row: hoveringRow ?? 0, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, navigateTo: navigateTo, trackVisibility: trackVisibility, curPath: curPath, setCurPath: setCurPath, hideMenu: hideAll }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode })), dockedMetainfo ? (_jsx(DockedGraphTooltip, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType })) : (!isContextMenuOpen && (_jsx(GraphTooltipArrow, { contextElement: svg.current, isContextMenuOpen: isContextMenuOpen, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, isFixed: false, total: total, totalUnfiltered: total + filtered, profileType: profileType, navigateTo: navigateTo }) }))), root] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ContextMenu, { menuId: MENU_ID, table: table, row: hoveringRow ?? 0, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, navigateTo: navigateTo, trackVisibility: trackVisibility, curPath: curPath, setCurPath: setCurPath, hideMenu: hideAll, hideBinary: hideBinary }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode })), dockedMetainfo ? (_jsx(DockedGraphTooltip, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType })) : (!isContextMenuOpen && (_jsx(GraphTooltipArrow, { contextElement: svg.current, isContextMenuOpen: isContextMenuOpen, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, isFixed: false, total: total, totalUnfiltered: total + filtered, profileType: profileType, navigateTo: navigateTo }) }))), root] }) }));
 });
 export default IcicleGraphArrow;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.d.ts

@@ -9,8 +9,7 @@ interface Props {
     diff: bigint | null;
     diffPerSecond: number | null;
     mappingColors: mappingColors;
-    functionName: string | null;
     mappingFile: string | null;
 }
-declare const useNodeColor: ({ isDarkMode, compareMode, cumulative, cumulativePerSecond, diff, diffPerSecond, mappingColors, functionName, mappingFile, }: Props) => string;
+declare const useNodeColor: ({ isDarkMode, compareMode, cumulative, cumulativePerSecond, diff, diffPerSecond, mappingColors, mappingFile, }: Props) => string;
 export default useNodeColor;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.js

@@ -12,18 +12,13 @@
 // limitations under the License.
 import { EVERYTHING_ELSE } from '@parca/store';
 import { diffColor, diffColorPerSecond, getLastItem } from '@parca/utilities';
-const useNodeColor = ({ isDarkMode, compareMode, cumulative, cumulativePerSecond, diff, diffPerSecond, mappingColors, functionName, mappingFile, }) => {
+const useNodeColor = ({ isDarkMode, compareMode, cumulative, cumulativePerSecond, diff, diffPerSecond, mappingColors, mappingFile, }) => {
     if (compareMode) {
         if (cumulativePerSecond !== null && diffPerSecond !== null) {
             return diffColorPerSecond(diffPerSecond, cumulativePerSecond, isDarkMode);
         }
         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/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.js

@@ -45,9 +45,6 @@ export function nodeLabel(table, row, level, showBinaryName) {
     return fallback === '' ? '<unknown>' : fallback;
 }
 export const extractFeature = (mapping) => {
-    if (mapping === 'runtime' || mapping === 'root') {
-        return { name: 'runtime', type: FEATURE_TYPES.Runtime };
-    }
     if (mapping != null && mapping !== '') {
         return { name: mapping, type: FEATURE_TYPES.Binary };
     }

package/dist/ProfileIcicleGraph/index.d.ts

@@ -17,6 +17,7 @@ interface ProfileIcicleGraphProps {
     setActionButtons?: (buttons: React.JSX.Element) => void;
     error?: any;
     isHalfScreen: boolean;
+    mappings?: string[];
 }
-declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, navigateTo, loading, setActionButtons, error, width, isHalfScreen, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, navigateTo, loading, setActionButtons, error, width, isHalfScreen, mappings, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

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,7 +11,7 @@ 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';
@@ -20,7 +20,6 @@ import { capitalizeOnlyFirstLetter, divide } 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';
@@ -33,13 +32,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 +74,12 @@ 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, }) {
     const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
     const { compareMode } = useProfileViewContext();
+    const [isLoading, setIsLoading] = useState(true);
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
         param: 'sort_by',
         navigateTo,
@@ -113,14 +108,14 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         ];
     }, [graph, arrow, filtered, total]);
     useEffect(() => {
-        if (loading && setActionButtons !== undefined) {
+        if (isLoading && 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: [arrow !== undefined && _jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), arrow !== undefined && 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,8 +126,17 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         setActionButtons,
         loading,
         isHalfScreen,
+        isLoading,
     ]);
-    if (loading) {
+    useEffect(() => {
+        if (!loading && (arrow !== undefined || graph !== undefined)) {
+            setIsLoading(false);
+        }
+        else {
+            setIsLoading(true);
+        }
+    }, [loading, arrow, graph]);
+    if (isLoading) {
         return (_jsx("div", { className: "h-auto overflow-clip", children: _jsx(IcicleGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
     }
     if (error != null) {
@@ -149,6 +153,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     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, _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, mappings: mappings }))] }), _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

@@ -107,11 +107,11 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                 return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
                         onRender: perf?.onRender,
-                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), navigateTo: navigateTo, loading: flamegraphData.loading && flamegraphData.mappingsLoading, setActionButtons: setActionButtons, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
                             ? isHalfScreen
                                 ? (dimensions.width - 40) / 2
                                 : dimensions.width - 16
-                            : 0 }) }));
+                            : 0, mappings: flamegraphData.mappings }) }));
             }
             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'