feat(starfish): Match screen indicator colour to chart (#58384)

Matches transaction name to bar chart
![Screenshot 2023-10-18 at 4 10
10 PM](https://github.com/getsentry/sentry/assets/63818634/4e629d0c-e8cd-440d-83b9-16e614d3a509)

static/app/views/starfish/modules/mobile/pageload.tsx

@@ -16,7 +16,6 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {ReleaseComparisonSelector} from 'sentry/views/starfish/components/releaseSelector';
 import {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
 import {ScreensView, YAxis} from 'sentry/views/starfish/views/screens';
-import {ScreensTable} from 'sentry/views/starfish/views/screens/screensTable';
 
 export default function PageloadModule() {
   const organization = useOrganization();
@@ -44,7 +43,6 @@ export default function PageloadModule() {
                   <ReleaseComparisonSelector />
                 </Container>
                 <ScreensView yAxes={[YAxis.TTID, YAxis.TTFD]} />
-                <ScreensTable />
               </PageFiltersContainer>
             </Layout.Main>
           </Layout.Body>

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

@@ -1,4 +1,5 @@
 import {Fragment} from 'react';
+import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import Color from 'color';
 
@@ -6,23 +7,28 @@ import {BarChart} from 'sentry/components/charts/barChart';
 import _EventsRequest from 'sentry/components/charts/eventsRequest';
 import {getInterval} from 'sentry/components/charts/utils';
 import LoadingContainer from 'sentry/components/loading/loadingContainer';
-import {CHART_PALETTE} from 'sentry/constants/chartPalette';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {NewQuery} from 'sentry/types';
 import {Series, SeriesDataUnit} from 'sentry/types/echarts';
 import {defined} from 'sentry/utils';
 import EventView from 'sentry/utils/discover/eventView';
 import {AggregationOutputType} from 'sentry/utils/discover/fields';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
+import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
 import MiniChartPanel from 'sentry/views/starfish/components/miniChartPanel';
 import {useReleaseSelection} from 'sentry/views/starfish/queries/useReleases';
+import {SpanMetricsField} from 'sentry/views/starfish/types';
 import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/starfish/utils/constants';
 import {appendReleaseFilters} from 'sentry/views/starfish/utils/releaseComparison';
-import {useTableQuery} from 'sentry/views/starfish/views/screens/screensTable';
+import {
+  ScreensTable,
+  useTableQuery,
+} from 'sentry/views/starfish/views/screens/screensTable';
 
 export enum YAxis {
   WARM_START,
@@ -35,6 +41,8 @@ export enum YAxis {
   COUNT,
 }
 
+export const TOP_SCREENS = 5;
+
 export const YAXIS_COLUMNS: Readonly<Record<YAxis, string>> = {
   [YAxis.WARM_START]: 'avg(measurements.app_start_warm)',
   [YAxis.COLD_START]: 'avg(measurements.app_start_cold)',
@@ -87,7 +95,10 @@ type Props = {
 
 export function ScreensView({yAxes, additionalFilters, chartHeight}: Props) {
   const pageFilter = usePageFilters();
+  const {selection} = pageFilter;
   const location = useLocation();
+  const theme = useTheme();
+  const {query: locationQuery} = location;
 
   const yAxisCols = yAxes.map(val => YAXIS_COLUMNS[val]);
 
@@ -104,29 +115,38 @@ export function ScreensView({yAxes, additionalFilters, chartHeight}: Props) {
   ]);
   const queryString = appendReleaseFilters(query, primaryRelease, secondaryRelease);
 
+  const orderby = decodeScalar(locationQuery.sort, `-count`);
+  const newQuery: NewQuery = {
+    name: '',
+    fields: [
+      'transaction',
+      SpanMetricsField.PROJECT_ID,
+      'avg(measurements.time_to_initial_display)', // TODO: Update these to avgIf with primary release when available
+      `avg_compare(measurements.time_to_initial_display,release,${primaryRelease},${secondaryRelease})`,
+      'avg(measurements.time_to_full_display)',
+      `avg_compare(measurements.time_to_full_display,release,${primaryRelease},${secondaryRelease})`,
+      'count()',
+    ],
+    query: queryString,
+    dataset: DiscoverDatasets.METRICS,
+    version: 2,
+    projects: selection.projects,
+  };
+  newQuery.orderby = orderby;
+  const tableEventView = EventView.fromNewQueryWithLocation(newQuery, location);
+
   useSynchronizeCharts();
-  const {data: topTransactionsData, isLoading: topTransactionsLoading} = useTableQuery({
-    eventView: EventView.fromNewQueryWithLocation(
-      {
-        name: '',
-        fields: ['transaction', 'count()'],
-        orderby: '-count',
-        query: queryString,
-        dataset: DiscoverDatasets.METRICS,
-        version: 2,
-        interval: getInterval(
-          pageFilter.selection.datetime,
-          STARFISH_CHART_INTERVAL_FIDELITY
-        ),
-      },
-      location
-    ),
+  const {
+    data: topTransactionsData,
+    isLoading: topTransactionsLoading,
+    pageLinks,
+  } = useTableQuery({
+    eventView: tableEventView,
     enabled: !isReleasesLoading,
-    limit: 5,
   });
 
   const topTransactions =
-    topTransactionsData?.data?.map(datum => datum.transaction) ?? [];
+    topTransactionsData?.data?.slice(0, 5).map(datum => datum.transaction) ?? [];
 
   const topEventsQuery = new MutableSearch([
     'event.type:transaction',
@@ -217,8 +237,10 @@ export function ScreensView({yAxes, additionalFilters, chartHeight}: Props) {
             value: row[YAXIS_COLUMNS[val]],
             itemStyle: {
               color: isPrimary
-                ? CHART_PALETTE[6][index]
-                : Color(CHART_PALETTE[6][index]).lighten(0.5).string(),
+                ? theme.charts.getColorPalette(TOP_SCREENS - 2)[index]
+                : Color(theme.charts.getColorPalette(TOP_SCREENS - 2)[index])
+                    .lighten(0.5)
+                    .string(),
             },
           } as SeriesDataUnit;
         });
@@ -260,6 +282,12 @@ export function ScreensView({yAxes, additionalFilters, chartHeight}: Props) {
   return (
     <div data-test-id="starfish-mobile-view">
       <ChartsContainer>{renderBarCharts()}</ChartsContainer>
+      <ScreensTable
+        eventView={tableEventView}
+        data={topTransactionsData}
+        isLoading={topTransactionsLoading}
+        pageLinks={pageLinks}
+      />
     </div>
   );
 }

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

@@ -6,7 +6,6 @@ import SortLink from 'sentry/components/gridEditable/sortLink';
 import Link from 'sentry/components/links/link';
 import Pagination from 'sentry/components/pagination';
 import {t} from 'sentry/locale';
-import {NewQuery} from 'sentry/types';
 import {
   TableData,
   TableDataRow,
@@ -15,65 +14,29 @@ import {
 import EventView, {isFieldSortable, MetaType} from 'sentry/utils/discover/eventView';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import {fieldAlignment} from 'sentry/utils/discover/fields';
-import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import {decodeScalar} from 'sentry/utils/queryString';
-import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
-import usePageFilters from 'sentry/utils/usePageFilters';
+import TopResultsIndicator from 'sentry/views/discover/table/topResultsIndicator';
 import {TableColumn} from 'sentry/views/discover/table/types';
 import {useReleaseSelection} from 'sentry/views/starfish/queries/useReleases';
 import {SpanMetricsField} from 'sentry/views/starfish/types';
-import {appendReleaseFilters} from 'sentry/views/starfish/utils/releaseComparison';
 import {useRoutingContext} from 'sentry/views/starfish/utils/routingContext';
+import {TOP_SCREENS} from 'sentry/views/starfish/views/screens';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
-export function ScreensTable() {
-  const {selection} = usePageFilters();
+type Props = {
+  data: TableData | undefined;
+  eventView: EventView;
+  isLoading: boolean;
+  pageLinks: string | undefined;
+};
+
+export function ScreensTable({data, eventView, isLoading, pageLinks}: Props) {
   const location = useLocation();
   const organization = useOrganization();
   const routingContext = useRoutingContext();
-  const {query} = location;
-  const {
-    primaryRelease,
-    secondaryRelease,
-    isLoading: isReleasesLoading,
-  } = useReleaseSelection();
-
-  const searchQuery = new MutableSearch([
-    'event.type:transaction',
-    'transaction.op:ui.load',
-  ]);
-  const queryStringPrimary = appendReleaseFilters(
-    searchQuery,
-    primaryRelease,
-    secondaryRelease
-  );
-
-  const orderby = decodeScalar(query.sort, `-count`);
-  const newQuery: NewQuery = {
-    name: '',
-    fields: [
-      'transaction',
-      SpanMetricsField.PROJECT_ID,
-      'avg(measurements.time_to_initial_display)', // TODO: Update these to avgIf with primary release when available
-      `avg_compare(measurements.time_to_initial_display,release,${primaryRelease},${secondaryRelease})`,
-      'avg(measurements.time_to_full_display)',
-      `avg_compare(measurements.time_to_full_display,release,${primaryRelease},${secondaryRelease})`,
-      'count()',
-    ],
-    query: queryStringPrimary,
-    dataset: DiscoverDatasets.METRICS,
-    version: 2,
-    projects: selection.projects,
-  };
-  newQuery.orderby = orderby;
-  const eventView = EventView.fromNewQueryWithLocation(newQuery, location);
+  const {primaryRelease, secondaryRelease} = useReleaseSelection();
 
-  const {data, isLoading, pageLinks} = useTableQuery({
-    eventView,
-    enabled: !isReleasesLoading,
-  });
   const eventViewColumns = eventView.getColumns();
 
   const columnNameMap = {
@@ -92,22 +55,27 @@ export function ScreensTable() {
       return row[column.key];
     }
 
+    const index = data.data.indexOf(row);
+
     const field = String(column.key);
 
     if (field === 'transaction') {
       return (
-        <Link
-          to={`${routingContext.baseURL}/pageload/spans/?${qs.stringify({
-            ...location.query,
-            project: row['project.id'],
-            transaction: row.transaction,
-            primaryRelease,
-            secondaryRelease,
-          })}`}
-          style={{display: `block`, width: `100%`}}
-        >
-          {row.transaction}
-        </Link>
+        <Fragment>
+          <TopResultsIndicator count={TOP_SCREENS} index={index} />
+          <Link
+            to={`${routingContext.baseURL}/pageload/spans/?${qs.stringify({
+              ...location.query,
+              project: row['project.id'],
+              transaction: row.transaction,
+              primaryRelease,
+              secondaryRelease,
+            })}`}
+            style={{display: `block`, width: `100%`}}
+          >
+            {row.transaction}
+          </Link>
+        </Fragment>
       );
     }