feat(ui): Move checkInTimeline underscan to the left

Prior to this change, check-in timelines displayed a "underscan" area on
the right side of the timeline container. This is the area that remains
after we found the optimal rollup + bucket size + minimum underscan
size. This area was visually indicated by a hashed gray indicator with a
tooltip indicating that this area was "outside" of the selected time
range (period).

We received various feedback that the existence of this area is
confusing. However, we can't just eliminate this area. You simply
cannot divide 60 into 100 (as an example), so we need to constrain the
size of the timeline that we render the selected period. We can
however, instead of having the underscan at the end, simply place the
underscan at the start and mvoe the starting gridline marker to where
the actual period starts, and eschew the indication that there is
underscan.

There is an important note here. Previously when the underscan was at
the end, there was no need to account for the fact that the size of the
underscan area **will not always evenly fit the bucket sizes**. Since
the underscan area is the remaining area in the timeline container,
there's no way to guarantee that the buckets evenly fit into this area.
In the old implementation we simply would not query the last bucket and
it would never overflow out of the container.

Now that the underscan is on the left, we need to account for the fact
that the buckets may not be aligned to the actual size of the underscan.
So we compute an additional underscanStartOffset that we'll use to move
the ticks to the left by. This ensures the first bucket starts aligned
at the pixel value that represents that bucket start time, allowing all
following buckets to be correctly aligned.

Before
<img alt="clipboard.png" width="968" src="https://i.imgur.com/nirhIrF.png" />

After
<img alt="clipboard.png" width="970" src="https://i.imgur.com/uOVIdLJ.png" />

Notice how the underscan has moved to the left side

Author: evanpurkhiser

Diff for: static/app/components/checkInTimeline/checkInTooltip.spec.tsx

