@parca/profile 0.16.197 → 0.16.199

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.199](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.198...@parca/profile@0.16.199) (2023-07-05)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.198](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.188...@parca/profile@0.16.198) (2023-07-03)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.197](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.196...@parca/profile@0.16.197) (2023-06-30)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/ExpandOnHoverValue.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    value: string | number | undefined;
+    displayValue?: string | number | undefined;
+}
+export declare const ExpandOnHover: ({ value, displayValue }: Props) => JSX.Element;
+export {};

package/dist/GraphTooltipArrow/ExpandOnHoverValue.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ExpandOnHover = ({ value, displayValue }) => {
+    return (_jsxs("div", { className: "group relative w-full", children: [_jsx("div", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap", children: displayValue ?? value }), _jsx("div", { className: "absolute -inset-2 hidden h-fit max-w-[500px] whitespace-normal break-all rounded bg-gray-50 p-2 shadow-[0_0_10px_2px_rgba(0,0,0,0.3)] group-hover:flex dark:bg-gray-900", children: value })] }));
+};

package/dist/GraphTooltipArrow/index.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Table } from 'apache-arrow';
+import { CallgraphNode, CallgraphNodeMeta, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
+import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+interface ExtendedCallgraphNodeMeta extends CallgraphNodeMeta {
+    lineIndex: number;
+    locationIndex: number;
+}
+interface HoveringNode extends FlamegraphRootNode, FlamegraphNode, CallgraphNode {
+    diff: bigint;
+    meta?: FlamegraphNodeMeta | ExtendedCallgraphNodeMeta;
+}
+interface GraphTooltipProps {
+    table: Table<any>;
+    x?: number;
+    y?: number;
+    unit: string;
+    total: bigint;
+    totalUnfiltered: bigint;
+    hoveringNode?: HoveringNode;
+    contextElement: Element | null;
+    isFixed?: boolean;
+    virtualContextElement?: boolean;
+    strings?: string[];
+    mappings?: Mapping[];
+    locations?: Location[];
+    functions?: ParcaFunction[];
+    type?: string;
+}
+export declare const GraphTooltipContent: ({ hoveringNode, unit, total, totalUnfiltered, isFixed, strings, mappings, locations, functions, type, }: {
+    hoveringNode: HoveringNode;
+    unit: string;
+    total: bigint;
+    totalUnfiltered: bigint;
+    isFixed: boolean;
+    strings?: string[] | undefined;
+    mappings?: Mapping[] | undefined;
+    locations?: Location[] | undefined;
+    functions?: ParcaFunction[] | undefined;
+    type?: string | undefined;
+}) => React.JSX.Element;
+declare const GraphTooltip: ({ table, x, y, unit, total, totalUnfiltered, contextElement, isFixed, virtualContextElement, strings, mappings, locations, functions, type, }: GraphTooltipProps) => React.JSX.Element;
+export default GraphTooltip;

package/dist/GraphTooltipArrow/index.js

@@ -0,0 +1,244 @@
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useEffect, useMemo, useState } from 'react';
+import { pointer } from 'd3-selection';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { usePopper } from 'react-popper';
+import { useKeyDown } from '@parca/components';
+import { selectHoveringRow, useAppSelector } from '@parca/store';
+import { divide, getLastItem, valueFormatter } from '@parca/utilities';
+import { hexifyAddress, truncateString, truncateStringReverse } from '../';
+import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_BUILD_ID, FIELD_MAPPING_FILE, } from '../ProfileIcicleGraph/IcicleGraphArrow';
+import { ExpandOnHover } from './ExpandOnHoverValue';
+const NoData = () => {
+    return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
+};
+const virtualElement = {
+    getBoundingClientRect: () => 
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    ({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    }),
+};
+function generateGetBoundingClientRect(contextElement, x = 0, y = 0) {
+    const domRect = contextElement.getBoundingClientRect();
+    return () => 
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    ({
+        width: 0,
+        height: 0,
+        top: domRect.y + y,
+        left: domRect.x + x,
+        right: domRect.x + x,
+        bottom: domRect.y + y,
+    });
+}
+const TooltipMetaInfo = ({ hoveringNode, onCopy, strings, mappings, locations, functions, type = 'flamegraph', }) => {
+    // populate meta from the flamegraph metadata tables
+    if (type === 'flamegraph' &&
+        locations !== undefined &&
+        hoveringNode.meta?.locationIndex !== undefined &&
+        hoveringNode.meta.locationIndex !== 0) {
+        const location = locations[hoveringNode.meta.locationIndex - 1];
+        hoveringNode.meta.location = location;
+        if (location !== undefined) {
+            if (mappings !== undefined &&
+                location.mappingIndex !== undefined &&
+                location.mappingIndex !== 0) {
+                const mapping = mappings[location.mappingIndex - 1];
+                if (strings !== undefined && mapping !== undefined) {
+                    mapping.file =
+                        mapping?.fileStringIndex !== undefined ? strings[mapping.fileStringIndex] : '';
+                    mapping.buildId =
+                        mapping?.buildIdStringIndex !== undefined ? strings[mapping.buildIdStringIndex] : '';
+                }
+                hoveringNode.meta.mapping = mapping;
+            }
+            if (functions !== undefined &&
+                location.lines !== undefined &&
+                hoveringNode.meta.lineIndex !== undefined &&
+                hoveringNode.meta.lineIndex < location.lines.length) {
+                const func = functions[location.lines[hoveringNode.meta.lineIndex].functionIndex - 1];
+                if (strings !== undefined) {
+                    func.name = strings[func.nameStringIndex];
+                    func.systemName = strings[func.systemNameStringIndex];
+                    func.filename = strings[func.filenameStringIndex];
+                }
+                hoveringNode.meta.function = func;
+            }
+        }
+    }
+    const getTextForFile = (hoveringNode) => {
+        if (hoveringNode.meta?.function == null)
+            return '<unknown>';
+        return `${hoveringNode.meta.function.filename} ${hoveringNode.meta.line?.line !== undefined && hoveringNode.meta.line?.line !== 0n
+            ? ` +${hoveringNode.meta.line.line.toString()}`
+            : `${hoveringNode.meta.function?.startLine !== undefined &&
+                hoveringNode.meta.function?.startLine !== 0n
+                ? ` +${hoveringNode.meta.function.startLine}`
+                : ''}`}`;
+    };
+    const file = getTextForFile(hoveringNode);
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: hoveringNode.meta?.function?.filename == null ||
+                            hoveringNode.meta?.function.filename === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: file, children: _jsx("button", { className: "cursor-pointer whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 40) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: hoveringNode.meta?.location?.address == null ||
+                            hoveringNode.meta?.location.address === 0n ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(hoveringNode.meta.location.address), children: _jsx("button", { className: "cursor-pointer", children: hexifyAddress(hoveringNode.meta.location.address) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: hoveringNode.meta?.mapping == null || hoveringNode.meta.mapping.file === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: hoveringNode.meta.mapping.file, children: _jsx("button", { className: "cursor-pointer", children: getLastItem(hoveringNode.meta.mapping.file) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: hoveringNode.meta?.mapping == null || hoveringNode.meta?.mapping.buildId === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: hoveringNode.meta.mapping.buildId, children: _jsx("button", { className: "cursor-pointer", children: truncateString(getLastItem(hoveringNode.meta.mapping.buildId), 28) }) })) })] })] }));
+};
+let timeoutHandle = null;
+export const GraphTooltipContent = ({ hoveringNode, unit, total, totalUnfiltered, isFixed, strings, mappings, locations, functions, type = 'flamegraph', }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const onCopy = () => {
+        setIsCopied(true);
+        if (timeoutHandle !== null) {
+            clearTimeout(timeoutHandle);
+        }
+        timeoutHandle = setTimeout(() => setIsCopied(false), 3000);
+    };
+    const hoveringNodeCumulative = hoveringNode.cumulative;
+    const diff = hoveringNode.diff;
+    const prevValue = hoveringNodeCumulative - diff;
+    const diffRatio = diff !== 0n ? divide(diff, prevValue) : 0;
+    const diffSign = diff > 0 ? '+' : '';
+    const diffValueText = diffSign + valueFormatter(diff, unit, 1);
+    const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
+    const diffText = `${diffValueText} (${diffPercentageText})`;
+    const getTextForCumulative = (hoveringNodeCumulative) => {
+        const filtered = totalUnfiltered > total
+            ? ` / ${(100 * divide(hoveringNodeCumulative, total)).toFixed(2)}% of filtered`
+            : '';
+        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: hoveringNode.meta === undefined ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: hoveringNode.meta.function !== undefined &&
+                                            hoveringNode.meta.function.name !== '' ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: hoveringNode.meta.function.name, children: _jsx("button", { className: "cursor-pointer text-left", children: hoveringNode.meta.function.name }) })) : (_jsx(_Fragment, { children: hoveringNode.meta.location !== undefined &&
+                                                hoveringNode.meta.location.address !== 0n ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(hoveringNode.meta.location.address), children: _jsx("button", { className: "cursor-pointer text-left", children: hexifyAddress(hoveringNode.meta.location.address) }) })) : (_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(hoveringNodeCumulative), children: _jsx("button", { className: "cursor-pointer", children: getTextForCumulative(hoveringNodeCumulative) }) }) })] }), hoveringNode.diff !== undefined && 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, { onCopy: onCopy, hoveringNode: hoveringNode, strings: strings, mappings: mappings, locations: locations, functions: functions, type: type })] }) })] }) }), _jsx("span", { className: "mx-2 block text-xs text-gray-500", children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' })] }) }) }));
+};
+const GraphTooltip = ({ table, x, y, unit, total, totalUnfiltered, contextElement, isFixed = false, virtualContextElement = true, strings, mappings, locations, functions, type = 'flamegraph', }) => {
+    const hoveringNodeState = useAppSelector(selectHoveringRow);
+    const hoveringNode = useMemo(() => {
+        const s = hoveringNodeState;
+        if (s === undefined) {
+            return undefined;
+        }
+        const mappingFile = table.getChild(FIELD_MAPPING_FILE)?.get(s.row) ?? '';
+        const mappingBuildID = table.getChild(FIELD_MAPPING_BUILD_ID)?.get(s.row) ?? '';
+        const locationAddress = table.getChild(FIELD_LOCATION_ADDRESS)?.get(s.row) ?? 0n;
+        const functionName = table.getChild(FIELD_FUNCTION_NAME)?.get(s.row) ?? '';
+        const functionFileName = table.getChild(FIELD_FUNCTION_FILE_NAME)?.get(s.row) ?? '';
+        const cumulative = table.getChild(FIELD_CUMULATIVE)?.get(s.row) ?? 0n;
+        const diff = table.getChild(FIELD_DIFF)?.get(s.row) ?? 0n;
+        const fhn = {
+            id: '',
+            flat: 0n,
+            children: [],
+            cumulative,
+            diff: diff === null ? 0n : diff,
+            meta: {
+                locationIndex: 0,
+                lineIndex: 0,
+                mapping: {
+                    id: '',
+                    start: 0n,
+                    limit: 0n,
+                    offset: 0n,
+                    file: mappingFile,
+                    buildId: mappingBuildID,
+                    hasFunctions: false,
+                    hasFilenames: false,
+                    hasLineNumbers: false,
+                    hasInlineFrames: false,
+                    fileStringIndex: 0,
+                    buildIdStringIndex: 0,
+                },
+                location: {
+                    id: '',
+                    address: locationAddress,
+                    mappingId: '',
+                    isFolded: false,
+                    lines: [],
+                    mappingIndex: 0,
+                },
+                function: {
+                    id: '',
+                    startLine: 0n,
+                    name: functionName,
+                    systemName: '',
+                    filename: functionFileName,
+                    nameStringIndex: 0,
+                    systemNameStringIndex: 0,
+                    filenameStringIndex: 0,
+                },
+            },
+        };
+        return fhn;
+    }, [table, hoveringNodeState]);
+    const [popperElement, setPopperElement] = useState(null);
+    const { styles, attributes, ...popperProps } = usePopper(virtualContextElement ? virtualElement : contextElement, popperElement, {
+        placement: 'bottom-start',
+        strategy: 'absolute',
+        modifiers: [
+            {
+                name: 'preventOverflow',
+                options: {
+                    tether: false,
+                    altAxis: true,
+                    boundary: contextElement ?? undefined,
+                },
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: [30, 30],
+                },
+            },
+            {
+                name: 'flip',
+                options: {
+                    boundary: contextElement ?? undefined,
+                },
+            },
+        ],
+    });
+    const { isShiftDown } = useKeyDown();
+    useEffect(() => {
+        if (contextElement === null)
+            return;
+        const onMouseMove = (e) => {
+            if (isShiftDown) {
+                return;
+            }
+            let tooltipX = x;
+            let tooltipY = y;
+            if (tooltipX == null || tooltipY == null) {
+                const rel = pointer(e);
+                tooltipX = rel[0];
+                tooltipY = rel[1];
+            }
+            virtualElement.getBoundingClientRect = generateGetBoundingClientRect(contextElement, tooltipX, tooltipY);
+            void popperProps.update?.();
+        };
+        contextElement.addEventListener('mousemove', onMouseMove);
+        return () => {
+            contextElement.removeEventListener('mousemove', onMouseMove);
+        };
+    }, [contextElement, popperProps, isShiftDown, x, y]);
+    if (hoveringNode === undefined || hoveringNode == null)
+        return _jsx(_Fragment, {});
+    return isFixed ? (_jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, totalUnfiltered: totalUnfiltered, isFixed: isFixed, type: type })) : (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: _jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, totalUnfiltered: totalUnfiltered, isFixed: isFixed, strings: strings, mappings: mappings, locations: locations, functions: functions, type: type }) }));
+};
+export default GraphTooltip;

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

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

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.js

