solara-ui 1.45.0__py3-none-any.whl

solara/website/pages/documentation/examples/ipycanvas.py

@@ -0,0 +1,49 @@
+# Disabled, sometimes crashes the webpage.
+# import ipycanvas
+# import numpy as np
+# import solara
+# from reacton import ipycanvas as c
+# from reacton import ipywidgets as w
+
+
+# def polygon(canvas, x, y, radius1, radius2, n_points):
+#     index = np.arange(n_points)
+#     angles = (2 * np.pi / n_points) * index
+
+#     radius = np.where(index % 2, radius1, radius2)
+#     v_x = x + np.cos(angles) * radius
+#     v_y = y + np.sin(angles) * radius
+
+#     points = np.stack((v_x, v_y), axis=1)
+
+#     canvas.fill_polygon(points)
+#     canvas.stroke_polygon(points)
+
+
+# @solara.component
+# def Page():
+#     width, height = 800, 800
+#     view_count, set_view_count = solara.use_state(0)
+#     with w.ViewcountVBox(set_view_count) as main:
+#         fill = w.color("#63934e", "fill color")
+#         stroke = w.color("#4e6393", "stroke color")
+#         line_width = w.slider_int(4, description="line width", min=0, max=30)
+#         n_points = w.slider_int(5, "Points", min=1, max=8) * 2
+#         radius_inner = w.slider_float(30, "Inner radius", min=0, max=100)
+#         radius_outer = w.slider_float(80, "Outer radius", min=0, max=100)
+
+#         def real_drawing():
+#             canvas: ipycanvas.Canvas = solara.core.get_widget(canvas_element)
+
+#             with ipycanvas.hold_canvas(canvas):
+#                 canvas.clear()
+#                 canvas.fill_style = fill
+#                 canvas.stroke_style = stroke
+#                 canvas.line_width = line_width
+#                 radius = width // 3
+#                 polygon(canvas, width // 2, height // 2, radius * radius_inner / 100, radius * radius_outer / 100, n_points)
+
+#         solara.use_effect(real_drawing, [fill, stroke, line_width, n_points, view_count, radius_inner, radius_outer])
+#         canvas_element = c.Canvas(width=width, height=height)
+
+#     return main

solara/website/pages/documentation/examples/libraries/__init__.py

@@ -0,0 +1,10 @@
+"""ipywidget library example"""
+
+import solara
+
+redirect = None
+
+
+@solara.component
+def Page():
+    return solara.Markdown("Should not see me")

solara/website/pages/documentation/examples/libraries/altair.py

@@ -0,0 +1,65 @@
+"""# Altair
+
+[Altair](https://altair-viz.github.io/index.html) is a declarative statistical visualization library for Python.
+
+This example show how to use the [on_click handler](/documentation/components/viz/altair) to display data for a specific day in the chart.
+
+Based on [an Altair example](https://altair-viz.github.io/gallery/annual_weather_heatmap.html)
+
+"""
+
+import altair as alt
+import pandas as pd
+import solara
+from vega_datasets import data
+
+# title = "Altair visualization"
+source = data.seattle_weather()
+
+selected_datum = solara.reactive(None)
+
+
+@solara.component
+def Page():
+    def on_click(datum):
+        selected_datum.value = datum
+
+    chart = (
+        alt.Chart(source, title="Daily Max Temperatures (C) in Seattle, WA")
+        .mark_rect()
+        .encode(
+            alt.X("date(date):O").title("Day").axis(format="%e", labelAngle=0),
+            alt.Y("month(date):O").title("Month"),
+            alt.Color("max(temp_max)").title(None),
+            tooltip=[
+                alt.Tooltip("monthdate(date)", title="Date"),
+                alt.Tooltip("max(temp_max)", title="Max Temp"),
+            ],
+        )
+        .configure_view(step=13, strokeWidth=0)
+        .configure_axis(domain=False)
+        .properties(width="container")
+    )
+    with solara.Card("Annual Weather Heatmap for Seattle, WA"):
+        solara.AltairChart(chart, on_click=on_click)
+        df = source
+        if selected_datum.value:
+            month_date = selected_datum.value["monthdate_date_end"]
+            dt = pd.to_datetime(month_date)
+            df = df[(df["date"].dt.month == dt.month) & (df["date"].dt.day == dt.day)]
+            solara.Markdown(f"Day of year: {dt.month_name()} - {dt.day}")
+            solara.Button("Clear selection", on_click=lambda: selected_datum.set(None))
+            solara.display(df)
+
+            with solara.Details("Click data"):
+                solara.Markdown(
+                    f"""
+                Click data:
+
+                ```
+                {selected_datum.value}
+                ```
+                """
+                )
+        else:
+            solara.Markdown("Click on the chart to see data for a specific day")

