@parca/profile 0.16.444 → 0.16.446

package/src/Table/index.tsx

@@ -32,11 +32,36 @@ import {
   useURLState,
 } from '@parca/components';
 import {type RowRendererProps} from '@parca/components/dist/Table';
+import {useCurrentColorProfile} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
-import {getLastItem, isSearchMatch, valueFormatter} from '@parca/utilities';
+import {isSearchMatch, valueFormatter} from '@parca/utilities';
 
+import {getFilenameColors, getMappingColors} from '../ProfileIcicleGraph/IcicleGraphArrow/';
+import {colorByColors} from '../ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes';
+import useMappingList, {
+  useFilenamesList,
+} from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
 import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
-import {hexifyAddress} from '../utils';
+import {
+  ColumnName,
+  DataRow,
+  DummyRow,
+  ROW_HEIGHT,
+  RowName,
+  addPlusSign,
+  getCalleeRows,
+  getCallerRows,
+  getRowColor,
+  getScrollTargetIndex,
+  isFirstSubRow,
+  isLastSubRow,
+  isSubRow,
+  ratioString,
+  rowBgClassNames,
+  sizeToBottomStyle,
+  sizeToHeightStyle,
+  sizeToWidthStyle,
+} from './utils/functions';
 import {getTopAndBottomExpandedRowModel} from './utils/topAndBottomExpandedRowModel';
 
 const FIELD_MAPPING_FILE = 'mapping_file';
@@ -51,30 +76,6 @@ const FIELD_CUMULATIVE_DIFF = 'cumulative_diff';
 const FIELD_CALLERS = 'callers';
 const FIELD_CALLEES = 'callees';
 
