fix: Constant re-rendering in FluentOverflow

[JamesNK]

🐛 Bug Report

When FluentOverflow has an overflow inside a grid then it constantly re-renders itself. Work is happening on the server, being sent over SignalR and in the browser.

💻 Repro or Code Sample

With this PR to update to the latest version - https://github.com/dotnet/aspire/pull/2301 - go to the traces page and resize the span columns to create an overflow.

🤔 Expected Behavior

FluentOverflow renders itself a few times when a column is resized, and not at all once resizing stops.

😯 Current Behavior

Constant rendering. Browser elements change, a lot of SignalR traffic, server CPU usage, etc.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and FAST Version [e.g. 1.8.0]

[JamesNK]

There is another DataGrid with an overflow and it is fine.

The problem grid has resizable columns. Perhaps resizable columns plus FluentOverflow causes the issue?

[dvoituron]

The problem seems to be that the FluentOverflowItem contains an @key attribute. I need further investigation to find out why this behavior only occurs with DataGrid, but I can't reproduce it in our Lib (only using Aspire code).

Removing this @key=item should solve your issue.

@foreach (var item in context.Spans.GroupBy(s => s.Source).OrderBy(g => g.Min(s => s.StartTime)))
{
    //                  XXXXXXXXXX
    <FluentOverflowItem @key=item>
        ...
    </FluentOverflowItem>
}

https://github.com/microsoft/fluentui-blazor/assets/8350694/f82fa46f-68c0-4147-b385-c97c8c6b195c

[JamesNK]

Thanks, that's fixed the re-rendering. The re-rendering disappeared for me when I removed key.

I'm still observing weird results when displaying content in overflow. For example, the server.port row in the recording below has hidden the last number even though there is lots of room available:

And overflow in this grid doesn't work properly when resizing columns. The first row doesn't react well:

Can you look into it?

[vnbaaij]

There was an issue in the Overflow were it did not use the correct selector for determining the items that needed te be taken into account. I fixed that yesterday. No more unnecessary overflow in Metrics

Grid overflow works much better now as well

[JamesNK]

Feel free to close or leave open to investigate.