@parca/profile 0.17.2 → 0.17.4

package/dist/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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, useState } from 'react';
+import GraphTooltipArrow from '../../GraphTooltipArrow';
+import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
+import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
+import { useTooltipContext } from './TooltipContext';
+export const MemoizedTooltip = memo(function MemoizedTooltip({ contextElement, dockedMetainfo, }) {
+    const [tooltipRow, setTooltipRow] = useState(null);
+    const { table, total, totalUnfiltered, profileType, unit, compareAbsolute } = useTooltipContext();
+    // This component subscribes to tooltip updates through a callback
+    // passed to the TooltipProvider, avoiding the need to lift state
+    useEffect(() => {
+        const handleTooltipUpdate = (event) => {
+            setTooltipRow(event.detail.row);
+        };
+        window.addEventListener('icicle-tooltip-update', handleTooltipUpdate);
+        return () => {
+            window.removeEventListener('icicle-tooltip-update', handleTooltipUpdate);
+        };
+    }, []);
+    if (dockedMetainfo) {
+        return (_jsx(DockedGraphTooltip, { table: table, row: tooltipRow, total: total, totalUnfiltered: totalUnfiltered, profileType: profileType, unit: unit, compareAbsolute: compareAbsolute }));
+    }
+    if (tooltipRow === null) {
+        return null;
+    }
+    return (_jsx(GraphTooltipArrow, { contextElement: contextElement, children: _jsx(GraphTooltipArrowContent, { table: table, row: tooltipRow, isFixed: false, total: total, totalUnfiltered: totalUnfiltered, profileType: profileType, unit: unit, compareAbsolute: compareAbsolute }) }));
+});

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Table } from 'apache-arrow';
+import { ProfileType } from '@parca/parser';
+interface TooltipState {
+    row: number | null;
+    x: number;
+    y: number;
+}
+interface TooltipContextValue {
+    table: Table<any>;
+    total: bigint;
+    totalUnfiltered: bigint;
+    profileType?: ProfileType;
+    unit?: string;
+    compareAbsolute: boolean;
+    updateTooltip: (row: number | null, x?: number, y?: number) => void;
+    tooltipState: TooltipState;
+}
+export declare const useTooltipContext: () => TooltipContextValue;
+interface TooltipProviderProps {
+    children: React.ReactNode;
+    table: Table<any>;
+    total: bigint;
+    totalUnfiltered: bigint;
+    profileType?: ProfileType;
+    unit?: string;
+    compareAbsolute: boolean;
+    onTooltipUpdate?: (state: TooltipState) => void;
+}
+export declare const TooltipProvider: React.FC<TooltipProviderProps>;
+export {};
+//# sourceMappingURL=TooltipContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAErF,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,UAAU,YAAY;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,YAAY,CAAC;CAC5B;AAID,eAAO,MAAM,iBAAiB,QAAO,mBAMpC,CAAC;AAEF,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmC1D,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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 { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+const TooltipContext = createContext(null);
+export const useTooltipContext = () => {
+    const context = useContext(TooltipContext);
+    if (context === undefined || context === null) {
+        throw new Error('useTooltipContext must be used within TooltipProvider');
+    }
+    return context;
+};
+export const TooltipProvider = ({ children, table, total, totalUnfiltered, profileType, unit, compareAbsolute, onTooltipUpdate, }) => {
+    const tooltipStateRef = useRef({ row: null, x: 0, y: 0 });
+    const updateTooltip = useCallback((row, x = 0, y = 0) => {
+        tooltipStateRef.current = { row, x, y };
+        onTooltipUpdate?.(tooltipStateRef.current);
+    }, [onTooltipUpdate]);
+    const value = useMemo(() => ({
+        table,
+        total,
+        totalUnfiltered,
+        profileType,
+        unit,
+        compareAbsolute,
+        updateTooltip,
+        tooltipState: tooltipStateRef.current,
+    }), [table, total, totalUnfiltered, profileType, unit, compareAbsolute, updateTooltip]);
+    return _jsx(TooltipContext.Provider, { value: value, children: children });
+};

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

