@parca/profile 0.19.50 → 0.19.52

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.19.52 (2025-09-15)
+
+## 0.24.2 (2025-09-10)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.19.51 (2025-09-10)
+
+## 0.24.1 (2025-09-09)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.50](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.49...@parca/profile@0.19.50) (2025-09-08)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.js

@@ -51,7 +51,6 @@ export const FlameNode = React.memo(function FlameNodeNoMemo({ table, row, color
         ? BigInt(valueOffsetColumn?.get(row))
         : 0n;
     const colorAttribute = colorBy === 'filename' ? filename : colorBy === 'binary' ? mappingFile : null;
-    const colorsMap = colors;
     const hoveringName = hoveringRow !== undefined ? arrowToString(functionNameColumn?.get(hoveringRow)) : '';
     const shouldBeHighlighted = functionName != null && hoveringName != null && functionName === hoveringName;
     const colorResult = useNodeColor({
@@ -59,7 +58,7 @@ export const FlameNode = React.memo(function FlameNodeNoMemo({ table, row, color
         compareMode,
         cumulative,
         diff,
-        colorsMap,
+        colorsMap: colors,
         colorAttribute,
     });
     const name = useMemo(() => {
@@ -138,5 +137,7 @@ export const FlameNode = React.memo(function FlameNodeNoMemo({ table, row, color
         prevProps.hoveringRow === nextProps.hoveringRow &&
         prevProps.totalWidth === nextProps.totalWidth &&
         prevProps.height === nextProps.height &&
-        prevProps.effectiveDepth === nextProps.effectiveDepth);
+        prevProps.effectiveDepth === nextProps.effectiveDepth &&
+        prevProps.colorBy === nextProps.colorBy &&
+        prevProps.colors === nextProps.colors);
 });

package/dist/ProfileFlameGraph/FlameGraphArrow/index.d.ts

@@ -37,6 +37,8 @@ interface FlameGraphArrowProps {
     setCurPath: (path: CurrentPathFrame[]) => void;
     isHalfScreen: boolean;
     mappingsListFromMetadata: string[];
+    filenamesListFromMetadata: string[];
+    colorBy: string;
     compareAbsolute: boolean;
     isFlameChart?: boolean;
     isRenderedAsFlamegraph?: boolean;

package/dist/ProfileFlameGraph/FlameGraphArrow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAQN,MAAM,OAAO,CAAC;AAKf,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;AAIlD,OAAO,EAAuB,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAMtE,OAAO,EACL,gBAAgB,EAOjB,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,oBAAoB;IAC5B,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,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,GAC3B,cAAc,MAAM,EAAE,EACtB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,eAAe,MAAM,EAAE,EACvB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,eAAe,kDAuR1B,CAAC;AAEH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAQN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAIlD,OAAO,EAAuB,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAKtE,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,oBAAoB;IAC5B,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,yBAAyB,EAAE,MAAM,EAAE,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,GAC3B,cAAc,MAAM,EAAE,EACtB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,eAAe,MAAM,EAAE,EACvB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,eAAe,kDA0P1B,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/index.js

@@ -14,20 +14,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState, } from 'react';
 import { tableFromIPC } from 'apache-arrow';
 import { useContextMenu } from 'react-contexify';
-import { useParcaContext, useURLState } from '@parca/components';
+import { useParcaContext } from '@parca/components';
 import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@parca/hooks';
 import { getColorForFeature, selectDarkMode, useAppSelector } from '@parca/store';
-import { getLastItem } from '@parca/utilities';
 import { useProfileFilters } from '../../ProfileView/components/ProfileFilters/useProfileFilters';
 import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
 import ContextMenuWrapper from './ContextMenuWrapper';
 import { FlameNode, RowHeight } from './FlameGraphNodes';
 import { MemoizedTooltip } from './MemoizedTooltip';
 import { TooltipProvider } from './TooltipContext';
-import { useFilenamesList } from './useMappingList';
 import { useScrollViewport } from './useScrollViewport';
 import { useVisibleNodes } from './useVisibleNodes';
-import { arrowToString, extractFeature, extractFilenameFeature, getCurrentPathFrameData, getMaxDepth, isCurrentPathFrameMatch, } from './utils';
+import { extractFeature, extractFilenameFeature, getCurrentPathFrameData, getMaxDepth, 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';
@@ -66,7 +64,7 @@ export const getFilenameColors = (filenamesList, isDarkMode, currentColorProfile
     return colors;
 };
 const noop = () => { };
-export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, compareAbsolute, isFlameChart = false, isRenderedAsFlamegraph = false, isInSandwichView = false, tooltipId = 'default', maxFrameCount, isExpanded = false, }) {
+export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, compareAbsolute, isFlameChart = false, isRenderedAsFlamegraph = false, isInSandwichView = false, tooltipId = 'default', maxFrameCount, isExpanded = false, mappingsListFromMetadata, filenamesListFromMetadata, colorBy, }) {
     const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
     const [hoveringRow, setHoveringRow] = useState(undefined);
     const [dockedMetainfo] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
@@ -87,42 +85,15 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, fil
     const { compareMode } = useProfileViewContext();
     const currentColorProfile = useCurrentColorProfile();
     const colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
-    const [colorBy, _] = useURLState('color_by');
     const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : colorBy;
-    const filenamesList = useFilenamesList(table);
-    const mappingsList = useMemo(() => {
-        // 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.
-        mappings.push('');
-        // We sort the mappings alphabetically to make sure that the order is always the same.
-        mappings.sort((a, b) => a.localeCompare(b));
-        return mappings;
-    }, [table]);
     const filenameColors = useMemo(() => {
-        const colors = getFilenameColors(filenamesList, isDarkMode, currentColorProfile);
+        const colors = getFilenameColors(filenamesListFromMetadata, isDarkMode, currentColorProfile);
         return colors;
-    }, [isDarkMode, filenamesList, currentColorProfile]);
+    }, [isDarkMode, filenamesListFromMetadata, currentColorProfile]);
     const mappingColors = useMemo(() => {
-        const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
+        const colors = getMappingColors(mappingsListFromMetadata, isDarkMode, currentColorProfile);
         return colors;
-    }, [isDarkMode, mappingsList, currentColorProfile]);
+    }, [isDarkMode, mappingsListFromMetadata, currentColorProfile]);
     const colorByList = {
         filename: filenameColors,
         binary: mappingColors,

package/dist/ProfileFlameGraph/index.d.ts

@@ -31,6 +31,6 @@ export declare const validateFlameChartQuery: (profileSource: MergedProfileSourc
     isNonDelta: boolean;
     isDurationTooLong: boolean;
 };
-declare const ProfileFlameGraph: ({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isFlameChart, profileSource, isInSandwichView, isRenderedAsFlamegraph, tooltipId, maxFrameCount, isExpanded, }: ProfileFlameGraphProps) => JSX.Element;
+declare const ProfileFlameGraph: ({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isFlameChart, profileSource, isInSandwichView, isRenderedAsFlamegraph, tooltipId, maxFrameCount, isExpanded, metadataLoading, }: ProfileFlameGraphProps) => JSX.Element;
 export default ProfileFlameGraph;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAO9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAMpE,OAAO,EAAC,gBAAgB,EAA0B,MAAM,yBAAyB,CAAC;AAIlF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,sBAAsB;IAC9B,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,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAUD,eAAO,MAAM,uBAAuB,GAClC,eAAe,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAMpE,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAqC,oPAmBzD,sBAAsB,KAAG,GAAG,CAAC,OAkT/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAO9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAOpE,OAAO,EAAC,gBAAgB,EAA0B,MAAM,yBAAyB,CAAC;AAIlF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,sBAAsB;IAC9B,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,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAUD,eAAO,MAAM,uBAAuB,GAClC,eAAe,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAMpE,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAqC,qQAoBzD,sBAAsB,KAAG,GAAG,CAAC,OA0T/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/ProfileFlameGraph/index.js

@@ -20,9 +20,10 @@ import { testId } from '@parca/test-utils';
 import { capitalizeOnlyFirstLetter, divide } from '@parca/utilities';
 import DiffLegend from '../ProfileView/components/DiffLegend';
 import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
+import { useProfileMetadata } from '../ProfileView/hooks/useProfileMetadata';
+import { useVisualizationState } from '../ProfileView/hooks/useVisualizationState';
 import { TimelineGuide } from '../TimelineGuide';
 import { FlameGraphArrow } from './FlameGraphArrow';
-import useMappingList from './FlameGraphArrow/useMappingList';
 import { boundsFromProfileSource } from './FlameGraphArrow/utils';
 const numberFormatter = new Intl.NumberFormat('en-US');
 const ErrorContent = ({ errorMessage }) => {
@@ -35,11 +36,12 @@ export const validateFlameChartQuery = (profileSource) => {
     const isDurationTooLong = duration > 60000000000n; // 60 seconds in nanoseconds
     return { isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong };
 };
-const ProfileFlameGraph = function ProfileFlameGraphNonMemo({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isFlameChart = false, profileSource, isInSandwichView = false, isRenderedAsFlamegraph = false, tooltipId, maxFrameCount, isExpanded = false, }) {
+const ProfileFlameGraph = function ProfileFlameGraphNonMemo({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isFlameChart = false, profileSource, isInSandwichView = false, isRenderedAsFlamegraph = false, tooltipId, maxFrameCount, isExpanded = false, metadataLoading = false, }) {
     const { onError, authenticationErrorMessage, isDarkMode, flamechartHelpText } = useParcaContext();
     const { compareMode } = useProfileViewContext();
     const [isLoading, setIsLoading] = useState(true);
     const [flameChartRef, { height: flameChartHeight }] = useMeasure();
+    const { colorBy, setColorBy } = useVisualizationState();
     // Create local state for paths when in sandwich view to avoid URL updates
     const [localCurPathArrow, setLocalCurPathArrow] = useState([]);
     const setCurPathArrowWrapper = useCallback((path) => {
@@ -52,8 +54,12 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({ arrow, total, filt
     }, [isInSandwichView, setNewCurPathArrow]);
     // Determine which paths to use based on isInSandwichView flag
     const effectiveCurPathArrow = isInSandwichView ? localCurPathArrow : curPathArrow;
-    const mappingsList = useMappingList(metadataMappingFiles);
-    const [colorBy, setColorBy] = useURLState('color_by');
+    const { mappingsList, filenamesList } = useProfileMetadata({
+        flamegraphArrow: arrow,
+        metadataMappingFiles,
+        metadataLoading,
+        colorBy,
+    });
     // 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.
     const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
@@ -119,7 +125,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({ arrow, total, filt
         if (total === 0n && !loading)
             return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
         if (arrow !== undefined) {
-            return (_jsxs("div", { className: "relative", children: [isFlameChart ? (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: width, height: flameChartHeight ?? 420, margin: 0, ticks: 12, timeUnit: "nanoseconds" })) : null, _jsx("div", { ref: flameChartRef, children: _jsx(FlameGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: effectiveCurPathArrow, setCurPath: setCurPathArrowWrapper, profileType: profileType, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, compareAbsolute: isCompareAbsolute, isFlameChart: isFlameChart, profileSource: profileSource, isRenderedAsFlamegraph: isRenderedAsFlamegraph, isInSandwichView: isInSandwichView, tooltipId: tooltipId, maxFrameCount: maxFrameCount, isExpanded: isExpanded }) })] }));
+            return (_jsxs("div", { className: "relative", children: [isFlameChart ? (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: width, height: flameChartHeight ?? 420, margin: 0, ticks: 12, timeUnit: "nanoseconds" })) : null, _jsx("div", { ref: flameChartRef, children: _jsx(FlameGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: effectiveCurPathArrow, setCurPath: setCurPathArrowWrapper, profileType: profileType, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, filenamesListFromMetadata: filenamesList, compareAbsolute: isCompareAbsolute, isFlameChart: isFlameChart, profileSource: profileSource, isRenderedAsFlamegraph: isRenderedAsFlamegraph, isInSandwichView: isInSandwichView, tooltipId: tooltipId, maxFrameCount: maxFrameCount, isExpanded: isExpanded, colorBy: colorBy }) })] }));
         }
     }, [
         isLoading,
@@ -131,7 +137,6 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({ arrow, total, filt
         profileType,
         isHalfScreen,
         isDarkMode,
-        mappingsList,
         isCompareAbsolute,
         isFlameChart,
         profileSource,
@@ -145,6 +150,9 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({ arrow, total, filt
         tooltipId,
         maxFrameCount,
         isExpanded,
+        mappingsList,
+        filenamesList,
+        colorBy,
     ]);
     useEffect(() => {
         if (isTrimmed) {

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.50",
+  "version": "0.19.52",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "0.17.3",
-    "@parca/components": "0.16.368",
-    "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.100",
-    "@parca/icons": "0.16.72",
-    "@parca/parser": "0.16.79",
-    "@parca/store": "0.16.184",
-    "@parca/test-utils": "0.0.10",
-    "@parca/utilities": "0.0.107",
+    "@parca/client": "0.17.5",
+    "@parca/components": "0.16.370",
+    "@parca/dynamicsize": "0.16.67",
+    "@parca/hooks": "0.0.102",
+    "@parca/icons": "0.16.74",
+    "@parca/parser": "0.16.81",
+    "@parca/store": "0.16.186",
+    "@parca/test-utils": "0.0.12",
+    "@parca/utilities": "0.0.109",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -79,5 +79,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "66b690cf7857609f3726e162a10add19d8288383"
+  "gitHead": "df1f4ce1710f808dfc6af0a631b140cd346dfaab"
 }

package/src/ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.tsx

@@ -130,8 +130,6 @@ export const FlameNode = React.memo(
     const colorAttribute =
       colorBy === 'filename' ? filename : colorBy === 'binary' ? mappingFile : null;
 
-    const colorsMap = colors;
-
     const hoveringName =
       hoveringRow !== undefined ? arrowToString(functionNameColumn?.get(hoveringRow)) : '';
     const shouldBeHighlighted =
@@ -142,7 +140,7 @@ export const FlameNode = React.memo(
       compareMode,
       cumulative,
       diff,
-      colorsMap,
+      colorsMap: colors,
       colorAttribute,
     });
 
@@ -296,7 +294,9 @@ export const FlameNode = React.memo(
       prevProps.hoveringRow === nextProps.hoveringRow &&
       prevProps.totalWidth === nextProps.totalWidth &&
       prevProps.height === nextProps.height &&
-      prevProps.effectiveDepth === nextProps.effectiveDepth
+      prevProps.effectiveDepth === nextProps.effectiveDepth &&
+      prevProps.colorBy === nextProps.colorBy &&
+      prevProps.colors === nextProps.colors
     );
   }
 );

package/src/ProfileFlameGraph/FlameGraphArrow/index.tsx

@@ -21,15 +21,15 @@ import React, {
   useState,
 } from 'react';
 
-import {Dictionary, Table, Vector, tableFromIPC} from 'apache-arrow';
+import {Table, tableFromIPC} from 'apache-arrow';
 import {useContextMenu} from 'react-contexify';
 
 import {FlamegraphArrow} from '@parca/client';
-import {useParcaContext, useURLState} from '@parca/components';
+import {useParcaContext} from '@parca/components';
 import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
 import {getColorForFeature, selectDarkMode, useAppSelector} from '@parca/store';
-import {getLastItem, type ColorConfig} from '@parca/utilities';
+import {type ColorConfig} from '@parca/utilities';
 
 import {ProfileSource} from '../../ProfileSource';
 import {useProfileFilters} from '../../ProfileView/components/ProfileFilters/useProfileFilters';
@@ -38,12 +38,10 @@ import ContextMenuWrapper, {ContextMenuWrapperRef} from './ContextMenuWrapper';
 import {FlameNode, RowHeight, colorByColors} from './FlameGraphNodes';
 import {MemoizedTooltip} from './MemoizedTooltip';
 import {TooltipProvider} from './TooltipContext';
-import {useFilenamesList} from './useMappingList';
 import {useScrollViewport} from './useScrollViewport';
 import {useVisibleNodes} from './useVisibleNodes';
 import {
   CurrentPathFrame,
-  arrowToString,
   extractFeature,
   extractFilenameFeature,
   getCurrentPathFrameData,
@@ -84,6 +82,8 @@ interface FlameGraphArrowProps {
   setCurPath: (path: CurrentPathFrame[]) => void;
   isHalfScreen: boolean;
   mappingsListFromMetadata: string[];
+  filenamesListFromMetadata: string[];
+  colorBy: string;
   compareAbsolute: boolean;
   isFlameChart?: boolean;
   isRenderedAsFlamegraph?: boolean;
@@ -139,6 +139,9 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
   tooltipId = 'default',
   maxFrameCount,
   isExpanded = false,
+  mappingsListFromMetadata,
+  filenamesListFromMetadata,
+  colorBy,
 }: FlameGraphArrowProps): React.JSX.Element {
   const [highlightSimilarStacksPreference] = useUserPreference<boolean>(
     USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key
@@ -169,49 +172,17 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
   const currentColorProfile = useCurrentColorProfile();
   const colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
 
-  const [colorBy, _] = useURLState('color_by');
-  const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : (colorBy as string);
-
-  const filenamesList = useFilenamesList(table);
-
-  const mappingsList = useMemo(() => {
-    // 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.
-    mappings.push('');
-
-    // We sort the mappings alphabetically to make sure that the order is always the same.
-    mappings.sort((a, b) => a.localeCompare(b));
-    return mappings;
-  }, [table]);
+  const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : colorBy;
 
   const filenameColors = useMemo(() => {
-    const colors = getFilenameColors(filenamesList, isDarkMode, currentColorProfile);
+    const colors = getFilenameColors(filenamesListFromMetadata, isDarkMode, currentColorProfile);
     return colors;
-  }, [isDarkMode, filenamesList, currentColorProfile]);
+  }, [isDarkMode, filenamesListFromMetadata, currentColorProfile]);
 
   const mappingColors = useMemo(() => {
-    const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
+    const colors = getMappingColors(mappingsListFromMetadata, isDarkMode, currentColorProfile);
     return colors;
-  }, [isDarkMode, mappingsList, currentColorProfile]);
+  }, [isDarkMode, mappingsListFromMetadata, currentColorProfile]);
 
   const colorByList = {
     filename: filenameColors,

package/src/ProfileFlameGraph/index.tsx

@@ -31,9 +31,10 @@ import {capitalizeOnlyFirstLetter, divide} from '@parca/utilities';
 import {MergedProfileSource, ProfileSource} from '../ProfileSource';
 import DiffLegend from '../ProfileView/components/DiffLegend';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
+import {useProfileMetadata} from '../ProfileView/hooks/useProfileMetadata';
+import {useVisualizationState} from '../ProfileView/hooks/useVisualizationState';
 import {TimelineGuide} from '../TimelineGuide';
 import {FlameGraphArrow} from './FlameGraphArrow';
-import useMappingList from './FlameGraphArrow/useMappingList';
 import {CurrentPathFrame, boundsFromProfileSource} from './FlameGraphArrow/utils';
 
 const numberFormatter = new Intl.NumberFormat('en-US');
@@ -100,11 +101,13 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
   tooltipId,
   maxFrameCount,
   isExpanded = false,
+  metadataLoading = false,
 }: ProfileFlameGraphProps): JSX.Element {
   const {onError, authenticationErrorMessage, isDarkMode, flamechartHelpText} = useParcaContext();
   const {compareMode} = useProfileViewContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [flameChartRef, {height: flameChartHeight}] = useMeasure();
+  const {colorBy, setColorBy} = useVisualizationState();
 
   // Create local state for paths when in sandwich view to avoid URL updates
   const [localCurPathArrow, setLocalCurPathArrow] = useState<CurrentPathFrame[]>([]);
@@ -123,9 +126,12 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
   // Determine which paths to use based on isInSandwichView flag
   const effectiveCurPathArrow = isInSandwichView ? localCurPathArrow : curPathArrow;
 
-  const mappingsList = useMappingList(metadataMappingFiles);
-
-  const [colorBy, setColorBy] = useURLState('color_by');
+  const {mappingsList, filenamesList} = useProfileMetadata({
+    flamegraphArrow: arrow,
+    metadataMappingFiles,
+    metadataLoading,
+    colorBy,
+  });
 
   // 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.
@@ -279,6 +285,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
               profileType={profileType}
               isHalfScreen={isHalfScreen}
               mappingsListFromMetadata={mappingsList}
+              filenamesListFromMetadata={filenamesList}
               compareAbsolute={isCompareAbsolute}
               isFlameChart={isFlameChart}
               profileSource={profileSource}
@@ -287,6 +294,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
               tooltipId={tooltipId}
               maxFrameCount={maxFrameCount}
               isExpanded={isExpanded}
+              colorBy={colorBy}
             />
           </div>
         </div>
@@ -302,7 +310,6 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
     profileType,
     isHalfScreen,
     isDarkMode,
-    mappingsList,
     isCompareAbsolute,
     isFlameChart,
     profileSource,
@@ -316,6 +323,9 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
     tooltipId,
     maxFrameCount,
     isExpanded,
+    mappingsList,
+    filenamesList,
+    colorBy,
   ]);
 
   useEffect(() => {