@parca/profile 0.16.198 → 0.16.199

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 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

package/dist/Callgraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Callgraph as CallgraphType } from '@parca/client';
 export interface Props {
     data: CallgraphType;

package/dist/GraphTooltip/ExpandOnHoverValue.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Props {
     value: string | number | undefined;
     displayValue?: string | number | undefined;

package/dist/GraphTooltip/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 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 {

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/MatchersInput/SuggestionItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Props {
     isHighlighted: boolean;
     onHighlight: () => void;

package/dist/MatchersInput/SuggestionsList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare class Suggestion {
     type: string;
     typeahead: string;

package/dist/MatchersInput/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LabelsResponse, QueryServiceClient } from '@parca/client';
 import { Query } from '@parca/parser';
 interface MatchersInputProps {

package/dist/MetricsCircle/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface MetricsCircleProps {
     cx: number;
     cy: number;

package/dist/MetricsGraph/MetricsTooltip/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { HighlightedSeries } from '../';
 interface Props {
     x: number;

package/dist/MetricsGraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Label, MetricsSeries as MetricsSeriesPb } from '@parca/client';
 import { DateTimeRange } from '@parca/components';
 import { MergedProfileSelection } from '..';

package/dist/MetricsSeries/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as d3 from 'd3';
 interface MetricsSeriesProps {
     data: any;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import type { NavigateFunction } from '@parca/utilities';
 import { ProfileSelection } from '..';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import type { NavigateFunction } from '@parca/utilities';
 import { ProfileSelection } from '..';

package/dist/ProfileExplorer/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import type { NavigateFunction } from '@parca/utilities';
 interface ProfileExplorerProps {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { NavigateFunction } from '@parca/utilities';
 interface Props {
     navigateTo?: NavigateFunction;

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 {};