chore(starfish): Remove change column in screen load spans page (#57910)

This removes this change column on the spans page
for screen loads, updates the table query filter to only
include the primary filter and increases the limit on the number
of spans returned.

Also, small clean up on the sample list so description actually
overflows properly. Different configurations shown below: with
and without span description & small and large viewports.
![Screenshot 2023-10-11 at 12 09 13
PM](https://github.com/getsentry/sentry/assets/63818634/65fe5d94-e586-4ddc-ba38-1e242c3353bf)
![Screenshot 2023-10-11 at 12 07 56
PM](https://github.com/getsentry/sentry/assets/63818634/d6dc37dd-cf11-4bdc-8569-0856424e7ece)
![Screenshot 2023-10-11 at 12 07 49
PM](https://github.com/getsentry/sentry/assets/63818634/e79a642a-5547-4176-999a-ce0bd2abdc5a)
![Screenshot 2023-10-11 at 12 04 03
PM](https://github.com/getsentry/sentry/assets/63818634/8042243c-f7b5-403f-82b3-a94afa13b7c2)

![Screenshot 2023-10-11 at 12 03 56
PM](https://github.com/getsentry/sentry/assets/63818634/ca5c1643-366e-4ee4-a303-1c56d506fa53)

---------

Co-authored-by: Shruthilaya Jaganathan <shruthilayajaganathan@DW9H09PDFM.local>

static/app/views/starfish/utils/releaseComparison.tsx

@@ -4,7 +4,7 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 export function appendReleaseFilters(
   query: MutableSearch,
   primaryRelease: string | undefined,
-  secondaryRelease: string | undefined
+  secondaryRelease?: string
 ) {
   let queryString: string = query.formatString();
   if (

static/app/views/starfish/views/screens/screenLoadSpans/index.tsx

@@ -63,7 +63,6 @@ function ScreenLoadSpans() {
   const {
     spanGroup,
     primaryRelease,
-    secondaryRelease,
     transaction: transactionName,
     spanDescription,
   } = location.query;
@@ -98,7 +97,6 @@ function ScreenLoadSpans() {
               <ScreenLoadSpansTable
                 transaction={transactionName}
                 primaryRelease={primaryRelease}
-                secondaryRelease={secondaryRelease}
               />
               {spanGroup && (
                 <SampleList

static/app/views/starfish/views/screens/screenLoadSpans/table.tsx

@@ -34,15 +34,10 @@ const {SPAN_SELF_TIME, SPAN_DESCRIPTION, SPAN_GROUP, SPAN_OP, PROJECT_ID} =
 
 type Props = {
   primaryRelease?: string;
-  secondaryRelease?: string;
   transaction?: string;
 };
 
-export function ScreenLoadSpansTable({
-  transaction,
-  primaryRelease,
-  secondaryRelease,
-}: Props) {
+export function ScreenLoadSpansTable({transaction, primaryRelease}: Props) {
   const location = useLocation();
   const {selection} = usePageFilters();
   const organization = useOrganization();
@@ -54,11 +49,7 @@ export function ScreenLoadSpansTable({
     `transaction:${transaction}`,
     'span.op:[file.read,file.write,ui.load,http.client,db,db.sql.room,db.sql.query,db.sql.transaction]',
   ]);
-  const queryStringPrimary = appendReleaseFilters(
-    searchQuery,
-    primaryRelease,
-    secondaryRelease
-  );
+  const queryStringPrimary = appendReleaseFilters(searchQuery, primaryRelease);
 
   const sort = useModuleSort(QueryParameterNames.SPANS_SORT, {
     kind: 'desc',
@@ -73,7 +64,6 @@ export function ScreenLoadSpansTable({
       SPAN_GROUP,
       SPAN_DESCRIPTION,
       `avg(${SPAN_SELF_TIME})`, // TODO: Update these to avgIf with primary release when available
-      `avg_compare(${SPAN_SELF_TIME},release,${primaryRelease},${secondaryRelease})`,
       'count()',
       'time_spent_percentage(local)',
       `sum(${SPAN_SELF_TIME})`,
@@ -100,8 +90,6 @@ export function ScreenLoadSpansTable({
     [SPAN_DESCRIPTION]: t('Span Description'),
     'count()': DataTitles.count,
     [`avg(${SPAN_SELF_TIME})`]: DataTitles.avg,
-    [`avg_compare(${SPAN_SELF_TIME},release,${primaryRelease},${secondaryRelease})`]:
-      DataTitles.change,
     'time_spent_percentage(local)': DataTitles.timeSpent,
   };
 

static/app/views/starfish/views/screens/screensTable.tsx

@@ -210,7 +210,7 @@ export function useTableQuery({
     eventView,
     location,
     orgSlug: organization.slug,
-    limit: 10,
+    limit: 25,
     referrer,
     options: {
       refetchOnWindowFocus: false,

static/app/views/starfish/views/spanSummaryPage/sampleList/index.tsx

@@ -154,15 +154,22 @@ const SpanSummaryProjectAvatar = styled(ProjectAvatar)`
 
 const HeaderContainer = styled('div')`
   width: 100%;
-  display: flex;
-  flex-direction: row;
   padding-bottom: ${space(2)};
   padding-top: ${space(1)};
+
+  display: grid;
+  grid-template-rows: auto auto auto;
+
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
+    grid-template-rows: auto;
+    grid-template-columns: auto 1fr auto;
+  }
 `;
 
 const TitleContainer = styled('div')`
   width: 100%;
   position: relative;
+  height: 40px;
 `;
 
 const Title = styled('h4')`
@@ -171,9 +178,10 @@ const Title = styled('h4')`
   margin-bottom: 0;
 `;
 
-const SpanDescription = styled('span')`
+const SpanDescription = styled('div')`
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 35vw;
 `;