Support for marimo/anywidget protocol

[ajasja]

Is your feature request related to a problem? Please describe.
Marimo is a new interactive python environment. I would like to use py3Dmol inside it.

Describe the solution you'd like
I would like to use py3Dmol with marimo

Here is a minimal use case:

import marimo

__generated_with = "0.12.8"
app = marimo.App(width="medium")


@app.cell
def _():
    import marimo as mo
    import py3Dmol
    return mo, py3Dmol


@app.cell
def _(py3Dmol):
    p = py3Dmol.view(query="pdb:1ATP")

    p.setStyle({"cartoon": {"color": "spectrum"}})

    p.zoomTo()

    p.show()
    return (p,)


@app.cell
def _(mo, p):
    mp = mo.ui.anywidget(p)
    mp
    return (mp,)


if __name__ == "__main__":
    app.run()

[dkoes]

Apparently marimo won't execute Javascript unless it is in an iframe (https://docs.marimo.io/api/html/#marimo.iframe) so you need to do something like this this:

import py3Dmol

v = py3Dmol.view('1ycr',height=400,width="100%",style='cartoon')
mo.iframe(v.write_html(fullpage=True),height=420)

[ajasja]

Perfect, thank you!

Do you perhaps know if there is a way to avoid a full redraw?
As a minimal example, I am trying to have a slider that shows a position. Every time I drag the slider, the iframe get's redrawn and the orientation of the molecule is reset:

import marimo

__generated_with = "0.12.8"
app = marimo.App(
    width="medium"
)


@app.cell
def _():
    import marimo as mo
    import py3Dmol
    return mo, py3Dmol


@app.cell
def _(py3Dmol):
    v = py3Dmol.view('1atp',height=400,width="100%",style='cartoon')
    v.setStyle({'cartoon': {'color':'spectrum'}})
    return (v,)


@app.cell
def _(mo):
    pos = mo.ui.slider(50,100)
    pos
    return (pos,)


@app.cell
def _(mo, pos, v):
    v.addStyle({'sphere':{'hidden':True}});
    v.addStyle({'resi': pos.value, 'atom': 'CA'}, {'sphere':{'color': 'green', 'opacity':0.5, 'scale':2, 'hidden':False}});
    mo.iframe(v.write_html(fullpage=True),height=420)
    return


if __name__ == "__main__":
    app.run()

[dkoes]

That seems antithetical to the marimo philosophy. ChatGPT says there is a @component decorator that lets you produce persistent HTML, but it appears to be hallucinating. Try using the update method of the view object - changing values should only influence the cell that calls update, not the cell that actually create the iframe (this may not work due to sandboxing).

[ajasja]

Thanks, I agree.
Update does not seem to have an effect.

I think the problem is that rendering the html in the iframe is a workaround, since the iframe is isolated. I guess the proper way would be to integrate 3Dmol.js using the anywidget protocol, but that seems like a lot of work and my javascript is extremely rusty.

I'll join the live stream on the topic (https://www.youtube.com/watch?v=3V1r5sKnyz8&ab_channel=marimo) and report back:)

Should I close this issue or leave it open for now?

[ajasja]

There does not seem to be an easy hack. (Apart from the iframe one, which does help).
Will leave this open for now.