@parca/profile 0.19.51 → 0.19.53

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.53](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.52...@parca/profile@0.19.53) (2025-09-15)
+
+## 0.24.2 (2025-09-10)
+
+**Note:** Version bump only for package @parca/profile
+
+## 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)

package/dist/ProfileExplorer/index.js

@@ -19,7 +19,7 @@ import { createStore } from '@parca/store';
 import { capitalizeOnlyFirstLetter, safeDecode } from '@parca/utilities';
 import { ProfileSelectionFromParams, SuffixParams } from '..';
 import { useProfileTypes } from '../ProfileSelector';
-import { useResetStateOnNewSearch } from '../ProfileView/hooks/useResetStateOnNewSearch';
+import { useResetFlameGraphState } from '../ProfileView/hooks/useResetFlameGraphState';
 import { useResetStateOnProfileTypeChange } from '../ProfileView/hooks/useResetStateOnProfileTypeChange';
 import { sumByToParam, useSumByFromParams } from '../useSumBy';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
@@ -89,7 +89,7 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
     const [profileA, setProfileA] = useState(null);
     const [profileB, setProfileB] = useState(null);
     const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
-    const resetStateOnNewSearch = useResetStateOnNewSearch();
+    const resetFlameGraphState = useResetFlameGraphState();
     const sumByA = useSumByFromParams(sum_by_a);
     const sumByB = useSumByFromParams(sum_by_b);
     useEffect(() => {
@@ -156,7 +156,7 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
                 }
                 else {
                     // Reset the state when a new search is performed.
-                    resetStateOnNewSearch();
+                    resetFlameGraphState();
                 }
             }
             const mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined

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/dist/ProfileView/components/DashboardItems/index.d.ts

@@ -15,8 +15,6 @@ interface GetDashboardItemProps {
     profileSource: ProfileSource;
     total: bigint;
     filtered: bigint;
-    curPath: string[];
-    setNewCurPath: (path: string[]) => void;
     curPathArrow: CurrentPathFrame[];
     setNewCurPathArrow: (path: CurrentPathFrame[]) => void;
     perf?: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardItems/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAW,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAIrD,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;IACF,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,GAAI,qLAe9B,qBAAqB,KAAG,GAAG,CAAC,OA+F9B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardItems/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAW,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAIrD,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;IACF,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,GAAI,qLAe9B,qBAAqB,KAAG,GAAG,CAAC,OA+F9B,CAAC"}

package/dist/ProfileView/components/ProfileFilters/useProfileFilters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProfileFilters.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFilters.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,MAAM,EAA6C,MAAM,eAAe,CAAC;AAKtF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAClC,KAAK,CAAC,EAAE,eAAe,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAC5F,SAAS,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;CACf;AAqBD,eAAO,MAAM,uBAAuB,GAAI,cAAc,MAAM,EAAE,KAAG,aAAa,EA+E7E,CAAC;AAGF,eAAO,MAAM,qBAAqB,GAAI,gBAAgB,aAAa,EAAE,KAAG,MAAM,EAmF7E,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO;IACnC,YAAY,EAAE,aAAa,EAAE,CAAC;IAC9B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mBAAmB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,MAAM,IAAI,CAAC;CAsL1B,CAAC"}
+{"version":3,"file":"useProfileFilters.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFilters.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,MAAM,EAA6C,MAAM,eAAe,CAAC;AAMtF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAClC,KAAK,CAAC,EAAE,eAAe,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAC5F,SAAS,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;CACf;AAqBD,eAAO,MAAM,uBAAuB,GAAI,cAAc,MAAM,EAAE,KAAG,aAAa,EA+E7E,CAAC;AAGF,eAAO,MAAM,qBAAqB,GAAI,gBAAgB,aAAa,EAAE,KAAG,MAAM,EAmF7E,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO;IACnC,YAAY,EAAE,aAAa,EAAE,CAAC;IAC9B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mBAAmB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,MAAM,IAAI,CAAC;CA2L1B,CAAC"}

package/dist/ProfileView/components/ProfileFilters/useProfileFilters.js

@@ -11,6 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useResetFlameGraphState } from '../../hooks/useResetFlameGraphState';
 import { getPresetByKey, isPresetKey } from './filterPresets';
 import { useProfileFiltersUrlState } from './useProfileFiltersUrlState';
 const createStringCondition = (matchType, value) => ({
@@ -182,6 +183,7 @@ export const convertToProtoFilters = (profileFilters) => {
 };
 export const useProfileFilters = () => {
     const { appliedFilters, setAppliedFilters } = useProfileFiltersUrlState();
+    const resetFlameGraphState = useResetFlameGraphState();
     const [localFilters, setLocalFilters] = useState(appliedFilters ?? []);
     const lastAppliedFiltersRef = useRef([]);
     const localFiltersRef = useRef(localFilters);
@@ -259,9 +261,10 @@ export const useProfileFilters = () => {
         // Auto-apply the filter since it has a value
         const filtersToApply = [...(appliedFilters ?? []), newFilter];
         setAppliedFilters(filtersToApply);
+        resetFlameGraphState();
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setAppliedFilters]);
+    [setAppliedFilters, resetFlameGraphState]);
     const removeExcludeBinary = useCallback((binaryName) => {
         // Search for the exclude filter (not_contains) for this binary
         const filterToRemove = (appliedFilters ?? []).find(f => f.type === 'frame' &&
@@ -272,10 +275,11 @@ export const useProfileFilters = () => {
             // Remove the filter from applied filters
             const updatedAppliedFilters = (appliedFilters ?? []).filter(f => f.id !== filterToRemove.id);
             setAppliedFilters(updatedAppliedFilters);
+            resetFlameGraphState();
             // Also remove from local filters
             setLocalFilters(localFiltersRef.current.filter(f => f.id !== filterToRemove.id));
         }
-    }, [appliedFilters, setAppliedFilters]);
+    }, [appliedFilters, setAppliedFilters, resetFlameGraphState]);
     const removeFilter = useCallback((id) => {
         setLocalFilters(localFiltersRef.current.filter(f => f.id !== id));
     }, []);
