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

**URL:** <https://discourse.julialang.org/t/plutoui-trigger-long-computation-only-after-user-sets-many-parameters-and-confirms/112475>\
**Category:** General Usage\
**Tags:** question, pluto\
**Created:** [April 3, 2024, 4:17pm UTC](https://discourse.julialang.org/t/plutoui-trigger-long-computation-only-after-user-sets-many-parameters-and-confirms/112475 "2024-04-03T16:17:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![70Gage70](https://avatars.discourse-cdn.com/v4/letter/7/e68b1a/32.png) [@70Gage70](https://discourse.julialang.org/u/70Gage70)\
**Post date:** [April 3, 2024, 4:17pm UTC](https://discourse.julialang.org/t/plutoui-trigger-long-computation-only-after-user-sets-many-parameters-and-confirms/112475/1 "2024-04-03T16:17:59Z")

</div>

Consider the case where you have many e.g. `TextField`s 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.

---

<div class="post-metadata">

**Author:** ![mike.ingold](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mike.ingold/32/203749_2.png) [@mike.ingold](https://discourse.julialang.org/u/mike.ingold)\
**Post date:** [April 3, 2024, 5:54pm UTC](https://discourse.julialang.org/t/plutoui-trigger-long-computation-only-after-user-sets-many-parameters-and-confirms/112475/2 "2024-04-03T17:54:33Z")

</div>

Maybe a [`PlutoUI.Button`](https://docs.juliahub.com/PlutoUI/abXFp/0.7.27/#PlutoUI.Button)? Example:

> <https://github.com/JuliaPluto/PlutoUI.jl/issues/10#issuecomment-638255057>
>
> Hi,
> 
> can you please tell me how to use the Button? It always seems to have the… value given as argument "label" to the constructor.
> 
> Thank you!, z.

---

<div class="post-metadata">

**Author:** ![70Gage70](https://avatars.discourse-cdn.com/v4/letter/7/e68b1a/32.png) [@70Gage70](https://discourse.julialang.org/u/70Gage70)\
**Post date:** [April 3, 2024, 6:51pm UTC](https://discourse.julialang.org/t/plutoui-trigger-long-computation-only-after-user-sets-many-parameters-and-confirms/112475/3 "2024-04-03T18:51:32Z")

</div>

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

```julia
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).

---

<div class="post-metadata">

**Author:** ![mike.ingold](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mike.ingold/32/203749_2.png) [@mike.ingold](https://discourse.julialang.org/u/mike.ingold)\
**Post date:** [April 3, 2024, 8:27pm UTC](https://discourse.julialang.org/t/plutoui-trigger-long-computation-only-after-user-sets-many-parameters-and-confirms/112475/4 "2024-04-03T20:27:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [April 3, 2024, 8:52pm UTC](https://discourse.julialang.org/t/plutoui-trigger-long-computation-only-after-user-sets-many-parameters-and-confirms/112475/5 "2024-04-03T20:52:15Z")

</div>

> [@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

```julia
parameters; @bind trigger CheckBox(default=false)

```

into one cell, and

```julia
result = trigger ? func(parameters) : nothing

```

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

---

<div class="post-metadata">

**Author:** ![abraemer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/abraemer/32/51403_2.png) [@abraemer](https://discourse.julialang.org/u/abraemer)\
**Post date:** [April 4, 2024, 10:05am UTC](https://discourse.julialang.org/t/plutoui-trigger-long-computation-only-after-user-sets-many-parameters-and-confirms/112475/6 "2024-04-04T10:05:30Z")

</div>

Actually PlutoUI.jl brings some features out of the box to help with this: `confirm` and `combine`. See here for an example: [Interactivity](https://featured.plutojl.org/basic/plutoui.jl)

So you could do e.g.:

```julia
@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:

```julia
@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>"""

```

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [April 4, 2024, 10:53am UTC](https://discourse.julialang.org/t/plutoui-trigger-long-computation-only-after-user-sets-many-parameters-and-confirms/112475/7 "2024-04-04T10:53:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![70Gage70](https://avatars.discourse-cdn.com/v4/letter/7/e68b1a/32.png) [@70Gage70](https://discourse.julialang.org/u/70Gage70)\
**Post date:** [April 4, 2024, 6:15pm UTC](https://discourse.julialang.org/t/plutoui-trigger-long-computation-only-after-user-sets-many-parameters-and-confirms/112475/8 "2024-04-04T18:15:31Z")

</div>

> [@aplavin](#):
>
> You can put
> 
> ```julia-auto
> parameters; @bind trigger CheckBox(default=false)
> 
> ```
> 
> into one cell, and
> 
> ```julia-auto
> 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:

 ![Screenshot 2024-04-04 140559](https://global.discourse-cdn.com/julialang/original/3X/6/b/6bef4f2653a9739289fe294684df807b37c63dc6.png)

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](https://discourse.julialang.org/uploads/short-url/3Q0la5aqERbIuHyAJxiCh0h1oph.jl) (59.7 KB)