diff --git a/solara/website/pages/documentation/components/viz/echarts.py b/solara/website/pages/documentation/components/viz/echarts.py index 841f47a31..e9a0ee07b 100644 --- a/solara/website/pages/documentation/components/viz/echarts.py +++ b/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 diff --git a/solara/website/pages/documentation/components/viz/matplotlib.py b/solara/website/pages/documentation/components/viz/matplotlib.py index 06a2faf14..28596e6bb 100644 --- a/solara/website/pages/documentation/components/viz/matplotlib.py +++ b/solara/website/pages/documentation/components/viz/matplotlib.py @@ -11,8 +11,8 @@ @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() @@ -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.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 diff --git a/solara/website/pages/documentation/components/viz/plotly.py b/solara/website/pages/documentation/components/viz/plotly.py index 78ab40bc6..d16933755 100644 --- a/solara/website/pages/documentation/components/viz/plotly.py +++ b/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 + ) diff --git a/solara/website/pages/documentation/components/viz/plotly_express.py b/solara/website/pages/documentation/components/viz/plotly_express.py index 12fb2cb67..e5ef2a026 100644 --- a/solara/website/pages/documentation/components/viz/plotly_express.py +++ b/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)