[Cascade] remove unnecessary use of EUITruncateText

[eokoneyo]

Summary

Part of #255745,
Culled from #256037.

This PR removes the usage of the the eui component TruncateText for titles in the discover cascade experience, in replacement for the much simpler line-clamp property. line clamp is supported in most browsers besides IE and Opera Mini see here.

Why are we doing this?

The component TruncateText uses a canvas to measure text to determine how text can be displayed in addition it also adds a resizer so it can make adjustments for the amount for the text to display to the user. For our use case this is an overkill given we were already virtualising items, so this resulted in a large chunk of unnecessary work being done.

See trace profile below;

Figure: Trace profile with eui truncate text

Figure: Trace profile without eui truncate text

Performance improvements (Chrome DevTools Trace comparison analysis by cursor)

Metric	Before (with EuiTextTruncate)	After (CSS clamp)	Improvement
UpdateLayoutTree (style recalc)	2,328 ms across 150 events	528 ms across 69 events	~77% reduction (1,800 ms saved)
Total rendering cost	2,391 ms	632 ms	~74% reduction
Long tasks > 50 ms (count)	6	18	More tasks, but far smaller (see below)
Worst long task	2,374 ms	2,256 ms	~5% shorter
Mean long task duration	1,010 ms	299 ms	~70% reduction
Long tasks > 1 s	3	1	Eliminated 2 multi-second jank frames

Key takeaways

• Style recalculation is the headline win. The before trace shows 150 UpdateLayoutTree events — all in the 10–31 ms range — totalling 2.3 s. After the change there are only 69 events (37 of which are sub-1 ms), totalling 528 ms. This is because EuiTextTruncate forces the browser to synchronously recalculate styles to measure text width on every render pass.

• Long task severity drops dramatically. Before the change, 3 long tasks exceeded 1 second (up to 2.4 s), and the mean long task was over 1 s. After the change only 1 long task exceeds 1 s (the initial pointer-out handler, which is unrelated to truncation), and 9 of the 18 long tasks fall in the 100–200 ms range — well below the "noticeable jank" threshold.

• Scroll is significantly smoother. The before trace processed only 7 scroll events during the capture window; the after trace processed 43 scroll events in roughly the same window. This means the browser was able to dispatch and paint far more scroll frames, resulting in visibly smoother scrolling.

• The rendering pipeline is no longer the bottleneck. Total rendering cost dropped from 2.4 s to 0.6 s, meaning the main thread spends ~74% less time in layout/style work during scroll.

What changed

Replaced <EuiTextTruncate> (JS-measured truncation with a render callback) with a CSS -webkit-line-clamp: 2 approach on the <h4> element, which lets the browser handle truncation natively without requiring layout measurement. The visual result is equivalent — text is truncated with an ellipsis — but with no JavaScript overhead.

That been said there's still couple of improvements to be made.

Visuals

Figure: Cascade experience with Truncate Text, note text ellipsis shows at one line

Figure: Cascade experience with line clamp, note text ellipsis shows at 2 lines to match CATEGORIZE pattern behaviour

[elasticmachine]

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 1786f4e

Metrics [docs]

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	+23.0B

cc @eokoneyo

[davismcphee]

Wow this is a HUGE improvement! Thanks for the investigation and fix, already a big step toward closing the perf gap 🙌

Before:

before.mp4

After:

after.mp4

Also a note to self that EuiTextTruncate is apparently quite expensive 😅

[kibanamachine]

Starting backport for target branches: 9.3

https://github.com/elastic/kibana/actions/runs/22753428436

[kibanamachine]

💔 All backports failed

Status	Branch	Result
❌	9.3	Backport failed because of merge conflicts You might need to backport the following PRs to 9.3: - [Lens] Fix - Library annotation group does not sync across panels after update (#252640) - [Search Content Connectors] Add generate api key server-side implementation (#256083)

Manual backport

To create the backport manually run:

node scripts/backport --pr 256254

Questions ?

Please refer to the Backport tool documentation