Add UserInputs component (#1788)

* Add UserInputs component

* update tests

* remove global state dependency from UserInputs

* Simplify UserInputs change handler

Author: Corvince

mesa/experimental/jupyter_viz.py

@@ -39,25 +39,26 @@ def JupyterViz(
 
     current_step, set_current_step = solara.use_state(0)
 
-    solara.Markdown(name)
-
-    # 0. Split model params
-    model_params_input, model_params_fixed = split_model_params(model_params)
-
-    # 1. User inputs
-    user_inputs = {}
-    for name, options in model_params_input.items():
-        user_input = solara.use_reactive(options["value"])
-        user_inputs[name] = user_input.value
-        make_user_input(user_input, name, options)
+    # 1. Set up model parameters
+    user_params, fixed_params = split_model_params(model_params)
+    model_parameters, set_model_parameters = solara.use_state(
+        fixed_params | {k: v["value"] for k, v in user_params.items()}
+    )
 
-    # 2. Model
+    # 2. Set up Model
     def make_model():
-        return model_class(**user_inputs, **model_params_fixed)
+        model = model_class(**model_parameters)
+        set_current_step(0)
+        return model
 
-    model = solara.use_memo(make_model, dependencies=list(user_inputs.values()))
+    model = solara.use_memo(make_model, dependencies=list(model_parameters.values()))
 
-    # 3. Buttons
+    def handle_change_model_params(name: str, value: any):
+        set_model_parameters(model_parameters | {name: value})
+
+    # 3. Set up UI
+    solara.Markdown(name)
+    UserInputs(user_params, on_change=handle_change_model_params)
     ModelController(model, play_interval, current_step, set_current_step)
 
     with solara.GridFixed(columns=2):
@@ -160,44 +161,53 @@ def check_param_is_fixed(param):
         return True
 
 
-def make_user_input(user_input, name, options):
-    """Initialize a user input for configurable model parameters.
+@solara.component
+def UserInputs(user_params, on_change=None):
+    """Initialize user inputs for configurable model parameters.
     Currently supports :class:`solara.SliderInt`, :class:`solara.SliderFloat`,
     and :class:`solara.Select`.
 
-    Args:
-        user_input: :class:`solara.reactive` object with initial value
-        name: field name; used as fallback for label if 'label' is not in options
-        options: dictionary with options for the input, including label,
+    Props:
+        user_params: dictionary with options for the input, including label,
         min and max values, and other fields specific to the input type.
+        on_change: function to be called with (name, value) when the value of an input changes.
     """
-    # label for the input is "label" from options or name
-    label = options.get("label", name)
-    input_type = options.get("type")
-    if input_type == "SliderInt":
-        solara.SliderInt(
-            label,
-            value=user_input,
-            min=options.get("min"),
-            max=options.get("max"),
-            step=options.get("step"),
-        )
-    elif input_type == "SliderFloat":
-        solara.SliderFloat(
-            label,
-            value=user_input,
-            min=options.get("min"),
-            max=options.get("max"),
-            step=options.get("step"),
-        )
-    elif input_type == "Select":
-        solara.Select(
-            label,
-            value=options.get("value"),
-            values=options.get("values"),
-        )
-    else:
-        raise ValueError(f"{input_type} is not a supported input type")
+
+    for name, options in user_params.items():
+        # label for the input is "label" from options or name
+        label = options.get("label", name)
+        input_type = options.get("type")
+
+        def change_handler(value, name=name):
+            on_change(name, value)
+
+        if input_type == "SliderInt":
+            solara.SliderInt(
+                label,
+                value=options.get("value"),
+                on_value=change_handler,
+                min=options.get("min"),
+                max=options.get("max"),
+                step=options.get("step"),
+            )
+        elif input_type == "SliderFloat":
+            solara.SliderFloat(
+                label,
+                value=options.get("value"),
+                on_value=change_handler,
+                min=options.get("min"),
+                max=options.get("max"),
+                step=options.get("step"),
+            )
+        elif input_type == "Select":
+            solara.Select(
+                label,
+                value=options.get("value"),
+                on_value=change_handler,
+                values=options.get("values"),
+            )
+        else:
+            raise ValueError(f"{input_type} is not a supported input type")
 
 
 def make_space(model, agent_portrayal):

tests/test_jupyter_viz.py

@@ -1,53 +1,71 @@
 import unittest
 from unittest.mock import Mock, patch
 
+import ipyvuetify as vw
 import solara
 
-from mesa.experimental.jupyter_viz import JupyterViz, make_user_input
+from mesa.experimental.jupyter_viz import JupyterViz, UserInputs
 
 
 class TestMakeUserInput(unittest.TestCase):
     def test_unsupported_type(self):
+        @solara.component
+        def Test(user_params):
+            UserInputs(user_params)
+
         """unsupported input type should raise ValueError"""
         # bogus type
         with self.assertRaisesRegex(ValueError, "not a supported input type"):
-            make_user_input(10, "input", {"type": "bogus"})
+            solara.render(Test({"mock": {"type": "bogus"}}), handle_error=False)
+
         # no type is specified
         with self.assertRaisesRegex(ValueError, "not a supported input type"):
-            make_user_input(10, "input", {})
+            solara.render(Test({"mock": {}}), handle_error=False)
+
+    def test_slider_int(self):
+        @solara.component
+        def Test(user_params):
+            UserInputs(user_params)
 
-    @patch("mesa.experimental.jupyter_viz.solara")
-    def test_slider_int(self, mock_solara):
-        value = 10
-        name = "num_agents"
         options = {
             "type": "SliderInt",
+            "value": 10,
             "label": "number of agents",
             "min": 10,
             "max": 20,
             "step": 1,
         }
-        make_user_input(value, name, options)
-        mock_solara.SliderInt.assert_called_with(
-            options["label"],
-            value=value,
-            min=options["min"],
-            max=options["max"],
-            step=options["step"],
-        )
+        user_params = {"num_agents": options}
+        _, rc = solara.render(Test(user_params), handle_error=False)
+        slider_int = rc.find(vw.Slider).widget
+
+        assert slider_int.v_model == options["value"]
+        assert slider_int.label == options["label"]
+        assert slider_int.min == options["min"]
+        assert slider_int.max == options["max"]
+        assert slider_int.step == options["step"]
 
-    @patch("mesa.experimental.jupyter_viz.solara")
-    def test_label_fallback(self, mock_solara):
+    def test_label_fallback(self):
         """name should be used as fallback label"""
-        value = 10
-        name = "num_agents"
+
+        @solara.component
+        def Test(user_params):
+            UserInputs(user_params)
+
         options = {
             "type": "SliderInt",
+            "value": 10,
         }
-        make_user_input(value, name, options)
-        mock_solara.SliderInt.assert_called_with(
-            name, value=value, min=None, max=None, step=None
-        )
+
+        user_params = {"num_agents": options}
+        _, rc = solara.render(Test(user_params), handle_error=False)
+        slider_int = rc.find(vw.Slider).widget
+
+        assert slider_int.v_model == options["value"]
+        assert slider_int.label == "num_agents"
+        assert slider_int.min is None
+        assert slider_int.max is None
+        assert slider_int.step is None
 
 
 class TestJupyterViz(unittest.TestCase):