@parca/profile 0.16.107 → 0.16.109

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.109 (2023-02-08)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.108](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.107...@parca/profile@0.16.108) (2023-02-08)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.107 (2023-02-07)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltip/index.js

@@ -37,8 +37,8 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useState, useEffect } from 'react';
 import { usePopper } from 'react-popper';
 import { getLastItem, valueFormatter } from '@parca/functions';
-import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
 import { hexifyAddress, truncateString } from '../';
+import { useKeyDown } from '@parca/components';
 var virtualElement = {
     getBoundingClientRect: function () {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -173,7 +173,7 @@ var GraphTooltip = function (_a) {
         ],
     }), styles = _e.styles, attributes = _e.attributes, popperProps = __rest(_e, ["styles", "attributes"]);
     var update = popperProps.update;
-    var isShiftDown = useIsShiftDown();
+    var isShiftDown = useKeyDown().isShiftDown;
     useEffect(function () {
         if (contextElement != null) {
             if (isShiftDown)

package/dist/MetricsGraph/index.js

@@ -42,9 +42,8 @@ import { cutToMaxStringLength } from '@parca/functions/string';
 import throttle from 'lodash.throttle';
 import { usePopper } from 'react-popper';
 import { valueFormatter, formatDate, sanitizeHighlightedValues } from '@parca/functions';
-import { DateTimeRange } from '@parca/components';
+import { DateTimeRange, useKeyDown } from '@parca/components';
 import { useContainerDimensions } from '@parca/dynamicsize';
-import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
 import MetricsSeries from '../MetricsSeries';
 import MetricsCircle from '../MetricsCircle';
 var MetricsGraph = function (_a) {
@@ -135,7 +134,7 @@ export var RawMetricsGraph = function (_a) {
     var _d = useState(-1), relPos = _d[0], setRelPos = _d[1];
     var _e = useState([0, 0]), pos = _e[0], setPos = _e[1];
     var metricPointRef = useRef(null);
-    var isShiftDown = useIsShiftDown();
+    var isShiftDown = useKeyDown().isShiftDown;
     var time = parseFloat(profile === null || profile === void 0 ? void 0 : profile.HistoryParams().time);
     if (width === undefined || width == null) {
         width = 0;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { NavigateFunction } from '@parca/functions';
+import type { NavigateFunction } from '@parca/functions';
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';
 import { QuerySelection } from '../ProfileSelector';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { NavigateFunction } from '@parca/functions';
+import type { NavigateFunction } from '@parca/functions';
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';
 import { QuerySelection } from '../ProfileSelector';

package/dist/ProfileExplorer/ProfileExplorerSingle.js

@@ -12,8 +12,9 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
+import { KeyDownProvider } from '@parca/components';
 var ProfileExplorerSingle = function (_a) {
     var queryClient = _a.queryClient, query = _a.query, selectQuery = _a.selectQuery, selectProfile = _a.selectProfile, profile = _a.profile, compareProfile = _a.compareProfile, navigateTo = _a.navigateTo;
-    return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: query, selectQuery: selectQuery, selectProfile: selectProfile, closeProfile: function () { }, profileSelection: profile, comparing: false, onCompareProfile: compareProfile, enforcedProfileName: '' }) }) })), _jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: profile != null ? (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profile.ProfileSource(), navigateTo: navigateTo })) : (_jsx(_Fragment, {})) }) }))] }));
+    return (_jsxs(KeyDownProvider, { children: [_jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: query, selectQuery: selectQuery, selectProfile: selectProfile, closeProfile: function () { }, profileSelection: profile, comparing: false, onCompareProfile: compareProfile, enforcedProfileName: '' }) }) })), _jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: profile != null ? (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profile.ProfileSource(), navigateTo: navigateTo })) : (_jsx(_Fragment, {})) }) }))] }));
 };
 export default ProfileExplorerSingle;

