@parca/profile 0.16.376 → 0.16.378

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.378](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.377...@parca/profile@0.16.378) (2024-05-31)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.377](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.376...@parca/profile@0.16.377) (2024-05-30)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.376 (2024-05-30)
 
 **Note:** Version bump only for package @parca/profile

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

@@ -2,9 +2,9 @@ import React from 'react';
 import { type NavigateFunction } from '@parca/utilities';
 interface Props {
     mappings?: string[];
-    mappingsLoading?: boolean;
+    loading?: boolean;
     navigateTo?: NavigateFunction;
     compareMode?: boolean;
 }
-declare const ColorStackLegend: ({ mappings, navigateTo, compareMode, mappingsLoading, }: Props) => React.JSX.Element;
+declare const ColorStackLegend: ({ mappings, navigateTo, compareMode, loading, }: Props) => React.JSX.Element;
 export default ColorStackLegend;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.js

@@ -17,9 +17,9 @@ import cx from 'classnames';
 import { useURLState } from '@parca/components';
 import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@parca/hooks';
 import { EVERYTHING_ELSE, selectDarkMode, useAppSelector } from '@parca/store';
-import { getLastItem } from '@parca/utilities';
 import { getMappingColors } from '.';
-const ColorStackLegend = ({ mappings, navigateTo, compareMode = false, mappingsLoading, }) => {
+import useMappingList from './useMappingList';
+const ColorStackLegend = ({ mappings, navigateTo, compareMode = false, loading, }) => {
     const isDarkMode = useAppSelector(selectDarkMode);
     const currentColorProfile = useCurrentColorProfile();
     const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
@@ -27,21 +27,7 @@ const ColorStackLegend = ({ mappings, navigateTo, compareMode = false, mappingsL
         param: 'binary_frame_filter',
         navigateTo,
     });
-    const mappingsList = useMemo(() => {
-        if (mappings === undefined) {
-            return [];
-        }
-        const list = mappings
-            ?.map(mapping => {
-            return getLastItem(mapping);
-        })
-            .flat() ?? [];
-        // We add a EVERYTHING ELSE mapping to the list.
-        list.push('');
-        // We sort the mappings alphabetically to make sure that the order is always the same.
-        list.sort((a, b) => a.localeCompare(b));
-        return list;
-    }, [mappings]);
+    const mappingsList = useMappingList(mappings);
     const mappingColors = useMemo(() => {
         const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
         return colors;
@@ -57,7 +43,7 @@ const ColorStackLegend = ({ mappings, navigateTo, compareMode = false, mappingsL
             return featureA?.localeCompare(featureB ?? '') ?? 0;
         });
     }, [mappingColors]);
-    if (mappingColors === undefined && mappingsLoading === false) {
+    if (stackColorArray.length === 0 && loading === false) {
         return _jsx(_Fragment, {});
     }
     if (Object.entries(mappingColors).length === 0) {

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

@@ -31,6 +31,7 @@ interface IcicleGraphArrowProps {
     sortBy: string;
     flamegraphLoading: boolean;
     isHalfScreen: boolean;
+    mappingsListFromMetadata: string[];
 }
 export declare const getMappingColors: (mappingsList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => mappingColors;
 export declare const IcicleGraphArrow: React.NamedExoticComponent<IcicleGraphArrowProps>;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -49,7 +49,8 @@ export const getMappingColors = (mappingsList, isDarkMode, currentColorProfile)
     });
     return colors;
 };
-export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, navigateTo, sortBy, flamegraphLoading, }) {
+const noop = () => { };
+export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, navigateTo, sortBy, flamegraphLoading, mappingsListFromMetadata, }) {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const dispatch = useAppDispatch();
     const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
@@ -70,7 +71,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     });
     const currentSearchString = selectQueryParam('search_string') ?? '';
     const { compareMode } = useProfileViewContext();
-    // const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
     const currentColorProfile = useCurrentColorProfile();
     const colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
     const mappingsList = useMemo(() => {
@@ -137,12 +137,23 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
             return;
         }
         // first time hiding a binary
-        const newMappingsList = mappingsList.filter(mapping => mapping !== binaryToRemove);
+        const newMappingsList = mappingsListFromMetadata.filter(mapping => mapping !== binaryToRemove);
         setBinaryFrameFilter(newMappingsList);
     };
