@bind input element generator?

[dustyirwin]

Hi all,

Is there a way to iteratively generate Pluto @bind input elements (Button, CheckBox, etc)?

I've looked around and can't find this issue addressed quite yet. If I've missed something please let me know.

For example, it would be nice to be able to do something like the following:

vec = [1,2,3]

md"""
join( [ "\$(@bind var$i CheckBox()" for i in vec ], " | ")
"""

to produce the markdown:

md"""
 $(@bind var1 CheckBox()) | $(@bind var2 CheckBox()) | $(@bind var3 CheckBox())
"""

...and have it actually interpolate into a cell correctly. Important to note that the length and contents of vec may vary (in a sensible way).

Trying this general approach hasn't been fruitful and I'm hoping there is a more workable / elegant approach? It also seems that the ability to programmatically create UI elements (generating a drop-down menu for each column in a dataframe, for example) would be a prerequisite towards #664.

Thanks for any help! :)

[fonsp]

Hey! I think that this would be a cool feature (will take some work to implement), but in the meantime we can do this on the frontend side. You could write a javascript widget that displays N numberfields, and the bound value is the array of those values.

I did something similar here: https://github.com/fonsp/disorganised-mess/blob/master/confirm%20combine.jl

[yha]

I did something similar here: https://github.com/fonsp/disorganised-mess/blob/master/confirm%20combine.jl

This example doesn't work for me (xoxo remains nothing). Does it need updating? I don't know much javascript, and I don't understand what this code is doing.

I tried this instead

cbs = [CheckBox() for i=1:10]

for (i,cb) in enumerate(cbs)
	@eval @bind $(Symbol("b_",i)) $cb
end

but it doesn't work: the b_$i variables are defined, but not bound to the checkboxes.

[Pangoraw]

With the newly added macro support in version 0.16 you can build your own macro that bind to dynamic variable names.

The code for the notebook is here.

[yha]

That's neat, but I'm not sure it solves the original issue.
Any macro implementation would need to get the list of elements/names as a literal inside the call. For example, your macro needs the list of suffixes inside a literal array expression.
The simplest solution I could find for binding a run-time computed list of elements to a vector is pretty ugly. It involves two macros that have to be called in succession from two different cells, and the macro bodies depend on the list of elements as a global variable (ugh):

function multibind_expr(vars, elements)
	exprs = [:(@bind $var $element) for (var, element) in zip(vars, elements)]
	:([$(exprs...)])
end

begin
	macro multibind_els1(prefix) # depends implicitly on global `els`
		i = eachindex(els)
		vars = Symbol.(prefix,i)
		multibind_expr(vars, [:($(els[i])) for i in i])
	end
	
	macro multibind_els2(prefix, out=prefix)
		i = eachindex(els)
		vars = Symbol.(prefix,i)
		quote
			$(esc(out)) = [$(esc.(vars)...)]
		end
	end
end

els = ...

@multibind_els1 z  # defines z1, z2, ... and returns array of Bonds

@multibind_els2 z  # defines z = [z1, z2, ...]

[icweaver]

Just adding a link here with further discussion happening on Zulip right now

https://julialang.zulipchat.com/#narrow/stream/243342-pluto.2Ejl/topic/Creating.20widgets.20programmatically/near/258630251

[icweaver]

warning: going to editorialize a bit here

Hot off the presses, we can do these sorts of things out-of-the-box now using PlutoUI.jl and a soon to be released package from the team called MarkdownLiteral.jl. This new package combines the HTML goodness of HypertextLiteral.jl with the sane parsing standards of CommonMark.jl to provide the @markdown macro (aka @markdownliteral, aka @mdx), which will hopefully supplant md""" in the future.

The example from @dustyirwin might be accomplished with something like this now:

# Just until these changes are offish
import Pkg
Pkg.add(url="https://github.com/JuliaPluto/PlutoUI.jl")
Pkg.add(url="https://github.com/JuliaPluto/MarkdownLiteral.jl")

using PlutoUI
using MarkdownLiteral: @mdx

function row_boxes(vec)
    PlutoUI.combine() do Child
        @mdx("""
        $([
            Child("var$(v)", CheckBox())
            for v ∈ vec
        ])
        """)
    end
end

@bind vars row_boxes([1, 2, 3])

For a bunch more customizations you can do/are being experimented with, feel free to follow the discussion here!
https://julialang.zulipchat.com/#narrow/stream/257776-Pluto.2Ejl-development/topic/PlutoUI.20composition/near/265732092

[dustyirwin]

This is great! I can easily see this opening up all kinds of custom UI elements. I tried the example from @icweaver and it works perfectly!

To push this a bit further, I tried to label the CheckBox elements, which renders in the cell (albeit a bit awkwardly):

but breaks the 'vars' cell:

This has me thinking... it would be nice to be able pass a UI element label in PlutoUI like we can for widgets in Interact.jl.

Has anyone else had success in labeling these input elements?

[icweaver]

Glad to hear it's working alright, Dusty! Just going off of the second example in PlutoUI.combine, does something like this work alright on your end?

using PlutoUI
using MarkdownLiteral: @mdx

function labeled_boxes(vec)
	PlutoUI.combine() do Child
		@mdx("""
		$([
			@mdx("$(v): $(Child("var$(v)", CheckBox()))")
			for v ∈ vec
		])
		""")
	end
end

@bind vars_labeled labeled_boxes([1, 2, 3])

vars_labeled

[dustyirwin]

Thanks @icweaver ! This works for me:

It would be great to be able to control the layout of the UI elements as well, but this is functional and definitely gets me further down the line. Great work!

[icweaver]

Nice! Oh, I had nothing to do with this, but the creators have a lot of cool things in store for extending these things! For example, you can already layout your widgets, and even put them into tables! (courtesy of @jeremiahpslewis)

Screen-Recording-2021-12-22-at-12.01.12.mov

I believe the idea is to provide users with building blocks like these so that they can compose together widgets for their own packages =D

[dustyirwin]

Wow, thanks for the link, that DataFrameInput func is really slick and it structures the UI elements nicely! Pluto just keeps getting better all the time :)