Update Conway example (#2403)

* add solara app

* Update Readme.md

* cleanup

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: quaquel

mesa/examples/basic/conways_game_of_life/Readme.md

@@ -9,26 +9,30 @@ The "game" is a zero-player game, meaning that its evolution is determined by it
 
 ## How to Run
 
-To run the model interactively, run ``mesa runserver`` in this directory. e.g.
+To run the model interactively you can use either the streamlit or solara version. For solara, you use
 
 ```
-    $ mesa runserver
+    $ solara run app.py
 ```
 
-Then open your browser to [http://127.0.0.1:8521/](http://127.0.0.1:8521/) and press ``run``.
+For streamlit, you need
+
+```
+    $ streamlit run st_app.py
+```
+
+This will open your browser and show you the controls. You can start the model by hitting the run button.
 
 ## Files
 
 * ``agents.py``: Defines the behavior of an individual cell, which can be in two states: DEAD or ALIVE.
 * ``model.py``: Defines the model itself, initialized with a random configuration of alive and dead cells.
-* ``portrayal.py``: Describes for the front end how to render a cell.
+* ``app.py``: Defines an interactive visualization using solara.
 * ``st_app.py``: Defines an interactive visualization using Streamlit.
 
 ## Optional
 
-*  ``conways_game_of_life/st_app.py``: can be used to run the simulation via the streamlit interface.
-* For this some additional packages like ``streamlit`` and ``altair`` needs to be installed.
-* Once installed, the app can be opened in the browser using : ``streamlit run st_app.py``
+* For the streamlit version, you need to have streamlit installed (can be done via pip install streamlit)
 
 
 ## Further Reading

mesa/examples/basic/conways_game_of_life/app.py

@@ -1,72 +1,39 @@
-import time
-
-import altair as alt
-import numpy as np
-import pandas as pd
-import streamlit as st
-
 from mesa.examples.basic.conways_game_of_life.model import ConwaysGameOfLife
-
-model = st.title("Conway's Game of Life")
-num_ticks = st.slider("Select number of Steps", min_value=1, max_value=100, value=50)
-height = st.slider("Select Grid Height", min_value=10, max_value=100, step=10, value=15)
-width = st.slider("Select Grid Width", min_value=10, max_value=100, step=10, value=20)
-model = ConwaysGameOfLife(height, width)
-
-col1, col2, col3 = st.columns(3)
-status_text = st.empty()
-# step_mode = st.checkbox('Run Step-by-Step')
-run = st.button("Run Simulation")
-
-
-if run:
-    tick = time.time()
-    step = 0
-    # init grid
-    df_grid = pd.DataFrame()
-    agent_counts = np.zeros((model.grid.width, model.grid.height))
-    for x in range(width):
-        for y in range(height):
-            df_grid = pd.concat(
-                [df_grid, pd.DataFrame({"x": [x], "y": [y], "state": [0]})],
-                ignore_index=True,
-            )
-
-    heatmap = (
-        alt.Chart(df_grid)
-        .mark_point(size=100)
-        .encode(x="x", y="y", color=alt.Color("state"))
-        .interactive()
-        .properties(width=800, height=600)
-    )
-
-    # init progress bar
-    my_bar = st.progress(0, text="Simulation Progress")  # progress
-    placeholder = st.empty()
-    st.subheader("Agent Grid")
-    chart = st.altair_chart(heatmap, use_container_width=True)
-    color_scale = alt.Scale(domain=[0, 1], range=["red", "yellow"])
-    for i in range(num_ticks):
-        model.step()
-        my_bar.progress((i / num_ticks), text="Simulation progress")
-        placeholder.text("Step = %d" % i)
-        for contents, (x, y) in model.grid.coord_iter():
-            # print('x:',x,'y:',y, 'state:',contents)
-            selected_row = df_grid[(df_grid["x"] == x) & (df_grid["y"] == y)]
-            df_grid.loc[selected_row.index, "state"] = (
-                contents.state
-            )  # random.choice([1,2])
-
-        heatmap = (
-            alt.Chart(df_grid)
-            .mark_circle(size=100)
-            .encode(x="x", y="y", color=alt.Color("state", scale=color_scale))
-            .interactive()
-            .properties(width=800, height=600)
-        )
-        chart.altair_chart(heatmap)
-
-        time.sleep(0.1)
-
-    tock = time.time()
-    st.success(f"Simulation completed in {tock - tick:.2f} secs")
+from mesa.visualization import (
+    SolaraViz,
+    make_space_matplotlib,
+)
+
+
+def agent_portrayal(agent):
+    return {"color": "white" if agent.state == 0 else "black"}
+
+
+model_params = {
+    "width": 50,
+    "height": 50,
+}
+
+# Create initial model instance
+model1 = ConwaysGameOfLife(50, 50)
+
+# Create visualization elements. The visualization elements are solara components
+# that receive the model instance as a "prop" and display it in a certain way.
+# Under the hood these are just classes that receive the model instance.
+# You can also author your own visualization elements, which can also be functions
+# that receive the model instance and return a valid solara component.
+SpaceGraph = make_space_matplotlib(agent_portrayal)
+
+
+# Create the SolaraViz page. This will automatically create a server and display the
+# visualization elements in a web browser.
+# Display it using the following command in the example directory:
+# solara run app.py
+# It will automatically update and display any changes made to this file
+page = SolaraViz(
+    model1,
+    components=[SpaceGraph],
+    model_params=model_params,
+    name="Game of Life",
+)
+page  # noqa

mesa/examples/basic/conways_game_of_life/portrayal.py

@@ -0,0 +1,72 @@
+import time
+
+import altair as alt
+import numpy as np
+import pandas as pd
+import streamlit as st
+
+from mesa.examples.basic.conways_game_of_life.model import ConwaysGameOfLife
+
+model = st.title("Conway's Game of Life")
+num_ticks = st.slider("Select number of Steps", min_value=1, max_value=100, value=50)
+height = st.slider("Select Grid Height", min_value=10, max_value=100, step=10, value=15)
+width = st.slider("Select Grid Width", min_value=10, max_value=100, step=10, value=20)
+model = ConwaysGameOfLife(height, width)
+
+col1, col2, col3 = st.columns(3)
+status_text = st.empty()
+# step_mode = st.checkbox('Run Step-by-Step')
+run = st.button("Run Simulation")
+
+
+if run:
+    tick = time.time()
+    step = 0
+    # init grid
+    df_grid = pd.DataFrame()
+    agent_counts = np.zeros((model.grid.width, model.grid.height))
+    for x in range(width):
+        for y in range(height):
+            df_grid = pd.concat(
+                [df_grid, pd.DataFrame({"x": [x], "y": [y], "state": [0]})],
+                ignore_index=True,
+            )
+
+    heatmap = (
+        alt.Chart(df_grid)
+        .mark_point(size=100)
+        .encode(x="x", y="y", color=alt.Color("state"))
+        .interactive()
+        .properties(width=800, height=600)
+    )
+
+    # init progress bar
+    my_bar = st.progress(0, text="Simulation Progress")  # progress
+    placeholder = st.empty()
+    st.subheader("Agent Grid")
+    chart = st.altair_chart(heatmap, use_container_width=True)
+    color_scale = alt.Scale(domain=[0, 1], range=["red", "yellow"])
+    for i in range(num_ticks):
+        model.step()
+        my_bar.progress((i / num_ticks), text="Simulation progress")
+        placeholder.text("Step = %d" % i)
+        for contents, (x, y) in model.grid.coord_iter():
+            # print('x:',x,'y:',y, 'state:',contents)
+            selected_row = df_grid[(df_grid["x"] == x) & (df_grid["y"] == y)]
+            df_grid.loc[selected_row.index, "state"] = (
+                contents.state
+            )  # random.choice([1,2])
+
+        heatmap = (
+            alt.Chart(df_grid)
+            .mark_circle(size=100)
+            .encode(x="x", y="y", color=alt.Color("state", scale=color_scale))
+            .interactive()
+            .properties(width=800, height=600)
+        )
+        chart.altair_chart(heatmap)
+
+        time.sleep(0.1)
+
+    tock = time.time()
+    st.success(f"Simulation completed in {tock - tick:.2f} secs")