@@ -23,17 +23,18 @@ export declare const FIELD_LABELS = "labels";
 export declare const FIELD_CUMULATIVE = "cumulative";
 export declare const FIELD_FLAT = "flat";
 export declare const FIELD_DIFF = "diff";
+export declare const FIELD_PARENT = "parent";
+export declare const FIELD_DEPTH = "depth";
+export declare const FIELD_VALUE_OFFSET = "value_offset";
 interface IcicleGraphArrowProps {
     arrow: FlamegraphArrow;
     total: bigint;
     filtered: bigint;
     profileType?: ProfileType;
-    profileSource?: ProfileSource;
+    profileSource: ProfileSource;
     width?: number;
     curPath: CurrentPathFrame[];
     setCurPath: (path: CurrentPathFrame[]) => void;
-    sortBy: string;
-    flamegraphLoading: boolean;
     isHalfScreen: boolean;
     mappingsListFromMetadata: string[];
     compareAbsolute: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,OAAO,EAA2B,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAK5E,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAIlD,OAAO,EAAwB,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAExE,OAAO,EAAC,gBAAgB,EAAwD,MAAM,SAAS,CAAC;AAEhG,eAAO,MAAM,iBAAiB,gBAAgB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAC9D,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,UAAU,SAAS,CAAC;AAEjC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,iBACb,MAAM,EAAE,cACV,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,kBACb,MAAM,EAAE,cACX,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,gBAAgB,mDAqU3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAK1E,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAwB,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAIxE,OAAO,EACL,gBAAgB,EAMjB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,iBAAiB,gBAAgB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAC9D,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAEjD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,iBACb,MAAM,EAAE,cACV,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,kBACb,MAAM,EAAE,cACX,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,gBAAgB,mDA8N3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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.
@@ -11,22 +11,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { tableFromIPC } from 'apache-arrow';
 import { useContextMenu } from 'react-contexify';
 import { useURLState } from '@parca/components';
 import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@parca/hooks';
-import { getColorForFeature, selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector, } from '@parca/store';
-import { getLastItem, scaleLinear } from '@parca/utilities';
-import GraphTooltipArrow from '../../GraphTooltipArrow';
-import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
-import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
+import { getColorForFeature, selectDarkMode, useAppSelector } from '@parca/store';
+import { getLastItem } from '@parca/utilities';
 import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
-import ContextMenu from './ContextMenu';
-import { IcicleChartRootNode } from './IcicleChartRootNode';
+import ContextMenuWrapper from './ContextMenuWrapper';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
+import { MemoizedTooltip } from './MemoizedTooltip';
+import { TooltipProvider } from './TooltipContext';
 import { useFilenamesList } from './useMappingList';
-import { arrowToString, extractFeature, extractFilenameFeature } from './utils';
+import { arrowToString, extractFeature, extractFilenameFeature, getCurrentPathFrameData, isCurrentPathFrameMatch, } from './utils';
 export const FIELD_LABELS_ONLY = 'labels_only';
 export const FIELD_MAPPING_FILE = 'mapping_file';
 export const FIELD_MAPPING_BUILD_ID = 'mapping_build_id';
@@ -45,6 +43,9 @@ export const FIELD_LABELS = 'labels';
 export const FIELD_CUMULATIVE = 'cumulative';
 export const FIELD_FLAT = 'flat';
 export const FIELD_DIFF = 'diff';
+export const FIELD_PARENT = 'parent';
+export const FIELD_DEPTH = 'depth';
+export const FIELD_VALUE_OFFSET = 'value_offset';
 export const getMappingColors = (mappingsList, isDarkMode, currentColorProfile) => {
     const mappingFeatures = mappingsList.map(mapping => extractFeature(mapping));
     const colors = {};
@@ -62,21 +63,15 @@ export const getFilenameColors = (filenamesList, isDarkMode, currentColorProfile
     return colors;
 };
 const noop = () => { };
-export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, sortBy, flamegraphLoading, mappingsListFromMetadata, compareAbsolute, isIcicleChart = false, }) {
-    const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
-    const dispatch = useAppDispatch();
+export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, mappingsListFromMetadata, compareAbsolute, isIcicleChart = false, }) {
     const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
+    const [hoveringRow, setHoveringRow] = useState(undefined);
     const [dockedMetainfo] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
     const isDarkMode = useAppSelector(selectDarkMode);
     const table = useMemo(() => {
         return tableFromIPC(arrow.record);
     }, [arrow]);
-    const [height, setHeight] = useState(0);
-    const [hoveringRow, setHoveringRow] = useState(null);
-    const [hoveringLevel, setHoveringLevel] = useState(null);
-    const [hoveringName, setHoveringName] = useState(null);
     const svg = useRef(null);
-    const ref = useRef(null);
     const [binaryFrameFilter, setBinaryFrameFilter] = useURLState('binary_frame_filter');
     const [currentSearchString] = useURLState('search_string');
     const { compareMode } = useProfileViewContext();
@@ -123,32 +118,17 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
         binary: mappingColors,
     };
     const colorByColors = colorByList[colorByValue];
