fix(performance): Fix EAP transaction summary method filter and duration breakdown chart (#108483)

Fix two issues with the EAP transaction summary page and improve the
duration breakdown chart.

## Method filter mismatch

When the `performance-transaction-summary-eap` flag is enabled,
dashboard widget links filter by `request.method` (the EAP field name),
but the transaction summary search bar didn't recognize it as a valid
key. This caused an "Invalid key" error when navigating from dashboards.
Now the search bar accepts `request.method` when EAP is enabled, and the
dashboard link uses the correct field name based on the flag.

## Duration breakdown chart

The EAP version of the duration breakdown chart now matches the regular
(non-EAP) version:
- removed the extra p90 percentile
- uses high-fidelity time intervals
- aliases series names to match the standard format (e.g. `p50()`
instead of `p50(span.duration)`)
- persists legend selection via the `unselectedSeries` URL query
parameter.

Note that this is now a line chart instead of an area chart. As per our
[Choosing The Plot
Type](https://sentry.sentry.io/stories/product/views/dashboards/widgets/timeserieswidget/timeserieswidgetvisualization/#choosing-the-plot-type)
guide:

> Only use area charts if you want to plot multiple series and those
series represent components of a total. For example, area charts are a
good choice to show time spent, broken down by span operation. They are
not a good choice for plotting a single duration time series. Area
charts should be stacked!

## Screens

Old Transaction Summary:
<img width="1223" height="296" alt="Screenshot 2026-02-23 at 10 53 34"
src="https://github.com/user-attachments/assets/2608f2e0-b2ac-40fb-a53d-a0a400b46489"
/>


EAP version:
<img width="1225" height="312" alt="Screenshot 2026-02-23 at 10 49 01"
src="https://github.com/user-attachments/assets/47d90d51-bb87-40a6-a7ff-4a63b31b987a"
/>

Closes DAIN-1226

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: 2 people

static/app/components/performance/transactionSearchQueryBuilder.tsx

@@ -20,7 +20,7 @@ import {
   isAggregateField,
   isMeasurement,
 } from 'sentry/utils/discover/fields';
-import {DEVICE_CLASS_TAG_VALUES, isDeviceClass} from 'sentry/utils/fields';
+import {DEVICE_CLASS_TAG_VALUES, FieldKind, isDeviceClass} from 'sentry/utils/fields';
 import {getMeasurements} from 'sentry/utils/measurements/measurements';
 import {getHasTag} from 'sentry/utils/tag';
 import useApi from 'sentry/utils/useApi';
@@ -78,9 +78,17 @@ export function TransactionSearchQueryBuilder({
       ...tags,
     };
 
+    if (organization.features.includes('performance-transaction-summary-eap')) {
+      combinedTags['request.method'] = {
+        key: 'request.method',
+        name: 'request.method',
+        kind: FieldKind.FIELD,
+      };
+    }
+
     combinedTags.has = getHasTag(combinedTags);
     return combinedTags;
-  }, [tags]);
+  }, [organization.features, tags]);
 
   const filterKeySections = useMemo(
     () => [

static/app/views/dashboards/datasetConfig/spans.tsx

@@ -443,7 +443,11 @@ function renderTransactionAsLinkable(data: EventData, baggage: RenderFunctionBag
     filters.addFilterValue('transaction.op', data[SpanFields.SPAN_OP]);
   }
   if (data[SpanFields.REQUEST_METHOD]) {
-    filters.addFilterValue('http.method', data[SpanFields.REQUEST_METHOD]);
+    const isEap = organization.features.includes('performance-transaction-summary-eap');
+    filters.addFilterValue(
+      isEap ? 'request.method' : 'http.method',
+      data[SpanFields.REQUEST_METHOD]
+    );
   }
 
   const target = transactionSummaryRouteWithQuery({

static/app/views/performance/transactionSummary/transactionOverview/useWidgetChartVisualization.tsx

@@ -1,10 +1,13 @@
 import {useTheme} from '@emotion/react';
 
+import {getInterval, getSeriesSelection} from 'sentry/components/charts/utils';
 import usePageFilters from 'sentry/components/pageFilters/usePageFilters';
+import {parseFunction} from 'sentry/utils/discover/fields';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useFetchSpanTimeSeries} from 'sentry/utils/timeSeries/useFetchEventsTimeSeries';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import {useReleaseStats} from 'sentry/utils/useReleaseStats';
 import {Line} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/line';
 import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization';
@@ -73,8 +76,10 @@ function useDurationBreakdownVisualization({
   query,
 }: DurationBreakdownVisualizationOptions) {
   const location = useLocation();
+  const navigate = useNavigate();
   const spanCategoryUrlParam = decodeScalar(location.query?.[SpanFields.SPAN_CATEGORY]);
   const {selection} = usePageFilters();
+  const legendSelection = getSeriesSelection(location);
 
   const {releases: releasesWithDate} = useReleaseStats(selection);
   const releases =
@@ -104,11 +109,11 @@ function useDurationBreakdownVisualization({
         'p100(span.duration)',
         'p99(span.duration)',
         'p95(span.duration)',
-        'p90(span.duration)',
         'p75(span.duration)',
         'p50(span.duration)',
       ],
       query: newQuery,
+      interval: getInterval(selection.datetime, 'high'),
       enabled,
     },
     REFERRER
@@ -122,13 +127,28 @@ function useDurationBreakdownVisualization({
     return <TimeSeriesWidgetVisualization.LoadingPlaceholder />;
   }
 
-  const plottables = spanSeriesData?.timeSeries.map(series => new Line(series));
+  const plottables =
+    spanSeriesData?.timeSeries.map(series => {
+      const name = `${parseFunction(series.yAxis)?.name}()`;
+      return new Line(series, {name, alias: name});
+    }) ?? [];
 
   return (
     <TimeSeriesWidgetVisualization
       plottables={plottables}
       releases={releases}
       showReleaseAs="bubble"
+      legendSelection={legendSelection}
+      onLegendSelectionChange={selected => {
+        const unselected = Object.keys(selected).filter(key => !selected[key]);
+        navigate({
+          ...location,
+          query: {
+            ...location.query,
+            unselectedSeries: unselected,
+          },
+        });
+      }}
     />
   );
 }