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

solara/website/pages/documentation/examples/general/custom_storage.py

@@ -0,0 +1,70 @@
+"""# Custom state storage
+
+Solara makes it easy to store state/data on the server side, scoped to a kernel, using [reactive variables](/api/reactive).
+
+However, sometimes you want to store state yourself in an external system (i.e. not Solara), and for this you can use the
+[get_kernel_id()](/api/get_kernel_id) function to get a unique id for each kernel.
+
+If you want to store state/data scoped to a browser session, you can use the [get_session_id()](/api/get_session_id)
+function to get a unique id tied to the users browser. This can be used to store state that outlives a page refresh.
+
+In case you want to store state/data scoped to a user, you can use a similar strategy, but use a unique identifier based on the user,
+instead of the session id. You can take a look at [Our oauth example](examples/general/login_oauth) or
+[the authorization example](/apps/authorization) for inspiration.
+
+"""
+
+from typing import Dict
+
+import solara
+import solara.lab
+
+# used only to force updating of the page
+force_update_counter = solara.reactive(0)
+
+# Kernel storage is scoped to the kernel, and will be cleared when the kernel is stopped.
+kernel_storage: Dict[str, str] = {}
+
+
+def store_in_kernel_storage(value):
+    kernel_storage[solara.get_kernel_id()] = value
+    force_update_counter.value += 1
+
+
+@solara.lab.on_kernel_start
+def initialize_kernel_storage():
+    # when a kernel gets started, we initialize the dict entry
+    kernel_storage[solara.get_kernel_id()] = "This does not"
+
+    def cleanup():
+        # when a kernel gets stopped, we remove the dict entry
+        del kernel_storage[solara.get_kernel_id()]
+
+    # cleaning up kernel storage, we prevent memory leaks
+    return cleanup
+
+
+# session storage has no lifecycle management, and will only be cleared when the server is restarted.
+session_storage: Dict[str, str] = {}
+
+
+def store_in_session_storage(value):
+    session_storage[solara.get_session_id()] = value
+    force_update_counter.value += 1
+
+
+@solara.component
+def Page():
+    solara.InputText(
+        "Stored under the kernel id key",
+        value=kernel_storage[solara.get_kernel_id()],
+        on_value=store_in_kernel_storage,
+        continuous_update=True,
+    )
+
+    solara.InputText(
+        "Stored under the session id key",
+        value=session_storage.get(solara.get_session_id(), "This outlives a page refresh"),
+        on_value=store_in_session_storage,
+        continuous_update=True,
+    )

solara/website/pages/documentation/examples/general/deploy_model.py

