[Lens] Cannot tell which visualization the inspect fly-out refers to

[sophiec20]

Kibana version: 8.7.0-SNAPSHOT

Original install method (e.g. download page, yum, from source, etc.): tar.gz

Describe the usability bug: I have multiple visualizations within a dashboard. All showing similar, yet slightly differently filtered data. Many of these do not have a panel title.

When using inspect to view request statistics, I cannot easily tell which panel I am inspecting.

Steps to reproduce:

1. Create dashboard (or use existing kibana sample dash) with multiple visualizations
2. Delete any lens panel titles
3. Use inspect to view request statistics

Expected behavior: I should be able to tell which visualization the fly-out is referring to.

Ideally the user should be able to remember, but because I had multiple metric viz (none of which had panel titles), I found myself never being quite sure which one I had definitely selected.

Screenshots (if relevant): na

Errors in browser console (if relevant): na

Provide logs and/or server output (if relevant): na

Any additional context: A low priority usability nit.

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[elasticmachine]

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

[stratoula]

This happens for by value panels in general that the panel title is not given. Not sure how we could tackle this, I am open to ideas :)

One idea is to add outline of the specific panel selected? cc @elastic/kibana-presentation

[markov00]

Few possible ideas here:

1. Show a panel outline: probably easy to implement but the panel could be right below the flyout and you can't see it
2. Embedd the visualization in the flyout could be nice, but impact a bit available screen size of the flyout reducing its screen real estate.
3. Show the panel title in Inspector: independently from having or not a custom panel title, the embeddable should always have a fallback name that can be displayed. Pushing a bit more on the good practice of having a proper visualization title in Lens could help this a lot.
4. *Animate the "entire dashboard canvas" to be able to place the visualization at the left of the flyout.

[sophiec20]

Thanks for the quick feedback. Interesting ideas. I like the simplicity of [3] and/or [1].

Even though I'm using a large high def monitor, I personally don't think there would be enough screen real-estate to embed the flyout or to show both, unless the viz was a thumbnail perhaps.

[markov00]

Even though I'm using a large high def monitor, I personally don't think there would be enough screen real-estate to embed the flyout or to show both, unless the viz was a thumbnail perhaps.

The embedded viz can just be resized to a small scale, but that definitely reduce the screen-real-estate. I like the thumbnail idea, it could be great to have that in any case, here in the flyout, but also in the Visualization Library or Dashboard list to have a quick look at what the visualization/dashboard looks like. Could help a lot the user recognize them without knowing their names.

[ThomThomson]

I'm looking at this one, and out of the options that @markov00 highlighted, 1: Show a panel outline seems the most doable. That said, I'm adding this into our icebox for the time being, as I'm not sure if we should move forward with that solution when the dashboard itself is hidden by the flyout overlay.

I've been thinking about Dashboard flyouts more generally as part of Dashboard Usability, and wanted to open up a discussion about using a push flyout rather than the overlay, to create a context-sensitive sidebar that shows information related to the panel which is selected.

The main problem with this is that it would resize the dashboard. In most cases, dashboards are quite consistent in not shifting layout severely on resize, but there are some cases where scroll bars are created.

[stratoula]

I am removing the visualizations team as with inline editing the panel which is edited is highlighted. The inspect flyout and the other flyouts would be awesome if they can follow the same logic but I leave this to the presentation team to decide!

[ThomThomson]

Re-triaging this to be an loe:small, because as @stratoula correctly pointed out, we have this capability already, we would only need to change the inspector to use a push flyout and highlight the panel.