solara-ui 1.39.0__py2.py3-none-any.whl → 1.41.0__py2.py3-none-any.whl

solara/server/starlette.py

@@ -391,16 +391,16 @@ See also https://solara.dev/documentation/getting_started/deploying/self-hosted
 """
         if "script-name" in request.headers:
             msg += f"""It looks like the reverse proxy sets the script-name header to {request.headers['script-name']!r}
-            """
+"""
         if "x-script-name" in request.headers:
             msg += f"""It looks like the reverse proxy sets the x-script-name header to {request.headers['x-script-name']!r}
-            """
+"""
         if configured_root_path:
             msg += f"""It looks like the root path was configured to {configured_root_path!r} in the settings
-            """
+"""
         if root_path_asgi:
             msg += f"""It looks like the root path set by the asgi framework was configured to {root_path_asgi!r}
-            """
+"""
         warnings.warn(msg)
     if host and forwarded_host and forwarded_proto:
         port = request.base_url.port
@@ -451,6 +451,18 @@ See also https://solara.dev/documentation/getting_started/deploying/self-hosted
     if request.scope["scheme"] == "https" or request.headers.get("x-forwarded-proto", "http") == "https" or request.base_url.hostname == "localhost":
         samesite = "none"
         secure = True
+    elif request.base_url.hostname != "localhost":
+        warnings.warn(f"""Cookies with samesite=none require https, but according to the asgi framework, the scheme is {request.scope['scheme']!r}
+and the x-forwarded-proto header is {request.headers.get('x-forwarded-proto', 'http')!r}. We will fallback to samesite=lax.
+
+If you embed solara in an iframe, make sure you forward the x-forwarded-proto header correctly so that the session cookie can be set.
+
+See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite for more information on samesite cookies.
+
+Also check out the following Solara documentation:
+ * https://solara.dev/documentation/getting_started/deploying/self-hosted
+ * https://solara.dev/documentation/advanced/howto/embed
+""")
     response.set_cookie(
         server.COOKIE_KEY_SESSION_ID,
         value=session_id,
@@ -483,9 +495,9 @@ class StaticNbFiles(StaticFilesOptionalAuth):
     # from https://github.com/encode/starlette/pull/1377/files
     def lookup_path(self, path: str) -> typing.Tuple[str, typing.Optional[os.stat_result]]:
         for directory in self.all_directories:
+            directory = os.path.realpath(directory)
             original_path = os.path.join(directory, path)
             full_path = os.path.realpath(original_path)
-            directory = os.path.realpath(directory)
             # return early if someone tries to access a file outside of the directory
             if not path_is_child_of(Path(original_path), Path(directory)):
                 return "", None
@@ -668,7 +680,7 @@ routes = [
     *([Mount(f"/{cdn_url_path}", app=StaticCdn(directory=settings.assets.proxy_cache_dir))] if solara.settings.assets.proxy else []),
     Mount(f"{prefix}/static/public", app=StaticPublic()),
     Mount(f"{prefix}/static/assets", app=StaticAssets()),
-    Mount(f"{prefix}/static/nbextensions", app=StaticNbFiles()),
+    Mount(f"{prefix}/jupyter/nbextensions", app=StaticNbFiles()),
     Mount(f"{prefix}/static", app=StaticFilesOptionalAuth(directory=server.solara_static)),
     Route("/{fullpath:path}", endpoint=root),
 ]

solara/server/static/highlight-dark.css

@@ -2,7 +2,7 @@
    and then remove the overlapping first lines with highlight.css
 */
 .theme--dark.v-application .highlight .hll { background-color: #ffffcc }
-.theme--dark.v-application .highlight { background: #282C34; color: #ABB2BF }
+.theme--dark.v-application .highlight { background: #1d1f22; color: #ABB2BF }
 .theme--dark.v-application .highlight .c { color: #7F848E } /* Comment */
 .theme--dark.v-application .highlight .err { color: #ABB2BF } /* Error */
 .theme--dark.v-application .highlight .esc { color: #ABB2BF } /* Escape */

solara/server/static/main-vuetify.js

@@ -127,7 +127,7 @@ async function solaraInit(mountId, appName) {
             window.navigator.sendBeacon(close_url);
         }
     });
-    let kernel = await solara.connectKernel(solara.rootPath + '/jupyter', kernelId)
+    let kernel = await solara.connectKernel(solara.jupyterRootPath, kernelId)
     if (!kernel) {
         return;
     }
@@ -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/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.39.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/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/server/templates/solara.html.j2

@@ -31,7 +31,7 @@
 
     <script id="jupyter-config-data" type="application/json">
     {
-        "baseUrl": "{{root_path}}/",
+        "baseUrl": "{{jupyter_root_path}}/",
         "kernelId": "1234"
     }
     </script>
@@ -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 %}
@@ -243,12 +243,13 @@
     {% endif %}
     <script>
         solara.rootPath = {{ root_path | tojson | safe}};
+        solara.jupyterRootPath = {{ jupyter_root_path | tojson | safe}};
         solara.cdn = {{ cdn | tojson | safe }};
         // the vue templates expect it to not have a trailing slash
         solara.cdn = solara.cdn.replace(/\/$/, '');
         // keep this for backwards compatibility
         window.solara_cdn = solara.cdn;
-        console.log("rootPath", solara.rootPath);
+        console.log("solara config", {rootPath: solara.rootPath, jupyterRootPath: solara.jupyterRootPath, cdn: solara.cdn});
 
         async function changeThemeCSS(theme) {
             let css = await fetch(`${solara.rootPath}/static/assets/theme-${theme}.css`).then(r => r.text());
@@ -269,6 +270,12 @@
         solara.production = {{ production | tojson | safe }};
         const themeVariants = ['light', 'dark', 'auto']
         solara.preRendered = {{ pre_rendered_html | safe | length | tojson }} > 0
+        if(solara.preRendered) {
+            document.body.classList.add('solara-ssg', 'solara-pre-rendered');
+        } else {
+            document.body.classList.add('solara-no-ssg');
+        }
+
     </script>
 
     <script>
@@ -289,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");
@@ -329,8 +340,25 @@
                     // if preRendered, the app is not mounted yet
                     // so we mount it when loading becomes false
                     if (solara.preRendered && !this.mounted) {
-                        this.isMounted = true;
-                        this.$mount("#app")
+                        function waitForAnimation(element) {
+                            return new Promise((resolve) => {
+                                element.addEventListener('animationend', resolve, { once: true });
+                            });
+                        }
+
+                        function waitForAllAnimations(elements) {
+                            const animationPromises = Array.from(elements).map(element => waitForAnimation(element));
+                            return Promise.all(animationPromises);
+                        }
+
+                        (async () => {
+                            await waitForAllAnimations(document.querySelectorAll('.solara-ssg-wait-for-animation'));
+                            console.log("animation finished");
+                            document.body.classList.remove('solara-pre-rendered');
+                            document.body.classList.add('solara-pre-rendered-finished');
+                            this.isMounted = true;
+                            this.$mount("#app")
+                        })();
                     } else {
                         this.isMounted = true;
                     }
@@ -389,6 +417,7 @@
                     loadingPage: false,
                     _lastBusyTimer: null,
                     kernelBusyLong: false,
+                    showBanner: theme.show_banner,
                     // outputMessages: [{ name: 'stderr', text: 'lala' }],
                 }
             }
@@ -418,7 +447,7 @@
         {% endif -%}
         nbextensionHashes = {{ resources.nbextensions_hashes | tojson | safe }};
         requirejs.config({
-            baseUrl: '{{root_path}}/static/',
+            baseUrl: '{{jupyter_root_path}}',
             waitSeconds: 3000,
             map: {
                 '*': {
@@ -443,7 +472,7 @@
             });
         requirejs([
             {% for ext in resources.nbextensions if ext != 'jupyter-vuetify/extension' and ext != 'jupyter-vue/extension' -%}
-        "{{root_path}}/static/nbextensions/{{ ext }}.js",
+        "{{jupyter_root_path}}/nbextensions/{{ ext }}.js",
             {% endfor %}
         ]);
         (async function () {

solara/website/assets/custom.css

@@ -34,6 +34,17 @@
     --docs-social-twitter: #000000;
 }
 
+.theme--dark {
+    --color-border-appbar: hsla(0,0%,100%,.12);
+    --color-material-background: #1e1e1e;
+    --color-text-fade: hsla(0,0%,100%,.7);
+}
+.theme--light {
+    --color-border-appbar: rgba(0,0,0,.12);
+    --color-material-background: #fff;
+    --color-text-fade: rgba(0,0,0,.6);
+}
+
 html,
 body,
 p,
@@ -199,9 +210,8 @@ blockquote p:last-child {
     }
 .v-sheet.docs-card-container{
     width: 100%;
-    padding: 0 10%;
     justify-content: start;
-    align-content: center;
+    align-content: stretch;
     flex-wrap: wrap !important;
     flex-grow: 1;
     row-gap: 20px;
@@ -211,11 +221,14 @@ blockquote p:last-child {
 }
 .v-sheet.docs-card-container > a > .docs-card{
     display: flex;
-    width: 20rem;
-    height: 12rem;
+    flex-grow: 1;
+    height: 4rem;
     border-radius: 16px !important;
     color: var(--color-grey-light);
 }
+    .v-sheet.docs-card-container > a > .docs-card > h2 {
+        padding: 0 24px;
+    }
     .v-sheet.docs-card-container > a .docs-card-icon{
         padding-right: 1.5rem;
         transition: ease padding 0.25s;
@@ -274,6 +287,8 @@ blockquote p:last-child {
 /* header */
 .header-logo {
     display: block;
+    height: 100%;
+    margin: 0;
 }
 .news {
     background-color: var(--color-primary);
@@ -289,46 +304,6 @@ blockquote p:last-child {
     color: white !important;
 }
 
-/* hero */
-.hero {
-    background: var(--color-primary-lightest) url(https://dxhl76zpt6fap.cloudfront.net/public/hero.webp);
-    background-size: cover;
-    min-height: 660px;
-    padding: 7rem 0;
-}
-
-.theme--dark .hero {
-    background: var(--dark-color-primary-lightest) url(https://dxhl76zpt6fap.cloudfront.net/public/hero.webp);
-    background-size: cover;
-}
-
-.hero h1 {
-    font-size: 4.5rem;
-}
-
-.hero h2 {
-    padding-left: 150px;
-    padding-right: 150px;
-}
-
-.hero b {
-    color: var(--color-primary);
-}
-
-.theme--dark .hero b {
-    color: var(--dark-color-primary);
-}
-
-@media screen and (max-width: 960px) {
-    .hero {
-        padding: 4rem 0;
-        min-height: auto;
-    }
-
-    .hero h1 {
-        font-size: 3rem;
-    }
-}
 
 /* fixes padding issue on drawer menu */
 .v-list-group__items {
@@ -362,7 +337,7 @@ blockquote p:last-child {
 
 .menu li a:link {
     display: block;
-    padding: 1rem 2rem;
+    padding: 0.75rem;
 }
 
 .menu .active {
@@ -427,11 +402,6 @@ blockquote p:last-child {
     font-weight: bolder;
 }
 
-.solara-autorouter-content {
-    padding-top: 2rem;
-    max-width: 100%;
-}
-
 .jp-RenderedHTMLCommon {
     padding-right: 0;
 }
@@ -457,13 +427,6 @@ blockquote p:last-child {
 /* MOBILE */
 
 @media screen and (aspect-ratio < 1) {
-    .hero{
-        background-position-x: 29%;
-    }
-        .hero h2{
-            padding-left: 0;
-            padding-right: 0;
-        }
     .container.fill-height > .ma-8.row{
         max-width: 80%;
     }

solara/website/components/__init__.py

@@ -1,5 +1,5 @@
 from .docs import CategoryLayout, Gallery, NoPage, SubCategoryLayout, WithCode  # noqa
 from .header import Header
-from .hero import Hero
+from .markdown import MarkdownWithMetadata
 
-__all__ = ["Header", "Hero"]
+__all__ = ["Header", "MarkdownWithMetadata", "CategoryLayout", "Gallery", "NoPage", "SubCategoryLayout", "WithCode"]

solara/website/components/algolia_api.vue

@@ -7,14 +7,19 @@
                     v-model="query"
                     prepend-inner-icon="mdi-magnify"
                     hide-details
+                    dense
                     :placeholder="mac ? '⌘K to search' : 'Ctrl+K to search'"
+                    filled
                     outlined
-                    rounded
                     clearable
                     ref="search"
                     style="flex-grow: 1; max-width: 650px;"
                     @click="show($event, on);"
-                    @keyup.enter="item = 0"
+                    @keyup.enter="hoverItem === null ? item = 0 : item = hoverItem"
+                    @keyup.esc="close();"
+                    @keyup.down="hoverItem = hoverItem == null ? 0 : Math.min(hoverItem + 1, results.hits.length - 1, 9)"
+                    @keyup.up="hoverItem = hoverItem == null ? 9 : Math.max(hoverItem - 1, 0)"
+                    @focus="selectText();"
                     class="algolia"
                 ></v-text-field>
         </template>
@@ -27,7 +32,7 @@
         </v-list>
         <v-list v-else :style="{width: menuWidth + 'px'}">
             <v-list-item-group v-model="item">
-                <v-list-item v-for="(element, index) in this.results.hits" :key="element['url']">
+                <v-list-item v-for="(element, index) in this.results.hits" :key="element['url']" :input-value="index === hoverItem">
                     <v-list-item-content>
                         <v-list-item-title>
                             {{ element.hierarchy.lvl1 }}
@@ -39,7 +44,7 @@
                     </v-list-item-content>
                 </v-list-item>
             </v-list-item-group>
-            <v-list-item>
+            <v-list-item v-if="this.results.nbHits > 10">
                 <v-list-item-content>
                     <v-list-item-title>And {{ this.results.nbHits - 10}} More...</v-list-item-title>
                 </v-list-item-content>
@@ -58,7 +63,6 @@ module.exports = {
         window.search = this;
         this.updateMenuWidth();
         window.addEventListener('resize', this.updateMenuWidth);
-
     },
     watch: {
         query ( value ) {
@@ -66,12 +70,17 @@ module.exports = {
             this.search();
         },
         item ( value ) {
-            if ( this.results.hits != null && this.results.hits.length > 0 ) {
+            if ( value === null ) return;
+            if ( this.results.hits != null && this.results.hits.length >= value ) {
                 let url = this.results.hits[value].url;
                 if (url.startsWith("https://solara.dev")) {
                     url = url.slice(18);
                 }
                 solara.router.push( url );
+                this.close();
+                // reset the search
+                this.item = null;
+                this.hoverItem = null;
             }
         },
     },
@@ -82,6 +91,10 @@ module.exports = {
                 on.click( e )
             } );
         },
+        close() {
+            this.show_results = false;
+            this.$refs.search.blur();
+        },
         initSearch() {
             this.client = this.algoliasearch( '9KW9L7O5EQ', '647ca12ba642437cc40c2adee4a78d08' );
             this.index = this.client.initIndex( 'solara' );
@@ -107,6 +120,9 @@ module.exports = {
                 this.$set(this.results, []);
             }
         },
+        selectText() {
+            this.$refs.search.$refs.input.select();
+        },
         getSnippet( element ) {
             if (element.type == "content") {
                 return element._highlightResult.content.value;
@@ -176,6 +192,7 @@ module.exports = {
             query: '',
             results: [],
             item: null,
+            hoverItem: null,
             show_results: false,
             mac: false,
             menuWidth: 0,

solara/website/components/breadcrumbs.py

@@ -0,0 +1,28 @@
+from typing import List
+import solara
+
+
+@solara.component
+def BreadCrumbs():
+    router = solara.use_router()
+    routes = router.path_routes
+
+    with solara.Row(style={"align-items": "center", "flex-wrap": "wrap"}) as main:
+        for i, route in enumerate(routes):
+            if i == len(routes) - 1:
+                solara.Text(route.label or route.path, style={"color": "var(--color-text-fade)"})
+            else:
+                with solara.Link(solara.resolve_path(route), style={"color": "var(--color-text-fade)"}):
+                    solara.Text(route.label or route.path)
+            if i != len(routes) - 1:
+                solara.Text("/", style={"font-size": "1.5rem", "color": "var(--color-text-fade)"})
+    return main
+
+
+def _resolve_path_to_route(path_to_find: List[str], all_routes: List[solara.Route], routes: List[solara.Route] = []):
+    if len(path_to_find) == 0:
+        return routes
+    for route in all_routes:
+        if path_to_find[0] == route.path:
+            routes += [route]
+            return _resolve_path_to_route(path_to_find[1:], route.children, routes)

solara/website/components/contact.py

@@ -0,0 +1,144 @@
+import json
+import os
+import requests
+
+from typing import Any, Dict, Optional
+import solara
+
+
+postmark_api_key = None
+contact_email_address = None
+
+try:
+    postmark_api_key = os.environ["POSTMARK_API_KEY"]
+    contact_email_address = os.environ["SOLARA_CONTACT_EMAIL_ADDRESS"]
+except Exception:
+    pass
+
+
+@solara.component
+def Contact(
+    style: Dict[str, Any] = {},
+    title="Contact Us",
+    subtitle="We'd love to hear from you!",
+    submit_label="Submit",
+    email_subject="Contact Form Submission",
+):
+    first_name = solara.use_reactive("")
+    last_name = solara.use_reactive("")
+    email = solara.use_reactive("")
+    company = solara.use_reactive("")
+    message = solara.use_reactive("")
+    error: solara.Reactive[Optional[str]] = solara.use_reactive(None)
+    success = solara.use_reactive(False)
+
+    def send(*_ignore):
+        if postmark_api_key is None or contact_email_address is None:
+            error.set("Email service not properly configured. Please contact the site administrator at solara@widgetti.io.")
+        elif not first_name.value or not last_name.value or not email.value or not message.value:
+            error.set("Please fill out all required fields.")
+        else:
+            # Create the email content
+            msg = {}
+            msg["From"] = contact_email_address
+            msg["To"] = contact_email_address
+            msg["Subject"] = email_subject
+            msg["ReplyTo"] = email.value
+
+            # Email body
+            msg["HtmlBody"] = f"""
+            <b>First Name</b>: {first_name.value}<br />
+            <b>Last Name</b>: {last_name.value}<br />
+            <b>Email</b>: {email.value}<br />
+            <b>Company</b>: {company.value}<br />
+            <b>Message</b>: {message.value}<br />
+            """
+
+            # Send emails
+            try:
+                requests.post(
+                    "https://api.postmarkapp.com/email",
+                    headers={
+                        "Accept": "application/json",
+                        "Content-Type": "application/json",
+                        "X-Postmark-Server-Token": postmark_api_key,
+                    },
+                    data=json.dumps(msg),
+                )
+                requests.post(
+                    "https://api.postmarkapp.com/email",
+                    headers={
+                        "Accept": "application/json",
+                        "Content-Type": "application/json",
+                        "X-Postmark-Server-Token": postmark_api_key,
+                    },
+                    data=json.dumps(
+                        {
+                            "From": contact_email_address,
+                            "To": email.value,
+                            "Subject": "Thank you for contacting Solara",
+                            "HtmlBody": f"""
+                            <p>Hi {first_name.value},</p>
+                            <p>Thank you for contacting us! We will get back to you as soon as possible.</p>
+                            <p>Best regards,<br />The Solara Team</p>
+                            """,
+                        }
+                    ),
+                )
+            except Exception as e:
+                error.set(f"Error sending email: {e}")
+            else:
+                success.set(True)
+                error.set(None)
+                first_name.set("")
+                last_name.set("")
+                email.set("")
+                company.set("")
+                message.set("")
+
+    with solara.Card(title=title, style={"width": "100%", "max-width": "1024px", **style}):
+        solara.Markdown(subtitle)
+        solara.Text("* Required fields")
+        with solara.Row():
+            solara.InputText(label="First Name *", value=first_name)
+            solara.InputText(label="Last Name *", value=last_name)
+        with solara.Row():
+            solara.InputText(label="Email *", value=email)
+            solara.InputText(label="Company", value=company)
+        solara.v.Textarea(placeholder="Message *", v_model=message.value, on_v_model=message.set)
+        with solara.CardActions():
+            solara.Button(label=submit_label, color="primary", on_click=send)
+            solara.Button(
+                label="Clear",
+                color="secondary",
+                text=True,
+                on_click=lambda: [first_name.set(""), last_name.set(""), email.set(""), company.set(""), message.set("")],
+            )
+
+    solara.Style(
+        """
+        .v-snack__wrapper {
+            box-shadow: none;
+        }
+        """
+    )
+
+    with solara.v.Snackbar(
+        v_model=error.value is not None,
+        timeout=5000,
+        on_v_model=lambda *_: error.set(None),
+        left=True,
+        color="error",
+    ):
+        solara.Markdown(error.value or "", style={"--dark-color-text": "white", "--color-text": "white"})
+        solara.Button(icon=True, icon_name="mdi-close", color="white", on_click=lambda: error.set(None))
+
+    with solara.v.Snackbar(
+        v_model=success.value,
+        timeout=5000,
+        on_v_model=lambda *_: success.set(False),
+        left=True,
+        color="success",
+    ):
+        solara.Markdown("Your message has been sent!", style={"--dark-color-text": "white", "--color-text": "white"})
+        solara.Button(icon=True, icon_name="mdi-close", color="white", on_click=lambda: success.set(False))