@parca/profile 0.16.219 → 0.16.221

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.221](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.220...@parca/profile@0.16.221) (2023-08-09)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.220 (2023-08-09)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.219 (2023-08-07)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/Content.d.ts

@@ -6,7 +6,8 @@ interface GraphTooltipArrowContentProps {
     total: bigint;
     totalUnfiltered: bigint;
     row: number | null;
+    level: number;
     isFixed: boolean;
 }
-declare const GraphTooltipArrowContent: ({ table, unit, total, totalUnfiltered, row, isFixed, }: GraphTooltipArrowContentProps) => React.JSX.Element;
+declare const GraphTooltipArrowContent: ({ table, unit, total, totalUnfiltered, row, level, isFixed, }: GraphTooltipArrowContentProps) => React.JSX.Element;
 export default GraphTooltipArrowContent;

package/dist/GraphTooltipArrow/Content.js

@@ -14,20 +14,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { divide, getLastItem, valueFormatter } from '@parca/utilities';
-import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_FUNCTION_START_LINE, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_LOCATION_LINE, FIELD_MAPPING_BUILD_ID, FIELD_MAPPING_FILE, } from '../ProfileIcicleGraph/IcicleGraphArrow';
+import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_START_LINE, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_LOCATION_LINE, FIELD_MAPPING_BUILD_ID, FIELD_MAPPING_FILE, } from '../ProfileIcicleGraph/IcicleGraphArrow';
+import { nodeLabel } from '../ProfileIcicleGraph/IcicleGraphArrow/utils';
 import { hexifyAddress, truncateString, truncateStringReverse } from '../utils';
 import { ExpandOnHover } from './ExpandOnHoverValue';
 let timeoutHandle = null;
 const NoData = () => {
     return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
 };
