solara-ui 1.31.0__py2.py3-none-any.whl

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={"min-width": "500px", "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,64 @@
+"""# 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
+from solara.alias import rv
+
+
+@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])
+
+    with solara.VBox() as main:
+        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!")
+        rv.TextField(type="number", v_model=duration, on_v_model=on_duration, disabled=running)
+        with solara.HBox():
+            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)
+    return main

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")

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

@@ -0,0 +1,6 @@
+import solara
+
+
+@solara.component
+def Page():
+    return solara.Markdown("Click an example on the left")

solara/website/pages/documentation/examples/visualization/annotator.py

@@ -0,0 +1,69 @@
+"""# Image annotation with Solara
+
+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.
+
+
+Check [plotly docs](https://dash.plotly.com/annotations) for more information about image annotation.
+"""
+
+import json
+
+import plotly.graph_objects as go
+
+import solara
+
+title = "Plotly Image Annotator"
+shapes = solara.reactive(None)
+
+
+class CustomEncoder(json.JSONEncoder):
+    """
+    Custom JSON encoder for Plotly objects.
+
+    Plotly may return objects that the standard JSON encoder can't handle. This
+    encoder converts such objects to str, allowing serialization by json.dumps
+    """
+
+    def default(self, o):
+        if isinstance(o, object):
+            return str(o)
+        return super().default(o)
+
+
+@solara.component
+def Page():
+    def on_relayout(data):
+        if data is None:
+            return
+
+        relayout_data = data["relayout_data"]
+
+        if "shapes" in relayout_data:
+            shapes.value = relayout_data["shapes"]
+
+    fig = go.FigureWidget(
+        layout=go.Layout(
+            showlegend=False,
+            autosize=False,
+            width=600,
+            height=600,
+            dragmode="drawrect",
+            modebar={
+                "add": [
+                    "drawclosedpath",
+                    "drawcircle",
+                    "drawrect",
+                    "eraseshape",
+                ]
+            },
+        )
+    )
+
+    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)

solara/website/pages/documentation/examples/visualization/linked_views.py

@@ -0,0 +1,84 @@
+"""# Linked views
+
+This example shows how to create linked views. The clicked row information is passed up to the parent component using an event,
+and then passed down to both child components.
+
+"""
+
+import dataclasses
+from typing import Callable, cast
+
+import plotly.express as px
+
+import solara
+
+df = px.data.iris()
+columns = list(df.columns)
+
+
+@dataclasses.dataclass
+class ClickPoint:
+    row_index: int
+    x_column: str
+    y_column: str
+
+
+def find_row_index(fig, click_data):
+    # goes from trace index and point index to row index in a dataframe
+    # requires passing df.index as to custom_data
+    trace_index = click_data["points"]["trace_indexes"][0]
+    point_index = click_data["points"]["point_indexes"][0]
+    trace = fig.data[trace_index]
+    return trace.customdata[point_index][0]
+
+
+@solara.component
+def ClickScatter(df, x, y, color, click_row, on_click: Callable[[ClickPoint], None]):
+    x, set_x = solara.use_state(x)
+    y, set_y = solara.use_state(y)
+    fig = px.scatter(df, x, y, color=color, custom_data=[df.index])
+
+    def on_click_trace(click_data):
+        # sanity checks
+        assert click_data["event_type"] == "plotly_click"
+        row_index = find_row_index(fig, click_data)
+        on_click(ClickPoint(row_index, x, y))
+
+    if click_row:
+        click_x = df[x].values[click_row]
+        click_y = df[y].values[click_row]
+        fig.add_trace(px.scatter(x=[click_x], y=[click_y], text=["⭐️"]).data[0])
+    # make the figure a bit smaller
+    fig.update_layout(width=400)
+    with solara.VBox() as main:
+        solara.FigurePlotly(fig, on_click=on_click_trace)
+        solara.Select(label="X-axis", value=x, values=columns, on_value=set_x)
+        solara.Select(label="Y-axis", value=y, values=columns, on_value=set_y)
+    return main
+
+
+@solara.component
+def Page():
+    click_point, set_click_point = solara.use_state(cast(ClickPoint, None))
+    if click_point:
+        clicked_row = click_point.row_index
+    else:
+        clicked_row = None
+
+    with solara.VBox() as main:
+        with solara.HBox():
+            ClickScatter(df, "sepal_length", "sepal_width", "species", clicked_row, on_click=set_click_point)
+            ClickScatter(df, "petal_length", "petal_width", "species", clicked_row, on_click=set_click_point)
+        if click_point is not None:
+            clicked_row = click_point.row_index
+            solara.Success(f"Clicked on row {clicked_row}. Which is highlighted in the both plots.")
+            solara.Markdown(
+                f"""
+            ```python
+            row_data = {df.iloc[clicked_row].to_dict()}
+            ```"""
+            )
+        else:
+            solara.Info("Click to select a point")
+
+    return main