From 354ab75d00199d4d6afef7b6b6d7ff9f63142298 Mon Sep 17 00:00:00 2001
From: Tony Xiao <txiao@sentry.io>
Date: Thu, 14 Nov 2024 17:08:49 -0500
Subject: [PATCH 1/5] feat(functions): Use flamegraph as data source for
 slowest functions

This switches the slowest functions table within transaction summary to use
flamegraphs as a data source instead of the functions table. This is because
with continuous profiling, the functions table does not have any transaction
information for continuous profiles. So to be compatible with both profiling
modes, we need to switch to using flamegraphs.
---
 .../suspectFunctionsTable.tsx                 | 356 +++++++++++++-----
 static/app/views/explore/components/table.tsx |   4 +-
 .../transactionOverview/content.tsx           |   4 +-
 .../landing/slowestFunctionsTable.tsx         |   1 +
 4 files changed, 264 insertions(+), 101 deletions(-)

diff --git a/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx b/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx
index 25a65552978045..e5928a8c0a51d9 100644
--- a/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx
+++ b/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx
@@ -1,130 +1,292 @@
 import {Fragment, useCallback, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
+import clamp from 'lodash/clamp';
 
-import {CompactSelect} from 'sentry/components/compactSelect';
-import Pagination from 'sentry/components/pagination';
-import type {TableColumnKey as FunctionsField} from 'sentry/components/profiling/suspectFunctions/functionsTable';
-import {
-  functionsFields,
-  FunctionsTable,
-} from 'sentry/components/profiling/suspectFunctions/functionsTable';
+import {Button} from 'sentry/components/button';
+import ButtonBar from 'sentry/components/buttonBar';
+import {SectionHeading} from 'sentry/components/charts/styles';
+import EmptyStateWarning from 'sentry/components/emptyStateWarning';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {ArrayLinks} from 'sentry/components/profiling/arrayLinks';
+import {IconChevron} from 'sentry/icons/iconChevron';
+import {IconWarning} from 'sentry/icons/iconWarning';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
-import {browserHistory} from 'sentry/utils/browserHistory';
-import {useProfileFunctions} from 'sentry/utils/profiling/hooks/useProfileFunctions';
-import {formatSort} from 'sentry/utils/profiling/hooks/utils';
-import {decodeScalar} from 'sentry/utils/queryString';
-import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {trackAnalytics} from 'sentry/utils/analytics';
+import type EventView from 'sentry/utils/discover/eventView';
+import type {RenderFunctionBaggage} from 'sentry/utils/discover/fieldRenderers';
+import {FIELD_FORMATTERS} from 'sentry/utils/discover/fieldRenderers';
+import {getShortEventId} from 'sentry/utils/events';
+import {useAggregateFlamegraphQuery} from 'sentry/utils/profiling/hooks/useAggregateFlamegraphQuery';
+import {generateProfileRouteFromProfileReference} from 'sentry/utils/profiling/routes';
 import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
+import {
+  Table,
+  TableBody,
+  TableBodyCell,
+  TableHead,
+  TableHeadCell,
+  TableRow,
+  TableStatus,
+  useTableStyles,
+} from 'sentry/views/explore/components/table';
+import {getProfileTargetId} from 'sentry/views/profiling/utils';
+
+function sortFunctions(a: Profiling.FunctionMetric, b: Profiling.FunctionMetric) {
+  return b.sum - a.sum;
+}
+
+type Column = {
+  label: React.ReactNode;
+  value: keyof Profiling.FunctionMetric;
+};
+
+const COLUMNS: Column[] = [
+  {
+    label: t('function'),
+    value: 'name',
+  },
+  {
+    label: t('package'),
+    value: 'package',
+  },
+  {
+    label: t('avg()'),
+    value: 'avg',
+  },
+  {
+    label: t('p75()'),
+    value: 'p75',
+  },
+  {
+    label: t('p95()'),
+    value: 'p95',
+  },
+  {
+    label: t('p99()'),
+    value: 'p99',
+  },
+  {
+    label: t('examples'),
+    value: 'examples',
+  },
+];
 
 interface SuspectFunctionsTableProps {
   analyticsPageSource: 'performance_transaction' | 'profiling_transaction';
-  project: Project | undefined;
-  transaction: string;
+  eventView: EventView;
+  project: Project;
 }
 
-const FUNCTIONS_CURSOR_NAME = 'functionsCursor';
-
 export function SuspectFunctionsTable({
   analyticsPageSource,
+  eventView,
   project,
-  transaction,
 }: SuspectFunctionsTableProps) {
-  const [functionType, setFunctionType] = useState<'application' | 'system' | 'all'>(
-    'application'
-  );
   const location = useLocation();
-  const functionsCursor = useMemo(
-    () => decodeScalar(location.query[FUNCTIONS_CURSOR_NAME]),
-    [location.query]
-  );
-  const functionsSort = useMemo(
-    () =>
-      formatSort<FunctionsField>(
-        decodeScalar(location.query.functionsSort),
-        functionsFields,
-        {
-          key: 'sum()',
-          order: 'desc',
-        }
-      ),
-    [location.query.functionsSort]
-  );
+  const organization = useOrganization();
 
-  const handleFunctionsCursor = useCallback((cursor, pathname, query) => {
-    browserHistory.push({
-      pathname,
-      query: {...query, [FUNCTIONS_CURSOR_NAME]: cursor},
-    });
-  }, []);
-
-  const query = useMemo(() => {
-    const conditions = new MutableSearch('');
-    conditions.setFilterValues('transaction', [transaction]);
-    if (functionType === 'application') {
-      conditions.setFilterValues('is_application', ['1']);
-    } else if (functionType === 'system') {
-      conditions.setFilterValues('is_application', ['0']);
-    }
-    return conditions.formatString();
-  }, [functionType, transaction]);
-
-  const functionsQuery = useProfileFunctions<FunctionsField>({
-    fields: functionsFields,
-    referrer: 'api.profiling.profile-summary-functions-table',
-    sort: functionsSort,
-    query,
-    limit: 5,
-    cursor: functionsCursor,
+  const flamegraphQuery = useAggregateFlamegraphQuery({
+    // User query is only permitted when using transactions.
+    // If this is to be reused for strictly continuous profiling,
+    // it'll need to be swapped to use the `profiles` data source
+    // with no user query.
+    dataSource: 'transactions',
+    query: eventView.query,
+    metrics: true,
   });
 
+  const sortedMetrics = useMemo(() => {
+    const metrics = flamegraphQuery.data?.metrics || [];
+    return metrics.sort(sortFunctions);
+  }, [flamegraphQuery.data?.metrics]);
+
+  const pagination = useMemoryPagination(sortedMetrics, 5);
+
+  const metrics = useMemo(() => {
+    return sortedMetrics.slice(pagination.start, pagination.end);
+  }, [sortedMetrics, pagination]);
+
+  const {tableStyles} = useTableStyles({
+    items: COLUMNS,
+  });
+
+  const baggage: RenderFunctionBaggage = {
+    location,
+    organization,
+    unit: 'nanosecond',
+  };
+
   return (
     <Fragment>
       <TableHeader>
-        <CompactSelect
-          triggerProps={{prefix: t('Slowest Functions'), size: 'xs'}}
-          value={functionType}
-          options={[
-            {
-              label: t('All'),
-              value: 'all' as const,
-            },
-            {
-              label: t('Application'),
-              value: 'application' as const,
-            },
-            {
-              label: t('System'),
-              value: 'system' as const,
-            },
-          ]}
-          onChange={({value}) => setFunctionType(value)}
-        />
-        <StyledPagination
-          pageLinks={functionsQuery.getResponseHeader?.('Link')}
-          onCursor={handleFunctionsCursor}
-          size="xs"
-        />
+        <SectionHeading>{t('Suspect Functions')}</SectionHeading>
+        <ButtonBar merged>
+          <Button
+            icon={<IconChevron direction="left" />}
+            aria-label={t('Previous')}
+            size="xs"
+            {...pagination.previousButtonProps}
+          />
+          <Button
+            icon={<IconChevron direction="right" />}
+            aria-label={t('Next')}
+            size="xs"
+            {...pagination.nextButtonProps}
+          />
+        </ButtonBar>
       </TableHeader>
-      <FunctionsTable
-        analyticsPageSource={analyticsPageSource}
-        error={functionsQuery.isError ? functionsQuery.error.message : null}
-        isLoading={functionsQuery.isPending}
-        functions={functionsQuery.isFetched ? functionsQuery.data?.data ?? [] : []}
-        project={project}
-        sort={functionsSort}
-      />
+      <Table style={tableStyles}>
+        <TableHead>
+          <TableRow>
+            {COLUMNS.map((column, i) => {
+              return (
+                <TableHeadCell
+                  key={i}
+                  isFirst={i === 0}
+                  align={
+                    column.value === 'package' || column.value === 'name'
+                      ? 'left'
+                      : 'right'
+                  }
+                >
+                  {column.label}
+                </TableHeadCell>
+              );
+            })}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {flamegraphQuery.isPending ? (
+            <TableStatus>
+              <LoadingIndicator />
+            </TableStatus>
+          ) : flamegraphQuery.isError ? (
+            <TableStatus>
+              <IconWarning data-test-id="error-indicator" color="gray300" size="lg" />
+            </TableStatus>
+          ) : flamegraphQuery.isFetched ? (
+            metrics.map((metric, i) => (
+              <TableEntry
+                key={i}
+                analyticsPageSource={analyticsPageSource}
+                baggage={baggage}
+                metric={metric}
+                organization={organization}
+                project={project}
+              />
+            ))
+          ) : (
+            <TableStatus>
+              <EmptyStateWarning>
+                <p>{t('No functions found')}</p>
+              </EmptyStateWarning>
+            </TableStatus>
+          )}
+        </TableBody>
+      </Table>
     </Fragment>
   );
 }
 
+interface TableEntryProps {
+  analyticsPageSource: 'performance_transaction' | 'profiling_transaction';
+  baggage: RenderFunctionBaggage;
+  metric: Profiling.FunctionMetric;
+  organization: Organization;
+  project: Project;
+}
+
+function TableEntry({
+  analyticsPageSource,
+  baggage,
+  metric,
+  organization,
+  project,
+}: TableEntryProps) {
+  return (
+    <TableRow>
+      {COLUMNS.map(column => {
+        if (column.value === 'examples') {
+          const items = metric[column.value].map(example => {
+            return {
+              value: getShortEventId(getProfileTargetId(example)),
+              onClick: () =>
+                trackAnalytics('profiling_views.go_to_flamegraph', {
+                  organization,
+                  source: `${analyticsPageSource}.suspect_functions_table`,
+                }),
+              target: generateProfileRouteFromProfileReference({
+                orgSlug: organization.slug,
+                projectSlug: project.slug || '',
+                reference: example,
+                // specify the frame to focus, the flamegraph will switch
+                // to the appropriate thread when these are specified
+                frameName: metric.name,
+                framePackage: metric.package,
+              }),
+            };
+          });
+          return (
+            <TableBodyCell key={column.value}>
+              <ArrayLinks items={items} />
+            </TableBodyCell>
+          );
+        }
+
+        const formatter =
+          typeof metric[column.value] === 'number'
+            ? FIELD_FORMATTERS.duration.renderFunc
+            : FIELD_FORMATTERS.string.renderFunc;
+        return (
+          <TableBodyCell key={column.value}>
+            {formatter(column.value, metric, baggage)}
+          </TableBodyCell>
+        );
+      })}
+    </TableRow>
+  );
+}
+
+function useMemoryPagination(items: any[], size: number) {
+  const [pagination, setPagination] = useState({
+    start: 0,
+    end: size,
+  });
+
+  const page = Math.floor(pagination.start / size);
+  const toPage = useCallback(
+    (p: number) => {
+      const next = clamp(p, 0, Math.floor(items.length / size));
+
+      setPagination({
+        start: clamp(next * size, 0, items.length - size),
+        end: Math.min(next * size + size, items.length),
+      });
+    },
+    [size, items]
+  );
+
+  return {
+    page,
+    start: pagination.start,
+    end: pagination.end,
+    nextButtonProps: {
+      disabled: pagination.end >= items.length,
+      onClick: () => toPage(page + 1),
+    },
+    previousButtonProps: {
+      disabled: pagination.start <= 0,
+      onClick: () => toPage(page - 1),
+    },
+  };
+}
+
 const TableHeader = styled('div')`
   display: flex;
   justify-content: space-between;
   margin-bottom: ${space(1)};
 `;
-
-const StyledPagination = styled(Pagination)`
-  margin: 0 0 0 ${space(1)};
-`;
diff --git a/static/app/views/explore/components/table.tsx b/static/app/views/explore/components/table.tsx
index 203c0eaf0cbb5c..8d56f3a32a4f2a 100644
--- a/static/app/views/explore/components/table.tsx
+++ b/static/app/views/explore/components/table.tsx
@@ -50,8 +50,8 @@ export const ALLOWED_CELL_ACTIONS: Actions[] = [
 const MINIMUM_COLUMN_WIDTH = COL_WIDTH_MINIMUM;
 
 type Item = {
-  label: string;
-  value: React.ReactNode;
+  label: React.ReactNode;
+  value: string;
   width?: number | 'min-content';
 };
 
diff --git a/static/app/views/performance/transactionSummary/transactionOverview/content.tsx b/static/app/views/performance/transactionSummary/transactionOverview/content.tsx
index fc8f5c17932834..ab46fa4342f19e 100644
--- a/static/app/views/performance/transactionSummary/transactionOverview/content.tsx
+++ b/static/app/views/performance/transactionSummary/transactionOverview/content.tsx
@@ -466,9 +466,9 @@ function SummaryContent({
         />
 
         <SuspectFunctionsTable
-          project={project}
-          transaction={transactionName}
+          eventView={eventView}
           analyticsPageSource="performance_transaction"
+          project={project}
         />
         <RelatedIssues
           organization={organization}
diff --git a/static/app/views/profiling/landing/slowestFunctionsTable.tsx b/static/app/views/profiling/landing/slowestFunctionsTable.tsx
index c256c87959abf3..3796f105b61ff1 100644
--- a/static/app/views/profiling/landing/slowestFunctionsTable.tsx
+++ b/static/app/views/profiling/landing/slowestFunctionsTable.tsx
@@ -43,6 +43,7 @@ import {getPerformanceDuration} from 'sentry/views/performance/utils/getPerforma
 function sortFunctions(a: Profiling.FunctionMetric, b: Profiling.FunctionMetric) {
   return b.sum - a.sum;
 }
+
 function makeProfileLinkFromExample(
   organization: Organization,
   f: Profiling.FunctionMetric,

From f2b339fdb96694dd4362ea0e8eee4df31092ed5b Mon Sep 17 00:00:00 2001
From: Tony Xiao <txiao@sentry.io>
Date: Thu, 14 Nov 2024 17:15:54 -0500
Subject: [PATCH 2/5] fix typing

---
 .../profiling/suspectFunctions/suspectFunctionsTable.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx b/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx
index e5928a8c0a51d9..5910055b3e2750 100644
--- a/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx
+++ b/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx
@@ -78,7 +78,7 @@ const COLUMNS: Column[] = [
 interface SuspectFunctionsTableProps {
   analyticsPageSource: 'performance_transaction' | 'profiling_transaction';
   eventView: EventView;
-  project: Project;
+  project?: Project;
 }
 
 export function SuspectFunctionsTable({
@@ -197,7 +197,7 @@ interface TableEntryProps {
   baggage: RenderFunctionBaggage;
   metric: Profiling.FunctionMetric;
   organization: Organization;
-  project: Project;
+  project?: Project;
 }
 
 function TableEntry({

From c2789943ecea5f566346f1098ad39b9388b63829 Mon Sep 17 00:00:00 2001
From: Tony Xiao <txiao@sentry.io>
Date: Thu, 14 Nov 2024 17:16:59 -0500
Subject: [PATCH 3/5] remove unused components

---
 .../suspectFunctions/functionsTable.spec.tsx  | 162 -------------
 .../suspectFunctions/functionsTable.tsx       | 225 ------------------
 2 files changed, 387 deletions(-)
 delete mode 100644 static/app/components/profiling/suspectFunctions/functionsTable.spec.tsx
 delete mode 100644 static/app/components/profiling/suspectFunctions/functionsTable.tsx

diff --git a/static/app/components/profiling/suspectFunctions/functionsTable.spec.tsx b/static/app/components/profiling/suspectFunctions/functionsTable.spec.tsx
deleted file mode 100644
index b66e717067acbf..00000000000000
--- a/static/app/components/profiling/suspectFunctions/functionsTable.spec.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import type {ReactElement} from 'react';
-import {useEffect} from 'react';
-import {ProjectFixture} from 'sentry-fixture/project';
-
-import {render, screen} from 'sentry-test/reactTestingLibrary';
-
-import {FunctionsTable} from 'sentry/components/profiling/suspectFunctions/functionsTable';
-import ProjectsStore from 'sentry/stores/projectsStore';
-
-const project = ProjectFixture();
-
-function TestContext({children}: {children: ReactElement}) {
-  useEffect(() => {
-    ProjectsStore.loadInitialData([project]);
-    return () => ProjectsStore.reset();
-  }, []);
-
-  return children;
-}
-
-describe('FunctionsTable', function () {
-  it('renders loading', function () {
-    render(
-      <TestContext>
-        <FunctionsTable
-          analyticsPageSource="profiling_transaction"
-          isLoading
-          error={null}
-          functions={[]}
-          project={project}
-          sort={{key: 'p95()', order: 'desc'}}
-        />
-      </TestContext>
-    );
-    expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
-  });
-
-  it('renders empty data', function () {
-    render(
-      <TestContext>
-        <FunctionsTable
-          analyticsPageSource="profiling_transaction"
-          isLoading={false}
-          error={null}
-          functions={[]}
-          project={project}
-          sort={{key: 'p95()', order: 'desc'}}
-        />
-      </TestContext>
-    );
-
-    expect(screen.getByText('No results found for your query')).toBeInTheDocument();
-  });
-
-  it('renders one function', function () {
-    const func = {
-      'count()': 10,
-      'all_examples()': [
-        {profile_id: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'},
-        {profile_id: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb'},
-      ],
-      function: 'foo',
-      'p75()': 10000000,
-      'sum()': 25000000,
-      package: 'bar',
-    };
-
-    render(
-      <TestContext>
-        <FunctionsTable
-          analyticsPageSource="profiling_transaction"
-          isLoading={false}
-          error={null}
-          functions={[func]}
-          project={project}
-          sort={{key: 'p95()', order: 'desc'}}
-        />
-      </TestContext>
-    );
-
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('foo')).toBeInTheDocument();
-
-    expect(screen.getByText('Package')).toBeInTheDocument();
-    expect(screen.getByText('bar')).toBeInTheDocument();
-
-    expect(screen.getByText('Occurrences')).toBeInTheDocument();
-    expect(screen.getByText('10')).toBeInTheDocument();
-
-    expect(screen.getByText('P75 Self Time')).toBeInTheDocument();
-    expect(screen.getByText('10.00ms')).toBeInTheDocument();
-
-    expect(screen.getByText('Total Self Time')).toBeInTheDocument();
-    expect(screen.getByText('25.00ms')).toBeInTheDocument();
-  });
-
-  it('renders empty name', function () {
-    const func = {
-      'count()': 10,
-      'all_examples()': [
-        {profile_id: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'},
-        {profile_id: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb'},
-      ],
-      function: '',
-      'p75()': 10000000,
-      'sum()': 25000000,
-      package: 'bar',
-    };
-
-    render(
-      <TestContext>
-        <FunctionsTable
-          analyticsPageSource="profiling_transaction"
-          isLoading={false}
-          error={null}
-          functions={[func]}
-          project={project}
-          sort={{key: 'p75()', order: 'desc'}}
-        />
-      </TestContext>
-    );
-
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Unknown')).toBeInTheDocument();
-
-    expect(screen.getByText('Package')).toBeInTheDocument();
-    expect(screen.getByText('bar')).toBeInTheDocument();
-  });
-
-  it('renders empty package', function () {
-    const func = {
-      'count()': 10,
-      'all_examples()': [
-        {profile_id: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'},
-        {profile_id: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb'},
-      ],
-      function: 'foo',
-      'p75()': 10000000,
-      'sum()': 25000000,
-      package: '',
-    };
-
-    render(
-      <TestContext>
-        <FunctionsTable
-          analyticsPageSource="profiling_transaction"
-          isLoading={false}
-          error={null}
-          functions={[func]}
-          project={project}
-          sort={{key: 'p75()', order: 'desc'}}
-        />
-      </TestContext>
-    );
-
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('foo')).toBeInTheDocument();
-
-    expect(screen.getByText('Package')).toBeInTheDocument();
-    expect(screen.getByText('Unknown')).toBeInTheDocument();
-  });
-});
diff --git a/static/app/components/profiling/suspectFunctions/functionsTable.tsx b/static/app/components/profiling/suspectFunctions/functionsTable.tsx
deleted file mode 100644
index d58c0b88ee8437..00000000000000
--- a/static/app/components/profiling/suspectFunctions/functionsTable.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import {useCallback, useMemo} from 'react';
-import styled from '@emotion/styled';
-
-import Count from 'sentry/components/count';
-import type {GridColumnOrder} from 'sentry/components/gridEditable';
-import GridEditable, {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
-import PerformanceDuration from 'sentry/components/performanceDuration';
-import {ArrayLinks} from 'sentry/components/profiling/arrayLinks';
-import {t} from 'sentry/locale';
-import type {Project} from 'sentry/types/project';
-import {trackAnalytics} from 'sentry/utils/analytics';
-import {Container, NumberContainer} from 'sentry/utils/discover/styles';
-import {getShortEventId} from 'sentry/utils/events';
-import type {EventsResults, Sort} from 'sentry/utils/profiling/hooks/types';
-import {generateProfileRouteFromProfileReference} from 'sentry/utils/profiling/routes';
-import {renderTableHead} from 'sentry/utils/profiling/tableRenderer';
-import {useLocation} from 'sentry/utils/useLocation';
-import useOrganization from 'sentry/utils/useOrganization';
-import {getProfileTargetId} from 'sentry/views/profiling/utils';
-
-interface FunctionsTableProps {
-  analyticsPageSource: 'performance_transaction' | 'profiling_transaction';
-  error: string | null;
-  functions: EventsResults<TableColumnKey>['data'];
-  isLoading: boolean;
-  project: Project | undefined;
-  sort: Sort<any>;
-}
-
-export function FunctionsTable(props: FunctionsTableProps) {
-  const location = useLocation();
-  const organization = useOrganization();
-
-  const functions: TableDataRow[] = useMemo(() => {
-    const project = props.project;
-    if (!project) {
-      return [];
-    }
-
-    return props.functions.map(func => {
-      const examples = func['all_examples()'];
-
-      return {
-        ...func,
-        'all_examples()': examples.map(example => {
-          return {
-            value: getShortEventId(getProfileTargetId(example)),
-            onClick: () =>
-              trackAnalytics('profiling_views.go_to_flamegraph', {
-                organization,
-                source: `${props.analyticsPageSource}.suspect_functions_table`,
-              }),
-            target: generateProfileRouteFromProfileReference({
-              orgSlug: organization.slug,
-              projectSlug: project.slug,
-              reference: example,
-              // specify the frame to focus, the flamegraph will switch
-              // to the appropriate thread when these are specified
-              frameName: func.function as string,
-              framePackage: func.package as string,
-            }),
-          };
-        }),
-      };
-    });
-  }, [organization, props.project, props.functions, props.analyticsPageSource]);
-
-  const generateSortLink = useCallback(
-    (column: TableColumnKey) => {
-      if (!SORTABLE_COLUMNS.has(column)) {
-        return () => undefined;
-      }
-
-      const direction =
-        props.sort.key !== column ? 'desc' : props.sort.order === 'desc' ? 'asc' : 'desc';
-
-      return () => ({
-        ...location,
-        query: {
-          ...location.query,
-          functionsSort: `${direction === 'desc' ? '-' : ''}${column}`,
-        },
-      });
-    },
-    [location, props.sort]
-  );
-
-  return (
-    <GridEditable
-      isLoading={props.isLoading}
-      error={props.error}
-      data={functions}
-      columnOrder={COLUMN_ORDER.map(key => COLUMNS[key])}
-      columnSortBy={[]}
-      grid={{
-        renderHeadCell: renderTableHead({
-          currentSort: props.sort,
-          rightAlignedColumns: RIGHT_ALIGNED_COLUMNS,
-          sortableColumns: SORTABLE_COLUMNS,
-          generateSortLink,
-        }),
-        renderBodyCell: renderFunctionsTableCell,
-      }}
-    />
-  );
-}
-
-const RIGHT_ALIGNED_COLUMNS = new Set<TableColumnKey>(['p75()', 'sum()', 'count()']);
-
-const SORTABLE_COLUMNS = RIGHT_ALIGNED_COLUMNS;
-
-function renderFunctionsTableCell(
-  column: TableColumn,
-  dataRow: TableDataRow,
-  rowIndex: number,
-  columnIndex: number
-) {
-  return (
-    <ProfilingFunctionsTableCell
-      column={column}
-      dataRow={dataRow}
-      rowIndex={rowIndex}
-      columnIndex={columnIndex}
-    />
-  );
-}
-
-interface ProfilingFunctionsTableCellProps {
-  column: TableColumn;
-  columnIndex: number;
-  dataRow: TableDataRow;
-  rowIndex: number;
-}
-
-const EmptyValueContainer = styled('span')`
-  color: ${p => p.theme.gray300};
-`;
-
-function ProfilingFunctionsTableCell({
-  column,
-  dataRow,
-}: ProfilingFunctionsTableCellProps) {
-  const value = dataRow[column.key];
-
-  switch (column.key) {
-    case 'count()':
-      return (
-        <NumberContainer>
-          <Count value={value} />
-        </NumberContainer>
-      );
-    case 'p75()':
-    case 'sum()':
-      return (
-        <NumberContainer>
-          <PerformanceDuration nanoseconds={value} abbreviation />
-        </NumberContainer>
-      );
-    case 'all_examples()':
-      return <ArrayLinks items={value} />;
-    case 'function':
-    case 'package':
-      const name = value || <EmptyValueContainer>{t('Unknown')}</EmptyValueContainer>;
-      return <Container>{name}</Container>;
-    default:
-      return <Container>{value}</Container>;
-  }
-}
-
-export const functionsFields = [
-  'package',
-  'function',
-  'count()',
-  'p75()',
-  'sum()',
-  'all_examples()',
-] as const;
-
-export type TableColumnKey = (typeof functionsFields)[number];
-
-type TableDataRow = Record<TableColumnKey, any>;
-
-type TableColumn = GridColumnOrder<TableColumnKey>;
-
-const COLUMN_ORDER: TableColumnKey[] = [
-  'function',
-  'package',
-  'count()',
-  'p75()',
-  'sum()',
-  'all_examples()',
-];
-
-const COLUMNS: Record<TableColumnKey, TableColumn> = {
-  function: {
-    key: 'function',
-    name: t('Name'),
-    width: COL_WIDTH_UNDEFINED,
-  },
-  package: {
-    key: 'package',
-    name: t('Package'),
-    width: COL_WIDTH_UNDEFINED,
-  },
-  'p75()': {
-    key: 'p75()',
-    name: t('P75 Self Time'),
-    width: COL_WIDTH_UNDEFINED,
-  },
-  'sum()': {
-    key: 'sum()',
-    name: t('Total Self Time'),
-    width: COL_WIDTH_UNDEFINED,
-  },
-  'count()': {
-    key: 'count()',
-    name: t('Occurrences'),
-    width: COL_WIDTH_UNDEFINED,
-  },
-  'all_examples()': {
-    key: 'all_examples()',
-    name: t('Example Profiles'),
-    width: COL_WIDTH_UNDEFINED,
-  },
-};

From d3a314fb7206dc59c01051729c1db560f965b72e Mon Sep 17 00:00:00 2001
From: Tony Xiao <txiao@sentry.io>
Date: Thu, 14 Nov 2024 17:19:45 -0500
Subject: [PATCH 4/5] fix typing

---
 .../profiling/suspectFunctions/suspectFunctionsTable.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx b/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx
index 5910055b3e2750..c12594b5584e7f 100644
--- a/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx
+++ b/static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx
@@ -221,7 +221,7 @@ function TableEntry({
                 }),
               target: generateProfileRouteFromProfileReference({
                 orgSlug: organization.slug,
-                projectSlug: project.slug || '',
+                projectSlug: project?.slug || '',
                 reference: example,
                 // specify the frame to focus, the flamegraph will switch
                 // to the appropriate thread when these are specified

From 9d8905ea60f067b58097d06b6960391fc07c09d5 Mon Sep 17 00:00:00 2001
From: Tony Xiao <txiao@sentry.io>
Date: Fri, 15 Nov 2024 00:16:58 -0500
Subject: [PATCH 5/5] fix tests

---
 .../transactionOverview/content.spec.tsx      | 47 ++++++++++++++++
 .../transactionOverview/index.spec.tsx        | 56 ++++++++++++++++++-
 2 files changed, 101 insertions(+), 2 deletions(-)

diff --git a/static/app/views/performance/transactionSummary/transactionOverview/content.spec.tsx b/static/app/views/performance/transactionSummary/transactionOverview/content.spec.tsx
index d15ed40f769352..f045e3aad0b43d 100644
--- a/static/app/views/performance/transactionSummary/transactionOverview/content.spec.tsx
+++ b/static/app/views/performance/transactionSummary/transactionOverview/content.spec.tsx
@@ -142,6 +142,53 @@ describe('Transaction Summary Content', function () {
       url: '/organizations/org-slug/dynamic-sampling/custom-rules/',
       body: '',
     });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/profiling/flamegraph/',
+      body: {
+        activeProfileIndex: 0,
+        metadata: {
+          deviceClassification: '',
+          deviceLocale: '',
+          deviceManufacturer: '',
+          deviceModel: '',
+          deviceOSName: '',
+          deviceOSVersion: '',
+          durationNS: 0,
+          organizationID: 0,
+          platform: '',
+          profileID: '',
+          projectID: 0,
+          received: '0001-01-01T00:00:00Z',
+          sampled: false,
+          timestamp: '0001-01-01T00:00:00Z',
+          traceID: '',
+          transactionID: '',
+          transactionName: '',
+          version: '',
+        },
+        platform: '',
+        profiles: [
+          {
+            endValue: 0,
+            isMainThread: true,
+            name: '',
+            samples: [],
+            startValue: 0,
+            threadID: 0,
+            type: 'sampled',
+            unit: 'count',
+            weights: [],
+            sample_durations_ns: null,
+          },
+        ],
+        projectID: 0,
+        shared: {
+          frames: [],
+        },
+        transactionName: '',
+        metrics: [],
+      },
+    });
   });
 
   afterEach(function () {
diff --git a/static/app/views/performance/transactionSummary/transactionOverview/index.spec.tsx b/static/app/views/performance/transactionSummary/transactionOverview/index.spec.tsx
index 1b0fc7f9785a25..1e48c4c8123daf 100644
--- a/static/app/views/performance/transactionSummary/transactionOverview/index.spec.tsx
+++ b/static/app/views/performance/transactionSummary/transactionOverview/index.spec.tsx
@@ -4,6 +4,7 @@ import {TeamFixture} from 'sentry-fixture/team';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {
+  findByLabelText,
   render,
   renderGlobalModal,
   screen,
@@ -471,6 +472,55 @@ describe('Performance > TransactionSummary', function () {
       ],
     });
 
+    // Flamegraph mock
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/profiling/flamegraph/',
+      body: {
+        activeProfileIndex: 0,
+        metadata: {
+          deviceClassification: '',
+          deviceLocale: '',
+          deviceManufacturer: '',
+          deviceModel: '',
+          deviceOSName: '',
+          deviceOSVersion: '',
+          durationNS: 0,
+          organizationID: 0,
+          platform: '',
+          profileID: '',
+          projectID: 0,
+          received: '0001-01-01T00:00:00Z',
+          sampled: false,
+          timestamp: '0001-01-01T00:00:00Z',
+          traceID: '',
+          transactionID: '',
+          transactionName: '',
+          version: '',
+        },
+        platform: '',
+        profiles: [
+          {
+            endValue: 0,
+            isMainThread: true,
+            name: '',
+            samples: [],
+            startValue: 0,
+            threadID: 0,
+            type: 'sampled',
+            unit: 'count',
+            weights: [],
+            sample_durations_ns: null,
+          },
+        ],
+        projectID: 0,
+        shared: {
+          frames: [],
+        },
+        transactionName: '',
+        metrics: [],
+      },
+    });
+
     jest.spyOn(MEPSetting, 'get').mockImplementation(() => MEPState.AUTO);
   });
 
@@ -877,10 +927,12 @@ describe('Performance > TransactionSummary', function () {
 
       await screen.findByText('Transaction Summary');
 
-      expect(await screen.findByLabelText('Previous')).toBeInTheDocument();
+      const pagination = await screen.findByTestId('pagination');
+      expect(await findByLabelText(pagination, 'Previous')).toBeInTheDocument();
+      expect(await findByLabelText(pagination, 'Next')).toBeInTheDocument();
 
       // Click the 'next' button
-      await userEvent.click(screen.getByLabelText('Next'));
+      await userEvent.click(await findByLabelText(pagination, 'Next'));
 
       // Check the navigation.
       expect(browserHistory.push).toHaveBeenCalledWith({