-const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, isFixed, }) => {
+const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, level, isFixed, }) => {
     const [isCopied, setIsCopied] = useState(false);
     if (row === null) {
         return _jsx(_Fragment, {});
     }
     const locationAddress = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
-    const functionName = table.getChild(FIELD_FUNCTION_NAME)?.get(row) ?? '';
     const cumulative = table.getChild(FIELD_CUMULATIVE)?.get(row) ?? 0n;
     const diff = table.getChild(FIELD_DIFF)?.get(row) ?? 0n;
     const onCopy = () => {
@@ -43,6 +43,8 @@ const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, is
     const diffValueText = diffSign + valueFormatter(diff, unit, 1);
     const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
     const diffText = `${diffValueText} (${diffPercentageText})`;
+    const name = nodeLabel(table, row, level, false);
+    console.log(level, row, name);
     const getTextForCumulative = (hoveringNodeCumulative) => {
         const filtered = totalUnfiltered > total
             ? ` / ${(100 * divide(hoveringNodeCumulative, total)).toFixed(2)}% of filtered`
@@ -50,7 +52,7 @@ const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, is
         return `${valueFormatter(hoveringNodeCumulative, unit, 2)}
     (${(100 * divide(hoveringNodeCumulative, totalUnfiltered)).toFixed(2)}%${filtered})`;
     };
-    return (_jsx("div", { className: `flex text-sm ${isFixed ? 'w-full' : ''}`, children: _jsx("div", { className: `m-auto w-full ${isFixed ? 'w-full' : ''}`, children: _jsxs("div", { className: "min-h-52 flex w-[500px] flex-col justify-between rounded-lg border border-gray-300 bg-gray-50 p-3 shadow-lg dark:border-gray-500 dark:bg-gray-900", children: [_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "mx-2", children: [_jsx("div", { className: "flex h-10 items-center break-all font-semibold", children: row === 0 ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: functionName !== '' ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: functionName, children: _jsx("button", { className: "cursor-pointer text-left", children: functionName }) })) : (_jsx(_Fragment, { children: locationAddress !== 0n ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(locationAddress), children: _jsx("button", { className: "cursor-pointer text-left", children: hexifyAddress(locationAddress) }) })) : (_jsx("p", { children: "unknown" })) })) })) }), _jsx("table", { className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: getTextForCumulative(cumulative), children: _jsx("button", { className: "cursor-pointer", children: getTextForCumulative(cumulative) }) }) })] }), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Diff" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: diffText, children: _jsx("button", { className: "cursor-pointer", children: diffText }) }) })] })), _jsx(TooltipMetaInfo, { table: table, row: row, onCopy: onCopy })] }) })] }) }), _jsx("span", { className: "mx-2 block text-xs text-gray-500", children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' })] }) }) }));
+    return (_jsx("div", { className: `flex text-sm ${isFixed ? 'w-full' : ''}`, children: _jsx("div", { className: `m-auto w-full ${isFixed ? 'w-full' : ''}`, children: _jsxs("div", { className: "min-h-52 flex w-[500px] flex-col justify-between rounded-lg border border-gray-300 bg-gray-50 p-3 shadow-lg dark:border-gray-500 dark:bg-gray-900", children: [_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "mx-2", children: [_jsx("div", { className: "flex h-10 items-center break-all font-semibold", children: row === 0 ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: name !== '' ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: name, children: _jsx("button", { className: "cursor-pointer text-left", children: name }) })) : (_jsx(_Fragment, { children: locationAddress !== 0n ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(locationAddress), children: _jsx("button", { className: "cursor-pointer text-left", children: hexifyAddress(locationAddress) }) })) : (_jsx("p", { children: "unknown" })) })) })) }), _jsx("table", { className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: getTextForCumulative(cumulative), children: _jsx("button", { className: "cursor-pointer", children: getTextForCumulative(cumulative) }) }) })] }), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Diff" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: diffText, children: _jsx("button", { className: "cursor-pointer", children: diffText }) }) })] })), _jsx(TooltipMetaInfo, { table: table, row: row, onCopy: onCopy })] }) })] }) }), _jsx("span", { className: "mx-2 block text-xs text-gray-500", children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' })] }) }) }));
 };
 const TooltipMetaInfo = ({ table, 
 // total,

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

@@ -14,6 +14,7 @@ interface IcicleGraphNodesProps {
     curPath: string[];
     setCurPath: (path: string[]) => void;
     setHoveringRow: (row: number | null) => void;
+    setHoveringLevel: (level: number | null) => void;
     path: string[];
     xScale: (value: bigint) => number;
     searchString?: string;
@@ -39,6 +40,7 @@ interface IcicleNodeProps {
     total: bigint;
     setCurPath: (path: string[]) => void;
     setHoveringRow: (row: number | null) => void;
+    setHoveringLevel: (level: number | null) => void;
     xScale: (value: bigint) => number;
     isRoot?: boolean;
     searchString?: string;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

@@ -20,7 +20,7 @@ import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, FIEL
 import useNodeColor from './useNodeColor';
 import { nodeLabel } from './utils';
 export const RowHeight = 26;
-export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ table, childRows, mappingColors, x, y, xScale, total, totalWidth, level, path, setCurPath, setHoveringRow, curPath, sortBy, searchString, darkMode, compareMode, }) {
+export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ table, childRows, mappingColors, x, y, xScale, total, totalWidth, level, path, setCurPath, setHoveringRow, setHoveringLevel, curPath, sortBy, searchString, darkMode, compareMode, }) {
     const cumulatives = table.getChild(FIELD_CUMULATIVE);
     if (childRows === undefined || childRows.length === 0) {
         return _jsx(_Fragment, {});
@@ -28,14 +28,14 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ tab
     childRows =
         curPath.length === 0
             ? childRows
-            : childRows.filter(c => nodeLabel(table, c, false) === curPath[0]);
+            : childRows.filter(c => nodeLabel(table, c, level, false) === curPath[0]);
     let childrenCumulative = BigInt(0);
     const childrenElements = [];
     childRows.forEach((child, i) => {
         const xStart = Math.floor(xScale(childrenCumulative));
         const c = cumulatives?.get(child);
         childrenCumulative += c;
-        childrenElements.push(_jsx(IcicleNode, { table: table, row: child, mappingColors: mappingColors, x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, setHoveringRow: setHoveringRow, level: level, curPath: curPath, total: total, xScale: xScale, sortBy: sortBy, searchString: searchString, darkMode: darkMode, compareMode: compareMode }, `node-${level}-${i}`));
+        childrenElements.push(_jsx(IcicleNode, { table: table, row: child, mappingColors: mappingColors, x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, level: level, curPath: curPath, total: total, xScale: xScale, sortBy: sortBy, searchString: searchString, darkMode: darkMode, compareMode: compareMode }, `node-${level}-${i}`));
     });
     return _jsx("g", { transform: `translate(${x}, ${y})`, children: childrenElements });
 });
@@ -48,7 +48,7 @@ const fadedIcicleRectStyles = {
     transition: 'opacity .15s linear',
     opacity: '0.5',
 };
-export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, mappingColors, x, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, isRoot = false, searchString, setHoveringRow, sortBy, darkMode, compareMode, }) {
+export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, mappingColors, x, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, isRoot = false, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, }) {
     const { isShiftDown } = useKeyDown();
     // get the columns to read from
     const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
@@ -117,8 +117,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
         functionName,
     });
     const name = useMemo(() => {
-        return isRoot ? 'root' : nodeLabel(table, row, binaries.length > 1);
-    }, [table, row, isRoot, binaries]);
+        return isRoot ? 'root' : nodeLabel(table, row, level, binaries.length > 1);
+    }, [table, row, level, isRoot, binaries]);
     const nextPath = path.concat([name]);
     const isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
     const styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
