@parca/profile 0.16.375 → 0.16.377

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.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
+
 ## [0.16.375](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.374...@parca/profile@0.16.375) (2024-05-23)
 
 **Note:** Version bump only for package @parca/profile

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

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

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.js

@@ -15,14 +15,23 @@ import { useMemo } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import { useURLState } from '@parca/components';
-import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { EVERYTHING_ELSE } from '@parca/store';
-const ColorStackLegend = ({ mappingColors, navigateTo, compareMode = false, }) => {
+import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@parca/hooks';
+import { EVERYTHING_ELSE, selectDarkMode, useAppSelector } from '@parca/store';
+import { getMappingColors } from '.';
+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);
     const [currentSearchString, setSearchString] = useURLState({
         param: 'binary_frame_filter',
         navigateTo,
     });
+    const mappingsList = useMappingList(mappings);
+    const mappingColors = useMemo(() => {
+        const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
+        return colors;
+    }, [isDarkMode, mappingsList, currentColorProfile]);
     const stackColorArray = useMemo(() => {
         return Object.entries(mappingColors).sort(([featureA], [featureB]) => {
             if (featureA === EVERYTHING_ELSE) {
@@ -34,7 +43,7 @@ const ColorStackLegend = ({ mappingColors, navigateTo, compareMode = false, }) =
             return featureA?.localeCompare(featureB ?? '') ?? 0;
         });
     }, [mappingColors]);
-    if (mappingColors === undefined) {
+    if (stackColorArray.length === 0 && loading === false) {
         return _jsx(_Fragment, {});
     }
     if (Object.entries(mappingColors).length === 0) {

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { FlamegraphArrow } from '@parca/client';
 import { ProfileType } from '@parca/parser';
-import { type NavigateFunction } from '@parca/utilities';
+import { type ColorConfig, type NavigateFunction } from '@parca/utilities';
+import { mappingColors } from './IcicleGraphNodes';
 export declare const FIELD_LABELS_ONLY = "labels_only";
 export declare const FIELD_MAPPING_FILE = "mapping_file";
 export declare const FIELD_MAPPING_BUILD_ID = "mapping_build_id";
@@ -28,7 +29,10 @@ interface IcicleGraphArrowProps {
     setCurPath: (path: string[]) => void;
     navigateTo?: NavigateFunction;
     sortBy: string;
-    mappings?: 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>;
 export default IcicleGraphArrow;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -17,15 +17,14 @@ 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, selectQueryParam } from '@parca/utilities';
+import { getLastItem, scaleLinear, selectQueryParam, } from '@parca/utilities';
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
 import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
-import ColorStackLegend from './ColorStackLegend';
 import ContextMenu from './ContextMenu';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
-import { extractFeature } from './utils';
+import { arrowToString, extractFeature } 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';
@@ -42,7 +41,15 @@ export const FIELD_CUMULATIVE = 'cumulative';
 export const FIELD_CUMULATIVE_PER_SECOND = 'cumulative_per_second';
 export const FIELD_DIFF = 'diff';
 export const FIELD_DIFF_PER_SECOND = 'diff_per_second';
-export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, navigateTo, sortBy, mappings, }) {
+export const getMappingColors = (mappingsList, isDarkMode, currentColorProfile) => {
+    const mappingFeatures = mappingsList.map(mapping => extractFeature(mapping));
+    const colors = {};
+    Object.entries(mappingFeatures).forEach(([_, feature]) => {
+        colors[feature.name] = getColorForFeature(feature.name, isDarkMode, currentColorProfile.colors);
+    });
+    return colors;
+};
+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);
@@ -63,35 +70,46 @@ 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(() => {
-        const list = mappings
-            ?.map(mapping => {
-            return getLastItem(mapping);
+        // Read the mappings from the dictionary that contains all mapping strings.
+        // This is great, as might only have a dozen or so mappings,
+        // and don't need to read through all the rows (potentially thousands).
+        const mappingsDict = table.getChild(FIELD_MAPPING_FILE);
+        const mappings = mappingsDict?.data
+            .map(mapping => {
+            if (mapping.dictionary == null) {
+                return [];
+            }
+            const len = mapping.dictionary.length;
+            const entries = [];
+            for (let i = 0; i < len; i++) {
+                const fn = arrowToString(mapping.dictionary.get(i));
+                entries.push(getLastItem(fn) ?? '');
+            }
+            return entries;
         })
             .flat() ?? [];
         // We add a EVERYTHING ELSE mapping to the list.
-        list.push('');
+        mappings.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]);
+        mappings.sort((a, b) => a.localeCompare(b));
+        return mappings;
+    }, [table]);
     const mappingColors = useMemo(() => {
-        const mappingFeatures = mappingsList.map(mapping => extractFeature(mapping));
-        const colors = {};
-        Object.entries(mappingFeatures).forEach(([_, feature]) => {
-            colors[feature.name] = getColorForFeature(feature.name, isDarkMode, currentColorProfile.colors);
-        });
+        const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
         return colors;
-    }, [mappingsList, isDarkMode, currentColorProfile]);
+    }, [isDarkMode, mappingsList, currentColorProfile]);
     useEffect(() => {
         if (ref.current != null) {
             setHeight(ref?.current.getBoundingClientRect().height);
         }
-    }, [width]);
+    }, [width, flamegraphLoading]);
     const xScale = useMemo(() => {
+        if (total === 0n) {
+            return () => 0;
+        }
         if (width === undefined) {
             return () => 0;
         }
@@ -118,36 +136,33 @@ 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);
     };
     // 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 }) }) }) }));
     }, [
-        compareMode,
-        curPath,
-        currentSearchString,
+        width,
         height,
-        isDarkMode,
-        profileType,
+        displayMenu,
+        table,
         mappingColors,
         setCurPath,
-        sortBy,
-        table,
+        curPath,
         total,
-        width,
         xScale,
+        currentSearchString,
+        sortBy,
+        isDarkMode,
+        compareMode,
+        profileType,
         isContextMenuOpen,
-        displayMenu,
-        colorForSimilarNodes,
-        highlightSimilarStacksPreference,
         hoveringName,
         hoveringRow,
+        colorForSimilarNodes,
+        highlightSimilarStacksPreference,
     ]);
