Skip to content

Optimize Table rendering for large data sets#629

Merged
novykh merged 6 commits into
masterfrom
perf/table-large-data
Jul 13, 2026
Merged

Optimize Table rendering for large data sets#629
novykh merged 6 commits into
masterfrom
perf/table-large-data

Conversation

@ktsaou

@ktsaou ktsaou commented Jul 12, 2026

Copy link
Copy Markdown
Member

Summary

  • add an opt-in large-data Table source that keeps complete sorting, filtering, expansion, selection, and export semantics while materializing only the active virtual window
  • defer expensive row content in bounded four-row batches and pause row mounting during scrolling
  • begin deferred hydration after a 50 ms scroll-idle threshold while leaving ordinary Table consumers on the library default
  • preserve fractional browser row measurements and size deferred placeholders from the shared virtual row
  • add bounded direct-cell rendering for high-cardinality consumers
  • publish complete TypeScript declarations for the new source, virtualizer, row-wrapper, and options contracts
  • keep the existing Table API and behavior unchanged for consumers that do not enable large-data mode

Why

The current Table path creates work proportional to the complete row population. At roughly 5,000 nodes this makes scrolling and unrelated UI operations visibly freeze. This shared seam allows application consumers to remain fluent at 50,000 logical rows without changing payloads or user-visible results.

Measured hot-path exception

The opt-in directCellContent path deliberately uses one tokenized styled row with native repeated cell sections, while resolving colors and sizing from netdata-ui theme tokens.

A controlled production-bundle A/B test used the same 1,393-alert table and the same 1,100 px scroll:

  • styled Flex in every direct cell/row section: five 51–74 ms long tasks
  • native direct cells/row sections: zero long tasks
  • both paths: 36 mounted rows, 52.8 px measured row height, and at most 0.003 px adjacent-row coordinate error

The ordinary Table path remains unchanged and continues to use the existing netdata-ui components. The exception is opt-in and exists only where the styled-component cost is measurable in the scroll hot path.

Validation

  • focused Table suite: 10 suites, 37 tests passed
  • final focused acceptance rerun: 2 suites, 11 tests passed
  • full package suite: 88 of 89 suites and 443 of 444 tests passed
  • the only full-suite failure is the pre-existing Tabs scrollbar snapshot
  • the identical failure is present in the upstream master run at the exact base commit
  • UMD, CJS, and ES6 production builds passed
  • integration browser validation at device-pixel ratio 1.25 confirmed fractional 34.4 px and 52.8 px rows remain aligned without cumulative rounding

Release order

Companion: netdata/cloud-frontend#5609.

This PR must merge and publish before the companion cloud-frontend PR. The frontend dependency and lockfile will then be updated to the exact released version before that PR is merged.

Global table-header tooltip milestone

  • generalize the delegated overflow controller with opt-in selector, content, overflow, and window-scroll behavior
  • publish canonical complete names from every shared Table header without per-header listeners, observers, or render-time geometry reads
  • preserve the existing sortable drag handles as separate interactive siblings; tooltips remain pointer-transparent
  • cover delayed activation, focus, nested scrolling, resize, target removal, canonical content, and drag-handle separation with focused tests

Additional validation

  • shared Table suite: 13 suites, 51 tests passed
  • UMD, CommonJS, and ES module builds passed
  • live Logs validation reordered the truncated ND_JOURNAL_PROCESS column both with and without the tooltip visible
  • the only full-package failure remains the pre-existing Tabs scrollbar snapshot documented in this PR

Release gate

Versions 5.4.17 and 5.4.18 are already published. This PR must receive the next version through the normal release process and be published before the companion frontend dependency and lockfile are updated.

@ktsaou ktsaou marked this pull request as ready for review July 12, 2026 10:08
@novykh novykh merged commit 95fdb15 into master Jul 13, 2026
3 checks passed
@novykh novykh deleted the perf/table-large-data branch July 13, 2026 06:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants