# Interact.jl custom layout to @manipulate macro

**URL:** <https://discourse.julialang.org/t/interact-jl-custom-layout-to-manipulate-macro/51757>\
**Category:** Performance\
**Tags:** question, plotting\
**Created:** [December 13, 2020, 9:42am UTC](https://discourse.julialang.org/t/interact-jl-custom-layout-to-manipulate-macro/51757 "2020-12-13T09:42:11Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![floswald](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/floswald/32/195_2.png) [@floswald](https://discourse.julialang.org/u/floswald)\
**Post date:** [December 13, 2020, 9:42am UTC](https://discourse.julialang.org/t/interact-jl-custom-layout-to-manipulate-macro/51757/1 "2020-12-13T09:42:11Z")

</div>

based on this example from the Interact.jl docs

```julia
function mycolorpicker()
    r = slider(0:255, label = "red")
    g = slider(0:255, label = "green")
    b = slider(0:255, label = "blue")
    output = Interact.@map Colors.RGB(&r/255, &g/255, &b/255)
    plt = Interact.@map plot(sin, color = &output)
    wdg = Widget(["r" => r, "g" => g, "b" => b], output = output)
    @layout! wdg hbox(plt, vbox(:r, :g, :b)) ## custom layout: by default things are stacked vertically
end

```

i wanted to change the layout of my interaction to have sliders in three columns in a `hbox`. I’m having trouble generating the plot though because I dont understand how the `&`-updated objects are behaving. to make my plot i need to put the values from the sliders into a dict, then give that dict to a function which evaluates a model, then the output of this is used to make a plot.

here is what works for me:

```julia
	p = Param()
	gammas = 1.0:0.1:3.0
	betas = 0.5:0.05:1.0
	Rs = 1.0:0.05:1.5
	alphas = [0.0,0.35,0.5]
	sigmas = 0.0:0.05:0.35
	lambdas = 0.0000002:0.05:1
	rhos = 0.1:0.05:1
	deltas = 0.0:0.05:0.5
	pensions = 0.0:0.1:1.0

	mp = @manipulate for dosim = Dict("sim" => true, "sol" => false),
						 id = Dict("id=$id" => id for id in 1:2),
						 nsims = spinbox(label="nsims"; value=p.nsims),
						 # γ in slider(gammas, label = "γ", value =p.gamma ),
						 β in slider(betas, label = "β", value =p.beta) ,
						 R in slider(Rs, label = "R", value =p.R) ,
						 α in slider(alphas, label = "α", value =p.alpha) ,
						 σ in slider(sigmas, label = "σ", value =p.sigma) ,
						 λ in slider(lambdas, label = "λ", value =p.lambda),
						 δ in slider(deltas, label= "δ",value = p.delta),
						 pens in slider(pensions, label= "pension",value = p.pension)
	
		 m,p = runf(par = Dict(:nsims => nsims, :beta => β, :alpha => α, :sigma => σ, :lambda => λ, :R => R, :delta => δ, :pension => pens))
		 if dosim
			 s = sim(m,p)
			 plot_s(s)
		 else
			 plot(m,p,id = id)
		 end
	end

```

and here is what does not:

```julia
	p0 = Interact.@map Dict(:nsims => &nsims, :beta => &β, :alpha => &α, :sigma => &σ, :lambda => &λ, :R => &R, :delta => &δ, :pension => &pens)
	m = Interact.@map runf(par = p0[]) # runf returns a tuple

		s = Interact.@map sim(m[1][1], m[1][2])
		pl = Interact.@map plot_s(s[1])

	# build output
	vbox(
		hbox(dosim, id, nsims),
		hbox(β, R, σ),
		hbox(α, λ, δ, pens),
		# pl[1]
		# Interact.@map plot(10)
		Interact.@map plot_s(s[])

	)

```

I’m confused by the type of some of those objects `Lazy.List`. whats the difference of usign `&` and `[]` on an object return by the `Interact.@map` macro? thanks

---

<div class="post-metadata">

**Author:** ![piever](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/piever/32/1815_2.png) [@piever](https://discourse.julialang.org/u/piever)\
**Post date:** [December 13, 2020, 10:14am UTC](https://discourse.julialang.org/t/interact-jl-custom-layout-to-manipulate-macro/51757/2 "2020-12-13T10:14:10Z")

</div>

So, `[]` means “take current value”, whereas `&` means “take current value and update on change”.

In practice, I guess just doing a unique `@map` where all the widgets participate with `&` should be equivalent to `@manipulate`.

That being said, `@manipulate` is also a widget, so you can call the `@layout!` macro on `mp`. I confess I don’t remember how exactly things are stored there, but I think each slider should be a child whose key is the symbol corresponding to the variable name.

---

<div class="post-metadata">

**Author:** ![floswald](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/floswald/32/195_2.png) [@floswald](https://discourse.julialang.org/u/floswald)\
**Post date:** [December 13, 2020, 10:45am UTC](https://discourse.julialang.org/t/interact-jl-custom-layout-to-manipulate-macro/51757/3 "2020-12-13T10:45:19Z")

</div>

Great! I was hoping there is a way to do a `@layout` on a straight manipulate ! Will try!

---

<div class="post-metadata">

**Author:** ![floswald](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/floswald/32/195_2.png) [@floswald](https://discourse.julialang.org/u/floswald)\
**Post date:** [December 13, 2020, 2:07pm UTC](https://discourse.julialang.org/t/interact-jl-custom-layout-to-manipulate-macro/51757/4 "2020-12-13T14:07:28Z")

</div>

almost there. but i can’t show the plot.

```julia
using Plots

x = y = 0:0.1:30

freqs = OrderedDict(zip(["pi/4", "π/2", "3π/4", "π"], [π/4, π/2, 3π/4, π]))

julia> mp = @manipulate for freq1 in freqs, freq2 in slider(0.01:0.1:4π; label="freq2")
           y = @. sin(freq1*x) * sin(freq2*x)
           plot(x, y)
       end

julia> @layout! mp vbox(hbox(:freq1, :freq2), :output)

```

shows this

 ![Screenshot 2020-12-13 at 15.03.35](https://global.discourse-cdn.com/julialang/original/3X/7/e/7e8ca31c57b158417c8f993c7581c0d4d20d12f2.png)

(same result with `julia> @layout! mp vbox(hbox(:freq1, :freq2),hbox(:output))`)

```julia
julia> fieldnames(typeof(mp))
(:components, :output, :scope, :layout)

julia> mp.output
Observable{Any} with 1 listeners. Value:
Plot{Plots.GRBackend() n=1}

```

how can i refer to the plot such that it reprints it so screen?

---

<div class="post-metadata">

**Author:** ![piever](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/piever/32/1815_2.png) [@piever](https://discourse.julialang.org/u/piever)\
**Post date:** [December 13, 2020, 5:49pm UTC](https://discourse.julialang.org/t/interact-jl-custom-layout-to-manipulate-macro/51757/5 "2020-12-13T17:49:06Z")

</div>

I think `getproperty` is overload to only look in the children list. You can access the output with `observe`, see [the `@manipulate` docs](https://juliagizmos.github.io/Interact.jl/latest/custom_widgets/#A-simpler-approach:-the-manipulate-macro-1). So the following should work:

```julia
@layout! mp vbox(hbox(:freq1, :freq2), observe(_))

```

---

<div class="post-metadata">

**Author:** ![floswald](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/floswald/32/195_2.png) [@floswald](https://discourse.julialang.org/u/floswald)\
**Post date:** [December 13, 2020, 8:19pm UTC](https://discourse.julialang.org/t/interact-jl-custom-layout-to-manipulate-macro/51757/6 "2020-12-13T20:19:51Z")

</div>

oh man, I love it. thanks so much!

---

<div class="post-metadata">

**Author:** ![jamalzadeh1400](https://avatars.discourse-cdn.com/v4/letter/j/8e8cbc/32.png) [@jamalzadeh1400](https://discourse.julialang.org/u/jamalzadeh1400)\
**Post date:** [July 1, 2021, 8:29pm UTC](https://discourse.julialang.org/t/interact-jl-custom-layout-to-manipulate-macro/51757/7 "2021-07-01T20:29:51Z")

</div>

Assuming that you defined a dictionary containing keys (say, from 1 to 90) and values incorporating plots (p[1], p[2], …, p[90]), you can create a dynamic plot using manipulate macro with the following codes:

using Interact, Plots  
t=widget(0:1:90, label=“t”)  
ui = @manipulate for t in 1:90  
vbox(  
hbox(t),  
plot(p[t], title = “t=$t”)  
)  
end  
using Blink  
w = Window()  
body!(w, ui)

---

<div class="post-metadata">

**Author:** ![nasimmirzavand](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/nasimmirzavand/32/26922_2.png) [@nasimmirzavand](https://discourse.julialang.org/u/nasimmirzavand)\
**Post date:** [July 7, 2021, 10:53pm UTC](https://discourse.julialang.org/t/interact-jl-custom-layout-to-manipulate-macro/51757/8 "2021-07-07T22:53:06Z")

</div>

very nice, it worked for me.