Solara•4mo ago

ipymolstar (anywidget) in solar app

I'm trying to put the ipymolstar PDBemolstar widget in a solara app. (https://github.com/Jhsmit/ipymolstar; use master branch, release is broken) this works:

molecule_id = solara.reactive("1qyn")
count = solara.reactive(0)


@solara.component
def Page():
    with solara.Card(style="width: 500px; height: 750px;"):
        solara.InputText(
            label="molecule id", value=molecule_id.value, on_value=molecule_id.set
        )

        c = PDBeMolstar(molecule_id=molecule_id.value, theme="dark")
        solara.display(c)
        solara.Button(label="increment", on_click=lambda: count.set(count.value + 1))
        solara.Text(f"molecule_id: {molecule_id.value}, count: {count.value}")

molecule_id = solara.reactive("1qyn")
count = solara.reactive(0)


@solara.component
def Page():
    with solara.Card(style="width: 500px; height: 750px;"):
        solara.InputText(
            label="molecule id", value=molecule_id.value, on_value=molecule_id.set
        )

        c = PDBeMolstar(molecule_id=molecule_id.value, theme="dark")
        solara.display(c)
        solara.Button(label="increment", on_click=lambda: count.set(count.value + 1))
        solara.Text(f"molecule_id: {molecule_id.value}, count: {count.value}")

and a new protien is loaded when you enter a PDB id (also the viewer reloads when button is pressed but might be fixed with use_memo) I've tried the .element API since I thought anywidgets count as ipywidgets? c = PDBeMolstar.element(molecule_id=molecule_id.value) but in this way there is no rerender when I change molecule_id. Do i need to do anything else for that to work? the ipyleaflet example seem to work like this

8 Replies

MaartenBreddels•4mo ago

this should absolutely work, are you taking the most recent anywidget and solara?

Jochem Smit•4mo ago

in this example:

import solara
from ipymolstar import PDBeMolstar

molecule_id = solara.reactive("1qyn")
spin = solara.reactive(False)
hide_water = solara.reactive(False)


@solara.component
def Page():
    solara.InputText(
        label="molecule id", value=molecule_id.value, on_value=molecule_id.set
    )  # no rerender after changing molecule_id
    c = PDBeMolstar.element(
        molecule_id=molecule_id.value, hide_water=hide_water.value, spin=spin.value
    )

    # spin / show hide water does work
    solara.Checkbox(label="hide water", value=hide_water.value, on_value=hide_water.set)
    solara.Checkbox(label="spin", value=spin.value, on_value=spin.set)
    solara.Text(f"molecule_id: {molecule_id.value}")
    solara.Text(f"hide_water: {hide_water.value}")
    solara.Text(f"spin: {spin.value}")

import solara
from ipymolstar import PDBeMolstar

molecule_id = solara.reactive("1qyn")
spin = solara.reactive(False)
hide_water = solara.reactive(False)


@solara.component
def Page():
    solara.InputText(
        label="molecule id", value=molecule_id.value, on_value=molecule_id.set
    )  # no rerender after changing molecule_id
    c = PDBeMolstar.element(
        molecule_id=molecule_id.value, hide_water=hide_water.value, spin=spin.value
    )

    # spin / show hide water does work
    solara.Checkbox(label="hide water", value=hide_water.value, on_value=hide_water.set)
    solara.Checkbox(label="spin", value=spin.value, on_value=spin.set)
    solara.Text(f"molecule_id: {molecule_id.value}")
    solara.Text(f"hide_water: {hide_water.value}")
    solara.Text(f"spin: {spin.value}")

spin and hide water do update, which are callbacks on the js side. link Changing molecule_id requires a full rerender

GitHub

ipymolstar/src/ipymolstar/widget.js at ea81897743e5fb4790a552768177...

PDBeMolstar as anywidget. Contribute to Jhsmit/ipymolstar development by creating an account on GitHub.

MaartenBreddels•4mo ago

what do you mean with "requires a fill rerender" ? you want the widget to be re-created? PDBeMolstar.element( molecule_id=molecule_id.value, hide_water=hide_water.value, spin=spin.value ).key(f"mol-{molecule_id.value}") can achieve that then it will re-create when the molecule_id changes, is that what you want?

Jochem Smit•4mo ago

Full re-render* Oh that's what I said😄 Yeah I think I misunderstood how it works I expected it would re-render but in retrospect that is not what I want And I can use the key for now if I do

MaartenBreddels•4mo ago

because i noticed you do not listen to molecule_id changes in the js

Jochem Smit•4mo ago

Yeah exactly There is no direct helper method for that but I can make one I think with .update

MaartenBreddels•4mo ago

what should the helper method do? would it work to do an @observe("molecule_id") and do the updating there?

Jochem Smit•4mo ago

On the js side there is an update method which I can use to draw the new molecule base on molecule id Then I think the example will work and I won't need to redraw the whole thing

Gaming

Programming

ipymolstar (anywidget) in solar app