ReactiveHTML: too much recursion error

[MarcSkovMadsen]

Panel: 0.12.4

I'm trying to create a component using ReactiveHTML. But when I display it together with its .controls I get a too much recursion error in the client.

Does not work

too-much-recursion.mp4

import random

import panel as pn
import param

pn.extension(sizing_mode="stretch_width")

def dummy_model():
    val = float(random.randint(0, 100)) / 100
    return [
            {"label": "Egyptian cat", "score": val * 5 / 15},
            {"label": "tabby, tabby cat", "score": val * 4 / 15},
        ]
class ClassificationPlot(pn.reactive.ReactiveHTML):
    output_json = param.List()
    _template = """<div id="component"></div>"""
    _scripts = {
        "output_json": """console.log("x")""",
    }

plot = ClassificationPlot(output_json=dummy_model())

run_button = pn.widgets.Button(name="Run Classification", button_type="primary")
def run_classification(_):
    plot.output_json=dummy_model()
run_button.on_click(run_classification)

pn.Column(run_button, plot, plot.controls()).servable()

[MarcSkovMadsen]

It Works If I return a list of length 1 instead of 2 in dummy_model.

But that is of course not what I want.

works-list-len-1.mp4

import random

import panel as pn
import param

pn.extension(sizing_mode="stretch_width")

def dummy_model():
    val = float(random.randint(0, 100)) / 100
    return [
            {"label": "Egyptian cat", "score": val * 5 / 15},
            # {"label": "tabby, tabby cat", "score": val * 4 / 15},
        ]
class ClassificationPlot(pn.reactive.ReactiveHTML):
    output_json = param.List()
    _template = """<div id="component"></div>"""
    _scripts = {
        "output_json": """console.log("x")""",
    }

plot = ClassificationPlot(output_json=dummy_model())

run_button = pn.widgets.Button(name="Run Classification", button_type="primary")
def run_classification(_):
    plot.output_json=dummy_model()
run_button.on_click(run_classification)

pn.Column(run_button, plot, plot.controls()).servable()

[MarcSkovMadsen]

It Works If I remove the plot.controls()

But that is of course not what I want.

works-without-plot-control.mp4

import random

import panel as pn
import param

pn.extension(sizing_mode="stretch_width")

def dummy_model():
    val = float(random.randint(0, 100)) / 100
    return [
            {"label": "Egyptian cat", "score": val * 5 / 15},
            {"label": "tabby, tabby cat", "score": val * 4 / 15},
        ]
class ClassificationPlot(pn.reactive.ReactiveHTML):
    output_json = param.List()
    _template = """<div id="component"></div>"""
    _scripts = {
        "output_json": """console.log("x")""",
    }

plot = ClassificationPlot(output_json=dummy_model())

run_button = pn.widgets.Button(name="Run Classification", button_type="primary")
def run_classification(_):
    plot.output_json=dummy_model()
run_button.on_click(run_classification)

pn.Column(run_button, plot, ).servable() # plot.controls()

[MarcSkovMadsen]

Workaround - Set jslink=False

works-if-js-link-false.mp4

import random

import panel as pn
import param

pn.extension(sizing_mode="stretch_width")

def dummy_model():
    val = float(random.randint(0, 100)) / 100
    return [
            {"label": "Egyptian cat", "score": val * 5 / 15},
            {"label": "tabby, tabby cat", "score": val * 4 / 15},
        ]
class ClassificationPlot(pn.reactive.ReactiveHTML):
    output_json = param.List()
    data = param.List(constant=True)
    _template = """<div id="component"></div>"""
    _scripts = {
        "output_json": """console.log("x")""",
    }

plot = ClassificationPlot(output_json=dummy_model())

run_button = pn.widgets.Button(name="Run Classification", button_type="primary")
def run_classification(_):
    with param.edit_constant(plot):
        plot.output_json=[dummy_model()]
run_button.on_click(run_classification)

pn.Column(run_button, plot, plot.controls(jslink=False)).servable()

[philippjfr]

This is not really ReactiveHTML's fault. The jslink will link two properties, if the JSON changes even slightly then the event will bounce back and forth between the two models until a recursion error is raised.

[MarcSkovMadsen]

Can it be fixed?

[philippjfr]

Probably something you have to fix yourself by ensuring that whatever property is being synced and is bouncing back and forth has a consistent representation.

[philippjfr]

It seems like something is inserting additional spaces after the comma in this string "tabby, tabby cat". Will have to look at what's doing that.

[philippjfr]

Found the issue, it's the target_transform on LiteralInput, fix incoming.