@parca/profile 0.19.11 → 0.19.13

package/src/Sandwich/index.tsx

@@ -11,32 +11,28 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 
 import {type Row as TableRow} from '@tanstack/table-core';
 import {tableFromIPC} from 'apache-arrow';
 import {AnimatePresence, motion} from 'framer-motion';
 
 import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
-import {TableSkeleton, useParcaContext, useURLState} from '@parca/components';
+import {useParcaContext, useURLState} from '@parca/components';
 import {useCurrentColorProfile} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
-import {isSearchMatch} from '@parca/utilities';
 
 import useMappingList, {
   useFilenamesList,
 } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
 import {ProfileSource} from '../ProfileSource';
-import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
+import {useDashboard} from '../ProfileView/context/DashboardContext';
 import {useVisualizationState} from '../ProfileView/hooks/useVisualizationState';
 import {FIELD_FUNCTION_NAME, Row} from '../Table';
 import {useColorManagement} from '../Table/hooks/useColorManagement';
-import {useTableConfiguration} from '../Table/hooks/useTableConfiguration';
-import {type DataRow} from '../Table/utils/functions';
 import {useQuery} from '../useQuery';
 import {CalleesSection} from './components/CalleesSection';
 import {CallersSection} from './components/CallersSection';
-import {TableSection} from './components/TableSection';
 import {processRowData} from './utils/processRowData';
 
 interface Props {
@@ -45,7 +41,6 @@ interface Props {
   filtered: bigint;
   profileType?: ProfileType;
   loading: boolean;
-  isHalfScreen: boolean;
   unit?: string;
   metadataMappingFiles?: string[];
   queryClient?: QueryServiceClient;
@@ -54,30 +49,26 @@ interface Props {
 
 const Sandwich = React.memo(function Sandwich({
   data,
-  total,
   filtered,
   profileType,
   loading,
-  isHalfScreen,
   unit,
   metadataMappingFiles,
   queryClient,
   profileSource,
 }: Props): React.JSX.Element {
   const currentColorProfile = useCurrentColorProfile();
+  const {dashboardItems} = useDashboard();
+  const [sandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
 
-  const [sandwichFunctionName, setSandwichFunctionName] = useURLState<string | undefined>(
-    'sandwich_function_name'
-  );
   const {isDarkMode} = useParcaContext();
   const [selectedRow, setSelectedRow] = useState<TableRow<Row> | null>(null);
   const callersRef = React.useRef<HTMLDivElement | null>(null);
   const calleesRef = React.useRef<HTMLDivElement | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const defaultMaxFrames = 10;
 
   const callersCalleesContainerRef = useRef<HTMLDivElement | null>(null);
-  const [tableHeight, setTableHeight] = useState<number | undefined>(undefined);
-
-  const {compareMode} = useProfileViewContext();
 
   const {colorBy, setColorBy, curPathArrow, setCurPathArrow} = useVisualizationState();
 
@@ -160,15 +151,6 @@ const Sandwich = React.memo(function Sandwich({
 
   unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
 
-  const tableConfig = useTableConfiguration({
-    unit,
-    total,
-    filtered,
-    compareMode,
-  });
-
-  const {columns, initialSorting, columnVisibility} = tableConfig;
-
   const rows = useMemo(() => {
     if (table == null || table.numRows === 0) {
       return [];
@@ -194,71 +176,6 @@ const Sandwich = React.memo(function Sandwich({
     }
   }, [sandwichFunctionName, rows, selectedRow]);
 
-  // Update table height based on callers/callees container height
-  useEffect(() => {
-    const updateTableHeight = (): void => {
-      if (callersCalleesContainerRef.current != null) {
-        const containerHeight = callersCalleesContainerRef.current.getBoundingClientRect().height;
-        setTableHeight(containerHeight);
-      }
-    };
-
-    // Initial measurement
-    updateTableHeight();
-
-    // Update on window resize
-    window.addEventListener('resize', updateTableHeight);
-
-    // Use ResizeObserver if available for more accurate updates
-    let resizeObserver: ResizeObserver | null = null;
-    if (callersCalleesContainerRef.current != null && 'ResizeObserver' in window) {
-      resizeObserver = new ResizeObserver(updateTableHeight);
-      resizeObserver.observe(callersCalleesContainerRef.current);
-    }
-
-    return () => {
-      window.removeEventListener('resize', updateTableHeight);
-      if (resizeObserver != null) {
-        resizeObserver.disconnect();
-      }
-    };
-  }, [sandwichFunctionName, callersFlamegraphResponse, calleesFlamegraphResponse]);
-
-  const onRowClick = useCallback(
-    (row: DataRow) => {
-      setSelectedRow(row as unknown as TableRow<Row>);
-      setSandwichFunctionName(row.name.trim());
-    },
-    [setSandwichFunctionName]
-  );
-
-  const enableHighlighting = useMemo(() => {
-    return sandwichFunctionName != null && sandwichFunctionName?.length > 0;
-  }, [sandwichFunctionName]);
-
-  const shouldHighlightRow = useCallback(
-    (row: Row) => {
-      if (!('name' in row)) {
-        return false;
-      }
-      const name = row.name;
-      return isSearchMatch(sandwichFunctionName as string, name);
-    },
-    [sandwichFunctionName]
-  );
-
-  if (loading) {
-    return (
-      <div className="overflow-clip h-[700px] min-h-[700px]">
-        <TableSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
-      </div>
-    );
-  }
-
-  if (rows.length === 0) {
-    return <div className="mx-auto text-center">Profile has no samples</div>;
-  }
-
   return (
     <section className="flex flex-row h-full w-full">
       <AnimatePresence>
@@ -270,24 +187,10 @@ const Sandwich = React.memo(function Sandwich({
           transition={{duration: 0.5}}
         >
           <div className="relative flex flex-row">
-            <TableSection
-              rows={rows}
-              columns={columns}
-              initialSorting={initialSorting}
-              columnVisibility={columnVisibility}
-              selectedRow={selectedRow}
-              onRowClick={onRowClick}
-              shouldHighlightRow={shouldHighlightRow}
-              enableHighlighting={enableHighlighting}
-              height={tableHeight}
-              sandwichFunctionName={sandwichFunctionName}
-            />
-
-            {sandwichFunctionName !== undefined && (
-              <div className="w-[50%] flex flex-col" ref={callersCalleesContainerRef}>
+            {sandwichFunctionName !== undefined ? (
+              <div className="w-full flex flex-col" ref={callersCalleesContainerRef}>
                 <CallersSection
                   callersRef={callersRef}
-                  isHalfScreen={isHalfScreen}
                   callersFlamegraphResponse={
                     callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
                       ? {
@@ -306,11 +209,13 @@ const Sandwich = React.memo(function Sandwich({
                   curPathArrow={curPathArrow}
                   setCurPathArrow={setCurPathArrow}
                   metadataMappingFiles={metadataMappingFiles}
+                  isExpanded={isExpanded}
+                  setIsExpanded={setIsExpanded}
+                  defaultMaxFrames={defaultMaxFrames}
                 />
                 <div className="h-4" />
                 <CalleesSection
                   calleesRef={calleesRef}
-                  isHalfScreen={isHalfScreen}
                   calleesFlamegraphResponse={
                     calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
                       ? {
@@ -331,6 +236,14 @@ const Sandwich = React.memo(function Sandwich({
                   metadataMappingFiles={metadataMappingFiles}
                 />
               </div>
+            ) : (
+              <div className="items-center justify-center flex h-full w-full">
+                <p className="text-sm">
+                  {dashboardItems.includes('table')
+                    ? 'Please select a function to view its callers and callees.'
+                    : 'Use the right-click menu on the flame graph to choose a function to view its callers and callees.'}
+                </p>
+              </div>
             )}
           </div>
         </motion.div>

package/src/Table/MoreDropdown.tsx

@@ -18,7 +18,6 @@ import {useParcaContext, useURLState} from '@parca/components';
 
 const MoreDropdown = ({functionName}: {functionName: string}): React.JSX.Element | null => {
   const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
     alwaysReturnArray: true,
   });
@@ -26,7 +25,7 @@ const MoreDropdown = ({functionName}: {functionName: string}): React.JSX.Element
 
   const onSandwichViewSelect = (): void => {
     setSandwichFunctionName(functionName.trim());
-    setDashboardItems(['sandwich']);
+    setDashboardItems([...dashboardItems, 'sandwich']);
   };
 
   const menuItems: Array<{label: string; action: () => void}> = [];

package/src/Table/TableContextMenu.tsx

@@ -0,0 +1,70 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Icon} from '@iconify/react';
+import cx from 'classnames';
+import {Item, Menu} from 'react-contexify';
+
+import 'react-contexify/dist/ReactContexify.css';
+
+import {useParcaContext, useURLState} from '@parca/components';
+
+import {type Row} from '.';
+
+interface TableContextMenuProps {
+  menuId: string;
+  row: Row | null;
+}
+
+const TableContextMenu = ({menuId, row}: TableContextMenuProps): React.JSX.Element => {
+  const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
+  const {enableSandwichView, isDarkMode} = useParcaContext();
+
+  const onSandwichViewSelect = (): void => {
+    if (row?.name != null && row.name.length > 0) {
+      setSandwichFunctionName(row.name.trim());
+      if (!dashboardItems.includes('sandwich')) {
+        setDashboardItems([...dashboardItems, 'sandwich']);
+      }
+    }
+  };
+
+  const isMenuDisabled = row === null || enableSandwichView !== true;
+
+  return (
+    <Menu
+      id={menuId}
+      theme={isDarkMode ? 'dark' : ''}
+      className={cx(
+        dashboardItems.includes('sandwich') ? 'min-w-[350px] w-[350px]' : 'min-w-[260px] w-[260px]'
+      )}
+    >
+      <Item id="sandwich-view" onClick={onSandwichViewSelect} disabled={isMenuDisabled}>
+        <div className="flex w-full items-center gap-2">
+          <Icon icon="tdesign:sandwich-filled" />
+          <div className="relative">
+            {dashboardItems.includes('sandwich')
+              ? 'Focus sandwich on this frame.'
+              : 'Show in sandwich'}
+            <span className="absolute top-[-2px] text-xs lowercase text-red-500">&nbsp;alpha</span>
+          </div>
+        </div>
+      </Item>
+    </Menu>
+  );
+};
+
+export default TableContextMenu;

package/src/Table/TableContextMenuWrapper.tsx

@@ -0,0 +1,48 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {forwardRef, useImperativeHandle, useState} from 'react';
+
+import {type Row} from '.';
+import TableContextMenu from './TableContextMenu';
+
+interface TableContextMenuWrapperProps {
+  menuId: string;
+}
+
+export interface TableContextMenuWrapperRef {
+  setRow: (row: Row | null, callback?: () => void) => void;
+}
+
+const TableContextMenuWrapper = forwardRef<
+  TableContextMenuWrapperRef,
+  TableContextMenuWrapperProps
+>(({menuId}, ref) => {
+  const [row, setRow] = useState<Row | null>(null);
+
+  useImperativeHandle(ref, () => ({
+    setRow: (newRow: Row | null, callback?: () => void) => {
+      setRow(newRow);
+      // Execute callback after state update using requestAnimationFrame
+      if (callback != null) {
+        requestAnimationFrame(callback);
+      }
+    },
+  }));
+
+  return <TableContextMenu menuId={menuId} row={row} />;
+});
+
+TableContextMenuWrapper.displayName = 'TableContextMenuWrapper';
+
+export default TableContextMenuWrapper;

package/src/Table/hooks/useTableConfiguration.tsx

@@ -15,12 +15,11 @@ import {useEffect, useMemo, useState} from 'react';
 
 import {createColumnHelper, type ColumnDef} from '@tanstack/table-core';
 
-import {useParcaContext, useURLState} from '@parca/components';
+import {useURLState} from '@parca/components';
 import {valueFormatter} from '@parca/utilities';
 
 import {type Row} from '..';
 import {ColorCell} from '../ColorCell';
-import MoreDropdown from '../MoreDropdown';
 import {addPlusSign, ratioString, type ColumnName} from '../utils/functions';
 
 interface UseTableConfigurationProps {
@@ -47,10 +46,6 @@ export function useTableConfiguration({
   const [tableColumns] = useURLState<string[]>('table_columns', {
     alwaysReturnArray: true,
   });
-  const [dashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
-  const {enableSandwichView} = useParcaContext();
 
   const [columnVisibility, setColumnVisibility] = useState(() => {
     return {
@@ -204,26 +199,8 @@ export function useTableConfiguration({
       }),
     ];
 
-    if (
-      dashboardItems.length === 1 &&
-      dashboardItems[0] === 'table' &&
-      enableSandwichView === true
-    ) {
-      baseColumns.unshift(
-        columnHelper.accessor('moreActions', {
-          id: 'moreActions',
-          header: '',
-          cell: info => {
-            return <MoreDropdown functionName={info.row.original.name} />;
-          },
-          size: 10,
-          enableSorting: false,
-        })
-      );
-    }
-
     return baseColumns;
-  }, [unit, total, filtered, columnHelper, dashboardItems, enableSandwichView]);
+  }, [unit, total, filtered, columnHelper]);
 
   const initialSorting = useMemo(() => {
     return [

package/src/Table/index.tsx

@@ -11,10 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 import {tableFromIPC} from 'apache-arrow';
 import {AnimatePresence, motion} from 'framer-motion';
+import {useContextMenu} from 'react-contexify';
 
 import {
   Table as TableComponent,
@@ -30,6 +31,7 @@ import useMappingList, {
   useFilenamesList,
 } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
+import TableContextMenuWrapper, {TableContextMenuWrapperRef} from './TableContextMenuWrapper';
 import {useColorManagement} from './hooks/useColorManagement';
 import {useTableConfiguration} from './hooks/useTableConfiguration';
 import {DataRow, ROW_HEIGHT, RowName, getRowColor} from './utils/functions';
@@ -78,13 +80,19 @@ export const Table = React.memo(function Table({
   const [dashboardItems] = useURLState<string[]>('dashboard_items', {
     alwaysReturnArray: true,
   });
-
+  const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
   const [colorBy, setColorBy] = useURLState('color_by');
   const {isDarkMode} = useParcaContext();
   const [scrollToIndex, setScrollToIndex] = useState<number | undefined>(undefined);
 
   const {compareMode} = useProfileViewContext();
 
+  const MENU_ID = 'table-context-menu';
+  const contextMenuRef = useRef<TableContextMenuWrapperRef>(null);
+  const {show} = useContextMenu({
+    id: MENU_ID,
+  });
+
   const table = useMemo(() => {
     if (loading || data == null) {
       return null;
@@ -130,9 +138,13 @@ export const Table = React.memo(function Table({
 
   const selectSpan = useCallback(
     (span: string): void => {
-      setSearchString(span.trim());
+      if (dashboardItems.includes('icicle')) {
+        setSearchString(span.trim());
+      } else {
+        setSandwichFunctionName(span.trim());
+      }
     },
-    [setSearchString]
+    [setSearchString, setSandwichFunctionName, dashboardItems]
   );
 
   const onRowClick = useCallback(
@@ -213,6 +225,72 @@ export const Table = React.memo(function Table({
     return rows;
   }, [table, colorByColors, colorBy]);
 
+  const handleTableContextMenu = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+
+      // Find the closest table row element
+      const target = e.target as Element;
+      const rowElement = target.closest('tr');
+
+      if (rowElement !== null) {
+        // Look for a data attribute that might contain the actual row ID
+        const rowId = rowElement.getAttribute('data-row-id') ?? rowElement.getAttribute('data-id');
+
+        if (rowId != null && rowId.length > 0) {
+          // Find the row by ID
+          const actualRowIndex = parseInt(rowId, 10);
+
+          if (actualRowIndex >= 0 && actualRowIndex < rows.length) {
+            const row = rows[actualRowIndex];
+
+            contextMenuRef.current?.setRow(row, () => {
+              show({
+                event: e,
+              });
+            });
+            return;
+          }
+        }
+
+        // Fallback: try to find row by matching text content
+        const nameCell = rowElement.querySelector('td:last-child'); // Name is usually the last column
+        if (nameCell !== null) {
+          const cellText = nameCell.textContent?.trim();
+
+          if (cellText != null && cellText.length > 0) {
+            // First try exact match
+            let matchingRow = rows.find(row => row.name === cellText);
+
+            // If no exact match, try partial match (in case of truncation)
+            if (matchingRow == null) {
+              matchingRow = rows.find(
+                row => row.name.includes(cellText) || cellText.includes(row.name)
+              );
+            }
+
+            // If still no match, try matching the end of the name (for cases like package.function)
+            if (matchingRow == null) {
+              matchingRow = rows.find(
+                row =>
+                  row.name.endsWith(cellText) || cellText.endsWith(row.name.split('.').pop() ?? '')
+              );
+            }
+
+            if (matchingRow != null) {
+              contextMenuRef.current?.setRow(matchingRow, () => {
+                show({
+                  event: e,
+                });
+              });
+            }
+          }
+        }
+      }
+    },
+    [rows, show]
+  );
+
   useEffect(() => {
     setTimeout(() => {
       if (currentSearchString == null || rows.length === 0) return;
@@ -249,7 +327,8 @@ export const Table = React.memo(function Table({
         transition={{duration: 0.5}}
       >
         <div className="relative">
-          <div className="font-robotoMono h-[80vh] w-full">
+          <TableContextMenuWrapper ref={contextMenuRef} menuId={MENU_ID} />
+          <div className="font-robotoMono h-[80vh] w-full" onContextMenu={handleTableContextMenu}>
             <TableComponent
               data={rows}
               columns={columns}