Datashader flash

[MarcSkovMadsen]

panel: 0.12.6, datashader: 0.13.0, hvplot: 0.7.3, holoviews: 1.14.8

I'm adding a simple Datashader example to awesome-panel.org. I can see that when the example loads the datashader plot/ pane "flashes". See below.

I don't understand why it does this and it could make users doubt whether Datashader+Panel is robust and mature. That would be a shame.

https://user-images.githubusercontent.com/42288570/158519269-ab79c842-39a8-4c03-8fcc-abb66a1658dd.mp4

import hvplot.xarray  # noqa
import panel as pn
import xarray as xr
from awesome_panel import config

pn.extension()

ACCENT = config.ACCENT

if not "air" in pn.state.cache:
    air = pn.state.cache["air"] = xr.tutorial.open_dataset("air_temperature").load().air
else:
    air = pn.state.cache["air"]

def get_plot(accent_base_color=ACCENT):
    plot = air.hvplot.scatter(
        "time",
        groupby=[],
        rasterize=True,
        dynspread=True,
        responsive=True,
        cmap="YlOrBr",
        colorbar=True,
    ) * air.mean(["lat", "lon"]).hvplot.line("time", color=accent_base_color, responsive=True)
    plot.opts(responsive=True, active_tools=["box_zoom"])
    return plot

plot = get_plot()

pn.pane.HoloViews(plot, height=500).servable()

[philippjfr]

It does this because holoviews/datashader has no idea what the size of a responsive plot will be before it is rendered. So after initial render when the size is known the aggregate is recomputed resulting in this "flashing" effect. I agree it is undesirable but I have zero idea how we could avoid it and it's definitely not a Panel issue.

[jbednar]

For a particular rendered size, the flashing can be avoided in HoloViews by specifying the final size in the initial datashade or rasterize call, so that the final and initial plots are the same. That's not meaningful for a responsive plot, but perhaps the effect could be lessened by making a better guess about the final size and using that as the initial size. I'm not sure how to provide those options to hvPlot, though.

[jbednar]

@philippjfr , if I press pause on the video above and scroll through, I see some pretty strange behavior that doesn't appear to be as simple as "a low-res version is rendered first, followed by the high-res version" as I would have expected. Instead, there seem to be several different versions over time, some differing greatly in the color scale? Seems like something to investigate, to me.