Web Client: Provide full contents of column data on mouseover

Bug #1740412 reported by Michele Morgan
36
This bug affects 8 people
Affects Status Importance Assigned to Milestone
Evergreen
Undecided
Unassigned
3.0
Undecided
Unassigned

Bug Description

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.

Revision history for this message
Terran McCanna (tmccanna) wrote :
Changed in evergreen:
status: New → Confirmed
Bill Erickson (berick)
Changed in evergreen:
assignee: nobody → Bill Erickson (berick)
Revision history for this message
Bill Erickson (berick) wrote :

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

Changed in evergreen:
milestone: none → 3.1.3
assignee: Bill Erickson (berick) → nobody
tags: added: pullrequest
Revision history for this message
Bill Erickson (berick) wrote :

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.

tags: removed: pullrequest
Bill Erickson (berick)
Changed in evergreen:
assignee: nobody → Bill Erickson (berick)
Revision history for this message
Bill Erickson (berick) wrote :
tags: added: pullrequest
Changed in evergreen:
assignee: Bill Erickson (berick) → nobody
Changed in evergreen:
milestone: 3.1.3 → 3.1.4
Changed in evergreen:
milestone: 3.1.4 → 3.1.5
Michele Morgan (mmorgan)
Changed in evergreen:
assignee: nobody → Michele Morgan (mmorgan)
Revision history for this message
Michele Morgan (mmorgan) wrote :

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.

Changed in evergreen:
assignee: Michele Morgan (mmorgan) → nobody
Revision history for this message
Bill Erickson (berick) wrote :

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

Changed in evergreen:
assignee: nobody → Bill Erickson (berick)
Revision history for this message
Bill Erickson (berick) wrote :

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

Changed in evergreen:
assignee: Bill Erickson (berick) → nobody
Revision history for this message
Kathy Lussier (klussier) wrote :

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?

Revision history for this message
Bill Erickson (berick) wrote :

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.

Revision history for this message
Michele Morgan (mmorgan) wrote :

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!

Revision history for this message
Bill Erickson (berick) wrote :

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

Changed in evergreen:
assignee: nobody → Bill Erickson (berick)
assignee: Bill Erickson (berick) → nobody
Revision history for this message
Michele Morgan (mmorgan) wrote :

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!

Revision history for this message
Kathy Lussier (klussier) wrote :

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.

Changed in evergreen:
status: Confirmed → Fix Committed
Dan Wells (dbw2)
Changed in evergreen:
milestone: 3.1.5 → 3.1.6
Revision history for this message
Jason Stephenson (jstephenson) wrote :

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.

Revision history for this message
John Amundson (jamundson) wrote :

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>.

tags: added: signedoff
Revision history for this message
Jason Stephenson (jstephenson) wrote :

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

Changed in evergreen:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Duplicates of this bug

Other bug subscribers