@parca/profile 0.17.1 → 0.17.3

package/dist/GraphTooltip/ExpandOnHoverValue.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    value: string | number | undefined;
-    displayValue?: string | number | undefined;
-}
-export declare const ExpandOnHover: ({ value, displayValue }: Props) => JSX.Element;
-export {};
-//# sourceMappingURL=ExpandOnHoverValue.d.ts.map

package/dist/GraphTooltip/ExpandOnHoverValue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandOnHoverValue.d.ts","sourceRoot":"","sources":["../../src/GraphTooltip/ExpandOnHoverValue.tsx"],"names":[],"mappings":"AAaA,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC5C;AAED,eAAO,MAAM,aAAa,4BAA2B,KAAK,KAAG,GAAG,CAAC,OAWhE,CAAC"}

package/dist/GraphTooltip/ExpandOnHoverValue.js

@@ -1,4 +0,0 @@
-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/GraphTooltip/index.d.ts

@@ -1,41 +0,0 @@
-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 {
-    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[];
-    mappings?: Mapping[];
-    locations?: Location[];
-    functions?: ParcaFunction[];
-    type?: string;
-}) => JSX.Element;
-declare const GraphTooltip: ({ x, y, unit, total, totalUnfiltered, hoveringNode: hoveringNodeProp, contextElement, isFixed, virtualContextElement, strings, mappings, locations, functions, type, }: GraphTooltipProps) => JSX.Element;
-export default GraphTooltip;
-//# sourceMappingURL=index.d.ts.map

package/dist/GraphTooltip/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/GraphTooltip/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,IAAI,aAAa,EAC1B,MAAM,uDAAuD,CAAC;AAY/D,UAAU,yBAA0B,SAAQ,iBAAiB;IAC3D,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,YAAa,SAAQ,kBAAkB,EAAE,cAAc,EAAE,aAAa;IAC9E,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,kBAAkB,GAAG,yBAAyB,CAAC;CACvD;AAED,UAAU,iBAAiB;IACzB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAgLD,eAAO,MAAM,mBAAmB,4GAW7B;IACD,YAAY,EAAE,YAAY,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,KAAG,GAAG,CAAC,OAoHP,CAAC;AAEF,QAAA,MAAM,YAAY,2KAef,iBAAiB,KAAG,GAAG,CAAC,OA6G1B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/GraphTooltip/index.js

