feat(trace-view-load-more): Minor UI changes and traceInfo bugfix. (#56596)

Project:
[link](https://www.notion.so/sentry/Workaround-for-the-100-Transaction-Limit-on-Trace-View-b51eb23edf254dc8804f4a395df2147d)

Feature flag: `organizations:trace-view-load-more`

This pr updates the limit exceeded message and fixes limit count bug
when max limit is reached in the trace-view. Currently, errors/issues
that appear in transaction details, are treated as individual rows in
the traceview.
<img width="1254" alt="Screenshot 2023-09-20 at 3 53 32 PM"
src="https://github.com/getsentry/sentry/assets/60121741/bd490d9b-2245-42a1-bfaf-ac1a2728a95c">
<img width="1272" alt="Screenshot 2023-09-20 at 3 53 10 PM"
src="https://github.com/getsentry/sentry/assets/60121741/5f3f6121-c01a-4276-8de5-8efdbcc57019">

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>
Co-authored-by: Nar Saynorath <nar.saynorath@sentry.io>

static/app/views/performance/traceDetails/limitExceededMessage.tsx

@@ -30,48 +30,53 @@ function LimitExceededMessage({
   meta,
   handleLimitChange,
 }: LimitExceededMessageProps) {
-  const count = traceInfo.transactions.size + traceInfo.errors.size;
-  const totalEvents = (meta && meta.transactions + meta.errors) ?? count;
+  // Number of events part of the traceView. Includes errors/issues appearing within txn details ui
+  // that appears when you click into a txn row.
+  const displayedEventsCount = traceInfo.transactions.size + traceInfo.errors.size;
+
+  const traceMetaEventsCount =
+    (meta && meta.transactions + meta.errors) ?? displayedEventsCount;
   const location = useLocation();
 
-  if (totalEvents === null || count >= totalEvents) {
+  if (traceMetaEventsCount === null || displayedEventsCount >= traceMetaEventsCount) {
     return null;
   }
 
   const target = traceEventView.getResultsViewUrlTarget(organization.slug);
 
+  // Number of rows in the trace view. Doesnot include associated errors/issues appearing in
+  // txn detail.
+  const displayedRowsCount = traceInfo.transactions.size + traceInfo.trailingOrphansCount;
+
   // Increment by by multiples of 500.
-  const increment = count <= 100 ? 400 : 500;
-  const currentLimit = location.query.limit
-    ? Number(location.query.limit)
-    : DEFAULT_TRACE_ROWS_LIMIT; // TODO Abdullah Khan: Use count when extra orphan row bug is fixed.
+  const increment = displayedRowsCount <= 100 ? 400 : 500;
 
   const discoverLink = (
     <DiscoverFeature>
       {({hasFeature}) => (
         <StyledLink disabled={!hasFeature} to={target}>
-          {t('open in Discover')}
+          {t('Discover')}
         </StyledLink>
       )}
     </DiscoverFeature>
   );
 
   const limitExceededMessage = tct(
-    'Limited to a view of [count] rows. To view the full list, [discover].',
+    'Limited to a view of [count] rows. To view the full list, go to [discover].',
     {
-      count,
+      count: displayedRowsCount,
       discover: discoverLink,
     }
   );
 
   const loadBiggerTraceMessage = tct(
-    'Click [loadMore:here] to build a view with more rows or to view the full list, [discover].',
+    '[loadMore:Show more] of this trace or go to the full list of events in [discover]',
     {
       loadMore: (
         <Button
           priority="link"
           onClick={() => {
-            const newLimit = currentLimit + increment;
+            const newLimit = displayedRowsCount + increment;
             if (handleLimitChange) {
               handleLimitChange(newLimit);
             }
@@ -90,7 +95,7 @@ function LimitExceededMessage({
   return (
     <MessageRow>
       {organization.features.includes('trace-view-load-more') &&
-      count < MAX_TRACE_ROWS_LIMIT
+      displayedRowsCount < MAX_TRACE_ROWS_LIMIT
         ? loadBiggerTraceMessage
         : limitExceededMessage}
     </MessageRow>

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

@@ -25,6 +25,11 @@ export type TraceInfo = {
    * The very earliest start timestamp in the trace.
    */
   startTimestamp: number;
+  /**
+   * The number of events that are not transactions,
+   * appearing as it's own row in the trace view
+   */
+  trailingOrphansCount: number;
   /**
    * The transactions in the trace.
    */

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

@@ -45,7 +45,7 @@ function transactionVisitor() {
       accumulator.errors.add(error.event_id);
     }
     for (const performanceIssue of event.performance_issues ?? []) {
-      accumulator.errors.add(performanceIssue.event_id);
+      accumulator.performanceIssues.add(performanceIssue.event_id);
     }
 
     accumulator.transactions.add(event.event_id);
@@ -102,6 +102,7 @@ export function getTraceInfo(
     startTimestamp: Number.MAX_SAFE_INTEGER,
     endTimestamp: 0,
     maxGeneration: 0,
+    trailingOrphansCount: 0,
   };
 
   const transactionsInfo = traces.reduce(
@@ -113,6 +114,7 @@ export function getTraceInfo(
   // Accumulate orphan error information.
   return orphanErrors.reduce((accumulator: TraceInfo, event: TraceError) => {
     accumulator.errors.add(event.event_id);
+    accumulator.trailingOrphansCount++;
 
     if (event.timestamp) {
       accumulator.startTimestamp = Math.min(accumulator.startTimestamp, event.timestamp);