@@ -285,7 +289,8 @@ export const useProfileFilters = () => {
     const resetFilters = useCallback(() => {
         setLocalFilters([]);
         setAppliedFilters([]);
-    }, [setAppliedFilters]);
+        resetFlameGraphState();
+    }, [setAppliedFilters, resetFlameGraphState]);
     const onApplyFilters = useCallback(() => {
         const validFilters = localFiltersRef.current.filter(f => {
             // For preset filters, only need type and value
@@ -300,7 +305,8 @@ export const useProfileFilters = () => {
             id: `filter-${Date.now()}-${index}`,
         }));
         setAppliedFilters(filtersToApply);
-    }, [setAppliedFilters]);
+        resetFlameGraphState();
+    }, [setAppliedFilters, resetFlameGraphState]);
     const protoFilters = useMemo(() => {
         return convertToProtoFilters(appliedFilters ?? []);
     }, [appliedFilters]);

package/dist/ProfileView/hooks/useResetFlameGraphState.d.ts

@@ -0,0 +1,2 @@
+export declare const useResetFlameGraphState: () => (() => void);
+//# sourceMappingURL=useResetFlameGraphState.d.ts.map

package/dist/ProfileView/hooks/useResetFlameGraphState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResetFlameGraphState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetFlameGraphState.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,uBAAuB,QAAO,CAAC,MAAM,IAAI,CAWrD,CAAC"}

