solara-ui 1.40.0__tar.gz → 1.41.0__tar.gz

{solara_ui-1.40.0 → solara_ui-1.41.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: solara-ui
-Version: 1.40.0
+Version: 1.41.0
 Dynamic: Summary
 Project-URL: Home, https://www.github.com/widgetti/solara
 Project-URL: Documentation, https://solara.dev

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/__init__.py

@@ -1,6 +1,6 @@
 """Build webapps using IPywidgets"""
 
-__version__ = "1.40.0"
+__version__ = "1.41.0"
 github_url = "https://github.com/widgetti/solara"
 git_branch = "master"
 

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/__main__.py

@@ -261,6 +261,12 @@ if "SOLARA_MODE" in os.environ:
     default=True,
     help="Check installed version again pypi version.",
 )
+@click.option(
+    "--qt",
+    is_flag=True,
+    default=False,
+    help="Instead of opening a browser, open a Qt window. Will also stop the server when the window is closed. (experimental)",
+)
 def run(
     app,
     host,
@@ -290,6 +296,7 @@ def run(
     ssg: bool,
     search: bool,
     check_version: bool = True,
+    qt=False,
 ):
     """Run a Solara app."""
     if dev is not None:
@@ -365,9 +372,16 @@ def run(
         while not failed and (server is None or not server.started):
             time.sleep(0.1)
         if not failed:
-            webbrowser.open(url)
+            if qt:
+                from .server.qt import run_qt
 
-    if open:
+                run_qt(url)
+            else:
+                webbrowser.open(url)
+
+    # with qt, we open the browser in the main thread (qt wants that)
+    # otherwise, we open the browser in a separate thread
+    if open and not qt:
         threading.Thread(target=open_browser, daemon=True).start()
 
     rich.print(f"Solara server is starting at {url}")
@@ -397,7 +411,7 @@ def run(
     settings.main.timing = timing
     items = (
         "theme_variant_user_selectable dark theme_variant theme_loader use_pdb server open_browser open url failed dev tracer"
-        " timing ssg search check_version production".split()
+        " timing ssg search check_version production qt".split()
     )
     for item in items:
         del kwargs[item]
@@ -451,14 +465,13 @@ def run(
 
         build_index("")
 
-    start_server()
-
     # TODO: if we want to use webview, it should be sth like this
-    # server_thread = threading.Thread(target=start_server)
-    # server_thread.start()
-    # if open:
-    #     # open_webview()
-    #     open_browser()
+    if qt:
+        server_thread = threading.Thread(target=start_server, daemon=True)
+        server_thread.start()
+        open_browser()
+    else:
+        start_server()
     # server_thread.join()
 
 

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/components/component_vue.py

@@ -1,4 +1,5 @@
 import inspect
+import os
 from typing import Any, Callable, Dict, Type
 
 import ipyvue as vue
@@ -48,10 +49,10 @@ def _widget_from_signature(classname, base_class: Type[widgets.Widget], func: Ca
 def _widget_vue(vue_path: str, vuetify=True) -> Callable[[Callable[P, None]], Type[v.VuetifyTemplate]]:
     def decorator(func: Callable[P, None]):
         class VuetifyWidgetSolara(v.VuetifyTemplate):
-            template_file = (inspect.getfile(func), vue_path)
+            template_file = (os.path.abspath(inspect.getfile(func)), vue_path)
 
         class VueWidgetSolara(vue.VueTemplate):
-            template_file = (inspect.getfile(func), vue_path)
+            template_file = (os.path.abspath(inspect.getfile(func)), vue_path)
 
         base_class = VuetifyWidgetSolara if vuetify else VueWidgetSolara
         widget_class = _widget_from_signature("VueWidgetSolaraSub", base_class, func, "vue_")

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/server/assets/style.css

@@ -1,6 +1,7 @@
 html {
   /* override vuetify's css reset ress.css */
   overflow-y: auto;
+  scroll-behavior: smooth;
 }
 
 .jupyter-widgets code {
@@ -124,6 +125,7 @@ div.highlight {
 
 .solara-autorouter-content {
     height: 100%;
+    max-width: 100%;
 }
 
 /* originally from index.css */

solara_ui-1.41.0/solara/server/qt.py

@@ -0,0 +1,113 @@
+import sys
+from typing import List
+import webbrowser
+from qtpy.QtWidgets import QApplication
+from qtpy.QtWebEngineWidgets import QWebEngineView
+from qtpy.QtWebChannel import QWebChannel
+from qtpy import QtCore, QtGui
+import signal
+from pathlib import Path
+
+HERE = Path(__file__).parent
+
+
+# setUrlRequestInterceptor, navigationRequested and acceptNavigationRequest
+# all trigger the websocket to disconnect, so we need to block cross origin
+# requests on the frontend/browser side by intercepting clicks on links
+
+cross_origin_block_js = """
+var script = document.createElement('script');
+script.src = 'qrc:///qtwebchannel/qwebchannel.js';
+document.head.appendChild(script);
+script.onload = function() {
+    new QWebChannel(qt.webChannelTransport, function(channel) {
+        let py_callback = channel.objects.py_callback;
+
+        document.addEventListener('click', function(event) {
+            let target = event.target;
+            while (target && target.tagName !== 'A') {
+                target = target.parentNode;
+            }
+
+            if (target && target.tagName === 'A') {
+                const linkOrigin = new URL(target.href).origin;
+                const currentOrigin = window.location.origin;
+
+                if (linkOrigin !== currentOrigin) {
+                    event.preventDefault();
+                    console.log("Blocked cross-origin navigation to:", target.href);
+                    py_callback.open_link(target.href);  // Call Python method
+                }
+            }
+        }, true);
+    });
+};
+"""
+
+
+class PyCallback(QtCore.QObject):
+    @QtCore.Slot(str)
+    def open_link(self, url):
+        webbrowser.open(url)
+
+
+class QWebEngineViewWithPopup(QWebEngineView):
+    # keep a strong reference to all windows
+    windows: List = []
+
+    def __init__(self):
+        super().__init__()
+        self.page().newWindowRequested.connect(self.handle_new_window_request)
+
+        # Set up WebChannel and py_callback object
+        self.py_callback = PyCallback()
+        self.channel = QWebChannel()
+        self.channel.registerObject("py_callback", self.py_callback)
+        self.page().setWebChannel(self.channel)
+
+        self.loadFinished.connect(self._inject_javascript)
+
+    def _inject_javascript(self, ok):
+        self.page().runJavaScript(cross_origin_block_js)
+
+    def handle_new_window_request(self, info):
+        webview = QWebEngineViewWithPopup()
+        geometry = info.requestedGeometry()
+        webview.resize(geometry.width(), geometry.height())
+        webview.setUrl(info.requestedUrl())
+        webview.show()
+        QWebEngineViewWithPopup.windows.append(webview)
+        return webview
+
+
+def run_qt(url):
+    app = QApplication([])
+    web = QWebEngineViewWithPopup()
+    web.setUrl(QtCore.QUrl(url))
+    web.resize(1024, 1024)
+    web.show()
+
+    app_name = "Solara"
+    app.setApplicationDisplayName(app_name)
+    app.setApplicationName(app_name)
+    web.setWindowTitle(app_name)
+    app.setWindowIcon(QtGui.QIcon(str(HERE.parent / "website/public/logo.svg")))
+    if sys.platform.startswith("darwin"):
+        # Set app name, if PyObjC is installed
+        # Python 2 has PyObjC preinstalled
+        # Python 3: pip3 install pyobjc-framework-Cocoa
+        try:
+            from Foundation import NSBundle
+
+            bundle = NSBundle.mainBundle()
+            if bundle:
+                app_info = bundle.localizedInfoDictionary() or bundle.infoDictionary()
+                if app_info is not None:
+                    app_info["CFBundleName"] = app_name
+                    app_info["CFBundleDisplayName"] = app_name
+        except ModuleNotFoundError:
+            pass
+
+    # without this, ctrl-c does not work in the terminal
+    signal.signal(signal.SIGINT, signal.SIG_DFL)
+    app.exec_()

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/server/settings.py

@@ -37,6 +37,7 @@ class ThemeVariant(str, Enum):
 class ThemeSettings(BaseSettings):
     variant: ThemeVariant = ThemeVariant.light
     loader: str = "solara"
+    show_banner: bool = True
 
     class Config:
         env_prefix = "solara_theme_"

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/server/static/main-vuetify.js

@@ -138,15 +138,25 @@ async function solaraInit(mountId, appName) {
     });
 
     window.addEventListener('solara.router', function (event) {
+        app.$data.urlHasChanged = true;
         if(kernel.status == 'busy') {
             app.$data.loadingPage = true;
         }
     });
     kernel.statusChanged.connect(() => {
+        // When navigation is triggered from the front-end, kernel.status becoming busy and
+        // solara.router event happen in a different order than when navigating through Python, so
+        // if the URL has changed when the kernel becomes busy, we set loadingPage to true
+        if (kernel.status == 'busy' && app.$data.urlHasChanged) {
+            app.$data.loadingPage = true;
+        }
         // the first idle after a loadingPage == true (a router event)
         // will be used as indicator that the page is loaded
         if (app.$data.loadingPage && kernel.status == 'idle') {
             app.$data.loadingPage = false;
+            app.$data.urlHasChanged = false;
+            const event = new Event('solara.pageReady');
+            window.dispatchEvent(event);
         }
     });
 

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/server/static/solara_bootstrap.py

@@ -119,7 +119,7 @@ async def main():
     ]
     for dep in requirements:
         await micropip.install(dep, keep_going=True)
-    await micropip.install("/wheels/solara-1.40.0-py2.py3-none-any.whl", keep_going=True)
+    await micropip.install("/wheels/solara-1.41.0-py2.py3-none-any.whl", keep_going=True)
     import solara
 
     el = solara.Warning("lala")

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/server/templates/loader-solara.html

@@ -32,7 +32,7 @@
         <jupyter-widget-mount-point mount-id="solara-main">
             A widget with mount-id="solara-main" should go here
         </jupyter-widget-mount-point>
-        <div style="position: absolute; right: 0px; bottom: 0px; padding: 10px;">
+        <div v-if="showBanner" style="position: absolute; right: 0px; bottom: 0px; padding: 10px;">
             <b>This website runs on <a href="https://solara.dev">Solara</a></b>
         </div>
     </div>

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/server/templates/solara.html.j2

@@ -172,7 +172,7 @@
 </script>
 {% endraw -%}
 
-<body data-base-url="{{root_path}}/static/">
+<body data-base-url="{{root_path}}/jupyter/">
     {% if perform_check %}
     <iframe src="https://solara.dev/static/public/success.html?system=solara&check=html&version={{solara_version}}" style="display: none"></iframe>
     {% endif %}
@@ -296,6 +296,10 @@
                     this.forceUpdateTrigger += 1;
                     original_$forceUpdate();
                 });
+                // in case we are showing a popop (e.g. using ipypopout), hide the banner
+                if(searchParams.has('modelid')) {
+                    this.showBanner = false;
+                }
             },
             mounted() {
                 document.querySelector('#app').removeAttribute("style");
@@ -413,6 +417,7 @@
                     loadingPage: false,
                     _lastBusyTimer: null,
                     kernelBusyLong: false,
+                    showBanner: theme.show_banner,
                     // outputMessages: [{ name: 'stderr', text: 'lala' }],
                 }
             }

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/components/sidebar.py

@@ -15,7 +15,9 @@ def Sidebar():
             break
 
     with solara.v.List(
-        expand=True, nav=True, style_="height: 100%; display: flex; flex-direction: column; background-color: var(--color-material-background);"
+        expand=True,
+        nav=True,
+        style_="height: 100%; max-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-material-background); overflow-y: auto;",
     ) as main:
         with solara.v.ListItemGroup(v_model=router.path):
             # e.g. getting_started, examples, components, api, advanced, faq

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/__init__.py

@@ -280,13 +280,19 @@ def Layout(children=[]):
                         justify="center" if route_current is not None and route_current.path in ["documentation", "showcase"] else "start",
                     ):
                         if route_current is not None and route_current.module is not None and hasattr(route_current.module, "Sidebar"):
