fix(webvitals): Fix page overview slideout panel not querying for INP samples properly (#64754)

Fixes page overview slideout panel not querying for INP samples
properly:
- fixes inp p90 and median thresholds flipped incorrectly
- properly map inp query filters back to fid to avoid invalid queries
- map fid response to inp for the samples query

static/app/views/performance/browser/webVitals/pageOverviewWebVitalsDetailPanel.tsx

@@ -38,6 +38,7 @@ import type {
   TransactionSampleRowWithScore,
   WebVitals,
 } from 'sentry/views/performance/browser/webVitals/utils/types';
+import {useReplaceFidWithInpSetting} from 'sentry/views/performance/browser/webVitals/utils/useReplaceFidWithInpSetting';
 import {useStoredScoresSetting} from 'sentry/views/performance/browser/webVitals/utils/useStoredScoresSetting';
 import {generateReplayLink} from 'sentry/views/performance/transactionSummary/utils';
 import DetailPanel from 'sentry/views/starfish/components/detailPanel';
@@ -69,6 +70,7 @@ export function PageOverviewWebVitalsDetailPanel({
   const organization = useOrganization();
   const routes = useRoutes();
   const shouldUseStoredScores = useStoredScoresSetting();
+  const shouldReplaceFidWithInp = useReplaceFidWithInpSetting();
 
   const replayLinkGenerator = generateReplayLink(routes);
 
@@ -94,6 +96,9 @@ export function PageOverviewWebVitalsDetailPanel({
     ? calculatePerformanceScoreFromStoredTableDataRow(projectScoresData?.data?.[0])
     : calculatePerformanceScoreFromTableDataRow(projectData?.data?.[0]);
 
+  // TODO: remove this when INP is queryable. Need to map inp back to fid for search filters.
+  const webVitalFilter = shouldReplaceFidWithInp && webVital === 'inp' ? 'fid' : webVital;
+
   // Do 3 queries filtering on LCP to get a spread of good, meh, and poor events
   // We can't query by performance score yet, so we're using LCP as a best estimate
   const {data: goodData, isLoading: isGoodTransactionWebVitalsQueryLoading} =
@@ -101,12 +106,12 @@ export function PageOverviewWebVitalsDetailPanel({
       limit: 3,
       transaction: transaction ?? '',
       query: webVital
-        ? `measurements.${webVital}:<${PERFORMANCE_SCORE_P90S[webVital]}`
+        ? `measurements.${webVitalFilter}:<${PERFORMANCE_SCORE_P90S[webVital]}`
         : undefined,
       enabled: Boolean(webVital),
       withProfiles: true,
       sortName: 'webVitalSort',
-      webVital: webVital ?? undefined,
+      webVital: webVitalFilter ?? undefined,
     });
 
   const {data: mehData, isLoading: isMehTransactionWebVitalsQueryLoading} =
@@ -114,12 +119,12 @@ export function PageOverviewWebVitalsDetailPanel({
       limit: 3,
       transaction: transaction ?? '',
       query: webVital
-        ? `measurements.${webVital}:<${PERFORMANCE_SCORE_MEDIANS[webVital]} measurements.${webVital}:>=${PERFORMANCE_SCORE_P90S[webVital]}`
+        ? `measurements.${webVitalFilter}:<${PERFORMANCE_SCORE_MEDIANS[webVital]} measurements.${webVitalFilter}:>=${PERFORMANCE_SCORE_P90S[webVital]}`
         : undefined,
       enabled: Boolean(webVital),
       withProfiles: true,
       sortName: 'webVitalSort',
-      webVital: webVital ?? undefined,
+      webVital: webVitalFilter ?? undefined,
     });
 
   const {data: poorData, isLoading: isPoorTransactionWebVitalsQueryLoading} =
@@ -127,12 +132,12 @@ export function PageOverviewWebVitalsDetailPanel({
       limit: 3,
       transaction: transaction ?? '',
       query: webVital
-        ? `measurements.${webVital}:>=${PERFORMANCE_SCORE_MEDIANS[webVital]}`
+        ? `measurements.${webVitalFilter}:>=${PERFORMANCE_SCORE_MEDIANS[webVital]}`
         : undefined,
       enabled: Boolean(webVital),
       withProfiles: true,
       sortName: 'webVitalSort',
-      webVital: webVital ?? undefined,
+      webVital: webVitalFilter ?? undefined,
     });
 
   const data = [...goodData, ...mehData, ...poorData];

static/app/views/performance/browser/webVitals/utils/queries/rawWebVitalsQueries/calculatePerformanceScore.tsx

@@ -18,7 +18,7 @@ export const PERFORMANCE_SCORE_MEDIANS = {
   cls: 0.25,
   fid: 300,
   ttfb: 400,
-  inp: 200,
+  inp: 500,
 };
 
 export const PERFORMANCE_SCORE_P90S = {
@@ -27,7 +27,7 @@ export const PERFORMANCE_SCORE_P90S = {
   cls: 0.1,
   fid: 100,
   ttfb: 200,
-  inp: 500,
+  inp: 200,
 };
 
 export type Vitals = {

static/app/views/performance/browser/webVitals/utils/queries/storedScoreQueries/useTransactionSamplesWebVitalsScoresQuery.tsx

@@ -15,6 +15,7 @@ import {
   SORTABLE_INDEXED_FIELDS,
   SORTABLE_INDEXED_SCORE_FIELDS,
 } from 'sentry/views/performance/browser/webVitals/utils/types';
+import {useReplaceFidWithInpSetting} from 'sentry/views/performance/browser/webVitals/utils/useReplaceFidWithInpSetting';
 import {useStoredScoresSetting} from 'sentry/views/performance/browser/webVitals/utils/useStoredScoresSetting';
 import {useWebVitalsSort} from 'sentry/views/performance/browser/webVitals/utils/useWebVitalsSort';
 
@@ -43,6 +44,7 @@ export const useTransactionSamplesWebVitalsScoresQuery = ({
   const pageFilters = usePageFilters();
   const location = useLocation();
   const shouldUseStoredScores = useStoredScoresSetting();
+  const shouldReplaceFidWithInp = useReplaceFidWithInpSetting();
 
   const filteredSortableFields = shouldUseStoredScores
     ? SORTABLE_INDEXED_FIELDS
@@ -104,6 +106,8 @@ export const useTransactionSamplesWebVitalsScoresQuery = ({
     referrer: 'api.performance.browser.web-vitals.transaction',
   });
 
+  // TODO: Remove this once we can query for INP.
+  const webVitalKey = shouldReplaceFidWithInp && webVital === 'fid' ? 'inp' : webVital;
   const toNumber = (item: ReactText) => (item ? parseFloat(item.toString()) : undefined);
   const tableData: TransactionSampleRowWithScore[] =
     !isLoading && data?.data.length
@@ -128,12 +132,12 @@ export const useTransactionSamplesWebVitalsScoresQuery = ({
             ),
             ...(webVital
               ? {
-                  [`${webVital}Score`]: Math.round(
+                  [`${webVitalKey}Score`]: Math.round(
                     ((toNumber(row[`measurements.score.${webVital}`]) ?? 0) /
                       (toNumber(row[`measurements.score.weight.${webVital}`]) ?? 0)) *
                       100
                   ),
-                  [`${webVital}Weight`]: Math.round(
+                  [`${webVitalKey}Weight`]: Math.round(
                     (toNumber(row[`measurements.score.weight.${webVital}`]) ?? 0) * 100
                   ),
                 }