@parca/profile 0.16.438 → 0.16.440

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.440](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.439...@parca/profile@0.16.440) (2024-10-29)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.439 (2024-10-29)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.438](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.437...@parca/profile@0.16.438) (2024-10-23)
 
 **Note:** Version bump only for package @parca/profile

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

@@ -1,7 +1,7 @@
 import { FlamegraphNode } from '@parca/client';
 import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
-import { type Feature } from '@parca/store';
+import { type BinaryFeature } from '@parca/store';
 export declare const getBinaryName: (node: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[]) => string | undefined;
 export declare function nodeLabel(node: FlamegraphNode, strings: string[], mappings: Mapping[], locations: Location[], functions: ParcaFunction[], showBinaryName: boolean): string;
-export declare const extractFeature: (data: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[]) => Feature;
+export declare const extractFeature: (data: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[]) => BinaryFeature;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,IAAI,aAAa,EAC1B,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAiC,KAAK,OAAO,EAAC,MAAM,cAAc,CAAC;AAK1E,eAAO,MAAM,aAAa,SAClB,cAAc,YACV,OAAO,EAAE,aACR,QAAQ,EAAE,WACZ,MAAM,EAAE,KAChB,MAAM,GAAG,SAoBX,CAAC;AAEF,wBAAgB,SAAS,CACvB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,MAAM,EAAE,EACjB,QAAQ,EAAE,OAAO,EAAE,EACnB,SAAS,EAAE,QAAQ,EAAE,EACrB,SAAS,EAAE,aAAa,EAAE,EAC1B,cAAc,EAAE,OAAO,GACtB,MAAM,CA6BR;AAED,eAAO,MAAM,cAAc,SACnB,cAAc,YACV,OAAO,EAAE,aACR,QAAQ,EAAE,WACZ,MAAM,EAAE,KAChB,OAOF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,IAAI,aAAa,EAC1B,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAwC,KAAK,aAAa,EAAC,MAAM,cAAc,CAAC;AAKvF,eAAO,MAAM,aAAa,SAClB,cAAc,YACV,OAAO,EAAE,aACR,QAAQ,EAAE,WACZ,MAAM,EAAE,KAChB,MAAM,GAAG,SAoBX,CAAC;AAEF,wBAAgB,SAAS,CACvB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,MAAM,EAAE,EACjB,QAAQ,EAAE,OAAO,EAAE,EACnB,SAAS,EAAE,QAAQ,EAAE,EACrB,SAAS,EAAE,aAAa,EAAE,EAC1B,cAAc,EAAE,OAAO,GACtB,MAAM,CA6BR;AAED,eAAO,MAAM,cAAc,SACnB,cAAc,YACV,OAAO,EAAE,aACR,QAAQ,EAAE,WACZ,MAAM,EAAE,KAChB,aAOF,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraph/utils.js

@@ -10,7 +10,7 @@
 // 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 { EVERYTHING_ELSE, FEATURE_TYPES } from '@parca/store';
