@parca/profile 0.19.12 → 0.19.14

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}

package/src/ViewMatchers/index.tsx

@@ -19,7 +19,7 @@ import cx from 'classnames';
 import {QueryServiceClient} from '@parca/client';
 import {useGrpcMetadata} from '@parca/components';
 import {Query} from '@parca/parser';
-import {sanitizeLabelValue} from '@parca/utilities';
+import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
 
 import CustomSelect, {SelectItem} from '../SimpleMatchers/Select';
 
@@ -30,6 +30,8 @@ interface Props {
   currentQuery: Query;
   queryClient: QueryServiceClient;
   setMatchersString: (arg: string) => void;
+  start?: number;
+  end?: number;
 }
 
 const ViewMatchers: React.FC<Props> = ({
@@ -38,6 +40,8 @@ const ViewMatchers: React.FC<Props> = ({
   queryClient,
   runQuery,
   setMatchersString,
+  start,
+  end,
   currentQuery,
 }) => {
   const [labelValuesMap, setLabelValuesMap] = useState<Record<string, string[]>>({});
@@ -77,7 +81,17 @@ const ViewMatchers: React.FC<Props> = ({
     async (labelName: string): Promise<string[]> => {
       try {
         const response = await queryClient.values(
-          {labelName, match: [], profileType},
+          {
+            labelName,
+            match: [],
+            profileType,
+            ...(start !== undefined && end !== undefined
+              ? {
+                  start: millisToProtoTimestamp(start),
+                  end: millisToProtoTimestamp(end),
+                }
+              : {}),
+          },
           {meta: metadata}
         ).response;
         return sanitizeLabelValue(response.labelValues);
@@ -86,7 +100,7 @@ const ViewMatchers: React.FC<Props> = ({
         return [];
       }
     },
-    [queryClient, metadata, profileType]
+    [queryClient, metadata, profileType, start, end]
   );
 
   useEffect(() => {

package/src/contexts/MatchersInputLabelsContext.tsx

@@ -40,6 +40,8 @@ interface LabelsProviderProps {
   children: React.ReactNode;
   queryClient: QueryServiceClient;
   profileType: string;
+  start?: number;
+  end?: number;
 }
 
 // With there being the possibility of having utilization labels, we need to be able to determine whether the labels to be used are utilization labels or profiling data labels.
@@ -48,13 +50,17 @@ export function LabelsProvider({
   children,
   queryClient,
   profileType,
+  start,
+  end,
 }: LabelsProviderProps): JSX.Element {
   const [currentLabelName, setCurrentLabelName] = React.useState<string | null>(null);
   const utilizationLabels = useUtilizationLabels();
 
   const {result: labelNamesResponse, loading: isLabelNamesLoading} = useLabelNames(
     queryClient,
-    profileType
+    profileType,
+    start,
+    end
   );
 
   const labelNamesFromAPI = useMemo(() => {
@@ -68,7 +74,9 @@ export function LabelsProvider({
   const {result: labelValuesOriginal, loading: isLabelValuesLoading} = useLabelValues(
     queryClient,
     currentLabelName ?? '',
-    profileType
+    profileType,
+    start,
+    end
   );
 
   const utilizationLabelValues = useFetchUtilizationLabelValues(

package/src/contexts/SimpleMatchersLabelContext.tsx

@@ -38,6 +38,8 @@ interface LabelProviderProps {
   queryClient: QueryServiceClient;
   profileType: string;
   labelNameFromMatchers: string[];
+  start?: number;
+  end?: number;
 }
 
 // With there being the possibility of having utilization labels, we need to be able to determine whether the labels to be used are utilization labels or profiling data labels.
@@ -48,9 +50,11 @@ export function LabelProvider({
   queryClient,
   profileType,
   labelNameFromMatchers,
+  start,
+  end,
 }: LabelProviderProps): JSX.Element {
   const utilizationLabelResponse = useUtilizationLabels();
-  const {loading, result} = useLabelNames(queryClient, profileType);
+  const {loading, result} = useLabelNames(queryClient, profileType, start, end);
 
   const profileValues = useMemo(() => {
     const profileLabelNames =