Jochem Smit Posts - Answer Overflow

Jochem Smit

•Created by Jochem Smit on 2/26/2024 in #questions-issues

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

18 replies

SSolara

•Created by Jochem Smit on 2/6/2024 in #questions-issues

Altair expand width to available horizontal space

I'm trying to get my altair chart to expand to the available width.

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q")

with solara.Card("Title"):
    solara.FigureAltair(chart)

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q")

with solara.Card("Title"):
    solara.FigureAltair(chart)

Gives a fixed width chart taking up about half the available space With .properties(width="container"), which according to altair docs should make the figure expand to the available width, the figure is reduced to zero width.

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q").properties(width="container")

with solara.Card("Title"):
    solara.FigureAltair(chart)

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q").properties(width="container")

with solara.Card("Title"):
    solara.FigureAltair(chart)

5 replies

Gaming

Programming