Table Component: Improve text-wrapping behavior of cells

[ahuarte47]

What is this feature?

This PR fixes the visualization of strings in tables that do not fit the space of its cell. Full content is showed when user moves the cursor over the cell.

Why do we need this feature?

Long texts in cells are clipped if they do not fit the space if its cell. User can not view the full content of the string.

Who is this feature for?

[Add information on what kind of user the feature is for.]

Which issue(s) does this PR fix?:

It partially improves the issue #25623

Special notes for your reviewer:

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[ahuarte47]

I attach here a video before the fix, and other one with the final result applying the change.
before-fix.webm
after-fix.webm

[CptHolzschnauz]

Cool. Do you know where to find this file on a installed Grafana under Linux (Ubuntu). I would like to change it right there with nano. Feasible?

[ahuarte47]

Cool. Do you know where to find this file on a installed Grafana under Linux (Ubuntu). I would like to change it right there with nano. Feasible?

In my understanding, the file that needs to be changed is a TypeScript file that needs to be built or compiled. It is not directly used by grafana like a CSS file.

[codeincarnate]

@ahuarte47 thanks for another contribution! I'm going to test this out quickly but generally speaking this seems like a much better way to handle this scenario!

[codeincarnate]

Just ran through this and at least for the moment I'm unable to get this to work 😢. Did a commit get missed perhaps?

[ahuarte47]

Sad of reading that, can I test a dashboard sample? maybe one from dev-dashboard package?
Anyway, I am attaching here the dashboard that I am showing in the videos.

My test for text-wrapping.json

NOTE:
I am testing in FireFox & Chromium (Ubuntu 22.04)

[codeincarnate]

Re-tested this and appears to be working fine, not sure exactly what I was doing 😕. It does get cut-off if the table is small enough, but we effectively already have that problem. We can address that as a follow-up PR. Thanks for the contribution!

[torkelo]

@ahuarte47 @codeincarnate I would not close and say this fixes #25623 , that would make a lot of people who voted for that issue upset . They are looking for text wrapping cells (not the hover effect) . But this should be a good improvement for those users (but not a complete fix)

[torkelo]

Tested this PR and looks broken in Chrome Version 121.0.6167.184 (Official Build) (arm64) (OSX)

[ahuarte47]

Tested this PR and looks broken in Chrome Version 121.0.6167.184 (Official Build) (arm64) (OSX)

I am viewing everything ok as well in Chrome Version 122.0.6261.57 (Official Build) (64-bit) (Ubuntu), even with transparent background of panel enabled.

Maybe I should to force a background color or disable the opacity in hover?

UPDATE:
I reproduce the issue when text has not spaces;

I will test setting text-wrap css style.

[ahuarte47]

Setting wordbreak it works better:

[ahuarte47]

Please @codeincarnate @torkelo may I ask for your help to review again, thanks in advance!

[codeincarnate]

@ahuarte47 I'll be able to take a look this evening 😃

[codeincarnate]

Gave it another run-through and it appears to be working fine in each case now. Missed the issue fix label before and very much agree this doesn't close that. Thanks there @torkelo 🙏

[ahuarte47]

Thanks a lot @codeincarnate !!!!

[torkelo]

@ahuarte47 @codeincarnate this seems to have made it a bit worse for some scenarios, it always wraps and breaks up strings (even when there is no white space)

So large values or single strings that would just extend a bit to the right are now broken up

Text strings that where somewhat readable in narrow columns now become very hard to read. It seems the hover view is always using the same width as the cell, the whole point of the hover effect was to give the cell more room to show the value and not be constrained by the column width.

[ahuarte47]

I can create other PR with a new option in the ui table settings to enable this. Disabled by default. Do you agree?

[torkelo]

@ahuarte47 no I do want a UI option for this, can we make it so that it does not wrap until at the edge of the table?

The old behavior was so much nicer, except part of it that goes beyond the right side of the table is not visible

[codeincarnate]

I can see the value of both cases, it's nice for cases with blobs of text but for longer strings it makes it more difficult to read. It may be possible to look at value length and determine from there. Agreed though that having this happen at table boundaries makes sense. I'll throw something together to see what can be done.

[codeincarnate]

Haven't quite finished it but testing out logic based around string length and seeing how it goes, not much at all right now as I'm mostly playing with it but progress will be in the just linked PR 😸

[ahuarte47]

Haven't quite finished it but testing out logic based around string length and seeing how it goes, not much at all right now as I'm mostly playing with it but progress will be in the just linked PR 😸

I like very much this simple but effective solution using the length of the text, thank you very much!

[codeincarnate]

Thanks @ahuarte47 🙏

A quick update, still working through the specifics but expecting to have PR out of draft today.

[codeincarnate]

Made some updates to the mentioned PR, haven't quite gotten it working completely but I'm close and should be able to finish this one later 😄

[jacksongoode]

Is there a plan to allow a user to view headers that are too long in the table plugin? It seems weird that this would only be a feature for cells?