How to access a ui.image component inside a side_panel?

[junioraze]

Hello,

What i want is:

• Change the value of "image" inside an ui.image(title='title', image=obj_img, type='png), but that image will be inside a q.page['meta'].side_panel.

A minimal example of the side panel could be:

q.page["meta"].side_panel = ui.side_panel(

    name="side_panel",

    events=["dismissed"],

    title="Anyone",

    closable=True,

    items=[

        ui.visualization(

            name="viz_sidepanel",

            plot=ui.plot([ui.mark(type="interval", x="=product", y="=price", y_min=0)]),

            data=data(

                fields="product price",

                rows=[

                    ("category1", 7),

                    ("category2", 8),

                    ("category3", 9),

                ],

            ),

        ),

        ui.image(

            title="wordcloud",

            image=bs64_image,

            type="png",

        ),

    ],

)

I know i can access and change, for example, the value of the data on the visualization by code bellow cuz visualization is a Component with a name:

q.page['meta'].viz_sidepanel.data = data()

But how can i change the ui.image.image if h2o_wave.ui.image returns a Component without a name? There is another way to change the "bs64_image" for another object? Or even a way to replace the ui.image component for another?

[mtanco]

Here are two ways you can do it: Use the image object and update the location in the side panel or you can use markup in an text instead.

from h2o_wave import main, app, Q, ui, run_on, on


@app('/')
async def serve(q: Q):

    q.page["meta"] = ui.meta_card(
        box="",
        layouts=[
            ui.layout(breakpoint="xs", zones=[ui.zone("all")])
        ]
    )

    q.page["meta"].side_panel = ui.side_panel(
        title="Demo",
        items=[
            ui.text("hello there"),
            ui.image(width="100px", path="https://cdn.britannica.com/79/232779-050-6B0411D7/German-Shepherd-dog-Alsatian.jpg", title="dog"),
            ui.text(name="dog_image", content="<img src='https://i.natgeofe.com/n/5f35194b-af37-4f45-a14d-60925b280986/NationalGeographic_2731043_3x4.jpg' width='100'></img>"),
            ui.button(name="new_image", label="New Image", primary=True)
        ]
    )
    await run_on(q)
    await q.page.save()


@on()
async def new_image(q):
    q.page["meta"].side_panel.items[1].image.path = "https://i.natgeofe.com/n/5f35194b-af37-4f45-a14d-60925b280986/NationalGeographic_2731043_3x4.jpg"
    q.page["meta"].dog_image.content = "<img width='100' src='https://cdn.britannica.com/79/232779-050-6B0411D7/German-Shepherd-dog-Alsatian.jpg'></img>"

[junioraze]

I never saw this way to access using [index], but works perfectly. Thanks!

[mtanco]

I've opened a low priority feature request to hopefully keep others from running into this in the future: #2350