@@ -0,0 +1,64 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { 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, }) => {
+    const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
+    const [currentSearchString, setSearchString] = useURLState({ param: 'search_string', navigateTo });
+    const stackColorArray = useMemo(() => {
+        return Object.entries(mappingColors).sort(([featureA], [featureB]) => {
+            if (featureA === EVERYTHING_ELSE) {
+                return 1;
+            }
+            if (featureB === EVERYTHING_ELSE) {
+                return -1;
+            }
+            return featureA?.localeCompare(featureB ?? '') ?? 0;
+        });
+    }, [mappingColors]);
+    if (mappingColors === undefined) {
+        return _jsx(_Fragment, {});
+    }
+    if (Object.entries(mappingColors).length === 0) {
+        return _jsx(_Fragment, {});
+    }
+    if (colorProfileName === 'default' || compareMode) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsx("div", { className: "my-6 flex flex-wrap justify-center gap-2", children: stackColorArray.map(([feature, color]) => {
+            const filteringAllowed = feature !== EVERYTHING_ELSE;
+            const isHighlighted = currentSearchString === feature;
+            return (_jsxs("div", { className: cx('flex items-center justify-between gap-1 text-ellipsis p-1 pr-2', {
+                    'cursor-pointer': filteringAllowed,
+                    'bg-gray-200 dark:bg-gray-800': isHighlighted,
+                }), onClick: () => {
+                    if (!filteringAllowed) {
+                        return;
+                    }
+                    if (isHighlighted) {
+                        setSearchString('');
+                        return;
+                    }
+                    setSearchString(feature);
+                }, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "mr-1 inline-block h-4 w-4", style: { backgroundColor: color } }), _jsx("span", { className: "text-sm", children: feature })] }), isHighlighted ? (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
+                            setSearchString('');
+                            e.stopPropagation();
+                        } })) : null] }, feature));
+        }) }));
+};
+export default ColorStackLegend;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Table } from 'apache-arrow';
+export declare const RowHeight = 26;
+interface IcicleGraphNodesProps {
+    table: Table<any>;
+    row: number;
+    mappingColors: mappingColors;
+    childRows: number[];
+    x: number;
+    y: number;
+    total: bigint;
+    totalWidth: number;
+    level: number;
+    curPath: string[];
+    setCurPath: (path: string[]) => void;
+    path: string[];
+    xScale: (value: bigint) => number;
+    searchString?: string;
+    sortBy: string;
+    darkMode: boolean;
+    compareMode: boolean;
+}
+export declare const IcicleGraphNodes: React.NamedExoticComponent<IcicleGraphNodesProps>;
+export interface mappingColors {
+    [key: string]: string;
+}
+interface IcicleNodeProps {
+    x: number;
+    y: number;
+    height: number;
+    totalWidth: number;
+    curPath: string[];
+    level: number;
+    table: Table<any>;
+    row: number;
+    mappingColors: mappingColors;
+    path: string[];
+    total: bigint;
+    setCurPath: (path: string[]) => void;
+    xScale: (value: bigint) => number;
+    isRoot?: boolean;
+    searchString?: string;
+    sortBy: string;
+    darkMode: boolean;
+    compareMode: boolean;
+}
+export declare const IcicleNode: React.NamedExoticComponent<IcicleNodeProps>;
+export {};

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

