Detach spy panel from visualization

[timroes]

Currently the spy panel is rendered by the <visualization> directive into its parent container. This has several drawback:

• This works fine for places where we use the <visualization> directive, but it doesn't work if the visualization is rendered without using the directive. This e.g. means, that TSVB could have a spy panel when placed on dashboard, but not while opened in editor mode. Same for everything else, that using the default editor, unless they implement spy panels by themself.
• We cannot easily move the trigger for the spy panel, as suggested in e.g. New Location for Spy Panel Button? #5116. The trigger is also causing several issues in several browser, see Cannot access spy panels on visualizations in safari #14642, Firefox: Toggle Spy Panel disappears after clicked. #13038, Spy panel access button needs to be below the content for data table. #13597, and maybe more
• The spy panel is always limited to the size of the visualizations container. This can be very small when placed on a dashboard, since it totally makes sense to have some more horizontal charts, or metrics with a low height. If you try to fit the spy panel within this size (as it's currently done) you basically cannot use it at all anymore.

This issue tracks the progress of making the spy panel for a visualization a more detached solution. This solution should be usable no matter what size the visualization have. It should also be able to trigger it by any button, so we can place the trigger for different visualizations in different places (e.g. it could be in the panel header when placed on a dashboard).

After some discussions with @alexfrancoeur we think, that a "dev tools like experience" could be a good solution. We could use something similar to the BottomBar layout from the UI framework:

Ideally this panel could be rearranged on the screen and maybe even resized. The huge disadvantage of this solution would be, that we lose the possibility for multiple visualizations having their spy panel opened and create a user experience that is more focused on temporarily debug a specific visualization.

[JacobBrandt]

Great idea. I've always thought of the spy panel as being a debug tool for a visualization anyways so having it detached makes perfect sense to me. Also, I never have opened more than one spy panel open at a time and my users use searches or data tables when wanting to view the data in a non-graphical way which I think makes more sense then the spy panel approach.

[LeeDr]

There's a small issue you might fix along with this change. On Discover, you can only get to the spy panel for time-based indices. I think it's because the button to get to it is on the bottom of the histogram which you only get on time-based indices. But there's plenty of reasons you might want to see the request, response, statistics, for non-time-based indices.

[cjcenizal]

Good idea to extract the spy out of the visualization panel! How about we use the EuiFlyout component instead? I think this is the component we'll typically use for "drilling down" into an object's details. The bottom bar is mostly for actions tied to a multi-step and/or full-page form, wizard, or document.

[JacobBrandt]

Whoa, haven't checked in the new UI framework in awhile. You all have been busy. I'm really liking the fact that the 50 shades of green are going to be a thing of the past with the much more manageable color palette.

[timroes]

@cjcenizal of course that makes more sense. I missed that one. In the long run we would like to make it positionable on the screen and resizeable (pretty much like dev tools are). Do you think you could add a position="top|left|right|bottom" attribute to position it? Also do you think something like a manual resizing should rather be build into the component (resizeable={true}) or should be implemented when the component is used and overwrite the size of it?

[cjcenizal]

@timroes These are great ideas about specifying position and supporting resizability. Would you mind opening an issue on the EUI repo? If you have time + inclination, you are also welcome to open a PR.