@parca/profile 0.19.23 → 0.19.25

package/src/ProfileView/components/DashboardItems/index.tsx

@@ -24,6 +24,7 @@ import {SourceView} from '../../../SourceView';
 import {Table} from '../../../Table';
 import type {
   FlamegraphData,
+  SandwichData,
   SourceData,
   TopTableData,
   VisualizationType,
@@ -36,6 +37,7 @@ interface GetDashboardItemProps {
   flamegraphData: FlamegraphData;
   flamechartData: FlamegraphData;
   topTableData?: TopTableData;
+  sandwichData: SandwichData;
   sourceData?: SourceData;
   profileSource: ProfileSource;
   total: bigint;
@@ -58,13 +60,13 @@ export const getDashboardItem = ({
   flamechartData,
   topTableData,
   sourceData,
+  sandwichData,
   profileSource,
   total,
   filtered,
   curPathArrow,
   setNewCurPathArrow,
   perf,
-  queryClient,
 }: GetDashboardItemProps): JSX.Element => {
   switch (type) {
     case 'flamegraph':
@@ -142,17 +144,7 @@ export const getDashboardItem = ({
       );
     case 'sandwich':
       return topTableData != null ? (
-        <Sandwich
-          total={total}
-          filtered={filtered}
-          loading={topTableData.loading}
-          data={topTableData.arrow?.record}
-          unit={topTableData.unit}
-          profileType={profileSource?.ProfileType()}
-          metadataMappingFiles={flamegraphData.metadataMappingFiles}
-          profileSource={profileSource}
-          queryClient={queryClient}
-        />
+        <Sandwich profileSource={profileSource} sandwichData={sandwichData} />
       ) : (
         <></>
       );

package/src/ProfileView/components/ProfileFilters/filterPresets.ts

@@ -0,0 +1,76 @@
+// 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 type {ProfileFilter} from '@parca/store';
+
+export interface FilterPreset {
+  key: string;
+  name: string;
+  description: string;
+  filters: Array<Omit<ProfileFilter, 'id'>>;
+}
+
+export const filterPresets: FilterPreset[] = [
+  {
+    key: 'go_runtime_expected_off_cpu',
+    name: 'Go Runtime Expected Off-CPU',
+    description: 'Excludes expected Go runtime blocking functions',
+    filters: [
+      {
+        type: 'stack',
+        field: 'function_name',
+        matchType: 'not_equal',
+        value: 'runtime.usleep',
+      },
+      {
+        type: 'stack',
+        field: 'function_name',
+        matchType: 'not_equal',
+        value: 'runtime.futex',
+      },
+    ],
+  },
+  {
+    key: 'rust_runtime_expected_off_cpu',
+    name: 'Rust Expected Off-CPU',
+    description: 'Excludes expected Rust runtime blocking functions',
+    filters: [
+      {
+        type: 'stack',
+        field: 'function_name',
+        matchType: 'not_equal',
+        value: 'parking_lot_core::thread_parker::imp::ThreadParker::futex_wait',
+      },
+      {
+        type: 'stack',
+        field: 'function_name',
+        matchType: 'not_equal',
+        value: 'tokio::runtime::time::Driver::park_internal',
+      },
+      {
+        type: 'stack',
+        field: 'function_name',
+        matchType: 'not_equal',
+        value: 'futex_wait',
+      },
+    ],
+  },
+];
+
+export const isPresetKey = (key: string): boolean => {
+  return filterPresets.some(preset => preset.key === key);
+};
+
+export const getPresetByKey = (key: string): FilterPreset | undefined => {
+  return filterPresets.find(preset => preset.key === key);
+};

package/src/ProfileView/components/ProfileFilters/index.tsx

@@ -18,9 +18,15 @@ import cx from 'classnames';
 
 import {Button, Input, Select, type SelectItem} from '@parca/components';
 
+import {filterPresets, getPresetByKey, isPresetKey} from './filterPresets';
 import {useProfileFilters, type ProfileFilter} from './useProfileFilters';
 
 export const isFilterComplete = (filter: ProfileFilter): boolean => {
+  // For preset filters, only need type and value
+  if (filter.type != null && isPresetKey(filter.type)) {
+    return filter.value !== '' && filter.type != null;
+  }
+  // For regular filters, need all fields
   return (
     filter.value !== '' && filter.type != null && filter.field != null && filter.matchType != null
   );
@@ -53,6 +59,19 @@ const filterTypeItems: SelectItem[] = [
       ),
     },
   },
+  ...filterPresets.map(preset => ({
+    key: preset.key,
+    element: {
+      active: <>{preset.name}</>,
+      expanded: (
+        <>
+          <span>{preset.name}</span>
+          <br />
+          <span className="text-xs">{preset.description}</span>
+        </>
+      ),
+    },
+  })),
 ];
 
 const fieldItems: SelectItem[] = [
@@ -181,6 +200,7 @@ const ProfileFilters = (): JSX.Element => {
         {filtersToRender.map(filter => {
           const isNumberField = filter.field === 'address' || filter.field === 'line_number';
           const matchTypeItems = isNumberField ? numberMatchTypeItems : stringMatchTypeItems;
+          const isPresetFilter = filter.type != null && isPresetKey(filter.type);
 
           return (
             <div key={filter.id} className="flex items-center gap-0">
@@ -189,20 +209,45 @@ const ProfileFilters = (): JSX.Element => {
                 selectedKey={filter.type}
                 placeholder="Select Filter"
                 onSelection={key => {
-                  const newType = key as 'stack' | 'frame';
-                  updateFilter(filter.id, {
-                    type: newType,
-                    field: filter.field ?? 'function_name',
-                    matchType: filter.matchType ?? 'contains',
-                  });
+                  // Check if this is a preset selection
+                  if (isPresetKey(key)) {
+                    const preset = getPresetByKey(key);
+                    if (preset != null) {
+                      updateFilter(filter.id, {
+                        type: preset.key,
+                        field: undefined,
+                        matchType: undefined,
+                        value: preset.name,
+                      });
+                    }
+                  } else {
+                    const newType = key as 'stack' | 'frame';
+
+                    // Check if we're converting a preset filter to a regular filter
+                    if (filter.type != null && isPresetKey(filter.type)) {
+                      updateFilter(filter.id, {
+                        type: newType,
+                        field: 'function_name',
+                        matchType: 'contains',
+                        value: '',
+                      });
+                    } else {
+                      updateFilter(filter.id, {
+                        type: newType,
+                        field: filter.field ?? 'function_name',
+                        matchType: filter.matchType ?? 'contains',
+                      });
+                    }
+                  }
                 }}
                 className={cx(
-                  'rounded-l-md pr-1 gap-0 focus:z-50 focus:relative focus:outline-1 rounded-r-none ',
-                  filter.type != null ? 'border-r-0 w-28' : 'w-32'
+                  'rounded-l-md pr-1 gap-0 focus:z-50 focus:relative focus:outline-1',
+                  isPresetFilter ? 'rounded-r-none border-r-0' : 'rounded-r-none',
+                  filter.type != null ? 'border-r-0 w-auto' : 'w-32'
                 )}
               />
 
-              {filter.type != null && (
+              {filter.type != null && !isPresetFilter && (
                 <>
                   <Select
                     items={fieldItems}
@@ -247,9 +292,16 @@ const ProfileFilters = (): JSX.Element => {
               <Button
                 variant="neutral"
                 onClick={() => {
-                  if (localFilters.length === 1) {
+                  // If we're displaying local filters and this is the last one, reset everything
+                  if (localFilters.length > 0 && localFilters.length === 1) {
                     resetFilters();
-                  } else {
+                  }
+                  // If we're displaying applied filters and this is the last one, reset everything
+                  else if (localFilters.length === 0 && filtersToRender.length === 1) {
+                    resetFilters();
+                  }
+                  // Otherwise, just remove this specific filter
+                  else {
                     removeFilter(filter.id);
                   }
                 }}
@@ -278,10 +330,11 @@ const ProfileFilters = (): JSX.Element => {
         )}
       </div>
 
-      {localFilters.length > 0 && hasUnsavedChanges && localFilters.some(isFilterComplete) && (
+      {localFilters.length > 0 && (
         <Button
           variant="primary"
           onClick={onApplyFilters}
+          disabled={!hasUnsavedChanges || !localFilters.some(isFilterComplete)}
           className={cx('flex items-center gap-2 self-end')}
         >
           <span>Apply</span>

package/src/ProfileView/components/ProfileFilters/useProfileFilters.ts

@@ -22,13 +22,35 @@ import {
   type ProfileFilter,
 } from '@parca/store';
 
+import {getPresetByKey, isPresetKey, type FilterPreset} from './filterPresets';
 import {useProfileFiltersUrlState} from './useProfileFiltersUrlState';
 
 export type {ProfileFilter};
 
 // Convert ProfileFilter[] to protobuf Filter[] matching the expected structure
 export const convertToProtoFilters = (profileFilters: ProfileFilter[]): Filter[] => {
-  return profileFilters
+  // First, expand any preset filters to their constituent filters
+  const expandedFilters: ProfileFilter[] = [];
+
+  for (const filter of profileFilters) {
+    if (filter.type != null && isPresetKey(filter.type)) {
+      // This is a preset filter, expand it
+      const preset = getPresetByKey(filter.type);
+      if (preset != null) {
+        preset.filters.forEach((presetFilter, index) => {
+          expandedFilters.push({
+            ...presetFilter,
+            id: `${filter.id}-expanded-${index}`,
+          });
+        });
+      }
+    } else {
+      // Regular filter, add as is
+      expandedFilters.push(filter);
+    }
+  }
+
+  return expandedFilters
     .filter(f => f.value !== '' && f.type != null && f.field != null && f.matchType != null) // Only include complete filters with values
     .map(f => {
       // Build the condition based on field type
@@ -120,6 +142,7 @@ export const useProfileFilters = (): {
   removeFilter: (id: string) => void;
   updateFilter: (id: string, updates: Partial<ProfileFilter>) => void;
   resetFilters: () => void;
+  applyPreset: (preset: FilterPreset) => void;
 } => {
   const {appliedFilters, setAppliedFilters} = useProfileFiltersUrlState();
   const dispatch = useAppDispatch();
@@ -151,8 +174,23 @@ export const useProfileFilters = (): {
   }, []);
 
   const hasUnsavedChanges = useMemo(() => {
-    const localWithValues = localFilters.filter(f => f.value !== '');
-    const appliedWithValues = (appliedFilters ?? []).filter(f => f.value !== '');
+    const localWithValues = localFilters.filter(f => {
+      // For preset filters, only need type and value
+      if (f.type != null && isPresetKey(f.type)) {
+        return f.value !== '' && f.type != null;
+      }
+      // For regular filters, need all fields
+      return f.value !== '' && f.type != null && f.field != null && f.matchType != null;
+    });
+
+    const appliedWithValues = (appliedFilters ?? []).filter(f => {
+      // For preset filters, only need type and value
+      if (f.type != null && isPresetKey(f.type)) {
+        return f.value !== '' && f.type != null;
+      }
+      // For regular filters, need all fields
+      return f.value !== '' && f.type != null && f.field != null && f.matchType != null;
+    });
 
     if (localWithValues.length !== appliedWithValues.length) return true;
 
@@ -252,9 +290,14 @@ export const useProfileFilters = (): {
   }, [dispatch, setAppliedFilters]);
 
   const onApplyFilters = useCallback((): void => {
-    const validFilters = localFilters.filter(
-      f => f.value !== '' && f.type != null && f.field != null && f.matchType != null
-    );
+    const validFilters = localFilters.filter(f => {
+      // For preset filters, only need type and value
+      if (f.type != null && isPresetKey(f.type)) {
+        return f.value !== '' && f.type != null;
+      }
+      // For regular filters, need all fields
+      return f.value !== '' && f.type != null && f.field != null && f.matchType != null;
+    });
 
     const filtersToApply = validFilters.map((f, index) => ({
       ...f,
@@ -268,6 +311,23 @@ export const useProfileFilters = (): {
     return convertToProtoFilters(appliedFilters ?? []);
   }, [appliedFilters]);
 
+  const applyPreset = useCallback(
+    (preset: FilterPreset) => {
+      const presetFilter: ProfileFilter = {
+        id: `filter-preset-${Date.now()}`,
+        type: preset.key,
+        value: preset.name,
+      };
+
+      // Add preset filter to existing filters
+      const updatedFilters = [...localFilters, presetFilter];
+      dispatch(setLocalFilters(updatedFilters));
+
+      setAppliedFilters(updatedFilters);
+    },
+    [dispatch, setAppliedFilters, localFilters]
+  );
+
   return {
     localFilters,
     appliedFilters,
@@ -280,5 +340,6 @@ export const useProfileFilters = (): {
     removeFilter,
     updateFilter,
     resetFilters,
+    applyPreset,
   };
 };

package/src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts

@@ -14,6 +14,8 @@
 import {useURLStateCustom, type ParamValueSetterCustom} from '@parca/components';
 import {type ProfileFilter} from '@parca/store';
 
+import {isPresetKey} from './filterPresets';
+
 // Compact encoding mappings
 const TYPE_MAP: Record<string, string> = {
   stack: 's',
@@ -46,8 +48,16 @@ const encodeProfileFilters = (filters: ProfileFilter[]): string => {
   if (filters.length === 0) return '';
 
   return filters
-    .filter(f => f.value !== '' && f.type != null && f.field != null && f.matchType != null)
+    .filter(f => f.value !== '' && f.type != null)
     .map(f => {
+      // Handle preset filters differently
+      if (isPresetKey(f.type!)) {
+        const presetKey = encodeURIComponent(f.type!);
+        const value = encodeURIComponent(f.value);
+        return `p:${presetKey}:${value}`;
+      }
+
+      // Handle regular filters
       const type = TYPE_MAP[f.type!];
       const field = FIELD_MAP[f.field!];
       const match = MATCH_MAP[f.matchType!];
@@ -63,7 +73,22 @@ export const decodeProfileFilters = (encoded: string): ProfileFilter[] => {
 
   try {
     return encoded.split(',').map((filter, index) => {
-      const [type, field, match, ...valueParts] = filter.split(':');
+      const parts = filter.split(':');
+
+      // Handle preset filters (format: p:presetKey:value)
+      if (parts[0] === 'p' && parts.length >= 3) {
+        const presetKey = decodeURIComponent(parts[1]);
+        const value = decodeURIComponent(parts.slice(2).join(':')); // Handle values with colons
+
+        return {
+          id: `filter-${Date.now()}-${index}`,
+          type: presetKey,
+          value,
+        };
+      }
+
+      // Handle regular filters (format: type:field:match:value)
+      const [type, field, match, ...valueParts] = parts;
       const value = decodeURIComponent(valueParts.join(':')); // Handle values with colons
 
       return {

package/src/ProfileView/index.tsx

@@ -44,6 +44,7 @@ export const ProfileView = ({
   pprofDownloading,
   compare,
   showVisualizationSelector,
+  sandwichData,
 }: ProfileViewProps): JSX.Element => {
   const {
     timezone,
@@ -88,6 +89,7 @@ export const ProfileView = ({
     isHalfScreen: boolean;
   }): JSX.Element => {
     return getDashboardItem({
+      sandwichData,
       type,
       isHalfScreen,
       dimensions,

package/src/ProfileView/types/visualization.ts

@@ -11,20 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {
-  Callgraph as CallgraphType,
-  Flamegraph,
-  FlamegraphArrow,
-  QueryServiceClient,
-  Source,
-  TableArrow,
-} from '@parca/client';
+import {FlamegraphArrow, QueryServiceClient, Source, TableArrow} from '@parca/client';
 
 import {ProfileSource} from '../../ProfileSource';
 
 export interface FlamegraphData {
   loading: boolean;
-  data?: Flamegraph;
   arrow?: FlamegraphArrow;
   total?: bigint;
   filtered?: bigint;
@@ -43,20 +35,17 @@ export interface TopTableData {
   unit?: string;
 }
 
-export interface CallgraphData {
-  loading: boolean;
-  data?: CallgraphType;
-  total?: bigint;
-  filtered?: bigint;
-  error?: any;
-}
-
 export interface SourceData {
   loading: boolean;
   data?: Source;
   error?: any;
 }
 
+export interface SandwichData {
+  callees: FlamegraphData;
+  callers: FlamegraphData;
+}
+
 export type VisualizationType =
   | 'flamegraph'
   | 'callgraph'
@@ -70,8 +59,8 @@ export interface ProfileViewProps {
   filtered: bigint;
   flamegraphData: FlamegraphData;
   flamechartData: FlamegraphData;
+  sandwichData: SandwichData;
   topTableData?: TopTableData;
-  callgraphData?: CallgraphData;
   sourceData?: SourceData;
   profileSource: ProfileSource;
   queryClient?: QueryServiceClient;

package/src/ProfileViewWithData.tsx

@@ -47,6 +47,7 @@ export const ProfileViewWithData = ({
     defaultValue: [FIELD_FUNCTION_NAME],
     alwaysReturnArray: true,
   });
+  const [sandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
 
   const [invertStack] = useURLState('invert_call_stack');
   const invertCallStack = invertStack === 'true';
@@ -131,15 +132,6 @@ export const ProfileViewWithData = ({
     protoFilters,
   });
 
-  const {
-    isLoading: callgraphLoading,
-    response: callgraphResponse,
-    error: callgraphError,
-  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
-    skip: !dashboardItems.includes('callgraph'),
-    protoFilters,
-  });
-
   const {
     isLoading: sourceLoading,
     response: sourceResponse,
@@ -151,6 +143,32 @@ export const ProfileViewWithData = ({
     protoFilters,
   });
 
+  const {
+    isLoading: callersFlamegraphLoading,
+    response: callersFlamegraphResponse,
+    error: callersFlamegraphError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+    nodeTrimThreshold,
+    groupBy: [FIELD_FUNCTION_NAME],
+    invertCallStack: true,
+    sandwichByFunction: sandwichFunctionName,
+    skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+    protoFilters,
+  });
+
+  const {
+    isLoading: calleesFlamegraphLoading,
+    response: calleesFlamegraphResponse,
+    error: calleesFlamegraphError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+    nodeTrimThreshold,
+    groupBy: [FIELD_FUNCTION_NAME],
+    invertCallStack: false,
+    sandwichByFunction: sandwichFunctionName,
+    skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+    protoFilters,
+  });
+
   useEffect(() => {
     if (
       (!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') ||
@@ -163,18 +181,12 @@ export const ProfileViewWithData = ({
       perf?.markInteraction('table render', tableResponse.total);
     }
 
-    if (!callgraphLoading && callgraphResponse?.report.oneofKind === 'callgraph') {
-      perf?.markInteraction('Callgraph render', callgraphResponse.total);
-    }
-
     if (!sourceLoading && sourceResponse?.report.oneofKind === 'source') {
       perf?.markInteraction('Source render', sourceResponse.total);
     }
   }, [
     flamegraphLoading,
     flamegraphResponse,
-    callgraphResponse,
-    callgraphLoading,
     tableLoading,
     tableResponse,
     sourceLoading,
@@ -210,15 +222,18 @@ export const ProfileViewWithData = ({
   } else if (tableResponse !== null) {
     total = BigInt(tableResponse.total);
     filtered = BigInt(tableResponse.filtered);
-  } else if (callgraphResponse !== null) {
-    total = BigInt(callgraphResponse.total);
-    filtered = BigInt(callgraphResponse.filtered);
   } else if (sourceResponse !== null) {
     total = BigInt(sourceResponse.total);
     filtered = BigInt(sourceResponse.filtered);
   } else if (flamechartResponse !== null) {
     total = BigInt(flamechartResponse.total);
     filtered = BigInt(flamechartResponse.filtered);
+  } else if (callersFlamegraphResponse !== null) {
+    total = BigInt(callersFlamegraphResponse.total);
+    filtered = BigInt(callersFlamegraphResponse.filtered);
+  } else if (calleesFlamegraphResponse !== null) {
+    total = BigInt(calleesFlamegraphResponse.total);
+    filtered = BigInt(calleesFlamegraphResponse.filtered);
   }
 
   return (
@@ -227,10 +242,6 @@ export const ProfileViewWithData = ({
       filtered={filtered}
       flamegraphData={{
         loading: flamegraphLoading && profileMetadataLoading,
-        data:
-          flamegraphResponse?.report.oneofKind === 'flamegraph'
-            ? flamegraphResponse?.report?.flamegraph
-            : undefined,
         arrow:
           flamegraphResponse?.report.oneofKind === 'flamegraphArrow'
             ? flamegraphResponse?.report?.flamegraphArrow
@@ -279,14 +290,6 @@ export const ProfileViewWithData = ({
             ? tableResponse.report.tableArrow.unit
             : '',
       }}
-      callgraphData={{
-        loading: callgraphLoading,
-        data:
-          callgraphResponse?.report.oneofKind === 'callgraph'
-            ? callgraphResponse?.report?.callgraph
-            : undefined,
-        error: callgraphError,
-      }}
       sourceData={{
         loading: sourceLoading,
         data:
@@ -295,6 +298,38 @@ export const ProfileViewWithData = ({
             : undefined,
         error: sourceError,
       }}
+      sandwichData={{
+        callees: {
+          arrow:
+            calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+              ? calleesFlamegraphResponse?.report?.flamegraphArrow
+              : undefined,
+          loading: calleesFlamegraphLoading,
+          error: calleesFlamegraphError,
+          total: BigInt(calleesFlamegraphResponse?.total ?? '0'),
+          filtered: BigInt(calleesFlamegraphResponse?.filtered ?? '0'),
+          metadataMappingFiles:
+            profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+              ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
+              : undefined,
+          metadataLoading: profileMetadataLoading,
+        },
+        callers: {
+          arrow:
+            callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+              ? callersFlamegraphResponse?.report?.flamegraphArrow
+              : undefined,
+          loading: callersFlamegraphLoading,
+          error: callersFlamegraphError,
+          total: BigInt(callersFlamegraphResponse?.total ?? '0'),
+          filtered: BigInt(callersFlamegraphResponse?.filtered ?? '0'),
+          metadataMappingFiles:
+            profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+              ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
+              : undefined,
+          metadataLoading: profileMetadataLoading,
+        },
+      }}
       profileSource={profileSource}
       queryClient={queryClient}
       onDownloadPProf={() => void downloadPProfClick()}