@@ -0,0 +1,150 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import { useKeyDown } from '@parca/components';
+import { selectBinaries, setHoveringRow, useAppDispatch, useAppSelector } from '@parca/store';
+import { isSearchMatch, scaleLinear } from '@parca/utilities';
+import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, FIELD_MAPPING_FILE, } from './index';
+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, curPath, sortBy, searchString, darkMode, compareMode, }) {
+    const cumulatives = table.getChild(FIELD_CUMULATIVE);
+    if (childRows === undefined || childRows.length === 0) {
+        return _jsx(_Fragment, {});
+    }
+    childRows =
+        curPath.length === 0
+            ? childRows
+            : childRows.filter(c => nodeLabel(table, c, 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, 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 });
+});
+const icicleRectStyles = {
+    cursor: 'pointer',
+    transition: 'opacity .15s linear',
+};
+const fadedIcicleRectStyles = {
+    cursor: 'pointer',
+    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, sortBy, darkMode, compareMode, }) {
+    const { isShiftDown } = useKeyDown();
+    const dispatch = useAppDispatch();
+    // 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 diffColumn = table.getChild(FIELD_DIFF);
+    // get the actual values from the columns
+    const mappingFile = mappingColumn?.get(row);
+    const functionName = functionNameColumn?.get(row);
+    const cumulative = cumulativeColumn?.get(row);
+    const diff = diffColumn?.get(row);
+    const childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []);
+    // 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 = functionNameColumn?.get(a);
+                const bfn = functionNameColumn?.get(b);
+                return afn.localeCompare(bfn);
+            });
+            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) => {
+                const aDiff = diffColumn?.get(a);
+                const bDiff = diffColumn?.get(b);
+                if (aDiff !== null && bDiff !== null) {
+                    return Number(bDiff - aDiff);
+                }
+                if (aDiff === null && bDiff !== null) {
+                    return 1;
+                }
+                if (aDiff !== null && bDiff === null) {
+                    return -1;
+                }
+                // both are null
+                return 0;
+            });
+            break;
+    }
+    const binaries = useAppSelector(selectBinaries);
+    const colorResult = useNodeColor({
+        isDarkMode: darkMode,
+        compareMode,
+        cumulative,
+        diff,
+        mappingColors,
+        mappingFile,
+        functionName,
+    });
+    const name = useMemo(() => {
+        return isRoot ? 'root' : nodeLabel(table, row, binaries.length > 1);
+    }, [table, row, isRoot, binaries]);
+    const nextPath = path.concat([name]);
+    const isFaded = curPath.length > 0 && name !== 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, cumulative], [0, totalWidth])
+        : xScale;
+    const width = nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
+        ? totalWidth
+        : xScale(cumulative);
+    const { isHighlightEnabled = false, isHighlighted = false } = useMemo(() => {
+        if (searchString === undefined || searchString === '') {
+            return { isHighlightEnabled: false };
+        }
+        return { isHighlightEnabled: true, isHighlighted: isSearchMatch(searchString, name) };
+    }, [searchString, name]);
+    if (width <= 1) {
+        return _jsx(_Fragment, { children: null });
+    }
+    const onMouseEnter = () => {
+        if (isShiftDown)
+            return;
+        dispatch(setHoveringRow({ row }));
+    };
+    const onMouseLeave = () => {
+        if (isShiftDown)
+            return;
+        dispatch(setHoveringRow(undefined));
+    };
+    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('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, searchString: searchString, sortBy: sortBy, darkMode: darkMode, compareMode: compareMode }))] }));
+});

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Table } from 'apache-arrow';
+import { type NavigateFunction } from '@parca/utilities';
+export declare const FIELD_MAPPING_FILE = "mapping_file";
+export declare const FIELD_MAPPING_BUILD_ID = "mapping_build_id";
+export declare const FIELD_LOCATION_ADDRESS = "location_address";
+export declare const FIELD_FUNCTION_NAME = "function_name";
+export declare const FIELD_FUNCTION_FILE_NAME = "function_file_name";
+export declare const FIELD_CHILDREN = "children";
+export declare const FIELD_CUMULATIVE = "cumulative";
+export declare const FIELD_DIFF = "diff";
+interface IcicleGraphArrowProps {
+    table: Table<any>;
+    total: bigint;
+    filtered: bigint;
+    sampleUnit: string;
+    width?: number;
+    curPath: string[];
+    setCurPath: (path: string[]) => void;
+    navigateTo?: NavigateFunction;
+}
+export declare const IcicleGraphArrow: React.NamedExoticComponent<IcicleGraphArrowProps>;
+export default IcicleGraphArrow;