+    const highlightSimilarStacksName = highlightSimilarStacksPreference ? hoveringName : null;
+    const highlightSimilarStacksSetName = useMemo(() => {
+        return highlightSimilarStacksPreference ? setHoveringName : noop;
+    }, [highlightSimilarStacksPreference]);
+    const highlightSimilarStacksSetLevel = useMemo(() => {
+        return highlightSimilarStacksPreference ? setHoveringLevel : 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(() => {
-        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, mappingColors: mappingColors, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
+        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, mappingColors: mappingColors, 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: highlightSimilarStacksSetLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: highlightSimilarStacksName, setHoveringName: highlightSimilarStacksSetName, hoveringRow: highlightSimilarStacksRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
     }, [
         width,
         height,
@@ -159,10 +170,13 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
         compareMode,
         profileType,
         isContextMenuOpen,
-        hoveringName,
-        hoveringRow,
+        highlightSimilarStacksName,
+        highlightSimilarStacksRow,
         colorForSimilarNodes,
         highlightSimilarStacksPreference,
+        path,
+        highlightSimilarStacksSetLevel,
+        highlightSimilarStacksSetName,
     ]);
     return (_jsx(_Fragment, { children: _jsxs("div", { 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, navigateTo: navigateTo, trackVisibility: trackVisibility, curPath: curPath, setCurPath: setCurPath, hideMenu: hideAll, hideBinary: hideBinary }), dockedMetainfo ? (_jsx(DockedGraphTooltip, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType })) : (!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, navigateTo: navigateTo }) }))), root] }) }));
 });

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

@@ -0,0 +1,2 @@
+declare const useMappingList: (mappings: string[] | undefined) => string[];
+export default useMappingList;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/useMappingList.js

@@ -0,0 +1,33 @@
+// 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 { getLastItem } from '@parca/utilities';
+const useMappingList = (mappings) => {
+    const mappingsList = useMemo(() => {
+        if (mappings === undefined) {
+            return [];
+        }
+        const list = mappings
+            ?.map(mapping => {
+            return getLastItem(mapping);
+        })
+            .flat() ?? [];
+        // We add a EVERYTHING ELSE mapping to the list.
+        list.push('');
+        // We sort the mappings alphabetically to make sure that the order is always the same.
+        list.sort((a, b) => a.localeCompare(b));
+        return list;
+    }, [mappings]);
+    return mappingsList;
+};
+export default useMappingList;

package/dist/ProfileIcicleGraph/index.d.ts

@@ -20,5 +20,5 @@ interface ProfileIcicleGraphProps {
     mappings?: string[];
     mappingsLoading?: boolean;
 }
-declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, navigateTo, loading, setActionButtons, error, width, isHalfScreen, mappings, mappingsLoading, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, navigateTo, loading, setActionButtons, error, width, isHalfScreen, mappings, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph/index.js

@@ -24,6 +24,7 @@ import SortBySelect from './ActionButtons/SortBySelect';
 import IcicleGraph from './IcicleGraph';
 import IcicleGraphArrow, { FIELD_FUNCTION_NAME } from './IcicleGraphArrow';
 import ColorStackLegend from './IcicleGraphArrow/ColorStackLegend';
+import useMappingList from './IcicleGraphArrow/useMappingList';
 const numberFormatter = new Intl.NumberFormat('en-US');
 const ErrorContent = ({ errorMessage }) => {
     return _jsx("div", { className: "flex justify-center p-10", children: errorMessage });
@@ -77,11 +78,12 @@ const GroupAndSortActionButtons = ({ navigateTo }) => {
     }, [groupBy, setGroupBy]);
     return (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy }), _jsx(SortBySelect, { compareMode: compareMode, sortBy: storeSortBy, setSortBy: setStoreSortBy })] }));
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, navigateTo, loading, setActionButtons, error, width, isHalfScreen, mappings, mappingsLoading, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, navigateTo, loading, setActionButtons, error, width, isHalfScreen, mappings, }) {
     const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
     const { compareMode } = useProfileViewContext();
     const [isLoading, setIsLoading] = useState(true);
     const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
+    const mappingsList = useMappingList(mappings);
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
         param: 'sort_by',
         navigateTo,
@@ -123,14 +125,15 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         isHalfScreen,
         isLoading,
     ]);
+    const loadingState = !loading && (arrow !== undefined || graph !== undefined) && mappings !== undefined;
     useEffect(() => {
-        if (!loading && (arrow !== undefined || graph !== undefined)) {
+        if (loadingState) {
             setIsLoading(false);
         }
         else {
             setIsLoading(true);
         }
-    }, [loading, arrow, graph]);
+    }, [loadingState]);
     if (error != null) {
         onError?.(error);
         if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
@@ -150,26 +153,27 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         if (graph !== undefined)
             return (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo }));
         if (arrow !== undefined)
