Optimize HTML's Breakdown performance

[BaeBae33]

Signed-off-by: baebae33 baebae233333@gmail.com

What has changed

Hi, Im not good at React. But I've tried to optimize HTML's breakdown performance with kotlin-react-virtual. Please review my code.

Why was it changed

HTML report performs not well with large list.

Related issues

Html file is slow and stopping to respond #74

[simonschiller]

Thanks for taking the effort to create this PR!

Did you do an before-and-after comparison to see if (and by how much) this improves performance and to make sure virtualization works correctly? I thought that we'd need to introduce a scrolling container for that because fully-height visualization doesn't seem to be supported?

[BaeBae33]

Thanks for taking the effort to create this PR!

Did you do an before-and-after comparison to see if (and by how much) this improves performance and to make sure virtualization works correctly? I thought that we'd need to introduce a scrolling container for that because fully-height visualization doesn't seem to be supported?

Yes. Here's my test result.
Test Code:

@RFunction
fun RBuilder.breakdown(components: List<AppComponent>, sizeType: Measurable.SizeType) {
    val newList = arrayListOf<AppComponent>()
    repeat(300) {
        newList.addAll(components)
    }
    h4(classes = "mb-3") { +"Breakdown (${newList.size} components)" }
    div(classes = "row") {
        componentList(newList, sizeType)
    }
}

Before
The page takes 4s to display.
ruler.before.html

Alfter
ruler.alfter.html
The page is displayed immediately.

But there're some new problems:

1. It takes much more time (almost 40s) to complete the loading of the whole page.
2. It takes more time when show/hide files in component than before.

Is this the cost of using react-virtual?
May be my usage is not correct?

[simonschiller]

I'm no react-virtual expert either (or frontend at all for that matter), but it sounds weird that loading the whole page takes longer and that showing/hiding files is also affected. We should definitely see what is causing this before we merge.

One hunch - we're setting size = components.size, should that actually be the count of elements or should it be the total size in pixels?

[BaeBae33]

I'm no react-virtual expert either (or frontend at all for that matter), but it sounds weird that loading the whole page takes longer and that showing/hiding files is also affected. We should definitely see what is causing this before we merge.

One hunch - we're setting size = components.size, should that actually be the count of elements or should it be the total size in pixels?

According to :
https://tanstack.com/virtual/v3/docs/guide/introduction
https://github.com/wellyshen/react-cool-virtual/blob/56d53ff73dd92bf0cf3131a77b855b39437446d4/examples/real-time-resize/Row.js
I tried some example and find it's difficult to use accordion or collapsed in react-virtual. I guess that accordion height must be changed dynamically.

[simonschiller]

Could be. If that's the case I'd rather not use it though if it doesn't really work with our structure. Maybe we can find another solution to fix the performance problems for large projects, something like a paginated table instead of an accordion maybe 🤔