Skip to content

[Cascade] Resolve issue that caused "stuttering" in cascade component#251536

Merged
eokoneyo merged 3 commits into
elastic:mainfrom
eokoneyo:chore/resolve-246949
Feb 6, 2026
Merged

[Cascade] Resolve issue that caused "stuttering" in cascade component#251536
eokoneyo merged 3 commits into
elastic:mainfrom
eokoneyo:chore/resolve-246949

Conversation

@eokoneyo
Copy link
Copy Markdown
Contributor

@eokoneyo eokoneyo commented Feb 3, 2026

Summary

Closes #246949

Previously scrolling through the nested list when its length exceeds the visible viewport, we'd notice an effect after scroll where the rendered items would shift around, this PR fixes this issue.

Context;

This happened because in discover determining the size of the element rendering the content of the nested virtualized list happens by measured the row items, so when content is rendered, given that it is contained in another virtual list that is also measured, the changes in the nested list would in turn cause a measurement to be triggered in the parent, causing the scrolloffset value with which the inner virtualized list was initialised with to be invalid, so the jank we see is the readjustment to the new scrollOffset, what we've opted for is to provide a way to disable propagating these changes to the parent whilst the user is interacting with the nested list.

Visuals

Untitledstutterfixed-ezgif com-video-to-gif-converter

How to test

  • Navigate to discover, switch to ES|QL mode
  • Make sure to select a large enough time range, so we are returned quite an handful of documents
  • Provide the following query FROM kibana_sample_data_ecommerce | STATS count = COUNT(*), PERCENTILE(products.price, 95), AVG(products.tax_amount), SUM(total_quantity) BY products.manufacturer or yours
  • Select a row that has quite an extensive number of documents, attempt scrolling through the documents in the row, there should be no jank (aka. stutter).

Checklist

@eokoneyo eokoneyo self-assigned this Feb 3, 2026
@eokoneyo eokoneyo added the Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// label Feb 3, 2026
@eokoneyo eokoneyo requested review from a team as code owners February 3, 2026 17:54
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

@eokoneyo eokoneyo marked this pull request as draft February 3, 2026 17:54
@eokoneyo eokoneyo added the release_note:skip Skip the PR/issue when compiling release notes label Feb 3, 2026
@eokoneyo
Copy link
Copy Markdown
Contributor Author

eokoneyo commented Feb 3, 2026

/ci

@eokoneyo eokoneyo changed the title [Cascade] Resolve issue that cased "stuttering" in cascade component [Cascade] Resolve issue that caused "stuttering" in cascade component Feb 3, 2026
@eokoneyo eokoneyo force-pushed the chore/resolve-246949 branch from 2e855cd to 9b77f54 Compare February 4, 2026 13:57
Comment on lines +274 to +281
const getScrollMargin = useCallback(() => {
const sizeCache = virtualizer.virtualizedRowsSizeCache;
let margin = 0;
for (let i = 0; i < rowIndex; i++) {
margin += sizeCache.get(i) ?? 0;
}
return margin;
}, [virtualizer, rowIndex]);
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We opt to count the size of the rows preceding the current row as the scroll margin.

@eokoneyo eokoneyo marked this pull request as ready for review February 4, 2026 13:59
@eokoneyo eokoneyo added the (do not use) backport:9.3 This doesn't do backports! use `backport:version` `v9.3.0` instead label Feb 4, 2026
@eokoneyo eokoneyo force-pushed the chore/resolve-246949 branch from 9b77f54 to 238ccb9 Compare February 4, 2026 14:05
@eokoneyo eokoneyo force-pushed the chore/resolve-246949 branch from 238ccb9 to b5a9601 Compare February 4, 2026 15:00
@elasticmachine
Copy link
Copy Markdown
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
discover 2076 2077 +1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
discover 1.6MB 1.6MB +873.0B

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id before after diff
@kbn/shared-ux-document-data-cascade 2 3 +1
Unknown metric groups

API count

id before after diff
@kbn/shared-ux-document-data-cascade 28 29 +1

cc @eokoneyo

Copy link
Copy Markdown
Contributor

@Dosant Dosant left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code lgtm

Copy link
Copy Markdown
Contributor

@davismcphee davismcphee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great, thanks for fixing it!

@eokoneyo eokoneyo merged commit 7a33b89 into elastic:main Feb 6, 2026
16 checks passed
@eokoneyo eokoneyo deleted the chore/resolve-246949 branch February 6, 2026 07:53
@kibanamachine kibanamachine added v9.4.0 backport missing Added to PRs automatically when the are determined to be missing a backport. labels Feb 6, 2026
@kibanamachine
Copy link
Copy Markdown
Contributor

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 251536 locally
cc: @eokoneyo

3 similar comments
@kibanamachine
Copy link
Copy Markdown
Contributor

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 251536 locally
cc: @eokoneyo

@kibanamachine
Copy link
Copy Markdown
Contributor

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 251536 locally
cc: @eokoneyo

@kibanamachine
Copy link
Copy Markdown
Contributor

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 251536 locally
cc: @eokoneyo

@davismcphee davismcphee removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Feb 12, 2026
@davismcphee davismcphee added backport:skip This PR does not require backporting and removed (do not use) backport:9.3 This doesn't do backports! use `backport:version` `v9.3.0` instead labels Feb 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// v9.4.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Fix cascade experience "stuttering"

5 participants