diff --git a/static/app/views/performance/transactionSummary/transactionEvents/content.tsx b/static/app/views/performance/transactionSummary/transactionEvents/content.tsx
index 2e163c909e344d..3ba03379c9bfbf 100644
--- a/static/app/views/performance/transactionSummary/transactionEvents/content.tsx
+++ b/static/app/views/performance/transactionSummary/transactionEvents/content.tsx
@@ -1,3 +1,4 @@
+import {useMemo} from 'react';
import styled from '@emotion/styled';
import type {Location} from 'history';
import omit from 'lodash/omit';
@@ -72,57 +73,84 @@ function EventsContent(props: Props) {
projects,
} = props;
const routes = useRoutes();
- const eventView = originalEventView.clone();
- const transactionsListTitles = TRANSACTIONS_LIST_TITLES.slice();
- const project = projects.find(p => p.id === projectId);
- const fields = [...eventView.fields];
+ const {eventView, titles} = useMemo(() => {
+ const eventViewClone = originalEventView.clone();
+ const transactionsListTitles = TRANSACTIONS_LIST_TITLES.slice();
+ const project = projects.find(p => p.id === projectId);
- if (webVital) {
- transactionsListTitles.splice(3, 0, webVital);
- }
+ const fields = [...eventViewClone.fields];
- const spanOperationBreakdownConditions = filterToSearchConditions(
- spanOperationBreakdownFilter,
- location
- );
+ if (webVital) {
+ transactionsListTitles.splice(3, 0, webVital);
+ }
- if (spanOperationBreakdownConditions) {
- eventView.query = `${eventView.query} ${spanOperationBreakdownConditions}`.trim();
- transactionsListTitles.splice(2, 1, t('%s duration', spanOperationBreakdownFilter));
- }
+ const spanOperationBreakdownConditions = filterToSearchConditions(
+ spanOperationBreakdownFilter,
+ location
+ );
- const platform = platformToPerformanceType(projects, eventView.project);
- if (platform === ProjectPerformanceType.BACKEND) {
- const userIndex = transactionsListTitles.indexOf('user');
- if (userIndex > 0) {
- transactionsListTitles.splice(userIndex + 1, 0, 'http.method');
- fields.splice(userIndex + 1, 0, {field: 'http.method'});
+ if (spanOperationBreakdownConditions) {
+ eventViewClone.query =
+ `${eventViewClone.query} ${spanOperationBreakdownConditions}`.trim();
+ transactionsListTitles.splice(2, 1, t('%s duration', spanOperationBreakdownFilter));
}
- }
- if (
- organization.features.includes('profiling') &&
- project &&
- // only show for projects that already sent a profile
- // once we have a more compact design we will show this for
- // projects that support profiling as well
- project.hasProfiles
- ) {
- transactionsListTitles.push(t('profile'));
- fields.push({field: 'profile.id'});
- }
+ const platform = platformToPerformanceType(projects, eventViewClone.project);
+ if (platform === ProjectPerformanceType.BACKEND) {
+ const userIndex = transactionsListTitles.indexOf('user');
+ if (userIndex > 0) {
+ transactionsListTitles.splice(userIndex + 1, 0, 'http.method');
+ fields.splice(userIndex + 1, 0, {field: 'http.method'});
+ }
+ }
- if (
- organization.features.includes('session-replay') &&
- project &&
- projectSupportsReplay(project)
- ) {
- transactionsListTitles.push(t('replay'));
- fields.push({field: 'replayId'});
- }
+ if (
+ // only show for projects that already sent a profile
+ // once we have a more compact design we will show this for
+ // projects that support profiling as well
+ project?.hasProfiles &&
+ (organization.features.includes('profiling') ||
+ organization.features.includes('continuous-profiling'))
+ ) {
+ transactionsListTitles.push(t('profile'));
- eventView.fields = fields;
+ if (organization.features.includes('profiling')) {
+ fields.push({field: 'profile.id'});
+ }
+
+ if (organization.features.includes('continuous-profiling')) {
+ fields.push({field: 'profiler.id'});
+ fields.push({field: 'thread.id'});
+ fields.push({field: 'precise.start_ts'});
+ fields.push({field: 'precise.finish_ts'});
+ }
+ }
+
+ if (
+ organization.features.includes('session-replay') &&
+ project &&
+ projectSupportsReplay(project)
+ ) {
+ transactionsListTitles.push(t('replay'));
+ fields.push({field: 'replayId'});
+ }
+
+ eventViewClone.fields = fields;
+
+ return {
+ eventView: eventViewClone,
+ titles: transactionsListTitles,
+ };
+ }, [
+ originalEventView,
+ location,
+ organization,
+ projects,
+ projectId,
+ spanOperationBreakdownFilter,
+ webVital,
+ ]);
return (