docs update code in viz_folder

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

@@ -58,20 +58,15 @@ def Page():
     mouseover_data, set_mouseover_data = solara.use_state(None)
     mouseout_data, set_mouseout_data = solara.use_state(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("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}")
 
 
 __doc__ += apidoc(solara.FigureEcharts.f)  # type: ignore

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

@@ -20,11 +20,9 @@ def Page():
     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, 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])
 
 
 __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.value.update({"selection_data": data}),
+        on_click=lambda data: state.value.update({"click_data": data}),
+        on_hover=lambda data: state.value.update({"hover_data": data}),
+        on_unhover=lambda data: state.value.update({"unhover_data": data}),
+        on_deselect=lambda data: state.value.update({"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)