Ensure Consistent Subrow Count Across Ranges to Fix UI Scrolling Issues

[Innders]

Problem

The number of subrows changes based on the range, this can cause UI issues when scrolling through a range.

See how in the video bellow the number of rows is jumping around, it should stay consistent even when some events are out of range. The biggest issue is that events will also jump sub-rows.

Screen.Recording.2024-12-23.at.10.13.25.mov

There should be a way of knowing how many subrows there are all-together.

Solution

An option on groupItemsToSubrows that would return empty subrows. This would allow for the rendering of the row, even if there are no events in the range. Or a different util function that returns max subrows (bassically groupItemsToSubrows with no range).

You could not include range in groupItemsToSubrows(events, range) but that causes some pretty significant performance issues.

Any ideas would be greatly appreciated thanks!

[samuelarbibe]

Hey!
groupItemsToSubrows does not perform any filtering.
Why not group all items into subrows, or at least all items in a sufficient range (the span prop is optional), and then render only items that intersect with the current visible range?
It will create all the required subrows, and render them, but only render the actually visible items.

[Innders]

Ah yes I was totally overthinking this and it turned out to be very simple like you explained. Thank you :)

1. Remove range from groupItemsToSubrows
2. Only render items that within the range.

  const groupedSubrows = useMemo(() => groupItemsToSubrows(events), [events]);

subrowItems.map((item) =>
        item.span.start < range.end && item.span.end > range.start && <Item ... />
)