Different state of julia object for each user

[jbrea]

In this notebook (src) I have a few mutable structs that change their values when the user clicks some buttons. It seems that all users see the same object, e.g. if one user moves the agent around in the cliff walking environment (at the bottom of the notebook) other users will notice this (not immediately, because the plots are not redrawn when another user changes the object, but whenever they act themselves it may look as if the agent has jumped, because the other user's actions had changed the state of the object). Is there an easy solution to have different states for each user (ideally before Wednesday, when I'm teaching this class)?

[fonsp]

Hi @jbrea !

The short answer is that this is a limitation of PlutoSliderServer: it is designed with the assumption that your notebook is stateless: that the state of the notebook is fully described by (the code and) the current values of the inputs. In your case, there is also a dependency on past values of inputs, breaking the assumptions in PlutoSliderServer. Some ideas:

[jbrea]

Thanks a lot for your prompt and helpful response!!

[fonsp]

Idea 1:

Contain all state in the input values, and make your julia logic immutable and pure. This means that you have to design your own input element using JavaScript which remembers all past inputs, and returns all of them:

@bind input_sequence MyElement()

# input_sequence looks like `["left", "left", "up", ...]`

# you can then write your current state as a pure function of:
# - the (immutable) initial state, and 
# - the sequence of inputs
state = reduce(input_sequence; init=start_state) do previous_state, next_input
	if next_input == "left"
		return move_left(previous_state)
	elseif next_input == "right"
		...
	end
end

This would be the way to stay within the PlutoSliderServer "sandbox", but it requires some JS. Though it looks like you are already using JS to write custom widgets, yay!!!

[fonsp]

Here you go! It was quite easy to add this functionality to the CounterButtons widget that you already wrote:

Schermopname.2021-12-06.om.15.56.10.mov

begin
    local result = begin
        struct ClickHistory
            labels::Vector{String}
        end
    end

	function Base.show(io::IO, m::MIME"text/html", button::ClickHistory)
		buttons = [@htl("""<input type="button" value="$label">""")
                   for label in button.labels]
		show(io, m, @htl("""
		<span>
        $buttons
		<script>
		let history = []
		const span = currentScript.parentElement
		span.value = history
		Array.prototype.forEach.call(span.children, function(child, index){
			child.addEventListener("click", (e) => {
				history = [...history, e.target.value]
				span.value = history
				span.dispatchEvent(new CustomEvent("input"))
				e.stopPropagation()
			})
		});
		</script>
		</span>
		"""))
	end

	PlutoUI.BuiltinsNotebook.Bonds.initial_value(::ClickHistory) = []

	result
end

(P.S. you should add AbstractPlutoDingetjes and HypertextLiteral to your project directly instead of importing them from PlutoUI)

[jbrea]

Ah, yes, of course! This is a nice approach, thanks!

[fonsp]

Idea 2:

This idea is a workaround, where we use a trick to get a separate mutable state for each connected client.

all_states = Dict()

@bind user_id html"""<script>
	currentScript.value = Math.random()
</script>"""

current_state = get(all_states, user_id, create_initial_state())

# some example code:

@bind action CounterButtons(...)

if action == "left"
	mutate!(current_state)
end

# in your case, it looks like:
create_initial_state() = MCLearner()

Here, user_id will be a different random number for each visitor, but it will be constant during a visit.

PlutoSliderServer knows that user_id is co-dependent with action, so the two will always be sent together, ensuring that current_state is user-specific.

[jbrea]

Thanks a lot! This allowed me to get what I wanted with minimal changes. (I ended up using the mutating get!(all_states, user_id, create_initial_state()), however).