[✨ Triage] dotnet/aspire#10841 by detachmode - Traces Page jittering and jumping around while scrolling (in larger t ... #1350
Description
Triage for microsoft/aspire#10841.
Repo filter: area-dashboard issues.
MihuBot version: 264315.
Ping MihaZupan for any issues.
This is a test triage report generated by AI, aimed at helping the triage team quickly identify past issues/PRs that may be related.
Take any conclusions with a large grain of salt.
dotnet/aspire#10841: Traces Page jittering and jumping around while scrolling (in larger traces) by detachmode
[Tool] Searching for Traces page scrolling jitter, FluentDataGrid virtualization traces, Traces view jumping, Traces collapse expand performance, Traces page unusable large traces (IncludeOpen=True, IncludeClosed=True, IncludeIssues=True, IncludePullRequests=True, Repository=dotnet/aspire)
[Tool] Found 74 issues, 163 comments, 74 returned results (20941 ms)
Here are the most relevant related issues and discussions for issue #10841 ("Traces Page jittering and jumping around while scrolling (in larger traces)"):
1. PR #2807 (March 2024) - Improve performance of trace detail page with big traces
- Summary: This PR enabled virtualization in the FluentDataGrid for the trace detail page to improve performance with large traces (hundreds or thousands of spans). The author notes that virtualization makes the page much faster for large traces.
- Relevance: The current issue suspects virtualization is the cause of jitter/jumping when scrolling, especially with variable row heights due to collapsible spans. This PR is the origin of enabling virtualization for traces.
2. Issue #2103 (February 2024) - Traces dashboard view freeze/crash when viewing large trace
- Summary: Users reported the dashboard freezing or crashing with large traces. The discussion includes:
- The FluentDataGrid was identified as a performance bottleneck.
- Virtualization was suggested as a solution.
- There were issues with row ID conflicts in FluentUI, which were fixed in a newer package.
- After updating FluentUI, the issue was resolved for the original reporter.
- Relevance: Shows the history of performance issues with large traces and the move to virtualization. Also highlights that virtualization fixes some problems but may introduce others (like the one in #10841).
3. PR #8771 (April 2025) - Ensure visible trace spans stay sorted by start time and fix Traces view expand/collapse icons
- Summary: This PR fixed issues with span ordering and expand/collapse icons not working. The discussion includes performance and correctness of the data structure used for visible spans, and the impact of nesting and filtering.
- Relevance: The expand/collapse logic and data structure changes may affect virtualization and scrolling behavior, especially with nested/variable-height rows.
4. PR #10740 (July 2025) - Fix automatic scrolling to the bottom of main page content
- Summary: This PR addresses scroll bar position jumping around when scrolling grids (including traces). It adds a large overscan to reduce scrolling jumps and tweaks when the "scroll to bottom" flag is set.
- Relevance: Directly addresses scroll position jumping, which is the core complaint in #10841. The PR is recent and may not be merged yet.
5. Issue #10123 (June 2025) - Screen reader is announcing the incorrect number of rows number as 8, even though there are only 7 rows available
- Summary: This accessibility issue notes that FluentDataGrid's virtualization can render extra empty rows, confusing screen readers. A comment from a maintainer confirms this is due to the virtualization implementation.
- Relevance: Confirms that virtualization with variable row heights (and dynamic expand/collapse) can cause rendering artifacts, which may also manifest as jitter or jumping.
6. PR #9474 (May 2025) - Add "Collapse All"/"Expand All" buttons in the trace page
- Summary: Adds UI to collapse/expand all spans in the trace detail page, which can help manage large/nested traces. The discussion includes feedback on usability and implementation.
- Relevance: The original issue suggests a "collapse all" button as a workaround for the virtualization/jitter problem.
7. Issue #9434 (May 2025) - Add "Collapse All"/"Expand All" buttons in the trace page
- Summary: Feature request for collapse/expand all buttons to help with large traces. Discussion confirms this is a common pain point for users with large/nested traces.
- Relevance: Directly matches the workaround suggested in #10841.
8. Issue #6393 (October 2024) - Expand/collapse buttons don't update the trace details table and PR #6394 (October 2024) - Fix spans not hidden on expand/collapse
- Summary: A FluentUI update broke expand/collapse behavior in the trace detail grid. The fix ensures the grid updates correctly when spans are expanded/collapsed.
- Relevance: Shows that expand/collapse and virtualization interactions have been a recurring source of bugs.
9. PR #6840 (Nov 2024–Jan 2025) - Update Fluent UI Blazor to v4.11.3
- Summary: Major update to FluentDataGrid, including a switch to table/tr/td elements. The author notes that there may be outstanding issues with the new grid, especially with custom CSS/JS and virtualization.
- Relevance: The virtualization implementation may have changed, possibly introducing new jitter/jumping issues.
10. Issue #2507 (Feb–Mar 2024) - Dashboard console logs - High CPU usage with large amount of logs
- Summary: Discusses virtualization for large log/trace data, and the complications of variable row heights. The maintainers note that proper virtualization with variable heights is complex and may require custom solutions.
- Relevance: Explains why virtualization with variable-height rows (like collapsible spans) is problematic and can cause UI issues.
Key Takeaways
- Virtualization was added to the trace detail page to improve performance with large traces, but virtualization in FluentDataGrid does not handle variable row heights well. This is because expanding/collapsing spans changes row heights, which can confuse the virtualization logic and cause jitter/jumping.
- Recent PRs (e.g., #10740) are actively working on improving scroll behavior and reducing jumps, but the problem is not fully solved.
- Accessibility and rendering artifacts (like extra rows or incorrect row counts) are known side effects of virtualization with variable heights.
- A "Collapse All" button is being added as a workaround to help users manage large traces, but it does not address the root cause.
- The maintainers are aware that proper virtualization with variable-height rows is a hard problem and may require more advanced solutions or changes to the grid component.
Recommendations for Triage
- Acknowledge that this is a known limitation of FluentDataGrid virtualization with variable row heights.
- Reference the ongoing work in PR #10740 and related discussions.
- Note that "Collapse All" functionality is being added as a workaround, but a more robust solution may require changes to the grid or virtualization logic.
- Consider labeling as "known issue" or "upstream/FluentUI limitation" if appropriate.
- Encourage users to follow the linked issues/PRs for updates.
If you need more detail on any specific issue or PR, let me know!