-            return (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo, sortBy: storeSortBy, flamegraphLoading: isLoading, isHalfScreen: isHalfScreen }));
+            return (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo, sortBy: storeSortBy, flamegraphLoading: isLoading, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList }));
     }, [
         isLoading,
         graph,
         arrow,
         total,
+        loading,
+        width,
         filtered,
         curPath,
         setNewCurPath,
         profileType,
         navigateTo,
-        width,
         storeSortBy,
         isHalfScreen,
         isDarkMode,
-        loading,
+        mappingsList,
     ]);
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, isColorStackLegendEnabled && (_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode, mappings: mappings, mappingsLoading: mappingsLoading })), _jsx("div", { className: "min-h-48", id: "h-icicle-graph", children: _jsx(_Fragment, { children: icicleGraph }) }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
+    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, isColorStackLegendEnabled && (_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode, mappings: mappings, loading: isLoading })), _jsx("div", { className: "min-h-48", id: "h-icicle-graph", children: _jsx(_Fragment, { children: icicleGraph }) }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
 };
 export default ProfileIcicleGraph;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.376",
+  "version": "0.16.378",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -71,5 +71,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "6f30d0d2d958ea4a32f58671bfc97bf72eb232d7"
+  "gitHead": "fbab8208a5a08c44a96f81c90bdd69494914c11c"
 }

package/src/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.tsx

@@ -19,13 +19,14 @@ import cx from 'classnames';
 import {useURLState} from '@parca/components';
 import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
 import {EVERYTHING_ELSE, selectDarkMode, useAppSelector} from '@parca/store';
-import {getLastItem, type NavigateFunction} from '@parca/utilities';
+import {type NavigateFunction} from '@parca/utilities';
 
 import {getMappingColors} from '.';
+import useMappingList from './useMappingList';
 
 interface Props {
   mappings?: string[];
-  mappingsLoading?: boolean;
+  loading?: boolean;
   navigateTo?: NavigateFunction;
   compareMode?: boolean;
 }
@@ -34,7 +35,7 @@ const ColorStackLegend = ({
   mappings,
   navigateTo,
   compareMode = false,
-  mappingsLoading,
+  loading,
 }: Props): React.JSX.Element => {
   const isDarkMode = useAppSelector(selectDarkMode);
   const currentColorProfile = useCurrentColorProfile();
@@ -46,25 +47,7 @@ const ColorStackLegend = ({
     navigateTo,
   });
 
-  const mappingsList = useMemo(() => {
-    if (mappings === undefined) {
-      return [];
-    }
-    const list =
-      mappings
-        ?.map(mapping => {
-          return getLastItem(mapping) as string;
-        })
-        .flat() ?? [];
-
-    // We add a EVERYTHING ELSE mapping to the list.
-    list.push('');
-
-    // We sort the mappings alphabetically to make sure that the order is always the same.
-    list.sort((a, b) => a.localeCompare(b));
-
-    return list;
-  }, [mappings]);
+  const mappingsList = useMappingList(mappings);
 
   const mappingColors = useMemo(() => {
     const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
@@ -83,7 +66,7 @@ const ColorStackLegend = ({
     });
   }, [mappingColors]);
 
-  if (mappingColors === undefined && mappingsLoading === false) {
+  if (stackColorArray.length === 0 && loading === false) {
     return <></>;
   }
 

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -72,6 +72,7 @@ interface IcicleGraphArrowProps {
   sortBy: string;
   flamegraphLoading: boolean;
   isHalfScreen: boolean;
+  mappingsListFromMetadata: string[];
 }
 
 export const getMappingColors = (
@@ -88,6 +89,8 @@ export const getMappingColors = (
   return colors;
 };
 
+const noop = (): void => {};
+
 export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   arrow,
   total,
@@ -99,6 +102,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   navigateTo,
   sortBy,
   flamegraphLoading,
+  mappingsListFromMetadata,
 }: IcicleGraphArrowProps): React.JSX.Element {
   const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
   const dispatch = useAppDispatch();
@@ -126,7 +130,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
 
   const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
   const {compareMode} = useProfileViewContext();
-  // const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
   const currentColorProfile = useCurrentColorProfile();
   const colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
 
@@ -209,10 +212,22 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
     }
 
     // first time hiding a binary
-    const newMappingsList = mappingsList.filter(mapping => mapping !== binaryToRemove);
+    const newMappingsList = mappingsListFromMetadata.filter(mapping => mapping !== binaryToRemove);
     setBinaryFrameFilter(newMappingsList);
   };
 
