feat(issues): Place current event markline on bar (#91914)

scttcper · web-flow · commit 0157ee26741d · 2025-05-20T09:57:38.000-07:00
Instead of using the current event's datetime, place the markline directly on a bar in the graph since echarts can sometimes render the current event off the chart due to mixing line charts and bar charts on a single xAxis. before ![image](https://github.com/user-attachments/assets/9fefc64e-4c71-465b-8a13-8fa0ab735c79) after ![image](https://github.com/user-attachments/assets/9497642e-2d70-4475-828f-4be9d43cf697) fixes https://linear.app/getsentry/issue/RTC-855/issue-details-recommended-and-last-event-doesnt-show-on-timeline
diff --git a/static/app/views/issueDetails/streamline/eventGraph.tsx b/static/app/views/issueDetails/streamline/eventGraph.tsx
@@ -22,7 +22,7 @@ import {Button, type ButtonProps} from 'sentry/components/core/button';
 import Placeholder from 'sentry/components/placeholder';
 import {t, tct, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {ReactEchartsRef, SeriesDataUnit} from 'sentry/types/echarts';
+import type {ReactEchartsRef} from 'sentry/types/echarts';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {EventsStats, MultiSeriesEventsStats} from 'sentry/types/organization';
@@ -86,7 +86,10 @@ interface EventGraphProps {
 }
 
 function createSeriesAndCount(stats: EventsStats) {
-  return stats?.data?.reduce(
+  return stats?.data?.reduce<{
+    count: number;
+    series: Array<{name: number; value: number}>;
+  }>(
     (result, [timestamp, countData]) => {
       const count = countData?.[0]?.count ?? 0;
       return {
@@ -100,7 +103,7 @@ function createSeriesAndCount(stats: EventsStats) {
         count: result.count + count,
       };
     },
-    {series: [] as SeriesDataUnit[], count: 0}
+    {series: [], count: 0}
   );
 }
 
@@ -240,6 +243,7 @@ export function EventGraph({
   const currentEventSeries = useCurrentEventMarklineSeries({
     event,
     group,
+    eventSeries,
   });
 
   const [legendSelected, setLegendSelected] = useLocalStorageState(
@@ -287,9 +291,8 @@ export function EventGraph({
   // Do some manipulation to make sure the release buckets match up to `eventSeries`
   const lastEventSeries = eventSeries.at(-1);
   const penultEventSeries = eventSeries.at(-2);
-  const lastEventSeriesTimestamp = lastEventSeries && (lastEventSeries.name as number);
-  const penultEventSeriesTimestamp =
-    penultEventSeries && (penultEventSeries.name as number);
+  const lastEventSeriesTimestamp = lastEventSeries?.name;
+  const penultEventSeriesTimestamp = penultEventSeries?.name;
   const eventSeriesInterval =
     lastEventSeriesTimestamp &&
     penultEventSeriesTimestamp &&
@@ -396,7 +399,7 @@ export function EventGraph({
     }
 
     // Only display the current event mark line if on the issue details tab
-    if (currentEventSeries.markLine && currentTab === Tab.DETAILS) {
+    if (currentEventSeries?.markLine && currentTab === Tab.DETAILS) {
       seriesData.push(currentEventSeries as BarChartSeries);
     }
 
diff --git a/static/app/views/issueDetails/streamline/hooks/useEventMarkLineSeries.tsx b/static/app/views/issueDetails/streamline/hooks/useEventMarkLineSeries.tsx
@@ -1,119 +1,91 @@
+import {useMemo} from 'react';
 import {useTheme} from '@emotion/react';
-import type {LineSeriesOption} from 'echarts';
 
 import MarkLine from 'sentry/components/charts/components/markLine';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import {getFormattedDate} from 'sentry/utils/dates';
-import {getShortEventId} from 'sentry/utils/events';
-import {useNavigate} from 'sentry/utils/useNavigate';
-import useOrganization from 'sentry/utils/useOrganization';
 import {useIssueDetailsEventView} from 'sentry/views/issueDetails/streamline/hooks/useIssueDetailsDiscoverQuery';
 
-function useEventMarklineSeries({
-  events,
-  group,
-  markLineProps = {},
-}: {
-  events: Event[];
+interface UseEventMarklineSeriesProps {
+  event: Event | undefined;
+  /**
+   * The event series is used to place the mark line on the nearest bar
+   * This is to ensure the mark line is always visisble.
+   */
+  eventSeries: Array<{name: number; value: number}>;
   group: Group;
-  markLineProps?: Partial<LineSeriesOption['markLine']>;
-}) {
-  const theme = useTheme();
-  const navigate = useNavigate();
-  const organization = useOrganization();
-  const eventView = useIssueDetailsEventView({group});
-  const baseEventsPath = `/organizations/${organization.slug}/issues/${group.id}/events/`;
-
-  const markLine = events.length
-    ? MarkLine({
-        animation: false,
-        lineStyle: {
-          color: theme.isChonk ? theme.tokens.graphics.promotion : theme.pink200,
-          type: 'solid',
-        },
-        label: {
-          show: false,
-        },
-        data: events.map(event => ({
-          xAxis: +new Date(event.dateCreated ?? event.dateReceived),
-          name: getShortEventId(event.id),
-          value: getShortEventId(event.id),
-          onClick: () => {
-            navigate({
-              pathname: `${baseEventsPath}${event.id}/`,
-            });
-          },
-          label: {
-            formatter: () => getShortEventId(event.id),
-          },
-        })),
-        tooltip: {
-          trigger: 'item',
-          formatter: ({data}: any) => {
-            const time = getFormattedDate(data.value, 'MMM D, YYYY LT', {
-              local: !eventView.utc,
-            });
-            return [
-              '<div class="tooltip-series">',
-              `<div><span class="tooltip-label"><strong>${data.name}</strong></span></div>`,
-              '</div>',
-              `<div class="tooltip-footer">${time}</div>`,
-              '<div class="tooltip-arrow"></div>',
-            ].join('');
-          },
-        },
-        ...markLineProps,
-      })
-    : undefined;
-
-  return {
-    seriesName: t('Specific Events'),
-    data: [],
-    markLine,
-    color: theme.pink200,
-    type: 'line',
-  };
 }
 
 export function useCurrentEventMarklineSeries({
   event,
   group,
-  markLineProps = {},
-}: {
-  group: Group;
-  event?: Event;
-  markLineProps?: Partial<LineSeriesOption['markLine']>;
-}) {
+  eventSeries,
+}: UseEventMarklineSeriesProps) {
+  const theme = useTheme();
   const eventView = useIssueDetailsEventView({group});
 
-  const result = useEventMarklineSeries({
-    events: event ? [event] : [],
-    group,
-    markLineProps: {
+  return useMemo(() => {
+    if (!event) {
+      return undefined;
+    }
+
+    const eventDateCreated = new Date(event.dateCreated!).getTime();
+    const closestEventSeries = eventSeries.reduce<
+      {name: number; value: number} | undefined
+    >((acc, curr) => {
+      // Find the first bar that would contain the current event
+      if (curr.value && curr.name <= eventDateCreated) {
+        if (!acc || curr.name > acc.name) {
+          return curr;
+        }
+      }
+      return acc;
+    }, undefined);
+
+    if (!closestEventSeries) {
+      return undefined;
+    }
+
+    const markLine = MarkLine({
+      animation: false,
+      lineStyle: {
+        color: theme.isChonk ? theme.tokens.graphics.promotion : theme.pink200,
+        type: 'solid',
+      },
+      label: {
+        show: false,
+      },
+      data: [
+        {
+          xAxis: closestEventSeries.name,
+          name: event.id,
+        },
+      ],
       tooltip: {
         trigger: 'item',
-        formatter: ({data}: any) => {
-          const time = getFormattedDate(data.value, 'MMM D, YYYY LT', {
+        formatter: () => {
+          // Do not use date from xAxis here since we've placed it on the nearest bar
+          const time = getFormattedDate(event.dateCreated, 'MMM D, YYYY LT', {
             local: !eventView.utc,
           });
           return [
             '<div class="tooltip-series">',
-            `<div><span class="tooltip-label"><strong>${t(
-              'Current Event'
-            )}</strong></span></div>`,
+            `<div><span class="tooltip-label"><strong>${t('Current Event')}</strong></span></div>`,
             '</div>',
             `<div class="tooltip-footer">${time}</div>`,
             '<div class="tooltip-arrow"></div>',
           ].join('');
         },
       },
-      ...markLineProps,
-    },
-  });
-  return {
-    ...result,
-    seriesName: t('Current Event'),
-  };
+    });
+
+    return {
+      seriesName: 'Current Event',
+      data: [],
+      markLine,
+      type: 'line',
+    };
+  }, [event, theme, eventView.utc, eventSeries]);
 }
