feat(insights): handle missing vitals in tooltip weights (#82809)

Updates webvital score breakdown timeseries tooltip to display proper weights when webvitals are missing
getsentry · Jan 3, 2025 · 7a624b6 · 7a624b6
1 parent 84fa15f
commit 7a624b6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/...app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx b/...app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx
@@ -14,6 +14,7 @@ import {
 } from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresTimeseriesQuery';
 import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types';
 import {applyStaticWeightsToTimeseries} from 'sentry/views/insights/browser/webVitals/utils/applyStaticWeightsToTimeseries';
+import {getWeights} from 'sentry/views/insights/browser/webVitals/utils/getWeights';
 import type {BrowserType} from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType';
 import {PERFORMANCE_SCORE_WEIGHTS} from 'sentry/views/insights/browser/webVitals/utils/scoreThresholds';
 import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
@@ -55,6 +56,9 @@ export function PerformanceScoreBreakdownChart({
   const segmentColors = [...theme.charts.getColorPalette(3).slice(0, 5)];
 
   const pageFilters = usePageFilters();
+  const handleMissingWebVitals = organization.features.includes(
+    'performance-vitals-handle-missing-webvitals'
+  );
 
   const {data: timeseriesData, isLoading: isTimeseriesLoading} =
     useProjectWebVitalsScoresTimeseriesQuery({transaction, browserTypes, subregions});
@@ -87,10 +91,13 @@ export function PerformanceScoreBreakdownChart({
     chartSeriesOrder
   );
 
-  const weightsSeries = weightedTimeseries[0]!.data.map(({name}) => {
-    const value = PERFORMANCE_SCORE_WEIGHTS;
-    return {name, value};
-  });
+  const weights = handleMissingWebVitals
+    ? getWeights(
+        ORDER.filter(webVital =>
+          timeseriesData[webVital].some(series => series.value > 0)
+        )
+      )
+    : PERFORMANCE_SCORE_WEIGHTS;
 
   return (
     <StyledChartPanel title={t('Score Breakdown')}>
@@ -112,18 +119,14 @@ export function PerformanceScoreBreakdownChart({
         dataMax={100}
         chartColors={segmentColors}
         tooltipFormatterOptions={{
-          nameFormatter: (name, seriesParams: any) => {
-            const timestamp = seriesParams?.data[0];
-            const weights = weightsSeries.find(
-              series => series.name === timestamp
-            )?.value;
+          nameFormatter: name => {
             // nameFormatter expects a string an will wrap the output in an html string.
             // Kind of a hack, but we can inject some html to escape styling for the subLabel.
             const subLabel =
               weights !== undefined
-                ? ` </strong>(${
-                    weights[name.toLocaleLowerCase()]
-                  }% of Perf Score)<strong>`
+                ? ` </strong>(${weights[name.toLocaleLowerCase()].toFixed(
+                    0
+                  )}% of Perf Score)<strong>`
                 : '';
             return `${name} Score${subLabel}`;
           },

diff --git a/static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.tsx b/static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.tsx
@@ -164,7 +164,7 @@ function PerformanceScoreRingWithTooltips({
   }
 
   const weights = organization.features.includes(
-    'organizations:performance-vitals-handle-missing-webvitals'
+    'performance-vitals-handle-missing-webvitals'
   )
     ? getWeights(ORDER.filter(webVital => projectScore[`${webVital}Score`]))
     : PERFORMANCE_SCORE_WEIGHTS;

diff --git a/static/app/views/insights/browser/webVitals/utils/applyStaticWeightsToTimeseries.tsx b/static/app/views/insights/browser/webVitals/utils/applyStaticWeightsToTimeseries.tsx
@@ -10,7 +10,7 @@ export function applyStaticWeightsToTimeseries(
   timeseriesData: WebVitalsScoreBreakdown
 ) {
   const weights = organization.features.includes(
-    'organizations:performance-vitals-handle-missing-webvitals'
+    'performance-vitals-handle-missing-webvitals'
   )
     ? getWeights(
         Object.keys(timeseriesData)