@parca/profile 0.16.459 → 0.16.460

package/CHANGELOG.md

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

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

@@ -1 +1 @@
-{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx"],"names":[],"mappings":"AAsBA,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,oBAA2B,KAAK,KAAG,GAAG,CAAC,OAgE5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx"],"names":[],"mappings":"AAsBA,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,oBAA2B,KAAK,KAAG,GAAG,CAAC,OAmE5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.js

@@ -50,7 +50,7 @@ const ColorStackLegend = ({ compareMode = false }) => {
                         return;
                     }
                     setSearchString(feature);
-                }, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "mr-1 inline-block h-4 w-4", style: { backgroundColor: color } }), _jsx("span", { className: "text-sm", children: feature })] }), isHighlighted ? (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
+                }, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "mr-1 inline-block h-4 w-4 rounded-[4px]", style: { backgroundColor: color } }), _jsx("span", { className: "text-sm", children: feature })] }), isHighlighted ? (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
                             setSearchString('');
                             e.stopPropagation();
                         } })) : null] }, feature));

package/dist/ProfileView/components/ColorStackLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/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"}
+{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/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,OAsGrF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/ProfileView/components/ColorStackLegend.js

@@ -58,7 +58,7 @@ const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
             const filteringAllowed = feature !== EVERYTHING_ELSE;
             const isHighlighted = currentSearchString !== undefined ? currentSearchString.includes(feature) : false;
             return (_jsxs("div", { className: cx('flex-no-wrap mb-1 flex w-[19.25%] items-center justify-between text-ellipsis p-1', {
-                    'cursor-pointer': filteringAllowed,
+                    'cursor-pointer': filteringAllowed && colorBy === 'binary',
                     'bg-gray-200 dark:bg-gray-800': isHighlighted,
                 }), onClick: () => {
                     if (!filteringAllowed || isHighlighted || colorBy !== 'binary') {
@@ -67,7 +67,7 @@ const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
                     // Check if the current search string is defined and an array
                     const updatedSearchString = [...currentSearchString, feature]; // If array, append the feature
                     setSearchString(updatedSearchString);
-                }, children: [_jsxs("div", { className: "flex w-11/12 items-center justify-start", children: [_jsx("div", { className: "flex w-5 items-center", children: _jsx("div", { className: "mr-1 inline-block h-4 w-4", style: { backgroundColor: color } }) }), _jsx("div", { className: "shrink overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:whitespace-normal", children: feature })] }), _jsx("div", { className: "flex w-1/12 justify-end", children: isHighlighted && (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
+                }, children: [_jsxs("div", { className: "flex w-11/12 items-center justify-start", children: [_jsx("div", { className: "flex w-5 items-center", children: _jsx("div", { className: "mr-1 inline-block h-4 w-4 rounded-[4px]", style: { backgroundColor: color } }) }), _jsx("div", { className: "shrink overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:whitespace-normal", children: feature })] }), _jsx("div", { className: "flex w-1/12 justify-end", children: isHighlighted && (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
                                 // remove the current feature from the search string array of strings
                                 setSearchString(currentSearchString.filter((f) => f !== feature));
                                 e.stopPropagation();

package/dist/ProfileView/hooks/useProfileMetadata.js

@@ -19,7 +19,7 @@ export const useProfileMetadata = ({ flamegraphArrow, metadataMappingFiles, meta
     }, [flamegraphArrow]);
     const mappingsList = useMappingList(metadataMappingFiles);
     const filenamesList = useFilenamesList(table);
-    const colorMappings = colorBy === 'binary' ? mappingsList : filenamesList;
+    const colorMappings = colorBy === 'binary' || colorBy === '' ? mappingsList : filenamesList;
     return {
         table,
         mappingsList,

package/dist/SimpleMatchers/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/Select.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAOzD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgQ7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/Select.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAOzD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuQ7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/SimpleMatchers/Select.js

@@ -126,7 +126,12 @@ const CustomSelect = ({ items, selectedKey, onSelection, placeholder = 'Select a
             setIsOpen(false);
         }
     };
-    return (_jsxs("div", { ref: containerRef, className: "relative", onKeyDown: handleKeyDown, onClick: onButtonClick, children: [_jsxs("div", { id: id, onClick: () => !disabled && setIsOpen(!isOpen), className: cx(styles, width !== undefined ? `w-${width}` : 'w-full', disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : '', primary ? primaryStyles : defaultStyles, { [className]: className.length > 0 }), tabIndex: 0, role: "button", "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [_jsx("div", { className: cx(icon != null ? '' : 'block overflow-x-hidden text-ellipsis whitespace-nowrap'), children: renderSelection(selection) }), _jsx("div", { className: cx(icon != null ? '' : 'pointer-events-none text-gray-400'), children: icon ?? _jsx(Icon, { icon: "heroicons:chevron-up-down-20-solid", "aria-hidden": "true" }) })] }), isOpen && (_jsxs("div", { ref: optionsRef, className: cx('absolute z-50 mt-1 pt-0 max-h-[50vh] w-max overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm', { [optionsClassname]: optionsClassname.length > 0 }), role: "listbox", children: [searchable && (_jsx("div", { className: "sticky z-10 top-[-5px] w-auto max-w-full", children: _jsx("div", { className: "flex flex-col", children: editable ? (_jsxs(_Fragment, { children: [_jsx("textarea", { ref: searchInputRef, className: "w-full px-4 py-2 text-sm border-b border-gray-200 rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white min-h-[50px]", placeholder: "Type a RegEx to add", value: searchTerm, onChange: e => setSearchTerm(e.target.value) }), editable && searchTerm.length > 0 && (_jsx("div", { className: "p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: _jsx(Button, { variant: "primary", className: "w-full h-[30px]", onClick: () => {
+    const moveCaretToEnd = (e) => {
+        const value = e.target.value;
+        e.target.value = '';
+        e.target.value = value;
+    };
+    return (_jsxs("div", { ref: containerRef, className: "relative", onKeyDown: handleKeyDown, onClick: onButtonClick, children: [_jsxs("div", { id: id, onClick: () => !disabled && setIsOpen(!isOpen), className: cx(styles, width !== undefined ? `w-${width}` : 'w-full', disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : '', primary ? primaryStyles : defaultStyles, { [className]: className.length > 0 }), tabIndex: 0, role: "button", "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [_jsx("div", { className: cx(icon != null ? '' : 'block overflow-x-hidden text-ellipsis whitespace-nowrap'), children: renderSelection(selection) }), _jsx("div", { className: cx(icon != null ? '' : 'pointer-events-none text-gray-400'), children: icon ?? _jsx(Icon, { icon: "heroicons:chevron-up-down-20-solid", "aria-hidden": "true" }) })] }), isOpen && (_jsxs("div", { ref: optionsRef, className: cx('absolute z-50 mt-1 pt-0 max-h-[50vh] w-max overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm', { [optionsClassname]: optionsClassname.length > 0 }), role: "listbox", children: [searchable && (_jsx("div", { className: "sticky z-10 top-[-5px] w-auto max-w-full", children: _jsx("div", { className: "flex flex-col", children: editable ? (_jsxs(_Fragment, { children: [_jsx("textarea", { ref: searchInputRef, className: "w-full px-4 py-2 text-sm border-b border-gray-200 rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white min-h-[50px]", placeholder: "Type a RegEx to add", value: searchTerm, onChange: e => setSearchTerm(e.target.value), onFocus: e => moveCaretToEnd(e) }), editable && searchTerm.length > 0 && (_jsx("div", { className: "p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: _jsx(Button, { variant: "primary", className: "w-full h-[30px]", onClick: () => {
                                                 onSelection(searchTerm);
                                                 setIsOpen(false);
                                             }, children: "Add" }) }))] })) : (_jsx("input", { ref: searchInputRef, type: "text", className: "w-full px-4 h-[45px] text-sm border-none rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white", placeholder: "Search...", value: searchTerm, onChange: e => setSearchTerm(e.target.value) })) }) })), loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : (filteredItems.map((item, index) => (_jsxs("div", { ref: el => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAsB/E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAS1C,OAAO,EAEL,OAAO,EACP,QAAQ,EAgBT,MAAM,mBAAmB,CAAC;AAe3B,MAAM,MAAM,GAAG,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErC,eAAO,MAAM,UAAU,QAAS,GAAG,KAAG,GAAG,IAAI,QAE5C,CAAC;AAIF,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAkID,eAAO,MAAM,KAAK,wCA4chB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAuB/E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAS1C,OAAO,EAEL,OAAO,EACP,QAAQ,EAgBT,MAAM,mBAAmB,CAAC;AAe3B,MAAM,MAAM,GAAG,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErC,eAAO,MAAM,UAAU,QAAS,GAAG,KAAG,GAAG,IAAI,QAE5C,CAAC;AAIF,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAkID,eAAO,MAAM,KAAK,wCAydhB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/Table/index.js

@@ -17,9 +17,10 @@ import { createColumnHelper, } from '@tanstack/table-core';
 import { tableFromIPC, vectorFromArray } from 'apache-arrow';
 import cx from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
+import { Tooltip } from 'react-tooltip';
 import { Table as TableComponent, TableSkeleton, useParcaContext, useURLState, } from '@parca/components';
 import { useCurrentColorProfile } from '@parca/hooks';
-import { isSearchMatch, valueFormatter } from '@parca/utilities';
+import { getLastItem, isSearchMatch, valueFormatter } from '@parca/utilities';
 import { getFilenameColors, getMappingColors } from '../ProfileIcicleGraph/IcicleGraphArrow/';
 import useMappingList, { useFilenamesList, } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
 import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
@@ -148,12 +149,12 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
     unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
     const columns = useMemo(() => {
         return [
-            columnHelper.accessor('color', {
+            columnHelper.accessor('colorProperty', {
                 id: 'color',
                 header: '',
                 cell: info => {
                     const color = info.getValue();
-                    return _jsx("div", { className: "w-4 h-4 rounded-[4px]", style: { backgroundColor: color } });
+                    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-4 h-4 rounded-[4px]", style: { backgroundColor: color.color }, "data-tooltip-id": "table-color-tooltip", "data-tooltip-content": getLastItem(color.mappingFile) }), _jsx(Tooltip, { id: "table-color-tooltip" })] }));
                 },
                 size: 10,
             }),
@@ -390,7 +391,10 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
             const mappingFile = mappingFileColumn?.get(i) ?? '';
             return {
                 id: i,
-                color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
+                colorProperty: {
+                    color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
+                    mappingFile,
+                },
                 name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
                 flat,
                 flatDiff,

package/dist/Table/utils/functions.d.ts

@@ -3,7 +3,10 @@ import { Vector } from 'apache-arrow';
 import { colorByColors } from '../../ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes';
 export interface DataRow {
     id: number;
-    color: string;
+    colorProperty: {
+        color: string;
+        mappingFile: string;
+    };
     name: string;
     flat: bigint;
     flatDiff: bigint;

package/dist/Table/utils/functions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/Table/utils/functions.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/Table/utils/functions.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,GAAG,IAAI,OAAO,EAAC,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAIpC,OAAO,EAAC,aAAa,EAAC,MAAM,4DAA4D,CAAC;AAGzF,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE;QACb,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,GAAG,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErC,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,MAMzC,CAAC;AAEF,eAAO,MAAM,WAAW,kBACP,aAAa,qBACT,MAAM,GAAG,IAAI,OAC3B,MAAM,0BACa,MAAM,GAAG,IAAI,WAC5B,MAAM,KACd,MAwBF,CAAC;AAEF,eAAO,MAAM,OAAO,sBACC,MAAM,GAAG,IAAI,yBACT,MAAM,GAAG,IAAI,sBAChB,MAAM,GAAG,IAAI,OAC5B,MAAM,KACV,MAoBF,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAG,MAMxD,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EACzB,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,EACvB,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,GACnB,MAAM,CAgBR;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAE1C;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAIlF;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAInF;AAED,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,gBAAgB,GAChB,UAAU,GACV,oBAAoB,GACpB,YAAY,GACZ,sBAAsB,GACtB,gBAAgB,GAChB,0BAA0B,GAC1B,MAAM,GACN,oBAAoB,GACpB,kBAAkB,GAClB,aAAa,CAAC;AAElB,eAAO,MAAM,eAAe,eACd,OAAO,YACT,OAAO,KAChB,MAAM,CAAC,MAAM,EAAE,OAAO,CAMxB,CAAC;AAEF,eAAO,MAAM,UAAU,KAAK,CAAC;AAE7B,eAAO,MAAM,iBAAiB,SAAU,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAIrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAIpE,CAAC;AAEF,eAAO,MAAM,iBAAiB,SAAU,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAIrE,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,OAAO,EAAE,KAAG,GAAG,EAarD,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,OAAO,EAAE,KAAG,GAAG,EAarD,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAW,MAAM,GAAG,MAAM,SAAS,MAAM,GAAG,MAAM,KAAG,MAOpF,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,MAAM,GAAG,MAAM,SAAS,MAAM,YAAY,MAAM,KAAG,MAMxF,CAAC;AAEF,eAAO,MAAM,eAAe,UAa3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,MAAM,GAAG,MAAM,SAAS,MAAM,GAAG,MAAM,KAAG,MAOjF,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,GAAG,MAAM,SAAS,MAAM,YAAY,MAAM,KAAG,MAMrF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.459",
+  "version": "0.16.460",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -74,5 +74,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "e92cda4da962e2d09da37cf973d419b7ca839562"
+  "gitHead": "801d740c8340a5ca9e9ed638c24c8c805b50c94b"
 }

package/src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx

@@ -71,7 +71,10 @@ const ColorStackLegend = ({compareMode = false}: Props): JSX.Element => {
             }}
           >
             <div className="flex items-center">
-              <div className="mr-1 inline-block h-4 w-4" style={{backgroundColor: color}} />
+              <div
+                className="mr-1 inline-block h-4 w-4 rounded-[4px]"
+                style={{backgroundColor: color}}
+              />
               <span className="text-sm">{feature}</span>
             </div>
             {isHighlighted ? (

package/src/ProfileView/components/ColorStackLegend.tsx

@@ -88,7 +88,7 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
             className={cx(
               'flex-no-wrap mb-1 flex w-[19.25%] items-center justify-between text-ellipsis p-1',
               {
-                'cursor-pointer': filteringAllowed,
+                'cursor-pointer': filteringAllowed && colorBy === 'binary',
                 'bg-gray-200 dark:bg-gray-800': isHighlighted,
               }
             )}
@@ -105,7 +105,10 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
           >
             <div className="flex w-11/12 items-center justify-start">
               <div className="flex w-5 items-center">
-                <div className="mr-1 inline-block h-4 w-4" style={{backgroundColor: color}} />
+                <div
+                  className="mr-1 inline-block h-4 w-4 rounded-[4px]"
+                  style={{backgroundColor: color}}
+                />
               </div>
               <div className="shrink overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:whitespace-normal">
                 {feature}

package/src/ProfileView/hooks/useProfileMetadata.ts

@@ -47,7 +47,7 @@ export const useProfileMetadata = ({
   const mappingsList = useMappingList(metadataMappingFiles);
   const filenamesList = useFilenamesList(table);
 
-  const colorMappings = colorBy === 'binary' ? mappingsList : filenamesList;
+  const colorMappings = colorBy === 'binary' || colorBy === '' ? mappingsList : filenamesList;
 
   return {
     table,

package/src/SimpleMatchers/Select.tsx

@@ -183,6 +183,12 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
     }
   };
 
+  const moveCaretToEnd = (e: React.FocusEvent<HTMLTextAreaElement>): void => {
+    const value = e.target.value;
+    e.target.value = '';
+    e.target.value = value;
+  };
+
   return (
     <div ref={containerRef} className="relative" onKeyDown={handleKeyDown} onClick={onButtonClick}>
       <div
@@ -232,6 +238,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
                       placeholder="Type a RegEx to add"
                       value={searchTerm}
                       onChange={e => setSearchTerm(e.target.value)}
+                      onFocus={e => moveCaretToEnd(e)}
                     />
                     {editable && searchTerm.length > 0 && (
                       <div className="p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">

package/src/Table/index.tsx

@@ -24,6 +24,7 @@ import {
 import {Int64, Vector, tableFromIPC, vectorFromArray} from 'apache-arrow';
 import cx from 'classnames';
 import {AnimatePresence, motion} from 'framer-motion';
+import {Tooltip} from 'react-tooltip';
 
 import {
   Table as TableComponent,
@@ -34,7 +35,7 @@ import {
 import {type RowRendererProps} from '@parca/components/dist/Table';
 import {useCurrentColorProfile} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
-import {isSearchMatch, valueFormatter} from '@parca/utilities';
+import {getLastItem, isSearchMatch, valueFormatter} from '@parca/utilities';
 
 import {getFilenameColors, getMappingColors} from '../ProfileIcicleGraph/IcicleGraphArrow/';
 import {colorByColors} from '../ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes';
@@ -303,12 +304,22 @@ export const Table = React.memo(function Table({
 
   const columns = useMemo<Array<ColumnDef<Row>>>(() => {
     return [
-      columnHelper.accessor('color', {
+      columnHelper.accessor('colorProperty', {
         id: 'color',
         header: '',
         cell: info => {
-          const color = info.getValue() as string;
-          return <div className="w-4 h-4 rounded-[4px]" style={{backgroundColor: color}} />;
+          const color = info.getValue() as {color: string; mappingFile: string};
+          return (
+            <>
+              <div
+                className="w-4 h-4 rounded-[4px]"
+                style={{backgroundColor: color.color}}
+                data-tooltip-id="table-color-tooltip"
+                data-tooltip-content={getLastItem(color.mappingFile)}
+              />
+              <Tooltip id="table-color-tooltip" />
+            </>
+          );
         },
         size: 10,
       }),
@@ -577,13 +588,16 @@ export const Table = React.memo(function Table({
 
       return {
         id: i,
-        color: getRowColor(
-          colorByColors,
-          mappingFileColumn,
-          i,
-          functionFileNameColumn,
-          colorBy as string
-        ),
+        colorProperty: {
+          color: getRowColor(
+            colorByColors,
+            mappingFileColumn,
+            i,
+            functionFileNameColumn,
+            colorBy as string
+          ),
+          mappingFile,
+        },
         name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
         flat,
         flatDiff,

package/src/Table/utils/functions.ts

@@ -21,7 +21,10 @@ import {hexifyAddress} from '../../utils';
 
 export interface DataRow {
   id: number;
-  color: string;
+  colorProperty: {
+    color: string;
+    mappingFile: string;
+  };
   name: string;
   flat: bigint;
   flatDiff: bigint;