Traces Page jittering and jumping around while scrolling (in larger traces)

[detachmode]

Is there an existing issue for this?

• [x] I have searched the existing issues

Describe the bug

The traces views is jittering and jumping around while scrolling up or down. This only happens if the traces bigger and with a lot spans and nesting.

I looked in the code and I think the problem lies in the fact that the FluentDataGrid component that src/Aspire.Dashboard/Components/Pages/Traces.razor is using is set to be virtualized. I think this is not supported when you have items of different sizes as children (since you can collapse and uncollapse spans - which makes it hard for virtualization to know the size of a child ) Not sure if not setting virtualize as true could maybe be a better experience than this.

For me this makes the traces view not usable in those scenarios. A button for collapsing and uncollapsing all children would maybe be a workaround.

Expected Behavior

No response

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version info

No response

Anything else?

No response

[davidfowl]

Can you record a video?

[detachmode]

Sure, I will do tomorrow.

[JamesNK]

The row height is fixed on structured logs, traces, and trace detail. Nested spans on the trace detail page are each displayed on their own row. We calculate their depth and indent the content on the row.

I've seen the same jumping around that you have. I have a PR that makes it much better by adding overscan to the virtualized grids - https://github.com/dotnet/aspire/pull/10740.

But I think that is masking an underlying issue. I'll investigate more. If the problem is in a lower level component (either in FluentUI, or in ASP.NET Core's virtualize) then a bigger overscan could be a temporary fix while it is fixed elsewhere.

[JamesNK]

I've reported this to FluentUI here: https://github.com/microsoft/fluentui-blazor/issues/4058

[detachmode]

I use a Macbook and are scrolling with the trackpad.

[MarcinJuraszek]

Oh man, you have no idea how annoying this has been for a while now. I'm looking forward for this to be fixed in the next release.

[davidfowl]

@MarcinJuraszek that's why you need to file issues 😉

[JamesNK]

This should be mostly fixed in 9.4.1. It's still possible to get bad behavior by aggressively scrolling.

Further improvement will require larger changes and probably a new FluentUI verison.

[davidfowl]

Moving out to next release