@parca/profile 0.16.374 → 0.16.376

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.376 (2024-05-30)
+
+**Note:** Version bump only for package @parca/profile
+
+## [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

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.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { NavigateFunction } from '@parca/utilities';
-import { mappingColors } from './IcicleGraphNodes';
+import { type NavigateFunction } from '@parca/utilities';
 interface Props {
-    mappingColors: mappingColors;
+    mappings?: string[];
+    mappingsLoading?: boolean;
     navigateTo?: NavigateFunction;
     compareMode?: boolean;
 }
-declare const ColorStackLegend: ({ mappingColors, navigateTo, compareMode, }: Props) => React.JSX.Element;
+declare const ColorStackLegend: ({ mappings, navigateTo, compareMode, mappingsLoading, }: Props) => React.JSX.Element;
 export default ColorStackLegend;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.js

@@ -15,11 +15,37 @@ import { useMemo } from 'react';
 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';
-const ColorStackLegend = ({ mappingColors, navigateTo, compareMode = false, }) => {
+import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@parca/hooks';
+import { EVERYTHING_ELSE, selectDarkMode, useAppSelector } from '@parca/store';
+import { getLastItem } from '@parca/utilities';
+import { getMappingColors } from '.';
+const ColorStackLegend = ({ mappings, navigateTo, compareMode = false, mappingsLoading, }) => {
+    const isDarkMode = useAppSelector(selectDarkMode);
+    const currentColorProfile = useCurrentColorProfile();
     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 mappingsList = useMemo(() => {
+        if (mappings === undefined) {
+            return [];
+        }
+        const list = mappings
+            ?.map(mapping => {
+            return getLastItem(mapping);
+        })
+            .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]) => {
             if (featureA === EVERYTHING_ELSE) {
@@ -31,7 +57,7 @@ const ColorStackLegend = ({ mappingColors, navigateTo, compareMode = false, }) =
             return featureA?.localeCompare(featureB ?? '') ?? 0;
         });
     }, [mappingColors]);
-    if (mappingColors === undefined) {
+    if (mappingColors === undefined && mappingsLoading === false) {
         return _jsx(_Fragment, {});
     }
     if (Object.entries(mappingColors).length === 0) {
@@ -42,21 +68,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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { FlamegraphArrow } from '@parca/client';
 import { ProfileType } from '@parca/parser';
-import { type NavigateFunction } from '@parca/utilities';
+import { type ColorConfig, type NavigateFunction } from '@parca/utilities';
+import { mappingColors } from './IcicleGraphNodes';
 export declare const FIELD_LABELS_ONLY = "labels_only";
 export declare const FIELD_MAPPING_FILE = "mapping_file";
 export declare const FIELD_MAPPING_BUILD_ID = "mapping_build_id";
@@ -28,6 +29,9 @@ interface IcicleGraphArrowProps {
     setCurPath: (path: string[]) => void;
     navigateTo?: NavigateFunction;
     sortBy: string;
+    flamegraphLoading: boolean;
+    isHalfScreen: boolean;
 }
+export declare const getMappingColors: (mappingsList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => mappingColors;
 export declare const IcicleGraphArrow: React.NamedExoticComponent<IcicleGraphArrowProps>;
 export default IcicleGraphArrow;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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.
@@ -14,14 +14,14 @@ 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';
+import { getLastItem, scaleLinear, selectQueryParam, } from '@parca/utilities';
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
 import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
-import ColorStackLegend from './ColorStackLegend';
 import ContextMenu from './ContextMenu';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
 import { arrowToString, extractFeature } from './utils';
@@ -41,7 +41,15 @@ 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 getMappingColors = (mappingsList, isDarkMode, currentColorProfile) => {
+    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;
+};
+export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, navigateTo, sortBy, flamegraphLoading, }) {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const dispatch = useAppDispatch();
     const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
@@ -56,12 +64,16 @@ 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 isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
     const currentColorProfile = useCurrentColorProfile();
     const colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
-    const mappings = useMemo(() => {
+    const mappingsList = 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).
@@ -82,46 +94,23 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
             .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;
-                }
-            }
-        });
         // 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));
-    }, [mappings]);
-    // TODO: Unify with mappingFeatures
     const mappingColors = useMemo(() => {
-        const colors = {};
-        Object.entries(mappingFeatures).forEach(([_, feature]) => {
-            colors[feature.name] = getColorForFeature(feature.name, isDarkMode, currentColorProfile.colors);
-        });
+        const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
         return colors;
-    }, [isDarkMode, mappingFeatures, currentColorProfile]);
+    }, [isDarkMode, mappingsList, currentColorProfile]);
     useEffect(() => {
         if (ref.current != null) {
             setHeight(ref?.current.getBoundingClientRect().height);
         }
-    }, [width]);
+    }, [width, flamegraphLoading]);
     const xScale = useMemo(() => {
+        if (total === 0n) {
+            return () => 0;
+        }
         if (width === undefined) {
             return () => 0;
         }
@@ -139,33 +128,42 @@ 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 }) }) }) }));
     }, [
-        compareMode,
-        curPath,
-        currentSearchString,
+        width,
         height,
-        isDarkMode,
-        profileType,
+        displayMenu,
+        table,
         mappingColors,
         setCurPath,
-        sortBy,
-        table,
+        curPath,
         total,
-        width,
         xScale,
+        currentSearchString,
+        sortBy,
+        isDarkMode,
+        compareMode,
+        profileType,
         isContextMenuOpen,
-        displayMenu,
-        colorForSimilarNodes,
-        highlightSimilarStacksPreference,
         hoveringName,
         hoveringRow,
+        colorForSimilarNodes,
+        highlightSimilarStacksPreference,
     ]);
-    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 }), 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,8 @@ interface ProfileIcicleGraphProps {
     setActionButtons?: (buttons: React.JSX.Element) => void;
     error?: any;
     isHalfScreen: boolean;
+    mappings?: string[];
+    mappingsLoading?: boolean;
 }
-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, mappingsLoading, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;