Blank frames make reactive Pluto plots look choppy

[hdrake]

In the Julia REPL, you can use Plots.jl to make a plot on one line and update it in the next like

p = plot()
plot!(rand.(3,3), st=:heatmap)

Any additional calls to plot! will update the figure based on it's current state. However long it takes to evaluate a plot!() call, the old version of the figure will stay up until the new one replaces it. This is very convenient for interactive data exploration and for making animations.

In Pluto, however, users are encouraged to initialize plots in the same (see the sample notebook Plots.jl which says "I strongly recommend that you only use plot!() to alter plots you initialised in the same cell."). The problem is that the reactivity introduces some choppiness, which looks like a flash of empty white frames in between frames actually showing the plots.

(Here's a snapshot of one of these white frames from my Gif-making app)

Up to this point, it kind of makes sense because I can imagine there is a lag between when the empty plot in plot() is displayed up and when the updated results of plot!(...) are displayed. However, the same problem occurs even if you split the initialization of the figure plot() and updating plot!() into two separate cells.

[fonsp]

Hi Henri!

I will have more time to look at this tomorrow, but in the meantime you can try to force the output to be SVG instead of HTML. Pluto has some choppiness-prevention-code, which only works if the old and new outputs are both images.

Paste this into the notebook:

as_svg(x) = PlutoUI.Show(MIME"image/svg+xml"(), repr(MIME"image/svg+xml"(), x))

and you use it like so:

let
	p = plot()
	plot!(p, ...)
end |> as_svg

or

let
	p = plot()
	plot!(p, ...)
	as_svg(p)
end

---

If PlutoUI.Show is not defined, then you will need to use the latest PlutoUI version in this notebook, which you can set up like this:

begin
	import Pkg
	Pkg.activate(mktempdir())

	Pkg.add([
		Pkg.PackageSpec(name="PlutoUI", version="0.6.7-0.6"),
		Pkg.PackageSpec(name="Plots", version="1"),
	])
	using Plots
	using PlutoUI
end

[hdrake]

Your fix works like a charm– thanks @fonsp!

[fonsp]

Some ideas:

1. check if the output is Plots.jl+GR and if so, use SVG instead of HTML

It is generally faster and solves this issue.

It does require some unfortunate code, but maybe the Plots.jl people are interested in adding it?

https://discourse.julialang.org/t/playing-with-live-plots-in-pluto/44062

2. render HTML output to a "frame buffer", and only place it on the page after a small delay

Like in 3D graphics :)

This also isn't very nice, and it would make everything 1 frame slower. Maybe check if the HTML output is "large", and only delay it then?

It would make our CellOutput code a lot more complicated

3. find a way to document this problem+solution more clearly

The new PlutoUI.as_mime function might be interesting to more users, but on the other hand, it is exactly the kind of technobabble that Pluto should hide from users