Create VirtualizedGrid component for catalog view

[sahil143]

Fixes: https://issues.redhat.com/browse/ODC-4027

Analysis: Virtualize Developer Catalog to support very large number of items

Solution: Created a VirtualizedGrid component which is used in catalog
NOTE: this also affects the operator hub because same component is shared between the catalog page and operator hub

Screenshots:

Unit tests:

Browser:

• Chrome

[rohitkrai03]

/assign

[rohitkrai03]

@sahil143 I haven't gone into reviewing code in depth yet, but noticed a few issues by just running your branch locally. To start off with the performance really seems to be slow and the frame rates are dropping too much with the new implementation. While scrolling the screen feels janky due to very low frame rates.

Below is a gif of dev catalog on your branch, notice the low frame rate shown in the top left corner. Its almost always below 10fps.

Below is a dev catalog on master, notice how the frame rate goes up to 60fps.

[rohitkrai03]

I also see a lot of react warnings in the console.

3-45.png…]()

[rohitkrai03]

I see the bottom of the tiles being cut off when there are less number of items in catalog -

[rohitkrai03]

Also noticed this weird issue where the tiles suddenly vanish from the top while scrolling up and down and then come back suddenly.

[sahil143]

I also see a lot of react warnings in the console.

fixed, except for the key prop missing. Key Prop is provided on both CellMeasurer and wrapper div but somehow it's being removed in react-virtualized.

I see the bottom of the tiles being cut off when there are less number of items in catalog -

height of the container is being set by the window scroller and the tiles are not cut it's just that their box shadow is hidden. i tried adding margin which adds the space but the shadow is still hidden for the last row of tiles.

Also noticed this weird issue where the tiles suddenly vanish from the top while scrolling up and down and then come back suddenly.

I wasn't able to reproduce this while scrolling. Is there any particular step that needs to be followed here?

To start off with the performance really seems to be slow and the frame rates are dropping too much with the new implementation. While scrolling the screen feels janky due to very low frame rates.

yes, the frame rate seems to be very low, Investigating this issue.

[sahil143]

/retest

[christianvogt]

Scrolling is a bit janky it seems because the scrollbar grows and shrinks in size as your scroll down and up. I would expect the scrollbar to remain relatively the same size. After scrolling through the entire list, I would expect the cache to have a precise measurement on the scrollbar and to no longer adjust the sizing. But that's not the case here.

[christianvogt]

The tiles rendered to screen seem to be re-rendering on every scroll. I'd expect them to not have to re-render unless data changes.

edit: the items are actually being unmounted and remounted on scroll

[christianvogt]

The last row in the grid disappears prematurely when scrolling up.

[sahil143]

/hold

[sahil143]

Scrolling is a bit janky it seems because the scrollbar grows and shrinks in size as your scroll down and up. I would expect the scrollbar to remain relatively the same size. After scrolling through the entire list, I would expect the cache to have a precise measurement on the scrollbar and to no longer adjust the sizing. But that's not the case here.

the scrollbar is growing and shrinking because of dynamic row/cell height, I tried making the row height fixed and the scrollbar remained the same size.

The tiles rendered to screen seem to be re-rendering on every scroll. I'd expect them to not have to re-render unless data changes.
edit: the items are actually being unmounted and remounted on scroll

I guess that's more or less expected, this issue talks about the same bvaughn/react-virtualized#416

The last row in the grid disappears prematurely when scrolling up

fixed.

[sahil143]

/hold cancel

[sahil143]

/retest

[christianvogt]

Scrolling is a bit janky it seems because the scrollbar grows and shrinks in size as your scroll down and up. I would expect the scrollbar to remain relatively the same size. After scrolling through the entire list, I would expect the cache to have a precise measurement on the scrollbar and to no longer adjust the sizing. But that's not the case here.

the scrollbar is growing and shrinking because of dynamic row/cell height, I tried making the row height fixed and the scrollbar remained the same size.

Shouldn't we be able to assume a certain height per row?
The difference in scrollbar size on page load and after scrolling is quite noticeable.

On page load:

After scrolling to the bottom:

[christianvogt]

The tiles rendered to screen seem to be re-rendering on every scroll. I'd expect them to not have to re-render unless data changes.
edit: the items are actually being unmounted and remounted on scroll

I guess that's more or less expected, this issue talks about the same bvaughn/react-virtualized#416

This is not expected. Components should be unmounted and remounted on scroll.
Furthermore, tiles can be wrapped with memo to ensure we don't need to re-render.

[christianvogt]

Missing padding at the bottom. Also it seems that the background is now focusable which causes a focus outline (see black outline). Previously it was not.

[sahil143]

Shouldn't we be able to assume a certain height per row?
The difference in scrollbar size on page load and after scrolling is quite noticeable.

yes, I missed a prop estimatedRowHeight. After adding this prop scroll bar size is consistent.

This is not expected. Components should be unmounted and remounted on scroll.
Furthermore, tiles can be wrapped with memo to ensure we don't need to re-render.

As discussed, Added React.memo to the renderTile component to prevent unnecessary re-renders.

Missing padding at the bottom.

fixed this. used padding for each cell instead of subtracting a constant from height and width to create space between tiles

Updated Screenshots

[christianvogt]

I see this console:

When using the type filters, even when there's enough space for more columns, sometimes it shows less:

[sahil143]

I see this console:

When using the type filters, even when there's enough space for more columns, sometimes it shows less:

@christianvogt fixed both the issue.

updated screenshot

[christianvogt]

/lgtm
/approve

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christianvogt, sahil143

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [christianvogt]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[rohitkrai03]

/retest

[openshift-bot]

/retest

Please review the full test history for this PR and help us cut down flakes.

[openshift-bot]

/retest

Please review the full test history for this PR and help us cut down flakes.

[openshift-bot]

/retest

Please review the full test history for this PR and help us cut down flakes.

[rohitkrai03]

@sahil143 It would also be good if you could squash your commits into better explanatory commit messages around the feature.