@@ -0,0 +1,115 @@
+"""# Deploy model demo
+
+This show off a combination of [solara.lab.Menu](/documentation/components/lab/menu) and
+    [solara.lab.ConfirmationDialog](/documentation/components/lab/confirmation_dialog)
+and [solara.use_thread](/documentation/api/hooks/use_thread) to demonstrate how to tune, fit and deploy a model.
+The actually deployment is not real, but simulated by a thread that returns a boolean value on success and sleep for a while to
+similate the deployment taking time.
+
+ * Right click on the plot to either fit or reset the model parameters.
+ * Clicking on the button shows a custom menu to deploy to several environments.
+ * A confirmation dialog is used before executing the deployment.
+ * If the deployment fails, a confirmation dialog is shown to retry the deployment.
+"""
+
+import time
+
+import numpy as np
+import pandas as pd
+import plotly.express as px
+import solara
+import solara.lab
+
+slope = solara.reactive(1.5)
+intercept = solara.reactive(0.5)
+
+x = np.arange(0, 100, 2) / 10
+# fake data with noise
+y_data = (slope.value * 0.8) * x + (intercept.value + 0.4) + np.random.normal(0, 0.5, len(x))
+
+
+@solara.component
+def Page():
+    deploy_environment_request = solara.use_reactive("")
+    deploy_environment = solara.use_reactive("")
+    fake_failed = solara.use_reactive(False)
+
+    def deploy_model():
+        if deploy_environment.value == "":
+            return
+
+        # 'dummy' deployment
+        time.sleep(1.5)
+
+        # fake a failure the first time
+        if not fake_failed.value:
+            fake_failed.value = True
+            return False
+        else:
+            return True
+
+    deploy_state: solara.Result[bool] = solara.use_thread(deploy_model, dependencies=[deploy_environment.value])
+
+    x_model = x
+    y_model = (slope.value) * x_model + (intercept.value)
+    df1 = pd.DataFrame({"x": x, "y": y_data})
+    df2 = pd.DataFrame({"x": x_model, "y": y_model})
+    df = pd.concat([df1, df2], keys=["data", "model"], names=["type"]).reset_index()
+    fig = px.line(df, x="x", y="y", color="type")
+    with solara.Card("My fancy model"):
+        fig_element = solara.FigurePlotly(fig)
+
+        def reset():
+            slope.set(1.5)
+            intercept.set(0.5)
+
+        def fit():
+            slope.set(1.5 * 0.8)
+            intercept.set(0.9)
+
+        with solara.lab.ContextMenu(activator=fig_element):
+            solara.Button("Reset", text=True, icon_name="mdi-refresh", on_click=reset)
+            solara.Button("Fit", text=True, icon_name="mdi-brain", on_click=fit)
+
+        solara.FloatSlider("Slope", value=slope, min=-2, max=5, step=0.1)
+        solara.FloatSlider("Intercept", value=intercept, min=-10, max=10, step=0.1)
+
+        solara.lab.ConfirmationDialog(
+            deploy_environment_request.value != "",
+            title="Confirm deployment",
+            content=solara.Markdown(f"Are you sure you want to deploy to **{deploy_environment_request.value}**?"),
+            ok=f"Deploy to {deploy_environment_request.value}",
+            on_ok=lambda: deploy_environment.set(deploy_environment_request.value),
+            on_close=lambda: deploy_environment_request.set(""),
+        )
+
+        solara.lab.ConfirmationDialog(
+            deploy_state.value is False and deploy_state.state == solara.ResultState.FINISHED,
+            title="Deployment failed",
+            on_close=lambda: None,
+            on_ok=lambda: deploy_state.retry(),
+            content=solara.Error(solara.Markdown(f"Deployment to **{deploy_environment.value}** failed. Do you want to try again?")),
+            ok="Retry deployment",
+            cancel="Ignore the failure",
+        )
+
+        def request_deploy(environment):
+            deploy_environment.value = ""
+            deploy_environment_request.set(environment)
+
+        deploying = bool(deploy_environment.value and deploy_state.state == solara.ResultState.RUNNING)
+        deploy_button = solara.Button("Deploy model", color="primary", icon_name="mdi-rocket", loading=deploying)
+        with solara.lab.Menu(activator=deploy_button):
+            with solara.Column(gap="0px"):
+                solara.Button("Deploy to testing environment", text=True, icon_name="mdi-bug", on_click=lambda: request_deploy("testing"))
+                solara.Button("Deploy to staging environment", text=True, icon_name="mdi-test-tube", on_click=lambda: request_deploy("staging"))
+                solara.Button(
+                    "Deploy to production",
+                    text=True,
+                    icon_name="mdi-rocket",
+                    style={"justify-content": "left"},  # make the icon appear on the left
+                    on_click=lambda: request_deploy("production"),
+                )
+        if deploy_state.value is True and deploy_state.state == solara.ResultState.FINISHED:
+            # add some margin in the y direction using my-4
+            solara.Success(solara.Markdown(f"Model deployed successfully to **{deploy_environment.value}**!"), classes=["my-4"])

solara/website/pages/documentation/examples/general/live_update.py

@@ -0,0 +1,38 @@
+from time import sleep
+
+import numpy as np
+from matplotlib import pyplot as plt
+
+import solara
+
+
+@solara.component
+def Page():
+    # define some state which will be updated regularly in a separate thread
+    counter = solara.use_reactive(0)
+
+    def render():
+        """Infinite loop regularly mutating counter state"""
+        while True:
+            sleep(0.2)
+            counter.value += 1
+
+    # run the render loop in a separate thread
+    result: solara.Result[bool] = solara.use_thread(render)
+    if result.error:
+        raise result.error
+
+    # create the LiveUpdatingComponent, this component depends on the counter
+    # value so will be redrawn whenever counter value changes
+    LiveUpdatingComponent(counter.value)
+
+
+@solara.component
+def LiveUpdatingComponent(counter):
+    """Component which will be redrawn whenever the counter value changes."""
+    fig, ax = plt.subplots()
+    ax.plot(np.arange(10), np.random.random(10))
+    solara.FigureMatplotlib(fig)
+
+
+Page()