-    if (table.numRows === 0 || width === undefined) {
-        return _jsx(_Fragment, {});
-    }
-    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 }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode })), 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] }) }));
+    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] }) }));
 });
 export default IcicleGraphArrow;

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

@@ -18,6 +18,7 @@ interface ProfileIcicleGraphProps {
     error?: any;
     isHalfScreen: boolean;
     mappings?: string[];
+    mappingsLoading?: boolean;
 }
 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

@@ -14,15 +14,17 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Icon } from '@iconify/react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button, IcicleActionButtonPlaceholder, IcicleGraphSkeleton, IconButton, useParcaContext, useURLState, } from '@parca/components';
+import { Button, IcicleGraphSkeleton, IconButton, useParcaContext, useURLState, } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { capitalizeOnlyFirstLetter, divide } from '@parca/utilities';
+import { capitalizeOnlyFirstLetter, divide, selectQueryParam, } from '@parca/utilities';
 import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import DiffLegend from '../components/DiffLegend';
 import GroupByDropdown from './ActionButtons/GroupByDropdown';
 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 });
@@ -80,6 +82,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     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,
@@ -108,14 +112,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         ];
     }, [graph, arrow, filtered, total]);
     useEffect(() => {
-        if (isLoading && setActionButtons !== undefined) {
-            setActionButtons(_jsx(IcicleActionButtonPlaceholder, { isHalfScreen: isHalfScreen }));
-            return;
-        }
-        if (setActionButtons === undefined) {
-            return;
-        }
-        setActionButtons(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [arrow !== undefined && _jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), arrow !== undefined && isHalfScreen ? (_jsx(IconButton, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', toolTipText: isInvert ? 'Original Call Stack' : 'Invert Call Stack', onClick: () => setInvertStack(isInvert ? '' : 'true'), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setInvertStack(isInvert ? '' : 'true'), children: [isInvert ? 'Original Call Stack' : 'Invert Call Stack', _jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', width: 20 })] })), _jsx(ShowHideLegendButton, { isHalfScreen: isHalfScreen, navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: "system-uicons:reset", disabled: curPath.length === 0, toolTipText: "Reset View", onClick: () => setNewCurPath([]), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset View", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] }) }));
+        setActionButtons?.(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [_jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', toolTipText: isInvert ? 'Original Call Stack' : 'Invert Call Stack', onClick: () => setInvertStack(isInvert ? '' : 'true'), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setInvertStack(isInvert ? '' : 'true'), children: [isInvert ? 'Original Call Stack' : 'Invert Call Stack', _jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', width: 20 })] })), _jsx(ShowHideLegendButton, { isHalfScreen: isHalfScreen, navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: "system-uicons:reset", disabled: curPath.length === 0, toolTipText: "Reset View", onClick: () => setNewCurPath([]), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset View", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] }) }));
     }, [
         navigateTo,
         isInvert,
@@ -128,17 +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]);
-    if (isLoading) {
-        return (_jsx("div", { className: "h-auto overflow-clip", children: _jsx(IcicleGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
-    }
+    }, [loadingState]);
     if (error != null) {
         onError?.(error);
         if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
@@ -146,13 +141,39 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         }
         return _jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(error.message) });
     }