-                            with solara.v.NavigationDrawer(
-                                clipped=True,
-                                class_="d-none d-md-block",
-                                height="unset",
-                                style_="min-height: calc(100vh - 64px);",
-                                width="20rem",
-                                v_model=True,  # Forces menu to display even if it had somehow been closed
+                            with solara.v.Sheet(
+                                style_="""
+                                    height: 100vh;
+                                    width: 20rem;
+                                    overflow: auto;
+                                    border-right: 1px solid var(--color-border-appbar);
+                                    position: sticky;
+                                    top: 0;
+                                    flex-direction: column;
+                                    gap: 0;
+                                """,
+                                class_="d-md-flex d-none",
+                                elevation=0,
                             ):
                                 route_current.module.Sidebar()
                         with rv.Col(

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/documentation/advanced/content/20-understanding/40-routing.md

@@ -196,7 +196,7 @@ Note that all routes are relative, since a component does not know if it is embe
 
 
 Therefore you should never use the `route.path` for navigation since the route object has no knowledge of the full url
-(e.g. `/docs/basics/ipywigets`) but only knows its small piece of the pathname (e.g. `ipywidgets`)
+(e.g. `/docs/basics/ipywidgets`) but only knows its small piece of the pathname (e.g. `ipywidgets`)
 
 Using [`resolve_path`](/documentation/api/routing/resolve_path) we can request the full url for navigation.
 
@@ -219,6 +219,22 @@ def LinkToIpywidgets():
     return main
 ```
 
+### Linking to Sections of a Page
+
+The `solara.Link` component also supports linking to HTML elements identified by id. Although most Solara components don't directly support the id attribute, you can assign ids to all ipyvuetify components, using the `attributes` argument:
+
+```python
+solara.v.Btn(attributes={"id": "my-id"}, ...)
+```
+
+You can then link to a particular element by appending `#` followed by its id to your link, i.e. `solara.Link(route_or_path="/page#my-id")`. If you want the page to smoothly scroll to the linked element, you should give an element that contains it (for instance the `html`-element) the following CSS rule:
+
+```css
+html {
+    scroll-behaviour: smooth;
+}
+```
+
 ## Fully manual routing
 
 If you want to do routing fully manually, you can use the [`solara.use_router`](/documentation/api/routing/use_router) hook, and use the `.path` attribute.

solara_ui-1.41.0/solara/website/pages/documentation/examples/__init__.py

@@ -0,0 +1,44 @@
+import solara
+from solara.website.components import Gallery, MarkdownWithMetadata
+
+title = "Examples"
+
+
+@solara.component
+def Page(route_external=None):
+    Gallery(route_external)
+
+
+@solara.component
+def Layout(children):
+    # 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")
+    module = route_current.module
+    assert module is not None
+    github_url = solara.util.github_url(module.__file__)
+
+    if route_current.path == "fullscreen":
+        with solara.Padding(4, children=children):
+            pass
+    else:
+        with solara.Column(align="center", style={"max-width": "100%"}):
+            doc = module.__doc__
+            if doc:
+                with solara.Column():
+                    MarkdownWithMetadata(doc)
+            with solara.Column(style={"max-width": "min(100%, 1024px)", "width": "100%"}):
+                if route_current.path != "/":
+                    solara.Button("View source code on GitHub", icon_name="mdi-github-circle", href=github_url, class_="ma-2", target="_blank", text=True)
+                if not hasattr(module, "Page"):
+                    solara.Error(f"No Page component found in {module}")
+                else:
+                    with solara.Div(children=children):
+                        pass

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/documentation/examples/ai/chatbot.py

@@ -77,7 +77,7 @@ def Page():
     task = solara.lab.use_task(call_openai, dependencies=[user_message_count])  # type: ignore
 
     with solara.Column(
-        style={"width": "700px", "height": "50vh"},
+        style={"width": "100%", "height": "50vh"},
     ):
         with solara.lab.ChatBox():
             for item in messages.value:

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/documentation/examples/general/vue_component.py

@@ -35,7 +35,7 @@ def Page():
     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"}):
+    with solara.Column():
         if show_report.value:
             with solara.Card("Report"):
                 solara.Markdown("Lorum ipsum dolor sit amet")

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/documentation/examples/libraries/altair.py

@@ -38,6 +38,7 @@ def Page():
         )
         .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)

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/documentation/examples/libraries/bqplot.py

