solara frontend: Make play/pause work in Colab

Author: rht

experimental/jupyter_viz.py

@@ -1,6 +1,7 @@
 import threading
 
 import matplotlib.pyplot as plt
+import reacton.ipywidgets as widgets
 import solara
 from matplotlib.figure import Figure
 from matplotlib.ticker import MaxNLocator
@@ -155,10 +156,40 @@ def make_model():
     )
 
     # 3. Buttons
+    playing = solara.use_reactive(False)
+
+    def on_value_play(change):
+        if viz.model.running:
+            playing.value = True
+            viz.do_step()
+        else:
+            playing.value = False
+
     with solara.Row():
         solara.Button(label="Step", color="primary", on_click=viz.do_step)
-        solara.Button(label="▶", color="primary", on_click=viz.threaded_do_play)
-        solara.Button(label="⏸︎", color="primary", on_click=viz.do_pause)
+        solara.Style(
+            """
+        .widget-play {
+            height: 30px;
+        }
+        """
+        )
+        widgets.Play(
+            value=0,
+            interval=400,
+            repeat=True,
+            show_repeat=False,
+            on_value=on_value_play,
+            playing=playing.value,
+            on_play=playing.set,
+        )
+        # threaded_do_play is not used for now because it
+        # doesn't work in Google colab. We use
+        # ipywidgets.Play until it is fixed. The threading
+        # version is definite a much better implementation,
+        # if it works.
+        # solara.Button(label="▶", color="primary", on_click=viz.threaded_do_play)
+        # solara.Button(label="⏸︎", color="primary", on_click=viz.do_pause)
         # solara.Button(label="Reset", color="primary", on_click=do_reset)
 
     with solara.GridFixed(columns=2):