+import { BINARY_FEATURE_TYPES, EVERYTHING_ELSE } from '@parca/store';
 import { getLastItem } from '@parca/utilities';
 import { hexifyAddress } from '../../utils';
 export const getBinaryName = (node, mappings, locations, strings) => {
@@ -60,7 +60,7 @@ export function nodeLabel(node, strings, mappings, locations, functions, showBin
 export const extractFeature = (data, mappings, locations, strings) => {
     const binaryName = getBinaryName(data, mappings, locations, strings);
     if (binaryName != null) {
-        return { name: binaryName, type: FEATURE_TYPES.Binary };
+        return { name: binaryName, type: BINARY_FEATURE_TYPES.Binary };
     }
-    return { name: EVERYTHING_ELSE, type: FEATURE_TYPES.Misc };
+    return { name: EVERYTHING_ELSE, type: BINARY_FEATURE_TYPES.Misc };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAYrC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,uCAA8C,KAAK,KAAG,KAAK,CAAC,GAAG,CAAC,OA8FrF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAYrC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,uCAA8C,KAAK,KAAG,KAAK,CAAC,GAAG,CAAC,OAmGrF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.js

@@ -23,7 +23,9 @@ const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
     const isDarkMode = useAppSelector(selectDarkMode);
     const currentColorProfile = useCurrentColorProfile();
     const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
-    const [currentSearchString, setSearchString] = useURLState('binary_frame_filter', {
+    const [colorByValue, _] = useURLState('color_by');
+    const colorBy = colorByValue === 'binary' || colorByValue === undefined ? 'binary' : 'filename';
+    const [currentSearchString, setSearchString] = useURLState(`binary_frame_filter`, {
         alwaysReturnArray: true,
         defaultValue: [],
     });
@@ -59,7 +61,7 @@ const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
                     'cursor-pointer': filteringAllowed,
                     'bg-gray-200 dark:bg-gray-800': isHighlighted,
                 }), onClick: () => {
-                    if (!filteringAllowed || isHighlighted) {
+                    if (!filteringAllowed || isHighlighted || colorBy !== 'binary') {
                         return;
                     }
                     // Check if the current search string is defined and an array

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

@@ -6,7 +6,8 @@ export declare const RowHeight = 26;
 interface IcicleGraphNodesProps {
     table: Table<any>;
     row: number;
-    mappingColors: mappingColors;
+    colors: colorByColors;
+    colorBy: string;
     childRows: number[];
     x: number;
     y: number;
@@ -32,7 +33,7 @@ interface IcicleGraphNodesProps {
     highlightSimilarStacksPreference: boolean;
 }
 export declare const IcicleGraphNodes: React.NamedExoticComponent<IcicleGraphNodesProps>;
-export interface mappingColors {
+export interface colorByColors {
     [key: string]: string;
 }
 interface IcicleNodeProps {
@@ -44,7 +45,8 @@ interface IcicleNodeProps {
     level: number;
     table: Table<any>;
     row: number;
-    mappingColors: mappingColors;
+    colors: colorByColors;
+    colorBy: string;
     path: string[];
     total: bigint;
     setCurPath: (path: string[]) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAMnC,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAY1C,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B,UAAU,qBAAqB;IAC7B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,aAAa,CAAC;IAC7B,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,gCAAgC,EAAE,OAAO,CAAC;CAC3C;AAED,eAAO,MAAM,gBAAgB,mDA+E3B,CAAC;AAEH,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,UAAU,eAAe;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,aAAa,CAAC;IAC7B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,gCAAgC,EAAE,OAAO,CAAC;CAC3C;AAYD,eAAO,MAAM,UAAU,6CAgPrB,CAAC"}
+{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"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"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

@@ -16,11 +16,11 @@ import cx from 'classnames';
 import { selectBinaries, useAppSelector } from '@parca/store';
 import { isSearchMatch, scaleLinear } from '@parca/utilities';
 import 'react-contexify/dist/ReactContexify.css';
-import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, FIELD_MAPPING_FILE, } from './index';
+import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_MAPPING_FILE, } from './index';
 import useNodeColor from './useNodeColor';
 import { arrowToString, nodeLabel } from './utils';
 export const RowHeight = 26;
-export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ table, childRows, mappingColors, x, y, xScale, total, totalWidth, level, path, setCurPath, setHoveringRow, setHoveringLevel, curPath, sortBy, searchString, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
+export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ table, childRows, colors, colorBy, x, y, xScale, total, totalWidth, level, path, setCurPath, setHoveringRow, setHoveringLevel, curPath, sortBy, searchString, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
     const cumulatives = table.getChild(FIELD_CUMULATIVE);
     if (childRows === undefined || childRows.length === 0) {
         return _jsx(_Fragment, {});
@@ -35,7 +35,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ tab
         const xStart = Math.floor(xScale(BigInt(childrenCumulative)));
         const c = BigInt(cumulatives?.get(child));
         childrenCumulative += c;
-        childrenElements.push(_jsx(IcicleNode, { table: table, row: child, mappingColors: mappingColors, x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, level: level, curPath: curPath, total: total, xScale: xScale, sortBy: sortBy, searchString: searchString, darkMode: darkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }, `node-${level}-${i}`));
+        childrenElements.push(_jsx(IcicleNode, { table: table, row: child, colors: colors, colorBy: colorBy, x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, level: level, curPath: curPath, total: total, xScale: xScale, sortBy: sortBy, searchString: searchString, darkMode: darkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }, `node-${level}-${i}`));
     });
     return _jsx("g", { transform: `translate(${x}, ${y})`, children: childrenElements });
 });
@@ -48,18 +48,31 @@ const fadedIcicleRectStyles = {
     transition: 'opacity .15s linear',
     opacity: '0.5',
 };
-export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, mappingColors, x, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, isRoot = false, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
+export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, colors, colorBy, x, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, isRoot = false, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
     // get the columns to read from
     const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
     const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
     const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
     const diffColumn = table.getChild(FIELD_DIFF);
+    const filenameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
     // get the actual values from the columns
     const mappingFile = arrowToString(mappingColumn?.get(row));
     const functionName = arrowToString(functionNameColumn?.get(row));
     const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
     const diff = diffColumn?.get(row) !== null ? BigInt(diffColumn?.get(row)) : null;
     const childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []);
+    const filename = arrowToString(filenameColumn?.get(row));
+    const colorAttribute = useMemo(() => {
+        let attr;
+        if (colorBy === 'filename') {
+            attr = filename;
+        }
+        else if (colorBy === 'binary') {
+            attr = mappingFile;
+        }
+        return attr ?? null; // Provide a default value of null if attr is undefined
+    }, [colorBy, filename, mappingFile]);
+    const colorsMap = colors;
     const highlightedNodes = useMemo(() => {
         if (!highlightSimilarStacksPreference) {
             return null;
@@ -105,7 +118,6 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
                 const aDiff = diffColumn?.get(a) !== null ? BigInt(diffColumn?.get(a)) : null;
                 if (aDiff !== null) {
                     const cumulative = cumulativeColumn?.get(a) !== null ? BigInt(cumulativeColumn?.get(a)) : 0n;
-                    console.log(typeof cumulative, typeof aDiff);
                     const prev = cumulative - aDiff;
                     aRatio = Number(aDiff) / Number(prev);
                 }
@@ -136,8 +148,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
         compareMode,
         cumulative,
         diff,
-        mappingColors,
-        mappingFile,
+        colorsMap,
+        colorAttribute,
     });
     const name = useMemo(() => {
         return isRoot ? 'root' : nodeLabel(table, row, level, binaries.length > 1);
@@ -184,5 +196,5 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
                             ? `${colorForSimilarNodes} stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6`
                             : 'stroke-white dark:stroke-gray-700', {
                             'opacity-50': isHighlightEnabled && !isHighlighted,
-                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: name }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, mappingColors: mappingColors, childRows: childRows, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, searchString: searchString, sortBy: sortBy, darkMode: darkMode, profileType: profileType, compareMode: compareMode, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }))] }));
+                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: name }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, colors: colors, colorBy: colorBy, childRows: childRows, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, searchString: searchString, sortBy: sortBy, darkMode: darkMode, profileType: profileType, compareMode: compareMode, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }))] }));
 });

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { FlamegraphArrow } from '@parca/client';
 import { ProfileType } from '@parca/parser';
 import { type ColorConfig } from '@parca/utilities';
