feat(insights): score ring and breakdown chart drop missing vital segments

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

@@ -5,6 +5,7 @@ import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Series} from 'sentry/types/echarts';
+import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
 import {
@@ -49,6 +50,7 @@ export function PerformanceScoreBreakdownChart({
   browserTypes,
   subregions,
 }: Props) {
+  const organization = useOrganization();
   const theme = useTheme();
   const segmentColors = [...theme.charts.getColorPalette(3).slice(0, 5)];
 
@@ -61,7 +63,10 @@ export function PerformanceScoreBreakdownChart({
   const performanceScoreSubtext = (period && DEFAULT_RELATIVE_PERIODS[period]) ?? '';
   const chartSeriesOrder = ORDER;
 
-  const weightedTimeseriesData = applyStaticWeightsToTimeseries(timeseriesData);
+  const weightedTimeseriesData = applyStaticWeightsToTimeseries(
+    organization,
+    timeseriesData
+  );
 
   const weightedTimeseries = formatTimeSeriesResultsToChartData(
     weightedTimeseriesData,

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

@@ -27,7 +27,7 @@ import {PerformanceBadge} from 'sentry/views/insights/browser/webVitals/componen
 import {WebVitalDetailHeader} from 'sentry/views/insights/browser/webVitals/components/webVitalDescription';
 import {useProjectRawWebVitalsQuery} from 'sentry/views/insights/browser/webVitals/queries/rawWebVitalsQueries/useProjectRawWebVitalsQuery';
 import {useProjectRawWebVitalsValuesTimeseriesQuery} from 'sentry/views/insights/browser/webVitals/queries/rawWebVitalsQueries/useProjectRawWebVitalsValuesTimeseriesQuery';
-import {calculatePerformanceScoreFromStoredTableDataRow} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/calculatePerformanceScoreFromStored';
+import {getWebVitalScoresFromTableDataRow} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/getWebVitalScoresFromTableDataRow';
 import {useProjectWebVitalsScoresQuery} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresQuery';
 import {useInteractionsCategorizedSamplesQuery} from 'sentry/views/insights/browser/webVitals/queries/useInteractionsCategorizedSamplesQuery';
 import {useTransactionsCategorizedSamplesQuery} from 'sentry/views/insights/browser/webVitals/queries/useTransactionsCategorizedSamplesQuery';
@@ -119,9 +119,7 @@ export function PageOverviewWebVitalsDetailPanel({
     subregions,
   });
 
-  const projectScore = calculatePerformanceScoreFromStoredTableDataRow(
-    projectScoresData?.data?.[0]
-  );
+  const projectScore = getWebVitalScoresFromTableDataRow(projectScoresData?.data?.[0]);
 
   const {data: transactionsTableData, isLoading: isTransactionWebVitalsQueryLoading} =
     useTransactionsCategorizedSamplesQuery({

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

@@ -11,11 +11,6 @@ describe('PerformanceScoreRingWithTooltips', function () {
       ttfbScore: 99,
       inpScore: 98,
       totalScore: 83,
-      lcpWeight: 38,
-      fcpWeight: 23,
-      clsWeight: 18,
-      ttfbWeight: 16,
-      inpWeight: 10,
     };
     render(
       <PerformanceScoreRingWithTooltips
@@ -36,17 +31,12 @@ describe('PerformanceScoreRingWithTooltips', function () {
 
   it('renders empty state with default weights', async () => {
     const projectScore = {
-      lcpScore: 0,
-      fcpScore: 0,
-      clsScore: 0,
-      ttfbScore: 0,
-      inpScore: 0,
-      totalScore: 0,
-      lcpWeight: 0,
-      fcpWeight: 0,
-      clsWeight: 0,
-      ttfbWeight: 0,
-      inpWeight: 0,
+      lcpScore: 10,
+      fcpScore: 10,
+      clsScore: 10,
+      ttfbScore: 10,
+      inpScore: 10,
+      totalScore: 10,
     };
     render(
       <PerformanceScoreRingWithTooltips

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

@@ -16,6 +16,7 @@ import type {
   ProjectScore,
   WebVitals,
 } from 'sentry/views/insights/browser/webVitals/types';
+import {getWeights} from 'sentry/views/insights/browser/webVitals/utils/getWeights';
 import {PERFORMANCE_SCORE_WEIGHTS} from 'sentry/views/insights/browser/webVitals/utils/scoreThresholds';
 import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL';
 
@@ -162,7 +163,11 @@ function PerformanceScoreRingWithTooltips({
     });
   }
 
-  const weights = PERFORMANCE_SCORE_WEIGHTS;
+  const weights = organization.features.includes(
+    'organizations:performance-vitals-handle-missing-webvitals'
+  )
+    ? getWeights(ORDER.filter(webVital => projectScore[`${webVital}Score`]))
+    : PERFORMANCE_SCORE_WEIGHTS;
 
   const commonWebVitalLabelProps = {
     organization,

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

@@ -24,7 +24,7 @@ import {PerformanceBadge} from 'sentry/views/insights/browser/webVitals/componen
 import {WebVitalDescription} from 'sentry/views/insights/browser/webVitals/components/webVitalDescription';
 import {useProjectRawWebVitalsQuery} from 'sentry/views/insights/browser/webVitals/queries/rawWebVitalsQueries/useProjectRawWebVitalsQuery';
 import {useProjectRawWebVitalsValuesTimeseriesQuery} from 'sentry/views/insights/browser/webVitals/queries/rawWebVitalsQueries/useProjectRawWebVitalsValuesTimeseriesQuery';
-import {calculatePerformanceScoreFromStoredTableDataRow} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/calculatePerformanceScoreFromStored';
+import {getWebVitalScoresFromTableDataRow} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/getWebVitalScoresFromTableDataRow';
 import {useProjectWebVitalsScoresQuery} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresQuery';
 import {useTransactionWebVitalsScoresQuery} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useTransactionWebVitalsScoresQuery';
 import {MODULE_DOC_LINK} from 'sentry/views/insights/browser/webVitals/settings';
@@ -72,9 +72,7 @@ export function WebVitalsDetailPanel({
     subregions,
   });
 
-  const projectScore = calculatePerformanceScoreFromStoredTableDataRow(
-    projectScoresData?.data?.[0]
-  );
+  const projectScore = getWebVitalScoresFromTableDataRow(projectScoresData?.data?.[0]);
   const {data, isPending} = useTransactionWebVitalsScoresQuery({
     limit: 100,
     webVital: webVital ?? 'total',

static/app/views/insights/browser/webVitals/queries/storedScoreQueries/getWebVitalScoresFromTableDataRow.tsx

@@ -0,0 +1,50 @@
+import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
+import type {
+  ProjectScore,
+  WebVitals,
+} from 'sentry/views/insights/browser/webVitals/types';
+
+function getWebVitalScore(data: TableDataRow, webVital: WebVitals): number {
+  return (data[`performance_score(measurements.score.${webVital})`] as number) * 100;
+}
+
+function getTotalScore(data: TableDataRow): number {
+  return (data[`avg(measurements.score.total)`] as number) * 100;
+}
+
+function getWebVitalScoreCount(
+  data: TableDataRow,
+  webVital: WebVitals | 'total'
+): number {
+  return data[`count_scores(measurements.score.${webVital})`] as number;
+}
+
+function hasWebVitalScore(data: TableDataRow, webVital: WebVitals): boolean {
+  if (data.hasOwnProperty(`count_scores(measurements.score.${webVital})`)) {
+    return getWebVitalScoreCount(data, webVital) > 0;
+  }
+  return false;
+}
+
+export function getWebVitalScoresFromTableDataRow(data?: TableDataRow): ProjectScore {
+  if (!data) {
+    return {};
+  }
+
+  const [hasLcp, hasFcp, hasCls, hasTtfb, hasInp] = [
+    'lcp',
+    'fcp',
+    'cls',
+    'ttfb',
+    'inp',
+  ].map(webVital => hasWebVitalScore(data, webVital as WebVitals));
+
+  return {
+    lcpScore: hasLcp ? Math.round(getWebVitalScore(data, 'lcp')) : undefined,
+    fcpScore: hasFcp ? Math.round(getWebVitalScore(data, 'fcp')) : undefined,
+    clsScore: hasCls ? Math.round(getWebVitalScore(data, 'cls')) : undefined,
+    ttfbScore: hasTtfb ? Math.round(getWebVitalScore(data, 'ttfb')) : undefined,
+    inpScore: hasInp ? Math.round(getWebVitalScore(data, 'inp')) : undefined,
+    totalScore: Math.round(getTotalScore(data)),
+  };
+}

static/app/views/insights/browser/webVitals/queries/storedScoreQueries/useTransactionWebVitalsScoresQuery.tsx

@@ -6,7 +6,7 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import {calculatePerformanceScoreFromStoredTableDataRow} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/calculatePerformanceScoreFromStored';
+import {getWebVitalScoresFromTableDataRow} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/getWebVitalScoresFromTableDataRow';
 import {DEFAULT_QUERY_FILTER} from 'sentry/views/insights/browser/webVitals/settings';
 import type {
   RowWithScoreAndOpportunity,
@@ -124,7 +124,7 @@ export const useTransactionWebVitalsScoresQuery = ({
               row['performance_score(measurements.score.total)'];
           }
           const {totalScore, clsScore, fcpScore, lcpScore, ttfbScore, inpScore} =
-            calculatePerformanceScoreFromStoredTableDataRow(row);
+            getWebVitalScoresFromTableDataRow(row);
           return {
             transaction: row.transaction!?.toString(),
             project: row.project!?.toString(),

static/app/views/insights/browser/webVitals/utils/applyStaticWeightsToTimeseries.spec.tsx

@@ -1,7 +1,10 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
 import {applyStaticWeightsToTimeseries} from 'sentry/views/insights/browser/webVitals/utils/applyStaticWeightsToTimeseries';
 
 describe('applyStaticWeightsToTimeseries', function () {
   it('updates timeseries scores with static weighing', function () {
+    const organization = OrganizationFixture();
     const timeseriesData = {
       lcp: [
         {name: '2024-07-01T00:00:00.000Z', value: 90},
@@ -28,7 +31,7 @@ describe('applyStaticWeightsToTimeseries', function () {
         {name: '2024-07-02T00:00:00.000Z', value: 50},
       ],
     };
-    const result = applyStaticWeightsToTimeseries(timeseriesData);
+    const result = applyStaticWeightsToTimeseries(organization, timeseriesData);
     expect(result).toEqual({
       lcp: [
         {name: '2024-07-01T00:00:00.000Z', value: 90 * 0.3},

static/app/views/insights/browser/webVitals/utils/applyStaticWeightsToTimeseries.tsx

@@ -1,13 +1,30 @@
+import type {Organization} from 'sentry/types/organization';
 import type {WebVitalsScoreBreakdown} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresTimeseriesQuery';
+import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types';
+import {getWeights} from 'sentry/views/insights/browser/webVitals/utils/getWeights';
 import {PERFORMANCE_SCORE_WEIGHTS} from 'sentry/views/insights/browser/webVitals/utils/scoreThresholds';
 
 // Returns a weighed score timeseries with each interval calculated from applying hardcoded weights to unweighted scores
-export function applyStaticWeightsToTimeseries(timeseriesData: WebVitalsScoreBreakdown) {
+export function applyStaticWeightsToTimeseries(
+  organization: Organization,
+  timeseriesData: WebVitalsScoreBreakdown
+) {
+  const weights = organization.features.includes(
+    'organizations:performance-vitals-handle-missing-webvitals'
+  )
+    ? getWeights(
+        Object.keys(timeseriesData)
+          .filter(key => key !== 'total')
+          .filter(key =>
+            timeseriesData[key].some(series => series.value > 0)
+          ) as WebVitals[]
+      )
+    : PERFORMANCE_SCORE_WEIGHTS;
   return {
-    ...Object.keys(PERFORMANCE_SCORE_WEIGHTS).reduce((acc, webVital) => {
+    ...Object.keys(weights).reduce((acc, webVital) => {
       acc[webVital] = timeseriesData[webVital].map(({name, value}) => ({
         name,
-        value: value * PERFORMANCE_SCORE_WEIGHTS[webVital] * 0.01,
+        value: value * weights[webVital] * 0.01,
       }));
       return acc;
     }, {}),

static/app/views/insights/browser/webVitals/utils/getWeights.tsx

@@ -0,0 +1,20 @@
+import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
+import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types';
+import {PERFORMANCE_SCORE_WEIGHTS} from 'sentry/views/insights/browser/webVitals/utils/scoreThresholds';
+
+export function getWeights(webVitals: WebVitals[] = []): Record<WebVitals, number> {
+  const totalWeight = ORDER.filter(webVital => webVitals.includes(webVital)).reduce(
+    (acc, webVital) => acc + PERFORMANCE_SCORE_WEIGHTS[webVital],
+    0
+  );
+  return Object.keys(PERFORMANCE_SCORE_WEIGHTS).reduce(
+    (acc, webVital) => {
+      acc[webVital] =
+        (webVitals.includes(webVital as WebVitals)
+          ? PERFORMANCE_SCORE_WEIGHTS[webVital] * 100
+          : 0) / totalWeight;
+      return acc;
+    },
+    {} as Record<WebVitals, number>
+  );
+}

static/app/views/insights/browser/webVitals/views/pageOverview.tsx

@@ -24,7 +24,7 @@ import {PageOverviewWebVitalsDetailPanel} from 'sentry/views/insights/browser/we
 import {PageSamplePerformanceTable} from 'sentry/views/insights/browser/webVitals/components/tables/pageSamplePerformanceTable';
 import WebVitalMeters from 'sentry/views/insights/browser/webVitals/components/webVitalMeters';
 import {useProjectRawWebVitalsQuery} from 'sentry/views/insights/browser/webVitals/queries/rawWebVitalsQueries/useProjectRawWebVitalsQuery';
-import {calculatePerformanceScoreFromStoredTableDataRow} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/calculatePerformanceScoreFromStored';
+import {getWebVitalScoresFromTableDataRow} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/getWebVitalScoresFromTableDataRow';
 import {useProjectWebVitalsScoresQuery} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresQuery';
 import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types';
 import decodeBrowserTypes from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType';
@@ -127,7 +127,7 @@ export function PageOverview() {
   const projectScore =
     isProjectScoresLoading || isPending
       ? undefined
-      : calculatePerformanceScoreFromStoredTableDataRow(projectScores?.data?.[0]);
+      : getWebVitalScoresFromTableDataRow(projectScores?.data?.[0]);
 
   const handleTabChange = (value: string) => {
     trackAnalytics('insight.vital.overview.toggle_tab', {