@@ -1,201 +0,0 @@
-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 { usePopper } from 'react-popper';
-import { CopyToClipboard, useKeyDown } from '@parca/components';
-import { selectHoveringNode, useAppSelector } from '@parca/store';
-import { divide, getLastItem, valueFormatter } from '@parca/utilities';
-import { hexifyAddress, truncateString, truncateStringReverse } from '../';
-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;
-    // '?? 0n' is needed because because diff is undefined in callgraph for some nodes,
-    // even though the type doesn't allow it.
-    const diff = hoveringNode.diff ?? 0n;
-    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
-            ? ` / ${divide(hoveringNodeCumulative * 100n, total).toFixed(2)}% of filtered`
-            : '';
-        return `${valueFormatter(hoveringNodeCumulative, unit, 2)}
-    (${divide(hoveringNodeCumulative * 100n, 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 = ({ x, y, unit, total, totalUnfiltered, hoveringNode: hoveringNodeProp, contextElement, isFixed = false, virtualContextElement = true, strings, mappings, locations, functions, type = 'flamegraph', }) => {
-    const hoveringNodeState = useAppSelector(selectHoveringNode);
-    // @ts-expect-error
-    const hoveringNode = useMemo(() => {
-        const h = hoveringNodeProp ?? hoveringNodeState;
-        if (h == null) {
-            return h;
-        }
-        // Cloning the object to avoid the mutating error as this is Redux store object and we are modifying the meta object in GraphTooltipContent component.
-        return {
-            ...h,
-            meta: {
-                ...h.meta,
-            },
-        };
-    }, [hoveringNodeProp, 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/IcicleGraph/ColorStackLegend.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    compareMode?: boolean;
-}
-declare const ColorStackLegend: ({ compareMode }: Props) => JSX.Element;
-export default ColorStackLegend;
-//# sourceMappingURL=ColorStackLegend.d.ts.map

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx"],"names":[],"mappings":"AAsBA,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,oBAA2B,KAAK,KAAG,GAAG,CAAC,OAmE5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.js

@@ -1,59 +0,0 @@
-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, selectStackColors, useAppSelector } from '@parca/store';
-const ColorStackLegend = ({ compareMode = false }) => {
-    const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
-    const [currentSearchString, setSearchString] = useURLState('search_string');
-    const stackColors = useAppSelector(selectStackColors);
-    const stackColorArray = useMemo(() => {
-        return Object.entries(stackColors).sort(([featureA], [featureB]) => {
-            if (featureA === EVERYTHING_ELSE) {
-                return 1;
-            }
-            if (featureB === EVERYTHING_ELSE) {
-                return -1;
-            }
-            return featureA?.localeCompare(featureB ?? '') ?? 0;
-        });
-    }, [stackColors]);
-    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 rounded-[4px]", 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/IcicleGraph/IcicleGraphNodes.d.ts

@@ -1,47 +0,0 @@
-import React from 'react';
-import { FlamegraphNode } from '@parca/client';
-import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
-import { type ScaleFunction } from '@parca/utilities';
-export declare const RowHeight = 26;
-interface IcicleGraphNodesProps {
-    data: FlamegraphNode[];
-    strings: string[];
-    mappings: Mapping[];
-    locations: Location[];
-    functions: ParcaFunction[];
-    x: number;
-    y: number;
-    total: bigint;
-    totalWidth: number;
-    level: number;
-    curPath: string[];
-    setCurPath: (path: string[]) => void;
-    path: string[];
-    xScale: ScaleFunction;
-    searchString?: string;
-    compareMode: boolean;
-}
-export declare const IcicleGraphNodes: React.NamedExoticComponent<IcicleGraphNodesProps>;
-interface IcicleNodeProps {
-    x: number;
-    y: number;
-    height: number;
-    totalWidth: number;
-    curPath: string[];
-    level: number;
-    data: FlamegraphNode;
-    strings: string[];
-    mappings: Mapping[];
-    locations: Location[];
-    functions: ParcaFunction[];
-    path: string[];
-    total: bigint;
-    setCurPath: (path: string[]) => void;
-    xScale: ScaleFunction;
-    isRoot?: boolean;
-    searchString?: string;
-    compareMode: boolean;
-}
-export declare const IcicleNode: React.NamedExoticComponent<IcicleNodeProps>;
-export {};
-//# sourceMappingURL=IcicleGraphNodes.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,IAAI,aAAa,EAC1B,MAAM,uDAAuD,CAAC;AAG/D,OAAO,EAA6B,KAAK,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAKhF,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B,UAAU,qBAAqB;IAC7B,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,mDA4D3B,CAAC;AAEH,UAAU,eAAe;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB;AAYD,eAAO,MAAM,UAAU,6CAyHrB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.js

@@ -1,93 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2022 The Parca Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// 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, setHoveringNode, useAppDispatch, useAppSelector } from '@parca/store';
-import { isSearchMatch, scaleLinear } from '@parca/utilities';
-import useNodeColor from './useNodeColor';
-import { nodeLabel } from './utils';
-export const RowHeight = 26;
-export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ data, strings, mappings, locations, functions, x, y, xScale, total, totalWidth, level, path, setCurPath, curPath, searchString, compareMode, }) {
-    const binaries = useAppSelector(selectBinaries);
-    const nodes = curPath.length === 0
-        ? data
-        : data.filter(d => d != null &&
-            curPath[0] ===
-                nodeLabel(d, strings, mappings, locations, functions, binaries.length > 1));
-    return (_jsx("g", { transform: `translate(${x}, ${y})`, children: nodes.map(function nodeMapper(d, i) {
-            const start = nodes.slice(0, i).reduce((sum, d) => sum + d.cumulative, 0n);
-            const xStart = xScale(start);
-            return (_jsx(IcicleNode, { x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, level: level, curPath: curPath, data: d, strings: strings, mappings: mappings, locations: locations, functions: functions, total: total, xScale: xScale, searchString: searchString, compareMode: compareMode }, `node-${level}-${i}`));
-        }) }));
-});
-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({ x, y, height, setCurPath, curPath, level, path, data, strings, mappings, locations, functions, total, totalWidth, xScale, isRoot = false, searchString, compareMode, }) {
-    const binaries = useAppSelector(selectBinaries);
-    const dispatch = useAppDispatch();
-    const { isShiftDown } = useKeyDown();
-    const colorResult = useNodeColor({ data, compareMode });
-    const name = useMemo(() => {
-        return isRoot
-            ? 'root'
-            : nodeLabel(data, strings, mappings, locations, functions, binaries.length > 1);
-    }, [data, strings, mappings, locations, functions, 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 cumulative = data.cumulative;
-    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;
-        // need to add id and flat for tooltip purposes
-        dispatch(setHoveringNode({ ...data, id: '', flat: 0n }));
-    };
-    const onMouseLeave = () => {
-        if (isShiftDown)
-            return;
-        dispatch(setHoveringNode(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 }) }))] }), data.children !== undefined && data.children.length > 0 && (_jsx(IcicleGraphNodes, { data: data.children, strings: strings, mappings: mappings, locations: locations, functions: functions, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, searchString: searchString, compareMode: compareMode }))] }));
-});

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

@@ -1,14 +0,0 @@
-import { Flamegraph } from '@parca/client';
-import { ProfileType } from '@parca/parser';
-interface IcicleGraphProps {
-    graph: Flamegraph;
-    total: bigint;
-    filtered: bigint;
-    profileType?: ProfileType;
-    width?: number;
-    curPath: string[];
-    setCurPath: (path: string[]) => void;
-}
-export declare const IcicleGraph: import("react").NamedExoticComponent<IcicleGraphProps>;
-export default IcicleGraph;
-//# sourceMappingURL=index.d.ts.map

package/dist/ProfileIcicleGraph/IcicleGraph/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAU1C,UAAU,gBAAgB;IACxB,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,WAAW,wDAmFtB,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -1,48 +0,0 @@
-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 { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { useURLState } from '@parca/components';
-import { setHoveringNode, useAppDispatch } from '@parca/store';
-import { scaleLinear, selectQueryParam } from '@parca/utilities';
-import GraphTooltip from '../../GraphTooltip';
-import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
-import ColorStackLegend from './ColorStackLegend';
-import { IcicleNode, RowHeight } from './IcicleGraphNodes';
-import useColoredGraph from './useColoredGraph';
-export const IcicleGraph = memo(function IcicleGraph({ graph, total, filtered, width, setCurPath, curPath, profileType, }) {
-    const dispatch = useAppDispatch();
-    const [height, setHeight] = useState(0);
-    const svg = useRef(null);
-    const ref = useRef(null);
-    const coloredGraph = useColoredGraph(graph);
-    const [currentSearchString] = useURLState('search_string');
-    const { compareMode } = useProfileViewContext();
-    const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
-    useEffect(() => {
-        if (ref.current != null) {
-            setHeight(ref?.current.getBoundingClientRect().height);
-        }
-    }, [width, coloredGraph]);
-    const xScale = useMemo(() => {
-        if (width === undefined) {
-            return scaleLinear([0n, total], [0, 1]);
-        }
-        return scaleLinear([0n, total], [0, width]);
-    }, [total, width]);
-    if (coloredGraph.root === undefined || width === undefined) {
-        return _jsx(_Fragment, {});
-    }
-    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [isColorStackLegendEnabled && _jsx(ColorStackLegend, { compareMode: compareMode }), _jsx(GraphTooltip, { unit: profileType?.sampleUnit ?? '', total: total, totalUnfiltered: total + filtered, contextElement: svg.current, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function }), _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, { x: 0, y: 0, totalWidth: width, height: RowHeight, setCurPath: setCurPath, curPath: curPath, data: coloredGraph.root, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, compareMode: compareMode }) }) }) })] }));
-});
-export default IcicleGraph;

package/dist/ProfileIcicleGraph/IcicleGraph/useColoredGraph.d.ts

@@ -1,15 +0,0 @@
-import { Flamegraph, FlamegraphNode, FlamegraphRootNode } from '@parca/client';
-export interface ColoredFlamegraphNode extends FlamegraphNode {
-    feature?: string;
-    children: ColoredFlamegraphNode[];
-}
-export interface ColoredFlamgraphRootNode extends FlamegraphRootNode {
-    feature?: string;
-    children: ColoredFlamegraphNode[];
-}
-export interface ColoredFlamegraph extends Flamegraph {
-    root: ColoredFlamgraphRootNode;
-}
-declare const useColoredGraph: (graph: Flamegraph) => ColoredFlamegraph;
-export default useColoredGraph;
-//# sourceMappingURL=useColoredGraph.d.ts.map

package/dist/ProfileIcicleGraph/IcicleGraph/useColoredGraph.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useColoredGraph.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/useColoredGraph.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAmB7E,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,qBAAqB,EAAE,CAAC;CACnC;AAED,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,qBAAqB,EAAE,CAAC;CACnC;AAED,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,IAAI,EAAE,wBAAwB,CAAC;CAChC;AAkCD,QAAA,MAAM,eAAe,UAAW,UAAU,KAAG,iBAkC5C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraph/useColoredGraph.js

@@ -1,57 +0,0 @@
-// 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 } from 'react';
-import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { selectDarkMode, setFeatures, useAppDispatch, useAppSelector, } from '@parca/store';
-import { extractFeature } from './utils';
-const colorNodes = (nodes, strings, mappings, locations, functions, features) => {
-    if (nodes === undefined) {
-        return [];
-    }
-    return nodes.map(node => {
-        const coloredNode = {
-            ...node,
-        };
-        if (node.children != null) {
-            coloredNode.children = colorNodes(node.children, strings, mappings, locations, functions, features);
-        }
-        const feature = extractFeature(node, mappings, locations, strings);
-        coloredNode.feature = feature.name;
-        features[feature.name] = feature.type;
-        return coloredNode;
-    });
-};
-const useColoredGraph = (graph) => {
-    const dispatch = useAppDispatch();
-    const [colorProfile] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
-    const isDarkMode = useAppSelector(selectDarkMode);
-    const [coloredGraph, features] = useMemo(() => {
-        if (graph.root == null) {
-            return [graph, {}];
-        }
-        const features = {};
-        const coloredGraph = {
-            ...graph,
-            root: {
-                ...graph.root,
-                children: colorNodes(graph.root.children ?? [], graph.stringTable, graph.mapping, graph.locations, graph.function, features),
-            },
-        };
-        return [coloredGraph, features];
-    }, [graph]);
-    useEffect(() => {
-        dispatch(setFeatures({ features, colorProfileName: colorProfile, isDarkMode }));
-    }, [features, colorProfile, dispatch, isDarkMode]);
-    return coloredGraph;
-};
-export default useColoredGraph;