feat(insights): Extend mobile mobile vitals queries to include navigation ops (#91859)

For React Native and Jetpack Compose on Android, not only
`transaction.op:ui.load` transaction are considered screens, but also
`transaction.op:navigation` is relevant.

Fixes #80215

Author: markushi

static/app/views/insights/common/queries/useHasTtfdConfigured.tsx

@@ -16,7 +16,7 @@ export function useTTFDConfigured(additionalFilters?: string[]) {
 
   const query = new MutableSearch([
     useEap ? 'is_transaction:true' : 'event.type:transaction',
-    'transaction.op:ui.load',
+    'transaction.op:[ui.load,navigation]',
     ...(additionalFilters ?? []),
   ]);
 

static/app/views/insights/common/queries/useReleases.tsx

@@ -56,7 +56,7 @@ export function useReleases(
       const newQuery: NewQuery = {
         name: '',
         fields: ['release', 'count()'],
-        query: `transaction.op:ui.load ${escapeFilterValue(
+        query: `transaction.op:[ui.load,navigation] ${escapeFilterValue(
           `release:[${releases.map(r => `"${r.version}"`).join()}]`
         )}`,
         dataset: useEap ? DiscoverDatasets.SPANS_EAP_RPC : DiscoverDatasets.METRICS,

static/app/views/insights/mobile/appStarts/components/spanOpSelector.tsx

@@ -49,7 +49,7 @@ export function SpanOpSelector({transaction, primaryRelease, secondaryRelease}:
     // Exclude this span because we can get TTID contributing spans instead
     '!span.description:"Initial Frame Render"',
     'has:span.description',
-    'transaction.op:ui.load',
+    'transaction.op:[ui.load,navigation]',
     `transaction:${transaction}`,
     `has:ttid`,
     `span.op:[${APP_START_SPANS.join(',')}]`,

static/app/views/insights/mobile/appStarts/components/tables/spanOperationTable.tsx

@@ -85,7 +85,7 @@ export function SpanOperationTable({
     // Exclude this span because we can get TTID contributing spans instead
     '!span.description:"Initial Frame Render"',
     'has:span.description',
-    'transaction.op:ui.load',
+    'transaction.op:[ui.load,navigation]',
     `transaction:${transaction}`,
     'has:ttid',
     `${SpanMetricsField.APP_START_TYPE}:${

static/app/views/insights/mobile/screenload/components/charts/screenCharts.tsx

@@ -66,7 +66,7 @@ export function ScreenCharts({additionalFilters}: Props) {
   const queryString = useMemo(() => {
     const query = new MutableSearch([
       useEap ? 'is_transaction:true' : 'event.type:transaction',
-      'transaction.op:ui.load',
+      'transaction.op:[ui.load,navigation]',
       ...(additionalFilters ?? []),
     ]);
 

static/app/views/insights/mobile/screenload/components/eventSamples.tsx

@@ -53,13 +53,13 @@ export function ScreenLoadEventSamples({
   const searchQuery = useMemo(() => {
     const mutableQuery = useEap
       ? new MutableSearch([
-          'span.op:ui.load',
+          'span.op:[ui.load,navigation]',
           `is_transaction:true`,
           `transaction:${transaction}`,
           `release:${release}`,
         ])
       : new MutableSearch([
-          'transaction.op:ui.load',
+          'transaction.op:[ui.load,navigation]',
           `transaction:${transaction}`,
           `release:${release}`,
         ]);

static/app/views/insights/mobile/screenload/components/spanOpSelector.tsx

@@ -18,6 +18,7 @@ export const TTID_CONTRIBUTING_SPAN_OPS = [
   'file.read',
   'file.write',
   'ui.load',
+  'navigation',
   'http.client',
   'db',
   'db.sql.room',
@@ -38,7 +39,7 @@ export function SpanOpSelector({transaction, primaryRelease, secondaryRelease}:
   const value = decodeScalar(location.query[SpanMetricsField.SPAN_OP]) ?? '';
 
   const searchQuery = new MutableSearch([
-    'transaction.op:ui.load',
+    'transaction.op:[ui.load,navigation]',
     `transaction:${transaction}`,
     `span.op:[${TTID_CONTRIBUTING_SPAN_OPS.join(',')}]`,
     'has:span.description',

static/app/views/insights/mobile/screenload/components/tables/screenLoadSpansTable.spec.tsx

@@ -61,7 +61,7 @@ describe('ScreenLoadSpansTable', function () {
           per_page: 25,
           project: [],
           query:
-            'transaction.op:ui.load transaction:MainActivity span.op:[file.read,file.write,ui.load,http.client,db,db.sql.room,db.sql.query,db.sql.transaction] has:span.description ( release:io.sentry.samples.android@7.0.0+2 OR release:io.sentry.samples.android@6.27.0+2 )',
+            'transaction.op:[ui.load,navigation] transaction:MainActivity span.op:[file.read,file.write,ui.load,navigation,http.client,db,db.sql.room,db.sql.query,db.sql.transaction] has:span.description ( release:io.sentry.samples.android@7.0.0+2 OR release:io.sentry.samples.android@6.27.0+2 )',
           referrer: 'api.starfish.get-span-operations',
           statsPeriod: '14d',
         }),
@@ -91,7 +91,7 @@ describe('ScreenLoadSpansTable', function () {
           per_page: 25,
           project: [],
           query:
-            'transaction.op:ui.load transaction:MainActivity has:span.description span.op:[file.read,file.write,ui.load,http.client,db,db.sql.room,db.sql.query,db.sql.transaction] ( release:io.sentry.samples.android@7.0.0+2 OR release:io.sentry.samples.android@6.27.0+2 )',
+            'transaction.op:[ui.load,navigation] transaction:MainActivity has:span.description span.op:[file.read,file.write,ui.load,navigation,http.client,db,db.sql.room,db.sql.query,db.sql.transaction] ( release:io.sentry.samples.android@7.0.0+2 OR release:io.sentry.samples.android@6.27.0+2 )',
           referrer: 'api.starfish.mobile-span-table',
           sort: '-sum(span.self_time)',
           statsPeriod: '14d',

static/app/views/insights/mobile/screenload/components/tables/screenLoadSpansTable.tsx

@@ -72,7 +72,7 @@ export function ScreenLoadSpansTable({
 
   const queryStringPrimary = useMemo(() => {
     const searchQuery = new MutableSearch([
-      'transaction.op:ui.load',
+      'transaction.op:[ui.load,navigation]',
       `transaction:${transaction}`,
       'has:span.description',
       ...(spanOp

static/app/views/insights/mobile/screenload/views/screenLoadSpansPage.tsx

@@ -78,7 +78,7 @@ export function ScreenLoadSpansContent() {
           dataset={DiscoverDatasets.METRICS}
           filters={[
             useEap ? 'is_transaction:true' : 'event.type:transaction',
-            'transaction.op:ui.load',
+            'transaction.op:[ui.load,navigation]',
             `transaction:${transactionName}`,
           ]}
           fields={[

static/app/views/insights/mobile/screens/components/screensOverview.tsx

@@ -36,7 +36,7 @@ const getQueryString = (
   selectedPlatform: string | undefined
 ) => {
   const {query: locationQuery} = location;
-  const query = new MutableSearch(['transaction.op:ui.load']);
+  const query = new MutableSearch(['transaction.op:[ui.load,navigation]']);
 
   const searchQuery = decodeScalar(locationQuery.query, '');
 

static/app/views/insights/mobile/screens/views/screensLandingPage.tsx

@@ -211,7 +211,7 @@ function ScreensLandingPage() {
     vital: VitalItem | undefined;
   }>({status: undefined, vital: undefined});
 
-  const query = new MutableSearch(['transaction.op:ui.load']);
+  const query = new MutableSearch(['transaction.op:[ui.load,navigation]']);
   if (isProjectCrossPlatform) {
     query.addFilterValue('os.name', selectedPlatform);
   }