feat(starfish-web-vitals-tag-details): Open vital detail when navigating from landing page. (#58953)

- Adding functionality.

- Minor refactoring: Includes removing table highlight jank, updating
`TransactionSampleRow` type to include browser and adding the renamed
performance score ring to the components folder.


https://github.com/getsentry/sentry/assets/60121741/36667442-5e06-4481-8e61-695d9ed59c51

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/views/performance/browser/webVitals/overallProgressRing.tsx → static/app/views/performance/browser/webVitals/components/performanceScoreRingWithTooltips.tsx

@@ -12,7 +12,7 @@ import {
 } from 'sentry/views/performance/browser/webVitals/utils/calculatePerformanceScore';
 import {WebVitals} from 'sentry/views/performance/browser/webVitals/utils/types';
 
-import {ORDER} from './performanceScoreChart';
+import {ORDER} from '../performanceScoreChart';
 
 const {
   lcp: LCP_WEIGHT,
@@ -32,7 +32,7 @@ type Props = {
   hideWebVitalLabels?: boolean;
 };
 
-function OverallProgressRing({
+function PerformanceScoreRingWithTooltips({
   projectScore,
   ringBackgroundColors,
   ringSegmentColors,
@@ -195,4 +195,4 @@ const TooltipValue = styled('span')`
   color: ${p => p.theme.gray300};
 `;
 
-export default OverallProgressRing;
+export default PerformanceScoreRingWithTooltips;

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

@@ -16,9 +16,10 @@ import {getScoreColor} from 'sentry/views/performance/browser/webVitals/utils/ge
 import {WebVitals} from 'sentry/views/performance/browser/webVitals/utils/types';
 import {vitalSupportedBrowsers} from 'sentry/views/performance/vitalDetail/utils';
 
-import OverallProgressRing from '../overallProgressRing';
 import {ProjectScore} from '../utils/calculatePerformanceScore';
 
+import PerformanceScoreRingWithTooltips from './performanceScoreRingWithTooltips';
+
 type Props = {
   score: number;
   value: string;
@@ -104,7 +105,7 @@ export function WebVitalTagsDetailHeader({
       </span>
       {isProjectScoreCalculated && projectScore ? (
         <ProgressRingWrapper>
-          <OverallProgressRing
+          <PerformanceScoreRingWithTooltips
             hideWebVitalLabels
             projectScore={projectScore}
             text={

static/app/views/performance/browser/webVitals/pageOverWebVitalsTagDetailPanel.tsx

@@ -138,7 +138,9 @@ export function PageOverviewWebVitalsTagDetailPanel({
     const shouldHighlight = row.id === highlightedSampleId;
 
     const commonProps = {
-      style: (shouldHighlight ? {fontWeight: 'bold'} : {}) satisfies CSSProperties,
+      style: (shouldHighlight
+        ? {textShadow: '0 0 0.5px black'}
+        : {}) satisfies CSSProperties,
       onMouseEnter: () => setHighlightedSampleId(row.id),
       onMouseLeave: () => setHighlightedSampleId(undefined),
     };

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

@@ -79,7 +79,7 @@ export default function PageOverview() {
   // we should automatically default this webvital state to the respective webvital so the detail
   // panel in this page opens automatically.
   const [state, setState] = useState<{webVital: WebVitals | null; tag?: Tag}>({
-    webVital: null,
+    webVital: (location.query.webVital as WebVitals) ?? null,
     tag: undefined,
   });
 

static/app/views/performance/browser/webVitals/pageOverviewWebVitalsDetailPanel.tsx

@@ -236,7 +236,7 @@ export function PageOverviewWebVitalsDetailPanel({
   return (
     <PageErrorProvider>
       <DetailPanel detailKey={webVital ?? undefined} onClose={onClose}>
-        {webVital && (
+        {webVital && projectData && (
           <WebVitalDetailHeader
             value={
               webVital !== 'cls'

static/app/views/performance/browser/webVitals/performanceScoreChart.tsx

@@ -10,7 +10,7 @@ import {PerformanceScoreBreakdownChart} from 'sentry/views/performance/browser/w
 import {ProjectScore} from 'sentry/views/performance/browser/webVitals/utils/calculatePerformanceScore';
 import {WebVitals} from 'sentry/views/performance/browser/webVitals/utils/types';
 
-import OverallProgressRing from './overallProgressRing';
+import PerformanceScoreRingWithTooltips from './components/performanceScoreRingWithTooltips';
 
 type Props = {
   isProjectScoreLoading?: boolean;
@@ -58,7 +58,7 @@ export function PerformanceScoreChart({
         <PerformanceScoreLabel>{t('Performance Score')}</PerformanceScoreLabel>
         <PerformanceScoreSubtext>{performanceScoreSubtext}</PerformanceScoreSubtext>
         {!isProjectScoreLoading && projectScore && (
-          <OverallProgressRing
+          <PerformanceScoreRingWithTooltips
             projectScore={projectScore}
             text={score}
             width={220}

static/app/views/performance/browser/webVitals/utils/types.tsx

@@ -12,6 +12,7 @@ export type Row = {
 };
 
 export type TransactionSampleRow = {
+  browser: string;
   id: string;
   'measurements.cls': number | null;
   'measurements.fcp': number | null;

static/app/views/performance/browser/webVitals/webVitalsDetailPanel.tsx

@@ -357,7 +357,11 @@ export function WebVitalsDetailPanel({
               )
                 ? {pathname: `${location.pathname}overview/`}
                 : {}),
-              query: {...location.query, transaction: row.transaction},
+              query: {
+                ...location.query,
+                transaction: row.transaction,
+                webVital,
+              },
             }}
             onClick={onClose}
           >