@parca/profile 0.17.2 → 0.17.4

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.17.4](https://github.com/parca-dev/parca/compare/@parca/profile@0.17.3...@parca/profile@0.17.4) (2025-06-02)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.17.3](https://github.com/parca-dev/parca/compare/@parca/profile@0.17.2...@parca/profile@0.17.3) (2025-05-30)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.17.2](https://github.com/parca-dev/parca/compare/@parca/profile@0.17.1...@parca/profile@0.17.2) (2025-05-30)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/Content.d.ts

@@ -8,10 +8,9 @@ interface GraphTooltipArrowContentProps {
     total: bigint;
     totalUnfiltered: bigint;
     row: number | null;
-    level: number;
     isFixed: boolean;
     compareAbsolute: boolean;
 }
-declare const GraphTooltipArrowContent: ({ table, profileType, unit, total, totalUnfiltered, row, level, isFixed, compareAbsolute, }: GraphTooltipArrowContentProps) => React.JSX.Element;
+declare const GraphTooltipArrowContent: ({ table, profileType, unit, total, totalUnfiltered, row, isFixed, compareAbsolute, }: GraphTooltipArrowContentProps) => React.JSX.Element;
 export default GraphTooltipArrowContent;
 //# sourceMappingURL=Content.d.ts.map

package/dist/GraphTooltipArrow/Content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/GraphTooltipArrow/Content.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAGnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,6BAA6B;IACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAMD,QAAA,MAAM,wBAAwB,gGAU3B,6BAA6B,KAAG,KAAK,CAAC,GAAG,CAAC,OAgF5C,CAAC;AAuFF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/GraphTooltipArrow/Content.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAGnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,6BAA6B;IACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAMD,QAAA,MAAM,wBAAwB,yFAS3B,6BAA6B,KAAG,KAAK,CAAC,GAAG,CAAC,OA+E5C,CAAC;AAuFF,eAAe,wBAAwB,CAAC"}

package/dist/GraphTooltipArrow/Content.js

@@ -9,7 +9,7 @@ import { useGraphTooltipMetaInfo } from './useGraphTooltipMetaInfo';
 const NoData = () => {
     return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
 };
-const GraphTooltipArrowContent = ({ table, profileType, unit, total, totalUnfiltered, row, level, isFixed, compareAbsolute, }) => {
+const GraphTooltipArrowContent = ({ table, profileType, unit, total, totalUnfiltered, row, isFixed, compareAbsolute, }) => {
     const graphTooltipData = useGraphTooltip({
         table,
         profileType,
@@ -17,7 +17,6 @@ const GraphTooltipArrowContent = ({ table, profileType, unit, total, totalUnfilt
         total,
         totalUnfiltered,
         row,
-        level,
         compareAbsolute,
     });
     if (graphTooltipData === null) {

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.d.ts

@@ -5,11 +5,10 @@ interface Props {
     total: bigint;
     totalUnfiltered: bigint;
     row: number | null;
-    level: number;
     profileType?: ProfileType;
     unit?: string;
     compareAbsolute: boolean;
 }
-export declare const DockedGraphTooltip: ({ table, total, totalUnfiltered, row, level, profileType, unit, compareAbsolute, }: Props) => JSX.Element;
+export declare const DockedGraphTooltip: ({ table, total, totalUnfiltered, row, profileType, unit, compareAbsolute, }: Props) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/DockedGraphTooltip/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAKnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAuBD,eAAO,MAAM,kBAAkB,uFAS5B,KAAK,KAAG,GAAG,CAAC,OAwGd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/DockedGraphTooltip/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAKnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAuBD,eAAO,MAAM,kBAAkB,gFAQ5B,KAAK,KAAG,GAAG,CAAC,OAuGd,CAAC"}

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.js

@@ -25,7 +25,7 @@ const InfoSection = ({ title, value, minWidth = '', }) => {
 const NoData = () => {
     return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
 };
-export const DockedGraphTooltip = ({ table, total, totalUnfiltered, row, level, profileType, unit, compareAbsolute, }) => {
+export const DockedGraphTooltip = ({ table, total, totalUnfiltered, row, profileType, unit, compareAbsolute, }) => {
     let { width } = useWindowSize();
     const { profileExplorer } = useParcaContext();
     const { PaddingX } = profileExplorer ?? { PaddingX: 0 };
@@ -37,7 +37,6 @@ export const DockedGraphTooltip = ({ table, total, totalUnfiltered, row, level,
         total,
         totalUnfiltered,
         row,
-        level,
         compareAbsolute,
     });
     const { labelPairs, functionFilename, file, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row: row ?? 0 });

package/dist/GraphTooltipArrow/useGraphTooltip/index.d.ts

@@ -8,7 +8,6 @@ interface Props {
     totalUnfiltered: bigint;
     compareAbsolute: boolean;
     row: number | null;
-    level: number;
 }
 interface GraphTooltipData {
     name: string;
@@ -19,6 +18,6 @@ interface GraphTooltipData {
     diff: bigint;
     row: number;
 }
-export declare const useGraphTooltip: ({ table, profileType, unit, compareAbsolute, total, totalUnfiltered, row, level, }: Props) => GraphTooltipData | null;
+export declare const useGraphTooltip: ({ table, profileType, unit, compareAbsolute, total, totalUnfiltered, row, }: Props) => GraphTooltipData | null;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/GraphTooltipArrow/useGraphTooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltip/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAW1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,eAAe,uFASzB,KAAK,KAAG,gBAAgB,GAAG,IAyC7B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltip/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAW1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,eAAe,gFAQzB,KAAK,KAAG,gBAAgB,GAAG,IAyC7B,CAAC"}

package/dist/GraphTooltipArrow/useGraphTooltip/index.js

@@ -13,7 +13,7 @@
 import { divide, valueFormatter } from '@parca/utilities';
 import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FLAT, FIELD_LOCATION_ADDRESS, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
 import { getTextForCumulative, nodeLabel } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
-export const useGraphTooltip = ({ table, profileType, unit, compareAbsolute, total, totalUnfiltered, row, level, }) => {
+export const useGraphTooltip = ({ table, profileType, unit, compareAbsolute, total, totalUnfiltered, row, }) => {
     if (row === null || profileType === undefined) {
         return null;
     }
@@ -35,7 +35,7 @@ export const useGraphTooltip = ({ table, profileType, unit, compareAbsolute, tot
     const diffValueText = diffSign + valueFormatter(diff, unit, 1);
     const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
     diffText = compareAbsolute ? `${diffValueText} (${diffPercentageText})` : diffPercentageText;
-    const name = nodeLabel(table, row, level, false);
+    const name = nodeLabel(table, row, false);
     return {
         name,
         locationAddress,

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

@@ -1,6 +1,5 @@
 import { Table } from 'apache-arrow';
 import { ProfileType } from '@parca/parser';
-import { CurrentPathFrame } from './utils';
 interface ContextMenuProps {
     menuId: string;
     table: Table<any>;
@@ -9,14 +8,11 @@ interface ContextMenuProps {
     total: bigint;
     totalUnfiltered: bigint;
     row: number;
-    level: number;
     compareAbsolute: boolean;
-    trackVisibility: (isVisible: boolean) => void;
-    curPath: CurrentPathFrame[];
-    setCurPath: (path: CurrentPathFrame[]) => void;
+    resetPath: () => void;
     hideMenu: () => void;
     hideBinary: (binaryToRemove: string) => void;
 }
-declare const ContextMenu: ({ menuId, table, total, totalUnfiltered, row, level, compareAbsolute, trackVisibility, curPath, setCurPath, hideMenu, profileType, unit, hideBinary, }: ContextMenuProps) => JSX.Element;
+declare const ContextMenu: ({ menuId, table, total, totalUnfiltered, row, compareAbsolute, hideMenu, profileType, unit, hideBinary, resetPath, }: ContextMenuProps) => JSX.Element;
 export default ContextMenu;
 //# sourceMappingURL=ContextMenu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAMnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAM1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAEzC,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,WAAW,2JAed,gBAAgB,KAAG,GAAG,CAAC,OA0LzB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAMnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,WAAW,yHAYd,gBAAgB,KAAG,GAAG,CAAC,OAyLzB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.js

@@ -20,7 +20,7 @@ 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, compareAbsolute, trackVisibility, curPath, setCurPath, hideMenu, profileType, unit, hideBinary, }) => {
+const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, compareAbsolute, hideMenu, profileType, unit, hideBinary, resetPath, }) => {
     const { isDarkMode } = useParcaContext();
     const { enableSourcesView, checkDebuginfoStatusHandler } = useParcaContext();
     const [isGraphTooltipDocked, setIsDocked] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
@@ -31,7 +31,6 @@ const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, level, compar
         total,
         totalUnfiltered,
         row,
-        level,
         compareAbsolute,
     });
     const { functionFilename, functionSystemName, file, openFile, isSourceAvailable, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row });
@@ -46,7 +45,7 @@ const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, level, compar
     const isMappingBuildIDAvailable = mappingBuildID !== null && mappingBuildID !== '';
     const handleViewSourceFile = () => openFile();
     const handleResetView = () => {
-        setCurPath([]);
+        resetPath();
         return hideMenu();
     };
     const handleDockTooltip = () => {
@@ -82,9 +81,9 @@ const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, level, compar
         { 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: "show-in-table", onClick: () => {
+    return (_jsxs(Menu, { id: menuId, 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: "show-in-table", onClick: () => {
                     setSearchString(functionName);
                     setDashboardItems([...dashboardItems, 'table']);
-                }, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:table" }), _jsx("div", { children: "Show in table" })] }) }), _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 graph" })] }) }), _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))) }) }), checkDebuginfoStatusHandler !== undefined ? (_jsx(Item, { id: "check-debuginfo-status", onClick: () => checkDebuginfoStatusHandler(mappingBuildID), disabled: !isMappingBuildIDAvailable, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "bx:bx-info-circle" }), _jsx("div", { className: "relative pr-4", children: "Check debuginfo status" })] }) })) : null, _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'] }) })] }));
+                }, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:table" }), _jsx("div", { children: "Show in table" })] }) }), _jsx(Item, { id: "reset-view", onClick: handleResetView, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "system-uicons:reset" }), _jsx("div", { children: "Reset graph" })] }) }), _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))) }) }), checkDebuginfoStatusHandler !== undefined ? (_jsx(Item, { id: "check-debuginfo-status", onClick: () => checkDebuginfoStatusHandler(mappingBuildID), disabled: !isMappingBuildIDAvailable, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "bx:bx-info-circle" }), _jsx("div", { className: "relative pr-4", children: "Check debuginfo status" })] }) })) : null, _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/ContextMenuWrapper.d.ts

@@ -0,0 +1,20 @@
+import { Table } from 'apache-arrow';
+import { ProfileType } from '@parca/parser';
+interface ContextMenuWrapperProps {
+    menuId: string;
+    table: Table<any>;
+    total: bigint;
+    totalUnfiltered: bigint;
+    profileType?: ProfileType;
+    compareAbsolute: boolean;
+    resetPath: () => void;
+    hideMenu: () => void;
+    hideBinary: (binaryToRemove: string) => void;
+    unit?: string;
+}
+export interface ContextMenuWrapperRef {
+    setRow: (row: number) => void;
+}
+declare const ContextMenuWrapper: import("react").ForwardRefExoticComponent<ContextMenuWrapperProps & import("react").RefAttributes<ContextMenuWrapperRef>>;
+export default ContextMenuWrapper;
+//# sourceMappingURL=ContextMenuWrapper.d.ts.map

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuWrapper.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,kBAAkB,2HAUvB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}

package/{src/Callgraph/constants.ts → dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } 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.
@@ -10,6 +11,14 @@
 // 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.
-
-export const DEFAULT_NODE_HEIGHT = 20;
-export const GRAPH_MARGIN = 15;
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import ContextMenu from './ContextMenu';
+const ContextMenuWrapper = forwardRef((props, ref) => {
+    const [row, setRow] = useState(0);
+    useImperativeHandle(ref, () => ({
+        setRow,
+    }));
+    return _jsx(ContextMenu, { ...props, row: row });
+});
+ContextMenuWrapper.displayName = 'ContextMenuWrapper';
+export default ContextMenuWrapper;

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