solara/website/pages/documentation/examples/libraries/bqplot.py

@@ -0,0 +1,39 @@
+"""
+# bqplot
+
+[bqplot](https://github.com/bqplot/bqplot) is a 2-D visualization system for Jupyter, based on the constructs of the Grammar of Graphics.
+"""
+
+import numpy as np
+import reacton.bqplot as bqplot
+
+import solara
+
+x0 = np.linspace(0, 2, 100)
+
+exponent = solara.reactive(1.0)
+log_scale = solara.reactive(False)
+
+
+@solara.component
+def Page(x=x0, ymax=5):
+    y = x**exponent.value
+    color = "red"
+    display_legend = True
+    label = "bqplot graph"
+
+    solara.SliderFloat(value=exponent, min=0.1, max=3, label="Exponent")
+    solara.Checkbox(value=log_scale, label="Log scale")
+
+    x_scale = bqplot.LinearScale()
+    if log_scale.value:
+        y_scale = bqplot.LogScale(min=0.1, max=ymax)
+    else:
+        y_scale = bqplot.LinearScale(min=0, max=ymax)
+
+    lines = bqplot.Lines(x=x, y=y, scales={"x": x_scale, "y": y_scale}, stroke_width=3, colors=[color], display_legend=display_legend, labels=[label])
+    x_axis = bqplot.Axis(scale=x_scale)
+    y_axis = bqplot.Axis(scale=y_scale, orientation="vertical")
+    bqplot.Figure(axes=[x_axis, y_axis], marks=[lines], scale_x=x_scale, scale_y=y_scale, layout={"max_width": "100%", "width": "100%"})
+
+    # return main

solara/website/pages/documentation/examples/libraries/ipyleaflet.py

@@ -0,0 +1,33 @@
+"""
+# ipyleaflet
+Map visualization using [ipyleaflet](https://ipyleaflet.readthedocs.io/), a ipywidgets wrapper for [leaflet.js](https://leafletjs.com/)
+"""
+
+import ipyleaflet
+
+import solara
+
+zoom = solara.reactive(5)
+center = solara.reactive((53.2305799, 6.5323552))
+bounds = solara.reactive(None)
+
+
+@solara.component
+def Page():
+    # Isolation is required to prevent the map from overlapping navigation (when screen width < 960px)
+    with solara.Column(style={"width": "100%", "height": "500px", "isolation": "isolate"}):
+        # solara components support reactive variables
+        solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
+        # using 3rd party widget library require wiring up the events manually
+        # using zoom.value and zoom.set
+        ipyleaflet.Map.element(  # type: ignore
+            zoom=zoom.value,
+            on_zoom=zoom.set,
+            center=center.value,
+            on_center=center.set,
+            on_bounds=bounds.set,
+            scroll_wheel_zoom=True,
+        )
+        solara.Text(f"Zoom: {zoom.value}")
+        solara.Text(f"Center: {center.value}")
+        solara.Text(f"Bounds: {bounds.value}")

solara/website/pages/documentation/examples/libraries/ipyleaflet_advanced.py