@@ -143,11 +143,13 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
         if (isShiftDown)
             return;
         setHoveringRow(row);
+        setHoveringLevel(level);
     };
     const onMouseLeave = () => {
         if (isShiftDown)
             return;
         setHoveringRow(null);
+        setHoveringLevel(null);
     };
     return (_jsxs(_Fragment, { children: [_jsxs("g", { transform: `translate(${x + 1}, ${y + 1})`, style: styles, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: () => {
                     setCurPath(nextPath);
@@ -155,5 +157,5 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
                             fill: colorResult,
                         }, className: cx('stroke-white dark:stroke-gray-700', {
                             'opacity-50': isHighlightEnabled && !isHighlighted,
-                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: name }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, mappingColors: mappingColors, childRows: childRows, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, setHoveringRow: setHoveringRow, searchString: searchString, sortBy: sortBy, darkMode: darkMode, compareMode: compareMode }))] }));
+                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: name }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, mappingColors: mappingColors, childRows: childRows, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, searchString: searchString, sortBy: sortBy, darkMode: darkMode, compareMode: compareMode }))] }));
 });

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -37,6 +37,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ table, total, f
     const isDarkMode = useAppSelector(selectDarkMode);
     const [height, setHeight] = useState(0);
     const [hoveringRow, setHoveringRow] = useState(null);
+    const [hoveringLevel, setHoveringLevel] = useState(null);
     const svg = useRef(null);
     const ref = useRef(null);
     const currentSearchString = selectQueryParam('search_string') ?? '';
@@ -108,7 +109,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ table, total, f
     }, [total, width]);
     // 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, 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, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode }) }) }) }));
+        return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, 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 }) }) }) }));
     }, [
         compareMode,
         curPath,
@@ -126,6 +127,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ table, total, f
     if (table.numRows === 0 || width === undefined) {
         return _jsx(_Fragment, {});
     }
-    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltipArrow, { contextElement: svg.current, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, isFixed: false, total: total, totalUnfiltered: total + filtered, unit: sampleUnit }) }), root] }));
+    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltipArrow, { contextElement: svg.current, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, isFixed: false, total: total, totalUnfiltered: total + filtered, unit: sampleUnit }) }), root] }));
 });
 export default IcicleGraphArrow;

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

@@ -1,4 +1,4 @@
 import { Table } from 'apache-arrow';
 import { type Feature } from '@parca/store';
-export declare function nodeLabel(table: Table<any>, row: number, showBinaryName: boolean): string;
+export declare function nodeLabel(table: Table<any>, row: number, level: number, showBinaryName: boolean): string;
 export declare const extractFeature: (mapping: string) => Feature;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.js

@@ -14,9 +14,15 @@ import { EVERYTHING_ELSE, FEATURE_TYPES } from '@parca/store';
 import { getLastItem } from '@parca/utilities';
 import { hexifyAddress } from '../../utils';
 import { FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE } from './index';