@@ -1,71 +1,29 @@
 import React from 'react';
 import { Table } from 'apache-arrow';
 import 'react-contexify/dist/ReactContexify.css';
-import { ProfileType } from '@parca/parser';
-import { CurrentPathFrame } from './utils';
+import { ProfileSource } from '../../ProfileSource';
 export declare const RowHeight = 26;
-interface IcicleGraphNodesProps {
-    table: Table<any>;
-    row: number;
-    colors: colorByColors;
-    colorBy: string;
-    childRows: number[];
-    x: number;
-    y: number;
-    total: bigint;
-    totalWidth: number;
-    level: number;
-    curPath: CurrentPathFrame[];
-    setCurPath: (path: CurrentPathFrame[]) => void;
-    setHoveringRow: (row: number | null) => void;
-    setHoveringLevel: (level: number | null) => void;
-    path: CurrentPathFrame[];
-    xScale: (value: bigint) => number;
-    searchString?: string;
-    sortBy: string;
-    darkMode: boolean;
-    compareMode: boolean;
-    profileType?: ProfileType;
-    isContextMenuOpen: boolean;
-    hoveringName: string | null;
-    setHoveringName: (name: string | null) => void;
-    hoveringRow: number | null;
-    colorForSimilarNodes: string;
-    highlightSimilarStacksPreference: boolean;
-}
-export declare const IcicleGraphNodes: React.NamedExoticComponent<IcicleGraphNodesProps>;
 export interface colorByColors {
     [key: string]: string;
 }
 export interface IcicleNodeProps {
-    x: number;
-    y: number;
     height: number;
     totalWidth: number;
-    curPath: CurrentPathFrame[];
-    level: number;
     table: Table<any>;
     row: number;
     colors: colorByColors;
     colorBy: string;
-    path: CurrentPathFrame[];
-    total: bigint;
-    setCurPath: (path: CurrentPathFrame[]) => void;
-    setHoveringRow: (row: number | null) => void;
-    setHoveringLevel: (level: number | null) => void;
-    xScale: (value: bigint) => number;
-    isRoot?: boolean;
     searchString?: string;
-    sortBy: string;
     darkMode: boolean;
     compareMode: boolean;
-    profileType?: ProfileType;
-    isContextMenuOpen: boolean;
-    hoveringName: string | null;
-    setHoveringName: (name: string | null) => void;
-    hoveringRow: number | null;
+    onContextMenu: (e: React.MouseEvent, row: number) => void;
     colorForSimilarNodes: string;
-    highlightSimilarStacksPreference: boolean;
+    selectedRow: number;
+    onClick: () => void;
+    isIcicleChart: boolean;
+    profileSource: ProfileSource;
+    hoveringRow?: number;
+    setHoveringRow: (row: number | undefined) => void;
 }
 export declare const icicleRectStyles: {
     cursor: string;
@@ -77,5 +35,4 @@ export declare const fadedIcicleRectStyles: {
     opacity: string;
 };
 export declare const IcicleNode: React.NamedExoticComponent<IcicleNodeProps>;
-export {};
 //# sourceMappingURL=IcicleGraphNodes.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAMnC,OAAO,yCAAyC,CAAC;AAIjD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAgBlD,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,oBAAoB,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAG7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,gBAAgB;;;CAG5B,CAAC;AACF,eAAO,MAAM,qBAAqB;;;;CAIjC,CAAC;AAEF,eAAO,MAAM,UAAU,6CA4KrB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

@@ -14,32 +14,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import React, { useMemo } from 'react';
 import cx from 'classnames';
 import { selectBinaries, useAppSelector } from '@parca/store';
-import { isSearchMatch, scaleLinear } from '@parca/utilities';
+import { isSearchMatch } from '@parca/utilities';
 import 'react-contexify/dist/ReactContexify.css';
 import TextWithEllipsis from './TextWithEllipsis';
-import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_MAPPING_FILE, } from './index';
+import { FIELD_CUMULATIVE, FIELD_DEPTH, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_MAPPING_FILE, FIELD_TIMESTAMP, FIELD_VALUE_OFFSET, } from './index';
 import useNodeColor from './useNodeColor';
