Solara doesn't render in Databricks notebook #128

Ljupch0 · 2023-05-30T09:38:58Z

Ljupch0
May 30, 2023

Hi Maarten,

Thank you for your work!

In my use case I envisioned Solara as a extra nice UI option in shared Databricks Notebooks running on clusters. A way to give less technical users an interface without deploying separate apps, by using the Notebook environment for both authentication and compute.

However it seems that it cannot render:

Is there anything in the limitations section of this page that applies to Solara? https://learn.microsoft.com/en-us/azure/databricks/notebooks/ipywidgets

Unfortunately I cannot provide a reproducible example :(

maartenbreddels · 2023-05-30T10:53:16Z

maartenbreddels
May 30, 2023
Maintainer

Hi Ljupcho,

Thank you for reporting this. Do you see an error in the JS console?

Regards,

Maarten

0 replies

Ljupch0 · 2023-05-30T11:07:17Z

Ljupch0
May 30, 2023
Author

I cleared console before running the chunk with solara code.

There is an error Unchecked runtime.lastError: The message port closed before a response was received., but this same error is printed also when running other, working, ipywidgets. The error is stemming from the iframe.html code pasted below, but the error in the code
'iframe injection failed frameId check' is not the one printed.

It seems to load for a second before the Cannot show widget text is displayed.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script>
            if (!String.prototype.endsWith) { // IE11
                String.prototype.endsWith = function(search, this_len) {
                    if (this_len === undefined || this_len > this.length) {
                        this_len = this.length;
                    }
                    return this.substring(this_len - search.length, this_len) === search;
                };
            }
            const hash = JSON.parse(decodeURIComponent(window.location.hash.substr(1)));
            const userContentHost = '.databricksusercontent.com';
            // only allow if sandboxed w/o allow-same-origin OR is on databricksusercontent.com
            if (!document.domain ||
                (document.domain && document.domain.endsWith(userContentHost))) {
                window.addEventListener('message', function (msg) {
                    if (msg.data.frameId === hash.frameId && msg.data.type === 'injectHtml') {
                        // document.open(); // ommitted as it breaks Edge. see PR 30550
                        document.write(msg.data.content);
                        document.close();
                    } else {
                        console.error('iframe injection failed frameId check');
                    }
                });
                window.parent.postMessage({
                    frameId: hash.frameId,
                    type: 'requestInjection',
                }, hash.parentUri);
            }
        </script>
    </head>
    <body></body>
</html>

0 replies

maartenbreddels · 2023-05-30T11:19:00Z

maartenbreddels
May 30, 2023
Maintainer

Does a regular ipywidget work, e.g:

import ipywidgets as w
display(w.Button(description="Do you see me?"))

0 replies

Ljupch0 · 2023-05-30T12:14:42Z

Ljupch0
May 30, 2023
Author

0 replies

maartenbreddels · 2023-05-30T12:19:39Z

maartenbreddels
May 30, 2023
Maintainer

Can you run two more tests:

import ipyvue
ipyvue.Html(tag="h2", children=["test"])

and

import ipyvuetify as v
v.Btn(children=["Do you see me?"])

0 replies

Ljupch0 · 2023-05-30T14:12:18Z

Ljupch0
May 30, 2023
Author

These work also

0 replies

maartenbreddels · 2023-05-30T14:17:37Z

maartenbreddels
May 30, 2023
Maintainer

Didn't expect that!

What about?

box, rc = solara.render(Page())
box

0 replies

Ljupch0 · 2023-05-30T15:04:46Z

Ljupch0
May 30, 2023
Author

Works!

0 replies

maartenbreddels · 2023-05-30T15:09:22Z

maartenbreddels
May 30, 2023
Maintainer

O, many thanks!
A shorter path might be Page.widget(), but we need to somehow fix this in the long run. Would you mind opening an issue, instead of a discussion?

0 replies

Ljupch0 · 2023-05-30T15:11:31Z

Ljupch0
May 30, 2023
Author

So in the meanwhile I can call all pages as Page.widget()? I confirm this also works. Opening issue.

4 replies

maartenbreddels May 30, 2023
Maintainer

You only need to do that for the 'main widget', inside of the component you do not need that.

abelusha Jun 2, 2023

@maartenbreddels can you help with this in databricks?

import solara
import solara.lab

df = px.data.iris()
columns = list(df.columns)
x_axis = solara.reactive("sepal_length")
y_axis = solara.reactive("sepal_width")
@solara.component
def Page():
    df = px.data.iris()
    fig = px.scatter(df, "sepal_length", "sepal_width")   
    solara.FigurePlotly(fig)
    solara.Select(label="X-axis", value=x_axis, values=columns)
    solara.Select(label="Y-axis", value=y_axis, values=columns)    


@solara.component
def Workaround():
    with solara.components.applayout._AppLayoutEmbed():
        Page()
Workaround.widget()

I am getting this error. "Error displaying widget: Cannot read properties of undefined (reading 'buffer')"

maartenbreddels Jun 2, 2023
Maintainer

Not yet, for this, I need to have a Databricks account. This takes a bit of time because we also need to set up a new AWS account.

Maybe @jasongrout-db / @jasongrout could help debug this in the meantime since I think it is probably an issue with plotly and binary buffers at Databricks and not a solara issue per se.

Ljupch0 Aug 1, 2023
Author

I am getting the same error every time I include plotly code on databricks

jasongrout-db · 2023-06-15T02:02:41Z

jasongrout-db
Jun 15, 2023

@Ljupch0 - I think it's great that you're bringing this up here, but please also put a request in through your Databricks account rep. That works through our ticketing system and bumps the priority for internal people to work on this. (Disclaimer: I work at Databricks, and would love to see Solara working in it)

0 replies

maartenbreddels · 2023-06-16T11:17:13Z

maartenbreddels
Jun 16, 2023
Maintainer

@jasongrout-db my best guess here is that on databricks, we mime bundle rendering gives higher priority to HTML, than the jupyter widget. The code path that gets triggered:

Which adds an HTML entry in the mime bundle that @Ljupch0 sees

0 replies

ccdavid · 2023-09-03T22:42:30Z

ccdavid
Sep 3, 2023

The workarounds here didn't work for me 100% of times. It does work right after clearing the state in the notebook, but fails if I re-create the Page object (e.g. rerun the cell). Another way to make display work again is by displaying two pages in the same cell. The first attempt will fail, but the second one will show and that will fix the display in all other cells in the notebook.

I did the following workaround to make sure the page is always displayed regardless of the state in the notebook:

def workarond_display(solara_component):
  # display component in an output that won't be displayed to notebook output
  # and then display it again. The second display always work.
  import ipywidgets.widgets
  out = widgets.Output()
  with out:
    display(solara_component())
  display(solara_component())

workarond_display(Page)

0 replies

dvn-signifyd · 2024-10-02T18:32:01Z

dvn-signifyd
Oct 2, 2024

Hi, I was using the workaround in the previous post successfully, recently the solutions found in this post started failing with the following error:
Error displaying widget: Cannot read properties of undefined (reading 'extend')
Same is happening for:
box, rc = solara.render(Page()) box
Can anyone else replicate?

11 replies

maartenbreddels Oct 16, 2024
Maintainer

Hi 👋

Can you confirm you are using ipyvue 1.x and ipyvuetify 1.x?
If so, you are still on Vue 2 and Vuetify 2.2.26
Looking at https://github.com/vuetifyjs/vuetify/blob/v2.2.26/packages/vuetify/src/mixins/themeable/index.ts#L5
I wouldn't be surprised that Vue itself is undefined. Maybe you can place a breakpoint somewhere and confirm that.

We make sure Vue gets loaded by this global widget: https://github.com/widgetti/ipyvue/blob/master/ipyvue/ForceLoad.py
Maybe a change at DBX does not load that widget anymore?

For colab we saw a similar issue, and we use https://github.com/widgetti/reacton/blob/16518bf6fe9ca018bf8576398deb9c8bc27d6dc3/reacton/core.py#L2240 to get around that.

I hope that helps you track it down.

Regards,

Maarten

jasongrout-db Oct 16, 2024

Tobi is looking into this more fully, but just to clarify @maartenbreddels - what do you mean by "Vue gets loaded by this global widget"? Are you loading the Vue library as a global in the browser namespace that you then expect to have access to from any other widget? If so, then I'm not surprised Databricks is running into the same symptoms you see in Colab, since both platforms use iframes to isolate outputs containing ipywidgets.

jasongrout-db Oct 16, 2024

References about the colab issue and fix, to save others time looking them up:

From that colab issue:

From blois "all display calls from the same cell are guaranteed to go into the same iFrame"

In Databricks, every top-level ipywidget renders in its own iframe (so there may be multiple iframes for a single cell output), so that is a difference between the two architectures that might complicate things.

tkrabel-db Oct 21, 2024

@maartenbreddels thanks for the fast reply!

So I was checking the issue reported on the colab github repo and the fix and I think this won't work for Databricks Notebooks since we render every widget in a separate iframe - there is no iframe consolidation logic yet.

I found a workaround with the following though:

import ipyvuetify as v
import ipyvue as vue
import ipywidgets
ipywidgets.VBox([
  vue.Html(tag="span", style_="display: none"), 
  v.Select(label='Fruits', items=['Apple', 'Pear', 'Cherry'])
])

knowing that this renders both widgets in the same iframe (@jasongrout-db need to correct myself; it does word).

I was wondering: can you wrap a component inside a box and add this Html span if we're on databricks notebooks? (I am happy to do it myself, but due to some migration, I cannot contribute to external repos atm)

You could add a case here. You can identify Databricks Notebook through get_ipython().__class__.__name__ == "DatabricksShell".

maartenbreddels Oct 22, 2024
Maintainer

Hi Jason & Tobias,

Are you loading the Vue library as a global in the browser namespace that you then expect to have access to from any other widget?

Yes. However, this worked before at Databricks. Maybe this helps:
https://github.com/widgetti/ipyvue/blob/9490c7b694414207cbb1ce8b15d993d80dda72bb/ipyvue/VueWidget.py#L143
Here we keep a reference to the global widget that all widgets have, which in principle should cause the widget manager to first load this widget. This is probably the reason it worked before, and might give a hint about what broke it.

Solara doesn't render in Databricks notebook #128

Replies: 14 comments · 15 replies

maartenbreddels May 30, 2023 Maintainer

Ljupch0 May 30, 2023 Author

maartenbreddels May 30, 2023 Maintainer

Ljupch0 May 30, 2023 Author

maartenbreddels May 30, 2023 Maintainer

Ljupch0 May 30, 2023 Author

maartenbreddels May 30, 2023 Maintainer

Ljupch0 May 30, 2023 Author

maartenbreddels May 30, 2023 Maintainer

Ljupch0 May 30, 2023 Author

maartenbreddels May 30, 2023 Maintainer

maartenbreddels Jun 2, 2023 Maintainer

Ljupch0 Aug 1, 2023 Author

maartenbreddels Jun 16, 2023 Maintainer

maartenbreddels Oct 16, 2024 Maintainer

maartenbreddels Oct 22, 2024 Maintainer

Replies: 14 comments 15 replies

maartenbreddels
May 30, 2023
Maintainer

Ljupch0
May 30, 2023
Author

maartenbreddels
May 30, 2023
Maintainer

Ljupch0
May 30, 2023
Author

maartenbreddels
May 30, 2023
Maintainer

Ljupch0
May 30, 2023
Author

maartenbreddels
May 30, 2023
Maintainer

Ljupch0
May 30, 2023
Author

maartenbreddels
May 30, 2023
Maintainer

Ljupch0
May 30, 2023
Author

maartenbreddels May 30, 2023
Maintainer

maartenbreddels Jun 2, 2023
Maintainer

Ljupch0 Aug 1, 2023
Author

maartenbreddels
Jun 16, 2023
Maintainer

maartenbreddels Oct 16, 2024
Maintainer

maartenbreddels Oct 22, 2024
Maintainer