package/dist/ProfileExplorer/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
-import { NavigateFunction } from '@parca/functions';
+import type { NavigateFunction } from '@parca/functions';
 interface ProfileExplorerProps {
     queryClient: QueryServiceClient;
     queryParams: any;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { NavigateFunction } from '@parca/functions';
+interface Props {
+    navigateTo?: NavigateFunction;
+    compareMode?: boolean;
+}
+declare const ColorStackLegend: ({ navigateTo, compareMode }: Props) => JSX.Element;
+export default ColorStackLegend;

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.js

@@ -0,0 +1,75 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 cx from 'classnames';
+import { Icon } from '@iconify/react';
+import useUserPreference, { USER_PREFERENCES } from '@parca/functions/useUserPreference';
+import { EVERYTHING_ELSE, selectStackColors, useAppSelector } from '@parca/store';
+import { useMemo } from 'react';
+import { useURLState } from '@parca/components';
+var ColorStackLegend = function (_a) {
+    var navigateTo = _a.navigateTo, _b = _a.compareMode, compareMode = _b === void 0 ? false : _b;
+    var colorProfileName = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key)[0];
+    var _c = useURLState({ param: 'search_string', navigateTo: navigateTo }), currentSearchString = _c[0], setSearchString = _c[1];
+    var stackColors = useAppSelector(selectStackColors);
+    var stackColorArray = useMemo(function () {
+        return Object.entries(stackColors).sort(function (_a, _b) {
+            var _c;
+            var featureA = _a[0];
+            var featureB = _b[0];
+            if (featureA === EVERYTHING_ELSE) {
+                return 1;
+            }
+            if (featureB === EVERYTHING_ELSE) {
+                return -1;
+            }
+            return (_c = featureA === null || featureA === void 0 ? void 0 : featureA.localeCompare(featureB !== null && featureB !== void 0 ? featureB : '')) !== null && _c !== void 0 ? _c : 0;
+        });
+    }, [stackColors]);
+    if (colorProfileName === 'default' || compareMode) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsx("div", __assign({ className: "flex flex-wrap gap-2 my-6 justify-center" }, { children: stackColorArray.map(function (_a) {
+            var feature = _a[0], color = _a[1];
+            var filteringAllowed = feature !== EVERYTHING_ELSE;
+            var isHighlighted = currentSearchString === feature;
+            return (_jsxs("div", __assign({ className: cx('flex gap-1 items-center text-ellipsis p-1 justify-between pr-2', {
+                    'cursor-pointer': filteringAllowed,
+                    'bg-gray-200 dark:bg-gray-800': isHighlighted,
+                }), onClick: function () {
+                    if (!filteringAllowed) {
+                        return;
+                    }
+                    if (isHighlighted) {
+                        setSearchString('');
+                        return;
+                    }
+                    setSearchString(feature);
+                } }, { children: [_jsxs("div", __assign({ className: "flex items-center" }, { children: [_jsx("div", { className: "w-4 h-4 mr-1 inline-block", style: { backgroundColor: color } }), _jsx("span", __assign({ className: "text-sm" }, { children: feature }))] })), isHighlighted ? (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: function (e) {
+                            setSearchString('');
+                            e.stopPropagation();
+                        } })) : null] }), feature));
+        }) })));
+};
+export default ColorStackLegend;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Mapping, Function as ParcaFunction, Location } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+import { FlamegraphNode, FlamegraphRootNode } from '@parca/client';
+export declare const RowHeight = 26;
+interface IcicleGraphNodesProps {
+    data: FlamegraphNode[];
+    strings: string[];
+    mappings: Mapping[];
+    locations: Location[];
+    functions: ParcaFunction[];
+    x: number;
+    y: number;
+    total: number;
+    totalWidth: number;
+    level: number;
+    curPath: string[];
+    setCurPath: (path: string[]) => void;
+    setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
+    path: string[];
+    xScale: (value: number) => number;
+    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: number;
+    setCurPath: (path: string[]) => void;
+    setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
+    xScale: (value: number) => number;
+    isRoot?: boolean;
+    searchString?: string;
+    compareMode: boolean;
+}
+export declare const IcicleNode: React.NamedExoticComponent<IcicleNodeProps>;
+export {};

package/dist/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.js

@@ -0,0 +1,98 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { scaleLinear } from 'd3-scale';
+import { isSearchMatch } from '@parca/functions';
+import { nodeLabel } from './utils';
+import useNodeColor from './useNodeColor';
+import { useKeyDown } from '@parca/components';
+export var RowHeight = 26;
+export var IcicleGraphNodes = React.memo(function IcicleGraphNodes(_a) {
+    var data = _a.data, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, x = _a.x, y = _a.y, xScale = _a.xScale, total = _a.total, totalWidth = _a.totalWidth, level = _a.level, setHoveringNode = _a.setHoveringNode, path = _a.path, setCurPath = _a.setCurPath, curPath = _a.curPath, searchString = _a.searchString, compareMode = _a.compareMode;
+    var nodes = curPath.length === 0
+        ? data
+        : data.filter(function (d) { return d != null && curPath[0] === nodeLabel(d, strings, mappings, locations, functions); });
+    return (_jsx("g", __assign({ transform: "translate(".concat(x, ", ").concat(y, ")") }, { children: nodes.map(function (d, i) {
+            var start = nodes.slice(0, i).reduce(function (sum, d) { return sum + parseFloat(d.cumulative); }, 0);
+            var xStart = xScale(start);
+            return (_jsx(IcicleNode, { x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, setHoveringNode: setHoveringNode, level: level, curPath: curPath, data: d, strings: strings, mappings: mappings, locations: locations, functions: functions, total: total, xScale: xScale, searchString: searchString, compareMode: compareMode }, "node-".concat(level, "-").concat(i)));
+        }) })));
+});
+var icicleRectStyles = {
+    cursor: 'pointer',
+    transition: 'opacity .15s linear',
+};
+var fadedIcicleRectStyles = {
+    cursor: 'pointer',
+    transition: 'opacity .15s linear',
+    opacity: '0.5',
+};
+export var IcicleNode = React.memo(function IcicleNode(_a) {
+    var x = _a.x, y = _a.y, height = _a.height, setCurPath = _a.setCurPath, setHoveringNode = _a.setHoveringNode, curPath = _a.curPath, level = _a.level, path = _a.path, data = _a.data, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, total = _a.total, totalWidth = _a.totalWidth, xScale = _a.xScale, _b = _a.isRoot, isRoot = _b === void 0 ? false : _b, searchString = _a.searchString, compareMode = _a.compareMode;
+    var isShiftDown = useKeyDown().isShiftDown;
+    var colorResult = useNodeColor({ data: data, compareMode: compareMode });
+    var name = useMemo(function () {
+        return isRoot ? 'root' : nodeLabel(data, strings, mappings, locations, functions);
+    }, [data, strings, mappings, locations, functions, isRoot]);
+    var nextPath = path.concat([name]);
+    var isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
+    var styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
+    var nextLevel = level + 1;
+    var cumulative = parseFloat(data.cumulative);
+    var nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
+    var newXScale = nextCurPath.length === 0 && curPath.length === 1
+        ? scaleLinear().domain([0, cumulative]).range([0, totalWidth])
+        : xScale;
+    var width = nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
+        ? totalWidth
+        : xScale(cumulative);
+    var _c = useMemo(function () {
+        if (searchString === undefined || searchString === '') {
+            return { isHighlightEnabled: false };
+        }
+        return { isHighlightEnabled: true, isHighlighted: isSearchMatch(searchString, name) };
+    }, [searchString, name]), _d = _c.isHighlightEnabled, isHighlightEnabled = _d === void 0 ? false : _d, _e = _c.isHighlighted, isHighlighted = _e === void 0 ? false : _e;
+    if (width <= 1) {
+        return _jsx(_Fragment, { children: null });
+    }
+    var onMouseEnter = function () {
+        if (isShiftDown)
+            return;
+        setHoveringNode(data);
+    };
+    var onMouseLeave = function () {
+        if (isShiftDown)
+            return;
+        setHoveringNode(undefined);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("g", __assign({ transform: "translate(".concat(x + 1, ", ").concat(y + 1, ")"), style: styles, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: function () {
+                    setCurPath(nextPath);
+                } }, { children: [_jsx("rect", { x: 0, y: 0, width: width - 1, height: height - 1, style: {
+                            fill: colorResult,
+                        }, className: cx({
+                            'opacity-50': isHighlightEnabled && !isHighlighted,
+                        }) }), width > 5 && (_jsx("svg", __assign({ width: width - 5, height: height }, { children: _jsx("text", __assign({ 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, setHoveringNode: setHoveringNode, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, searchString: searchString, compareMode: compareMode }))] }));
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Flamegraph } from '@parca/client';
+import type { NavigateFunction } from '@parca/functions';
+interface IcicleGraphProps {
+    graph: Flamegraph;
+    sampleUnit: string;
+    width?: number;
+    curPath: string[];
+    setCurPath: (path: string[]) => void;
+    navigateTo?: NavigateFunction;
+    isTrimmed?: boolean;
+}
+export declare const IcicleGraph: React.NamedExoticComponent<IcicleGraphProps>;
+export default IcicleGraph;

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -0,0 +1,78 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 cx from 'classnames';
+import { throttle } from 'lodash';
+import { pointer } from 'd3-selection';
+import { scaleLinear } from 'd3-scale';
+import GraphTooltip from '../../GraphTooltip';
+import { Button, useURLState } from '@parca/components';
+import { IcicleNode, RowHeight } from './IcicleGraphNodes';
+import useColoredGraph from './useColoredGraph';
+import { selectQueryParam } from '@parca/functions';
+import ColorStackLegend from './ColorStackLegend';
+export var IcicleGraph = memo(function IcicleGraph(_a) {
+    var _b;
+    var graph = _a.graph, width = _a.width, setCurPath = _a.setCurPath, curPath = _a.curPath, sampleUnit = _a.sampleUnit, navigateTo = _a.navigateTo, _c = _a.isTrimmed, isTrimmed = _c === void 0 ? false : _c;
+    var _d = useState(), hoveringNode = _d[0], setHoveringNode = _d[1];
+    var _e = useState([0, 0]), pos = _e[0], setPos = _e[1];
+    var _f = useState(0), height = _f[0], setHeight = _f[1];
+    var svg = useRef(null);
+    var ref = useRef(null);
+    var rawDashboardItems = useURLState({
+        param: 'dashboard_items',
+    })[0];
+    var dashboardItems = rawDashboardItems;
+    var coloredGraph = useColoredGraph(graph);
+    var currentSearchString = (_b = selectQueryParam('search_string')) !== null && _b !== void 0 ? _b : '';
+    var compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    useEffect(function () {
+        if (ref.current != null) {
+            setHeight(ref === null || ref === void 0 ? void 0 : ref.current.getBoundingClientRect().height);
+        }
+    }, [width, coloredGraph]);
+    var total = useMemo(function () { return parseFloat(coloredGraph.total); }, [coloredGraph.total]);
+    var xScale = useMemo(function () {
+        if (width === undefined) {
+            return function () { return 0; };
+        }
+        return scaleLinear().domain([0, total]).range([0, width]);
+    }, [total, width]);
+    if (coloredGraph.root === undefined || width === undefined) {
+        return _jsx(_Fragment, {});
+    }
+    var throttledSetPos = throttle(setPos, 20);
+    var onMouseMove = function (e) {
+        // X/Y coordinate array relative to svg
+        var rel = pointer(e);
+        throttledSetPos([rel[0], rel[1]]);
+    };
+    return (_jsxs("div", __assign({ onMouseLeave: function () { return setHoveringNode(undefined); } }, { children: [_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltip, { unit: sampleUnit, total: total, x: pos[0], y: pos[1], hoveringNode: hoveringNode, contextElement: svg.current, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function }), _jsx("div", __assign({ className: cx(dashboardItems.length > 1
+                    ? "".concat(isTrimmed ? 'top-[-54px]' : 'top-[-70px]', " left-[25px]")
+                    : isTrimmed
+                        ? 'top-[-54px]'
+                        : 'top-[-69px]', 'flex justify-start absolute ') }, { children: _jsx(Button, __assign({ color: "neutral", onClick: function () { return setCurPath([]); }, disabled: curPath.length === 0, className: "w-auto", variant: "neutral" }, { children: "Reset View" })) })), _jsx("svg", __assign({ className: "font-robotoMono", width: width, height: height, onMouseMove: onMouseMove, preserveAspectRatio: "xMinYMid", ref: svg }, { children: _jsx("g", __assign({ ref: ref }, { children: _jsx("g", __assign({ transform: 'translate(0, 0)' }, { children: _jsx(IcicleNode, { x: 0, y: 0, totalWidth: width, height: RowHeight, setCurPath: setCurPath, setHoveringNode: setHoveringNode, 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

@@ -0,0 +1,14 @@
+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;

package/dist/ProfileIcicleGraph/IcicleGraph/useColoredGraph.js

@@ -0,0 +1,60 @@
+// 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.
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import useUserPreference, { USER_PREFERENCES } from '@parca/functions/useUserPreference';
+import { setFeatures, useAppDispatch, useAppSelector, selectDarkMode } from '@parca/store';
+import { useEffect, useMemo } from 'react';
+import { extractFeature } from './utils';
+var colorNodes = function (nodes, strings, mappings, locations, functions, features) {
+    if (nodes === undefined) {
+        return [];
+    }
+    return nodes.map(function (node) {
+        var coloredNode = __assign({}, node);
+        if (node.children != null) {
+            coloredNode.children = colorNodes(node.children, strings, mappings, locations, functions, features);
+        }
+        coloredNode.feature = extractFeature(node, mappings, locations, strings, functions);
+        features[coloredNode.feature] = true;
+        return coloredNode;
+    });
+};
+var useColoredGraph = function (graph) {
+    var dispatch = useAppDispatch();
+    var colorProfile = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key)[0];
+    var isDarkMode = useAppSelector(selectDarkMode);
+    var _a = useMemo(function () {
+        var _a;
+        if (graph.root == null) {
+            return [graph, []];
+        }
+        var features = {};
+        var coloredGraph = __assign(__assign({}, graph), { root: __assign(__assign({}, graph.root), { children: colorNodes((_a = graph.root.children) !== null && _a !== void 0 ? _a : [], graph.stringTable, graph.mapping, graph.locations, graph.function, features) }) });
+        return [coloredGraph, Object.keys(features)];
+    }, [graph]), coloredGraph = _a[0], features = _a[1];
+    useEffect(function () {
+        dispatch(setFeatures({ features: features, colorProfileName: colorProfile, isDarkMode: isDarkMode }));
+    }, [features, colorProfile, dispatch, isDarkMode]);
+    return coloredGraph;
+};
+export default useColoredGraph;

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

@@ -0,0 +1,7 @@
+import type { ColoredFlamegraphNode } from './useColoredGraph';
+interface Props {
+    data: ColoredFlamegraphNode;
+    compareMode: boolean;
+}
+declare const useNodeColor: ({ data, compareMode }: Props) => string;
+export default useNodeColor;

package/dist/ProfileIcicleGraph/IcicleGraph/useNodeColor.js

@@ -0,0 +1,32 @@
+// 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 { diffColor } from '@parca/functions';
+import { EVERYTHING_ELSE, selectDarkMode, selectStackColors, useAppSelector } from '@parca/store';
+import { useMemo } from 'react';
+var useNodeColor = function (_a) {
+    var data = _a.data, compareMode = _a.compareMode;
+    var colors = useAppSelector(selectStackColors);
+    var isDarkMode = useAppSelector(selectDarkMode);
+    var color = useMemo(function () {
+        var _a;
+        if (compareMode) {
+            var diff = parseFloat(data.diff);
+            var cumulative = parseFloat(data.cumulative);
+            return diffColor(diff, cumulative, isDarkMode);
+        }
+        var color = colors[(_a = data.feature) !== null && _a !== void 0 ? _a : EVERYTHING_ELSE];
+        return color;
+    }, [data, colors, isDarkMode, compareMode]);
+    return color;
+};
+export default useNodeColor;

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

@@ -0,0 +1,5 @@
+import { FlamegraphNode } from '@parca/client';
+import { Mapping, Function as ParcaFunction, Location } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+export declare const getBinaryName: (node: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[]) => string | undefined;
+export declare function nodeLabel(node: FlamegraphNode, strings: string[], mappings: Mapping[], locations: Location[], functions: ParcaFunction[]): string;
+export declare const extractFeature: (data: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[], functions: ParcaFunction[]) => string;

package/dist/ProfileIcicleGraph/IcicleGraph/utils.js

@@ -0,0 +1,59 @@
+// 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 { getLastItem } from '@parca/functions';
+import { hexifyAddress } from '../../utils';
+import { EVERYTHING_ELSE } from '@parca/store';
+export var getBinaryName = function (node, mappings, locations, strings) {
+    var _a, _b;
+    if (((_a = node.meta) === null || _a === void 0 ? void 0 : _a.locationIndex) === undefined || ((_b = node.meta) === null || _b === void 0 ? void 0 : _b.locationIndex) === 0) {
+        return undefined;
+    }
+    var location = locations[node.meta.locationIndex - 1];
+    if (location.mappingIndex === undefined || location.mappingIndex === 0) {
+        return undefined;
+    }
+    var mapping = mappings[location.mappingIndex - 1];
+    if (mapping == null || mapping.fileStringIndex == null) {
+        return undefined;
+    }
+    var mappingFile = strings[mapping.fileStringIndex];
+    return getLastItem(mappingFile);
+};
+export function nodeLabel(node, strings, mappings, locations, functions) {
+    var _a, _b;
+    if (((_a = node.meta) === null || _a === void 0 ? void 0 : _a.locationIndex) === undefined)
+        return '<unknown>';
+    if (((_b = node.meta) === null || _b === void 0 ? void 0 : _b.locationIndex) === 0)
+        return '<unknown>';
+    var location = locations[node.meta.locationIndex - 1];
+    var binary = getBinaryName(node, mappings, locations, strings);
+    var mappingString = binary != null ? "[".concat(binary, "]") : '';
+    if (location.lines.length > 0) {
+        var funcName = strings[functions[location.lines[node.meta.lineIndex].functionIndex - 1].nameStringIndex];
+        return "".concat(mappingString, " ").concat(funcName);
+    }
+    var address = hexifyAddress(location.address);
+    var fallback = "".concat(mappingString).concat(address);
+    return fallback === '' ? '<unknown>' : fallback;
+}
+export var extractFeature = function (data, mappings, locations, strings, functions) {
+    var name = nodeLabel(data, strings, mappings, locations, functions).trim();
+    if (name.startsWith('runtime') || name === 'root') {
+        return 'runtime';
+    }
+    var binaryName = getBinaryName(data, mappings, locations, strings);
+    if (binaryName != null) {
+        return binaryName;
+    }
+    return EVERYTHING_ELSE;
+};

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Flamegraph } from '@parca/client';
+import type { NavigateFunction } from '@parca/functions';
 export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
     width?: number;
@@ -8,7 +9,8 @@ interface ProfileIcicleGraphProps {
     curPath: string[] | [];
     setNewCurPath: (path: string[]) => void;
     onContainerResize?: ResizeHandler;
+    navigateTo?: NavigateFunction;
     loading: boolean;
 }
-declare const ProfileIcicleGraph: ({ graph, curPath, setNewCurPath, sampleUnit, onContainerResize, loading, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, curPath, setNewCurPath, sampleUnit, onContainerResize, navigateTo, loading, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;