solara/website/pages/documentation/examples/general/login_oauth.py

@@ -0,0 +1,81 @@
+import pprint
+from types import ModuleType
+from typing import Optional
+
+import reacton.ipyvuetify as v
+
+auth: Optional[ModuleType]
+try:
+    from solara_enterprise import auth
+except ImportError:
+    auth = None
+import solara as sl
+
+
+@sl.component
+def UserCard():
+    assert auth is not None
+    user = auth.user.value
+    if user:
+        user_info = user.get("userinfo")
+        if user_info:
+            # based on https://v2.vuetifyjs.com/en/components/cards/#props
+            with v.Card(width="400px"):
+                with v.ListItem(three_line=True):
+                    with v.ListItemContent():
+                        sl.Div("Logged in", class_="text-overline mb-4")
+                        v.ListItemTitle(children=[user_info["email"]])
+                        v.ListItemSubtitle(children=["You are now logged in, log out via the app bar, or the button below"])
+                    with v.ListItemAvatar():
+                        auth.Avatar()
+
+                with v.CardActions():
+                    sl.Button("logout", icon_name="mdi-logout", href=auth.get_logout_url(), text=True)
+        else:
+            sl.Error("No user info")
+    else:
+        sl.Error("No user")
+
+
+@sl.component
+def Page():
+    assert auth is not None
+    sl.Title("Login demo using OAuth")
+    with sl.AppBar():
+        if auth.user.value:
+            auth.AvatarMenu()
+        else:
+            sl.Button(icon_name="mdi-login", href=auth.get_login_url(), icon=True)
+
+    with sl.Column():
+        if auth.user.value:
+            UserCard()
+            with sl.Details("Raw data"):
+                sl.Markdown(
+                    """
+                    ### Raw user data
+
+                    *Note: do not share this data with anyone, it contains sensitive information.*
+
+                    This is the raw user data from the auth provider.
+
+                    We use the `picture` field to display an avatar in the [AppBar](/documentation/components/layout/app_bar).
+                """
+                )
+                sl.Preformatted(pprint.pformat(auth.user.value))
+        else:
+            sl.Markdown(
+                """
+            ### Login demo
+
+            This is a demo of a login system using OAuth. You can login with your google account, github account or with a username and password.
+            We are using [Auth0](https://auth0.com/) as an OAuth provider.
+
+            """
+            )
+            with sl.Row():
+                sl.Button("login", icon_name="mdi-login", href=auth.get_login_url())
+
+
+if auth is None:
+    del Page

solara/website/pages/documentation/examples/general/mycard.vue

@@ -0,0 +1,58 @@
+<template>
+    <v-card class="text-center" :color="color" dark>
+        <v-card-text>
+            <v-sheet color="rgba(0, 0, 0, .12)">
+                <v-sparkline :value="value" color="rgba(255, 255, 255, .7)" height="100" padding="24" stroke-linecap="round"
+                    smooth>
+                    <template v-slot:label="item">
+                        ${{ item.value }}
+                    </template>
+                </v-sparkline>
+            </v-sheet>
+        </v-card-text>
+
+        <v-card-text>
+            <h1 class="solara-some-class">{{ caption }}</h1>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions class="justify-center">
+            <v-btn block text @click="goto_report">
+                Go to Report
+            </v-btn>
+        </v-card-actions>
+    </v-card>
+</template>
+<style id="mycard">
+.solara-some-class {
+    font-weight: lighter;
+}
+</style>
+
+<script>
+export default {
+    data: () => ({
+        value: [
+            423,
+            446,
+            675,
+            510,
+            590,
+            610,
+            760,
+        ],
+    }),
+    mounted: () => {
+        console.log('mounted');
+    },
+    destroyed: () => {
+        console.log('destroyed');
+    },
+    watch: {
+        value: function (val) {
+            console.log('value changed to', val);
+        }
+    }
+}
+</script>