@@ -0,0 +1,66 @@
+"""
+# ipyleaflet advanced
+
+Extends the [basic ipyleaflet example](/documentation/examples/libraries/ipyleaflet) with a marker that can be dragged around, and a
+dropdown to select the map style. Two buttons allow to reset the map to the default zoom and center and to zoom
+to the marker.
+"""
+
+import ipyleaflet
+
+import solara
+
+center_default = (53.2305799, 6.5323552)
+zoom_default = 5
+maps = {
+    "OpenStreetMap.Mapnik": ipyleaflet.basemaps.OpenStreetMap.Mapnik,
+    "OpenTopoMap": ipyleaflet.basemaps.OpenTopoMap,
+    "Esri.WorldTopoMap": ipyleaflet.basemaps.Esri.WorldTopoMap,
+}
+
+zoom = solara.reactive(zoom_default)
+center = solara.reactive(center_default)
+marker_location = solara.reactive(center_default)
+
+map_name = solara.reactive(list(maps)[0])
+
+
+@solara.component
+def Page():
+    def location_changed(location):
+        # do things with the location
+        marker_location.set(location)
+
+    with solara.Column(style={"width": "100%", "height": "500px"}):
+        solara.Markdown(f"Market set to: {marker_location.value}", style={"color": "#6e6e6e"})
+
+        map = maps[map_name.value]
+        url = map.build_url()
+
+        def goto_marker():
+            center.value = marker_location.value
+            zoom.value = 13
+
+        def reset_view():
+            center.value = center_default
+            zoom.value = zoom_default
+
+        solara.Select(label="Map", value=map_name, values=list(maps))
+        solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
+        with solara.Row():
+            solara.Button(label="Zoom to marker", on_click=goto_marker)
+            solara.Button(label="Reset view", on_click=reset_view)
+
+        # Isolation is required to prevent the map from overlapping navigation (when screen width < 960px)
+        with solara.Column(style={"isolation": "isolate"}):
+            ipyleaflet.Map.element(  # type: ignore
+                zoom=zoom.value,
+                on_zoom=zoom.set,
+                center=center.value,
+                on_center=center.set,
+                scroll_wheel_zoom=True,
+                layers=[
+                    ipyleaflet.TileLayer.element(url=url),
+                    ipyleaflet.Marker.element(location=marker_location.value, draggable=True, on_location=location_changed),
+                ],
+            )

solara/website/pages/documentation/examples/utilities/__init__.py

@@ -0,0 +1,10 @@
+"""Utility apps, slightly more complex."""
+
+import solara
+
+redirect = None
+
+
+@solara.component
+def Page():
+    return solara.Markdown("Should not see me")

solara/website/pages/documentation/examples/utilities/calculator.py