-import { arrowToString, getCurrentPathFrameData, isCurrentPathFrameMatch, nodeLabel, } from './utils';
+import { arrowToString, boundsFromProfileSource, nodeLabel } from './utils';
 export const RowHeight = 26;
-export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ table, childRows, colors, colorBy, x, y, xScale, total, totalWidth, level, path, setCurPath, setHoveringRow, setHoveringLevel, curPath, sortBy, searchString, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
-    const cumulatives = table.getChild(FIELD_CUMULATIVE);
-    if (childRows === undefined || childRows.length === 0) {
-        return _jsx(_Fragment, {});
-    }
-    childRows =
-        curPath.length === 0
-            ? childRows
-            : childRows.filter(c => isCurrentPathFrameMatch(table, c, level, curPath[0]));
-    let childrenCumulative = BigInt(0);
-    const childrenElements = [];
-    childRows.forEach((child, i) => {
-        const xStart = Math.floor(xScale(BigInt(childrenCumulative)));
-        const c = BigInt(cumulatives?.get(child));
-        childrenCumulative += c;
-        childrenElements.push(_jsx(IcicleNode, { table: table, row: child, colors: colors, colorBy: colorBy, 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, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }, `node-${level}-${i}`));
-    });
-    return _jsx("g", { transform: `translate(${x}, ${y})`, children: childrenElements });
-});
 export const icicleRectStyles = {
     cursor: 'pointer',
     transition: 'opacity .15s linear',
@@ -49,100 +30,28 @@ export const fadedIcicleRectStyles = {
     transition: 'opacity .15s linear',
     opacity: '0.5',
 };
-export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, colors, colorBy, x, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, isRoot = false, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
+export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, colors, colorBy, height, totalWidth, searchString, darkMode, compareMode, colorForSimilarNodes, selectedRow, onClick, onContextMenu, hoveringRow, setHoveringRow, isIcicleChart, profileSource, }) {
     // get the columns to read from
     const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
     const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
     const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+    const depthColumn = table.getChild(FIELD_DEPTH);
     const diffColumn = table.getChild(FIELD_DIFF);
     const filenameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
+    const valueOffsetColumn = table.getChild(FIELD_VALUE_OFFSET);
+    const tsColumn = table.getChild(FIELD_TIMESTAMP);
     // get the actual values from the columns
     const mappingFile = arrowToString(mappingColumn?.get(row));
     const functionName = arrowToString(functionNameColumn?.get(row));
     const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
     const diff = diffColumn?.get(row) !== null ? BigInt(diffColumn?.get(row)) : null;
-    const childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []);
     const filename = arrowToString(filenameColumn?.get(row));
