ref(performance): Match EAP duration breakdown chart to regular version

Switch the EAP Duration Breakdown chart from a line chart to a stacked
area chart, remove the extra p90 percentile, use high-fidelity time
intervals, alias series names to match the regular chart format (e.g.
`p50()` instead of `p50(span.duration)`), and add URL-based legend
selection persistence via the `unselectedSeries` query parameter.

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

Author: mjq

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,
+          },
+        });
+      }}
     />
   );
 }