@@ -0,0 +1,157 @@
+"""# Calculator
+
+This shows how to use `use_reducer` to implement a simple calculator.
+
+Note that the `reducer` implements all the logic of the calculator, and the `Calculator` component is just a thin wrapper around it.
+
+
+
+"""
+
+import ast
+import dataclasses
+import operator
+from typing import Any, Optional
+
+import solara
+
+DEBUG = False
+operator_map = {
+    "x": operator.mul,
+    "/": operator.truediv,
+    "+": operator.add,
+    "-": operator.sub,
+}
+
+
+@dataclasses.dataclass(frozen=True)
+class CalculatorState:
+    input: str = ""
+    output: str = ""
+    left: float = 0
+    right: Optional[float] = None
+    operator: Any = operator.add
+    error: str = ""
+
+
+initial_state = CalculatorState()
+
+
+def calculate(state: CalculatorState):
+    result = state.operator(state.left, state.right)
+    return dataclasses.replace(state, left=result)
+
+
+def calculator_reducer(state: CalculatorState, action):
+    action_type, payload = action
+    if DEBUG:
+        print("reducer", state, action_type, payload)  # noqa
+    state = dataclasses.replace(state, error="")
+
+    if action_type == "digit":
+        digit = payload
+        input = state.input + digit
+        return dataclasses.replace(state, input=input, output=input)
+    elif action_type == "percent":
+        if state.input:
+            try:
+                value = ast.literal_eval(state.input)
+            except Exception as e:
+                return dataclasses.replace(state, error=str(e))
+            state = dataclasses.replace(state, right=value / 100)
+            state = calculate(state)
+            output = f"{value / 100:,}"
+            return dataclasses.replace(state, output=output, input="")
+        else:
+            output = f"{state.left / 100:,}"
+            return dataclasses.replace(state, left=state.left / 100, output=output)
+    elif action_type == "negate":
+        if state.input:
+            input = state.output
+            input = input[1:] if input[0] == "-" else "-" + input
+            output = input
+            return dataclasses.replace(state, input=input, output=output)
+        else:
+            output = f"{-state.left:,}"
+            return dataclasses.replace(state, left=-state.left, output=output)
+    elif action_type == "clear":
+        return dataclasses.replace(state, input="", output="")
+    elif action_type == "reset":
+        return initial_state
+    elif action_type == "calculate":
+        if state.input:
+            try:
+                value = ast.literal_eval(state.input)
+            except Exception as e:
+                return dataclasses.replace(state, error=str(e))
+            state = dataclasses.replace(state, right=value)
+        state = calculate(state)
+        output = f"{state.left:,}"
+        state = dataclasses.replace(state, output=output, input="")
+        return state
+    elif action_type == "operator":
+        if state.input:
+            state = calculator_reducer(state, ("calculate", None))
+            state = dataclasses.replace(state, operator=payload, input="")
+        else:
+            # e.g. 2+3=*= should give 5,25
+            state = dataclasses.replace(state, operator=payload, right=state.left)
+        return state
+    else:
+        print("invalid action", action)  # noqa
+        return state
+
+
+@solara.component
+def Calculator():
+    state, dispatch = solara.use_reducer(calculator_reducer, initial_state)
+    if DEBUG:
+        print("->", state)  # noqa
+    with solara.Card("Calculator", elevation=10, classes=["ma-4"]) as main:
+        with solara.VBox(grow=False):
+            solara.Text(state.error or state.output or "0")
+            class_ = "pa-0 ma-1"
+
+            with solara.HBox(grow=False):
+                if state.input:
+                    solara.Button("C", on_click=lambda: dispatch(("clear", None)), dark=True, class_=class_)
+                else:
+                    solara.Button("AC", on_click=lambda: dispatch(("reset", None)), dark=True, class_=class_)
+                solara.Button("+/-", on_click=lambda: dispatch(("negate", None)), dark=True, class_=class_)
+                solara.Button("%", on_click=lambda: dispatch(("percent", None)), dark=True, class_=class_)
+                solara.Button("/", color="primary", on_click=lambda: dispatch(("operator", operator_map["/"])), class_=class_)
+
+            column_op = ["x", "-", "+"]
+            for i in range(3):
+                with solara.HBox(grow=False):
+                    for j in range(3):
+                        digit = str(j + (2 - i) * 3 + 1)
+
+                        def on_click(digit=digit):
+                            dispatch(("digit", digit))
+
+                        solara.Button(digit, on_click=on_click, class_=class_)
+                    op_symbol = column_op[i]
+                    op = operator_map[op_symbol]
+
+                    def on_click_op(op=op):
+                        dispatch(("operator", op))
+
+                    solara.Button(op_symbol, color="primary", on_click=on_click_op, class_=class_)
+            with solara.HBox(grow=False):
+
+                def boom():
+                    print("boom")  # noqa
+                    raise ValueError("lala")
+
+                solara.Button("?", on_click=boom, class_=class_)
+
+                solara.Button("0", on_click=lambda: dispatch(("digit", "0")), class_=class_)
+                solara.Button(".", on_click=lambda: dispatch(("digit", ".")), class_=class_)
+
+                solara.Button("=", color="primary", on_click=lambda: dispatch(("calculate", None)), class_=class_)
+
+    return main
+
+
+Page = Calculator

solara/website/pages/documentation/examples/utilities/countdown_timer.py

