feat(starfish): use cross hairs for duration chart (#50486)

Use crosshairs for duration chart to match the mocks
<img width="561" alt="image"
src="https://github.com/getsentry/sentry/assets/44422760/33b0ae41-d4e7-45c0-9ae0-e9af3bef5393">

Also some other quick cleanup

static/app/views/starfish/components/tableCells/timeSpentCell.tsx

@@ -11,7 +11,9 @@ export function TimeSpentCell({
   const toolTip = getTooltip('timeSpent', totalSpanTime);
   return (
     <span>
-      <Tooltip title={toolTip}>{formattedTimeSpent}</Tooltip>
+      <Tooltip isHoverable title={toolTip}>
+        {formattedTimeSpent}
+      </Tooltip>
     </span>
   );
 }

static/app/views/starfish/views/spanSummaryPage/sampleList/durationChart/index.tsx

@@ -1,3 +1,4 @@
+import {useTheme} from '@emotion/react';
 import moment from 'moment';
 
 import {Series} from 'sentry/types/echarts';
@@ -21,6 +22,7 @@ type Props = {
 function DurationChart({groupId, transactionName, spanDescription}: Props) {
   const pageFilter = usePageFilters();
   const {isLoading, data} = useQuerySpansInTransaction({groupId});
+  const theme = useTheme();
 
   const spanGroupOperation = data?.[0]?.span_operation;
   const module = data?.[0]?.module;
@@ -50,6 +52,9 @@ function DurationChart({groupId, transactionName, spanDescription}: Props) {
           value: spanDuration,
         },
       ],
+      symbol: 'path://M -1 -1 V -5 H 0 V -1 H 4 V 0 H 0 V 4 H -1 V 0 H -5 V -1 H -1',
+      color: theme.gray400,
+      symbolSize: 15,
       seriesName: transaction_id.split('-')[0],
     })
   );

static/app/views/starfish/views/spanSummaryPage/sampleList/sampleInfo/index.tsx

@@ -1,10 +1,10 @@
-import {Tooltip} from 'sentry/components/tooltip';
-import {t} from 'sentry/locale';
 import {formatPercentage} from 'sentry/utils/formatters';
+import DurationCell from 'sentry/views/starfish/components/tableCells/durationCell';
 import ThroughputCell from 'sentry/views/starfish/components/tableCells/throughputCell';
+import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
 import {useApplicationMetrics} from 'sentry/views/starfish/queries/useApplicationMetrics';
 import {useSpanTransactionMetrics} from 'sentry/views/starfish/queries/useSpanTransactionMetrics';
-import {DataTitles, getTooltip} from 'sentry/views/starfish/views/spans/types';
+import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 import {Block, BlockContainer} from 'sentry/views/starfish/views/spanSummaryPage';
 
 type Props = {
@@ -24,18 +24,19 @@ function SampleInfo(props: Props) {
   const span_total_time = spanMetrics[transactionName]?.total_time;
   const application_total_time = applicationMetrics['sum(span.duration)'];
 
-  const tooltip = getTooltip('timeSpent', span_total_time, application_total_time);
-
   return (
     <BlockContainer>
-      <Block title={t('Throughput')}>
+      <Block title={DataTitles.throughput}>
         <ThroughputCell throughputPerSecond={spansPerSecond} />
       </Block>
-      <Block title={DataTitles.p95}>{p95?.toFixed(2)} ms</Block>
+      <Block title={DataTitles.p95}>
+        <DurationCell seconds={p95} />
+      </Block>
       <Block title={DataTitles.timeSpent}>
-        <Tooltip isHoverable title={tooltip}>
-          {formatPercentage(span_total_time / application_total_time)}
-        </Tooltip>
+        <TimeSpentCell
+          formattedTimeSpent={formatPercentage(span_total_time / application_total_time)}
+          totalSpanTime={span_total_time}
+        />
       </Block>
     </BlockContainer>
   );

static/app/views/starfish/views/spans/types.tsx

@@ -29,7 +29,7 @@ export const getTooltip = (
     return (
       <Fragment>
         <div>{spanTime}</div>
-        <Link to="/starfish/definitions">How was this calculated?</Link>
+        <Link to="/starfish/definitions/">How was this calculated?</Link>
       </Fragment>
     );
   }