feat(performance): added frontend option to display transaction summary page with interpolation and without zerofill (#27536)

Updated Performance Transaction Summary frontend to utilize withoutZerofill on main graph when feature flagged with performance-chart-interpolation

static/app/actionCreators/events.tsx

@@ -30,6 +30,7 @@ type Options = {
   topEvents?: number;
   orderby?: string;
   partial: boolean;
+  withoutZerofill?: boolean;
 };
 
 /**
@@ -65,6 +66,7 @@ export const doEventsRequest = (
     topEvents,
     orderby,
     partial,
+    withoutZerofill,
   }: Options
 ): Promise<EventsStats | MultiSeriesEventsStats> => {
   const shouldDoublePeriod = canIncludePreviousPeriod(includePrevious, period);
@@ -80,6 +82,7 @@ export const doEventsRequest = (
       topEvents,
       orderby,
       partial: partial ? '1' : undefined,
+      withoutZerofill: withoutZerofill ? '1' : undefined,
     }).filter(([, value]) => typeof value !== 'undefined')
   );
 

static/app/components/charts/eventsRequest.tsx

@@ -26,6 +26,7 @@ export type TimeSeriesData = {
   originalPreviousTimeseriesData?: EventsStatsData | null;
   previousTimeseriesData?: Series | null;
   timeAggregatedData?: Series | {};
+  timeframe?: {start: string; end: string};
 };
 
 type LoadingStatus = {
@@ -158,6 +159,10 @@ type EventsRequestPartialProps = {
    * Hide error toast (used for pages which also query eventsV2)
    */
   hideError?: boolean;
+  /**
+   * Whether or not to zerofill results
+   */
+  withoutZerofill?: boolean;
 };
 
 type TimeAggregationProps =
@@ -395,9 +400,17 @@ class EventsRequest extends React.PureComponent<EventsRequestProps, EventsReques
       // Convert the timeseries data into a multi-series result set.
       // As the server will have replied with a map like:
       // {[titleString: string]: EventsStats}
