fix(ui): Fix last release bubble bucket (#86956)

The last release bubble has some more recent releases filtered out
because the meaning of `maxTime` differs between the time series plots
and the release buckets:

<img width="886" alt="image"
src="https://github.com/user-attachments/assets/d2d7aa24-817b-450e-9621-6a878c7e9a01"
/>

This PR changes the bucketing logic so it adds releases > `maxTime` to
the last bucket. It assumes we fetch the correct releases outside of the
buckets.

We will have to fix the tooltip to reflect this without changing
`maxTime`.

ref #85775

Author: billyvg

static/app/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/types.tsx

@@ -4,4 +4,9 @@ export type Bucket = {
   end: number;
   releases: ReleaseMetaBasic[];
   start: number;
+  // This is only set on the last bucket item and represents latest timestamp
+  // for data whereas `end` represents the point on a chart's x-axis (time).
+  // e.g. the max timestamp we show on the x-axis is 3:30, but data at that
+  // point represents data from [3:30, now (final)]
+  final?: number;
 };

static/app/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/useReleaseBubbles.tsx

@@ -24,6 +24,7 @@ import type {ReleaseMetaBasic} from 'sentry/types/release';
 import {defined} from 'sentry/utils';
 import {getFormat} from 'sentry/utils/dates';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
 import {useUser} from 'sentry/utils/useUser';
 import {
   BUBBLE_AREA_SERIES_ID,
@@ -76,7 +77,7 @@ function createReleaseBubbleMouseListeners({
         () => (
           <ReleasesDrawer
             startTs={data.start}
-            endTs={data.end}
+            endTs={data.final ?? data.end}
             releases={data.releases}
             buckets={buckets}
             chartRenderer={chartRenderer}
@@ -302,7 +303,7 @@ function ReleaseBubbleSeries({
 ${tn('%s Release', '%s Releases', numberReleases)}
 </div>
 <div class="tooltip-release-timerange">
-${formatBucketTimestamp(bucket.start)} - ${formatBucketTimestamp(bucket.end)}
+${formatBucketTimestamp(bucket.start)} - ${formatBucketTimestamp(bucket.final ?? bucket.end)}
 </div>
 </div>
 
@@ -346,13 +347,21 @@ export function useReleaseBubbles({
   const {openDrawer} = useDrawer();
   const theme = useTheme();
   const {options} = useUser();
+  const {selection} = usePageFilters();
+  // `maxTime` refers to the max time on x-axis for charts.
+  // There may be the need to include releases that are > maxTime (e.g. in the
+  // case of relative date selection). This is used for the tooltip to show the
+  // proper timestamp for releases.
+  const releasesMaxTime = defined(selection.datetime.end)
+    ? new Date(selection.datetime.end).getTime()
+    : Date.now();
   const hasReleaseBubbles = organization.features.includes('release-bubbles-ui');
   const buckets =
     (hasReleaseBubbles &&
       releases?.length &&
       minTime &&
       maxTime &&
-      createReleaseBuckets(minTime, maxTime, releases)) ||
+      createReleaseBuckets(minTime, maxTime, releasesMaxTime, releases)) ||
     [];
 
   if (!releases || !buckets.length) {

static/app/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/utils/createReleaseBuckets.spec.tsx

@@ -11,16 +11,23 @@ describe('createReleaseBuckets', () => {
   ])(
     'creates correct # of buckets for timeSeries with [min, max] of [%d, %d] and %d desired buckets',
     (minTime, maxTime, desiredBuckets, expectedBuckets) => {
-      const buckets = createReleaseBuckets(minTime, maxTime, [], desiredBuckets);
+      const buckets = createReleaseBuckets(
+        minTime,
+        maxTime,
+        Date.now() + 120391, // Shouldn't affect buckets
+        [],
+        desiredBuckets
+      );
       expect(buckets).toHaveLength(expectedBuckets);
     }
   );
 
   it('creates the correct buckets', () => {
     const minTime = Date.now();
     const maxTime = Date.now() + 12 * 1000 + 2235;
+    const finalTime = maxTime + 9999;
 
-    const buckets = createReleaseBuckets(minTime, maxTime, []);
+    const buckets = createReleaseBuckets(minTime, maxTime, finalTime, []);
     expect(buckets).toEqual([
       {start: 1508208080000, end: 1508208081424, releases: []},
       {start: 1508208081424, end: 1508208082848, releases: []},
@@ -31,13 +38,14 @@ describe('createReleaseBuckets', () => {
       {start: 1508208088544, end: 1508208089968, releases: []},
       {start: 1508208089968, end: 1508208091392, releases: []},
       {start: 1508208091392, end: 1508208092816, releases: []},
-      {start: 1508208092816, end: 1508208094235, releases: []},
+      {start: 1508208092816, end: 1508208094235, final: finalTime, releases: []},
     ]);
   });
 
   it('buckets releases correctly', () => {
     const minTime = Date.now();
     const maxTime = Date.now() + 12 * 1000 + 2235;
+    const finalTime = maxTime + 9999;
 
     const releases = [
       {
@@ -76,14 +84,25 @@ describe('createReleaseBuckets', () => {
         version: '[email protected]',
         date: new Date(1508208094235).toISOString(),
       },
-      // Should not be included
+      // Note this is included even though it is > maxTime
+      // because `maxTime` is actually the start time of the
+      // last time series item. We don't necessarily have the
+      // ending timestamp of that bucket
       {
         version: '[email protected]',
-        date: new Date(1508208094236).toISOString(),
+        date: new Date(maxTime + 1).toISOString(),
+      },
+      {
+        version: '[email protected]',
+        date: new Date(maxTime + 10000).toISOString(),
+      },
+      {
+        version: '[email protected]',
+        date: new Date(minTime - 5000).toISOString(),
       },
     ];
 
-    const buckets = createReleaseBuckets(minTime, maxTime, releases);
+    const buckets = createReleaseBuckets(minTime, maxTime, finalTime, releases);
 
     expect(buckets).toEqual([
       {
@@ -110,11 +129,14 @@ describe('createReleaseBuckets', () => {
       {
         start: 1508208092816,
         end: 1508208094235,
+        final: finalTime,
         releases: [
           {version: '[email protected]', date: new Date(1508208092816).toISOString()},
           {version: '[email protected]', date: new Date(1508208094230).toISOString()},
           {version: '[email protected]', date: new Date(1508208094235).toISOString()},
           {version: '[email protected]', date: new Date(1508208094235).toISOString()},
+          {version: '[email protected]', date: new Date(1508208094236).toISOString()},
+          {version: '[email protected]', date: new Date(1508208104235).toISOString()},
         ],
       },
     ]);

static/app/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/utils/createReleaseBuckets.tsx

@@ -22,6 +22,7 @@ import type {Bucket} from 'sentry/views/dashboards/widgets/timeSeriesWidget/rele
 export function createReleaseBuckets(
   minTime: number | undefined,
   maxTime: number | undefined,
+  finalTime: number,
   releases: ReleaseMetaBasic[],
   desiredBuckets = 10
 ): Bucket[] {
@@ -46,8 +47,15 @@ export function createReleaseBuckets(
     const bucketStartTs = minTime + i * interval;
     // Ending timestamp will clump in the remaining bits if it's not
     // evenly distributed
-    const bucketEndTs = i === desiredBuckets - 1 ? maxTime : bucketStartTs + interval;
-    buckets.push({start: bucketStartTs, end: bucketEndTs, releases: []});
+    const isLastBucket = i === desiredBuckets - 1;
+    const bucketEndTs = isLastBucket ? maxTime : bucketStartTs + interval;
+    const item: Bucket = {start: bucketStartTs, end: bucketEndTs, releases: []};
+
+    if (isLastBucket) {
+      item.final = finalTime;
+    }
+
+    buckets.push(item);
   }
 
   // Loop through releases and update its bucket's counters
@@ -56,19 +64,34 @@ export function createReleaseBuckets(
       break;
     }
 
-    // We can determine the releaase's bucket location by using its timestamp
+    // We can determine the release's bucket location by using its timestamp
     // relative to the series starting timestamp.
     const releaseTs = new Date(release.date).getTime();
     const bucketIndex = Math.floor((releaseTs - minTime) / interval);
     const currentBucket = buckets[bucketIndex];
     const bucketEndTs = currentBucket?.end;
 
-    // Note we need to check that the release ts is within the ending bounds, solely for
-    // the last bucket, as the last buckets width can be less than the
-    // others. (i.e. if the total time difference is not perfectly divible by
-    // `desiredBuckets`, the last bucket will be the remainder)
-    if (bucketEndTs && releaseTs <= bucketEndTs) {
+    // Note that `maxTime` represents the position on the xaxis (time) of the
+    // last data point. That timestamp corresponds to data at "timestamp" +
+    // "interval", (e.g. if tooltip says 1:00 and interval between points is
+    // 30 minutes, the data collected is between 1:00 and 1:30).
+    //
+    // The release buckets are different because it has a start and end range
+    // and for its last bucket, it's ending boundary is `maxTime` to
+    // correspond to the chart. We cannot change `maxTime` for the buckets
+    // otherwise we will draw bubbles past the chart data and it would look
+    // broken.
+    //
+    // For now we're going to assume that releases will always fall inbounds
+    // and stick any releases with timestamp > `maxLife` into the last
+    // bucket. The tooltip will be slightly wrong because it will leave out
+    // the last interval.
+    if (bucketEndTs) {
       currentBucket.releases.push(release);
+    } else if (releaseTs > maxTime) {
+      // If we couldn't find a bucket, add release to latest bucket
+      const lastBucket = buckets.at(-1);
+      lastBucket?.releases.push(release);
     }
   }