package/dist/ProfileView/hooks/{useResetStateOnNewSearch.js → useResetFlameGraphState.js}

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useURLState } from '@parca/components';
-export const useResetStateOnNewSearch = () => {
+export const useResetFlameGraphState = () => {
     const [val, setCurPath] = useURLState('cur_path');
     return () => {
         setTimeout(() => {

package/dist/ProfileView/hooks/useVisualizationState.d.ts

@@ -1,7 +1,5 @@
 import { CurrentPathFrame } from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 export declare const useVisualizationState: () => {
-    curPath: string[];
-    setCurPath: (path: string[]) => void;
     curPathArrow: CurrentPathFrame[];
     setCurPathArrow: (path: CurrentPathFrame[]) => void;
     colorStackLegend: string | undefined;

package/dist/ProfileView/hooks/useVisualizationState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAC,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AAE/E,eAAO,MAAM,qBAAqB,QAAO;IACvC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CA0EvC,CAAC"}
+{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAC,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AAG/E,eAAO,MAAM,qBAAqB,QAAO;IACvC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CA0EvC,CAAC"}

package/dist/ProfileView/hooks/useVisualizationState.js

@@ -10,11 +10,11 @@
 // 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 { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { JSONParser, JSONSerializer, useURLState, useURLStateCustom } from '@parca/components';
 import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../ProfileFlameGraph/FlameGraphArrow';
+import { useResetFlameGraphState } from './useResetFlameGraphState';
 export const useVisualizationState = () => {
-    const [curPath, setCurPath] = useState([]);
     const [curPathArrow, setCurPathArrow] = useURLStateCustom('cur_path', {
         parse: (JSONParser),
         stringify: JSONSerializer,
@@ -27,6 +27,7 @@ export const useVisualizationState = () => {
         alwaysReturnArray: true,
     });
     const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
+    const resetFlameGraphState = useResetFlameGraphState();
     const levelsOfProfiling = useMemo(() => [
         FIELD_FUNCTION_NAME,
         FIELD_FUNCTION_FILE_NAME,
@@ -44,7 +45,8 @@ export const useVisualizationState = () => {
             const filteredGroupBy = groupBy.filter(item => !levelsOfProfiling.includes(item));
             setGroupBy([...filteredGroupBy, key]); // add
         }
-    }, [groupBy, setGroupBy, levelsOfProfiling]);
+        resetFlameGraphState();
+    }, [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState]);
     const setGroupByLabels = useCallback((labels) => {
         setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
     }, [groupBy, setGroupBy]);
@@ -52,8 +54,6 @@ export const useVisualizationState = () => {
         setSandwichFunctionName(undefined);
     }, [setSandwichFunctionName]);
     return {
-        curPath,
-        setCurPath,
         curPathArrow,
         setCurPathArrow,
         colorStackLegend,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAE/E,eAAO,MAAM,WAAW,GAAI,iMAczB,gBAAgB,KAAG,GAAG,CAAC,OA+HzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAE/E,eAAO,MAAM,WAAW,GAAI,iMAczB,gBAAgB,KAAG,GAAG,CAAC,OA2HzB,CAAC"}

package/dist/ProfileView/index.js

@@ -26,7 +26,7 @@ import { useVisualizationState } from './hooks/useVisualizationState';
 export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, topTableData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, sandwichData, }) => {
     const { timezone, perf, profileViewExternalMainActions, preferencesModal, profileViewExternalSubActions, } = useParcaContext();
     const { ref, dimensions } = useContainerDimensions();
-    const { curPath, setCurPath, curPathArrow, setCurPathArrow, colorStackLegend, colorBy, groupBy, toggleGroupBy, setGroupByLabels, sandwichFunctionName, resetSandwichFunctionName, } = useVisualizationState();
+    const { curPathArrow, setCurPathArrow, colorStackLegend, colorBy, groupBy, toggleGroupBy, setGroupByLabels, sandwichFunctionName, resetSandwichFunctionName, } = useVisualizationState();
     const { colorMappings } = useProfileMetadata({
         flamegraphArrow: flamegraphData.arrow,
         metadataMappingFiles: flamegraphData.metadataMappingFiles,
@@ -49,8 +49,6 @@ export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, t
             profileSource,
             total,
             filtered,
-            curPath,
-            setNewCurPath: setCurPath,
             curPathArrow,
             setNewCurPathArrow: setCurPathArrow,
             perf,

package/dist/ProfileViewWithData.js

@@ -39,7 +39,7 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
     const { protoFilters } = useProfileFilters();
     useEffect(() => {
         // If profile type is not delta, remove flamechart from the dashboard items
-        // and set it to flame if no other items are selected.
+        // and set it to flame graph if no other items are selected.
         if (profileSource == null) {
             return;
         }

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.51",
+  "version": "0.19.53",
   "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.4",
-    "@parca/components": "0.16.369",
-    "@parca/dynamicsize": "0.16.66",
-    "@parca/hooks": "0.0.101",
-    "@parca/icons": "0.16.73",
-    "@parca/parser": "0.16.80",
-    "@parca/store": "0.16.185",
-    "@parca/test-utils": "0.0.11",
-    "@parca/utilities": "0.0.108",
+    "@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": "604f94cd9e0fa0f52628a3e46132a5218a12fd3a"
+  "gitHead": "364f74584252524568010bb27636fdb87fe7aee7"
 }

package/src/ProfileExplorer/index.tsx

@@ -23,7 +23,7 @@ import {capitalizeOnlyFirstLetter, safeDecode, type NavigateFunction} from '@par
 
 import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
 import {QuerySelection, useProfileTypes} from '../ProfileSelector';
-import {useResetStateOnNewSearch} from '../ProfileView/hooks/useResetStateOnNewSearch';
+import {useResetFlameGraphState} from '../ProfileView/hooks/useResetFlameGraphState';
 import {useResetStateOnProfileTypeChange} from '../ProfileView/hooks/useResetStateOnProfileTypeChange';
 import {sumByToParam, useSumByFromParams} from '../useSumBy';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
@@ -162,7 +162,7 @@ const ProfileExplorerApp = ({
   const [profileB, setProfileB] = useState<ProfileSelection | null>(null);
 
   const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
-  const resetStateOnNewSearch = useResetStateOnNewSearch();
+  const resetFlameGraphState = useResetFlameGraphState();
 
   const sumByA = useSumByFromParams(sum_by_a);
   const sumByB = useSumByFromParams(sum_by_b);
@@ -250,7 +250,7 @@ const ProfileExplorerApp = ({
           resetStateOnProfileTypeChange();
         } else {
           // Reset the state when a new search is performed.
-          resetStateOnNewSearch();
+          resetFlameGraphState();
         }
       }
 

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(() => {

package/src/ProfileView/components/DashboardItems/index.tsx

@@ -42,8 +42,6 @@ interface GetDashboardItemProps {
   profileSource: ProfileSource;
   total: bigint;
   filtered: bigint;
-  curPath: string[];
-  setNewCurPath: (path: string[]) => void;
   curPathArrow: CurrentPathFrame[];
   setNewCurPathArrow: (path: CurrentPathFrame[]) => void;
   perf?: {

package/src/ProfileView/components/ProfileFilters/useProfileFilters.ts

@@ -15,6 +15,7 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 import {type Filter, type NumberCondition, type StringCondition} from '@parca/client';
 
+import {useResetFlameGraphState} from '../../hooks/useResetFlameGraphState';
 import {getPresetByKey, isPresetKey} from './filterPresets';
 import {useProfileFiltersUrlState} from './useProfileFiltersUrlState';
 
@@ -226,6 +227,7 @@ export const useProfileFilters = (): {
   resetFilters: () => void;
 } => {
   const {appliedFilters, setAppliedFilters} = useProfileFiltersUrlState();
+  const resetFlameGraphState = useResetFlameGraphState();
 
   const [localFilters, setLocalFilters] = useState<ProfileFilter[]>(appliedFilters ?? []);
 
@@ -327,9 +329,10 @@ export const useProfileFilters = (): {
       // Auto-apply the filter since it has a value
       const filtersToApply = [...(appliedFilters ?? []), newFilter];
       setAppliedFilters(filtersToApply);
+      resetFlameGraphState();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setAppliedFilters]
+    [setAppliedFilters, resetFlameGraphState]
   );
 
   const removeExcludeBinary = useCallback(
@@ -349,12 +352,13 @@ export const useProfileFilters = (): {
           f => f.id !== filterToRemove.id
         );
         setAppliedFilters(updatedAppliedFilters);
+        resetFlameGraphState();
 
         // Also remove from local filters
         setLocalFilters(localFiltersRef.current.filter(f => f.id !== filterToRemove.id));
       }
     },
-    [appliedFilters, setAppliedFilters]
+    [appliedFilters, setAppliedFilters, resetFlameGraphState]
   );
 
   const removeFilter = useCallback((id: string) => {
@@ -368,7 +372,8 @@ export const useProfileFilters = (): {
   const resetFilters = useCallback(() => {
     setLocalFilters([]);
     setAppliedFilters([]);
-  }, [setAppliedFilters]);
+    resetFlameGraphState();
+  }, [setAppliedFilters, resetFlameGraphState]);
 
   const onApplyFilters = useCallback((): void => {
     const validFilters = localFiltersRef.current.filter(f => {
@@ -386,7 +391,8 @@ export const useProfileFilters = (): {
     }));
 
     setAppliedFilters(filtersToApply);
-  }, [setAppliedFilters]);
+    resetFlameGraphState();
+  }, [setAppliedFilters, resetFlameGraphState]);
 
   const protoFilters = useMemo(() => {
     return convertToProtoFilters(appliedFilters ?? []);

package/src/ProfileView/hooks/{useResetStateOnNewSearch.ts → useResetFlameGraphState.ts}

@@ -13,7 +13,7 @@
 
 import {useURLState} from '@parca/components';
 
-export const useResetStateOnNewSearch = (): (() => void) => {
+export const useResetFlameGraphState = (): (() => void) => {
   const [val, setCurPath] = useURLState('cur_path');
 
   return () => {

package/src/ProfileView/hooks/useVisualizationState.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useMemo, useState} from 'react';
+import {useCallback, useMemo} from 'react';
 
 import {JSONParser, JSONSerializer, useURLState, useURLStateCustom} from '@parca/components';
 
@@ -23,10 +23,9 @@ import {
   FIELD_MAPPING_FILE,
 } from '../../ProfileFlameGraph/FlameGraphArrow';
 import {CurrentPathFrame} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
+import {useResetFlameGraphState} from './useResetFlameGraphState';
 
 export const useVisualizationState = (): {
-  curPath: string[];
-  setCurPath: (path: string[]) => void;
   curPathArrow: CurrentPathFrame[];
   setCurPathArrow: (path: CurrentPathFrame[]) => void;
   colorStackLegend: string | undefined;
@@ -40,7 +39,6 @@ export const useVisualizationState = (): {
   setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
   resetSandwichFunctionName: () => void;
 } => {
-  const [curPath, setCurPath] = useState<string[]>([]);
   const [curPathArrow, setCurPathArrow] = useURLStateCustom<CurrentPathFrame[]>('cur_path', {
     parse: JSONParser<CurrentPathFrame[]>,
     stringify: JSONSerializer,
@@ -55,6 +53,7 @@ export const useVisualizationState = (): {
   const [sandwichFunctionName, setSandwichFunctionName] = useURLState<string | undefined>(
     'sandwich_function_name'
   );
+  const resetFlameGraphState = useResetFlameGraphState();
 
   const levelsOfProfiling = useMemo(
     () => [
@@ -81,8 +80,10 @@ export const useVisualizationState = (): {
         const filteredGroupBy = groupBy.filter(item => !levelsOfProfiling.includes(item));
         setGroupBy([...filteredGroupBy, key]); // add
       }
+
+      resetFlameGraphState();
     },
-    [groupBy, setGroupBy, levelsOfProfiling]
+    [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState]
   );
 
   const setGroupByLabels = useCallback(
@@ -97,8 +98,6 @@ export const useVisualizationState = (): {
   }, [setSandwichFunctionName]);
 
   return {
-    curPath,
-    setCurPath,
     curPathArrow,
     setCurPathArrow,
     colorStackLegend,

package/src/ProfileView/index.tsx

@@ -56,8 +56,6 @@ export const ProfileView = ({
   const {ref, dimensions} = useContainerDimensions();
 
   const {
-    curPath,
-    setCurPath,
     curPathArrow,
     setCurPathArrow,
     colorStackLegend,
@@ -100,8 +98,6 @@ export const ProfileView = ({
       profileSource,
       total,
       filtered,
-      curPath,
-      setNewCurPath: setCurPath,
       curPathArrow,
       setNewCurPathArrow: setCurPathArrow,
       perf,

package/src/ProfileViewWithData.tsx

@@ -58,7 +58,7 @@ export const ProfileViewWithData = ({
 
   useEffect(() => {
     // If profile type is not delta, remove flamechart from the dashboard items
-    // and set it to flame if no other items are selected.
+    // and set it to flame graph if no other items are selected.
     if (profileSource == null) {
       return;
     }

package/dist/ProfileView/hooks/useResetStateOnNewSearch.d.ts

@@ -1,2 +0,0 @@
-export declare const useResetStateOnNewSearch: () => (() => void);
-//# sourceMappingURL=useResetStateOnNewSearch.d.ts.map

package/dist/ProfileView/hooks/useResetStateOnNewSearch.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResetStateOnNewSearch.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetStateOnNewSearch.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,wBAAwB,QAAO,CAAC,MAAM,IAAI,CAWtD,CAAC"}