feat(perf): Add Percentile dropdown to EAP sampled events table

Enable the Percentile filter (p50/p75/p95/p99/p100) for EAP mode,
which was previously hidden. Fetches percentile thresholds via useSpans
with p50(span.duration) through p100(span.duration), applies a
span.duration filter to the table and count queries, and carries the
filter into the Open in Explore URL.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: mjq

static/app/views/performance/eap/overviewSpansTable.tsx

@@ -112,9 +112,10 @@ const PROFILE_COLUMN: OverviewSpansColumn = {
 type Props = {
   eventView: EventView;
   transactionName: string;
+  maxDuration?: number;
 };
 
-export function OverviewSpansTable({eventView, transactionName}: Props) {
+export function OverviewSpansTable({eventView, transactionName, maxDuration}: Props) {
   const {selection} = usePageFilters();
   const location = useLocation();
   const {projects} = useProjects();
@@ -148,10 +149,16 @@ export function OverviewSpansTable({eventView, transactionName}: Props) {
   const defaultQuery = new MutableSearch(searchQuery);
   defaultQuery.setFilterValues('is_transaction', ['true']);
   defaultQuery.setFilterValues('transaction', [transactionName]);
+  if (maxDuration !== undefined && maxDuration > 0) {
+    defaultQuery.setFilterValues('span.duration', [`<=${maxDuration.toFixed(0)}`]);
+  }
 
   const countQuery = new MutableSearch(searchQuery);
   countQuery.setFilterValues('is_transaction', ['true']);
   countQuery.setFilterValues('transaction', [transactionName]);
+  if (maxDuration !== undefined && maxDuration > 0) {
+    countQuery.setFilterValues('span.duration', [`<=${maxDuration.toFixed(0)}`]);
+  }
 
   const {data: numEvents, error: numEventsError} = useSpans(
     {

static/app/views/performance/transactionSummary/transactionEvents/content.tsx

@@ -52,8 +52,7 @@ import {
 } from 'sentry/views/performance/utils';
 
 import {EventsTable} from './eventsTable';
-import type {EventsDisplayFilterName} from './utils';
-import {getEventsFilterOptions} from './utils';
+import {EventsDisplayFilterName, getEventsFilterOptions} from './utils';
 
 function EAPSearchBar({
   projects,
@@ -207,8 +206,18 @@ export function EventsContent(props: Props) {
     webVital,
   ]);
 
+  const {eventsDisplayFilterName, percentileValues} = props;
+  const maxDuration =
+    eventsDisplayFilterName === EventsDisplayFilterName.P100
+      ? undefined
+      : percentileValues?.[eventsDisplayFilterName];
+
   const table = shouldUseEAP ? (
-    <OverviewSpansTable eventView={eventView} transactionName={transactionName} />
+    <OverviewSpansTable
+      eventView={eventView}
+      transactionName={transactionName}
+      maxDuration={maxDuration}
+    />
   ) : (
     <EventsTable
       theme={theme}
@@ -310,19 +319,17 @@ function Search(props: Props) {
           />
         )}
       </StyledSearchBarWrapper>
-      {!shouldUseEAP && (
-        <CompactSelect
-          trigger={triggerProps => (
-            <OverlayTrigger.Button {...triggerProps} prefix={t('Percentile')} />
-          )}
-          value={eventsDisplayFilterName}
-          onChange={opt => onChangeEventsDisplayFilter(opt.value)}
-          options={Object.entries(eventsFilterOptions).map(([name, filter]) => ({
-            value: name as EventsDisplayFilterName,
-            label: filter.label,
-          }))}
-        />
-      )}
+      <CompactSelect
+        trigger={triggerProps => (
+          <OverlayTrigger.Button {...triggerProps} prefix={t('Percentile')} />
+        )}
+        value={eventsDisplayFilterName}
+        onChange={opt => onChangeEventsDisplayFilter(opt.value)}
+        options={Object.entries(eventsFilterOptions).map(([name, filter]) => ({
+          value: name as EventsDisplayFilterName,
+          label: filter.label,
+        }))}
+      />
       {!shouldUseEAP && (
         <LinkButton
           to={eventView.getResultsViewUrlTarget(
@@ -344,7 +351,16 @@ function OpenInExploreButton({
   location,
   organization,
   transactionName,
-}: Pick<Props, 'location' | 'organization' | 'transactionName'>) {
+  eventsDisplayFilterName,
+  percentileValues,
+}: Pick<
+  Props,
+  | 'location'
+  | 'organization'
+  | 'transactionName'
+  | 'eventsDisplayFilterName'
+  | 'percentileValues'
+>) {
   const {selection} = usePageFilters();
 
   if (!organization.features.includes('visibility-explore-view')) {
@@ -361,6 +377,14 @@ function OpenInExploreButton({
   query.setFilterValues('is_transaction', ['true']);
   query.setFilterValues('transaction', [transactionName]);
 
+  const maxDuration =
+    eventsDisplayFilterName === EventsDisplayFilterName.P100
+      ? undefined
+      : percentileValues?.[eventsDisplayFilterName];
+  if (maxDuration !== undefined && maxDuration > 0) {
+    query.setFilterValues('span.duration', [`<=${maxDuration.toFixed(0)}`]);
+  }
+
   const exploreUrl = getExploreUrl({
     organization,
     selection,
@@ -379,11 +403,13 @@ const FilterActions = styled('div')<{eap: boolean}>`
   margin-bottom: ${p => p.theme.space.xl};
 
   @media (min-width: ${p => p.theme.breakpoints.sm}) {
-    grid-template-columns: ${p => (p.eap ? 'auto 1fr auto' : 'repeat(4, min-content)')};
+    grid-template-columns: ${p =>
+      p.eap ? 'auto 1fr auto auto' : 'repeat(4, min-content)'};
   }
 
   @media (min-width: ${p => p.theme.breakpoints.xl}) {
-    grid-template-columns: ${p => (p.eap ? 'auto 1fr auto' : 'auto auto 1fr auto auto')};
+    grid-template-columns: ${p =>
+      p.eap ? 'auto 1fr auto auto' : 'auto auto 1fr auto auto'};
   }
 `;
 

static/app/views/performance/transactionSummary/transactionEvents/index.tsx

@@ -2,13 +2,16 @@ import type {Location} from 'history';
 
 import * as Layout from 'sentry/components/layouts/thirds';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
+import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {DiscoverQuery} from 'sentry/utils/discover/discoverQuery';
 import {removeHistogramQueryStrings} from 'sentry/utils/performance/histogram';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
+import {useSpans} from 'sentry/views/insights/common/queries/useDiscover';
 import {useTransactionSummaryEAP} from 'sentry/views/performance/eap/useTransactionSummaryEAP';
+import {SEGMENT_SPANS_CURSOR} from 'sentry/views/performance/eap/utils';
 import {
   decodeFilterFromLocation,
   filterToLocationQuery,
@@ -23,11 +26,14 @@ import {useTransactionSummaryContext} from 'sentry/views/performance/transaction
 import {EventsContent} from './content';
 import {
   decodeEventsDisplayFilterFromLocation,
+  EAP_PERCENTILE_FIELDS,
   EventsDisplayFilterName,
+  filterEventsDisplayToEAPLocationQuery,
   filterEventsDisplayToLocationQuery,
   getEventsFilterOptions,
   getPercentilesEventView,
   getWebVital,
+  mapEAPPercentileValues,
   mapPercentileValues,
 } from './utils';
 
@@ -125,20 +131,8 @@ function TransactionEvents() {
 
   if (shouldUseEAP) {
     return (
-      <EventsContent
-        location={location}
-        organization={organization}
-        eventView={eventView}
-        transactionName={transactionName}
-        spanOperationBreakdownFilter={spanOperationBreakdownFilter}
+      <EAPTransactionEvents
         onChangeSpanOperationBreakdownFilter={onChangeSpanOperationBreakdownFilter}
-        eventsDisplayFilterName={EventsDisplayFilterName.P100}
-        onChangeEventsDisplayFilter={onChangeEventsDisplayFilter}
-        percentileValues={undefined}
-        projectId={projectId}
-        projects={projects}
-        webVital={webVital}
-        setError={setError}
       />
     );
   }
@@ -184,4 +178,79 @@ function TransactionEvents() {
   );
 }
 
+function EAPTransactionEvents({
+  onChangeSpanOperationBreakdownFilter,
+}: {
+  onChangeSpanOperationBreakdownFilter: (
+    newFilter: SpanOperationBreakdownFilter | undefined
+  ) => void;
+}) {
+  const {organization, eventView, transactionName, setError, projectId, projects} =
+    useTransactionSummaryContext();
+  const {selection} = usePageFilters();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const eventsDisplayFilterName = decodeEventsDisplayFilterFromLocation(location);
+  const spanOperationBreakdownFilter = decodeFilterFromLocation(location);
+  const webVital = getWebVital(location);
+
+  const percentileQuery = new MutableSearch('');
+  percentileQuery.setFilterValues('is_transaction', ['true']);
+  percentileQuery.setFilterValues('transaction', [transactionName]);
+
+  const {data: percentileData} = useSpans(
+    {
+      search: percentileQuery,
+      fields: [...EAP_PERCENTILE_FIELDS],
+      pageFilters: selection,
+    },
+    'api.insights.transaction-events-percentiles'
+  );
+
+  const percentileValues = mapEAPPercentileValues(percentileData);
+
+  const onChangeEventsDisplayFilter = (newFilterName: EventsDisplayFilterName) => {
+    trackAnalytics(
+      'performance_views.transactionEvents.display_filter_dropdown.selection',
+      {
+        organization,
+        action: newFilterName as string,
+      }
+    );
+
+    const nextQuery: Location['query'] = {
+      ...removeHistogramQueryStrings(location, [ZOOM_START, ZOOM_END]),
+      ...filterEventsDisplayToEAPLocationQuery(newFilterName),
+      [SEGMENT_SPANS_CURSOR]: undefined,
+    };
+
+    if (newFilterName === EventsDisplayFilterName.P100) {
+      delete nextQuery.showTransactions;
+    }
+
+    navigate({
+      pathname: location.pathname,
+      query: nextQuery,
+    });
+  };
+
+  return (
+    <EventsContent
+      location={location}
+      organization={organization}
+      eventView={eventView}
+      transactionName={transactionName}
+      spanOperationBreakdownFilter={spanOperationBreakdownFilter}
+      onChangeSpanOperationBreakdownFilter={onChangeSpanOperationBreakdownFilter}
+      eventsDisplayFilterName={eventsDisplayFilterName}
+      onChangeEventsDisplayFilter={onChangeEventsDisplayFilter}
+      percentileValues={percentileValues}
+      projectId={projectId}
+      projects={projects}
+      webVital={webVital}
+      setError={setError}
+    />
+  );
+}
+
 export default TransactionEvents;

static/app/views/performance/transactionSummary/transactionEvents/utils.tsx

@@ -14,6 +14,7 @@ import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {WebVital} from 'sentry/utils/fields';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
 import type {DomainView} from 'sentry/views/insights/pages/useFilters';
 import {
   decodeFilterFromLocation,
@@ -302,3 +303,34 @@ export function getWebVital(location: Location): WebVital | undefined {
   }
   return undefined;
 }
+
+export const EAP_PERCENTILE_FIELDS = [
+  'p50(span.duration)',
+  'p75(span.duration)',
+  'p95(span.duration)',
+  'p99(span.duration)',
+  'p100(span.duration)',
+] as const;
+
+export function mapEAPPercentileValues(
+  data: Array<Record<string, number>>
+): PercentileValues {
+  const row = data[0];
+  return {
+    p50: row?.['p50(span.duration)'] ?? 0,
+    p75: row?.['p75(span.duration)'] ?? 0,
+    p95: row?.['p95(span.duration)'] ?? 0,
+    p99: row?.['p99(span.duration)'] ?? 0,
+    p100: row?.['p100(span.duration)'] ?? 0,
+  };
+}
+
+export function filterEventsDisplayToEAPLocationQuery(option: EventsDisplayFilterName) {
+  const query: Record<string, string> = {
+    showTransactions: option,
+  };
+  if (option !== EventsDisplayFilterName.P100) {
+    query[QueryParameterNames.SPANS_SORT] = '-span.duration';
+  }
+  return query;
+}