@@ -34,6 +34,6 @@ def Page(x=x0, ymax=5):
     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"})
+    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_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/documentation/examples/libraries/ipyleaflet.py

@@ -15,7 +15,7 @@ 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"}):
+    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

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/documentation/examples/libraries/ipyleaflet_advanced.py

@@ -31,7 +31,7 @@ def Page():
         # do things with the location
         marker_location.set(location)
 
-    with solara.Column(style={"min-width": "500px", "height": "500px"}):
+    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]

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/documentation/examples/utilities/countdown_timer.py

@@ -9,7 +9,6 @@ The UI code demonstrates a lot of conditional rendering.
 import time
 
 import solara
-from solara.alias import rv
 
 
 @solara.component
@@ -41,24 +40,23 @@ def Page():
 
     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")
+    if not running:
+        if duration < 1:
+            solara.Error("Duration must be at least 1 second")
         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")
+            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:
-                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.Button("Start", on_click=lambda: set_running(True), icon_name="mdi-play", disabled=seconds < 1)

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/documentation/examples/visualization/annotator.py

@@ -45,9 +45,7 @@ def Page():
     fig = go.FigureWidget(
         layout=go.Layout(
             showlegend=False,
-            autosize=False,
-            width=600,
-            height=600,
+            autosize=True,
             dragmode="drawrect",
             modebar={
                 "add": [

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/documentation/examples/visualization/linked_views.py

@@ -49,8 +49,8 @@ def ClickScatter(df, x, y, color, click_row, on_click: Callable[[ClickPoint], No
         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:
+    fig.update_layout(width=340)
+    with solara.Column(style={"width": "340px"}) 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)
@@ -65,8 +65,8 @@ def Page():
     else:
         clicked_row = None
 
-    with solara.VBox() as main:
-        with solara.HBox():
+    with solara.Column() as main:
+        with solara.Row(justify="center", style={"flex-wrap": "wrap"}):
             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:

{solara_ui-1.40.0 → solara_ui-1.41.0}/solara/website/pages/documentation/getting_started/content/00-quickstart.md

@@ -87,3 +87,21 @@ In case you forgot how to start a notebook server:
 Or the more modern Jupyter lab:
 
     $ jupyter lab
+
+
+## Run as app (experimental)
+
+You can also run the script as a standalone app. This requires the extra packages `qtpy` and `PySide6` (or `PyQt6`) to be installed.
+
+```bash
+$ pip install pip install qtpy PySide6
+```
+
+Run from the command line in the same directory where you put your file (`sol.py`):
+
+```bash
+$ solara run sol.py --qt
+```
+
+
+<img src="https://dxhl76zpt6fap.cloudfront.net/public/solara-quickstart-app.webp" alt="Markdown Monster icon"/>