ref(insights): Refactor PerformanceScoreBreakdownChart

[billyvg]

Move into its own component and parse location query itself

Part of #88560

[billyvg]

I updated this to use useLocationQuery

[billyvg]

the new widget grabs these itself from query params

[billyvg]

only pageOverview passes transaction, and it comes from query params, so this was moved into the new widget

[billyvg]

ditto re: query params and moving to new widget

[billyvg]

@codecov-ai-reviewer review

[codecov-ai]

On it! We are reviewing the PR and will provide feedback shortly.

[codecov-ai]

This new component could benefit from proper TypeScript interfaces for better type safety and documentation. Consider extracting the type definition for the decoded query parameters into a separate interface. Additionally, the useLocationQuery hook's fields object could be moved to a constant to avoid recreating it on every render.

Suggested change

	import {SpanIndexedField, SpanMetricsField} from 'sentry/views/insights/types';
	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,
	interface QueryParams {
	[SpanIndexedField.BROWSER_NAME]: ReturnType<typeof decodeBrowserTypes>;
	[SpanIndexedField.USER_GEO_SUBREGION]: string[];
	transaction: string[];
	}
	const QUERY_FIELDS = {
	[SpanIndexedField.BROWSER_NAME]: decodeBrowserTypes,
	[SpanIndexedField.USER_GEO_SUBREGION]: decodeList,
	transaction: decodeList,
	};
	export function PerformanceScoreBreakdownChartWidget(props: LoadableChartWidgetProps) {
	const {
	transaction,
	[SpanIndexedField.BROWSER_NAME]: browserTypes,
	[SpanIndexedField.USER_GEO_SUBREGION]: subregions,
	} = useLocationQuery<QueryParams>({
	fields: QUERY_FIELDS,
	});

[codecov-ai]

The series transformation logic is quite complex and could be extracted into a separate utility function for better maintainability and testability. Also consider adding memoization for the allSeries calculation to prevent unnecessary recalculations on re-renders.

Suggested change

	const weights = getWeights(webVitalsThatHaveData);
	const allSeries: DiscoverSeries[] = vitalScoresData
	? ORDER.map((webVital, index) => {
	const key = `performance_score(measurements.score.${webVital})` as const;
	const series = vitalScoresData[key];
	const scaledSeries: DiscoverSeries = {
	...series,
	data: series.data.map(datum => {
	return {
	...datum,
	value: datum.value * weights[webVital],
	};
	}),
	color: segmentColors[index],
	meta: {
	// TODO: The backend doesn't return these score fields with the "score" type yet. Fill this in manually for now.
	fields: {
	...series.meta?.fields,
	[key]: 'score',
	},
	units: series.meta?.units,
	},
	};
	const transformVitalScores = useCallback((vitalScoresData: any, segmentColors: string[], weights: Record<string, number>): DiscoverSeries[] => {
	return ORDER.map((webVital, index) => {
	const key = `performance_score(measurements.score.${webVital})` as const;
	const series = vitalScoresData[key];
	return {
	...series,
	data: series.data.map(datum => ({
	...datum,
	value: datum.value * weights[webVital],
	})),
	color: segmentColors[index],
	meta: {
	fields: {
	...series.meta?.fields,
	[key]: 'score',
	},
	units: series.meta?.units,
	},
	};
	});
	}, []);
	const allSeries = useMemo(
	() => (vitalScoresData ? transformVitalScores(vitalScoresData, segmentColors, weights) : []),
	[vitalScoresData, segmentColors, weights, transformVitalScores]
	);