-    useEffect(() => {
-        if (ref.current != null) {
-            setHeight(ref?.current.getBoundingClientRect().height);
-        }
-    }, [width, flamegraphLoading]);
-    const xScale = useMemo(() => {
-        if (total === 0n) {
-            return () => 0;
-        }
-        if (width === undefined) {
-            return () => 0;
-        }
-        return scaleLinear([0n, total], [0, width]);
-    }, [total, width]);
     const MENU_ID = 'icicle-graph-context-menu';
+    const contextMenuRef = useRef(null);
     const { show, hideAll } = useContextMenu({
         id: MENU_ID,
     });
-    const displayMenu = useCallback((e) => {
+    const displayMenu = useCallback((e, row) => {
+        contextMenuRef.current?.setRow(row);
         show({
             event: e,
         });
     }, [show]);
-    const trackVisibility = (isVisible) => {
-        setIsContextMenuOpen(isVisible);
-    };
     const hideBinary = (binaryToRemove) => {
         // second/subsequent time filtering out a binary i.e. a binary has already been hidden
         // and we want to hide more binaries, we simply remove the binary from the binaryFrameFilter array in the URL.
@@ -161,46 +141,52 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
         const newMappingsList = mappingsListFromMetadata.filter(mapping => mapping !== binaryToRemove);
         setBinaryFrameFilter(newMappingsList);
     };
-    const highlightSimilarStacksName = highlightSimilarStacksPreference ? hoveringName : null;
-    const highlightSimilarStacksSetName = useMemo(() => {
-        return highlightSimilarStacksPreference ? setHoveringName : noop;
-    }, [highlightSimilarStacksPreference]);
-    const highlightSimilarStacksRow = highlightSimilarStacksPreference ? hoveringRow : null;
-    const path = useMemo(() => {
-        return [];
-    }, []);
-    // useMemo for the root graph as it otherwise renders the whole graph if the hoveringRow changes.
-    const root = useMemo(() => {
-        if (isIcicleChart) {
-            return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleChartRootNode, { table: table, row: 0, colors: colorByColors, colorBy: colorByValue, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: path, level: 0, isRoot: true, searchString: currentSearchString ?? '', setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: highlightSimilarStacksName, setHoveringName: highlightSimilarStacksSetName, hoveringRow: highlightSimilarStacksRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference, profileSource: profileSource }) }) }) }));
+    const handleRowClick = (row) => {
+        // Walk down the stack starting at row until we reach the root (row 0).
+        const path = [];
+        let currentRow = row;
+        while (currentRow > 0) {
+            const frame = getCurrentPathFrameData(table, currentRow);
+            path.push(frame);
+            currentRow = table.getChild(FIELD_PARENT)?.get(currentRow) ?? 0;
+        }
+        // Reverse the path so that the root is first.
+        path.reverse();
+        setCurPath(path);
+    };
+    const depthColumn = table.getChild(FIELD_DEPTH);
+    const maxDepth = depthColumn === null ? 0 : Math.max(...depthColumn.toArray());
+    const height = maxDepth * RowHeight;
+    // To find the selected row, we must walk the current path and look at which
+    // children of the current frame matches the path element exactly. Until the
+    // end, the row we find at the end is our selected row.
+    let currentRow = 0;
+    for (const frame of curPath) {
+        let childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(currentRow) ?? []);
+        if (childRows.length === 0) {
+            // If there are no children, we can stop here.
+            break;
+        }
+        childRows = childRows.filter(c => isCurrentPathFrameMatch(table, c, frame));
+        if (childRows.length === 0) {
+            // If there are no children that match the current path frame, we can stop here.
+            break;
+        }
+        if (childRows.length > 1) {
+            // If there are multiple children that match the current path frame, we can stop here.
+            // This is a case where the path is ambiguous and we cannot determine a single row.
+            break;
         }
-        return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { table: table, row: 0, colors: colorByColors, colorBy: colorByValue, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: path, level: 0, isRoot: true, searchString: currentSearchString ?? '', setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: highlightSimilarStacksName, setHoveringName: highlightSimilarStacksSetName, hoveringRow: highlightSimilarStacksRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
-    }, [
-        width,
-        height,
-        displayMenu,
-        table,
-        colorByColors,
-        colorByValue,
-        setCurPath,
-        curPath,
-        total,
-        xScale,
-        currentSearchString,
-        sortBy,
-        isDarkMode,
-        compareMode,
-        profileType,
-        isContextMenuOpen,
-        highlightSimilarStacksName,
-        highlightSimilarStacksRow,
-        colorForSimilarNodes,
-        highlightSimilarStacksPreference,
-        path,
-        highlightSimilarStacksSetName,
-        isIcicleChart,
-        profileSource,
-    ]);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "relative", onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ContextMenu, { menuId: MENU_ID, table: table, row: hoveringRow ?? 0, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, compareAbsolute: compareAbsolute, trackVisibility: trackVisibility, curPath: curPath, setCurPath: setCurPath, hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit }), dockedMetainfo ? (_jsx(DockedGraphTooltip, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute })) : (!isContextMenuOpen && (_jsx(GraphTooltipArrow, { contextElement: svg.current, isContextMenuOpen: isContextMenuOpen, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, isFixed: false, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute }) }))), root] }) }));
+        // If there is exactly one child that matches the current path frame, we can continue.
+        currentRow = childRows[0];
+    }
+    const selectedRow = currentRow;
+    return (_jsx(TooltipProvider, { table: table, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute, children: _jsxs("div", { className: "relative", children: [_jsx(ContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID, table: table, total: total, totalUnfiltered: total + filtered, compareAbsolute: compareAbsolute, resetPath: () => setCurPath([]), hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit, profileType: profileType }), _jsx(MemoizedTooltip, { contextElement: svg.current, dockedMetainfo: dockedMetainfo }), _jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, children: Array.from({ length: table.numRows }, (_, row) => (_jsx(IcicleNode, { table: table, row: row, colors: colorByColors, colorBy: colorByValue, totalWidth: width ?? 1, height: RowHeight, searchString: currentSearchString ?? '', darkMode: isDarkMode, compareMode: compareMode, colorForSimilarNodes: colorForSimilarNodes, selectedRow: selectedRow, onClick: () => {
+                            if (isIcicleChart) {
+                                // We don't want to expand in icicle charts.
+                                return;
+                            }
+                            handleRowClick(row);
+                        }, onContextMenu: displayMenu, hoveringRow: highlightSimilarStacksPreference ? hoveringRow : undefined, setHoveringRow: highlightSimilarStacksPreference ? setHoveringRow : noop, isIcicleChart: isIcicleChart, profileSource: profileSource }, row))) })] }) }));
 });
 export default IcicleGraphArrow;

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

