Web Client: Provide full contents of column data on mouseover

[Michele Morgan]

When viewing tables of data in the xul client, if the text is cut off due to column width, the user can hover over the cell and see a balloon with the full contents of the field.

Hovering over a cell in web client grids does not provide this balloon, and there's no easy way to see the full content of the cell if the column is too small. Restoring the balloon showing the full field contents on mouseover would greatly enhance usability across all web client grids.

[Terran McCanna (tmccanna)]

See also: https://bugs.launchpad.net/evergreen/+bug/1721144

[Bill Erickson (berick)]

Here's branch to add titles to cell contents, allowing the contents to display in full on mouse over. One limitation is the titles only appear for text cells. If a cell is constructed of HTML (e.g. links) titles are not set, since those would display as HTML.

A more comprehensive solution may be needed, but this simple change is a good start and covers most cases.

http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/berick/lp1740412-grid-cell-titles

[Bill Erickson (berick)]

It looks like we can use HTML in ng-bootstrap tooltips:

https://angular-ui.github.io/bootstrap/#!#tooltip

This will probably be a better overall solution. Retracting pullrequest for now.

[Bill Erickson (berick)]

Here's a better branch that handles text and HTML cell contents.

http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/berick/lp1740412-grid-cell-tooltips

[Michele Morgan (mmorgan)]

I applied this to a 3.1.4 system and it's looking great! One observation - In the xul client, the balloon with full cell content only appears when the data is too long for the cell. Cells that display all the data don't show the balloon.

In the web client with this fix applied, the balloon appears on all cells. I have a concern that it could make the screen too busy with balloons flying as the mouse pointer is moved across each cell. Here's a screencast:

https://www.screencast.com/t/67ePoAWrRO

If the balloons appeared only when the data was to big for the field, or a short delay was built in, it would reduce superfluous balloon flight. Other than that, this will be a big help when viewing crowded column displays.

[Bill Erickson (berick)]

Thanks, Michele. I'll see what I can do.

[Bill Erickson (berick)]

Branch rebased with an additional commit at the tip for limiting tooltip display to only cells whose content overflows its container.

http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/berick/lp1740412-grid-cell-tooltips

[Kathy Lussier (klussier)]

Thanks for the update Bill! We noticed a strange thing with longer content. On our holds shelf, for example, when hovering over a title that was particularly long, the popup appeared on the right side of the grid. See screencast at https://drive.google.com/file/d/1P2_JCdswKXDn8GiDvQpawcuxm5mlaDDQ/view

Michele added a long message to a patron record in one test, and, in that case, the pop appears off the screen. You need to scroll the page to the right to see it. See https://drive.google.com/file/d/1TyTDnzj6wsqS5iC9yONhAy4kJdUKoLcK/view

Do you know if there is a way to make it more consistently appear with the content?

[Bill Erickson (berick)]

Thanks, Kathy. I've pushed another commit to the same branch which instructs the tooltips to render at the top left of each grid cell.

[Michele Morgan (mmorgan)]

This is really looking good! Just one more observation. Some fields with very long content are cut off at the top of the balloon. I know it's not possible to accommodate all possible field lengths, but I've attached a screenshot of a pop up for a longish note that gets cut off at the top. Is it possible to make the balloon a bit wider to accommodate a little more text? If it's not an easy fix, or causes other issues, I'm prepared to sign off on it as it is. Thanks for your work on this, Bill!

[Bill Erickson (berick)]

Commit pushed to double with maximum tooltip width (from 200 to 400px). Extra width only comes into play for longer values.

[Michele Morgan (mmorgan)]

This looks great! I think the tooltips will really improve the usability of the grids! My signoff branch is at:

http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mmorgan/lp1740412-grid-cell-tooltip-signoff

Thanks Bill!

[Kathy Lussier (klussier)]

Thank you Michele and Bill! I've signed off on the code and merged it to master and release 3.1.

There was a conflict when I tried backporting it to backport it to 3.0. It wasn't immediately clear to me how to resolve the conflict. I'll leave to 3.0 target for now in case anyone wants to create a 3.0 branch with the conflict resolved.

[Jason Stephenson (jstephenson)]

I've been asked to resolve the conflicts with 3.0 so that we cant test this at CW MARS. I'll likely push the 3.0 branch later today.

[John Amundson (jamundson)]

Thanks for everyone's work on this! I have tested the 3.0 branch, and it behaves well enough for me. Our libraries will be excited to have this feature back.

I have tested this code and consent to signing off on it with my name, John Amundson, and my email address, <email address hidden>.

[Jason Stephenson (jstephenson)]

Thanks for testing, John! I have merged the code with conflicts resolved to rel_3_0.