Echarts not updated when removing a serie

[pierrotsmnrd]

Software version info

• python 3.10.12
• panel 1.2.1
• bokeh 3.2.1
• MacOS Ventura 13.5
• Chrome Version 115.0.5790.170 arm64

Description

I have a param ListSelector, used to build a panel CheckBoxGroup, and an echart
The number of series of the echart varies according to the number of values selected in the CheckBoxGroup.

When I click new values, a new serie is added, and the plot is properly updated.
But when I unclick an existing value, the plot isn't updated.

More details :

• in both cases, the echart series are updated. see the reproduction code below.

• having a look at the messages passing through the Websocket, I know that "ModelChanged" messages are received by the browser, with updated series. Check screenshots below.

• It's really only removing a serie that is failing. Adding series always work. This is illustrated in the video below. For instance, running my reproduction code, run the following sequence :

  • check 2 (it's updated)
  • check 4 (it's updated)
  • uncheck 4 (it's not updated)
  • check8 (it's updated as expected)

Complete, minimal, self-contained example code that reproduces the issue

import panel as pn
import param

class DemoEchartsBug(pn.viewable.Viewer):

    numbers = param.ListSelector(default=[],
                                objects=[2, 4, 8])

    def __init__(self, **params):
        super().__init__(**params)

        self.cb_group = pn.widgets.CheckBoxGroup.from_param(self.param.numbers)
    
    @param.depends("numbers")
    def plot(self):

        echart_index = list(range(10))
        
        echart_series = [
            {
                "type": "bar",
                "name": str(num),
                "data": [i * num for i in range(10)],
            }
            for num in self.numbers
        ]

        echart_config = {
            "xAxis": [{"type": "category",  "data": echart_index}],
            "yAxis": [{"type": "value"}],
            "series": echart_series,
        }

        echart_pane = pn.pane.ECharts(echart_config,
                                      width=800,
                                      height=400)

        return pn.Column(
                pn.pane.Markdown(f"# numbers : {self.numbers}"),
                echart_pane
        )

    def __panel__(self):

        return pn.Column(
            pn.pane.Markdown(" # Bug with ECharts"),
            self.cb_group,
            pn.layout.Divider(),
            self.plot
        )

Stack traceback and/or browser JavaScript console output

No console output

Screen recording

echarts.bug.demo.mov

Screenshots of the messages in the websocket

• Step 1 : Before removing a serie. There are two series in the echart config
  

• Step 2 : After removing a serie. There is one serie in the echart config, as it should be.
  

[MarcSkovMadsen]

It seems this is a well known, open ECharts issue apache/echarts#6202.

Some workarounds are described in the issue and could explored.

[pierrotsmnrd]

@MarcSkovMadsen thanks a lot for pointing out the original issue ! Very helpful :) I've been able to test one of the suggested workarounds, and provided a fix in PR #5435