Quick data preview on cell hover

[404-html]

New Feature / Enhancement Checklist

• I am not disclosing a vulnerability.
• I am not just asking a question.
• I have searched through existing issues.

Current Limitation

Additional actions have to be taken in order to preview data stored in the browser cell. Let's say that cell holds an object - to see it first we have to double click to enter edit mode, then extend the size of input field as it's usually too small. It's problematic when it comes to previewing many cells. Another problem here is that previewing requires jumping into editing mode which can result in accidental data change with no option to undo.
Another case is cell that holds URL to an image. To preview it have to be copied and opened in new browser tab. It would be good to preview data without leaving the dashboard.

Feature / Enhancement Description

I already posted a proposition here: #1983
The idea is to show popover with data preview on cell hover.

Example Use Case

1. Move pointer on top of cell holding an image blob or object;
2. Wait 300ms;
3. Popup appears with full content of this cell inside;
4. Move pointer to close the popup.

Alternatives / Workarounds

Extending column size to show entire cells content.
Edit mode.
Copying value and pasting it elsewhere.

3rd Party References

[parse-github-assistant]

Thanks for opening this issue!

• 🎉 We are excited about your ideas for improvement!

[mtrezza]

Some thoughts (as previously mentioned in the PR):

• executing a URL request on hover may not be desired and could even pose security issues, e.g. an app user stores a malicious URL in their user profile; a dashboard users hovers over it an executes a call to that URL
• a dashboard user may not want to download a large image file
• it can be rather annoying and impeding the workflow if previews pop up unwanted just by hovering over it
• requesting a URL that is stored in a field of type "String" seems rather arbitrary;
  • should a URL that is part of a longer text be extracted and requested?
  • should whitespaces be trimmed?
  • should a URL without protocol (e.g. example.com/img.png) be requested with or without TLS?

In any case, I see a feature that requests a URL on hover at disabled by default, which can be enabled on a per-class / per field basis, for security.

Other ideas:

• a) Parse the contents of a String field for URLs patterns, highlight them and convert them to links that open a new tab as preview (or a preview pop-up, or a split view). That would require a click instead of hover, which would be a more conscious action with less security implications, so that could be always enabled.
• b) Allow to right-click on the cell, and add all detected URLs in the context menu to open in a new tab.
• c) Display images in the cell, scaled to a max width / height so that no hover is necessary. That could be practical in something like a list of products I would imagine.

[FransGH]

What about a plug-in architecture to render and/or preview cells?

Theoretically it would be possible to dynamically load components that could render a cell and/or provide a popup for viewing/editing. A good example would be the ACL dialog. The existing render function (currently one big if/else of types) might just iterate trough a list of custom and standard components. Plug-ins would need to be configured and hosted at the server, similar to Parse Server.

I'm currently deploying a forked version of the dashboard with some custom cell rendering. Will try to setup a POC with a simple plug-in.

Anyone tried this before or has ideas?

[mtrezza]

Sounds interesting! Maybe you want to put forth a concept to discuss in more detail?

[FransGH]

Happy to share when I get something working. For now unfortunately little time to play around but hope to get some time soon as I have a similar requirement for an upcoming project (dynamic loading of react sub-components).

[mtrezza]

Closing this in favor of #2495, which provides the same functionality in a different way. It addresses all the issues in #2002 (comment) because remote content loading is controlled by a Cloud Function that allows for verification, customization, etc.