feat(insights): add ttfd/ttid filters on screen load module (#101268)

Some customers requested an ability to see the which spans affect
ttid/ttfd, or don't affect anything at all. We can do this with a simple
filter
<img width="1210" height="423" alt="image"
src="https://github.com/user-attachments/assets/9463dc64-5e0f-4057-92b3-b96bf1c9fed0"
/>

Author: DominikB2014

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

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+
+import {CompactSelect, type SelectOption} from 'sentry/components/core/compactSelect';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import {useTTFDConfigured} from 'sentry/views/insights/common/queries/useHasTtfdConfigured';
+import {useAffectsSelection} from 'sentry/views/insights/mobile/screenload/data/useAffectsSelection';
+
+export function AffectSelector({transaction}: {transaction?: string}) {
+  const {value, setValue} = useAffectsSelection();
+  const {hasTTFD} = useTTFDConfigured([`transaction:"${transaction}"`]);
+
+  const options: Array<SelectOption<'TTID' | 'TTFD' | 'NONE' | 'ALL'>> = [
+    {value: 'ALL', label: t('All')},
+    {value: 'TTID', label: t('TTID')},
+  ];
+
+  if (hasTTFD) {
+    options.push({value: 'TTFD', label: t('TTFD')});
+  }
+
+  options.push({value: 'NONE', label: t('None')});
+
+  return (
+    <StyledCompactSelect
+      disallowEmptySelection
+      triggerProps={{prefix: t('Affects'), size: 'xs'}}
+      value={value}
+      options={options}
+      onChange={newValue => {
+        setValue(newValue.value);
+      }}
+    />
+  );
+}
+
+const StyledCompactSelect = styled(CompactSelect)`
+  margin-bottom: ${space(1)};
+`;

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

@@ -1,5 +1,5 @@
 import {Fragment, useMemo} from 'react';
-import {useTheme} from '@emotion/react';
+import {useTheme, type Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 import * as qs from 'query-string';
 
@@ -33,11 +33,13 @@ import {appendReleaseFilters} from 'sentry/views/insights/common/utils/releaseCo
 import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL';
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
 import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
+import {AffectSelector} from 'sentry/views/insights/mobile/screenload/components/affectSelector';
 import {
   SpanOpSelector,
   TTID_CONTRIBUTING_SPAN_OPS,
 } from 'sentry/views/insights/mobile/screenload/components/spanOpSelector';
 import {MobileCursors} from 'sentry/views/insights/mobile/screenload/constants';
+import {useAffectsSelection} from 'sentry/views/insights/mobile/screenload/data/useAffectsSelection';
 import {MODULE_DOC_LINK} from 'sentry/views/insights/mobile/screenload/settings';
 import {ModuleName, SpanFields} from 'sentry/views/insights/types';
 
@@ -64,6 +66,7 @@ export function ScreenLoadSpansTable({
   const location = useLocation();
   const cursor = decodeScalar(location.query?.[MobileCursors.SPANS_TABLE]);
   const {isProjectCrossPlatform, selectedPlatform} = useCrossPlatformProject();
+  const {value: affects} = useAffectsSelection();
 
   const spanOp = decodeScalar(location.query[SpanFields.SPAN_OP]) ?? '';
   const {hasTTFD, isPending: hasTTFDLoading} = useTTFDConfigured([
@@ -84,6 +87,15 @@ export function ScreenLoadSpansTable({
       searchQuery.addFilterValue('os.name', selectedPlatform);
     }
 
+    if (affects === 'NONE') {
+      searchQuery.addFilterValue(`!${SpanFields.TTFD}`, 'ttfd');
+      searchQuery.addFilterValue(`!${SpanFields.TTID}`, 'ttid');
+    } else if (affects === 'TTFD') {
+      searchQuery.addFilterValue(SpanFields.TTFD, 'ttfd');
+    } else if (affects === 'TTID') {
+      searchQuery.addFilterValue(SpanFields.TTID, 'ttid');
+    }
+
     return appendReleaseFilters(searchQuery, primaryRelease, secondaryRelease);
   }, [
     isProjectCrossPlatform,
@@ -92,6 +104,7 @@ export function ScreenLoadSpansTable({
     selectedPlatform,
     spanOp,
     transaction,
+    affects,
   ]);
 
   const sort = decodeSorts(location.query[QueryParameterNames.SPANS_SORT])[0] ?? {
@@ -361,11 +374,14 @@ export function ScreenLoadSpansTable({
 
   return (
     <Fragment>
-      <SpanOpSelector
-        primaryRelease={primaryRelease}
-        transaction={transaction}
-        secondaryRelease={secondaryRelease}
-      />
+      <ButtonContainer theme={theme}>
+        <SpanOpSelector
+          primaryRelease={primaryRelease}
+          transaction={transaction}
+          secondaryRelease={secondaryRelease}
+        />
+        <AffectSelector transaction={transaction} />
+      </ButtonContainer>
       <GridEditable
         isLoading={isPending || hasTTFDLoading}
         data={data}
@@ -386,3 +402,8 @@ const Container = styled('div')`
   ${p => p.theme.overflowEllipsis};
   text-align: right;
 `;
+
+const ButtonContainer = styled('div')<{theme: Theme}>`
+  display: flex;
+  gap: ${p => p.theme.space.md};
+`;

static/app/views/insights/mobile/screenload/data/useAffectsSelection.tsx

@@ -0,0 +1,24 @@
+import {useQueryState} from 'nuqs';
+
+import type {SelectKey} from 'sentry/components/core/compactSelect';
+
+const DEFAULT_VALUE = 'ALL';
+
+const AffectOptions = ['ALL', 'TTID', 'TTFD', 'NONE'];
+
+export function useAffectsSelection() {
+  const [queryState, setQueryState] = useQueryState('affects');
+  const isValid = AffectOptions.includes(queryState ?? '');
+  const value = (isValid ? queryState : DEFAULT_VALUE) as
+    | 'ALL'
+    | 'TTID'
+    | 'TTFD'
+    | 'NONE';
+
+  const setQueryStateWrapper = (newValue: SelectKey) => {
+    if (typeof newValue === 'string') {
+      setQueryState(newValue);
+    }
+  };
+  return {value, setValue: setQueryStateWrapper};
+}

static/app/views/insights/types.tsx

@@ -127,6 +127,8 @@ export enum SpanFields {
   APP_START_WARM = 'measurements.app_start_warm',
   MOBILE_FRAMES_DELAY = 'mobile.frames_delay',
   APP_START_TYPE = 'app_start_type',
+  TTID = 'sentry.ttid',
+  TTFD = 'sentry.ttfd',
 
   // Messaging fields
   MESSAGING_MESSAGE_ID = 'messaging.message.id',
@@ -226,7 +228,9 @@ export type SpanNumberFields =
   | SpanFields.PRECISE_START_TS
   | SpanFields.PRECISE_FINISH_TS
   | SpanFields.THREAD_ID
-  | SpanFields.PROJECT_ID;
+  | SpanFields.PROJECT_ID
+  | SpanFields.TTID
+  | SpanFields.TTFD;
 
 // TODO: Enforce that these fields all come from SpanFields
 export type SpanStringFields =