kunwp1 opened a new pull request, #6285:
URL: https://github.com/apache/texera/pull/6285

   ### What changes were proposed in this PR?
   
   Opening a dataset whose selected version contains hundreds of files freezes 
the frontend for tens of seconds to minutes — the same freeze hits right after 
clicking Submit in "Create New Version", because the page then renders the new 
version's file tree. Root cause: the version file tree renders every file as a 
full tree-node component (`@ali-hm/angular-tree-component` with virtualization 
disabled), and each row's `nz-button` re-reads layout after every 
change-detection pass, so every pass performs N forced reflows over an N-row 
DOM — O(N²) main-thread work. Heap stays ~100–134 MB throughout, so this is 
main-thread starvation, not OOM.
   
   This PR enables the tree's `useVirtualScroll` with a fixed `nodeHeight`, 
gives the tree container a definite height (200px, matching the previous 
`max-height`) so the viewport can size itself, and pins the row height in SCSS 
to match. Only the ~28 visible rows exist in the DOM regardless of file count, 
which also bounds the per-row button layout reads.
   
   Measured on the local dev stack (`ng serve`, Chrome, Long Tasks API), 
datasets of N one-byte files:
   
   | N files | Page usable after (before → after) | Main thread blocked (before 
→ after) | DOM rows (before → after) |
   |---|---|---|---|
   | 400 | 24.5 s → 1.3 s | 22.2 s → 0.2 s | 400 → 28 |
   | 800 | 103.8 s → 1.3 s | 101.5 s → 0.3 s | 800 → 28 |
   
   Scrolling and node selection still work: scrolling the virtualized tree 
reaches the last file, and clicking a row loads it in the preview panel. 
Symptoms, reproduction details, and the freeze measurements are in the linked 
issue.
   
   ### Any related issues, documentation, discussions?
   
   Closes #6284. Related to #5586 (same unbounded-rendering pattern in the 
upload lists).
   
   ### How was this PR tested?
   
   New TDD unit spec `user-dataset-version-filetree.component.spec.ts`: `npx ng 
test --watch=false --include 
"**/user-dataset-version-filetree.component.spec.ts"` — 4 tests pass (virtual 
scroll enabled with numeric node height; a 1000-file tree keeps the full model 
with < 200 rendered DOM rows; click emits `selectedTreeNode`; delete emits 
`deletedTreeNode`). Written red-first: before the fix the DOM-bounding test 
rendered all 1000 rows and took 31.6 s in jsdom; after the fix the whole file 
runs in ~100 ms. Full dashboard subtree `npx ng test --watch=false --include 
"src/app/dashboard/**/*.spec.ts"` — 321 passed. Also verified live end-to-end 
against the local dev stack via headless Chrome/CDP: the measurements in the 
table above, plus manual scroll-to-bottom and row-click checks.
   
   ### Was this PR authored or co-authored using generative AI tooling?
   
   Generated-by: Claude Code, Claude Fable 5
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to