@@ -0,0 +1,62 @@
+"""# Countdown timer.
+
+This example shows how to use [use_thread](/documentation/api/hooks/use_thread) to create a countdown timer.
+
+The UI code demonstrates a lot of conditional rendering.
+
+"""
+
+import time
+
+import solara
+
+
+@solara.component
+def Page():
+    seconds, set_seconds = solara.use_state(5)
+    running, set_running = solara.use_state(False)
+    duration, set_duration = solara.use_state(seconds)
+
+    def on_duration(duration):
+        try:
+            set_duration(int(duration))
+            set_seconds(int(duration))
+        except ValueError:
+            pass
+
+    def run_timer():
+        if running:
+            time_start = time.time()
+            next_tick = time_start + 1
+            i = seconds
+            while i:
+                # instead of sleeping for 1 second, we sleep until the next second
+                # this takes into account overhead and makes the timer more accurate
+                time.sleep(max(0, next_tick - time.time()))
+                i -= 1
+                set_seconds(i)
+                next_tick += 1
+            set_running(False)
+
+    solara.use_thread(run_timer, dependencies=[duration, running])
+
+    if not running:
+        if duration < 1:
+            solara.Error("Duration must be at least 1 second")
+        else:
+            solara.Markdown(f"# Timer set to {seconds} seconds")
+    else:
+        if seconds:
+            solara.Markdown(f"# {seconds} seconds left")
+        else:
+            solara.solara.Markdown("# Time's up!")
+
+    solara.v.TextField(type="number", v_model=duration, on_v_model=on_duration, disabled=running)
+    with solara.Row():
+        if running:
+            solara.Button("Stop", on_click=lambda: set_running(False), icon_name="mdi-stop")
+        else:
+            if duration != seconds:
+                solara.Button("Reset", on_click=lambda: set_seconds(duration), icon_name="mdi-restart")
+            else:
+                solara.Button("Start", on_click=lambda: set_running(True), icon_name="mdi-play", disabled=seconds < 1)

solara/website/pages/documentation/examples/utilities/todo.py