-    if (graph === undefined && 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" });
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const icicleGraph = useMemo(() => {
+        if (isLoading) {
+            return (_jsx("div", { className: "h-auto overflow-clip", children: _jsx(IcicleGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
+        }
+        if (graph === undefined && 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, 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, mappingsListFromMetadata: mappingsList }));
+    }, [
+        isLoading,
+        graph,
+        arrow,
+        total,
+        loading,
+        width,
+        filtered,
+        curPath,
+        setNewCurPath,
+        profileType,
+        navigateTo,
+        storeSortBy,
+        isHalfScreen,
+        isDarkMode,
+        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, _jsxs("div", { className: "min-h-48", id: "h-icicle-graph", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo, sortBy: storeSortBy, mappings: mappings }))] }), _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/dist/ProfileView/index.js

@@ -107,11 +107,11 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                 return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
                         onRender: perf?.onRender,
-                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), navigateTo: navigateTo, loading: flamegraphData.loading && flamegraphData.mappingsLoading, setActionButtons: setActionButtons, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
                             ? isHalfScreen
                                 ? (dimensions.width - 40) / 2
                                 : dimensions.width - 16
-                            : 0, mappings: flamegraphData.mappings }) }));
+                            : 0, mappings: flamegraphData.mappings, mappingsLoading: flamegraphData.mappingsLoading }) }));
             }
             case 'callgraph': {
                 return callgraphData?.data !== undefined &&

package/dist/Table/index.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { tableFromIPC } from 'apache-arrow';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button, TableActionButtonPlaceholder, Table as TableComponent, TableSkeleton, useParcaContext, useURLState, } from '@parca/components';
+import { Button, Table as TableComponent, TableSkeleton, useParcaContext, useURLState, } from '@parca/components';
 import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/utilities';
 import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import { hexifyAddress } from '../utils';