-export interface DataRow {
-  id: number;
-  name: string;
-  flat: bigint;
-  flatDiff: bigint;
-  cumulative: bigint;
-  cumulativeDiff: bigint;
-  mappingFile: string;
-  functionSystemName: string;
-  functionFileName: string;
-  callers?: DataRow[];
-  callees?: DataRow[];
-  subRows?: Row[];
-  isTopSubRow?: boolean;
-  isBottomSubRow?: boolean;
-}
-
-interface DummyRow {
-  size: number;
-  message?: string;
-  isTopSubRow?: boolean;
-  isBottomSubRow?: boolean;
-}
-
 export type Row = DataRow | DummyRow;
 
 export const isDummyRow = (row: Row): row is DummyRow => {
@@ -94,50 +95,9 @@ interface TableProps {
   setActionButtons?: (buttons: React.JSX.Element) => void;
   isHalfScreen: boolean;
   unit?: string;
+  metadataMappingFiles?: string[];
 }
 
-export type ColumnName =
-  | 'flat'
-  | 'flatPercentage'
-  | 'flatDiff'
-  | 'flatDiffPercentage'
-  | 'cumulative'
-  | 'cumulativePercentage'
-  | 'cumulativeDiff'
-  | 'cumulativeDiffPercentage'
-  | 'name'
-  | 'functionSystemName'
-  | 'functionFileName'
-  | 'mappingFile';
-
-const rowBgClassNames = (isExpanded: boolean, isSubRow: boolean): Record<string, boolean> => {
-  return {
-    relative: true,
-    'bg-indigo-100 dark:bg-gray-600': isSubRow,
-    'bg-indigo-50 dark:bg-gray-700': isExpanded,
-  };
-};
-
-const ROW_HEIGHT = 29;
-
-const sizeToHeightStyle = (size: number): Record<string, string> => {
-  return {
-    height: `${size * ROW_HEIGHT}px`,
-  };
-};
-
-const sizeToWidthStyle = (size: number): Record<string, string> => {
-  return {
-    width: `${size * ROW_HEIGHT}px`,
-  };
-};
-
-const sizeToBottomStyle = (size: number): Record<string, string> => {
-  return {
-    bottom: `-${size * ROW_HEIGHT}px`,
-  };
-};
-
 const CustomRowRenderer = ({
   row,
   usePointerCursor,
@@ -241,13 +201,13 @@ const CustomRowRenderer = ({
             {idx === 0 && isExpanded ? (
               <>
                 <div
-                  className={`absolute top-0 left-0 bg-white dark:bg-indigo-500 px-1 uppercase -rotate-90 origin-top-left z-10 text-[10px] border-l border-y border-gray-200 dark:border-gray-700 text-left`}
+                  className={`absolute top-0 left-0 bg-white dark:bg-indigo-500 px-1 uppercase -rotate-90 origin-top-left z-[9] text-[10px] border-l border-y border-gray-200 dark:border-gray-700 text-left`}
                   style={{...sizeToWidthStyle(3)}}
                 >
                   Callers {'->'}
                 </div>
                 <div
-                  className={`absolute left-[18px] bg-white dark:bg-indigo-500 px-1 uppercase -rotate-90 origin-bottom-left z-10 text-[10px] border-r border-y border-gray-200 dark:border-gray-700`}
+                  className={`absolute left-[18px] bg-white dark:bg-indigo-500 px-1 uppercase -rotate-90 origin-bottom-left z-[9] text-[10px] border-r border-y border-gray-200 dark:border-gray-700`}
                   style={{
                     ...sizeToWidthStyle(3),
                     ...sizeToBottomStyle(3),
@@ -266,68 +226,6 @@ const CustomRowRenderer = ({
   );
 };
 
-const getCallerRows = (callers: DataRow[]): Row[] => {
-  if (callers.length === 0) {
-    return [{size: 3, message: 'No callers.', isTopSubRow: true}];
-  }
-
-  const rows = callers.map(row => {
-    return {...row, isTopSubRow: true};
-  });
-  if (rows.length >= 3) {
-    return rows;
-  }
-
-  return [...rows, {size: 3 - rows.length, message: '', isTopSubRow: true}];
-};
-
-const getCalleeRows = (callees: DataRow[]): Row[] => {
-  if (callees.length === 0) {
-    return [{size: 3, message: 'No callees.', isBottomSubRow: true}];
-  }
-
-  const rows = callees.map(row => {
-    return {...row, isBottomSubRow: true};
-  });
-  if (rows.length >= 3) {
-    return rows;
-  }
-
-  return [{size: 3 - rows.length, message: '', isBottomSubRow: true}, ...rows];
-};
-
-export const getPercentageString = (value: bigint | number, total: bigint | number): string => {
-  if (total === 0n) {
-    return '0%';
-  }
-
-  const percentage = (Number(value) / Number(total)) * 100;
-  return `${percentage.toFixed(2)}%`;
-};
-
-export const getRatioString = (value: bigint | number, total: bigint, filtered: bigint): string => {
-  if (filtered === 0n) {
-    return ` ${getPercentageString(value, total)}`;
-  }
-
-  return `${getPercentageString(value, total)} / ${getPercentageString(value, filtered)}`;
-};
-
-export const possibleColumns = [
-  'flat',
-  'flatPercentage',
-  'flatDiff',
-  'flatDiffPercentage',
-  'cumulative',
-  'cumulativePercentage',
-  'cumulativeDiff',
-  'cumulativeDiffPercentage',
-  'name',
-  'functionSystemName',
-  'functionFileName',
-  'mappingFile',
-];
-
 export const Table = React.memo(function Table({
   data,
   total,
@@ -338,43 +236,82 @@ export const Table = React.memo(function Table({
   setSearchString = () => {},
   isHalfScreen,
   unit,
+  metadataMappingFiles,
 }: TableProps): React.JSX.Element {
+  const currentColorProfile = useCurrentColorProfile();
   const [dashboardItems] = useURLState<string[]>('dashboard_items', {
     alwaysReturnArray: true,
   });
+
   const [tableColumns] = useURLState<string[]>('table_columns', {
     alwaysReturnArray: true,
   });
-
+  const [colorBy, setColorBy] = useURLState('color_by');
   const {isDarkMode} = useParcaContext();
   const [expanded, setExpanded] = useState<ExpandedState>({});
   const [scrollToIndex, setScrollToIndex] = useState<number | undefined>(undefined);
 
   const {compareMode} = useProfileViewContext();
 
-  const percentageString = (value: bigint | number, total: bigint | number): string => {
-    if (total === 0n) {
-      return '0%';
+  const table = useMemo(() => {
+    if (loading || data == null) {
+      return null;
     }
 
-    const percentage = (Number(value) / Number(total)) * 100;
-    return `${percentage.toFixed(2)}%`;
-  };
+    return tableFromIPC(data);
+  }, [data, loading]);
 
-  const ratioString = (value: bigint | number): string => {
-    if (filtered === 0n) {
-      return ` ${percentageString(value, total)}`;
+  const mappingsList = useMappingList(metadataMappingFiles);
+  const filenamesList = useFilenamesList(table);
+  const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : (colorBy as string);
+
+  const mappingsListCount = useMemo(
+    () => mappingsList.filter(m => m !== '').length,
+    [mappingsList]
+  );
+
+  // 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]);
+
+  const filenameColors = useMemo(() => {
+    const colors = getFilenameColors(filenamesList, isDarkMode, currentColorProfile);
+    return colors;
+  }, [isDarkMode, filenamesList, currentColorProfile]);
 
-    return `${percentageString(value, total)} / ${percentageString(value, filtered)}`;
+  const mappingColors = useMemo(() => {
+    const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
+    return colors;
+  }, [isDarkMode, mappingsList, currentColorProfile]);
+
+  const colorByList = {
+    filename: filenameColors,
+    binary: mappingColors,
   };
 
+  type ColorByKey = keyof typeof colorByList;
+
+  const colorByColors: colorByColors = colorByList[colorByValue as ColorByKey];
+
   const columnHelper = createColumnHelper<Row>();
 
   unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
 
   const columns = useMemo<Array<ColumnDef<Row>>>(() => {
     return [
+      columnHelper.accessor('color', {
+        id: 'color',
+        header: '',
+        cell: info => {
+          const color = info.getValue() as string;
+          return <div className="w-4 h-4 rounded-[4px]" style={{backgroundColor: color}} />;
+        },
+        size: 10,
+      }),
       columnHelper.accessor('flat', {
         id: 'flat',
         header: 'Flat',
@@ -392,7 +329,7 @@ export const Table = React.memo(function Table({
           if (isDummyRow(info.row.original)) {
             return '';
           }
-          return ratioString((info as CellContext<DataRow, bigint>).getValue());
+          return ratioString((info as CellContext<DataRow, bigint>).getValue(), total, filtered);
         },
         size: 120,
         meta: {
@@ -418,7 +355,7 @@ export const Table = React.memo(function Table({
           if (isDummyRow(info.row.original)) {
             return '';
           }
-          return ratioString((info as CellContext<DataRow, bigint>).getValue());
+          return ratioString((info as CellContext<DataRow, bigint>).getValue(), total, filtered);
         },
         size: 120,
         meta: {
@@ -443,7 +380,7 @@ export const Table = React.memo(function Table({
           if (isDummyRow(info.row.original)) {
             return '';
           }
-          return ratioString((info as CellContext<DataRow, bigint>).getValue());
+          return ratioString((info as CellContext<DataRow, bigint>).getValue(), total, filtered);
         },
         size: 150,
         meta: {
@@ -469,7 +406,7 @@ export const Table = React.memo(function Table({
           if (isDummyRow(info.row.original)) {
             return '';
           }
-          return ratioString((info as CellContext<DataRow, bigint>).getValue());
+          return ratioString((info as CellContext<DataRow, bigint>).getValue(), total, filtered);
         },
         size: 170,
         meta: {
@@ -503,6 +440,7 @@ export const Table = React.memo(function Table({
 
   const [columnVisibility, setColumnVisibility] = useState(() => {
     return {
+      color: true,
       flat: true,
       flatPercentage: false,
       flatDiff: compareMode,
@@ -552,37 +490,40 @@ export const Table = React.memo(function Table({
     [selectSpan, dashboardItems.length]
   );
 
-  const onRowDoubleClick = useCallback((row: RowType<Row>, rows: Array<RowType<Row>>) => {
-    if (isDummyRow(row.original)) {
-      return;
-    }
-    if (!isSubRow(row.original)) {
-      row.toggleExpanded();
-      return;
-    }
-    // find the original row for this subrow and toggle it
-    const newRow = rows.find(
-      r =>
-        !isDummyRow(r.original) &&
-        !isDummyRow(row.original) &&
-        r.original.name === row.original.name &&
-        !isSubRow(r.original)
-    );
-    const parentRow = rows.find(r => {
-      const parent = row.getParentRow()!;
-      if (isDummyRow(parent.original) || isDummyRow(r.original)) {
-        return false;
+  const onRowDoubleClick = useCallback(
+    (row: RowType<Row>, rows: Array<RowType<Row>>) => {
+      if (isDummyRow(row.original)) {
+        return;
+      }
+      if (!isSubRow(row.original)) {
+        row.toggleExpanded();
+        return;
+      }
+      // find the original row for this subrow and toggle it
+      const newRow = rows.find(
+        r =>
+          !isDummyRow(r.original) &&
+          !isDummyRow(row.original) &&
+          r.original.name === row.original.name &&
+          !isSubRow(r.original)
+      );
+      const parentRow = rows.find(r => {
+        const parent = row.getParentRow()!;
+        if (isDummyRow(parent.original) || isDummyRow(r.original)) {
+          return false;
+        }
+        return r.original.name === parent.original.name;
+      });
+      if (parentRow == null || newRow == null) {
+        return;
       }
-      return r.original.name === parent.original.name;
-    });
-    if (parentRow == null || newRow == null) {
-      return;
-    }
 
-    newRow.toggleExpanded();
+      newRow.toggleExpanded();
 
-    setScrollToIndex(getScrollTargetIndex(rows, parentRow, newRow));
-  }, []);
+      setScrollToIndex(getScrollTargetIndex(rows, parentRow, newRow));
+    },
+    [setScrollToIndex]
+  );
 
   const shouldHighlightRow = useCallback(
     (row: Row) => {
@@ -608,14 +549,6 @@ export const Table = React.memo(function Table({
     ];
   }, [compareMode]);
 
-  const table = useMemo(() => {
-    if (loading || data == null) {
-      return null;
-    }
-
-    return tableFromIPC(data);
-  }, [data, loading]);
-
   const rows: DataRow[] = useMemo(() => {
     if (table == null || table.numRows === 0) {
       return [];
@@ -644,6 +577,13 @@ export const Table = React.memo(function Table({
 
       return {
         id: i,
+        color: getRowColor(
+          colorByColors,
+          mappingFileColumn,
+          i,
+          functionFileNameColumn,
+          colorBy as string
+        ),
         name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
         flat,
         flatDiff,
@@ -676,7 +616,21 @@ export const Table = React.memo(function Table({
     }
 
     return rows;
-  }, [table]);
+  }, [table, colorByColors, colorBy]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (currentSearchString == null || rows.length === 0) return;
+
+      const firstHighlightedRowIndex = rows.findIndex(row => {
+        return !isDummyRow(row) && isSearchMatch(currentSearchString, row.name);
+      });
+
+      if (firstHighlightedRowIndex !== -1) {
+        setScrollToIndex(firstHighlightedRowIndex);
+      }
+    }, 1000); // Adding a delay to allow the table to render seems to be the only way to get this to work i.e. scrolling down to the highlighted row
+  }, [currentSearchString, rows]);
 
   if (loading) {
     return (
@@ -734,85 +688,4 @@ export const Table = React.memo(function Table({
   );
 });
 
-export const addPlusSign = (num: string): string => {
-  if (num.charAt(0) === '0' || num.charAt(0) === '-') {
-    return num;
-  }
-
-  return `+${num}`;
-};
-
-export const RowName = (
-  mappingFileColumn: Vector | null,
-  locationAddressColumn: Vector | null,
-  functionNameColumn: Vector | null,
-  row: number
-): string => {
-  if (mappingFileColumn === null) {
-    console.error('mapping_file column not found');
-    return '';
-  }
-
-  const mappingFile: string | null = mappingFileColumn?.get(row);
-  let mapping = '';
-  // Show the last item in the mapping file only if there are more than 1 mappings
-  if (mappingFile != null && mappingFileColumn.data.length > 1) {
-    mapping = `[${getLastItem(mappingFile) ?? ''}]`;
-  }
-  const functionName: string | null = functionNameColumn?.get(row) ?? '';
-  if (functionName !== null && functionName !== '') {
-    return `${mapping} ${functionName}`;
-  }
-
-  const address: bigint = locationAddressColumn?.get(row) ?? 0;
-
-  return hexifyAddress(address);
-};
-
-const getRowsCount = (rows: Array<RowType<Row>>): number => {
-  if (rows.length < 6) {
-    return 6;
-  }
-
-  return rows.length;
-};
-
-function getScrollTargetIndex(
-  rows: Array<RowType<Row>>,
-  parentRow: RowType<Row>,
-  newRow: RowType<Row>
-): number {
-  const parentIndex = rows.indexOf(parentRow);
-  const newRowIndex = rows.indexOf(newRow);
-  let targetIndex = newRowIndex;
-  if (parentIndex > newRowIndex) {
-    // Adjusting the number of subs rows to scroll to the main row after expansion.
-    targetIndex -= getRowsCount(newRow.subRows);
-  }
-  if (parentIndex < newRowIndex) {
-    // If the parent row is above the new row, we need to adjust the number of subrows of the parent.
-    targetIndex += getRowsCount(parentRow.subRows);
-  }
-  if (targetIndex < 0) {
-    targetIndex = 0;
-  }
-  return targetIndex;
-}
-
-function isSubRow(row: Row): boolean {
-  return row.isTopSubRow === true || row.isBottomSubRow === true;
-}
-
-function isLastSubRow(row: RowType<Row>, rows: Array<RowType<Row>>): boolean {
-  const index = rows.indexOf(row);
-  const nextRow = rows[index + 1];
-  return nextRow == null || (!isSubRow(nextRow.original) && !nextRow.getIsExpanded());
-}
-
-function isFirstSubRow(row: RowType<Row>, rows: Array<RowType<Row>>): boolean {
-  const index = rows.indexOf(row);
-  const prevRow = rows[index - 1];
-  return prevRow == null || (!isSubRow(prevRow.original) && !prevRow.getIsExpanded());
-}
-
 export default Table;