Skip to content

feat(web-awesome): virtual scrolling for test results tree#684

Open
todti wants to merge 6 commits into
mainfrom
feat/virtual-tree
Open

feat(web-awesome): virtual scrolling for test results tree#684
todti wants to merge 6 commits into
mainfrom
feat/virtual-tree

Conversation

@todti
Copy link
Copy Markdown
Collaborator

@todti todti commented Jun 2, 2026

Summary

  • Replaces the recursive Tree component in the test results panel with a flat virtual list (VirtualTreeList) that renders only visible rows (~20-30 DOM nodes instead of 500+)
  • Works in both split mode (own scroll container) and non-split mode (attaches to the nearest [data-tree-scroll-container] ancestor)
  • Full feature parity: group expand/collapse, subtree toggle button (double-chevron, hide-on-hover), keyboard navigation, focus scrolling, env sections, status filters, transition tooltips
  • Exports treeSubtreeToggleClass from web-components so the virtual list reuses the same CSS module class for the hover animation
  • Fixes a webpack HMR false-positive warning by importing isSubtreeFirstLevelOnlyOpened directly from @allurereport/web-commons instead of through a re-export chain

New files

File What it does
VirtualTree/useVirtualList.ts Lightweight virtualizer hook — no external dependency. Supports own scroll container or external ancestor. Measures item heights via ResizeObserver.
VirtualTree/VirtualTreeList.tsx Main virtual list component
VirtualTree/GroupHeader.tsx Group header with subtree-toggle button
VirtualTree/EnvHeader.tsx Environment section header
stores/virtualTree.ts flatVirtualRows computed signal — flattens filteredTree into a flat array with full rendering data

Tests

  • test/stores/virtualTree.test.ts — 16 tests for flattenTreeWithData: depths, expand/collapse, idPrefix, leaf/group data, edge cases
  • test/components/VirtualTree/useVirtualList.test.ts — 12 tests for the hook: visible window, scroll shifts, scrollToIndex, height measurement, external scroll container, count-change cache clear

todti added 5 commits June 2, 2026 16:18
…t mode

Render only visible rows (~30 items) instead of all 500+ DOM nodes.
Uses a lightweight custom virtualizer (no external dependency) with
per-item height measurement and scroll-based window computation.

The VirtualTreeList component replaces the recursive Tree in split mode,
driven by a new flatVirtualRows computed signal that pre-flattens the
filtered tree with full rendering data (name, status, duration, etc.).
Group expand/collapse and subtree toggle are fully supported.
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 2, 2026

Allure Report Summary

Name Duration Stats New Flaky Retry Report
Allure 3 Report 27m 39s Passed tests 1575   Skipped tests 15 84 0 0 View
My Dashboard 27m 39s Passed tests 1575   Skipped tests 15 84 0 0 View
Allure 3 GitHub actions run (2026-06-02T18:35:46.010Z) 27m 39s Passed tests 1575   Skipped tests 15 84 0 0 View

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant