feat(ui): Move checkInTimeline underscan to the left #87096
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
Scope: Frontend
❌ 5 Tests Failed:
View the top 3 failed test(s) by shortest run time
To view more test analytics, go to the Test Analytics Dashboard |
evanpurkhiser
force-pushed
the
evanpurkhiser/feat-ui-move-checkintimeline-underscan-to-the-left
branch
from
9c6f2d8 to
f8e2370
Compare
scttcper
approved these changes
Mar 14, 2025
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
evanpurkhiser
force-pushed
the
evanpurkhiser/feat-ui-move-checkintimeline-underscan-to-the-left
branch
from
f8e2370 to
6a0b6c3
Compare
evanpurkhiser
deleted the
evanpurkhiser/feat-ui-move-checkintimeline-underscan-to-the-left
branch
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
After
Notice how the underscan has moved to the left side