Marimo Islands Quirks (Pyodide initialization) about marimo

[dmadisetti]

1.

A marimo island like the one below, which tries to import a package with micropip that is not locally-installed will pre-render with errors until pyodide gets initialized

I don't think this is an issue by itself, you could do:

# imports
import marimo as mo
import sys

if "pyodide" in sys.modules:
  import micropip
  await micropip.install('cowsay')
else:
  import pip
  pip.main(['install', 'cowsay'])

or just return a callout saying that micropip hasn't installed packages yet

But absolutely agree that errors should be rendered more nicely on static export.

Particular to this problem, there might be a way to inject deps prior for pyodide load.

2.

Is slightly inconsisent with the rest of marimo (which does not store outputs, and instead only saves the necessary .py files)

Yeah, I think that's just the nature of the saved state, unfortunately.
I think this could help be mitigated with a feature like: #1306

I like the prerender- maybe removing it could just be optional?

For islands in particular, I think it should be possible to prune all nonreactive/nonreactive-dependent cells, dump the partially computed state to a binary, and then lazy load it over the network.
I haven't done anything with this yet, but just an idea.

3.

There is no indication to the user when pyodide has initialized and is ready to use

I agree! I mentioned this before, but I might have failed to follow up.
Islands also needs the banner for running on file://, maybe both should have the same design language

[dmadisetti]

@gvarnavi Have you tried out the editable cells yet? I think on my wishlist is a state indicate for stale cells

[gvarnavi]

I don't think this is an issue by itself, you could do:

# imports
import marimo as mo
import sys

if "pyodide" in sys.modules:
  import micropip
  await micropip.install('cowsay')
else:
  import pip
  pip.main(['install', 'cowsay'])

Hmm, not sure about installing packages in the environment during the html stubs generations..
Like I suspect there's a use-case where someone who wants to deploy a marimo island embedding uses the online playground to code their app and then simply has a minimal marimo env locally to convert the downloaded .py file to reactive html (or better yet export from the dropdown menu - when we add that functionality).

or just return a callout saying that micropip hasn't installed packages yet

Yes, I reckon a callout that pyodide hasn't loaded yet and/or an initialization indicator would be my preference.

Particular to this problem, there might be a way to inject deps prior for pyodide load.

+1

I like the prerender- maybe removing it could just be optional?

Yeah, I like it too - but was giving a workshop this morning with marimo islands, and several folks thought it wasn't working on their end simply because it 'looked' functional (and you can in-fact interact w/ UI elements), but the app hadn't loaded yet. I suspect the callout/initialization indicator would fix these concerns.

[gvarnavi]

Just realized all these might be super easy to address with (already existing) css.

Replacing the first <marimo-cell-output> with something like the following

    <marimo-cell-output>
      <div class="marimo">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="animate-spin">
          <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
        </svg>
        <div>Initializing...</div>
      </div>
    </marimo-cell-output>

will use the animate-spin class from the imported marimo css file to animate any svg (here the same icon as in marimo.app), while Pyodide initializes. Once it's initialized, the <marimo-cell-output> tag will get replaced by the appropriate output, displaying the app as intended.

Here's a quick demo, with the cowsay example from above.

I'll make a PR with an option for this in the island generator python code tomorrow.