-import { mappingColors } from './IcicleGraphNodes';
+import { colorByColors } 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";
@@ -32,7 +32,8 @@ interface IcicleGraphArrowProps {
     mappingsListFromMetadata: string[];
     compareAbsolute: boolean;
 }
-export declare const getMappingColors: (mappingsList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => mappingColors;
+export declare const getMappingColors: (mappingsList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => colorByColors;
+export declare const getFilenameColors: (filenamesList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => colorByColors;
 export declare const IcicleGraphArrow: React.NamedExoticComponent<IcicleGraphArrowProps>;
 export default IcicleGraphArrow;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,OAAO,EAA2B,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAO5E,OAAO,EAAwB,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAGxE,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,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAC9D,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,UAAU,SAAS,CAAC;AAEjC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,iBACb,MAAM,EAAE,cACV,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,gBAAgB,mDA4P3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,OAAO,EAA2B,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAO5E,OAAO,EAAwB,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAIxE,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,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAC9D,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,UAAU,SAAS,CAAC;AAEjC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,iBACb,MAAM,EAAE,cACV,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,kBACb,MAAM,EAAE,cACX,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,gBAAgB,mDAiR3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -24,7 +24,8 @@ import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
 import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
 import ContextMenu from './ContextMenu';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
-import { arrowToString, extractFeature } from './utils';
+import { useFilenamesList } from './useMappingList';
+import { arrowToString, extractFeature, extractFilenameFeature } 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';
@@ -48,6 +49,14 @@ export const getMappingColors = (mappingsList, isDarkMode, currentColorProfile)
     });
     return colors;
 };
+export const getFilenameColors = (filenamesList, isDarkMode, currentColorProfile) => {
+    const filenameFeatures = filenamesList.map(filename => extractFilenameFeature(filename));
+    const colors = {};
+    Object.entries(filenameFeatures).forEach(([_, feature]) => {
+        colors[feature.name] = getColorForFeature(feature.name, isDarkMode, currentColorProfile.colors);
+    });
+    return colors;
+};
 const noop = () => { };
 export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, sortBy, flamegraphLoading, mappingsListFromMetadata, compareAbsolute, }) {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
@@ -69,6 +78,9 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     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,
@@ -94,10 +106,19 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
         mappings.sort((a, b) => a.localeCompare(b));
         return mappings;
     }, [table]);
+    const filenameColors = useMemo(() => {
+        const colors = getFilenameColors(filenamesList, isDarkMode, currentColorProfile);
+        return colors;
+    }, [isDarkMode, filenamesList, currentColorProfile]);
     const mappingColors = useMemo(() => {
         const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
         return colors;
     }, [isDarkMode, mappingsList, currentColorProfile]);
+    const colorByList = {
+        filename: filenameColors,
+        binary: mappingColors,
+    };
+    const colorByColors = colorByList[colorByValue];
     useEffect(() => {
         if (ref.current != null) {
             setHeight(ref?.current.getBoundingClientRect().height);
@@ -146,13 +167,14 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     }, []);
     // 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: path, level: 0, isRoot: true, searchString: currentSearchString ?? '', setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: highlightSimilarStacksName, setHoveringName: highlightSimilarStacksSetName, hoveringRow: highlightSimilarStacksRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
+        return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { table: table, row: 0, colors: colorByColors, colorBy: colorByValue, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: path, level: 0, isRoot: true, searchString: currentSearchString ?? '', setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: highlightSimilarStacksName, setHoveringName: highlightSimilarStacksSetName, hoveringRow: highlightSimilarStacksRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
     }, [
         width,
         height,
         displayMenu,
         table,
-        mappingColors,
+        colorByColors,
+        colorByValue,
         setCurPath,
         curPath,
         total,

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

@@ -1,3 +1,5 @@
+import { Table } from 'apache-arrow';
 declare const useMappingList: (mappings: string[] | undefined) => string[];
+export declare const useFilenamesList: (table: Table | null) => string[];
 export default useMappingList;
 //# sourceMappingURL=useMappingList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useMappingList.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/useMappingList.ts"],"names":[],"mappings":"AAiBA,QAAA,MAAM,cAAc,aAAc,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAsB9D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"useMappingList.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/useMappingList.ts"],"names":[],"mappings":"AAeA,OAAO,EAAa,KAAK,EAAS,MAAM,cAAc,CAAC;AAOvD,QAAA,MAAM,cAAc,aAAc,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAsB9D,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,KAAK,GAAG,IAAI,KAAG,MAAM,EAyB5D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/useMappingList.js

@@ -12,6 +12,8 @@
 // limitations under the License.
 import { useMemo } from 'react';
 import { getLastItem } from '@parca/utilities';
+import { FIELD_FUNCTION_FILE_NAME } from './index';
+import { arrowToString } from './utils';
 const useMappingList = (mappings) => {
     const mappingsList = useMemo(() => {
         if (mappings === undefined) {
@@ -30,4 +32,27 @@ const useMappingList = (mappings) => {
     }, [mappings]);
     return mappingsList;
 };
+export const useFilenamesList = (table) => {
+    if (table === null) {
+        return [];
+    }
+    const filenamesDict = table.getChild(FIELD_FUNCTION_FILE_NAME);
+    const filenames = filenamesDict?.data
+        .map(file => {
+        if (file.dictionary == null) {
+            return [];
+        }
+        const len = file.dictionary.length;
+        const entries = [];
+        for (let i = 0; i < len; i++) {
+            const fn = arrowToString(file.dictionary.get(i));
+            entries.push(getLastItem(fn) ?? '');
+        }
+        return entries;
+    })
+        .flat() ?? [];
+    filenames.push('');
+    filenames.sort((a, b) => a.localeCompare(b));
+    return filenames;
+};
 export default useMappingList;

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

@@ -1,4 +1,4 @@
-interface mappingColors {
+interface colors {
     [key: string]: string;
 }
 interface Props {
@@ -6,9 +6,9 @@ interface Props {
     compareMode: boolean;
     cumulative: bigint;
     diff: bigint | null;
-    mappingColors: mappingColors;
-    mappingFile: string | null;
+    colorsMap: colors;
+    colorAttribute: string | null;
 }
-declare const useNodeColor: ({ isDarkMode, compareMode, cumulative, diff, mappingColors, mappingFile, }: Props) => string;
+declare const useNodeColor: ({ isDarkMode, compareMode, cumulative, diff, colorsMap, colorAttribute, }: Props) => string;
 export default useNodeColor;
 //# sourceMappingURL=useNodeColor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useNodeColor.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.ts"],"names":[],"mappings":"AAgBA,UAAU,aAAa;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,YAAY,+EAOf,KAAK,KAAG,MAMV,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useNodeColor.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.ts"],"names":[],"mappings":"AAgBA,UAAU,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,8EAOf,KAAK,KAAG,MAMV,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.js

@@ -12,10 +12,10 @@
 // limitations under the License.
 import { EVERYTHING_ELSE } from '@parca/store';
 import { diffColor, getLastItem } from '@parca/utilities';
-const useNodeColor = ({ isDarkMode, compareMode, cumulative, diff, mappingColors, mappingFile, }) => {
+const useNodeColor = ({ isDarkMode, compareMode, cumulative, diff, colorsMap, colorAttribute, }) => {
     if (compareMode) {
         return diffColor(diff ?? 0n, cumulative, isDarkMode);
     }
-    return mappingColors[getLastItem(mappingFile ?? '') ?? EVERYTHING_ELSE];
+    return colorsMap[getLastItem(colorAttribute ?? '') ?? EVERYTHING_ELSE];
 };
 export default useNodeColor;

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

@@ -1,7 +1,8 @@
 import { Table } from 'apache-arrow';
-import { type Feature } from '@parca/store';
+import { type BinaryFeature, type FilenameFeature } from '@parca/store';
 export declare function nodeLabel(table: Table<any>, row: number, level: number, showBinaryName: boolean): string;
-export declare const extractFeature: (mapping: string) => Feature;
+export declare const extractFeature: (mapping: string) => BinaryFeature;
+export declare const extractFilenameFeature: (filename: string) => FilenameFeature;
 export declare const getTextForCumulative: (hoveringNodeCumulative: bigint, totalUnfiltered: bigint, total: bigint, unit: string) => string;
 export declare const getTextForCumulativePerSecond: (hoveringNodeCumulative: number, unit: string) => string;
 export declare const arrowToString: (buffer: any) => string | null;

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAiC,KAAK,OAAO,EAAC,MAAM,cAAc,CAAC;AAW1E,wBAAgB,SAAS,CACvB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EACjB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,OAAO,GACtB,MAAM,CAkCR;AAED,eAAO,MAAM,cAAc,YAAa,MAAM,KAAG,OAMhD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BACP,MAAM,mBACb,MAAM,SAChB,MAAM,QACP,MAAM,KACX,MAOF,CAAC;AAEF,eAAO,MAAM,6BAA6B,2BAChB,MAAM,QACxB,MAAM,KACX,MAMF,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,GAAG,KAAG,MAAM,GAAG,IAQpD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAWtB,wBAAgB,SAAS,CACvB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EACjB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,OAAO,GACtB,MAAM,CAkCR;AAED,eAAO,MAAM,cAAc,YAAa,MAAM,KAAG,aAMhD,CAAC;AAEF,eAAO,MAAM,sBAAsB,aAAc,MAAM,KAAG,eAMzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BACP,MAAM,mBACb,MAAM,SAChB,MAAM,QACP,MAAM,KACX,MAOF,CAAC;AAEF,eAAO,MAAM,6BAA6B,2BAChB,MAAM,QACxB,MAAM,KACX,MAMF,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,GAAG,KAAG,MAAM,GAAG,IAQpD,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.js

@@ -10,7 +10,7 @@
 // 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 { EVERYTHING_ELSE, FEATURE_TYPES } from '@parca/store';
+import { BINARY_FEATURE_TYPES, EVERYTHING_ELSE, FILENAMES_FEATURE_TYPES, } from '@parca/store';
 import { divide, getLastItem, valueFormatter } from '@parca/utilities';
 import { hexifyAddress } from '../../utils';
 import { FIELD_FUNCTION_NAME, FIELD_LABELS_ONLY, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from './index';
@@ -46,9 +46,15 @@ export function nodeLabel(table, row, level, showBinaryName) {
 }
 export const extractFeature = (mapping) => {
     if (mapping != null && mapping !== '') {
-        return { name: mapping, type: FEATURE_TYPES.Binary };
+        return { name: mapping, type: BINARY_FEATURE_TYPES.Binary };
     }
-    return { name: EVERYTHING_ELSE, type: FEATURE_TYPES.Misc };
+    return { name: EVERYTHING_ELSE, type: BINARY_FEATURE_TYPES.Misc };
+};
+export const extractFilenameFeature = (filename) => {
+    if (filename != null && filename !== '') {
+        return { name: filename, type: FILENAMES_FEATURE_TYPES.Filename };
+    }
+    return { name: EVERYTHING_ELSE, type: FILENAMES_FEATURE_TYPES.Misc };
 };
 export const getTextForCumulative = (hoveringNodeCumulative, totalUnfiltered, total, unit) => {
     const filtered = totalUnfiltered > total

package/dist/ProfileIcicleGraph/index.d.ts

@@ -15,9 +15,9 @@ interface ProfileIcicleGraphProps {
     setActionButtons?: (buttons: React.JSX.Element) => void;
     error?: any;
     isHalfScreen: boolean;
-    mappings?: string[];
-    mappingsLoading?: boolean;
+    metadataMappingFiles?: string[];
+    metadataLoading?: boolean;
 }
-declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, mappings, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAY1C,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,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,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAMD,QAAA,MAAM,kBAAkB,2HAarB,uBAAuB,KAAG,GAAG,CAAC,OAqKhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAK1D,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAY1C,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,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;CAC3B;AAMD,QAAA,MAAM,kBAAkB,uIAarB,uBAAuB,KAAG,GAAG,CAAC,OA6LhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileIcicleGraph/index.js

@@ -12,6 +12,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useEffect, useMemo, useState } from 'react';
+import { tableFromIPC } from 'apache-arrow';
 import { AnimatePresence, motion } from 'framer-motion';
 import { IcicleGraphSkeleton, useParcaContext, useURLState } from '@parca/components';
 import { capitalizeOnlyFirstLetter, divide, selectQueryParam } from '@parca/utilities';
@@ -20,23 +21,30 @@ import DiffLegend from '../components/DiffLegend';
 import { IcicleGraph } from './IcicleGraph';
 import { FIELD_FUNCTION_NAME, IcicleGraphArrow } from './IcicleGraphArrow';
 import ColorStackLegend from './IcicleGraphArrow/ColorStackLegend';
-import useMappingList from './IcicleGraphArrow/useMappingList';
+import useMappingList, { useFilenamesList } from './IcicleGraphArrow/useMappingList';
 const numberFormatter = new Intl.NumberFormat('en-US');
 const ErrorContent = ({ errorMessage }) => {
     return _jsx("div", { className: "flex justify-center p-10", children: errorMessage });
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, mappings, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, }) {
     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 table = useMemo(() => {
+        return arrow !== undefined ? tableFromIPC(arrow.record) : null;
+    }, [arrow]);
+    const mappingsList = useMappingList(metadataMappingFiles);
+    const filenamesList = useFilenamesList(table);
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState('sort_by');
+    const [colorBy, setColorBy] = useURLState('color_by');
     // By default, we want delta profiles (CPU) to be relatively compared.
     // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
     const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
     const [compareAbsolute = compareAbsoluteDefault] = useURLState('compare_absolute');
     const isCompareAbsolute = compareAbsolute === 'true';
+    const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : colorBy;
+    const mappingsListCount = useMemo(() => mappingsList.filter(m => m !== '').length, [mappingsList]);
     const [totalFormatted, totalUnfilteredFormatted, isTrimmed, trimmedFormatted, trimmedPercentage, isFiltered, filteredPercentage,] = useMemo(() => {
         if (graph === undefined && arrow === undefined) {
             return ['0', '0', false, '0', '0', false, '0', '0'];
@@ -55,7 +63,14 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
             numberFormatter.format(divide(total * 100n, totalUnfilteredDivisor)),
         ];
     }, [graph, arrow, filtered, total]);
-    const loadingState = !loading && (arrow !== undefined || graph !== undefined) && mappings !== undefined;
+    const loadingState = !loading && (arrow !== undefined || graph !== undefined) && metadataMappingFiles !== undefined;
+    // If there is only one mapping file, we want to color by filename by default.
+    useEffect(() => {
+        if (mappingsListCount === 1 && colorBy !== 'filename') {
+            setColorBy('filename');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mappingsListCount]);
     useEffect(() => {
         if (loadingState) {
             setIsLoading(false);
@@ -103,6 +118,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, isColorStackLegendEnabled && (_jsx(ColorStackLegend, { 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") }));
+    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, { compareMode: compareMode, mappings: colorByValue === 'binary' ? mappingsList : filenamesList, 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.d.ts

@@ -7,9 +7,9 @@ export interface FlamegraphData {
     total?: bigint;
     filtered?: bigint;
     error?: any;
-    mappings?: string[];
-    mappingsLoading: boolean;
-    groupByLabels: string[];
+    metadataMappingFiles?: string[];
+    metadataLoading: boolean;
+    metadataLabels?: string[];
 }
 export interface TopTableData {
     loading: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACV,GAAG,EACJ,MAAM,eAAe,CAAC;AAUvB,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAO/C,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,UAAU,UAAU;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAWD,eAAO,MAAM,WAAW,0JAYrB,gBAAgB,KAAG,GAAG,CAAC,OA6UzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACV,GAAG,EACJ,MAAM,eAAe,CAAC;AAUvB,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAO/C,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,UAAU,UAAU;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAWD,eAAO,MAAM,WAAW,0JAYrB,gBAAgB,KAAG,GAAG,CAAC,OA6UzB,CAAC"}

package/dist/ProfileView/index.js

@@ -102,7 +102,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                             ? isHalfScreen
                                 ? (dimensions.width - 40) / 2
                                 : dimensions.width - 16
-                            : 0, mappings: flamegraphData.mappings, mappingsLoading: flamegraphData.mappingsLoading }) }));
+                            : 0, metadataMappingFiles: flamegraphData.metadataMappingFiles, metadataLoading: flamegraphData.metadataLoading }) }));
             }
             case 'callgraph': {
                 return callgraphData?.data !== undefined &&
@@ -162,7 +162,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                         'items-center mb-2': hasProfileSource,
                     }), children: _jsxs("div", { children: [hasProfileSource && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "text-xs font-medium", children: headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : '' }), _jsx("div", { className: "text-xs font-medium", children: headerParts.length > 1
                                             ? headerParts[headerParts.length - 1].replace(/"/g, '')
-                                            : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }) }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, isMultiPanelView: isMultiPanelView, dashboardItems: dashboardItems, curPath: curPath, setNewCurPath: setNewCurPath, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.groupByLabels ?? [] }), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
+                                            : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }) }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, isMultiPanelView: isMultiPanelView, dashboardItems: dashboardItems, curPath: curPath, setNewCurPath: setNewCurPath, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [] }), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
                                     return (_jsx(Draggable, { draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView, children: (provided, snapshot) => (_createElement("div", { ref: provided.innerRef, ...provided.draggableProps, key: dashboardItem, className: cx('w-full min-h-96', snapshot.isDragging
                                                 ? 'bg-gray-200 dark:bg-gray-500'
                                                 : 'bg-white dark:bg-gray-900') },

package/dist/ProfileViewWithData.js

@@ -142,13 +142,13 @@ export const ProfileViewWithData = ({ queryClient, profileSource, }) => {
             total: BigInt(flamegraphResponse?.total ?? '0'),
             filtered: BigInt(flamegraphResponse?.filtered ?? '0'),
             error: flamegraphError,
-            mappings: profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+            metadataMappingFiles: profileMetadataResponse?.report.oneofKind === 'profileMetadata'
                 ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
                 : undefined,
-            mappingsLoading: profileMetadataLoading,
-            groupByLabels: profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+            metadataLabels: profileMetadataResponse?.report.oneofKind === 'profileMetadata'
                 ? profileMetadataResponse?.report?.profileMetadata?.labels
-                : [],
+                : undefined,
+            metadataLoading: profileMetadataLoading,
         }, topTableData: {
             loading: tableLoading,
             arrow: tableResponse?.report.oneofKind === 'tableArrow'