ECharts raising error for mouse events

[MarcSkovMadsen]

panel==1.6.3

Motivated by https://www.linkedin.com/posts/andfanilo_i-had-fun-building-this-small-python-echarts-activity-7325769079401709569-YTBB?utm_source=share&utm_medium=member_desktop&rcm=ACoAAADzkDYBcof8grlCeqbPxN3Zc8gYEUZ8EoU I would like to demo how easy an ECharts parent-child chart can be made.

But it seems only click events works. For example for mouseover exceptions are raised in the console when hovering over the parent points.

4panel.min.js?v=f267ab0a5247499879a39c4b98d7d2ac4c72119b3345699d39ccb168dfa154f1:142  Uncaught TypeError: this.mouse is not a function
    at Object.pointer (panel.min.js?v=f267ab0a5247499879a39c4b98d7d2ac4c72119b3345699d39ccb168dfa154f1:142:1294)
    at a.serializeEvent (panel.min.js?v=f267ab0a5247499879a39c4b98d7d2ac4c72119b3345699d39ccb168dfa154f1:142:144)
    at e.t (panel.min.js?v=f267ab0a5247499879a39c4b98d7d2ac4c72119b3345699d39ccb168dfa154f1:207:2397)
    at t.trigger (echarts.min.js:35:13709)
    at e (echarts.min.js:45:203376)
    at t.trigger (echarts.min.js:35:13709)
    at e.dispatchToElement (echarts.min.js:35:26345)
    at e.mousemove (echarts.min.js:35:25266)
    at t.trigger (echarts.min.js:35:13709)
    at e.mousemove (echarts.min.js:35:62582)

import panel as pn
import param

_parent_config = {
    "title": {"text": "Parent: Bubble Chart"},
    "tooltip": {"trigger": "item"},
    "xAxis": {"type": "value"},
    "yAxis": {"type": "value"},
    "series": [{
        "type": "scatter",
        "data": [
            {"name": "Category A", "value": [10, 20, 40], "symbolSize": 40},
            {"name": "Category B", "value": [20, 30, 60], "symbolSize": 60},
            {"name": "Category C", "value": [30, 10, 80], "symbolSize": 80},
        ],
        "encode": {"tooltip": [0, 1, 2]}
    }]
}

_child_config = {
    "Category A": {
        "title": {"text": "Child: Details for Category A"},
        "xAxis": {
            "type": "category",
            "data": ["Metric 1", "Metric 2", "Metric 3"]
        },
        "yAxis": {"type": "value"},
        "series": [{
            "type": "bar",
            "data": [5, 10, 15]
        }]
    },
    "Category B": {
        "title": {"text": "Child: Details for Category B"},
        "xAxis": {
            "type": "category",
            "data": ["Metric 1", "Metric 2", "Metric 3"]
        },
        "yAxis": {"type": "value"},
        "series": [{
            "type": "bar",
            "data": [20, 10, 5]
        }]
    },
    "Category C": {
        "title": {"text": "Child: Details for Category C"},
        "xAxis": {
            "type": "category",
            "data": ["Metric 1", "Metric 2", "Metric 3"]
        },
        "yAxis": {"type": "value"},
        "series": [{
            "type": "bar",
            "data": [10, 30, 10]
        }]
    }
}

class PanelChildEcharts(pn.viewable.Viewer):
    """
    A Panel component that displays a parent-child ECharts interaction.
    """
    selection = param.String(default="", doc="The selected child to display. '' means no child selected.")

    @param.depends()
    def get_parent_config(self)->dict:
        """
        Returns the parent plot.
        """
        return _parent_config

    def _handle_parent_event(self, event):
        """
        Handles the event from the parent plot.
        """
        if event.type=="click":
            self.selection = event.data["name"]
        else:
            print(event.data)
        
    @param.depends('selection')
    def get_child_config(self)->dict:
        """
        Returns the child based on the child name
        """
        return _child_config.get(self.selection, {})
    
    def __panel__(self):
        """
        Returns the Panel layout.
        """
        parent_plot = pn.pane.ECharts(self.get_parent_config(), sizing_mode="stretch_width", height=400, max_width=1000)
        child_plot = pn.pane.ECharts(self.get_child_config, sizing_mode="stretch_width", height=400, max_width=1000)
        
        parent_plot.on_event('mouseover', callback=self._handle_parent_event)
                
        return pn.FlexBox(
            parent_plot,
            child_plot,
            sizing_mode="stretch_width"
        )
    
pn.extension('echarts')
PanelChildEcharts().servable()

[philippjfr]

Strangely cannot reproduce.

[MarcSkovMadsen]

Just reproduced on latest panel main branch using edge browser

https://github.com/user-attachments/assets/39e6282e-e07e-46a2-a61d-fc9106c02f1d

[MarcSkovMadsen]

There is no issue in firefox

https://github.com/user-attachments/assets/626000dc-b18e-46b7-9572-821f79f840d4

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.