-    const colorAttribute = useMemo(() => {
-        let attr;
-        if (colorBy === 'filename') {
-            attr = filename;
-        }
-        else if (colorBy === 'binary') {
-            attr = mappingFile;
-        }
-        return attr ?? null; // Provide a default value of null if attr is undefined
-    }, [colorBy, filename, mappingFile]);
+    const depth = depthColumn?.get(row) ?? 0;
+    const valueOffset = valueOffsetColumn?.get(row) !== null ? BigInt(valueOffsetColumn?.get(row)) : 0n;
+    const colorAttribute = colorBy === 'filename' ? filename : colorBy === 'binary' ? mappingFile : null;
     const colorsMap = colors;
-    const highlightedNodes = useMemo(() => {
-        if (!highlightSimilarStacksPreference) {
-            return null;
-        }
-        if (functionName != null && functionName === hoveringName) {
-            return { functionName, row: hoveringRow };
-        }
-        return null; // Nothing to highlight
-    }, [functionName, hoveringName, hoveringRow, highlightSimilarStacksPreference]);
-    const shouldBeHighlightedIfSimilarStacks = useMemo(() => {
-        return highlightedNodes !== null && row !== highlightedNodes.row;
-    }, [row, highlightedNodes]);
-    // TODO: Maybe it's better to pass down the sorter function as prop instead of figuring this out here.
-    switch (sortBy) {
-        case FIELD_FUNCTION_NAME:
-            childRows.sort((a, b) => {
-                // TODO: Support fallthrough to comparing addresses or something
-                const afn = arrowToString(functionNameColumn?.get(a));
-                const bfn = arrowToString(functionNameColumn?.get(b));
-                if (afn !== null && bfn !== null) {
-                    return afn.localeCompare(bfn);
-                }
-                if (afn === null && bfn !== null) {
-                    return -1;
-                }
-                if (afn !== null && bfn === null) {
-                    return 1;
-                }
-                // both are null
-                return 0;
-            });
-            break;
-        case FIELD_CUMULATIVE:
-            childRows.sort((a, b) => {
-                const aCumulative = cumulativeColumn?.get(a);
-                const bCumulative = cumulativeColumn?.get(b);
-                return Number(bCumulative - aCumulative);
-            });
-            break;
-        case FIELD_DIFF:
-            childRows.sort((a, b) => {
-                let aRatio = null;
-                const aDiff = diffColumn?.get(a) !== null ? BigInt(diffColumn?.get(a)) : null;
-                if (aDiff !== null) {
-                    const cumulative = cumulativeColumn?.get(a) !== null ? BigInt(cumulativeColumn?.get(a)) : 0n;
-                    const prev = cumulative - aDiff;
-                    aRatio = Number(aDiff) / Number(prev);
-                }
-                let bRatio = null;
-                const bDiff = diffColumn?.get(b) !== null ? BigInt(diffColumn?.get(b)) : null;
-                if (bDiff !== null) {
-                    const cumulative = cumulativeColumn?.get(b) !== null ? BigInt(cumulativeColumn?.get(b)) : 0n;
-                    const prev = cumulative - bDiff;
-                    bRatio = Number(bDiff) / Number(prev);
-                }
-                if (aRatio !== null && bRatio !== null) {
-                    return bRatio - aRatio;
-                }
-                if (aRatio === null && bRatio !== null) {
-                    return -1;
-                }
-                if (aRatio !== null && bRatio === null) {
-                    return 1;
-                }
-                // both are null
-                return 0;
-            });
-            break;
-    }
+    const hoveringName = hoveringRow !== undefined ? arrowToString(functionNameColumn?.get(hoveringRow)) : '';
+    const shouldBeHighlighted = functionName != null && hoveringName != null && functionName === hoveringName;
     const binaries = useAppSelector(selectBinaries);
     const colorResult = useNodeColor({
         isDarkMode: darkMode,
@@ -153,50 +62,64 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, col
         colorAttribute,
     });
     const name = useMemo(() => {
-        return isRoot ? 'root' : nodeLabel(table, row, level, binaries.length > 1);
-    }, [table, row, level, isRoot, binaries]);
-    const currentPathFrame = getCurrentPathFrameData(table, row, level);
-    const nextPath = path.concat([currentPathFrame]);
-    const isFaded = curPath.length > 0 && !isCurrentPathFrameMatch(table, row, level, curPath[curPath.length - 1]);
-    const styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
-    const nextLevel = level + 1;
-    const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
-    const newXScale = nextCurPath.length === 0 && curPath.length === 1
-        ? scaleLinear([0n, BigInt(cumulative)], [0, totalWidth])
-        : xScale;
-    const width = nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
-        ? totalWidth
-        : xScale(BigInt(cumulative));
+        return row === 0 ? 'root' : nodeLabel(table, row, binaries.length > 1);
+    }, [table, row, binaries]);
     const { isHighlightEnabled = false, isHighlighted = false } = useMemo(() => {
         if (searchString === undefined || searchString === '') {
             return { isHighlightEnabled: false };
         }
         return { isHighlightEnabled: true, isHighlighted: isSearchMatch(searchString, name) };
     }, [searchString, name]);
