Plotly: Assorted enhancements to support streams examples

[jonmmease]

Overview

This PR builds on #3866 (which in turn builds on #3836) to provide all of the plotly backend enhancements needed in order to support the following interactive streams example notebooks.

Examples

Bounds

Boundsx

Boundsy

RangeXY

Note: I haven't tracked down yet how it is that the histogram in the Bokeh version of this example automatically picks up the same colorscale as the heatmap.

Selection1d paired

Note: I haven't tracked down yet how it is that the VLines in the Bokeh version of this example automatically pick up the same color as the scatter traces that they are associated with.

Selection1d points

Datashader

I didn't see a particular notebook to port to plotly for datashader integration. But here's an example from the Working with large data using datashader section.

Note: I'm currently working on a plotly.js fix for the image flash that happens sometimes right before the image updates.

Note: Currently, the rangexy streams are only update after the pan action is completed. Once holoviz/panel#575 is included in Panel, I think it will be possible for these updates to come continually as with the Bokeh backend.

New Features

I cleaned up the commit log, so it will probably be easiest to review this commit-by-commit.

Here is a summary of the new features that were added (beyond the basic stream support added in #3866) to make these examples possible.

New elements

To support these examples, the following new plotly elements were needed

• VLine
• HLine
• Bounds
• RGB
• Histogram

And because their implementation is nearly identical to Bounds, I also threw in Box and Ellipse as well.

The VLine, HLine, Bounds, Box, and Ellipse elements are represented by plotly layout shapes, not traces. And the RGB element is represented by a plotly layout image. With the previous architecture, elements could only be represented by traces. Now, elements can be represented by any combination of traces, shapes, images, and annotations.

Pixel-based layout

Plotly's native layout approach is to position plot elements in normalized relative coordinates. But because HoloViews computes the sizes of plot elements in pixels it was hard to maintain the appropriate relative sizes of subplots when they were combined together into a layout. It was also hard to maintain consistent gaps between plots as the figures get wider. So I reworked the internal figure_grid utility function to work in pixel coordinates. Prior to these changes, it wasn't really possible for adjoint plots to be narrower that their main plot.

Automatic axis linking

To support linking the axes of the adjoint plots to the main plot in the Bounds example, I added support for automatically linking axes across layouts that represent the same dimensions. I believe this is now equivalent to the automatic linking that the Bokeh backend performs. And, as with Bokeh, it can be disabled using the shared_axes Layout param.

xaxis/yaxis param support

To support the adjoint plots in the Bounds example, the xaxis/yaxis params are now supported in order to configure which side of the plot the axes are positioned on, and to configure when to remove axis ticks/labels.

Documentation updates

In addition to creating a new documentation notebook for each of these 5 interactive streams examples, I also created new notebooks for each of the new elements. And I updated all of the relevant Bokeh and Matplotlib notebooks to include links to the appropriate plotly notebook.

Plotly version dependency

I found it really convenient, when defining new elements, to take advantage of the plotly "magic underscore" notation. This lets you reference nested properties by separating the nested names with underscores. With this, the shape-based elements can have a style property called line_color, and this can be passed along directly to plotly.py where it will be interpreted as `{'line': {'color': val}}.

At some point, I'd like to go through all of the existing plotly style properties and port them to forms that are compatible with this notation. I think that will simplify the code a bit, and make it easier folks to find plotly documentation on the style properties.

Using this requires plotly.py version 4.0.0+, so I updated the min version accordingly.

GIF linkes

To get the GIFs in the new stream notebooks working, I'll need to get the GIFs uploaded to https://assets.holoviews.org/.

[philippjfr]

Let me know when I should start reviewing, I'll be working on getting the other PR mergeable today and tomorrow.

[jonmmease]

Thanks, I'll merge/rebase again after we get the other PRs in and then ping you.