Button doesn't do anything in Pluto

Specific Domains Visualization
1

I’m trying to create a simple plotting interface in Pluto.jl but because of the slowness of loading data I need to prevent Pluto from plotting until all of the settings are chosen. The button seemed like a good method but the button doesn’t appear to do or change anything.

Am I doing something wrong or is there a better way of doing it?

Here is my simple test. I’ve considered using IJulia but it doesn’t have the interactive elements I’m looking for. HTTP.jl could work if I wanted to invest an enormous amount of time into it.

### A Pluto.jl notebook ###
# v0.11.14

using Markdown
using InteractiveUtils

# This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
macro bind(def, element)
    quote
        local el = $(esc(element))
        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : missing
        el
    end
end

# ╔═╡ 4062e6c0-f353-11ea-2544-9522a104936c
begin
	#using Plotly
	
	md"""
	# Site Plots
	"""
end

# ╔═╡ 807f72f0-f290-11ea-2d0d-d753bf0fd1dd
md"""
`Site = ` $(@bind site html"<select>
<option value='None'>Select a Site</option>
<option value='S1'>Site 1</option>
<option value='S2'>Site 2</option>
</select>")

"""

# ╔═╡ e4d9c1b0-f290-11ea-3100-09323b4b4542

if site == "S1"
	md"""
	`Dataset = ` $(@bind dataset html"<select>
	<option value='GHG'>GHG</option>
	<option value='TRANC'>TRANC</option>
	</select>")
	"""
elseif site == "S2"
	md"""
	`Dataset = ` $(@bind dataset html"<select>
	<option value='GHG'>GHG</option>
	<option value='Solar'>Solar System</option>
	</select>")
	"""
else
	md"""
	`Dataset = ` $(@bind dataset html"<select>
	<option value='None'>None</option>
	</select>")
	"""
end

# ╔═╡ b4c2b9c0-f338-11ea-2161-b5940e30a701
if site == "S1"
	if dataset == "GHG"
		md"""
		`Column = ` $(@bind column html"<select>
		<option value='DiagVal1'>Diagnostic Value</option>
		<option value='DiagVal2'>Diagnostic Value 2</option>
		<option value='CO2Absorp'>CO2 Absorptance</option>
		<option value='H2OAbsorp'>H2O Absorptance</option>
		<option value='CO2mmol'>CO2 (mmol/m³)</option>
		</select>")
		"""
	elseif dataset == "TRANC"
		md"""
		`Column = ` $(@bind column html"<select>
		<option value='u'>U (m/s)</option>
		<option value='v'>V (m/s)</option>
		<option value='w'>W (m/s)</option>
		<option value='SOS'>Sonic Temperature</option>
		<option value='sigmaNr'>ΣNr</option>
		<option value='NOy'>NOy</option>
		</select>")
		"""
	else
		md"""
		`Column = ` $(@bind column html"<select>
		<option value='None'>None</option>
		</select>")
		"""
	end
elseif site == "S2"
	if dataset == "GHG"
		md"""
		`Column = ` $(@bind column html"<select>
		<option value='DiagVal1'>Diagnostic Value</option>
		<option value='DiagVal2'>Diagnostic Value 2</option>
		<option value='CO2Absorp'>CO2 Absorptance</option>
		<option value='H2OAbsorp'>H2O Absorptance</option>
		<option value='CO2mmol'>CO2 (mmol/m³)</option>
		</select>")
		"""
	elseif dataset == "Solar"
		md"""
		`Column = ` $(@bind column html"<select>
		<option value='SolarData'>Solar Data</option>
		</select>")
		"""
	else
		md"""
		`Column = ` $(@bind column html"<select>
		<option value='None'>None</option>
		</select>")
		"""
	end
else
	md"""
	`Column = ` $(@bind column html"<select>
	<option value='None'>None</option>
	</select>")
	"""
end

# ╔═╡ 5252b200-f33c-11ea-06ee-f5fe7a7f0ea0
md"""
`Multiple Plots = ` $(@bind plotHold html"<input type=checkbox >")

$(@bind plotButton html"<input type=button value='Plot'>")
"""

# ╔═╡ 92f4f370-f33e-11ea-3dfb-43436c27c417
begin
	if site == "None"
		test = "Waiting..."
	else
		test = "Plotting..."
	end
	(test)
end

# ╔═╡ 1e303860-f33e-11ea-18e7-1f7dd9a2f9e7
if site != "None"
	md"""
	Run!
	"""
end

# ╔═╡ Cell order:
# ╟─4062e6c0-f353-11ea-2544-9522a104936c
# ╟─807f72f0-f290-11ea-2d0d-d753bf0fd1dd
# ╟─e4d9c1b0-f290-11ea-3100-09323b4b4542
# ╟─b4c2b9c0-f338-11ea-2161-b5940e30a701
# ╟─5252b200-f33c-11ea-06ee-f5fe7a7f0ea0
# ╟─92f4f370-f33e-11ea-3dfb-43436c27c417
# ╟─1e303860-f33e-11ea-18e7-1f7dd9a2f9e7
2

My understanding is that buttons are finicky due to the reactive nature of the notebooks.

If you want to “hide” changes from bound variables, you need to use an input with state, like a checkbox:

# cell 1
@bind do_stuff PlutoUI.CheckBox(false)

# cell 2
if do_stuff
    # make plot
else
    md"CheckBox must be checked in order to make plot"
end
3

That was one of the options I thought of but it felt too hackish and I wasn’t sure if I was doing something wrong with the button.

The limited documentation for Pluto does mention “You can use any DOM element that fires an input event”. I finally found a list of those elements and am going through them now.

4

What do you need it for? Did you try PlutoUI utilities? Most are undocumented, but you can check the source code.

5

Good idea, the supported elements are in Builtin.jl although trying other elements from the my earlier link do at least partially work.I guess it is still quite a young package. It’s one I’ll be watching though.

6

I ran into a similar problem,
I wanted to run a function on button click and bind the returned output to the variable. Is there any way we can achieve this ?
is something like this possible

@bind x html"<input type=button value=action  onclick=rand()>"
7

I believe you could do that with two cells:

@bind xbtn html"<input type=button value='Get Rand'>"

begin 
    xbtn 
    x = rand()
end
8

Thanks @joshday,

The botton only re-evaluate the second block. It turns out xbtn returns the string value of the button if its clicked. So I used it with conditionals as a work around. Thanks again.