@@ -214,14 +214,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
         }
     }, [navigateTo, router, filterByFunctionInput]);
     useEffect(() => {
-        if (loading && setActionButtons !== undefined) {
-            setActionButtons(_jsx(TableActionButtonPlaceholder, {}));
-            return;
-        }
-        if (setActionButtons === undefined) {
-            return;
-        }
-        setActionButtons(_jsxs(_Fragment, { children: [_jsx(ColumnsVisibility, { columns: columns, visibility: columnVisibility, setVisibility: (id, visible) => {
+        setActionButtons?.(_jsxs(_Fragment, { children: [_jsx(ColumnsVisibility, { columns: columns, visibility: columnVisibility, setVisibility: (id, visible) => {
                         setColumnVisibility({ ...columnVisibility, [id]: visible });
                     } }), dashboardItems.length > 1 && (_jsx(Button, { color: "neutral", onClick: clearSelection, className: "w-auto", variant: "neutral", disabled: currentSearchString === undefined || currentSearchString.length === 0, children: "Clear selection" }))] }));
     }, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.375",
+  "version": "0.16.377",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -71,5 +71,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "1c9338c7294c1df88345032cee964653ce4e349b"
+  "gitHead": "7f48ce8d53a8f749508d0b002c04bf1257c4bbde"
 }

package/src/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.tsx

@@ -17,23 +17,28 @@ import {Icon} from '@iconify/react';
 import cx from 'classnames';
 
 import {useURLState} from '@parca/components';
-import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
-import {EVERYTHING_ELSE} from '@parca/store';
-import type {NavigateFunction} from '@parca/utilities';
+import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
+import {EVERYTHING_ELSE, selectDarkMode, useAppSelector} from '@parca/store';
+import {type NavigateFunction} from '@parca/utilities';
 
-import {mappingColors} from './IcicleGraphNodes';
+import {getMappingColors} from '.';
+import useMappingList from './useMappingList';
 
 interface Props {
-  mappingColors: mappingColors;
+  mappings?: string[];
+  loading?: boolean;
   navigateTo?: NavigateFunction;
   compareMode?: boolean;
 }
 
 const ColorStackLegend = ({
-  mappingColors,
+  mappings,
   navigateTo,
   compareMode = false,
+  loading,
 }: Props): React.JSX.Element => {
+  const isDarkMode = useAppSelector(selectDarkMode);
+  const currentColorProfile = useCurrentColorProfile();
   const [colorProfileName] = useUserPreference<string>(
     USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
   );
@@ -42,6 +47,13 @@ const ColorStackLegend = ({
     navigateTo,
   });
 
+  const mappingsList = useMappingList(mappings);
+
+  const mappingColors = useMemo(() => {
+    const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
+    return colors;
+  }, [isDarkMode, mappingsList, currentColorProfile]);
+
   const stackColorArray = useMemo(() => {
     return Object.entries(mappingColors).sort(([featureA], [featureB]) => {
       if (featureA === EVERYTHING_ELSE) {
@@ -54,7 +66,7 @@ const ColorStackLegend = ({
     });
   }, [mappingColors]);
 
-  if (mappingColors === undefined) {
+  if (stackColorArray.length === 0 && loading === false) {
     return <></>;
   }
 

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -13,7 +13,7 @@
 
 import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
-import {Table, tableFromIPC} from 'apache-arrow';
+import {Dictionary, Table, Vector, tableFromIPC} from 'apache-arrow';
 import {useContextMenu} from 'react-contexify';
 
 import {FlamegraphArrow} from '@parca/client';
@@ -27,16 +27,21 @@ import {
   useAppDispatch,
   useAppSelector,
 } from '@parca/store';
-import {getLastItem, scaleLinear, selectQueryParam, type NavigateFunction} from '@parca/utilities';
+import {
+  getLastItem,
+  scaleLinear,
+  selectQueryParam,
+  type ColorConfig,
+  type NavigateFunction,
+} from '@parca/utilities';
 
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import {DockedGraphTooltip} from '../../GraphTooltipArrow/DockedGraphTooltip';
 import {useProfileViewContext} from '../../ProfileView/ProfileViewContext';
-import ColorStackLegend from './ColorStackLegend';
 import ContextMenu from './ContextMenu';
 import {IcicleNode, RowHeight, mappingColors} from './IcicleGraphNodes';
-import {extractFeature} from './utils';
+import {arrowToString, extractFeature} from './utils';
 
 export const FIELD_LABELS_ONLY = 'labels_only';
 export const FIELD_MAPPING_FILE = 'mapping_file';
@@ -65,9 +70,25 @@ interface IcicleGraphArrowProps {
   setCurPath: (path: string[]) => void;
   navigateTo?: NavigateFunction;
   sortBy: string;
-  mappings?: string[];
+  flamegraphLoading: boolean;
+  isHalfScreen: boolean;
+  mappingsListFromMetadata: string[];
 }
 
+export const getMappingColors = (
+  mappingsList: string[],
+  isDarkMode: boolean,
+  currentColorProfile: ColorConfig
+): mappingColors => {
+  const mappingFeatures = mappingsList.map(mapping => extractFeature(mapping));
+
+  const colors: mappingColors = {};
+  Object.entries(mappingFeatures).forEach(([_, feature]) => {
+    colors[feature.name] = getColorForFeature(feature.name, isDarkMode, currentColorProfile.colors);
+  });
+  return colors;
+};
+
 export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   arrow,
   total,
@@ -78,7 +99,8 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   profileType,
   navigateTo,
   sortBy,
-  mappings,
+  flamegraphLoading,
+  mappingsListFromMetadata,
 }: IcicleGraphArrowProps): React.JSX.Element {
   const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
   const dispatch = useAppDispatch();
@@ -106,50 +128,54 @@ 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;
 
   const mappingsList = useMemo(() => {
-    const list =
-      mappings
-        ?.map(mapping => {
-          return getLastItem(mapping) as string;
+    // Read the mappings from the dictionary that contains all mapping strings.
+    // This is great, as might only have a dozen or so mappings,
+    // and don't need to read through all the rows (potentially thousands).
+    const mappingsDict: Vector<Dictionary> | null = table.getChild(FIELD_MAPPING_FILE);
+    const mappings =
+      mappingsDict?.data
+        .map(mapping => {
+          if (mapping.dictionary == null) {
+            return [];
+          }
+          const len = mapping.dictionary.length;
+          const entries: string[] = [];
+          for (let i = 0; i < len; i++) {
+            const fn = arrowToString(mapping.dictionary.get(i));
+            entries.push(getLastItem(fn) ?? '');
+          }
+          return entries;
         })
         .flat() ?? [];
 
     // We add a EVERYTHING ELSE mapping to the list.
-    list.push('');
+    mappings.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]);
+    mappings.sort((a, b) => a.localeCompare(b));
+    return mappings;
+  }, [table]);
 
   const mappingColors = useMemo(() => {
-    const mappingFeatures = mappingsList.map(mapping => extractFeature(mapping));
-
-    const colors: mappingColors = {};
-
-    Object.entries(mappingFeatures).forEach(([_, feature]) => {
-      colors[feature.name] = getColorForFeature(
-        feature.name,
-        isDarkMode,
-        currentColorProfile.colors
-      );
-    });
-
+    const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
     return colors;
-  }, [mappingsList, isDarkMode, currentColorProfile]);
+  }, [isDarkMode, mappingsList, currentColorProfile]);
 
   useEffect(() => {
     if (ref.current != null) {
       setHeight(ref?.current.getBoundingClientRect().height);
     }
-  }, [width]);
+  }, [width, flamegraphLoading]);
 
   const xScale = useMemo(() => {
+    if (total === 0n) {
+      return () => 0;
+    }
+
     if (width === undefined) {
       return () => 0;
     }
@@ -184,7 +210,7 @@ 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);
   };
 
@@ -235,31 +261,27 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
       </svg>
     );
   }, [
-    compareMode,
-    curPath,
-    currentSearchString,
+    width,
     height,
-    isDarkMode,
-    profileType,
+    displayMenu,
+    table,
     mappingColors,
     setCurPath,
-    sortBy,
-    table,
+    curPath,
     total,
-    width,
     xScale,
+    currentSearchString,
+    sortBy,
+    isDarkMode,
+    compareMode,
+    profileType,
     isContextMenuOpen,
-    displayMenu,
-    colorForSimilarNodes,
-    highlightSimilarStacksPreference,
     hoveringName,
     hoveringRow,
+    colorForSimilarNodes,
+    highlightSimilarStacksPreference,
   ]);
 
-  if (table.numRows === 0 || width === undefined) {
-    return <></>;
-  }
-
   return (
     <>
       <div onMouseLeave={() => dispatch(setHoveringNode(undefined))}>
@@ -278,13 +300,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
           hideMenu={hideAll}
           hideBinary={hideBinary}
         />
-        {isColorStackLegendEnabled && (
-          <ColorStackLegend
-            mappingColors={mappingColors}
-            navigateTo={navigateTo}
-            compareMode={compareMode}
-          />
-        )}
         {dockedMetainfo ? (
           <DockedGraphTooltip
             table={table}

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

@@ -19,7 +19,6 @@ import {AnimatePresence, motion} from 'framer-motion';
 import {Flamegraph, FlamegraphArrow} from '@parca/client';
 import {
   Button,
-  IcicleActionButtonPlaceholder,
   IcicleGraphSkeleton,
   IconButton,
   useParcaContext,
@@ -27,7 +26,12 @@ import {
 } from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
-import {capitalizeOnlyFirstLetter, divide, type NavigateFunction} from '@parca/utilities';
+import {
+  capitalizeOnlyFirstLetter,
+  divide,
+  selectQueryParam,
+  type NavigateFunction,
+} from '@parca/utilities';
 
 import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import DiffLegend from '../components/DiffLegend';
@@ -35,6 +39,8 @@ import GroupByDropdown from './ActionButtons/GroupByDropdown';
 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');
 
@@ -55,6 +61,7 @@ interface ProfileIcicleGraphProps {
   error?: any;
   isHalfScreen: boolean;
   mappings?: string[];
+  mappingsLoading?: boolean;
 }
 
 const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
@@ -218,6 +225,9 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   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',
@@ -262,20 +272,11 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   }, [graph, arrow, filtered, total]);
 
   useEffect(() => {
-    if (isLoading && setActionButtons !== undefined) {
-      setActionButtons(<IcicleActionButtonPlaceholder isHalfScreen={isHalfScreen} />);
-      return;
-    }
-
-    if (setActionButtons === undefined) {
-      return;
-    }
-
-    setActionButtons(
+    setActionButtons?.(
       <div className="flex w-full justify-end gap-2 pb-2">
         <div className="ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end">
-          {arrow !== undefined && <GroupAndSortActionButtons navigateTo={navigateTo} />}
-          {arrow !== undefined && isHalfScreen ? (
+          {<GroupAndSortActionButtons navigateTo={navigateTo} />}
+          {isHalfScreen ? (
             <IconButton
               icon={isInvert ? 'ph:sort-ascending' : 'ph:sort-descending'}
               toolTipText={isInvert ? 'Original Call Stack' : 'Invert Call Stack'}
@@ -328,21 +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]);
-
-  if (isLoading) {
-    return (
-      <div className="h-auto overflow-clip">
-        <IcicleGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
-      </div>
-    );
-  }
+  }, [loadingState]);
 
   if (error != null) {
     onError?.(error);
@@ -354,11 +350,70 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     return <ErrorContent errorMessage={capitalizeOnlyFirstLetter(error.message)} />;
   }
 
-  if (graph === undefined && arrow === undefined)
-    return <div className="mx-auto text-center">No data...</div>;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const icicleGraph = useMemo(() => {
+    if (isLoading) {
+      return (
+        <div className="h-auto overflow-clip">
+          <IcicleGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
+        </div>
+      );
+    }
 
-  if (total === 0n && !loading)
-    return <div className="mx-auto text-center">Profile has no samples</div>;
+    if (graph === undefined && arrow === undefined)
+      return <div className="mx-auto text-center">No data...</div>;
+
+    if (total === 0n && !loading)
+      return <div className="mx-auto text-center">Profile has no samples</div>;
+
+    if (graph !== undefined)
+      return (
+        <IcicleGraph
+          width={width}
+          graph={graph}
+          total={total}
+          filtered={filtered}
+          curPath={curPath}
+          setCurPath={setNewCurPath}
+          profileType={profileType}
+          navigateTo={navigateTo}
+        />
+      );
+
+    if (arrow !== undefined)
+      return (
+        <IcicleGraphArrow
+          width={width}
+          arrow={arrow}
+          total={total}
+          filtered={filtered}
+          curPath={curPath}
+          setCurPath={setNewCurPath}
+          profileType={profileType}
+          navigateTo={navigateTo}
+          sortBy={storeSortBy as string}
+          flamegraphLoading={isLoading}
+          isHalfScreen={isHalfScreen}
+          mappingsListFromMetadata={mappingsList}
+        />
+      );
+  }, [
+    isLoading,
+    graph,
+    arrow,
+    total,
+    loading,
+    width,
+    filtered,
+    curPath,
+    setNewCurPath,
+    profileType,
+    navigateTo,
+    storeSortBy,
+    isHalfScreen,
+    isDarkMode,
+    mappingsList,
+  ]);
 
   if (isTrimmed) {
     console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
@@ -374,33 +429,16 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
         transition={{duration: 0.5}}
       >
         {compareMode ? <DiffLegend /> : null}
+        {isColorStackLegendEnabled && (
+          <ColorStackLegend
+            navigateTo={navigateTo}
+            compareMode={compareMode}
+            mappings={mappings}
+            loading={isLoading}
+          />
+        )}
         <div className="min-h-48" id="h-icicle-graph">
-          {graph !== undefined && (
-            <IcicleGraph
-              width={width}
-              graph={graph}
-              total={total}
-              filtered={filtered}
-              curPath={curPath}
-              setCurPath={setNewCurPath}
-              profileType={profileType}
-              navigateTo={navigateTo}
-            />
-          )}
-          {arrow !== undefined && (
-            <IcicleGraphArrow
-              width={width}
-              arrow={arrow}
-              total={total}
-              filtered={filtered}
-              curPath={curPath}
-              setCurPath={setNewCurPath}
-              profileType={profileType}
-              navigateTo={navigateTo}
-              sortBy={storeSortBy as string}
-              mappings={mappings}
-            />
-          )}
+          <>{icicleGraph}</>
         </div>
         <p className="my-2 text-xs">
           Showing {totalFormatted}{' '}

package/src/ProfileView/index.tsx

@@ -240,7 +240,7 @@ export const ProfileView = ({
               filtered={filtered}
               profileType={profileSource?.ProfileType()}
               navigateTo={navigateTo}
-              loading={flamegraphData.loading && flamegraphData.mappingsLoading}
+              loading={flamegraphData.loading}
               setActionButtons={setActionButtons}
               error={flamegraphData.error}
               isHalfScreen={isHalfScreen}
@@ -252,6 +252,7 @@ export const ProfileView = ({
                   : 0
               }
               mappings={flamegraphData.mappings}
+              mappingsLoading={flamegraphData.mappingsLoading}
             />
           </ConditionalWrapper>
         );

package/src/Table/index.tsx

@@ -18,7 +18,6 @@ import {AnimatePresence, motion} from 'framer-motion';
 
 import {
   Button,
-  TableActionButtonPlaceholder,
   Table as TableComponent,
   TableSkeleton,
   useParcaContext,
@@ -310,16 +309,7 @@ export const Table = React.memo(function Table({
   }, [navigateTo, router, filterByFunctionInput]);
 
   useEffect(() => {
-    if (loading && setActionButtons !== undefined) {
-      setActionButtons(<TableActionButtonPlaceholder />);
-      return;
-    }
-
-    if (setActionButtons === undefined) {
-      return;
-    }
-
-    setActionButtons(
+    setActionButtons?.(
       <>
         <ColumnsVisibility
           columns={columns}