+      let timeframe: {start: number; end: number} | undefined = undefined;
       const results: MultiSeriesResults = Object.keys(timeseriesData)
         .map((seriesName: string): [number, Series] => {
           const seriesData: EventsStats = timeseriesData[seriesName];
+          // Use the first timeframe we find from the series since all series have the same timeframe anyways
+          if (seriesData.start && seriesData.end && !timeframe) {
+            timeframe = {
+              start: seriesData.start * 1000,
+              end: seriesData.end * 1000,
+            };
+          }
           const transformed = this.transformTimeseriesData(
             seriesData.data,
             seriesName
@@ -412,6 +425,7 @@ class EventsRequest extends React.PureComponent<EventsRequestProps, EventsReques
         reloading,
         errored,
         results,
+        timeframe,
         // sometimes we want to reference props that were given to EventsRequest
         ...props,
       });

static/app/types/index.tsx

@@ -454,10 +454,14 @@ export type EventsStats = {
   data: EventsStatsData;
   totals?: {count: number};
   order?: number;
+  start?: number;
+  end?: number;
 };
 
 // API response format for multiple series
-export type MultiSeriesEventsStats = {[seriesName: string]: EventsStats};
+export type MultiSeriesEventsStats = {
+  [seriesName: string]: EventsStats;
+};
 
 /**
  * Avatars are a more primitive version of User.

static/app/views/performance/transactionSummary/charts.tsx

@@ -79,6 +79,7 @@ type Props = {
   eventView: EventView;
   totalValues: number | null;
   currentFilter: SpanOperationBreakdownFilter;
+  withoutZerofill: boolean;
 };
 
 class TransactionSummaryCharts extends Component<Props> {
@@ -110,7 +111,14 @@ class TransactionSummaryCharts extends Component<Props> {
   };
 
   render() {
-    const {totalValues, eventView, organization, location, currentFilter} = this.props;
+    const {
+      totalValues,
+      eventView,
+      organization,
+      location,
+      currentFilter,
+      withoutZerofill,
+    } = this.props;
 
     const TREND_PARAMETERS_OPTIONS: SelectValue<string>[] = getTrendsParameters({
       canSeeSpanOpTrends: organization.features.includes('performance-ops-breakdown'),
@@ -176,6 +184,7 @@ class TransactionSummaryCharts extends Component<Props> {
               end={eventView.end}
               statsPeriod={eventView.statsPeriod}
               currentFilter={currentFilter}
+              withoutZerofill={withoutZerofill}
             />
           )}
           {display === DisplayModes.DURATION_PERCENTILE && (
@@ -202,6 +211,7 @@ class TransactionSummaryCharts extends Component<Props> {
               start={eventView.start}
               end={eventView.end}
               statsPeriod={eventView.statsPeriod}
+              withoutZerofill={withoutZerofill}
             />
           )}
           {display === DisplayModes.VITALS && (
@@ -214,6 +224,7 @@ class TransactionSummaryCharts extends Component<Props> {
               start={eventView.start}
               end={eventView.end}
               statsPeriod={eventView.statsPeriod}
+              withoutZerofill={withoutZerofill}
             />
           )}
         </ChartContainer>

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

@@ -220,6 +220,9 @@ class SummaryContent extends React.Component<Props, State> {
     const hasPerformanceEventsPage = organization.features.includes(
       'performance-events-page'
     );
+    const hasPerformanceChartInterpolation = organization.features.includes(
+      'performance-chart-interpolation'
+    );
 
     const {incompatibleAlertNotice} = this.state;
     const query = decodeScalar(location.query.query, '');
@@ -354,6 +357,7 @@ class SummaryContent extends React.Component<Props, State> {
               eventView={eventView}
               totalValues={totalCount}
               currentFilter={spanOperationBreakdownFilter}
+              withoutZerofill={hasPerformanceChartInterpolation}
             />
             <TransactionsList
               location={location}

static/app/views/performance/transactionSummary/durationChart.tsx

@@ -48,6 +48,7 @@ type Props = ReactRouter.WithRouterProps &
     organization: OrganizationSummary;
     queryExtra: Query;
     currentFilter: SpanOperationBreakdownFilter;
+    withoutZerofill: boolean;
   };
 
 function generateYAxisValues() {
@@ -87,6 +88,7 @@ class DurationChart extends Component<Props> {
       router,
       queryExtra,
       currentFilter,
+      withoutZerofill,
     } = this.props;
 
     const start = this.props.start ? getUtcToLocalDateObject(this.props.start) : null;
@@ -105,29 +107,6 @@ class DurationChart extends Component<Props> {
       period: statsPeriod,
     };
 
-    const chartOptions = {
-      grid: {
-        left: '10px',
-        right: '10px',
-        top: '40px',
-        bottom: '0px',
-      },
-      seriesOptions: {
-        showSymbol: false,
-      },
-      tooltip: {
-        trigger: 'axis' as const,
-        valueFormatter: tooltipFormatter,
-      },
-      yAxis: {
-        axisLabel: {
-          color: theme.chartLabel,
-          // p50() coerces the axis to be time based
-          formatter: (value: number) => axisLabelFormatter(value, 'p50()'),
-        },
-      },
-    };
-
     const headerTitle =
       currentFilter === SpanOperationBreakdownFilter.None
         ? t('Duration Breakdown')
@@ -169,8 +148,9 @@ class DurationChart extends Component<Props> {
               includePrevious={false}
               yAxis={generateYAxisValues()}
               partial
+              withoutZerofill={withoutZerofill}
             >
-              {({results, errored, loading, reloading}) => {
+              {({results, errored, loading, reloading, timeframe}) => {
                 if (errored) {
                   return (
                     <ErrorPanel>
@@ -178,6 +158,36 @@ class DurationChart extends Component<Props> {
                     </ErrorPanel>
                   );
                 }
+
+                const chartOptions = {
+                  grid: {
+                    left: '10px',
+                    right: '10px',
+                    top: '40px',
+                    bottom: '0px',
+                  },
+                  seriesOptions: {
+                    showSymbol: false,
+                  },
+                  tooltip: {
+                    trigger: 'axis' as const,
+                    valueFormatter: tooltipFormatter,
+                  },
+                  xAxis: timeframe
+                    ? {
+                        min: timeframe.start,
+                        max: timeframe.end,
+                      }
+                    : undefined,
+                  yAxis: {
+                    axisLabel: {
+                      color: theme.chartLabel,
+                      // p50() coerces the axis to be time based
+                      formatter: (value: number) => axisLabelFormatter(value, 'p50()'),
+                    },
+                  },
+                };
+
                 const colors =
                   (results && theme.charts.getColorPalette(results.length - 2)) || [];
 

static/app/views/performance/transactionSummary/trendChart.tsx

@@ -48,6 +48,7 @@ type Props = ReactRouter.WithRouterProps &
     organization: OrganizationSummary;
     queryExtra: Query;
     trendDisplay: string;
+    withoutZerofill: boolean;
   };
 
 class TrendChart extends Component<Props> {
@@ -79,6 +80,7 @@ class TrendChart extends Component<Props> {
       router,
       trendDisplay,
       queryExtra,
+      withoutZerofill,
     } = this.props;
 
     const start = this.props.start ? getUtcToLocalDateObject(this.props.start) : null;
@@ -97,30 +99,6 @@ class TrendChart extends Component<Props> {
       period: statsPeriod,
     };
 
-    const chartOptions = {
-      grid: {
-        left: '10px',
-        right: '10px',
-        top: '40px',
-        bottom: '0px',
-      },
-      seriesOptions: {
-        showSymbol: false,
-      },
-      tooltip: {
-        trigger: 'axis' as const,
-        valueFormatter: value => tooltipFormatter(value, 'p50()'),
-      },
-      yAxis: {
-        min: 0,
-        axisLabel: {
-          color: theme.chartLabel,
-          // p50() coerces the axis to be time based
-          formatter: (value: number) => axisLabelFormatter(value, 'p50()'),
-        },
-      },
-    };
-
     return (
       <Fragment>
         <HeaderTitleLegend>
@@ -154,8 +132,9 @@ class TrendChart extends Component<Props> {
               yAxis={trendDisplay}
               currentSeriesName={trendDisplay}
               partial
+              withoutZerofill={withoutZerofill}
             >
-              {({errored, loading, reloading, timeseriesData}) => {
+              {({errored, loading, reloading, timeseriesData, timeframe}) => {
                 if (errored) {
                   return (
                     <ErrorPanel>
@@ -164,6 +143,36 @@ class TrendChart extends Component<Props> {
                   );
                 }
 
+                const chartOptions = {
+                  grid: {
+                    left: '10px',
+                    right: '10px',
+                    top: '40px',
+                    bottom: '0px',
+                  },
+                  seriesOptions: {
+                    showSymbol: false,
+                  },
+                  tooltip: {
+                    trigger: 'axis' as const,
+                    valueFormatter: value => tooltipFormatter(value, 'p50()'),
+                  },
+                  xAxis: timeframe
+                    ? {
+                        min: timeframe.start,
+                        max: timeframe.end,
+                      }
+                    : undefined,
+                  yAxis: {
+                    min: 0,
+                    axisLabel: {
+                      color: theme.chartLabel,
+                      // p50() coerces the axis to be time based
+                      formatter: (value: number) => axisLabelFormatter(value, 'p50()'),
+                    },
+                  },
+                };
+
                 const series = timeseriesData
                   ? timeseriesData
                       .map(values => {

static/app/views/performance/transactionSummary/vitalsChart.tsx

@@ -47,6 +47,7 @@ type Props = ReactRouter.WithRouterProps &
     location: Location;
     organization: OrganizationSummary;
     queryExtra: object;
+    withoutZerofill: boolean;
   };
 
 const YAXIS_VALUES = [
@@ -84,6 +85,7 @@ class VitalsChart extends Component<Props> {
       statsPeriod,
       router,
       queryExtra,
+      withoutZerofill,
     } = this.props;
 
     const start = this.props.start ? getUtcToLocalDateObject(this.props.start) : null;
@@ -112,30 +114,6 @@ class VitalsChart extends Component<Props> {
       period: statsPeriod,
     };
 
-    const chartOptions = {
-      grid: {
-        left: '10px',
-        right: '10px',
-        top: '40px',
-        bottom: '0px',
-      },
-      seriesOptions: {
-        showSymbol: false,
-      },
-      tooltip: {
-        trigger: 'axis' as const,
-        valueFormatter: tooltipFormatter,
-      },
-      yAxis: {
-        axisLabel: {
-          color: theme.chartLabel,
-          // p75(measurements.fcp) coerces the axis to be time based
-          formatter: (value: number) =>
-            axisLabelFormatter(value, 'p75(measurements.fcp)'),
-        },
-      },
-    };
-
     return (
       <Fragment>
         <HeaderTitleLegend>
@@ -170,8 +148,9 @@ class VitalsChart extends Component<Props> {
               includePrevious={false}
               yAxis={YAXIS_VALUES}
               partial
+              withoutZerofill={withoutZerofill}
             >
-              {({results, errored, loading, reloading}) => {
+              {({results, errored, loading, reloading, timeframe}) => {
                 if (errored) {
                   return (
                     <ErrorPanel>
@@ -179,6 +158,37 @@ class VitalsChart extends Component<Props> {
                     </ErrorPanel>
                   );
                 }
+
+                const chartOptions = {
+                  grid: {
+                    left: '10px',
+                    right: '10px',
+                    top: '40px',
+                    bottom: '0px',
+                  },
+                  seriesOptions: {
+                    showSymbol: false,
+                  },
+                  tooltip: {
+                    trigger: 'axis' as const,
+                    valueFormatter: tooltipFormatter,
+                  },
+                  xAxis: timeframe
+                    ? {
+                        min: timeframe.start,
+                        max: timeframe.end,
+                      }
+                    : undefined,
+                  yAxis: {
+                    axisLabel: {
+                      color: theme.chartLabel,
+                      // p75(measurements.fcp) coerces the axis to be time based
+                      formatter: (value: number) =>
+                        axisLabelFormatter(value, 'p75(measurements.fcp)'),
+                    },
+                  },
+                };
+
                 const colors =
                   (results && theme.charts.getColorPalette(results.length - 2)) || [];
 

tests/js/spec/components/charts/eventsRequest.spec.jsx

@@ -517,4 +517,35 @@ describe('EventsRequest', function () {
       );
     });
   });
+
+  describe('timeframe', function () {
+    beforeEach(function () {
+      doEventsRequest.mockClear();
+    });
+
+    it('passes query timeframe start and end to the child if supplied by timeseriesData', async function () {
+      doEventsRequest.mockImplementation(() =>
+        Promise.resolve({
+          p95: {
+            data: [[new Date(), [COUNT_OBJ]]],
+            start: 1627402280,
+            end: 1627402398,
+          },
+        })
+      );
+      wrapper = mountWithTheme(<EventsRequest {...DEFAULTS}>{mock}</EventsRequest>);
+
+      await tick();
+      wrapper.update();
+
+      expect(mock).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          timeframe: {
+            start: 1627402280000,
+            end: 1627402398000,
+          },
+        })
+      );
+    });
+  });
 });

tests/js/spec/views/performance/transactionSummary/content.spec.tsx

@@ -188,4 +188,48 @@ describe('Transaction Summary Content', function () {
     expect(transactionListProps.generatePerformanceTransactionEventsView).toBeDefined();
     expect(transactionListProps.handleOpenAllEventsClick).toBeDefined();
   });
+
+  it('Renders TransactionSummaryCharts withoutZerofill when feature flagged', async function () {
+    // @ts-expect-error
+    const projects = [TestStubs.Project()];
+    const {
+      organization,
+      location,
+      eventView,
+      spanOperationBreakdownFilter,
+      transactionName,
+    } = initialize(projects, {}, [
+      'performance-events-page',
+      'performance-chart-interpolation',
+    ]);
+    // @ts-expect-error
+    const routerContext = TestStubs.routerContext([{organization}]);
+
+    const wrapper = mountWithTheme(
+      <SummaryContent
+        location={location}
+        organization={organization}
+        eventView={eventView}
+        transactionName={transactionName}
+        isLoading={false}
+        totalValues={null}
+        spanOperationBreakdownFilter={spanOperationBreakdownFilter}
+        error={null}
+        onChangeFilter={() => {}}
+      />,
+      routerContext
+    );
+
+    // @ts-expect-error
+    await tick();
+    wrapper.update();
+
+    expect(wrapper.find('TransactionSummaryCharts')).toHaveLength(1);
+
+    const transactionSummaryChartsProps = wrapper
+      .find('TransactionSummaryCharts')
+      .first()
+      .props();
+    expect(transactionSummaryChartsProps.withoutZerofill).toEqual(true);
+  });
 });