ref(insights): Refactor PerformanceScoreBreakdownChart (#89632)

Move into its own component and parse location query itself

Part of #88560

---------

Co-authored-by: George Gritsouk <989898+gggritso@users.noreply.github.com>

Author: 2 people

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

@@ -0,0 +1,23 @@
+import type {Series} from 'sentry/types/echarts';
+import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
+import type {WebVitalsScoreBreakdown} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresTimeseriesQuery';
+import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types';
+
+export function formatTimeSeriesResultsToChartData(
+  data: WebVitalsScoreBreakdown,
+  segmentColors: string[],
+  order: WebVitals[] = ORDER
+): Series[] {
+  return order.map((webVital, index) => {
+    const series = data[webVital];
+    const color = segmentColors[index];
+    return {
+      seriesName: webVital.toUpperCase(),
+      data: series.map(({name, value}) => ({
+        name,
+        value: Math.round(value),
+      })),
+      color,
+    };
+  });
+}

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

@@ -4,15 +4,13 @@ import {render, screen, waitForElementToBeRemoved} from 'sentry-test/reactTestin
 
 import {useLocation} from 'sentry/utils/useLocation';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import {
-  formatTimeSeriesResultsToChartData,
-  PerformanceScoreBreakdownChart,
-} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart';
+import {formatTimeSeriesResultsToChartData} from 'sentry/views/insights/browser/webVitals/components/charts/formatTimeSeriesResultsToChartData';
+import {PerformanceScoreBreakdownChartWidget} from 'sentry/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget';
 
 jest.mock('sentry/utils/useLocation');
 jest.mock('sentry/utils/usePageFilters');
 
-describe('PerformanceScoreBreakdownChart', function () {
+describe('PerformanceScoreBreakdownChartWidget', function () {
   const organization = OrganizationFixture();
   let eventsStatsMock: jest.Mock;
 
@@ -75,7 +73,7 @@ describe('PerformanceScoreBreakdownChart', function () {
       action: 'PUSH',
       key: '',
     });
-    render(<PerformanceScoreBreakdownChart />, {organization});
+    render(<PerformanceScoreBreakdownChartWidget />, {organization});
     await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
 
     expect(eventsStatsMock).toHaveBeenCalledWith(

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

@@ -9,22 +9,17 @@ import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import {PerformanceScoreBreakdownChart} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart';
 import PerformanceScoreRingWithTooltips from 'sentry/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips';
 import {MODULE_DOC_LINK} from 'sentry/views/insights/browser/webVitals/settings';
 import type {
   ProjectScore,
   WebVitals,
 } from 'sentry/views/insights/browser/webVitals/types';
-import type {BrowserType} from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType';
-import type {SubregionCode} from 'sentry/views/insights/types';
+import {PerformanceScoreBreakdownChartWidget} from 'sentry/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget';
 
 type Props = {
-  browserTypes?: BrowserType[];
   isProjectScoreLoading?: boolean;
   projectScore?: ProjectScore;
-  subregions?: SubregionCode[];
-  transaction?: string;
   webVital?: WebVitals | null;
 };
 
@@ -33,10 +28,7 @@ export const ORDER: WebVitals[] = ['lcp', 'fcp', 'inp', 'cls', 'ttfb'];
 export function PerformanceScoreChart({
   projectScore,
   webVital,
-  transaction,
   isProjectScoreLoading,
-  browserTypes,
-  subregions,
 }: Props) {
   const theme = useTheme();
   const pageFilters = usePageFilters();
@@ -101,15 +93,17 @@ export function PerformanceScoreChart({
           </EmptyStateWarning>
         )}
       </PerformanceScoreLabelContainer>
-      <PerformanceScoreBreakdownChart
-        transaction={transaction}
-        browserTypes={browserTypes}
-        subregions={subregions}
-      />
+      <ChartContainer>
+        <PerformanceScoreBreakdownChartWidget />
+      </ChartContainer>
     </Flex>
   );
 }
 
+const ChartContainer = styled('div')`
+  flex: 1 1 0%;
+`;
+
 const Flex = styled('div')`
   display: flex;
   flex-direction: row;

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

@@ -18,7 +18,6 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import useRouter from 'sentry/utils/useRouter';
 import BrowserTypeSelector from 'sentry/views/insights/browser/webVitals/components/browserTypeSelector';
-import {PerformanceScoreBreakdownChart} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart';
 import {PageOverviewSidebar} from 'sentry/views/insights/browser/webVitals/components/pageOverviewSidebar';
 import {PageOverviewWebVitalsDetailPanel} from 'sentry/views/insights/browser/webVitals/components/pageOverviewWebVitalsDetailPanel';
 import {PageSamplePerformanceTable} from 'sentry/views/insights/browser/webVitals/components/tables/pageSamplePerformanceTable';
@@ -32,6 +31,7 @@ import {WebVitalMetersPlaceholder} from 'sentry/views/insights/browser/webVitals
 import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modulePageFilterBar';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
+import {PerformanceScoreBreakdownChartWidget} from 'sentry/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget';
 import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL';
 import {useWebVitalsDrawer} from 'sentry/views/insights/common/utils/useWebVitalsDrawer';
 import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader';
@@ -196,11 +196,9 @@ export function PageOverview() {
                   <BrowserTypeSelector />
                 </TopMenuContainer>
                 <Flex>
-                  <PerformanceScoreBreakdownChart
-                    transaction={transaction}
-                    browserTypes={browserTypes}
-                    subregions={subregions}
-                  />
+                  <ChartContainer>
+                    <PerformanceScoreBreakdownChartWidget />
+                  </ChartContainer>
                 </Flex>
                 <WebVitalMetersContainer>
                   {(isPending || isProjectScoresLoading) && <WebVitalMetersPlaceholder />}
@@ -267,6 +265,10 @@ const Flex = styled('div')`
   gap: ${space(1)};
 `;
 
+const ChartContainer = styled('div')`
+  flex: 1 1 0%;
+`;
+
 const PageSamplePerformanceTableContainer = styled('div')`
   margin-top: ${space(1)};
 `;

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

@@ -95,8 +95,6 @@ export function WebVitalsLandingPage() {
                     projectScore={projectScore}
                     isProjectScoreLoading={isPending || isProjectScoresLoading}
                     webVital={state.webVital}
-                    browserTypes={browserTypes}
-                    subregions={subregions}
                   />
                 </PerformanceScoreChartContainer>
                 <WebVitalMetersContainer>

static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx renamed to static/app/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget.tsx

@@ -1,62 +1,42 @@
 import {useTheme} from '@emotion/react';
-import styled from '@emotion/styled';
 
 import {t} from 'sentry/locale';
-import type {Series} from 'sentry/types/echarts';
+import {decodeList} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import useLocationQuery from 'sentry/utils/url/useLocationQuery';
 import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
-import type {WebVitalsScoreBreakdown} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresTimeseriesQuery';
+import {WebVitalsWeightList} from 'sentry/views/insights/browser/webVitals/components/charts/webVitalWeightList';
 import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types';
 import {getWeights} from 'sentry/views/insights/browser/webVitals/utils/getWeights';
-import type {BrowserType} from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType';
+import decodeBrowserTypes from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType';
 import {useDefaultWebVitalsQuery} from 'sentry/views/insights/browser/webVitals/utils/useDefaultQuery';
 import {InsightsTimeSeriesWidget} from 'sentry/views/insights/common/components/insightsTimeSeriesWidget';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
 import {
   type DiscoverSeries,
   useMetricsSeries,
 } from 'sentry/views/insights/common/queries/useDiscoverSeries';
-import {SpanMetricsField, type SubregionCode} from 'sentry/views/insights/types';
+import {SpanIndexedField, SpanMetricsField} from 'sentry/views/insights/types';
 
-import {WebVitalsWeightList} from './webVitalWeightList';
-
-type Props = {
-  browserTypes?: BrowserType[];
-  subregions?: SubregionCode[];
-  transaction?: string;
-};
-
-export function formatTimeSeriesResultsToChartData(
-  data: WebVitalsScoreBreakdown,
-  segmentColors: string[],
-  order: WebVitals[] = ORDER
-): Series[] {
-  return order.map((webVital, index) => {
-    const series = data[webVital];
-    const color = segmentColors[index];
-    return {
-      seriesName: webVital.toUpperCase(),
-      data: series.map(({name, value}) => ({
-        name,
-        value: Math.round(value),
-      })),
-      color,
-    };
+export function PerformanceScoreBreakdownChartWidget(props: LoadableChartWidgetProps) {
+  const {
+    transaction,
+    [SpanIndexedField.BROWSER_NAME]: browserTypes,
+    [SpanIndexedField.USER_GEO_SUBREGION]: subregions,
+  } = useLocationQuery({
+    fields: {
+      [SpanIndexedField.BROWSER_NAME]: decodeBrowserTypes,
+      [SpanIndexedField.USER_GEO_SUBREGION]: decodeList,
+      transaction: decodeList,
+    },
   });
-}
-
-export function PerformanceScoreBreakdownChart({
-  transaction,
-  browserTypes,
-  subregions,
-}: Props) {
   const theme = useTheme();
   const segmentColors = theme.chart.getColorPalette(3).slice(0, 5);
   const defaultQuery = useDefaultWebVitalsQuery();
-
   const search = new MutableSearch(`${defaultQuery} has:measurements.score.total`);
 
-  if (transaction) {
-    search.addFilterValue('transaction', transaction);
+  if (transaction.length && transaction[0]) {
+    search.addFilterValue('transaction', transaction[0]);
   }
 
   if (subregions) {
@@ -84,7 +64,8 @@ export function PerformanceScoreBreakdownChart({
       ],
       transformAliasToInputFormat: true,
     },
-    'api.performance.browser.web-vitals.timeseries-scores2'
+    'api.performance.browser.web-vitals.timeseries-scores2',
+    props.pageFilters
   );
 
   const webVitalsThatHaveData: WebVitals[] = vitalScoresData
@@ -127,20 +108,14 @@ export function PerformanceScoreBreakdownChart({
     : [];
 
   return (
-    <ChartContainer>
-      <InsightsTimeSeriesWidget
-        title={t('Score Breakdown')}
-        height="100%"
-        visualizationType="area"
-        isLoading={areVitalScoresLoading}
-        error={vitalScoresError}
-        series={allSeries}
-        description={<WebVitalsWeightList weights={weights} />}
-      />
-    </ChartContainer>
+    <InsightsTimeSeriesWidget
+      title={t('Score Breakdown')}
+      height="100%"
+      visualizationType="area"
+      isLoading={areVitalScoresLoading}
+      error={vitalScoresError}
+      series={allSeries}
+      description={<WebVitalsWeightList weights={weights} />}
+    />
   );
 }
-
-const ChartContainer = styled('div')`
-  flex: 1 1 0%;
-`;

static/app/views/insights/common/queries/useDiscoverSeries.ts

@@ -78,13 +78,15 @@ export const useEAPSeries = <
 
 export const useMetricsSeries = <Fields extends MetricsProperty[]>(
   options: UseMetricsSeriesOptions<Fields> = {},
-  referrer: string
+  referrer: string,
+  pageFilters?: PageFilters
 ) => {
   const useEap = useInsightsEap();
   return useDiscoverSeries<Fields>(
     options,
     useEap ? DiscoverDatasets.SPANS_EAP_RPC : DiscoverDatasets.METRICS,
-    referrer
+    referrer,
+    pageFilters
   );
 };
 

static/app/views/performance/landing/widgets/widgets/performanceScoreListWidget.tsx

@@ -11,7 +11,7 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Truncate from 'sentry/components/truncate';
 import {t} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
-import {formatTimeSeriesResultsToChartData} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart';
+import {formatTimeSeriesResultsToChartData} from 'sentry/views/insights/browser/webVitals/components/charts/formatTimeSeriesResultsToChartData';
 import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
 import {PerformanceBadge} from 'sentry/views/insights/browser/webVitals/components/performanceBadge';
 import {useProjectWebVitalsScoresQuery} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresQuery';