feat(issues): Adjust timeline tooltip placement (#64507)

static/app/views/issueDetails/traceTimeline/traceTimeline.spec.tsx

@@ -83,7 +83,7 @@ describe('TraceTimeline', () => {
     render(<TraceTimeline event={event} />, {organization});
     expect(await screen.findByLabelText('Current Event')).toBeInTheDocument();
 
-    await userEvent.hover(screen.getByLabelText('Current Event'));
+    await userEvent.hover(screen.getByTestId('trace-timeline-tooltip-1'));
     expect(await screen.findByText('You are here')).toBeInTheDocument();
   });
 

static/app/views/issueDetails/traceTimeline/traceTimeline.tsx

@@ -65,7 +65,7 @@ const TimelineOutline = styled('div')`
   left: 0;
   top: 5px;
   width: 100%;
-  height: 6px;
+  height: 8px;
   border: 1px solid ${p => p.theme.innerBorder};
   border-radius: ${p => p.theme.borderRadius};
 `;

static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx

@@ -70,6 +70,7 @@ export function TraceTimelineEvents({event, width}: TraceTimelineEventsProps) {
                 columnSize={columnSize}
                 timeRange={timeRange}
                 currentEventId={event.id}
+                currentColumn={column}
               />
             </EventColumn>
           );
@@ -114,6 +115,7 @@ const TimelineColumns = styled('ul')<{totalColumns: number}>`
   display: grid;
   grid-template-columns: repeat(${p => p.totalColumns}, 1fr);
   margin-top: -1px;
+  height: 0;
 `;
 
 const TimestampColumns = styled('div')`
@@ -137,9 +139,11 @@ function NodeGroup({
   colEvents,
   columnSize,
   currentEventId,
+  currentColumn,
 }: {
   colEvents: TimelineEvent[];
   columnSize: number;
+  currentColumn: number;
   currentEventId: string;
   event: Event;
   timeRange: [number, number];
@@ -153,43 +157,54 @@ function NodeGroup({
     timeRange[0]
   );
 
+  const columns = Array.from(eventsByColumn.keys());
+  const minColumn = Math.min(...columns);
+  const maxColumn = Math.max(...columns);
+
   return (
-    <Tooltip
-      title={<TraceTimelineTooltip event={event} timelineEvents={colEvents} />}
-      overlayStyle={{
-        padding: `0 !important`,
-      }}
-      offset={10}
-      position="bottom"
-      isHoverable
-      skipWrapper
-    >
+    <Fragment>
       <TimelineColumns totalColumns={totalSubColumns}>
         {Array.from(eventsByColumn.entries()).map(([column, groupEvents]) => {
           const isCurrentNode = groupEvents.some(e => e.id === currentEventId);
-          const isPerformanceNode = groupEvents.every(e => !('event.type' in e));
           return (
             <EventColumn key={column} style={{gridColumn: Math.floor(column)}}>
-              {groupEvents.map(groupEvent =>
-                isCurrentNode ? (
-                  <CurrentNodeContainer
-                    key={groupEvent.id}
-                    aria-label={t('Current Event')}
-                  >
-                    <CurrentNodeRing />
-                    <CurrentIconNode />
-                  </CurrentNodeContainer>
-                ) : isPerformanceNode ? (
-                  <PerformanceIconNode key={groupEvent.id} />
-                ) : (
-                  <IconNode key={groupEvent.id} />
-                )
-              )}
+              {groupEvents.map(groupEvent => (
+                <Fragment key={groupEvent.id}>
+                  {isCurrentNode ? (
+                    <CurrentNodeContainer aria-label={t('Current Event')}>
+                      <CurrentNodeRing />
+                      <CurrentIconNode />
+                    </CurrentNodeContainer>
+                  ) : !('event.type' in groupEvent) ? (
+                    <PerformanceIconNode />
+                  ) : (
+                    <IconNode />
+                  )}
+                </Fragment>
+              ))}
             </EventColumn>
           );
         })}
       </TimelineColumns>
-    </Tooltip>
+      <TimelineColumns totalColumns={totalSubColumns}>
+        <Tooltip
+          title={<TraceTimelineTooltip event={event} timelineEvents={colEvents} />}
+          overlayStyle={{
+            padding: `0 !important`,
+          }}
+          position="bottom"
+          isHoverable
+          skipWrapper
+        >
+          <TooltipHelper
+            style={{
+              gridColumn: columns.length > 1 ? `${minColumn} / ${maxColumn}` : columns[0],
+            }}
+            data-test-id={`trace-timeline-tooltip-${currentColumn}`}
+          />
+        </Tooltip>
+      </TimelineColumns>
+    </Fragment>
   );
 }
 
@@ -260,3 +275,11 @@ const CurrentIconNode = styled(IconNode)`
   border-radius: 50%;
   position: absolute;
 `;
+
+const TooltipHelper = styled('span')`
+  height: 8px;
+  margin-top: -4px;
+  margin-right: -2px;
+  min-width: 8px;
+  z-index: 1;
+`;