@@ -2,7 +2,7 @@ import { Table } from 'apache-arrow';
 import { type BinaryFeature, type FilenameFeature } from '@parca/store';
 import { ProfileSource } from '../../ProfileSource';
 import { BigIntDuo } from '../../utils';
-export declare function nodeLabel(table: Table<any>, row: number, level: number, showBinaryName: boolean): string;
+export declare function nodeLabel(table: Table<any>, row: number, showBinaryName: boolean): string;
 export declare const extractFeature: (mapping: string) => BinaryFeature;
 export declare const extractFilenameFeature: (filename: string) => FilenameFeature;
 export declare const getTextForCumulative: (hoveringNodeCumulative: bigint, totalUnfiltered: bigint, total: bigint, unit: string) => string;
@@ -18,6 +18,6 @@ export interface CurrentPathFrame {
     inlined: boolean;
     labels?: string;
 }
-export declare const getCurrentPathFrameData: (table: Table<any>, row: number, level: number) => CurrentPathFrame;
-export declare function isCurrentPathFrameMatch(table: Table<any>, row: number, level: number, b: CurrentPathFrame): boolean;
+export declare const getCurrentPathFrameData: (table: Table<any>, row: number) => CurrentPathFrame;
+export declare function isCurrentPathFrameMatch(table: Table<any>, row: number, b: CurrentPathFrame): boolean;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAsB,aAAa,EAAC,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAC,SAAS,EAAgB,MAAM,aAAa,CAAC;AAUrD,wBAAgB,SAAS,CACvB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EACjB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,OAAO,GACtB,MAAM,CAsBR;AAED,eAAO,MAAM,cAAc,YAAa,MAAM,KAAG,aAMhD,CAAC;AAEF,eAAO,MAAM,sBAAsB,aAAc,MAAM,KAAG,eAMzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BACP,MAAM,mBACb,MAAM,SAChB,MAAM,QACP,MAAM,KACX,MAOF,CAAC;AAEF,eAAO,MAAM,6BAA6B,2BAChB,MAAM,QACxB,MAAM,KACX,MAMF,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,GAAG,KAAG,MAAM,GAAG,IAQpD,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAAoB,aAAa,KAAG,SAyBvE,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,uBAAuB,UAC3B,KAAK,CAAC,GAAG,CAAC,OACZ,MAAM,SACJ,MAAM,KACZ,gBAuBF,CAAC;AAgBF,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EACjB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,CAAC,EAAE,gBAAgB,GAClB,OAAO,CAWT"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAsB,aAAa,EAAC,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAC,SAAS,EAAgB,MAAM,aAAa,CAAC;AAWrD,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,GAAG,MAAM,CAuBzF;AAED,eAAO,MAAM,cAAc,YAAa,MAAM,KAAG,aAMhD,CAAC;AAEF,eAAO,MAAM,sBAAsB,aAAc,MAAM,KAAG,eAMzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BACP,MAAM,mBACb,MAAM,SAChB,MAAM,QACP,MAAM,KACX,MAOF,CAAC;AAEF,eAAO,MAAM,6BAA6B,2BAChB,MAAM,QACxB,MAAM,KACX,MAMF,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,GAAG,KAAG,MAAM,GAAG,IAQpD,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAAoB,aAAa,KAAG,SAyBvE,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,uBAAuB,UAAW,KAAK,CAAC,GAAG,CAAC,OAAO,MAAM,KAAG,gBAwBxE,CAAC;AAgBF,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EACjB,GAAG,EAAE,MAAM,EACX,CAAC,EAAE,gBAAgB,GAClB,OAAO,CAWT"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.js

