Merge pull request #5423 from parca-dev/ui-improvements

Parca UI improvements

Author: yomete

ui/packages/shared/profile/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 ? (

ui/packages/shared/profile/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}

ui/packages/shared/profile/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,

ui/packages/shared/profile/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">

ui/packages/shared/profile/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,

ui/packages/shared/profile/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;