@@ -8,6 +8,7 @@ import type {JobTickData, TimeWindowConfig} from './types';
 
 const tickConfig: TimeWindowConfig = {
   start: new Date('2023-06-15T11:00:00Z'),
+  periodStart: new Date('2023-06-15T11:00:00Z'),
   end: new Date('2023-06-15T12:00:00Z'),
   dateLabelFormat: getFormat({timeOnly: true, seconds: true}),
   elapsedMinutes: 60,
@@ -23,9 +24,9 @@ const tickConfig: TimeWindowConfig = {
     interval: 0,
     timelineUnderscanWidth: 0,
     totalBuckets: 0,
-    underscanPeriod: 0,
+    underscanBuckets: 0,
+    underscanStartOffset: 0,
   },
-  showUnderscanHelp: false,
 };
 
 describe('CheckInTooltip', function () {

Diff for: static/app/components/checkInTimeline/gridLines.tsx

@@ -6,16 +6,21 @@ import moment from 'moment-timezone';
 
 import {updateDateTime} from 'sentry/actionCreators/pageFilters';
 import {DateTime} from 'sentry/components/dateTime';
-import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useRouter from 'sentry/utils/useRouter';
 
-import QuestionTooltip from '../questionTooltip';
-
 import {type CursorOffsets, useTimelineCursor} from './timelineCursor';
 import {useTimelineZoom} from './timelineZoom';
 import type {TimeWindowConfig} from './types';
 
+/**
+ * The number of pixels the underscan must be larger than to render the first
+ * grid marker line. When the underscan is very small we don't want to render
+ * the first marker line since it will be very close to the left side and can
+ * look strange.
+ */
+const UNDERSCAN_MARKER_LINE_THRESHOLD = 10;
+
 type LabelPosition = 'left-top' | 'center-bottom';
 
 interface TimeMarker {
@@ -50,37 +55,44 @@ function alignDateToBoundary(date: moment.Moment, minuteInterval: number) {
 }
 
 function getTimeMarkersFromConfig(config: TimeWindowConfig) {
-  const {start, end, elapsedMinutes, intervals, dateTimeProps, timelineWidth} = config;
+  const {periodStart, end, elapsedMinutes, intervals, dateTimeProps, timelineWidth} =
+    config;
 
   const {referenceMarkerInterval, minimumMarkerInterval, normalMarkerInterval} =
     intervals;
 
+  // Markers start after the underscan on the left
+  const startOffset = config.rollupConfig.timelineUnderscanWidth;
+
   const msPerPixel = (elapsedMinutes * 60 * 1000) / timelineWidth;
 
   // The first marker will always be the starting time. This always renders the
   // full date and time
   const markers: TimeMarker[] = [
     {
-      date: start,
-      position: 0,
+      date: periodStart,
+      position: startOffset,
       dateTimeProps: {timeZone: true},
     },
   ];
 
   // The mark after the first mark will be aligned to a boundary to make it
   // easier to understand the rest of the marks
-  const currentMark = alignDateToBoundary(moment(start), normalMarkerInterval);
+  const currentMark = alignDateToBoundary(moment(periodStart), normalMarkerInterval);
 
   // The first label is larger since we include the date, time, and timezone.
 
-  while (currentMark.isBefore(moment(start).add(referenceMarkerInterval, 'minutes'))) {
+  while (
+    currentMark.isBefore(moment(periodStart).add(referenceMarkerInterval, 'minutes'))
+  ) {
     currentMark.add(normalMarkerInterval, 'minute');
   }
 
   // Generate time markers which represent location of grid lines/time labels.
   // Stop adding markers once there's no more room for more markers
   while (moment(currentMark).add(minimumMarkerInterval, 'minutes').isBefore(end)) {
-    const position = (currentMark.valueOf() - start.valueOf()) / msPerPixel;
+    const position =
+      startOffset + (currentMark.valueOf() - periodStart.valueOf()) / msPerPixel;
     markers.push({date: currentMark.toDate(), position, dateTimeProps});
     currentMark.add(normalMarkerInterval, 'minutes');
   }
@@ -113,23 +125,6 @@ export function GridLineLabels({
           <TimeLabel date={date} {...dateTimeProps} />
         </TimeLabelContainer>
       ))}
-      {timeWindowConfig.showUnderscanHelp && (
-        <TimeLabelContainer
-          left={
-            labelPosition === 'left-top'
-              ? timeWindowConfig.timelineWidth
-              : timeWindowConfig.timelineWidth - 12
-          }
-          labelPosition={labelPosition}
-        >
-          <QuestionTooltip
-            size="xs"
-            title={t(
-              'This area of the timeline is outside of your selected time range to allow for accurate rendering of markers.'
-            )}
-          />
-        </TimeLabelContainer>
-      )}
     </LabelsContainer>
   );
 }
@@ -176,13 +171,17 @@ export function GridLineOverlay({
   labelPosition = 'left-top',
 }: GridLineOverlayProps) {
   const router = useRouter();
-  const {start, timelineWidth, dateLabelFormat, rollupConfig} = timeWindowConfig;
+  const {periodStart, timelineWidth, dateLabelFormat, rollupConfig} = timeWindowConfig;
+  const {timelineUnderscanWidth} = rollupConfig;
 
   const msPerPixel = (timeWindowConfig.elapsedMinutes * 60 * 1000) / timelineWidth;
 
+  // XXX: The dateFromPosition is aligned to the periodStart, which is relative
+  // to the pixel value after the timelineUnderscanWidth.
   const dateFromPosition = useCallback(
-    (position: number) => moment(start.getTime() + msPerPixel * position),
-    [msPerPixel, start]
+    (position: number) =>
+      moment(periodStart.getTime() + msPerPixel * (position - timelineUnderscanWidth)),
+    [msPerPixel, periodStart, timelineUnderscanWidth]
   );
 
   const makeCursorLabel = useCallback(
@@ -217,33 +216,21 @@ export function GridLineOverlay({
   });
 
   const overlayRef = mergeRefs(cursorContainerRef, selectionContainerRef);
-  const markers = getTimeMarkersFromConfig(timeWindowConfig);
-
-  // Skip first gridline, this will be represented as a border on the
-  // LabelsContainer
-  markers.shift();
+  const gridLine = getTimeMarkersFromConfig(timeWindowConfig);
 
-  if (timeWindowConfig.showUnderscanHelp) {
-    markers.push({
-      date: timeWindowConfig.end,
-      position: timeWindowConfig.timelineWidth,
-      dateTimeProps: {},
-    });
+  // Skip rendering of the first grid line marker when the underscan width is
+  // below the threshold to be displayed
+  if (timelineUnderscanWidth < UNDERSCAN_MARKER_LINE_THRESHOLD) {
+    gridLine.shift();
   }
 
   return (
     <Overlay aria-hidden ref={overlayRef} className={className}>
       {timelineCursor}
       {timelineSelector}
       {additionalUi}
-      <Underscan
-        labelPosition={labelPosition}
-        style={{
-          width: rollupConfig.timelineUnderscanWidth - 1,
-        }}
-      />
       <GridLineContainer>
-        {markers.map(({date, position}) => (
+        {gridLine.map(({date, position}) => (
           <Gridline key={date.getTime()} left={position} labelPosition={labelPosition} />
         ))}
       </GridLineContainer>
@@ -349,30 +336,3 @@ const TimeLabel = styled(DateTime)`
   color: ${p => p.theme.subText};
   pointer-events: none;
 `;
-
-const Underscan = styled('div')<{labelPosition: LabelPosition}>`
-  position: absolute;
-  right: 0;
-  background-size: 3px 3px;
-  background-image: linear-gradient(
-    45deg,
-    ${p => p.theme.translucentBorder} 25%,
-    transparent 25%,
-    transparent 50%,
-    ${p => p.theme.translucentBorder} 50%,
-    ${p => p.theme.translucentBorder} 75%,
-    transparent 75%,
-    transparent
-  );
-  ${p =>
-    p.labelPosition === 'left-top' &&
-    css`
-      height: calc(100% - 51px);
-      margin-top: 51px;
-    `}
-  ${p =>
-    p.labelPosition === 'center-bottom' &&
-    css`
-      height: 100%;
-    `}
-`;

Diff for: static/app/components/checkInTimeline/types.tsx

@@ -39,11 +39,16 @@ export interface RollupConfig {
    */
   totalBuckets: number;
   /**
-   * When there is an underscan we also will likely want to query the
-   * additional time range for that underscan, this is the additional period of
-   * time that the underscan represents in seconds.
+   * How many total buckets are part of the underscan area
    */
-  underscanPeriod: number;
+  underscanBuckets: number;
+  /**
+   * The negative pixel offset that must be applied to all ticks when the
+   * underscan width cannot evenly fit each bucket. This happens because the
+   * underscan is the "remaining" size of the timeine container and thus will
+   * not always be an even multiple of the pixel bucket size.
+   */
+  underscanStartOffset: number;
 }
 
 export interface TimeWindowConfig {
@@ -68,16 +73,18 @@ export interface TimeWindowConfig {
    */
   intervals: MarkerIntervals;
   /**
-   * Configures how check-ins are bucketed into the timeline
+   * The start of the window excluding the underscan period.
    */
-  rollupConfig: RollupConfig;
+  periodStart: Date;
   /**
-   * When true the underscan help indicator should be rendered after the date
-   * time markers.
+   * Configures how check-ins are bucketed into the timeline
    */
-  showUnderscanHelp: boolean;
+  rollupConfig: RollupConfig;
   /**
-   * The start of the window
+   * The start of the window.
+   *
+   * NOTE that this includes the underscan period. The periodStart value is
+   * what the selected period is actually configured for.
    */
   start: Date;
   /**

Diff for: static/app/components/checkInTimeline/utils/getConfigFromTimeRange.spec.tsx

@@ -1,3 +1,5 @@
+import moment from 'moment-timezone';
+
 import {getFormat} from 'sentry/utils/dates';
 
 import {getConfigFromTimeRange} from './getConfigFromTimeRange';
@@ -10,6 +12,7 @@ describe('getConfigFromTimeRange', function () {
     const end = new Date('2023-06-15T11:05:00Z');
     const config = getConfigFromTimeRange(start, end, timelineWidth);
     expect(config).toEqual({
+      periodStart: start,
       start,
       end,
       dateLabelFormat: getFormat({timeOnly: true, seconds: true}),
@@ -20,9 +23,8 @@ describe('getConfigFromTimeRange', function () {
         timelineUnderscanWidth: 0,
         totalBuckets: 20,
         underscanBuckets: 0,
-        underscanPeriod: 0,
+        underscanStartOffset: 0,
       },
-      showUnderscanHelp: false,
       intervals: {
         normalMarkerInterval: 1,
         minimumMarkerInterval: 0.625,
@@ -38,7 +40,10 @@ describe('getConfigFromTimeRange', function () {
     const end = new Date('2023-06-16T11:05:00Z');
     const config = getConfigFromTimeRange(start, end, timelineWidth);
     expect(config).toEqual({
-      start,
+      periodStart: start,
+      start: moment(start)
+        .subtract(60 * 154, 'seconds')
+        .toDate(),
       end,
       dateLabelFormat: getFormat(),
       elapsedMinutes: 1445,
@@ -48,9 +53,8 @@ describe('getConfigFromTimeRange', function () {
         timelineUnderscanWidth: 77,
         totalBuckets: 1446,
         underscanBuckets: 154,
-        underscanPeriod: 9240,
+        underscanStartOffset: 0,
       },
-      showUnderscanHelp: false,
       intervals: {
         normalMarkerInterval: 240,
         minimumMarkerInterval: 219.8478561549101,
@@ -66,7 +70,10 @@ describe('getConfigFromTimeRange', function () {
     const end = new Date('2023-06-15T23:00:00Z');
     const config = getConfigFromTimeRange(start, end, timelineWidth);
     expect(config).toEqual({
-      start,
+      periodStart: start,
+      start: moment(start)
+        .subtract(900 * 2, 'seconds')
+        .toDate(),
       end,
       dateLabelFormat: getFormat({timeOnly: true}),
       elapsedMinutes: 900,
@@ -75,15 +82,14 @@ describe('getConfigFromTimeRange', function () {
         interval: 900,
         timelineUnderscanWidth: 20,
         totalBuckets: 60,
-        underscanBuckets: 1,
-        underscanPeriod: 900,
+        underscanBuckets: 2,
+        underscanStartOffset: 6,
       },
       intervals: {
         normalMarkerInterval: 120,
         minimumMarkerInterval: 115.38461538461537,
         referenceMarkerInterval: 132.69230769230768,
       },
-      showUnderscanHelp: false,
       dateTimeProps: {timeOnly: true},
       timelineWidth: 780,
     });
@@ -94,7 +100,10 @@ describe('getConfigFromTimeRange', function () {
     const end = new Date('2023-06-15T11:00:00Z');
     const config = getConfigFromTimeRange(start, end, timelineWidth);
     expect(config).toEqual({
-      start,
+      periodStart: start,
+      start: moment(start)
+        .subtract(1800 * 112, 'seconds')
+        .toDate(),
       end,
       dateLabelFormat: getFormat(),
       // 31 elapsed days
@@ -105,15 +114,14 @@ describe('getConfigFromTimeRange', function () {
         timelineUnderscanWidth: 56,
         totalBuckets: 1488,
         underscanBuckets: 112,
-        underscanPeriod: 201600,
+        underscanStartOffset: 0,
       },
       // 5 days in between each time label
       intervals: {
         normalMarkerInterval: 5 * 24 * 60,
         minimumMarkerInterval: 6000,
         referenceMarkerInterval: 6900,
       },
-      showUnderscanHelp: false,
       dateTimeProps: {dateOnly: true},
       timelineWidth: 744,
     });
@@ -124,7 +132,10 @@ describe('getConfigFromTimeRange', function () {
     const end = new Date('2023-05-15T10:00:00Z');
     const config = getConfigFromTimeRange(start, end, timelineWidth);
     expect(config).toEqual({
-      start,
+      periodStart: start,
+      start: moment(start)
+        .subtract(900 * 2, 'seconds')
+        .toDate(),
       end,
       dateLabelFormat: getFormat(),
       // 14 hours
@@ -134,10 +145,9 @@ describe('getConfigFromTimeRange', function () {
         interval: 900,
         timelineUnderscanWidth: 16,
         totalBuckets: 56,
-        underscanBuckets: 1,
-        underscanPeriod: 900,
+        underscanBuckets: 2,
+        underscanStartOffset: 12,
       },
-      showUnderscanHelp: false,
       intervals: {
         normalMarkerInterval: 120,
         minimumMarkerInterval: 117.85714285714285,