refactor: examples into structure, and polish

Author: maartenbreddels

solara/components/__init__.py

@@ -36,3 +36,4 @@
 from .select import Select, SelectMultiple  # noqa: #F401 F403
 from .matplotlib import FigureMatplotlib  # noqa: #F401 F403
 from .echarts import FigureEcharts  # noqa: #F401 F403
+from .figure_altair import FigureAltair, AltairChart  # noqa: #F401 F403

solara/components/figure_altair.py

@@ -0,0 +1,36 @@
+from typing import Any, Callable
+
+import solara
+import solara.widgets
+
+
+@solara.component
+def FigureAltair(
+    chart,
+    on_click: Callable[[Any], None] = None,
+    on_hover: Callable[[Any], None] = None,
+):
+    """Renders an Altair chart using VegaLite.
+
+    ## Arguments
+
+    - chart: Altair chart
+    - on_click: Callback function for click events.
+    - on_hover: Callback function for hover events.
+
+    """
+    import altair as alt
+
+    with alt.renderers.enable("mimetype"):
+        bundle = chart._repr_mimebundle_()[0]
+        key = "application/vnd.vegalite.v4+json"
+        if key not in bundle:
+            raise KeyError(f"{key} not in mimebundle:\n\n{bundle}")
+        spec = bundle[key]
+        return solara.widgets.VegaLite.element(
+            spec=spec, on_click=on_click, listen_to_click=on_click is not None, on_hover=on_hover, listen_to_hover=on_hover is not None
+        )
+
+
+# alias for backward compatibility
+AltairChart = FigureAltair

solara/components/misc.py

@@ -163,21 +163,6 @@ def Padding(size, children=[], grow=True):
     return v.Sheet(class_=f"pa-{size}", style_=style, elevation=0, children=children)
 
 
-@solara.component
-def AltairChart(chart, on_click=None, on_hover=None):
-    import altair as alt
-
-    with alt.renderers.enable("mimetype"):
-        bundle = chart._repr_mimebundle_()[0]
-        key = "application/vnd.vegalite.v4+json"
-        if key not in bundle:
-            raise KeyError(f"{key} not in mimebundle:\n\n{bundle}")
-        spec = bundle[key]
-        return solara.widgets.VegaLite.element(
-            spec=spec, on_click=on_click, listen_to_click=on_click is not None, on_hover=on_hover, listen_to_hover=on_hover is not None
-        )
-
-
 @solara.component
 def FigurePlotly(
     fig,

solara/website/pages/api/__init__.py

@@ -72,6 +72,7 @@ def add(path):
                     add("error")
             with ListItem("Viz", icon_name="mdi-chart-histogram"):
                 with List():
+                    add("altair")
                     add("echarts")
                     add("matplotlib")
                     add("plotly")

solara/website/pages/api/altair.py

@@ -0,0 +1,44 @@
+"""# 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

solara/website/pages/api/matplotlib.py

@@ -3,8 +3,9 @@
 """
 
 import numpy as np
-import solara
 from matplotlib.figure import Figure
+
+import solara
 from solara.website.utils import apidoc
 
 x = np.linspace(0, 2, 100)

solara/website/pages/examples/__init__.py

@@ -1,5 +1,5 @@
-import inspect
-import urllib.parse
+# import inspect
+# import urllib.parse
 
 import solara
 
@@ -14,7 +14,13 @@ def Page():
 
 @solara.component
 def Layout(children):
-    route_current, all_routes = solara.use_route()
+    # TODO: this is using a private API, what is the best way to do this?
+    # we want to 'eat' the whole route for the current level, and the level below
+    # for example the utilities directory. But if an example does routing, we don't want
+    # to take on that route.
+    router = solara.use_router()
+    route_current = router.path_routes[-1]
+    # route_current, all_routes = solara.use_route()
 
     if route_current is None:
         return solara.Error("Page not found")
@@ -23,15 +29,20 @@ def Layout(children):
     github_url = solara.util.github_url(module.__file__)
 
     with solara.HBox(grow=False) as main:
-        with solara.VBox(grow=True):
+        with solara.VBox(grow=True, align_items="baseline"):
+            doc = module.__doc__
+            if doc:
+                with solara.VBox(grow=True):
+                    solara.Markdown(doc)
             with solara.HBox():
                 if route_current.path != "/":
-                    solara.Button("View on GitHub", icon_name="mdi-git", href=github_url, class_="ma-2", target="_blank")
-                    code = inspect.getsource(module)
+                    solara.Button("View source code on GitHub", icon_name="mdi-github-circle", href=github_url, class_="ma-2", target="_blank", text=True)
+                    # code = inspect.getsource(module)
 
-                    code_quoted = urllib.parse.quote_plus(code)
-                    url = f"https://test.solara.dev/try?code={code_quoted}"
-                    solara.Button("Run on solara.dev", icon_name="mdi-pencil", href=url, class_="ma-2", target="_blank")
+                    # code_quoted = urllib.parse.quote_plus(code)
+                    # url = f"https://test.solara.dev/try?code={code_quoted}"
+                    # solara.Button("Run on solara.dev", icon_name="mdi-pencil", href=url, class_="ma-2", target="_blank")
+            # with solara.HBox():
             if not hasattr(module, "Page"):
                 solara.Error(f"No Page component found in {module}")
             else:

solara/website/pages/examples/altair.py

@@ -1,9 +1,19 @@
+"""# Interactive sine wave
+
+
+This example shows how to have two slider control a visualization.
+
+"""
+
 import numpy as np
 import plotly.express as px
+
 import solara
 
 x = np.linspace(0, 2, 100)
 
+title = "Interactive sine wave"
+
 
 @solara.component
 def Page():