feat(trends): Display breakpoint in the UI (#47806)

Display the breakpoint instead of the middle point in trends.

Before (old trends):
<img width="529" alt="Screenshot 2023-04-21 at 10 47 09 PM"
src="https://user-images.githubusercontent.com/23648387/233758025-409712a8-0ad3-4f18-8210-cef47c2d1229.png">


After (new trends):
<img width="530" alt="Screenshot 2023-04-21 at 10 47 15 PM"
src="https://user-images.githubusercontent.com/23648387/233758030-0ef86587-1b3a-47a2-9319-d4316adba561.png">

static/app/views/performance/trends/changedTransactions.tsx

@@ -239,7 +239,7 @@ function ChangedTransactions(props: Props) {
 
   const trendView = props.trendView.clone();
   const chartTitle = getChartTitle(trendChangeType);
-  modifyTrendView(trendView, location, trendChangeType, projects);
+  modifyTrendView(trendView, location, trendChangeType, projects, organization);
 
   const onCursor = makeTrendsCursorHandler(trendChangeType);
   const cursor = decodeScalar(location.query[trendCursorNames[trendChangeType]]);

static/app/views/performance/trends/chart.tsx

@@ -57,6 +57,18 @@ type Props = ViewProps & {
   trendFunctionField?: TrendFunctionField;
 };
 
+function transformTransaction(
+  transaction: NormalizedTrendsTransaction
+): NormalizedTrendsTransaction {
+  if (transaction && transaction.breakpoint) {
+    return {
+      ...transaction,
+      breakpoint: transaction.breakpoint * 1000,
+    };
+  }
+  return transaction;
+}
+
 function transformEventStats(data: EventsStatsData, seriesName?: string): Series[] {
   return [
     {
@@ -100,6 +112,8 @@ function getIntervalLine(
     return [];
   }
 
+  const transformedTransaction = transformTransaction(transaction);
+
   const seriesStart = parseInt(series[0].data[0].name as string, 10);
   const seriesEnd = parseInt(series[0].data.slice(-1)[0].name as string, 10);
 
@@ -151,11 +165,14 @@ function getIntervalLine(
 
   const seriesDiff = seriesEnd - seriesStart;
   const seriesLine = seriesDiff * intervalRatio + seriesStart;
+  const {breakpoint} = transformedTransaction;
+
+  const divider = breakpoint || seriesLine;
 
   previousPeriod.markLine.data = [
     [
-      {value: 'Past', coord: [seriesStart, transaction.aggregate_range_1]},
-      {coord: [seriesLine, transaction.aggregate_range_1]},
+      {value: 'Past', coord: [seriesStart, transformedTransaction.aggregate_range_1]},
+      {coord: [divider, transformedTransaction.aggregate_range_1]},
     ],
   ];
   previousPeriod.markLine.tooltip = {
@@ -165,7 +182,7 @@ function getIntervalLine(
         '<div>',
         `<span class="tooltip-label"><strong>${t('Past Baseline')}</strong></span>`,
         // p50() coerces the axis to be time based
-        tooltipFormatter(transaction.aggregate_range_1, 'duration'),
+        tooltipFormatter(transformedTransaction.aggregate_range_1, 'duration'),
         '</div>',
         '</div>',
         '<div class="tooltip-arrow"></div>',
@@ -174,8 +191,8 @@ function getIntervalLine(
   };
   currentPeriod.markLine.data = [
     [
-      {value: 'Present', coord: [seriesLine, transaction.aggregate_range_2]},
-      {coord: [seriesEnd, transaction.aggregate_range_2]},
+      {value: 'Present', coord: [divider, transformedTransaction.aggregate_range_2]},
+      {coord: [seriesEnd, transformedTransaction.aggregate_range_2]},
     ],
   ];
   currentPeriod.markLine.tooltip = {
@@ -185,7 +202,7 @@ function getIntervalLine(
         '<div>',
         `<span class="tooltip-label"><strong>${t('Present Baseline')}</strong></span>`,
         // p50() coerces the axis to be time based
-        tooltipFormatter(transaction.aggregate_range_2, 'duration'),
+        tooltipFormatter(transformedTransaction.aggregate_range_2, 'duration'),
         '</div>',
         '</div>',
         '<div class="tooltip-arrow"></div>',
@@ -195,7 +212,7 @@ function getIntervalLine(
   periodDividingLine.markLine = {
     data: [
       {
-        xAxis: seriesLine,
+        xAxis: divider,
       },
     ],
     label: {show: false},

static/app/views/performance/trends/types.tsx

@@ -77,6 +77,7 @@ export type TrendsTransaction = {
   transaction: string;
   trend_difference: number;
   trend_percentage: number;
+  breakpoint?: number;
 };
 
 export type TrendsDataEvents = {

static/app/views/performance/trends/utils.tsx

@@ -4,7 +4,7 @@ import moment from 'moment';
 
 import {getInterval} from 'sentry/components/charts/utils';
 import {t} from 'sentry/locale';
-import {Project} from 'sentry/types';
+import {Organization, Project} from 'sentry/types';
 import {Series, SeriesDataUnit} from 'sentry/types/echarts';
 import EventView from 'sentry/utils/discover/eventView';
 import {
@@ -235,6 +235,7 @@ export function modifyTrendView(
   location: Location,
   trendsType: TrendChangeType,
   projects: Project[],
+  organization: Organization,
   isProjectOnly?: boolean
 ) {
   const trendFunction = getCurrentTrendFunction(location);
@@ -261,7 +262,17 @@ export function modifyTrendView(
       trendParameter.column
     );
   }
-  trendView.query = getLimitTransactionItems(trendView.query);
+
+  if (!organization.features.includes('performance-new-trends')) {
+    trendView.query = getLimitTransactionItems(trendView.query);
+  } else {
+    const query = new MutableSearch(trendView.query);
+    // remove metrics-incompatible filters
+    if (query.hasFilter('transaction.duration')) {
+      query.removeFilter('transaction.duration');
+    }
+    trendView.query = query.formatString();
+  }
 
   trendView.interval = getQueryInterval(location, trendView);