Virtualize Bounding Box List

[dieknolle3333]

URL of deployed dev instance (used for testing):

• https://virtualizebb.webknossos.xyz/
• e.g. some bounding boxes are in this annotation: https://virtualizebb.webknossos.xyz/links/hDU6gJX0zhrR8jRS

Steps to test:

• Open an annotation and go to bounding box tab.
• Make sure you have at least 25 bounding boxes. The list should scroll quite some content.
• UI wise, nothing should be different than before, test that. It should look and behave as before (layout, scrolling, etc)
• Check that only the visible bounding boxes (plus some for padding) are loaded, e.g. by inspecting the html.

Issues:

• fixes Virtualize the bounding box tab content #7938

---

(Please delete unneeded items, merge only when none are left open)

• Updated changelog
• Removed dev-only changes like prints and application.conf edits

[philippotto]

The code looks good and the UI too 👍 however, there is one thing: due to the "add bbox button", there is a native scrollbar (in addition to the virtualized but invisible one):

I think, you need to adapt the layout so that the div, that contains the table and the plus-button, is exactly as tall as there is available space. I see two options for that:
a) use a flexbox for that div (not sure how well this behaves with the autosizer). ah, I just see that the button is in a footer row. so, this option probably doesn't work.
b) when the auto-sizer provides a height of Y pixels, subtract the 38 pixels (the height of the button) from that height when passing it along to the table.

since the plus-button is part of the table, I'm not sure why this is happening in the first place. maybe the culprit is somewhere else. can you reproduce this?

[dieknolle3333]

since the plus-button is part of the table, I'm not sure why this is happening in the first place. maybe the culprit is somewhere else. can you reproduce this?

Oh yes, I can reproduce this. I didnt notice that this was an additional scroll bar. But yeah, its weird that this happens!
Anyway, its fixed with your second option! So I'll just leave it at that I think. I didnt see any comment in the docs or any option to include the footer height.
edit: I didnt really find anything special. setting the scroll.y leads to the table content being that height, excluding the footer, but that was almost clear before. I will just leave it with the other fix.

[philippotto]

works well 🎉