From dc808a45686b75b02606eea068381a8c8ffbfb48 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Mon, 9 Sep 2024 11:45:36 -0300 Subject: [PATCH] [Discover] [Unified Data Table] Conditionally use `overscanRowCount` when Document column isn't visible (#192332) ## Summary Part of #191249 included using the `overscanRowCount` property of EUI data grid to render some additional data grid rows off screen, which greatly reduces pop in when scrolling through the grid. While the performance cost of this low in most cases, it has an impact in certain situations such as when documents have many fields and the Document column is visible (e.g. Discover's `many_fields` performance journey). This is because the Document column can render _many_ DOM elements in each of its cells, which EUI data grid struggles to handle. This PR updates Unified Data Table to only use `overscanRowCount` when the Document column isn't visible, so we'll still benefit from the scrolling improvements when columns are selected, but won't take the performance hit for the Document column. Perf journey run: https://buildkite.com/elastic/kibana-single-user-performance/builds/14355. Screenshot 2024-09-09 at 14 07 46 ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --- packages/kbn-unified-data-table/src/components/data_table.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index 2413f8a856fabe..7c83f9bd6ccf7d 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -1136,7 +1136,9 @@ export const UnifiedDataTable = ({ trailingControlColumns={trailingControlColumns} cellContext={cellContext} renderCellPopover={renderCustomPopover} - virtualizationOptions={VIRTUALIZATION_OPTIONS} + // Don't use row overscan when showing Document column since + // rendering so much DOM content in each cell impacts performance + virtualizationOptions={defaultColumns ? undefined : VIRTUALIZATION_OPTIONS} /> )}