@parca/profile 0.16.438 → 0.16.440

package/src/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.ts

@@ -14,7 +14,7 @@
 import {EVERYTHING_ELSE} from '@parca/store';
 import {diffColor, getLastItem} from '@parca/utilities';
 
-interface mappingColors {
+interface colors {
   [key: string]: string;
 }
 
@@ -23,8 +23,8 @@ interface Props {
   compareMode: boolean;
   cumulative: bigint;
   diff: bigint | null;
-  mappingColors: mappingColors;
-  mappingFile: string | null;
+  colorsMap: colors;
+  colorAttribute: string | null;
 }
 
 const useNodeColor = ({
@@ -32,14 +32,14 @@ const useNodeColor = ({
   compareMode,
   cumulative,
   diff,
-  mappingColors,
-  mappingFile,
+  colorsMap,
+  colorAttribute,
 }: Props): string => {
   if (compareMode) {
     return diffColor(diff ?? 0n, cumulative, isDarkMode);
   }
 
-  return mappingColors[getLastItem(mappingFile ?? '') ?? EVERYTHING_ELSE];
+  return colorsMap[getLastItem(colorAttribute ?? '') ?? EVERYTHING_ELSE];
 };
 
 export default useNodeColor;

package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts

@@ -13,7 +13,13 @@
 
 import {Table} from 'apache-arrow';
 
-import {EVERYTHING_ELSE, FEATURE_TYPES, type Feature} from '@parca/store';
+import {
+  BINARY_FEATURE_TYPES,
+  EVERYTHING_ELSE,
+  FILENAMES_FEATURE_TYPES,
+  type BinaryFeature,
+  type FilenameFeature,
+} from '@parca/store';
 import {divide, getLastItem, valueFormatter} from '@parca/utilities';
 
 import {hexifyAddress} from '../../utils';
@@ -65,12 +71,20 @@ export function nodeLabel(
   return fallback === '' ? '<unknown>' : fallback;
 }
 
-export const extractFeature = (mapping: string): Feature => {
+export const extractFeature = (mapping: string): BinaryFeature => {
   if (mapping != null && mapping !== '') {
-    return {name: mapping, type: FEATURE_TYPES.Binary};
+    return {name: mapping, type: BINARY_FEATURE_TYPES.Binary};
+  }
+
+  return {name: EVERYTHING_ELSE, type: BINARY_FEATURE_TYPES.Misc};
+};
+
+export const extractFilenameFeature = (filename: string): FilenameFeature => {
+  if (filename != null && filename !== '') {
+    return {name: filename, type: FILENAMES_FEATURE_TYPES.Filename};
   }
 
-  return {name: EVERYTHING_ELSE, type: FEATURE_TYPES.Misc};
+  return {name: EVERYTHING_ELSE, type: FILENAMES_FEATURE_TYPES.Misc};
 };
 
 export const getTextForCumulative = (

package/src/ProfileIcicleGraph/index.tsx

@@ -13,6 +13,7 @@
 
 import React, {useEffect, useMemo, useState} from 'react';
 
+import {Table, tableFromIPC} from 'apache-arrow';
 import {AnimatePresence, motion} from 'framer-motion';
 
 import {Flamegraph, FlamegraphArrow} from '@parca/client';
@@ -25,7 +26,7 @@ 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');
 
@@ -44,8 +45,8 @@ interface ProfileIcicleGraphProps {
   setActionButtons?: (buttons: React.JSX.Element) => void;
   error?: any;
   isHalfScreen: boolean;
-  mappings?: string[];
-  mappingsLoading?: boolean;
+  metadataMappingFiles?: string[];
+  metadataLoading?: boolean;
 }
 
 const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
@@ -64,16 +65,22 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   error,
   width,
   isHalfScreen,
-  mappings,
+  metadataMappingFiles,
 }: ProfileIcicleGraphProps): JSX.Element {
   const {onError, authenticationErrorMessage, isDarkMode} = useParcaContext();
   const {compareMode} = useProfileViewContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
 
-  const mappingsList = useMappingList(mappings);
+  const table: Table<any> | null = 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.
@@ -82,6 +89,12 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   const [compareAbsolute = compareAbsoluteDefault] = useURLState('compare_absolute');
   const isCompareAbsolute = compareAbsolute === 'true';
 
+  const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : (colorBy as string);
+  const mappingsListCount = useMemo(
+    () => mappingsList.filter(m => m !== '').length,
+    [mappingsList]
+  );
+
   const [
     totalFormatted,
     totalUnfilteredFormatted,
@@ -113,7 +126,15 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   }, [graph, arrow, filtered, total]);
 
   const loadingState =
-    !loading && (arrow !== undefined || graph !== undefined) && mappings !== undefined;
+    !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) {
@@ -211,7 +232,11 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
       >
         {compareMode ? <DiffLegend /> : null}
         {isColorStackLegendEnabled && (
-          <ColorStackLegend compareMode={compareMode} mappings={mappings} loading={isLoading} />
+          <ColorStackLegend
+            compareMode={compareMode}
+            mappings={colorByValue === 'binary' ? mappingsList : filenamesList}
+            loading={isLoading}
+          />
         )}
         <div className="min-h-48" id="h-icicle-graph">
           <>{icicleGraph}</>

package/src/ProfileView/index.tsx

@@ -56,9 +56,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 {
@@ -231,8 +231,8 @@ export const ProfileView = ({
                     : dimensions.width - 16
                   : 0
               }
-              mappings={flamegraphData.mappings}
-              mappingsLoading={flamegraphData.mappingsLoading}
+              metadataMappingFiles={flamegraphData.metadataMappingFiles}
+              metadataLoading={flamegraphData.metadataLoading}
             />
           </ConditionalWrapper>
         );
@@ -397,7 +397,7 @@ export const ProfileView = ({
           filtered={filtered}
           currentSearchString={currentSearchString}
           setSearchString={setSearchString}
-          groupByLabels={flamegraphData.groupByLabels ?? []}
+          groupByLabels={flamegraphData.metadataLabels ?? []}
         />
 
         <div className="w-full" ref={ref}>

package/src/ProfileViewWithData.tsx

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

package/src/components/VisualisationToolbar/MultiLevelDropdown.tsx

@@ -37,6 +37,7 @@ interface MenuItemType {
   active?: boolean;
   value?: string;
   icon?: string;
+  customSubmenu?: React.ReactNode;
 }
 
 type MenuItemProps = MenuItemType & {
@@ -44,7 +45,8 @@ type MenuItemProps = MenuItemType & {
   path?: string[];
   closeDropdown: () => void;
   isNested?: boolean;
-  activeValue?: string;
+  activeValueForSortBy?: string;
+  activeValueForColorBy?: string;
   icon?: string;
 };
 
@@ -57,12 +59,22 @@ const MenuItem: React.FC<MenuItemProps> = ({
   id,
   closeDropdown,
   isNested = false,
-  activeValue,
+  activeValueForSortBy,
+  activeValueForColorBy,
   value,
   disabled = false,
   icon,
+  customSubmenu,
 }) => {
-  const isActive = isNested && value === activeValue;
+  let isActive = false;
+  if (isNested) {
+    if (activeValueForSortBy !== undefined && value === activeValueForSortBy) {
+      isActive = true;
+    }
+    if (activeValueForColorBy !== undefined && value === activeValueForColorBy) {
+      isActive = true;
+    }
+  }
 
   const handleSelect = (): void => {
     if (items === undefined) {
@@ -93,13 +105,17 @@ const MenuItem: React.FC<MenuItemProps> = ({
               id={id}
               disabled={disabled}
             >
-              <span className="flex items-center">
-                <div className="flex items-center">
-                  <span>{label}</span>
-                  {icon !== undefined && <Icon icon={icon} className="ml-2 h-4 w-4" />}
-                </div>
-                {isActive && <Icon icon="heroicons-solid:check" className="ml-2 h-4 w-4" />}
-              </span>
+              {customSubmenu !== undefined ? (
+                customSubmenu
+              ) : (
+                <span className="flex items-center">
+                  <div className="flex items-center">
+                    <span>{label}</span>
+                    {icon !== undefined && <Icon icon={icon} className="ml-2 h-4 w-4" />}
+                  </div>
+                  {isActive && <Icon icon="heroicons-solid:check" className="ml-2 h-4 w-4" />}
+                </span>
+              )}
               {items !== undefined && (
                 <Icon icon="flowbite:caret-right-solid" className="h-[14px] w-[14px]" />
               )}
@@ -118,7 +134,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
                     path={[...path, label]}
                     closeDropdown={closeDropdown}
                     isNested={true}
-                    activeValue={activeValue}
+                    activeValueForSortBy={activeValueForSortBy}
+                    activeValueForColorBy={activeValueForColorBy}
                   />
                 ))}
               </Menu.Items>
@@ -141,6 +158,11 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({onSelect, profil
   });
   const [colorStackLegend, setStoreColorStackLegend] = useURLState('color_stack_legend');
   const [binaryFrameFilter, setBinaryFrameFilter] = useURLState('binary_frame_filter');
+  const [colorBy, setColorBy] = useURLState('color_by');
+  const [hiddenBinaries, setHiddenBinaries] = useURLState('binary_frame_filter', {
+    defaultValue: [],
+    alwaysReturnArray: true,
+  });
   const {compareMode} = useProfileViewContext();
   const [colorProfileName] = useUserPreference<string>(
     USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
@@ -157,6 +179,12 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({onSelect, profil
     useURLState('compare_absolute');
   const isCompareAbsolute = compareAbsolute === 'true';
 
+  const handleBinaryToggle = (index: number): void => {
+    const updatedBinaries = [...(hiddenBinaries as string[])];
+    updatedBinaries.splice(index, 1);
+    setHiddenBinaries(updatedBinaries);
+  };
+
   const setColorStackLegend = useCallback(
     (value: string): void => {
       setStoreColorStackLegend(value);
@@ -193,6 +221,25 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({onSelect, profil
       hide: false,
       icon: 'material-symbols:sort',
     },
+    {
+      label: 'Color by',
+      id: 'h-solor-by-filter',
+      items: [
+        {
+          label: 'Binary',
+          onclick: () => setColorBy('binary'),
+          value: 'binary',
+        },
+        {
+          label: 'Filename',
+          onclick: () => setColorBy('filename'),
+          value: 'filename',
+        },
+      ],
+      hide: false,
+      icon: 'carbon:color-palette',
+    },
+
     {
       label: isColorStackLegendEnabled ? 'Hide legend' : 'Show legend',
       onclick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'),
@@ -219,6 +266,28 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({onSelect, profil
       id: 'h-reset-legend-button',
       icon: 'system-uicons:reset',
     },
+    {
+      label: 'Hidden Binaries',
+      id: 'h-hidden-binaries',
+      items: (hiddenBinaries as string[])?.map((binary, index) => ({
+        label: binary,
+        customSubmenu: (
+          <div className="flex items-center gap-2 w-full">
+            <input
+              id={binary}
+              name={binary}
+              type="checkbox"
+              className="h-4 w-4 rounded-md border-2 border-gray-300 text-indigo-600 focus:ring-indigo-600 focus:ring-offset-0 checked:bg-indigo-600 checked:border-indigo-600"
+              checked={hiddenBinaries?.includes(binary)}
+              onChange={() => handleBinaryToggle(index)}
+            />
+            <span>{binary}</span>
+          </div>
+        ),
+      })),
+      hide: hiddenBinaries === undefined || hiddenBinaries.length === 0,
+      icon: 'ph:eye-closed',
+    },
   ];
 
   return (
@@ -233,7 +302,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({onSelect, profil
               />
             </Menu.Button>
             {open && (
-              <Menu.Items className="absolute z-30 right-0 w-56 mt-2 py-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600">
+              <Menu.Items className="absolute z-30 left-0 w-56 mt-2 py-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600">
                 <span className="text-xs text-gray-400 capitalize px-4 py-3">actions</span>
                 {menuItems
                   .filter(item => item.hide !== undefined && !item.hide)
@@ -243,7 +312,10 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({onSelect, profil
                       {...item}
                       onSelect={onSelect}
                       closeDropdown={close}
-                      activeValue={storeSortBy as string}
+                      activeValueForSortBy={storeSortBy as string}
+                      activeValueForColorBy={
+                        colorBy === undefined || colorBy === '' ? 'binary' : (colorBy as string)
+                      }
                     />
                   ))}
               </Menu.Items>