solara/website/pages/documentation/examples/general/pokemon_search.py

@@ -0,0 +1,51 @@
+"""# Pokemon search
+
+This example shows to to dynamically fetch data and render the results in a table when done, and show an error on failure.
+
+It also shows an optional filter to narrow down the results.
+"""
+
+import solara
+from solara import use_fetch
+from solara.alias import rv
+
+github_url = solara.util.github_url(__file__)
+
+json_url = "https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json"
+
+
+@solara.component
+def Page():
+    data = use_fetch(json_url)
+    json = solara.use_json_load(data)
+    filter, set_filter = solara.use_state("")
+
+    with solara.Div() as main:
+        if json.error:
+            solara.Error(f"Error {json.error}")
+            solara.Button("Retry", on_click=data.retry)
+        else:
+            if json.value:
+                solara.InputText(label="Filter pokemons by name", value=filter, on_value=set_filter, continuous_update=True)
+                pokemons = json.value
+                if filter:
+                    pokemons = [k for k in pokemons if filter.lower() in k["name"].lower()]
+                    if len(pokemons) == 0:
+                        solara.Warning("No pokemons found, try a different filter")
+                    else:
+                        solara.Info(f"{len(pokemons)} pokemons found")
+                else:
+                    solara.Info(f"{len(pokemons)} pokemons in total")
+                with solara.GridFixed(columns=4, align_items="end", justify_items="stretch"):
+                    for pokemon in pokemons[:20]:
+                        with solara.Div():
+                            name = pokemon["name"]
+                            url = "https://jherr-pokemon.s3.us-west-1.amazonaws.com/" + pokemon["image"]
+                            # TODO: how to do this with solara
+                            rv.Img(src=url, contain=True, max_height="200px")
+                            solara.Text(name)
+            else:
+                with solara.Div():
+                    solara.Text("Loading...")
+                    rv.ProgressCircular(indeterminate=True, class_="solara-progress")
+    return main

solara/website/pages/documentation/examples/general/vue_component.py

@@ -0,0 +1,50 @@
+"""Demonstrates how to use Vue components in Solara.
+
+Although many components can be made from the Python side, sometimes it is easier to write components using Vue directly.
+It can also be beneficial for performance, since instead of creating many widgets from the Python side we only send data to
+the frontend. If event handling is also done on the frontend, this reduces latency and makes you app feel much smoother.
+
+See [the API documentation on component_vue](/documentation/api/utilities/component_vue) for more information.
+
+This example is based on [the vuetify docs](https://v2.vuetifyjs.com/en/components/sparklines/#custom-labels),
+Note that the "Go to report" button does not do anything yet.
+
+"""
+
+from typing import Callable
+
+import numpy as np
+import solara
+
+seed = solara.reactive(42)
+
+
+@solara.component_vue("mycard.vue")
+def MyCard(
+    event_goto_report: Callable[[dict], None],
+    value=[1, 10, 30, 20, 3],
+    caption="My Card",
+    color="red",
+):
+    pass
+
+
+@solara.component
+def Page():
+    gen = np.random.RandomState(seed=seed.value)
+    sales_data = np.floor(np.cumsum(gen.random(7) - 0.5) * 100 + 100)
+    show_report = solara.use_reactive(False)
+
+    with solara.Column(style={"min-width": "600px"}):
+        if show_report.value:
+            with solara.Card("Report"):
+                solara.Markdown("Lorum ipsum dolor sit amet")
+                solara.Button("Go back", on_click=lambda: show_report.set(False))
+        else:
+
+            def new_seed():
+                seed.value = np.random.randint(0, 100)
+
+            solara.Button("Generate new data", on_click=new_seed)
+
+            MyCard(value=sales_data.tolist(), color="green", caption="Sales Last 7 Days", event_goto_report=lambda data: show_report.set(True))

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_side_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,64 @@
+"""# 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)
+    )
+    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={"min_width": "800px"})
+
+    # 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={"min-width": "500px", "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}")