+  const highlightSimilarStacksName = highlightSimilarStacksPreference ? hoveringName : null;
+  const highlightSimilarStacksSetName = useMemo(() => {
+    return highlightSimilarStacksPreference ? setHoveringName : noop;
+  }, [highlightSimilarStacksPreference]);
+  const highlightSimilarStacksSetLevel = useMemo(() => {
+    return highlightSimilarStacksPreference ? setHoveringLevel : 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(() => {
     return (
@@ -238,20 +253,20 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
               curPath={curPath}
               total={total}
               xScale={xScale}
-              path={[]}
+              path={path}
               level={0}
               isRoot={true}
               searchString={currentSearchString}
               setHoveringRow={setHoveringRow}
-              setHoveringLevel={setHoveringLevel}
+              setHoveringLevel={highlightSimilarStacksSetLevel}
               sortBy={sortBy}
               darkMode={isDarkMode}
               compareMode={compareMode}
               profileType={profileType}
               isContextMenuOpen={isContextMenuOpen}
-              hoveringName={hoveringName}
-              setHoveringName={setHoveringName}
-              hoveringRow={hoveringRow}
+              hoveringName={highlightSimilarStacksName}
+              setHoveringName={highlightSimilarStacksSetName}
+              hoveringRow={highlightSimilarStacksRow}
               colorForSimilarNodes={colorForSimilarNodes}
               highlightSimilarStacksPreference={highlightSimilarStacksPreference}
             />
@@ -275,10 +290,13 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
     compareMode,
     profileType,
     isContextMenuOpen,
-    hoveringName,
-    hoveringRow,
+    highlightSimilarStacksName,
+    highlightSimilarStacksRow,
     colorForSimilarNodes,
     highlightSimilarStacksPreference,
+    path,
+    highlightSimilarStacksSetLevel,
+    highlightSimilarStacksSetName,
   ]);
 
   return (

package/src/ProfileIcicleGraph/IcicleGraphArrow/useMappingList.ts

@@ -0,0 +1,42 @@
+// 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 {getLastItem} from '@parca/utilities';
+
+const useMappingList = (mappings: string[] | undefined): string[] => {
+  const mappingsList = useMemo(() => {
+    if (mappings === undefined) {
+      return [];
+    }
+    const list =
+      mappings
+        ?.map(mapping => {
+          return getLastItem(mapping) as string;
+        })
+        .flat() ?? [];
+
+    // We add a EVERYTHING ELSE mapping to the list.
+    list.push('');
+
+    // We sort the mappings alphabetically to make sure that the order is always the same.
+    list.sort((a, b) => a.localeCompare(b));
+
+    return list;
+  }, [mappings]);
+
+  return mappingsList;
+};
+
+export default useMappingList;

package/src/ProfileIcicleGraph/index.tsx

@@ -40,6 +40,7 @@ import SortBySelect from './ActionButtons/SortBySelect';
 import IcicleGraph from './IcicleGraph';
 import IcicleGraphArrow, {FIELD_FUNCTION_NAME} from './IcicleGraphArrow';
 import ColorStackLegend from './IcicleGraphArrow/ColorStackLegend';
+import useMappingList from './IcicleGraphArrow/useMappingList';
 
 const numberFormatter = new Intl.NumberFormat('en-US');
 
@@ -220,13 +221,14 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   width,
   isHalfScreen,
   mappings,
-  mappingsLoading,
 }: ProfileIcicleGraphProps): JSX.Element {
   const {onError, authenticationErrorMessage, isDarkMode} = useParcaContext();
   const {compareMode} = useProfileViewContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
 
+  const mappingsList = useMappingList(mappings);
+
   const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
     param: 'sort_by',
     navigateTo,
@@ -327,13 +329,16 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     isLoading,
   ]);
 
+  const loadingState =
+    !loading && (arrow !== undefined || graph !== undefined) && mappings !== undefined;
+
   useEffect(() => {
-    if (!loading && (arrow !== undefined || graph !== undefined)) {
+    if (loadingState) {
       setIsLoading(false);
     } else {
       setIsLoading(true);
     }
-  }, [loading, arrow, graph]);
+  }, [loadingState]);
 
   if (error != null) {
     onError?.(error);
@@ -389,6 +394,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
           sortBy={storeSortBy as string}
           flamegraphLoading={isLoading}
           isHalfScreen={isHalfScreen}
+          mappingsListFromMetadata={mappingsList}
         />
       );
   }, [
@@ -396,16 +402,17 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     graph,
     arrow,
     total,
+    loading,
+    width,
     filtered,
     curPath,
     setNewCurPath,
     profileType,
     navigateTo,
-    width,
     storeSortBy,
     isHalfScreen,
     isDarkMode,
-    loading,
+    mappingsList,
   ]);
 
   if (isTrimmed) {
@@ -427,7 +434,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
             navigateTo={navigateTo}
             compareMode={compareMode}
             mappings={mappings}
-            mappingsLoading={mappingsLoading}
+            loading={isLoading}
           />
         )}
         <div className="min-h-48" id="h-icicle-graph">