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

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,12 +1,15 @@
 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 {Area} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/area';
 import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization';
 import {useSpans} from 'sentry/views/insights/common/queries/useDiscover';
 import {SpanFields} from 'sentry/views/insights/types';
@@ -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,27 @@ 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 Area(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,
+          },
+        });
+      }}
     />
   );
 }