chore(insights): Removes deprecated FID code paths from the web vitals module (#73203)

Deletes all instances of FID from webvitals code, since they have been
deprecated for a while and those code paths are no longer used.

static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.spec.tsx

@@ -72,7 +72,6 @@ describe('PerformanceScoreBreakdownChart', function () {
             'p75(measurements.fcp)',
             'p75(measurements.cls)',
             'p75(measurements.ttfb)',
-            'p75(measurements.fid)',
             'count()',
           ],
         }),
@@ -133,13 +132,11 @@ describe('PerformanceScoreBreakdownChart', function () {
             'weighted_performance_score(measurements.score.lcp)',
             'weighted_performance_score(measurements.score.fcp)',
             'weighted_performance_score(measurements.score.cls)',
-            'weighted_performance_score(measurements.score.fid)',
             'weighted_performance_score(measurements.score.inp)',
             'weighted_performance_score(measurements.score.ttfb)',
             'performance_score(measurements.score.lcp)',
             'performance_score(measurements.score.fcp)',
             'performance_score(measurements.score.cls)',
-            'performance_score(measurements.score.fid)',
             'performance_score(measurements.score.inp)',
             'performance_score(measurements.score.ttfb)',
             'count()',
@@ -190,7 +187,6 @@ describe('PerformanceScoreBreakdownChart', function () {
             'p75(measurements.fcp)',
             'p75(measurements.cls)',
             'p75(measurements.ttfb)',
-            'p75(measurements.fid)',
             'count()',
           ],
         }),
@@ -206,13 +202,11 @@ describe('PerformanceScoreBreakdownChart', function () {
             'weighted_performance_score(measurements.score.lcp)',
             'weighted_performance_score(measurements.score.fcp)',
             'weighted_performance_score(measurements.score.cls)',
-            'weighted_performance_score(measurements.score.fid)',
             'weighted_performance_score(measurements.score.inp)',
             'weighted_performance_score(measurements.score.ttfb)',
             'performance_score(measurements.score.lcp)',
             'performance_score(measurements.score.fcp)',
             'performance_score(measurements.score.cls)',
-            'performance_score(measurements.score.fid)',
             'performance_score(measurements.score.inp)',
             'performance_score(measurements.score.ttfb)',
             'count()',
@@ -228,7 +222,6 @@ describe('PerformanceScoreBreakdownChart', function () {
         {
           lcp: [],
           fcp: [],
-          fid: [],
           cls: [],
           ttfb: [],
           inp: [],

static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx

@@ -9,11 +9,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Series} from 'sentry/types/echarts';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import {
-  ORDER,
-  ORDER_WITH_INP,
-  ORDER_WITH_INP_WITHOUT_FID,
-} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
+import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
 import {PERFORMANCE_SCORE_WEIGHTS} from 'sentry/views/insights/browser/webVitals/queries/rawWebVitalsQueries/calculatePerformanceScore';
 import type {WebVitalsScoreBreakdown} from 'sentry/views/insights/browser/webVitals/queries/rawWebVitalsQueries/useProjectRawWebVitalsTimeseriesQuery';
 import {useProjectRawWebVitalsTimeseriesQuery} from 'sentry/views/insights/browser/webVitals/queries/rawWebVitalsQueries/useProjectRawWebVitalsTimeseriesQuery';
@@ -24,7 +20,6 @@ import {useProjectWebVitalsTimeseriesQuery} from 'sentry/views/insights/browser/
 import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
 
 export const SCORE_MIGRATION_TIMESTAMP = 1702771200000;
-export const FID_DEPRECATION_DATE = 1710259200000;
 
 type Props = {
   transaction?: string;
@@ -54,7 +49,7 @@ export const formatTimeSeriesResultsToChartData = (
 
 export function PerformanceScoreBreakdownChart({transaction}: Props) {
   const theme = useTheme();
-  const segmentColors = [...theme.charts.getColorPalette(3).slice(0, 5), theme.gray200];
+  const segmentColors = [...theme.charts.getColorPalette(3).slice(0, 5)];
 
   const pageFilters = usePageFilters();
 
@@ -87,12 +82,7 @@ export function PerformanceScoreBreakdownChart({transaction}: Props) {
 
   const period = pageFilters.selection.datetime.period;
   const performanceScoreSubtext = (period && DEFAULT_RELATIVE_PERIODS[period]) ?? '';
-
-  const hasFid =
-    timeseriesData?.fid?.find(({value}) => value > 0) !== undefined ||
-    preMigrationTimeseriesData?.fid?.find(({value}) => value > 0) !== undefined;
-
-  const chartSeriesOrder = hasFid ? ORDER_WITH_INP : ORDER_WITH_INP_WITHOUT_FID;
+  const chartSeriesOrder = ORDER;
 
   const preMigrationWeightedTimeseries = formatTimeSeriesResultsToChartData(
     preMigrationTimeseriesData,
@@ -157,7 +147,6 @@ export function PerformanceScoreBreakdownChart({transaction}: Props) {
     {
       lcp: storedScores.unweightedLcp,
       fcp: storedScores.unweightedFcp,
-      fid: storedScores.unweightedFid,
       cls: storedScores.unweightedCls,
       ttfb: storedScores.unweightedTtfb,
       inp: storedScores.unweightedInp,
@@ -192,7 +181,6 @@ export function PerformanceScoreBreakdownChart({transaction}: Props) {
           ? {
               lcp: projectScore.lcpWeight,
               fcp: projectScore.fcpWeight,
-              fid: projectScore.fidWeight,
               inp: projectScore.inpWeight,
               cls: projectScore.clsWeight,
               ttfb: projectScore.ttfbWeight,
@@ -232,9 +220,6 @@ export function PerformanceScoreBreakdownChart({transaction}: Props) {
         chartColors={segmentColors}
         tooltipFormatterOptions={{
           nameFormatter: (name, seriesParams: any) => {
-            if (name === 'FID') {
-              return `${name} Score </strong>(${t('Deprecated')})</strong>`;
-            }
             const timestamp = seriesParams?.data[0];
             const weights = weightsSeries.find(
               series => series.name === timestamp

static/app/views/insights/browser/webVitals/components/charts/performanceScoreChart.tsx

@@ -24,9 +24,7 @@ type Props = {
   webVital?: WebVitals | null;
 };
 
-export const ORDER = ['lcp', 'fcp', 'fid', 'cls', 'ttfb'];
-export const ORDER_WITH_INP = ['lcp', 'fcp', 'inp', 'cls', 'ttfb', 'fid'];
-export const ORDER_WITH_INP_WITHOUT_FID = ['lcp', 'fcp', 'inp', 'cls', 'ttfb'];
+export const ORDER = ['lcp', 'fcp', 'inp', 'cls', 'ttfb'];
 
 export function PerformanceScoreChart({
   projectScore,
@@ -36,7 +34,6 @@ export function PerformanceScoreChart({
 }: Props) {
   const theme = useTheme();
   const pageFilters = usePageFilters();
-  const order = ORDER_WITH_INP;
 
   const score = projectScore
     ? webVital
@@ -48,7 +45,7 @@ export function PerformanceScoreChart({
   let ringBackgroundColors = ringSegmentColors.map(color => `${color}50`);
 
   if (webVital) {
-    const index = order.indexOf(webVital);
+    const index = ORDER.indexOf(webVital);
     ringSegmentColors = ringSegmentColors.map((color, i) => {
       return i === index ? color : theme.gray200;
     });

static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.spec.tsx

@@ -1,5 +1,3 @@
-import {OrganizationFixture} from 'sentry-fixture/organization';
-
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import PerformanceScoreRingWithTooltips from 'sentry/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips';
@@ -11,52 +9,14 @@ describe('PerformanceScoreRingWithTooltips', function () {
       fcpScore: 92,
       clsScore: 71,
       ttfbScore: 99,
-      fidScore: 98,
-      inpScore: 98,
-      totalScore: 83,
-      lcpWeight: 38,
-      fcpWeight: 23,
-      clsWeight: 18,
-      ttfbWeight: 16,
-      fidWeight: 10,
-      inpWeight: 0,
-    };
-
-    render(
-      <PerformanceScoreRingWithTooltips
-        width={220}
-        height={200}
-        projectScore={projectScore}
-        ringBackgroundColors={['#444674', '#895289', '#d6567f', '#f38150', '#f2b712']}
-        ringSegmentColors={['#444674', '#895289', '#d6567f', '#f38150', '#f2b712']}
-        text={undefined}
-      />
-    );
-    await screen.findByText('lcp');
-    screen.getByText('fcp');
-    screen.getByText('cls');
-    screen.getByText('ttfb');
-    screen.getByText('fid');
-  });
-
-  it('renders inp', async () => {
-    const projectScore = {
-      lcpScore: 74,
-      fcpScore: 92,
-      clsScore: 71,
-      ttfbScore: 99,
-      fidScore: 98,
       inpScore: 98,
       totalScore: 83,
       lcpWeight: 38,
       fcpWeight: 23,
       clsWeight: 18,
       ttfbWeight: 16,
-      fidWeight: 0,
       inpWeight: 10,
     };
-
-    const organizationWithInp = OrganizationFixture();
     render(
       <PerformanceScoreRingWithTooltips
         width={220}
@@ -65,8 +25,7 @@ describe('PerformanceScoreRingWithTooltips', function () {
         ringBackgroundColors={['#444674', '#895289', '#d6567f', '#f38150', '#f2b712']}
         ringSegmentColors={['#444674', '#895289', '#d6567f', '#f38150', '#f2b712']}
         text={undefined}
-      />,
-      {organization: organizationWithInp}
+      />
     );
     await screen.findByText('inp');
     screen.getByText('fcp');
@@ -81,14 +40,12 @@ describe('PerformanceScoreRingWithTooltips', function () {
       fcpScore: 0,
       clsScore: 0,
       ttfbScore: 0,
-      fidScore: 0,
       inpScore: 0,
       totalScore: 0,
       lcpWeight: 0,
       fcpWeight: 0,
       clsWeight: 0,
       ttfbWeight: 0,
-      fidWeight: 0,
       inpWeight: 0,
     };
     render(

static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.tsx

@@ -10,7 +10,7 @@ import type {TableData} from 'sentry/utils/discover/discoverQuery';
 import useMouseTracking from 'sentry/utils/replays/hooks/useMouseTracking';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
-import {ORDER_WITH_INP} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
+import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
 import PerformanceScoreRing from 'sentry/views/insights/browser/webVitals/components/performanceScoreRing';
 import {PERFORMANCE_SCORE_WEIGHTS} from 'sentry/views/insights/browser/webVitals/queries/rawWebVitalsQueries/calculatePerformanceScore';
 import type {
@@ -150,7 +150,7 @@ function PerformanceScoreRingWithTooltips({
   const [webVitalTooltip, setWebVitalTooltip] = useState<WebVitals | null>(null);
   const [labelHovered, setLabelHovered] = useState<WebVitals | null>(null);
 
-  const ringSegmentOrder = ORDER_WITH_INP;
+  const ringSegmentOrder = ORDER;
 
   if (labelHovered && inPerformanceWidget) {
     const index = ringSegmentOrder.indexOf(labelHovered);
@@ -166,7 +166,6 @@ function PerformanceScoreRingWithTooltips({
     'lcpWeight',
     'fcpWeight',
     'inpWeight',
-    'fidWeight',
     'clsWeight',
     'ttfbWeight',
   ].every(key => projectScore[key] === 0)
@@ -175,7 +174,6 @@ function PerformanceScoreRingWithTooltips({
         lcp: projectScore.lcpWeight,
         fcp: projectScore.fcpWeight,
         inp: projectScore.inpWeight,
-        fid: projectScore.fidWeight,
         cls: projectScore.clsWeight,
         ttfb: projectScore.ttfbWeight,
       };

static/app/views/insights/browser/webVitals/components/recommendations.tsx

@@ -19,8 +19,6 @@ export function Recommendations({
   switch (webVital) {
     case 'lcp':
       return null;
-    case 'fid':
-      return null;
     case 'cls':
       return null;
     case 'fcp':

static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.tsx

@@ -74,11 +74,7 @@ export function PagePerformanceTable() {
     [projects, location.query.project]
   );
 
-  let sort = useWebVitalsSort({defaultSort: DEFAULT_SORT});
-  // Need to map fid back to inp for rendering
-  if (sort.field === 'p75(measurements.fid)') {
-    sort = {...sort, field: 'p75(measurements.inp)'};
-  }
+  const sort = useWebVitalsSort({defaultSort: DEFAULT_SORT});
   const {data: projectScoresData, isLoading: isProjectScoresLoading} =
     useProjectWebVitalsScoresQuery();
 
@@ -245,7 +241,6 @@ export function PagePerformanceTable() {
         'p75(measurements.fcp)',
         'p75(measurements.lcp)',
         'p75(measurements.ttfb)',
-        'p75(measurements.fid)',
         'p75(measurements.inp)',
       ].includes(key)
     ) {

static/app/views/insights/browser/webVitals/components/tables/pageSamplePerformanceTable.tsx

@@ -183,7 +183,6 @@ export function PageSamplePerformanceTable({transaction, search, limit = 9}: Pro
         'measurements.fcp',
         'measurements.lcp',
         'measurements.ttfb',
-        'measurements.fid',
         'measurements.cls',
         'measurements.inp',
         'transaction.duration',
@@ -281,7 +280,6 @@ export function PageSamplePerformanceTable({transaction, search, limit = 9}: Pro
         'measurements.fcp',
         'measurements.lcp',
         'measurements.ttfb',
-        'measurements.fid',
         'measurements.inp',
         'transaction.duration',
       ].includes(key)

static/app/views/insights/browser/webVitals/components/webVitalDescription.tsx

@@ -11,7 +11,7 @@ import {space} from 'sentry/styles/space';
 import type {Tag} from 'sentry/types';
 import {WebVital} from 'sentry/utils/fields';
 import {Browser} from 'sentry/utils/performance/vitals/constants';
-import {ORDER_WITH_INP} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
+import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
 import {Dot} from 'sentry/views/insights/browser/webVitals/components/webVitalMeters';
 import type {
   ProjectScore,
@@ -35,7 +35,6 @@ type Props = {
 const WEB_VITAL_FULL_NAME_MAP = {
   cls: t('Cumulative Layout Shift'),
   fcp: t('First Contentful Paint'),
-  fid: t('First Input Delay'),
   inp: t('Interaction to Next Paint'),
   lcp: t('Largest Contentful Paint'),
   ttfb: t('Time to First Byte'),
@@ -48,9 +47,6 @@ const VITAL_DESCRIPTIONS: Partial<Record<WebVital, string>> = {
   [WebVital.CLS]: t(
     'Cumulative Layout Shift (CLS) is the sum of individual layout shift scores for every unexpected element shift during the rendering process. Imagine navigating to an article and trying to click a link before the page finishes loading. Before your cursor even gets there, the link may have shifted down due to an image rendering. Rather than using duration for this Web Vital, the CLS score represents the degree of disruptive and visually unstable shifts.'
   ),
-  [WebVital.FID]: t(
-    'First Input Delay (FID) measures the response time when the user tries to interact with the viewport. Actions maybe include clicking a button, link or other custom Javascript controller. It is key in helping the user determine if a page is usable or not.'
-  ),
   [WebVital.LCP]: t(
     'Largest Contentful Paint (LCP) measures the render time for the largest content to appear in the viewport. This may be in any form from the document object model (DOM), such as images, SVGs, or text blocks. It’s the largest pixel area in the viewport, thus most visually defining. LCP helps developers understand how long it takes to see the main content on the page.'
   ),
@@ -72,7 +68,7 @@ type WebVitalDetailHeaderProps = {
 export function WebVitalDetailHeader({score, value, webVital}: Props) {
   const theme = useTheme();
   const colors = theme.charts.getColorPalette(3);
-  const dotColor = colors[ORDER_WITH_INP.indexOf(webVital)];
+  const dotColor = colors[ORDER.indexOf(webVital)];
   const status = score !== undefined ? scoreToStatus(score) : undefined;
 
   return (

static/app/views/insights/browser/webVitals/components/webVitalMeters.spec.tsx

@@ -16,7 +16,6 @@ describe('WebVitalMeters', function () {
   const projectScore: ProjectScore = {
     lcpWeight: 30,
     fcpWeight: 20,
-    fidWeight: 25,
     clsWeight: 15,
     ttfbWeight: 10,
     inpWeight: 10,