PlotlyJS doesn't work with Interact

[ranjanan]

PlotlyJS doesn't work with the @manipulate macro.

using Interact
@manipulate for i = 1:10
    PlotlyJS.plot()
end

gives an error:

Not implemented (yet). Use Electron frontend to save figures

[ranjanan]

cc: @shashi @rohitvarkey

[rohitvarkey]

On a hunch, I tried forcing the MIME to "text/html", which resulted in the plot appearing, but Interact doesn't seem to update the plot.

using Interact
@manipulate for i = 1:10
    p = gen_plot(i) #some function that returns a plot.
    display(MIME"text/html"(), p)
end

[shashi]

display has side-effects, so it doesn't update.

[shashi]

With this hack

immutable PlotWrap
    x::Any
end

Base.writemime(io::IO, m::MIME"text/html", p::PlotWrap) = writemime(io, m, p.x)

This works

@manipulate for n=1:10
    PlotWrap(plot(scatter(x=1:n, y=rand(n))))
end

Looks like the PNG writemime is being chosen in the case @ranjanan posted. I wonder why, Interact should pick html by default.

Either way, I don't think PlotlyJS should error out if writemime is called for PNG

[ranjanan]

Thanks for the hack, @shashi

[sglyon]

@shashi doesn't display always have side effects (it does some sort of IO to display an object)? What side effects are causing the problems here?

Also, because plotly and this package have built in support for manipulating a plot that has already been displayed (see all the methods here), I believe it might be worthwhile to write a custom PlotlyJS.jl + Reactive.jl bridge. Any thoughts on where to start with that?

[sglyon]

@shashi Agreed that PlotlyJS shouldn't error out when trying to save a PNG from a notebook. Supporting png/pdf/jpeg/eps output from the notebook only requires that I can execute a one-line call to javascript and have the notebook return the string output back to Julia.

I simply haven't had time to hook up this 2 way communication in the notebook yet, but if someone already knows how it can work, I'd love any pointers on where to start.

[sglyon]

Thanks to @shashi I've figured out how to make this work without the need for the hack.

This works now:

@manipulate for i = 1:10
    plot(scatter(x=1:i, y=randn(i)))
end

But what's even cooler is that the more efficient plotly.js javascript routines for updating just portions of a plot also work:

p = plot(scatter(x=1:10, y=randn(10), mode="markers"),
         Layout(xaxis_range=[0, 12], yaxis_range=(-3, 3)))
display(p)
@manipulate for marker_size=10:5:75
    restyle!(p, marker_size=marker_size)
end

If you're going to be mutating plots with @manipulate I'd recommend looking into using the plotly.js API methods like restyle!, relayout! and friends

[shashi]

💯

[ranjanan]

@spencerlyon2 In your example

p = plot(scatter(x=1:10, y=randn(10), mode="markers"),
         Layout(xaxis_range=[0, 12], yaxis_range=(-3, 3)))
display(p)
@manipulate for marker_size=10:5:75
    restyle!(p, marker_size=marker_size)
end

How do I change the sizes of the first 5 markers and not the others?

[sglyon]

Hmm that one is a bit tricker. I can think of a inelegant way to do it: marker_size=vcat(fill(marker_size, 5), fill(10, length(p.plot.data[1][:x])-5)), but there should be a better solution to that.

The semantics of restyle! follows the plotly.js version. I'd recommend looking at their examples here