@@ -14,10 +14,11 @@ import { BINARY_FEATURE_TYPES, EVERYTHING_ELSE, FILENAMES_FEATURE_TYPES, } from
 import { divide, getLastItem, valueFormatter } from '@parca/utilities';
 import { MergedProfileSource } from '../../ProfileSource';
 import { hexifyAddress } from '../../utils';
-import { FIELD_FUNCTION_NAME, FIELD_FUNCTION_START_LINE, FIELD_INLINED, FIELD_LABELS_ONLY, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from './index';
-export function nodeLabel(table, row, level, showBinaryName) {
+import { FIELD_DEPTH, FIELD_FUNCTION_NAME, FIELD_FUNCTION_START_LINE, FIELD_INLINED, FIELD_LABELS_ONLY, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from './index';
+export function nodeLabel(table, row, showBinaryName) {
     const labelsOnly = table.getChild(FIELD_LABELS_ONLY)?.get(row);
-    if (level === 1 && labelsOnly !== null && labelsOnly) {
+    const depth = table.getChild(FIELD_DEPTH)?.get(row) ?? 0;
+    if (depth === 1 && labelsOnly !== null && labelsOnly) {
         return getLabelSet(table, row);
     }
     const functionName = arrowToString(table.getChild(FIELD_FUNCTION_NAME)?.get(row));
@@ -84,7 +85,7 @@ export const boundsFromProfileSource = (profileSource) => {
     const end = request.options.merge.end.seconds * 1000000000n + BigInt(request.options.merge.end.nanos);
     return [start, end];
 };
-export const getCurrentPathFrameData = (table, row, level) => {
+export const getCurrentPathFrameData = (table, row) => {
     const functionName = arrowToString(table.getChild(FIELD_FUNCTION_NAME)?.get(row));
     const systemName = arrowToString(table.getChild(FIELD_FUNCTION_NAME)?.get(row));
     const fileName = arrowToString(table.getChild(FIELD_MAPPING_FILE)?.get(row));
@@ -93,8 +94,9 @@ export const getCurrentPathFrameData = (table, row, level) => {
     const address = hexifyAddress(addressBigInt);
     const inlined = table.getChild(FIELD_INLINED)?.get(row);
     const labelsOnly = table.getChild(FIELD_LABELS_ONLY)?.get(row);
+    const depth = table.getChild(FIELD_DEPTH)?.get(row) ?? 0;
     let labels;
-    if (level === 1 && labelsOnly !== null && labelsOnly) {
+    if (depth === 1 && labelsOnly !== null && labelsOnly) {
         labels = getLabelSet(table, row);
     }
     return {
@@ -119,8 +121,8 @@ function getLabelSet(table, row) {
         .map(([k, v]) => `${k}="${v}"`)
         .join(', ');
 }
-export function isCurrentPathFrameMatch(table, row, level, b) {
-    const a = getCurrentPathFrameData(table, row, level);
+export function isCurrentPathFrameMatch(table, row, b) {
+    const a = getCurrentPathFrameData(table, row);
     return (a.functionName === b.functionName &&
         a.systemName === b.systemName &&
         a.fileName === b.fileName &&

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,19 +1,16 @@
 import React from 'react';
-import { Flamegraph, FlamegraphArrow } from '@parca/client';
+import { FlamegraphArrow } from '@parca/client';
 import { ProfileType } from '@parca/parser';
 import { MergedProfileSource, ProfileSource } from '../ProfileSource';
 import { CurrentPathFrame } from './IcicleGraphArrow/utils';
 export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
     width: number;
-    graph?: Flamegraph;
     arrow?: FlamegraphArrow;
     total: bigint;
     filtered: bigint;
     profileType?: ProfileType;
-    profileSource?: ProfileSource;
-    curPath: string[] | [];
-    setNewCurPath: (path: string[]) => void;
+    profileSource: ProfileSource;
     curPathArrow: CurrentPathFrame[] | [];
     setNewCurPathArrow: (path: CurrentPathFrame[]) => void;
     loading: boolean;
@@ -29,6 +26,6 @@ export declare const validateIcicleChartQuery: (profileSource: MergedProfileSour
     isNonDelta: boolean;
     isDurationTooLong: boolean;
 };
-declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart, profileSource, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart, profileSource, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAKhF,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAOpE,OAAO,EAAC,gBAAgB,EAA0B,MAAM,0BAA0B,CAAC;AAInF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAUD,eAAO,MAAM,wBAAwB,kBACpB,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAIpE,CAAC;AAEF,QAAA,MAAM,kBAAkB,uMAiBrB,uBAAuB,KAAG,GAAG,CAAC,OAoQhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAKhF,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAMpE,OAAO,EAAC,gBAAgB,EAA0B,MAAM,0BAA0B,CAAC;AAInF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAUD,eAAO,MAAM,wBAAwB,kBACpB,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAIpE,CAAC;AAEF,QAAA,MAAM,kBAAkB,wKAcrB,uBAAuB,KAAG,GAAG,CAAC,OA8OhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileIcicleGraph/index.js

@@ -19,8 +19,7 @@ import { capitalizeOnlyFirstLetter, divide } from '@parca/utilities';
 import DiffLegend from '../ProfileView/components/DiffLegend';
 import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
 import { TimelineGuide } from '../TimelineGuide';
-import { IcicleGraph } from './IcicleGraph';
-import { FIELD_FUNCTION_NAME, IcicleGraphArrow } from './IcicleGraphArrow';
+import { IcicleGraphArrow } from './IcicleGraphArrow';
 import useMappingList from './IcicleGraphArrow/useMappingList';
 import { boundsFromProfileSource } from './IcicleGraphArrow/utils';
 const numberFormatter = new Intl.NumberFormat('en-US');
@@ -32,13 +31,12 @@ export const validateIcicleChartQuery = (profileSource) => {
     const isDurationTooLong = profileSource.mergeTo - profileSource.mergeFrom > 60000;
     return { isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong };
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart = false, profileSource, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart = false, profileSource, }) {
     const { onError, authenticationErrorMessage, isDarkMode, iciclechartHelpText } = useParcaContext();
     const { compareMode } = useProfileViewContext();
     const [isLoading, setIsLoading] = useState(true);
     const [icicleChartRef, { height: icicleChartHeight }] = useMeasure();
     const mappingsList = useMappingList(metadataMappingFiles);
-    const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState('sort_by');
     const [colorBy, setColorBy] = useURLState('color_by');
     // By default, we want delta profiles (CPU) to be relatively compared.
     // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
@@ -47,10 +45,10 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     const isCompareAbsolute = compareAbsolute === 'true';
     const mappingsListCount = useMemo(() => mappingsList.filter(m => m !== '').length, [mappingsList]);
     const [totalFormatted, totalUnfilteredFormatted, isTrimmed, trimmedFormatted, trimmedPercentage, isFiltered, filteredPercentage,] = useMemo(() => {
-        if (graph === undefined && arrow === undefined) {
+        if (arrow === undefined) {
             return ['0', '0', false, '0', '0', false, '0', '0'];
         }
-        const trimmed = graph?.trimmed ?? arrow?.trimmed ?? 0n;
+        const trimmed = arrow?.trimmed ?? 0n;
         const totalUnfiltered = total + filtered;
         // safeguard against division by zero
         const totalUnfilteredDivisor = totalUnfiltered > 0 ? totalUnfiltered : 1n;
@@ -63,8 +61,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
             filtered > 0,
             numberFormatter.format(divide(total * 100n, totalUnfilteredDivisor)),
         ];
-    }, [graph, arrow, filtered, total]);
-    const loadingState = !loading && (arrow !== undefined || graph !== undefined) && metadataMappingFiles !== undefined;
+    }, [arrow, filtered, total]);
+    const loadingState = !loading && arrow !== undefined && metadataMappingFiles !== undefined;
     // If there is only one mapping file, we want to color by filename by default.
     useEffect(() => {
         if (mappingsListCount === 1 && colorBy !== 'filename') {
@@ -100,29 +98,23 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
                 return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: "The Icicle chart is not available for this query." }), iciclechartHelpText ?? null] }) }));
             }
         }
-        if (graph === undefined && arrow === undefined)
+        if (arrow === undefined)
             return _jsx("div", { className: "mx-auto text-center", children: "No data..." });
         if (total === 0n && !loading)
             return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
-        if (graph !== undefined)
-            return (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType }));
         if (arrow !== undefined) {
-            return (_jsxs("div", { className: "relative", children: [isIcicleChart ? (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: width, height: icicleChartHeight ?? 420, margin: 0, ticks: 12, timeUnit: "nanoseconds" })) : null, _jsx("div", { ref: icicleChartRef, children: _jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPathArrow, setCurPath: setNewCurPathArrow, profileType: profileType, sortBy: storeSortBy, flamegraphLoading: isLoading, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, compareAbsolute: isCompareAbsolute, isIcicleChart: isIcicleChart, profileSource: profileSource }) })] }));
+            return (_jsxs("div", { className: "relative", children: [isIcicleChart ? (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: width, height: icicleChartHeight ?? 420, margin: 0, ticks: 12, timeUnit: "nanoseconds" })) : null, _jsx("div", { ref: icicleChartRef, children: _jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPathArrow, setCurPath: setNewCurPathArrow, profileType: profileType, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, compareAbsolute: isCompareAbsolute, isIcicleChart: isIcicleChart, profileSource: profileSource }) })] }));
         }
     }, [
         isLoading,
-        graph,
         arrow,
         total,
         loading,
         width,
         filtered,
-        curPath,
-        setNewCurPath,
         curPathArrow,
         setNewCurPathArrow,
         profileType,
-        storeSortBy,
         isHalfScreen,
         isDarkMode,
         mappingsList,

package/dist/ProfileView/components/DashboardItems/index.d.ts

@@ -1,7 +1,7 @@
 import { ProfilerOnRenderCallback } from 'react';
 import { CurrentPathFrame } from '../../../ProfileIcicleGraph/IcicleGraphArrow/utils';
 import { ProfileSource } from '../../../ProfileSource';
-import type { CallgraphData, FlamegraphData, SourceData, TopTableData, VisualizationType } from '../../types/visualization';
+import type { FlamegraphData, SourceData, TopTableData, VisualizationType } from '../../types/visualization';
 interface GetDashboardItemProps {
     type: VisualizationType;
     isHalfScreen: boolean;
@@ -9,9 +9,8 @@ interface GetDashboardItemProps {
     flamegraphData: FlamegraphData;
     flamechartData: FlamegraphData;
     topTableData?: TopTableData;
-    callgraphData?: CallgraphData;
     sourceData?: SourceData;
-    profileSource?: ProfileSource;
+    profileSource: ProfileSource;
     total: bigint;
     filtered: bigint;
     curPath: string[];
@@ -20,11 +19,10 @@ interface GetDashboardItemProps {
     setNewCurPathArrow: (path: CurrentPathFrame[]) => void;
     currentSearchString?: string;
     setSearchString?: (value: string) => void;
-    callgraphSVG?: string;
     perf?: {
         onRender?: ProfilerOnRenderCallback;
     };
 }
-export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, curPathArrow, setNewCurPathArrow, currentSearchString, setSearchString, callgraphSVG, perf, }: GetDashboardItemProps) => JSX.Element;
+export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, sourceData, profileSource, total, filtered, curPathArrow, setNewCurPathArrow, currentSearchString, setSearchString, perf, }: GetDashboardItemProps) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/components/DashboardItems/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardItems/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAW,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAMzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,qQAoB1B,qBAAqB,KAAG,GAAG,CAAC,OA4G9B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardItems/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAW,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,OAAO,KAAK,EACV,cAAc,EACd,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,gNAgB1B,qBAAqB,KAAG,GAAG,CAAC,OA2F9B,CAAC"}