PlutoUI: Trigger long computation only after user sets many parameters and confirms

[70Gage70]

Consider the case where you have many e.g. TextFields across many cells which set the parameters for some long computation. You want the user to be able to set all the parameters and not have the long calculation trigger until they click a button.

confirm is kind of this idea, but you wouldn’t want a confirm for every TextField, and the calculation would trigger each time you clicked the confirm button anyway. Also: there are enough parameters that wrapping everything in a confirm would be combersome.

A checkbox solves this: one can do @bind trigger CheckBox(default = false) and then have the long computation be something like result = trigger ? my_calculation() : nothing in some other cell, and then have other cells that depend on result contain things like if result !== nothing and so on.

The issue you have to check and uncheck the box to regain the ability to edit without triggering the computation, which is kind of unintuitive - it just feels like there has to be a better way.

[mike.ingold]

Maybe a PlutoUI.Button? Example:

Usage of Button?

[70Gage70]

The problem with a Button is that - as far as I understand - it is always “on.” Meaning that a cell like

begin
    button_clicked;
    my_calculation(parameters)
end

Will still retrigger when parameters is modified elsewhere (e.g. by the modification of a TextField by the user).

[mike.ingold]

Ah, you’re right, I think I misunderstood how Button works. For some reason I thought it was adding some kind of dependency blocker that only releases on a button press, but it looks more like the opposite: it just adds another dependency that can be artificially “updated” with a button press.

I don’t have a ton of experience with PlutoUI, so my only other immediate idea would be something like what you’ve already described, like a “Ready?” checkbox and a conditional execution of the code.

Depending on what you’re trying to achieve, it looks like Makie.jl implements some UI elements that you might be able to integrate into Pluto.jl using the WGLMakie.jl backend.

[aplavin]

@70Gage70

there are enough parameters that wrapping everything in a confirm would be combersome.

I would personally consider doing this first, it’s the easiest solution.

@70Gage70

@bind trigger CheckBox(default = false)

You can put

parameters; @bind trigger CheckBox(default=false)

into one cell, and

result = trigger ? func(parameters) : nothing

into another. Then whenever parameters are changed, trigger will reset to false.

[abraemer]

Actually PlutoUI.jl brings some features out of the box to help with this: confirm and combine. See here for an example: Interactivity

So you could do e.g.:

@bind parameters PlutoUI.confirm(PlutoUI.combine() do child
	md"""
	# Parameters
	- Item1: $(child(PlutoUI.Slider(1:5; show_value=true)))
	- Item2: $(child(PlutoUI.TextField()))
	"""
end; label="GO!")

And the values are only updated once you press the button “GO!”

As a bonus, you could wrap this whole thing in a <div> with fixed position, so you don’t need to scroll around in your notebook to find all the parameters.
Example:

@htl """<div style="position: fixed; left: 1rem; top: 5rem; 
	padding: 5px;
	text-align: center;
	border-color: antiquewhite; border-width: 2px; border-style: solid;
	background-color: var(--main-bg-color);">
    $(@bind vals PlutoUI.confirm(PlutoUI.combine() do child
	    md"""
	    # Parameters
    	- Item 1: $(child(PlutoUI.Slider(1:5; show_value=true)))
    	- Item 2: $(child(PlutoUI.TextField()))
	    """
    end; label="GO!"))
</div>"""

[aplavin]

Also relevant:

• Sidebar from PlutoUIExtra.jl as a convenient way to pin a bunch of widgets to a side of the screen.
• PlutoTables.jl to create a bunch of widgets that control a complex struct automatically.

[70Gage70]

@aplavin

You can put

parameters; @bind trigger CheckBox(default=false)

into one cell, and

result = trigger ? func(parameters) : nothing

into another. Then whenever parameters are changed, trigger will reset to false.

Thank you, this is exactly what I needed and so I am going to mark this as the solution to my question as written. I take the confirm solution proposed by yourself and @abraemer seriously though and I will see if I can implement that in a nice way since I agree that it’s preferable.

@abraemer

As a bonus, you could wrap this whole thing in a <div> with fixed position, so you don’t need to scroll around in your notebook to find all the parameters.

I have to say this is very cool. One thing though is that I had to separate the interface from the div to get it to display properly:

In any case, I am also attaching a notebook which shows the proof of concept for these ideas for anyone else reading this. Thanks!

trigger-mwe.jl (59.7 KB)