docs update code in viz_folder

solara/website/pages/documentation/components/viz/echarts.py

@@ -53,25 +53,26 @@
 
 @solara.component
 def Page():
-    option, set_option = solara.use_state("bars")
-    click_data, set_click_data = solara.use_state(None)
-    mouseover_data, set_mouseover_data = solara.use_state(None)
-    mouseout_data, set_mouseout_data = solara.use_state(None)
+    option = solara.use_reactive("bars")
+    click_data = solara.use_reactive(None)
+    mouseover_data = solara.use_reactive(None)
+    mouseout_data = solara.use_reactive(None)
 
-    with solara.VBox() as main:
-        with solara.Card("Echarts"):
-            with solara.ToggleButtonsSingle("bars", on_value=set_option):
-                solara.Button("bars")
-                solara.Button("pie")
-            solara.FigureEcharts(
-                option=options[option], on_click=set_click_data, on_mouseover=set_mouseover_data, on_mouseout=set_mouseout_data, responsive=True
-            )
-        with solara.Card("Event data"):
-            solara.Markdown(f"**Click data**: {click_data}")
-            solara.Markdown(f"**Mouseover data**: {mouseover_data}")
-            solara.Markdown(f"**Mouseout data**: {mouseout_data}")
-
-    return main
+    with solara.Card("Echarts"):
+        with solara.ToggleButtonsSingle(value=option.value, on_value=lambda data: setattr(option, "value", data)):
+            solara.Button("bars", value="bars")
+            solara.Button("pie", value="pie")
+        solara.FigureEcharts(
+            option=options[option.value],
+            on_click=lambda e: setattr(click_data, "value", e),
+            on_mouseover=lambda e: setattr(mouseover_data, "value", e),
+            on_mouseout=lambda e: setattr(mouseout_data, "value", e),
+            responsive=True,
+        )
+    with solara.Card("Event data"):
+        solara.Markdown(f"**Click data**: {click_data.value}")
+        solara.Markdown(f"**Mouseover data**: {mouseover_data.value}")
+        solara.Markdown(f"**Mouseout data**: {mouseout_data.value}")
 
 
 __doc__ += apidoc(solara.FigureEcharts.f)  # type: ignore

solara/website/pages/documentation/components/viz/matplotlib.py

@@ -11,20 +11,18 @@
 
 @solara.component
 def Page():
-    freq, set_freq = solara.use_state(2.0)
-    phase, set_phase = solara.use_state(0.1)
+    freq = solara.use_reactive(2.0)
+    phase = solara.use_reactive(0.1)
     y = np.sin(x * freq + phase)
 
     fig = Figure()
     ax = fig.subplots()
     ax.plot(x, y)
     ax.set_ylim(-1.2, 1.2)
 
-    with solara.VBox() as main:
-        solara.FloatSlider("Frequency", value=freq, on_value=set_freq, min=0, max=10)
-        solara.FloatSlider("Phase", value=phase, on_value=set_phase, min=0, max=np.pi, step=0.1)
-        solara.FigureMatplotlib(fig, dependencies=[freq, phase])
-    return main
+    solara.FloatSlider("Frequency", value=freq.value, on_value=lambda v: setattr(freq, "value", v), min=0, max=10)
+    solara.FloatSlider("Phase", value=phase.value, on_value=lambda v: setattr(phase, "value", v), min=0, max=np.pi, step=0.1)
+    solara.FigureMatplotlib(fig, dependencies=[freq, phase])
 
 
 __doc__ += apidoc(solara.FigureMatplotlib.f)  # type: ignore

solara/website/pages/documentation/components/viz/plotly.py

@@ -18,46 +18,54 @@
 
 @solara.component
 def Page():
-    with solara.VBox() as main:
-        selection_data, set_selection_data = solara.use_state(None)
-        click_data, set_click_data = solara.use_state(None)
-        hover_data, set_hover_data = solara.use_state(None)
-        unhover_data, set_unhover_data = solara.use_state(None)
-        deselect_data, set_deselect_data = solara.use_state(None)
-        fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species")
-        solara.FigurePlotly(
-            fig, on_selection=set_selection_data, on_click=set_click_data, on_hover=set_hover_data, on_unhover=set_unhover_data, on_deselect=set_deselect_data
-        )
-
-        solara.Markdown(
-            f"""
+    state = solara.use_reactive(
+        {
+            "selection_data": None,
+            "click_data": None,
+            "hover_data": None,
+            "unhover_data": None,
+            "deselect_data": None,
+        }
+    )
+
+    fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species")
+    solara.FigurePlotly(
+        fig,
+        on_selection=lambda data: state.set({**state.value, "selection_data": data}),
+        on_click=lambda data: state.set({**state.value, "click_data": data}),
+        on_hover=lambda data: state.set({**state.value, "hover_data": data}),
+        on_unhover=lambda data: state.set({**state.value, "unhover_data": data}),
+        on_deselect=lambda data: state.set({**state.value, "deselect_data": data}),
+    )
+
+    solara.Markdown(
+        f"""
 # Events data
 ## selection
 ```
-{selection_data}
+{state.value['selection_data']}
 ```
 
 ## click
 ```
-{click_data}
+{state.value['click_data']}
 ```
 
 ## hover
 ```
-{hover_data}
+{state.value['hover_data']}
 ```
 
 ## unhover
 ```
-{unhover_data}
+{state.value['unhover_data']}
 ```
 
 ## deselect
 ```
-{deselect_data}
+{state.value['deselect_data']}
 ```
 
 
 """
-        )
-    return main
+    )

solara/website/pages/documentation/components/viz/plotly_express.py

@@ -34,8 +34,6 @@ def Page():
     fig = px.histogram(df, "species")
     fig.update_layout(dragmode="select", selectdirection="h")
 
-    with solara.VBox() as main:
-        spx.scatter(df, x="sepal_width", y="sepal_length", color="species")
-        spx.scatter_3d(df, x="sepal_width", y="sepal_length", z="petal_width")
-        spx.CrossFilteredFigurePlotly(fig)
-    return main
+    spx.scatter(df, x="sepal_width", y="sepal_length", color="species")
+    spx.scatter_3d(df, x="sepal_width", y="sepal_length", z="petal_width")
+    spx.CrossFilteredFigurePlotly(fig)