fix(performance-change-explorer): add delta to spans/functions lists (#54692)

Got some internal feedback saying that having the delta of the
span/function change duration would be helpful. I added the change in
average duration per transaction (in ms) to the right of the transaction
name.
<img width="600" alt="image"
src="https://github.com/getsentry/sentry/assets/72356613/6df8a91b-66df-4df0-b2da-965666b863fe">

static/app/views/performance/trends/changeExplorerUtils/functionsList.tsx

@@ -25,6 +25,7 @@ import {
   ErrorWrapper,
   ListItemWrapper,
   ListLink,
+  TimeDifference,
 } from 'sentry/views/performance/trends/changeExplorerUtils/spansList';
 import {
   NormalizedTrendsTransaction,
@@ -419,6 +420,7 @@ export function NumberedFunctionsList(props: NumberedFunctionsListProps) {
             <ListLink to={functionSummaryView} onClick={handleClickAnalytics}>
               {func.function}
             </ListLink>
+            <TimeDifference difference={func.avgTimeDifference / 1000000} />
           </ListItemWrapper>
         </li>
       );

static/app/views/performance/trends/changeExplorerUtils/spansList.spec.tsx

@@ -327,6 +327,7 @@ describe('Performance > Trends > Performance Change Explorer > Spans List', func
       expect(screen.getAllByTestId('list-item')[4]).toHaveTextContent('Removed');
       expect(screen.getAllByTestId('list-item')[5]).toHaveTextContent('span9');
       expect(screen.getAllByTestId('list-item')[5]).toHaveTextContent('Removed');
+      expect(screen.getAllByTestId('list-delta')).toHaveLength(6);
     });
   });
 
@@ -358,6 +359,7 @@ describe('Performance > Trends > Performance Change Explorer > Spans List', func
       expect(screen.getAllByTestId('list-item')[4]).toHaveTextContent('Added');
       expect(screen.getAllByTestId('list-item')[5]).toHaveTextContent('span2');
       expect(screen.getAllByTestId('list-item')[5]).toHaveTextContent('Regressed');
+      expect(screen.getAllByTestId('list-delta')).toHaveLength(6);
     });
   });
 
@@ -386,6 +388,7 @@ describe('Performance > Trends > Performance Change Explorer > Spans List', func
       expect(screen.getAllByTestId('list-item')[3]).toHaveTextContent('span4');
       expect(screen.getAllByTestId('list-item')[3]).toHaveTextContent('Removed');
       expect(screen.getAllByTestId('list-item')[4]).toBeUndefined();
+      expect(screen.getAllByTestId('list-delta')).toHaveLength(4);
     });
   });
 });

static/app/views/performance/trends/changeExplorerUtils/spansList.tsx

@@ -16,6 +16,7 @@ import {useDiscoverQuery} from 'sentry/utils/discover/discoverQuery';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import SuspectSpansQuery from 'sentry/utils/performance/suspectSpans/suspectSpansQuery';
 import {SuspectSpan, SuspectSpans} from 'sentry/utils/performance/suspectSpans/types';
+import theme from 'sentry/utils/theme';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import useProjects from 'sentry/utils/useProjects';
 import {spanDetailsRouteWithQuery} from 'sentry/views/performance/transactionSummary/transactionSpans/spanDetails/utils';
@@ -436,6 +437,23 @@ function addSpanChangeFields(
   });
 }
 
+export function TimeDifference({difference}: {difference: number}) {
+  const positive = difference >= 0;
+  const roundedDifference = difference.toPrecision(3);
+  return (
+    <p
+      style={{
+        alignSelf: 'end',
+        color: positive ? theme.red300 : theme.green300,
+        marginLeft: space(2),
+      }}
+      data-test-id="list-delta"
+    >
+      {positive ? `+${roundedDifference} ms` : `${roundedDifference} ms`}
+    </p>
+  );
+}
+
 export function NumberedSpansList(props: NumberedSpansListProps) {
   const {
     spans,
@@ -503,6 +521,7 @@ export function NumberedSpansList(props: NumberedSpansListProps) {
             <ListLink to={spanDetailsPage} onClick={handleClickAnalytics}>
               {span.description ? `${span.op} - ${span.description}` : span.op}
             </ListLink>
+            <TimeDifference difference={span.avgTimeDifference} />
           </ListItemWrapper>
         </li>
       );