+    const selectionOffset = valueOffsetColumn?.get(selectedRow) !== null ? BigInt(valueOffsetColumn?.get(selectedRow)) : 0n;
+    const selectionCumulative = cumulativeColumn?.get(selectedRow) !== null ? BigInt(cumulativeColumn?.get(selectedRow)) : 0n;
+    if (valueOffset + cumulative <= selectionOffset ||
+        valueOffset >= selectionOffset + selectionCumulative) {
+        // If the end of the node is before the selection offset or the start of the node is after the selection offset + totalWidth, we don't render it.
+        return _jsx(_Fragment, {});
+    }
+    if (row === 0 && isIcicleChart) {
+        // The root node is not rendered in the icicle chart, so we return null.
+        return _jsx(_Fragment, {});
+    }
+    // Cumulative can be larger than total when a selection is made. All parents of the selection are likely larger, but we want to only show them as 100% in the graph.
+    const tsBounds = boundsFromProfileSource(profileSource);
+    const total = cumulativeColumn?.get(selectedRow);
+    const totalRatio = cumulative > total ? 1 : Number(cumulative) / Number(total);
+    const width = isIcicleChart
+        ? (Number(cumulative) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
+        : totalRatio * totalWidth;
     if (width <= 1) {
-        return _jsx(_Fragment, { children: null });
+        return _jsx(_Fragment, {});
     }
+    const selectedDepth = depthColumn?.get(selectedRow);
+    const styles = selectedDepth !== undefined && selectedDepth > depth ? fadedIcicleRectStyles : icicleRectStyles;
     const onMouseEnter = () => {
-        if (isContextMenuOpen)
-            return;
         setHoveringRow(row);
-        setHoveringLevel(level);
-        setHoveringName(name);
+        window.dispatchEvent(new CustomEvent('icicle-tooltip-update', {
+            detail: { row },
+        }));
     };
     const onMouseLeave = () => {
-        if (isContextMenuOpen)
-            return;
-        setHoveringRow(null);
-        setHoveringLevel(null);
-        setHoveringName(null);
+        setHoveringRow(undefined);
+        window.dispatchEvent(new CustomEvent('icicle-tooltip-update', {
+            detail: { row: null },
+        }));
+    };
+    const handleContextMenu = (e) => {
+        onContextMenu(e, row);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("g", { transform: `translate(${x + 1}, ${y + 1})`, style: styles, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: () => {
-                    setCurPath(nextPath);
-                }, children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, style: {
-                            fill: colorResult,
-                        }, className: cx(shouldBeHighlightedIfSimilarStacks
-                            ? `${colorForSimilarNodes} stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6`
-                            : 'stroke-white dark:stroke-gray-700', {
-                            'opacity-50': isHighlightEnabled && !isHighlighted,
-                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx(TextWithEllipsis, { text: name, x: 5, y: 15, width: width - 10 }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, colors: colors, colorBy: colorBy, 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, profileType: profileType, compareMode: compareMode, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }))] }));
+    const ts = tsColumn !== null ? Number(tsColumn.get(row)) : 0;
+    const x = isIcicleChart && tsColumn !== null
+        ? ((ts - Number(tsBounds[0])) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
+        : selectedDepth > depth
+            ? 0
+            : ((Number(valueOffset) - Number(selectionOffset)) / Number(total)) * totalWidth;
+    const y = isIcicleChart ? (depth - 1) * height : depth * height;
+    return (_jsx(_Fragment, { children: _jsxs("g", { transform: `translate(${x + 1}, ${y + 1})`, style: styles, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick, onContextMenu: handleContextMenu, children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, style: {
+                        fill: colorResult,
+                    }, className: cx(shouldBeHighlighted
+                        ? `${colorForSimilarNodes} stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6`
+                        : 'stroke-white dark:stroke-gray-700', {
+                        'opacity-50': isHighlightEnabled && !isHighlighted,
+                    }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx(TextWithEllipsis, { text: name, x: 5, y: 15, width: width - 10 }) }))] }) }));
 });

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface MemoizedTooltipProps {
+    contextElement: Element | null;
+    dockedMetainfo: boolean;
+}
+export declare const MemoizedTooltip: React.NamedExoticComponent<MemoizedTooltipProps>;
+export {};
+//# sourceMappingURL=MemoizedTooltip.d.ts.map

package/dist/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MemoizedTooltip.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,kDAoD1B,CAAC"}