Coupled Widgets & Visualization

[habemus-papadum]

Hi,
Currently a widget and a dependent visualization should be rendered in separate cells. Coupling a widget and a visualization into the same output cell leads to problems: e.g.

# ╔═╡ eec120e7-193e-4c68-a215-3554c75db32d
begin
   slider = @bind x html"<input type='range'/>"
   nothing
end

# ╔═╡ 44b83724-82ff-4187-8327-03e932b9fb01
md"""
Don't do this

$(slider)
$(x)
"""

leads to a slider that that can only be clicked but not dragged.

Alternatively,

md"""
This doesn't work

$(@bind y html"<input type='range'/>")
$(y)
"""

does not error, but does not work as the author likely intended.

While displaying widgets and visualizations in separate outputs are often sufficient, it would be nice to create highly interactive presentations in which widgets and visualizations are woven into a single graphical output. Some input widgets e.g. mouse handlers have to be displayed alongside the visualization.

This discussion is meant to explore and consider possible solutions to effectively coupling widgets and visualizations.
(lmk if this conversation is already happening somewhere else!)

Possible subtopics:

Context

A description of the current reactivity/dependency semantics (at sufficient details to provide explanations of the observered behavior of above snippets)

Current Solutions/Approaches

• e.g. PlutoUI.ExperimentalLayout.Layout or @initially
• how they work
• limitations

Alternate Approaches

• Update HypertextLiteral to recognize bindings; TODO: flesh out this proposal during the Pluto developers meeting
• Following the lead of GPUCompiler.jl and various Autodiff packages, hook into the compiler rather using meta programming (not well though out, needs a discussion)

Goals & Rationale

• Why is coupling widgets and visualizations a good idea?
• Ignoring how it is implemented, what should the syntax/user experience look like?

Thanks!