How to create interdependent widgets in Pluto

General Usage
, ,
1

Hello,

I am trying to make interdependent widgets based on the wind speeds example. Here is what I am trying to do: select a distribution from a Select menu and add a labeled NumberField to the right for each parameter. For example:

x: [normal] μ: σ:

where [normal] is the selection of the normal distribution from the Select menu, and each , is a NumberField for the parameters of the normal distribution. Here is what I tried, but I have no idea how to fix it. Any help would be greatly appreciated.

Summary 
begin
	using PlutoUI
	import HypertextLiteral: @htl
	using Distributions
	function make_dists(var_names, options)
		PlutoUI.combine() do Child
			@htl("""
			<h6>Parameters</h6>
			<ul>
			$([
				@htl("<li>$(var_names[i]): $(Child(var_names[i], Select(options[i]))) $(p): $(Child(p, NumberField(0:100))) for p in fieldnames(typeof(options[i])) </li>")
				for i in 1:length(var_names)
			])
			</ul>
			""")
		end
	end
	
	options  = [[Normal => "normal", Gamma => "gamma"], [Normal => "normal", LogNormal => "LogNormal"]]
	var_names = ["x", "y"]
	@bind dists make_dists(var_names, options)
end
2

I have tried various approaches, but with no success. The main problem I am having is capturing the selected distribution and populating the labels and number fields for the parameters. In the code below, I break down the distribution menus and parameter number fields into separate functions, but I am not sure how to combine it so I can get something like:

x: [normal] μ: σ:
y: [gamma] α: θ:

Summary 
begin
	using Distributions
	using PlutoUI
	using HypertextLiteral: @htl
end

function make_dist_widgets(dist_menus, names)
	PlutoUI.combine() do Child
		@htl("""
		<h6>Variables</h6>
		<ul>
		$([
			@htl("<li>$(names[i]): $(Child(names[i], Select(dist_menus[i])))</li>")
			for i in 1:length(dist_menus)
		])
		</ul>
		""")
	end
end

function make_parm_fields(dist)
	PlutoUI.combine() do Child
		@htl("""
		<ul>
		$([
			@htl("$(name): $(Child(name, NumberField(1:100)))")
			for name in fieldnames(dist)
		])
		</ul>
		""")
	end
end

# make number fields for distribution parameters
@bind parms make_parm_fields(Normal)

# make a distribution menu for each variable
begin
	dist_menus = [[Normal,Gamma],[LogNormal,Normal]]
	names = ["X", "Y"]
	@bind vars make_dist_widgets(dist_menus, names)
end
3

Here is my latest attempt to create interdependent widgets. As you can see, the widget displays correctly, but the number fields do not update based on the menu selection. Moreover, I am not sure how to combine the number field inputs into the distribution object.

Screenshot from 2025-04-13 10-52-11

Summary 
begin
	using Distributions
	using PlutoUI
	using HypertextLiteral: @htl

	function make_parm_fields(dist)
		PlutoUI.combine() do Child
			@htl("""
			<div style="display:flex;  column-gap: 10px; flex-direction: row; justify-content: left">
			$([
				@htl("$(name): $(Child(name, NumberField(1:100)))")
				for name in fieldnames(dist)
			])
			</div>
			""")
		end
	end

	function my_widget(name, dists)
		return @htl("""
			<div style="display:flex;  column-gap: 10px; flex-direction: row; justify-content: left">
	            $(name): $(@bind dist Select(dists)) $(make_parm_fields(dist))
			 </div>""")
	end

	@bind results my_widget("x",[Normal,Gamma])