-export function nodeLabel(table, row, showBinaryName) {
+export function nodeLabel(table, row, level, showBinaryName) {
     const functionName = table.getChild(FIELD_FUNCTION_NAME)?.get(row);
     if (functionName !== null && functionName !== '') {
+        if (level === 1 && functionName.startsWith('{') && functionName.endsWith('}')) {
+            return Object.entries(JSON.parse(functionName))
+                .sort(([a], [b]) => a.localeCompare(b))
+                .map(([k, v]) => `${k}="${v}"`)
+                .join(', ');
+        }
         return functionName;
     }
     let mappingString = '';

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.219",
+  "version": "0.16.221",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.81",
-    "@parca/components": "^0.16.175",
+    "@parca/client": "^0.16.82",
+    "@parca/components": "^0.16.176",
     "@parca/dynamicsize": "^0.16.54",
-    "@parca/hooks": "^0.0.16",
+    "@parca/hooks": "^0.0.17",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.94",
-    "@parca/utilities": "^0.0.23",
+    "@parca/store": "^0.16.95",
+    "@parca/utilities": "^0.0.24",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.3",
     "apache-arrow": "^12.0.0",
@@ -47,5 +47,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "b1ee3cd937d11b03c4f5c9f6cee1cff753f27fa5"
+  "gitHead": "247b54f3d042a88c844577df37b008236028baf3"
 }

package/src/GraphTooltipArrow/Content.tsx

@@ -22,7 +22,6 @@ import {
   FIELD_CUMULATIVE,
   FIELD_DIFF,
   FIELD_FUNCTION_FILE_NAME,
-  FIELD_FUNCTION_NAME,
   FIELD_FUNCTION_START_LINE,
   FIELD_LABELS,
   FIELD_LOCATION_ADDRESS,
@@ -30,6 +29,7 @@ import {
   FIELD_MAPPING_BUILD_ID,
   FIELD_MAPPING_FILE,
 } from '../ProfileIcicleGraph/IcicleGraphArrow';
+import {nodeLabel} from '../ProfileIcicleGraph/IcicleGraphArrow/utils';
 import {hexifyAddress, truncateString, truncateStringReverse} from '../utils';
 import {ExpandOnHover} from './ExpandOnHoverValue';
 
@@ -41,6 +41,7 @@ interface GraphTooltipArrowContentProps {
   total: bigint;
   totalUnfiltered: bigint;
   row: number | null;
+  level: number;
   isFixed: boolean;
 }
 
@@ -54,6 +55,7 @@ const GraphTooltipArrowContent = ({
   total,
   totalUnfiltered,
   row,
+  level,
   isFixed,
 }: GraphTooltipArrowContentProps): React.JSX.Element => {
   const [isCopied, setIsCopied] = useState<boolean>(false);
@@ -63,7 +65,6 @@ const GraphTooltipArrowContent = ({
   }
 
   const locationAddress: bigint = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
-  const functionName: string = table.getChild(FIELD_FUNCTION_NAME)?.get(row) ?? '';
   const cumulative: bigint = table.getChild(FIELD_CUMULATIVE)?.get(row) ?? 0n;
   const diff: bigint = table.getChild(FIELD_DIFF)?.get(row) ?? 0n;
 
@@ -83,6 +84,9 @@ const GraphTooltipArrowContent = ({
   const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
   const diffText = `${diffValueText} (${diffPercentageText})`;
 
+  const name = nodeLabel(table, row, level, false);
+  console.log(level, row, name);
+
   const getTextForCumulative = (hoveringNodeCumulative: bigint): string => {
     const filtered =
       totalUnfiltered > total
@@ -103,9 +107,9 @@ const GraphTooltipArrowContent = ({
                   <p>root</p>
                 ) : (
                   <>
-                    {functionName !== '' ? (
-                      <CopyToClipboard onCopy={onCopy} text={functionName}>
-                        <button className="cursor-pointer text-left">{functionName}</button>
+                    {name !== '' ? (
+                      <CopyToClipboard onCopy={onCopy} text={name}>
+                        <button className="cursor-pointer text-left">{name}</button>
                       </CopyToClipboard>
                     ) : (
                       <>

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx

@@ -45,6 +45,7 @@ interface IcicleGraphNodesProps {
   curPath: string[];
   setCurPath: (path: string[]) => void;
   setHoveringRow: (row: number | null) => void;
+  setHoveringLevel: (level: number | null) => void;
   path: string[];
   xScale: (value: bigint) => number;
   searchString?: string;
@@ -66,6 +67,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
   path,
   setCurPath,
   setHoveringRow,
+  setHoveringLevel,
   curPath,
   sortBy,
   searchString,
@@ -81,7 +83,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
   childRows =
     curPath.length === 0
       ? childRows
-      : childRows.filter(c => nodeLabel(table, c, false) === curPath[0]);
+      : childRows.filter(c => nodeLabel(table, c, level, false) === curPath[0]);
 
   let childrenCumulative = BigInt(0);
   const childrenElements: ReactNode[] = [];
@@ -103,6 +105,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
         path={path}
         setCurPath={setCurPath}
         setHoveringRow={setHoveringRow}
+        setHoveringLevel={setHoveringLevel}
         level={level}
         curPath={curPath}
         total={total}
@@ -136,6 +139,7 @@ interface IcicleNodeProps {
   total: bigint;
   setCurPath: (path: string[]) => void;
   setHoveringRow: (row: number | null) => void;
+  setHoveringLevel: (level: number | null) => void;
   xScale: (value: bigint) => number;
   isRoot?: boolean;
   searchString?: string;
@@ -171,6 +175,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   isRoot = false,
   searchString,
   setHoveringRow,
+  setHoveringLevel,
   sortBy,
   darkMode,
   compareMode,
@@ -246,8 +251,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     functionName,
   });
   const name = useMemo(() => {
-    return isRoot ? 'root' : nodeLabel(table, row, binaries.length > 1);
-  }, [table, row, isRoot, binaries]);
+    return isRoot ? 'root' : nodeLabel(table, row, level, binaries.length > 1);
+  }, [table, row, level, isRoot, binaries]);
   const nextPath = path.concat([name]);
   const isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
   const styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
@@ -277,11 +282,13 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const onMouseEnter = (): void => {
     if (isShiftDown) return;
     setHoveringRow(row);
+    setHoveringLevel(level);
   };
 
   const onMouseLeave = (): void => {
     if (isShiftDown) return;
     setHoveringRow(null);
+    setHoveringLevel(null);
   };
 
   return (
@@ -331,6 +338,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
           curPath={nextCurPath}
           setCurPath={setCurPath}
           setHoveringRow={setHoveringRow}
+          setHoveringLevel={setHoveringLevel}
           searchString={searchString}
           sortBy={sortBy}
           darkMode={darkMode}

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -80,6 +80,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
 
   const [height, setHeight] = useState(0);
   const [hoveringRow, setHoveringRow] = useState<number | null>(null);
+  const [hoveringLevel, setHoveringLevel] = useState<number | null>(null);
   const svg = useRef(null);
   const ref = useRef<SVGGElement>(null);
 
@@ -190,6 +191,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
               isRoot={true}
               searchString={currentSearchString}
               setHoveringRow={setHoveringRow}
+              setHoveringLevel={setHoveringLevel}
               sortBy={sortBy}
               darkMode={isDarkMode}
               compareMode={compareMode}
@@ -228,6 +230,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
         <GraphTooltipArrowContent
           table={table}
           row={hoveringRow}
+          level={hoveringLevel ?? 0}
           isFixed={false}
           total={total}
           totalUnfiltered={total + filtered}

package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts

@@ -19,9 +19,20 @@ import {getLastItem} from '@parca/utilities';
 import {hexifyAddress} from '../../utils';
 import {FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE} from './index';
 
-export function nodeLabel(table: Table<any>, row: number, showBinaryName: boolean): string {
+export function nodeLabel(
+  table: Table<any>,
+  row: number,
+  level: number,
+  showBinaryName: boolean
+): string {
   const functionName: string | null = table.getChild(FIELD_FUNCTION_NAME)?.get(row);
   if (functionName !== null && functionName !== '') {
+    if (level === 1 && functionName.startsWith('{') && functionName.endsWith('}')) {
+      return Object.entries(JSON.parse(functionName))
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([k, v]) => `${k}="${v as string}"`)
+        .join(', ');
+    }
     return functionName;
   }