Panel watch not updating Custom Components

Hi team,

When we were trying out callbacks with some custom component, it seems it is not getting updated.

Here is a reproducer:

import panel as pn
pn.extension()

from panel.reactive import ReactiveHTML
import param

class Test(ReactiveHTML):
    
    value = param.String(default='')
    
    _template = "<div id='element'>${value}</div>"

    _scripts = {
        'render': """
            console.log(data.value.val)
        """
    }

color = pn.widgets.ColorPicker(name="Color", value="#880588")


def autompg_plot(color="#058805"):
    test = Test()
    test.value = color
    return test


layout = pn.Row(
    pn.Column("## MPG Explorer", color),
    autompg_plot(color.value),
)


def update(event):
    print(color.value)
    layout[1].object = autompg_plot(color.value)

color.param.watch(update, "value")

layout

This is with panel 0.12.4 and jupyter lab 3. I am not sure if I have done something wrong - Just copied the example in the docs and replaced that with a custom component.

A ReactiveHTML has no object attribute, so in the callback you’re actually just adding this attribute to it and Panel doesn’t really know about it. This should work:

def update(event):
    print(color.value)
    layout[1] = autompg_plot(color.value)
1 Like

Thanks a lot @maximlt!
That works.

1 Like