@parca/profile 0.16.379 → 0.16.380

package/src/Table/index.tsx

@@ -13,7 +13,16 @@
 
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 
-import {Vector, tableFromIPC} from 'apache-arrow';
+import {flexRender} from '@tanstack/react-table';
+import {
+  createColumnHelper,
+  type CellContext,
+  type ColumnDef,
+  type ExpandedState,
+  type Row as RowType,
+} from '@tanstack/table-core';
+import {Int64, Vector, tableFromIPC, vectorFromArray} from 'apache-arrow';
+import cx from 'classnames';
 import {AnimatePresence, motion} from 'framer-motion';
 
 import {
@@ -23,6 +32,7 @@ import {
   useParcaContext,
   useURLState,
 } from '@parca/components';
+import {type RowRendererProps} from '@parca/components/dist/Table';
 import {ProfileType} from '@parca/parser';
 import {
   getLastItem,
@@ -35,6 +45,7 @@ import {
 import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import {hexifyAddress} from '../utils';
 import ColumnsVisibility from './ColumnsVisibility';
+import {getTopAndBottomExpandedRowModel} from './utils/topAndBottomExpandedRowModel';
 
 const FIELD_MAPPING_FILE = 'mapping_file';
 const FIELD_LOCATION_ADDRESS = 'location_address';
@@ -45,8 +56,11 @@ const FIELD_FLAT = 'flat';
 const FIELD_FLAT_DIFF = 'flat_diff';
 const FIELD_CUMULATIVE = 'cumulative';
 const FIELD_CUMULATIVE_DIFF = 'cumulative_diff';
+const FIELD_CALLERS = 'callers';
+const FIELD_CALLEES = 'callees';
 
-interface row {
+export interface DataRow {
+  id: number;
   name: string;
   flat: bigint;
   flatDiff: bigint;
@@ -55,19 +69,26 @@ interface row {
   mappingFile: string;
   functionSystemName: string;
   functionFileName: string;
+  callers?: DataRow[];
+  callees?: DataRow[];
+  subRows?: Row[];
+  isTopSubRow?: boolean;
+  isBottomSubRow?: boolean;
 }
 
-export interface ColumnDef {
-  id: string;
-  header: string;
-  accessorKey: string;
-  footer?: string;
-  cell?: (info: any) => string | number;
-  meta?: {align: 'right' | 'left'};
-  invertSorting?: boolean;
-  size?: number;
+interface DummyRow {
+  size: number;
+  message?: string;
+  isTopSubRow?: boolean;
+  isBottomSubRow?: boolean;
 }
 
+export type Row = DataRow | DummyRow;
+
+const isDummyRow = (row: Row): row is DummyRow => {
+  return 'size' in row;
+};
+
 interface TableProps {
   data?: Uint8Array;
   total: bigint;
@@ -80,6 +101,159 @@ interface TableProps {
   isHalfScreen: boolean;
 }
 
+const rowBgClassNames = (isExpanded: boolean, isSubRow: boolean): Record<string, boolean> => {
+  return {
+    '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 sizeToTopStyle = (size: number): Record<string, string> => {
+  return {
+    top: `${size * ROW_HEIGHT + 10}px`,
+  };
+};
+
+const getCallerLabelWidthStyle = (subRows: Row[]): Record<string, string> => {
+  let callerRows = subRows.filter(row => row.isTopSubRow).length;
+  if (callerRows < 3) {
+    callerRows = 3;
+  }
+
+  return sizeToWidthStyle(callerRows);
+};
+
+const getCalleeLabelWidthStyle = (subRows: Row[]): Record<string, string> => {
+  let calleeRows = subRows.filter(row => row.isBottomSubRow).length;
+  if (calleeRows < 3) {
+    calleeRows = 3;
+  }
+
+  return {...sizeToWidthStyle(calleeRows), ...sizeToTopStyle(calleeRows)};
+};
+
+const CustomRowRenderer = ({
+  row,
+  usePointerCursor,
+  onRowClick,
+  onRowDoubleClick,
+  enableHighlighting,
+  shouldHighlightRow,
+  rows,
+}: RowRendererProps<Row>): React.JSX.Element => {
+  const data = row.original;
+  const isExpanded = row.getIsExpanded();
+  const _isSubRow = isSubRow(data);
+  const bgClassNames = rowBgClassNames(isExpanded, _isSubRow);
+  if (isDummyRow(data)) {
+    return (
+      <tr key={row.id} className={cx(bgClassNames)}>
+        <td colSpan={100} className={`text-center`} style={sizeToHeightStyle(data.size)}>
+          {data.message}
+        </td>
+      </tr>
+    );
+  }
+
+  return (
+    <tr
+      key={row.id}
+      className={cx(
+        usePointerCursor === true ? 'cursor-pointer' : 'cursor-auto',
+        'relative',
+        bgClassNames,
+        {
+          'hover:bg-[#62626212] dark:hover:bg-[#ffffff12] ': !isExpanded && !_isSubRow,
+          'hover:bg-indigo-200 dark:hover:bg-indigo-500': isExpanded || _isSubRow,
+        }
+      )}
+      onClick={onRowClick != null ? () => onRowClick(row.original) : undefined}
+      onDoubleClick={onRowDoubleClick != null ? () => onRowDoubleClick(row, rows) : undefined}
+      style={
+        enableHighlighting !== true || shouldHighlightRow === undefined
+          ? undefined
+          : {opacity: shouldHighlightRow(row.original) ? 1 : 0.5}
+      }
+    >
+      {row.getVisibleCells().map((cell, idx) => {
+        return (
+          <td
+            key={cell.id}
+            className={cx('p-1.5 align-top', {
+              /* @ts-expect-error */
+              'text-right': cell.column.columnDef.meta?.align === 'right',
+              /* @ts-expect-error */
+              'text-left': cell.column.columnDef.meta?.align === 'left',
+            })}
+          >
+            {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 `}
+                  style={getCallerLabelWidthStyle(row.originalSubRows ?? [])}
+                >
+                  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 `}
+                  style={getCalleeLabelWidthStyle(row.originalSubRows ?? [])}
+                >
+                  {'<-'} Callees
+                </div>
+              </>
+            ) : null}
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </td>
+        );
+      })}
+    </tr>
+  );
+};
+
+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 Table = React.memo(function Table({
   data,
   total,
@@ -95,6 +269,8 @@ export const Table = React.memo(function Table({
   const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
   const [filterByFunctionInput] = useURLState({param: 'filter_by_function'});
   const {isDarkMode} = useParcaContext();
+  const [expanded, setExpanded] = useState<ExpandedState>({});
+  const [scrollToIndex, setScrollToIndex] = useState<number | undefined>(undefined);
 
   const {compareMode} = useProfileViewContext();
 
@@ -122,119 +298,154 @@ export const Table = React.memo(function Table({
     return `${percentageString(value, total)} / ${percentageString(value, filtered)}`;
   };
 
-  const columns = useMemo<ColumnDef[]>(() => {
+  const columnHelper = createColumnHelper<Row>();
+
+  const columns = useMemo<Array<ColumnDef<Row>>>(() => {
     return [
-      {
+      columnHelper.accessor('flat', {
         id: 'flat',
-        accessorKey: 'flat',
         header: 'Flat',
-        cell: info => valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2),
+        cell: info =>
+          valueFormatter(
+            (info as CellContext<DataRow, bigint>).getValue(),
+            profileType?.sampleUnit ?? '',
+            2
+          ),
         size: 80,
         meta: {
           align: 'right',
         },
         invertSorting: true,
-      },
-      {
+      }),
+      columnHelper.accessor('flat', {
         id: 'flatPercentage',
-        accessorKey: 'flat',
         header: 'Flat (%)',
-        cell: info => ratioString(info.getValue()),
+        cell: info => {
+          if (isDummyRow(info.row.original)) {
+            return '';
+          }
+          return ratioString((info as CellContext<DataRow, bigint>).getValue());
+        },
         size: 120,
         meta: {
           align: 'right',
         },
         invertSorting: true,
-      },
-      {
+      }),
+      columnHelper.accessor('flatDiff', {
         id: 'flatDiff',
-        accessorKey: 'flatDiff',
         header: 'Flat Diff',
         cell: info =>
-          addPlusSign(valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2)),
+          addPlusSign(
+            valueFormatter(
+              (info as CellContext<DataRow, bigint>).getValue(),
+              profileType?.sampleUnit ?? '',
+              2
+            )
+          ),
         size: 120,
         meta: {
           align: 'right',
         },
         invertSorting: true,
-      },
-      {
+      }),
+      columnHelper.accessor('flatDiff', {
         id: 'flatDiffPercentage',
-        accessorKey: 'flatDiff',
         header: 'Flat Diff (%)',
-        cell: info => ratioString(info.getValue()),
+        cell: info => {
+          if (isDummyRow(info.row.original)) {
+            return '';
+          }
+          return ratioString((info as CellContext<DataRow, bigint>).getValue());
+        },
         size: 120,
         meta: {
           align: 'right',
         },
         invertSorting: true,
-      },
-      {
+      }),
+      columnHelper.accessor('cumulative', {
         id: 'cumulative',
-        accessorKey: 'cumulative',
         header: 'Cumulative',
-        cell: info => valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2),
+        cell: info =>
+          valueFormatter(
+            (info as CellContext<DataRow, bigint>).getValue(),
+            profileType?.sampleUnit ?? '',
+            2
+          ),
         size: 150,
         meta: {
           align: 'right',
         },
         invertSorting: true,
-      },
-      {
+      }),
+      columnHelper.accessor('cumulative', {
         id: 'cumulativePercentage',
-        accessorKey: 'cumulative',
         header: 'Cumulative (%)',
-        cell: info => ratioString(info.getValue()),
+        cell: info => {
+          if (isDummyRow(info.row.original)) {
+            return '';
+          }
+          return ratioString((info as CellContext<DataRow, bigint>).getValue());
+        },
         size: 150,
         meta: {
           align: 'right',
         },
         invertSorting: true,
-      },
-      {
+      }),
+      columnHelper.accessor('cumulativeDiff', {
         id: 'cumulativeDiff',
-        accessorKey: 'cumulativeDiff',
         header: 'Cumulative Diff',
         cell: info =>
-          addPlusSign(valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2)),
+          addPlusSign(
+            valueFormatter(
+              (info as CellContext<DataRow, bigint>).getValue(),
+              profileType?.sampleUnit ?? '',
+              2
+            )
+          ),
         size: 170,
         meta: {
           align: 'right',
         },
         invertSorting: true,
-      },
-      {
+      }),
+      columnHelper.accessor('cumulativeDiff', {
         id: 'cumulativeDiffPercentage',
-        accessorKey: 'cumulativeDiff',
         header: 'Cumulative Diff (%)',
-        cell: info => ratioString(info.getValue()),
+        cell: info => {
+          if (isDummyRow(info.row.original)) {
+            return '';
+          }
+          return ratioString((info as CellContext<DataRow, bigint>).getValue());
+        },
         size: 170,
         meta: {
           align: 'right',
         },
         invertSorting: true,
-      },
-      {
+      }),
+      columnHelper.accessor('name', {
         id: 'name',
-        accessorKey: 'name',
         header: 'Name',
         cell: info => info.getValue(),
-      },
-      {
+      }),
+      columnHelper.accessor('functionSystemName', {
         id: 'functionSystemName',
-        accessorKey: 'functionSystemName',
         header: 'Function System Name',
-      },
-      {
+        cell: info => info.getValue(),
+      }),
+      columnHelper.accessor('functionFileName', {
         id: 'functionFileName',
-        accessorKey: 'functionFileName',
         header: 'Function File Name',
-      },
-      {
+        cell: info => info.getValue(),
+      }),
+      columnHelper.accessor('mappingFile', {
         id: 'mappingFile',
-        accessorKey: 'mappingFile',
         header: 'Mapping File',
-      },
+        cell: info => info.getValue(),
+      }),
     ];
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [profileType]);
@@ -273,7 +484,11 @@ export const Table = React.memo(function Table({
   );
 
   const onRowClick = useCallback(
-    (row: row) => {
+    (row: Row) => {
+      if (isDummyRow(row)) {
+        return;
+      }
+
       // If there is only one dashboard item, we don't want to select a span
       if (dashboardItems.length <= 1) {
         return;
@@ -283,8 +498,43 @@ 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;
+      }
+      return r.original.name === parent.original.name;
+    });
+    if (parentRow == null || newRow == null) {
+      return;
+    }
+
+    newRow.toggleExpanded();
+
+    setScrollToIndex(getScrollTargetIndex(rows, parentRow, newRow));
+  }, []);
+
   const shouldHighlightRow = useCallback(
-    (row: row) => {
+    (row: Row) => {
+      if (!('name' in row)) {
+        return false;
+      }
       const name = row.name;
       return isSearchMatch(currentSearchString as string, name);
     },
@@ -350,48 +600,86 @@ export const Table = React.memo(function Table({
     ];
   }, [compareMode]);
 
-  if (loading)
+  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 [];
+    }
+
+    const flatColumn = table.getChild(FIELD_FLAT);
+    const flatDiffColumn = table.getChild(FIELD_FLAT_DIFF);
+    const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+    const cumulativeDiffColumn = table.getChild(FIELD_CUMULATIVE_DIFF);
+    const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
+    const functionSystemNameColumn = table.getChild(FIELD_FUNCTION_SYSTEM_NAME);
+    const functionFileNameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
+    const mappingFileColumn = table.getChild(FIELD_MAPPING_FILE);
+    const locationAddressColumn = table.getChild(FIELD_LOCATION_ADDRESS);
+    const callersColumn = table.getChild(FIELD_CALLERS);
+    const calleesColumn = table.getChild(FIELD_CALLEES);
+
+    const getRow = (i: number): DataRow => {
+      const flat: bigint = flatColumn?.get(i) ?? 0n;
+      const flatDiff: bigint = flatDiffColumn?.get(i) ?? 0n;
+      const cumulative: bigint = cumulativeColumn?.get(i) ?? 0n;
+      const cumulativeDiff: bigint = cumulativeDiffColumn?.get(i) ?? 0n;
+      const functionSystemName: string = functionSystemNameColumn?.get(i) ?? '';
+      const functionFileName: string = functionFileNameColumn?.get(i) ?? '';
+      const mappingFile: string = mappingFileColumn?.get(i) ?? '';
+
+      return {
+        id: i,
+        name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
+        flat,
+        flatDiff,
+        cumulative,
+        cumulativeDiff,
+        functionSystemName,
+        functionFileName,
+        mappingFile,
+      };
+    };
+
+    const rows: DataRow[] = [];
+    for (let i = 0; i < table.numRows; i++) {
+      const row = getRow(i);
+      const callerIndices: Vector<Int64> = callersColumn?.get(i) ?? vectorFromArray([]);
+      const callers: DataRow[] = Array.from(callerIndices.toArray().values()).map(rowIdx => {
+        return getRow(Number(rowIdx));
+      });
+
+      const calleeIndices: Vector<Int64> = calleesColumn?.get(i) ?? vectorFromArray([]);
+      const callees: DataRow[] = Array.from(calleeIndices.toArray().values()).map(rowIdx => {
+        return getRow(Number(rowIdx));
+      });
+
+      row.callers = callers;
+      row.callees = callees;
+      row.subRows = [...getCallerRows(callers), ...getCalleeRows(callees)];
+
+      rows.push(row);
+    }
+
+    return rows;
+  }, [table]);
+
+  if (loading) {
     return (
       <div className="overflow-clip h-[700px] min-h-[700px]">
         <TableSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
       </div>
     );
+  }
 
-  if (data === undefined) return <div className="mx-auto text-center">Profile has no samples</div>;
-
-  const table = tableFromIPC(data);
-  if (table.numRows === 0) return <div className="mx-auto text-center">Profile has no samples</div>;
-
-  const flatColumn = table.getChild(FIELD_FLAT);
-  const flatDiffColumn = table.getChild(FIELD_FLAT_DIFF);
-  const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
-  const cumulativeDiffColumn = table.getChild(FIELD_CUMULATIVE_DIFF);
-  const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
-  const functionSystemNameColumn = table.getChild(FIELD_FUNCTION_SYSTEM_NAME);
-  const functionFileNameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
-  const mappingFileColumn = table.getChild(FIELD_MAPPING_FILE);
-  const locationAddressColumn = table.getChild(FIELD_LOCATION_ADDRESS);
-
-  const rows: row[] = [];
-  // TODO: Figure out how to only read the data of the columns we need for the virtualized table
-  for (let i = 0; i < table.numRows; i++) {
-    const flat: bigint = flatColumn?.get(i) ?? 0n;
-    const flatDiff: bigint = flatDiffColumn?.get(i) ?? 0n;
-    const cumulative: bigint = cumulativeColumn?.get(i) ?? 0n;
-    const cumulativeDiff: bigint = cumulativeDiffColumn?.get(i) ?? 0n;
-    const functionSystemName: string = functionSystemNameColumn?.get(i) ?? '';
-    const functionFileName: string = functionFileNameColumn?.get(i) ?? '';
-    const mappingFile: string = mappingFileColumn?.get(i) ?? '';
-    rows.push({
-      name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
-      flat,
-      flatDiff,
-      cumulative,
-      cumulativeDiff,
-      functionSystemName,
-      functionFileName,
-      mappingFile,
-    });
+  if (rows.length === 0) {
+    return <div className="mx-auto text-center">Profile has no samples</div>;
   }
 
   return (
@@ -414,6 +702,22 @@ export const Table = React.memo(function Table({
               enableHighlighting={enableHighlighting}
               shouldHighlightRow={shouldHighlightRow}
               usePointerCursor={dashboardItems.length > 1}
+              onRowDoubleClick={onRowDoubleClick}
+              getSubRows={row => (isDummyRow(row) ? [] : row.subRows ?? [])}
+              getCustomExpandedRowModel={getTopAndBottomExpandedRowModel}
+              expandedState={expanded}
+              onExpandedChange={getNewState => {
+                // We only want the new expanded row so passing the exisitng state as empty
+                // @ts-expect-error
+                let newState = getNewState({});
+                if (Object.keys(newState)[0] === Object.keys(expanded)[0]) {
+                  newState = {};
+                }
+                setExpanded(newState);
+              }}
+              CustomRowRenderer={CustomRowRenderer}
+              scrollToIndex={scrollToIndex}
+              estimatedRowHeight={ROW_HEIGHT}
             />
           </div>
         </div>
@@ -457,4 +761,38 @@ export const RowName = (
   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;
+}
+
 export default Table;