@@ -0,0 +1,196 @@
+"""# Todo application
+
+Demonstrates the use of reactive variables in combinations with dataclasses.
+
+With solara we can get a type safe view onto a field in a dataclass, pydantic model, or
+attr object.
+
+This is using the experimental `solara.lab.Ref` class, which is not yet part of the
+official API.
+
+
+```python
+import dataclasses
+import solara
+from solara.lab import Ref
+
+@dataclasses.dataclass(frozen=True)
+class TodoItem:
+    text: str
+    done: bool
+
+todo_item = solara.reactive(TodoItem("Buy milk", False))
+
+# now text is a reactive variable that is always in sync with todo_item.text
+text = Ref(todo_item.fields.text)
+
+
+# we can now modify the reactive text variable
+# and see its value reflect in the todo_item
+text.value = "Buy skimmed milk"
+assert todo_item.value.text == "Buy skimmed milk"
+
+# Or, the other way around
+todo_item.value = TodoItem("Buy whole milk", False)
+assert text.value == "Buy whole milk"
+```
+
+Apart from dataclasses, pydantic models etc, we also supports dictionaries and lists.
+
+```python
+todo_items = solara.reactive([TodoItem("Buy milk", False), TodoItem("Buy eggs", False)])
+todo_item_eggs = Ref(todo_items.fields[1])
+todo_item_eggs.value = TodoItem("Buy eggs", True)
+assert todo_items.value[1].done == True
+
+# However, if a list becomes shorter, and the valid index is now out of range, the
+# reactive variables will act as if it is "not connected", and will not trigger
+# updates anymore. Accessing the value will raise an IndexError.
+
+todo_items.value = [TodoItem("Buy milk", False)]
+# anyone listening to todo_item_eggs will *not* be notified.
+try:
+    value = todo_item_eggs.value
+except IndexError:
+    print("this is expected")
+else:
+    raise AssertionError("Expected an IndexError")
+```
+
+"""
+
+import dataclasses
+from typing import Callable
+
+import reacton.ipyvuetify as v
+
+import solara
+from solara.lab.toestand import Ref
+
+
+# our model for a todo item, immutable/frozen avoids common bugs
+@dataclasses.dataclass(frozen=True)
+class TodoItem:
+    text: str
+    done: bool
+
+
+@solara.component
+def TodoEdit(todo_item: solara.Reactive[TodoItem], on_delete: Callable[[], None], on_close: Callable[[], None]):
+    """Takes a reactive todo item and allows editing it. Will not modify the original item until 'save' is clicked."""
+    copy = solara.use_reactive(todo_item.value)
+
+    def save():
+        todo_item.value = copy.value
+        on_close()
+
+    with solara.Card("Edit", margin=0):
+        solara.InputText(label="", value=Ref(copy.fields.text))
+        with solara.CardActions():
+            v.Spacer()
+            solara.Button("Save", icon_name="mdi-content-save", on_click=save, outlined=True, text=True)
+            solara.Button("Close", icon_name="mdi-window-close", on_click=on_close, outlined=True, text=True)
+            solara.Button("Delete", icon_name="mdi-delete", on_click=on_delete, outlined=True, text=True)
+
+
+@solara.component
+def TodoListItem(todo_item: solara.Reactive[TodoItem], on_delete: Callable[[TodoItem], None]):
+    """Displays a single todo item, modifications are done 'in place'.
+
+    For demonstration purposes, we allow editing the item in a dialog as well.
+    This will not modify the original item until 'save' is clicked.
+    """
+    edit, set_edit = solara.use_state(False)
+    with v.ListItem():
+        solara.Button(icon_name="mdi-delete", icon=True, on_click=lambda: on_delete(todo_item.value))
+        solara.Checkbox(value=Ref(todo_item.fields.done))  # , color="success")
+        solara.InputText(label="", value=Ref(todo_item.fields.text))
+        solara.Button(icon_name="mdi-pencil", icon=True, on_click=lambda: set_edit(True))
+        with v.Dialog(v_model=edit, persistent=True, max_width="500px", on_v_model=set_edit):
+            if edit:  # 'reset' the component state on open/close
+
+                def on_delete_in_edit():
+                    on_delete(todo_item.value)
+                    set_edit(False)
+
+                TodoEdit(todo_item, on_delete=on_delete_in_edit, on_close=lambda: set_edit(False))
+
+
+@solara.component
+def TodoNew(on_new: Callable[[TodoItem], None]):
+    """Component that managed entering new todo items"""
+    new_text, set_new_text = solara.use_state("")
+    text_field = v.TextField(v_model=new_text, on_v_model=set_new_text, label="Enter a new todo item")
+
+    def create_new_item(*ignore_args):
+        if not new_text:
+            return
+        new_item = TodoItem(text=new_text, done=False)
+        on_new(new_item)
+        # reset text
+        set_new_text("")
+
+    v.use_event(text_field, "keydown.enter", create_new_item)
+    return text_field
+
+
+initial_items = [
+    TodoItem("Learn Solara", done=True),
+    TodoItem("Write cool apps", done=False),
+    TodoItem("Relax", done=False),
+]
+
+
+# We store out reactive state, and our logic in a class for organization
+# purposes, but this is not required.
+# Note that all the above components do not refer to this class, but only
+# to do the Todo items.
+# This means all above components are reusable, and can be used in other
+# places, while the components below use 'application'/'global' state.
+# They are not suited for reuse.
+
+
+class State:
+    todos = solara.reactive(initial_items)
+
+    @staticmethod
+    def on_new(item: TodoItem):
+        State.todos.value = [item] + State.todos.value
+
+    @staticmethod
+    def on_delete(item: TodoItem):
+        new_items = list(State.todos.value)
+        new_items.remove(item)
+        State.todos.value = new_items
+
+
+@solara.component
+def TodoStatus():
+    """Status of our todo list"""
+    items = State.todos.value
+    count = len(items)
+    items_done = [item for item in items if item.done]
+    count_done = len(items_done)
+
+    if count != count_done:
+        with solara.Row():
+            percent = count_done / count * 100
+            solara.ProgressLinear(value=percent)
+        with solara.Row():
+            solara.Text(f"Remaining: {count - count_done}")
+            solara.Text(f"Completed: {count_done}")
+    else:
+        solara.Success("All done, awesome!", dense=True)
+
+
+@solara.component
+def Page():
+    with solara.Card("Todo list", style="min-width: 500px"):
+        TodoNew(on_new=State.on_new)
+        if State.todos.value:
+            TodoStatus()
+            for index, item in enumerate(State.todos.value):
+                todo_item = Ref(State.todos.fields[index])
+                TodoListItem(todo_item, on_delete=State.on_delete)
+        else:
+            solara.Info("No todo items, enter some text above, and hit enter")