feat(insights): add geo selector mobile module

static/app/views/insights/common/views/spans/selectors/subregionSelector.tsx

@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {type ComponentProps, Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import FeatureBadge from 'sentry/components/badge/featureBadge';
@@ -18,7 +18,11 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
 import {SpanMetricsField, subregionCodeToName} from 'sentry/views/insights/types';
 
-export default function SubregionSelector() {
+type Props = {
+  size?: ComponentProps<typeof CompactSelect>['size'];
+};
+
+export default function SubregionSelector({size}: Props) {
   const organization = useOrganization();
   const location = useLocation();
   const navigate = useNavigate();
@@ -54,6 +58,7 @@ export default function SubregionSelector() {
 
   return (
     <CompactSelect
+      size={size}
       searchable
       triggerProps={{
         prefix: (

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

@@ -8,6 +8,7 @@ import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useReleaseSelection} from 'sentry/views/insights/common/queries/useReleases';
+import SubregionSelector from 'sentry/views/insights/common/views/spans/selectors/subregionSelector';
 import {EventSamples} from 'sentry/views/insights/mobile/appStarts/components/eventSamples';
 import {SpanOpSelector} from 'sentry/views/insights/mobile/appStarts/components/spanOpSelector';
 import {SpanOperationTable} from 'sentry/views/insights/mobile/appStarts/components/tables/spanOperationTable';
@@ -83,6 +84,7 @@ export function SamplesTables({transactionName}) {
             clearSpansTableCursor
             moduleName={ModuleName.APP_START}
           />
+          <SubregionSelector />
         </FiltersContainer>
         <SegmentedControl
           onChange={value => {

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

@@ -19,7 +19,7 @@ import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import type {Sort} from 'sentry/utils/discover/fields';
 import {fieldAlignment} from 'sentry/utils/discover/fields';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import {decodeScalar, decodeSorts} from 'sentry/utils/queryString';
+import {decodeList, decodeScalar, decodeSorts} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -42,7 +42,7 @@ import {
 import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
 import {useTableQuery} from 'sentry/views/insights/mobile/screenload/components/tables/screensTable';
 import {MobileCursors} from 'sentry/views/insights/mobile/screenload/constants';
-import {SpanMetricsField} from 'sentry/views/insights/types';
+import {SpanMetricsField, type SubregionCode} from 'sentry/views/insights/types';
 
 const {SPAN_SELF_TIME, SPAN_DESCRIPTION, SPAN_GROUP, SPAN_OP, PROJECT_ID} =
   SpanMetricsField;
@@ -66,6 +66,9 @@ export function SpanOperationTable({
   const cursor = decodeScalar(location.query?.[MobileCursors.SPANS_TABLE]);
 
   const spanOp = decodeScalar(location.query[SpanMetricsField.SPAN_OP]) ?? '';
+  const subregions = decodeList(
+    location.query[SpanMetricsField.USER_GEO_SUBREGION]
+  ) as SubregionCode[];
   const startType =
     decodeScalar(location.query[SpanMetricsField.APP_START_TYPE]) ?? COLD_START_TYPE;
   const deviceClass = decodeScalar(location.query[SpanMetricsField.DEVICE_CLASS]) ?? '';
@@ -86,6 +89,9 @@ export function SpanOperationTable({
     `${SpanMetricsField.SPAN_OP}:${spanOp ? spanOp : `[${APP_START_SPANS.join(',')}]`}`,
     ...(spanOp ? [`${SpanMetricsField.SPAN_OP}:${spanOp}`] : []),
     ...(deviceClass ? [`${SpanMetricsField.DEVICE_CLASS}:${deviceClass}`] : []),
+    ...(subregions.length > 0
+      ? [`${SpanMetricsField.USER_GEO_SUBREGION}:[${subregions.join(',')}]`]
+      : []),
   ]);
 
   if (isProjectCrossPlatform) {

static/app/views/insights/mobile/common/components/tables/samplesTables.tsx

@@ -6,6 +6,7 @@ import {SegmentedControl} from 'sentry/components/segmentedControl';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {useReleaseSelection} from 'sentry/views/insights/common/queries/useReleases';
+import SubregionSelector from 'sentry/views/insights/common/views/spans/selectors/subregionSelector';
 import {SpanOpSelector} from 'sentry/views/insights/mobile/appStarts/components/spanOpSelector';
 import {DeviceClassSelector} from 'sentry/views/insights/mobile/common/components/deviceClassSelector';
 import {
@@ -100,6 +101,7 @@ export function SamplesTables({
             />
           )}
           <DeviceClassSelector size="md" clearSpansTableCursor />
+          <SubregionSelector />
         </FiltersContainer>
         <SegmentedControl
           onChange={value => setSampleType(value)}

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

@@ -4,7 +4,7 @@ import {t} from 'sentry/locale';
 import type {NewQuery} from 'sentry/types/organization';
 import EventView from 'sentry/utils/discover/eventView';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import {decodeScalar, decodeSorts} from 'sentry/utils/queryString';
+import {decodeList, decodeScalar, decodeSorts} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import usePageFilters from 'sentry/utils/usePageFilters';
@@ -16,6 +16,7 @@ import {useReleaseSelection} from 'sentry/views/insights/common/queries/useRelea
 import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
 import {EventSamplesTable} from 'sentry/views/insights/mobile/screenload/components/tables/eventSamplesTable';
 import {useTableQuery} from 'sentry/views/insights/mobile/screenload/components/tables/screensTable';
+import {SpanMetricsField} from 'sentry/views/insights/types';
 
 const DEFAULT_SORT = {
   kind: 'desc',
@@ -43,7 +44,8 @@ export function ScreenLoadEventSamples({
   const cursor = decodeScalar(location.query?.[cursorName]);
   const {selectedPlatform: platform, isProjectCrossPlatform} = useCrossPlatformProject();
 
-  const deviceClass = decodeScalar(location.query['device.class']);
+  const deviceClass = decodeScalar(location.query[SpanMetricsField.DEVICE_CLASS]);
+  const subregions = decodeList(location.query[SpanMetricsField.USER_GEO_SUBREGION]);
 
   const searchQuery = useMemo(() => {
     const mutableQuery = new MutableSearch([
@@ -52,6 +54,13 @@ export function ScreenLoadEventSamples({
       `release:${release}`,
     ]);
 
+    if (subregions.length > 0) {
+      mutableQuery.addDisjunctionFilterValues(
+        SpanMetricsField.USER_GEO_SUBREGION,
+        subregions
+      );
+    }
+
     if (isProjectCrossPlatform) {
       mutableQuery.addFilterValue('os.name', platform);
     }
@@ -65,7 +74,7 @@ export function ScreenLoadEventSamples({
     }
 
     return mutableQuery;
-  }, [deviceClass, isProjectCrossPlatform, platform, release, transaction]);
+  }, [deviceClass, isProjectCrossPlatform, platform, release, transaction, subregions]);
 
   const sort = decodeSorts(location.query[sortKey])[0] ?? DEFAULT_SORT;
 

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

@@ -26,6 +26,7 @@ import {generateProfileFlamechartRoute} from 'sentry/utils/profiling/routes';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import type {TableColumn} from 'sentry/views/discover/table/types';
+import SubregionSelector from 'sentry/views/insights/common/views/spans/selectors/subregionSelector';
 import {DeviceClassSelector} from 'sentry/views/insights/mobile/common/components/deviceClassSelector';
 import {ModuleName} from 'sentry/views/insights/types';
 import {TraceViewSources} from 'sentry/views/performance/newTraceDetails/traceMetadataHeader';
@@ -182,7 +183,10 @@ export function EventSamplesTable({
       {!footerAlignedPagination && (
         <Header>
           {showDeviceClassSelector && (
-            <DeviceClassSelector moduleName={ModuleName.SCREEN_LOAD} />
+            <StyledControls>
+              <DeviceClassSelector moduleName={ModuleName.SCREEN_LOAD} />
+              <SubregionSelector size="xs" />
+            </StyledControls>
           )}
 
           <StyledPagination size="xs" pageLinks={pageLinks} onCursor={handleCursor} />
@@ -227,6 +231,11 @@ const Header = styled('div')`
   height: 26px;
 `;
 
+const StyledControls = styled('div')`
+  display: flex;
+  gap: ${space(1)};
+`;
+
 const IconWrapper = styled('div')`
   text-align: right;
   width: 100%;

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

@@ -8,7 +8,7 @@ import type {NewQuery} from 'sentry/types/organization';
 import EventView from 'sentry/utils/discover/eventView';
 import {NumberContainer} from 'sentry/utils/discover/styles';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import {decodeScalar} from 'sentry/utils/queryString';
+import {decodeList, decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import usePageFilters from 'sentry/utils/usePageFilters';
@@ -26,7 +26,11 @@ import {ScreensTable} from 'sentry/views/insights/mobile/common/components/table
 import {useTableQuery} from 'sentry/views/insights/mobile/screenload/components/tables/screensTable';
 import {MobileCursors} from 'sentry/views/insights/mobile/screenload/constants';
 import {Referrer} from 'sentry/views/insights/mobile/ui/referrers';
-import {ModuleName, SpanMetricsField} from 'sentry/views/insights/types';
+import {
+  ModuleName,
+  SpanMetricsField,
+  type SubregionCode,
+} from 'sentry/views/insights/types';
 
 const {SPAN_DESCRIPTION, SPAN_GROUP, SPAN_OP, PROJECT_ID} = SpanMetricsField;
 
@@ -44,6 +48,9 @@ export function SpanOperationTable({
 
   const spanOp = decodeScalar(location.query[SpanMetricsField.SPAN_OP]) ?? '';
   const deviceClass = decodeScalar(location.query[SpanMetricsField.DEVICE_CLASS]) ?? '';
+  const subregions = decodeList(
+    location.query[SpanMetricsField.USER_GEO_SUBREGION]
+  ) as SubregionCode[];
 
   // TODO: These filters seem to be too aggressive, check that they are ingesting properly
   const searchQuery = new MutableSearch([
@@ -53,6 +60,9 @@ export function SpanOperationTable({
     `${SpanMetricsField.SPAN_OP}:${spanOp ? spanOp : `[${VALID_SPAN_OPS.join(',')}]`}`,
     ...(spanOp ? [`${SpanMetricsField.SPAN_OP}:${spanOp}`] : []),
     ...(deviceClass ? [`${SpanMetricsField.DEVICE_CLASS}:${deviceClass}`] : []),
+    ...(subregions.length
+      ? [`${SpanMetricsField.USER_GEO_SUBREGION}:[${subregions.join(',')}]`]
+      : []),
   ]);
   const queryStringPrimary = appendReleaseFilters(
     searchQuery,