How to update multiple interactive plots with Interact.jl?

General Usage
, ,
1

I am trying to create a simple GUI to visualize a model, and turned to Interact.jl. Consider the following minimal working example of a simple interactive sine wave:

function appTest(;θ0)
    f,shift,A = θ0
    f = spinbox([range(Float64(0.0),Float64(1.0))],label="f",value=f,step="any")
    shift = spinbox([range(Float64(-0.1),Float64(0.1))],label="shift",value=shift,step="any")
    A = spinbox([range(Float64(0.),Float64(1.))],label="A",value=A,step="any")
    update = button("update")
    θ = Interact.@map (&update; [f[],shift[],A[]])

    plt1(θ,t) = plot(t,θ[end].*sin.(2π.*θ[1].*t .+ θ[2]),label="",ylims=(-1.,1.))

    t = range(0,stop=2π,length=100)
    p1 = Interact.@map plt1(&θ,t)
    ui = vbox(hbox(f,shift,A,update),p1)
    return ui
end
w = Window(Dict("width"=>1700,"height"=>900))
ui = appTest(θ0=[0.5,0.0,1.0])
body!(w, ui);

This works as expected. But if I try to add a second plot following the same process as in adding the first, i.e.:

function appTest(;θ0) 
    f,shift,A = θ0
    f = spinbox([range(Float64(0.0),Float64(1.0))],label="f",value=f,step="any")
    shift = spinbox([range(Float64(-0.1),Float64(0.1))],label="shift",value=shift,step="any")
    A = spinbox([range(Float64(0.),Float64(1.))],label="A",value=A,step="any")
    update = button("update")
    θ = Interact.@map (&update; [f[],shift[],A[]])

    plt1(θ,t) = plot(t,θ[end].*sin.(2π.*θ[1].*t .+ θ[2]),label="",ylims=(-1.,1.))
    plt2(θ,t) = plot(t,θ[end].*cos.(2π.*θ[1].*t .+ θ[2]),label="",ylims=(-1.,1.))

    t = range(0,stop=2π,length=100)
    p1 = Interact.@map plt1(&θ,t)
    p2 = Interact.@map plt2(&θ,t)
    ui = vbox(hbox(f,shift,A,update),hbox(p1,p2))
    return ui
end

w = Window(Dict("width"=>1700,"height"=>900))
ui = appTest(θ0=[0.5,0.0,1.0])
body!(w, ui);

Doing this initially shows both plots in the correct layout, but anytime I try to update the parameters in the GUI it spits out an “Unexpected websocket server error” – thus I can’t ever interact with the plots, which is the point.

If I combine the plots into one larger plot first and wrap that in a function, then everything works fine, but this restricts the layout (in my real example I am envisioning a layout that looks like [[gui, plot1], [plot2, plot3]], which I don’t think can be accomplished if you combine all the plots first before laying them out?) and I don’t understand why the process works for one but not for both…any help is much appreciated, thanks!

I think this question is somewhat similar to one posed here: Fastest plot backend for Interact + Mux - #11 by Tamas_Papp

which I don’t think was ever fully resolved and hasn’t been updated in some time so I’m hoping there is some new approach I’m somehow missing.