diff --git a/solara/components/misc.py b/solara/components/misc.py
index 5e6033a3a..5419783a7 100644
--- a/solara/components/misc.py
+++ b/solara/components/misc.py
@@ -300,13 +300,13 @@ def on_points_callback(data):
)
def update_data():
- fig_widget = solara.get_widget(fig_element)
+ fig_widget: FigureWidget = solara.get_widget(fig_element)
fig_widget.layout = fig.layout
+
+ length = len(fig_widget.data)
fig_widget.add_traces(fig.data)
- if hasattr(fig_widget, 'data'):
- length = len(fig_widget.data)
- data = list(fig_widget.data)
- fig_widget.data = data[length:]
+ data = list(fig_widget.data)
+ fig_widget.data = data[length:]
solara.use_effect(update_data, dependencies or fig)
return fig_element
diff --git a/solara/website/pages/__init__.py b/solara/website/pages/__init__.py
index 0e9cccf17..0a90bc077 100644
--- a/solara/website/pages/__init__.py
+++ b/solara/website/pages/__init__.py
@@ -4,7 +4,7 @@
from solara.alias import rv
from solara.components.title import Title
-from ..components import Header, Hero
+#from ..components import Header, Hero
title = "Home"
@@ -85,6 +85,7 @@ def Layout(children=[]):
solara.Meta(property="og:url", content="https://solara.dev" + router.path)
solara.Meta(property="og:image", content="https://solara.dev/static/assets/images/logo-small.png")
solara.Meta(property="og:type", content="website")
+ """
Header(
on_toggle_left_menu=lambda: set_show_left_menu(not show_left_menu),
on_toggle_right_menu=lambda: set_show_right_menu(not show_right_menu),
@@ -95,7 +96,7 @@ def Layout(children=[]):
sub_title="Solara helps you build powerful & scalable Jupyter and web apps faster and easier.",
button_text="Quickstart",
)
-
+"""
with rv.Container(tag="section", fluid=True, ma_0=True, pa_0=True, class_="fill-height mb-8 solara-content-main"):
if route_current is not None and route_current.path == "/":
description = "Use ipywidgets with Solara to build powerful and scalable web apps for Jupyter and production in Python."
diff --git a/solara/website/pages/api/altair.py b/solara/website/pages/api/altair.py
deleted file mode 100644
index 5420391c6..000000000
--- a/solara/website/pages/api/altair.py
+++ /dev/null
@@ -1,44 +0,0 @@
-"""# FigureAltair
-
-"""
-
-import altair as alt
-import pandas as pd
-
-import solara
-from solara.website.utils import apidoc
-
-title = "FigureAltair"
-
-df = pd.DataFrame({"a": ["A", "B", "C", "D", "E", "F", "G", "H", "I"], "b": [28, 55, 43, 91, 81, 53, 19, 87, 52]})
-
-
-@solara.component
-def Page():
- click_data, set_click_data = solara.use_state(None)
- hover_data, set_hover_data = solara.use_state(None)
-
- chart = alt.Chart(df).mark_bar().encode(x="a", y="b")
-
- with solara.Div() as main:
- solara.AltairChart(chart, on_click=set_click_data, on_hover=set_hover_data)
-
- solara.Markdown(
- f"""
-Click data:
-
-```
-{click_data}
-```
-
-Hover data:
-```
-{hover_data}
-```
- """
- )
-
- return main
-
-
-__doc__ += apidoc(solara.FigureAltair.f) # type: ignore
diff --git a/solara/website/pages/examples/visualization/annotator.py b/solara/website/pages/examples/visualization/annotator.py
index 5c39d8338..348050393 100644
--- a/solara/website/pages/examples/visualization/annotator.py
+++ b/solara/website/pages/examples/visualization/annotator.py
@@ -1,6 +1,6 @@
"""# Image annotation with Solara
-This example displays how to annotate images with different drawing tools in plotly figures. Use the canvas
+This example displays how to annotate images with different drawing tools in plotly figures. Use the canvas
below to draw shapes and visualize the canvas callback.
@@ -12,7 +12,7 @@
import solara
title = "Plotly Image Annotator"
-text = solara.reactive('Draw on canvas')
+shapes = solara.reactive(None)
class CustomEncoder(json.JSONEncoder):
def default(self, o):
@@ -24,34 +24,37 @@ def default(self, o):
@solara.component
def Page():
def on_relayout(data):
+ print(data)
if data is None:
return
relayout_data = data['relayout_data']
if "shapes" in relayout_data:
- text.value = str(json.dumps(relayout_data["shapes"], indent=2, cls=CustomEncoder))
-
- with solara.Div() as main:
-
- fig = go.FigureWidget(
- layout=go.Layout(
- showlegend=False,
- autosize=False,
- width=600,
- height=600,
- modebar={
- "add": [
- "drawclosedpath",
- "drawcircle",
- "drawrect",
- "eraseshape",
- ]
- }
- )
+ shapes.value = relayout_data["shapes"]
+
+ fig = go.FigureWidget(
+ layout=go.Layout(
+ showlegend=False,
+ autosize=False,
+ width=600,
+ height=600,
+ modebar={
+ "add": [
+ "drawclosedpath",
+ "drawcircle",
+ "drawrect",
+ "eraseshape",
+ ]
+ }
)
-
- solara.FigurePlotly(fig, on_relayout=on_relayout)
- solara.Preformatted(text.value)
-
- return main
+ )
+
+ solara.FigurePlotly(fig, on_relayout=on_relayout)
+
+ if not shapes.value:
+ solara.Markdown("## Draw on the canvas")
+ else:
+ solara.Markdown("## Data returned by drawing")
+ formatted_shapes = str(json.dumps(shapes.value, indent=2, cls=CustomEncoder))
+ solara.Preformatted(formatted_shapes)
diff --git a/solara/website/pages/examples/visualization/plotly.py b/solara/website/pages/examples/visualization/plotly.py
deleted file mode 100644
index 8ecb7d36f..000000000
--- a/solara/website/pages/examples/visualization/plotly.py
+++ /dev/null
@@ -1,44 +0,0 @@
-"""# Scatter plot using Plotly
-
-This example shows how to use Plotly to create a scatter plot and a slider to do some filtering.
-
-Inspired by the dash documentation.
-
-
-## Note
-
-Solara supports plotly and plotly express. Create your figure (not a figure widget)
-and pass it to the [FigurePlotly](/api/plotly) component.
-
-"""
-import pandas as pd
-import plotly.express as px
-
-import solara
-
-title = "Scatter plot using Plotly"
-
-try:
- df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv")
-except Exception:
- df = None
-
-if df is not None:
- year_min = df["year"].min()
- year_max = df["year"].max()
- years = df["year"].unique().tolist()
-
-
-@solara.component
-def Page():
- with solara.Div() as main:
- index = solara.ui_slider(value=0, min=0, max=len(years) - 1, tick_labels=years, key="year slider index")
- selected_year = years[index]
-
- filtered_df = df[df.year == selected_year].copy()
-
- fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=55)
- fig.update_layout(transition_duration=1500)
-
- solara.FigurePlotly(fig, dependencies=[selected_year])
- return main