Panel objects provided via jscallback vs js_on_event

Panel
1

I am using a panel widget to control the legend selection status of an Echarts pane with js_code so that it operates from a static html file *no python server needed). The legend has several dozen to several hundred series listed, so selection presets are a must. However, there is an important difference between the objects Panel provides to jscallback and js_on_event calls.

In order to programmatically change a legend selection, the code must execute dispatchAction in jscode. I can easily do this in js_on_event code blocks, but cannot figure out how to do it in jscallback code blocks because I cannot find the model(?) for the ehcarts object in the jscallback objects.

I have a limited workaround where I store the model provided in the js_on_event call in window, and the jscallback for the widget uses that to access the Echarts model. This seems like the wrong way to do it, especially if I want to have more than one Echarts panes in my project. Below is minimum sample code to show what I am doing.

import panel as pn
pn.extension('echarts')

presets = pn.widgets.MultiChoice(...) 
echart = pn.pane.ECharts(...).

echart.js_on_event('globalout', "window.echartGOthis = this;") // or cb_obj

presets.jscallback(args={'echart': echart, 'preset_list': preset_list}, value="""
if (window.echartGOthis) {{ // echart model been captured?
    if (this.value.length > 0) {{ // not empty list - also this and cb_obj appear to be equal
        window.echartGOthis.dispatchAction( {type: 'legendSelect', name: preset_list[this.value]}
""")

I would prefer to be able to find the Echarts model(?) in the supplied echart object, but I have not been able to find the same document, model, _api structures that exist in the js_on_event object.

I realize this problem might be unique to the ECharts pane. Any clarification and guidance is appreciated.

Thanks

2

I found a suitable solution. The structure of the code is:

import panel as pn
pn.extension('echarts')

echart_pn = pn.pane.ECharts(...).
time_pn = pn.widgets.Select(...)

echart_pn.js_on_event('rendered', "e.tags[0]=this; this.off('rendered')", e=echart_pn)
time_pn.jscallback(args={'echart': echart_pn}, value="echart.data... = this.value); echart.tags[0].setOption(echart.data)")

The code captures the echart model when the rendered event triggers which happens automatically. It places the model pointer in the 0-index of tags of the echart object. The jscallback then unregisters the callback as we do not need it anymore.

Any widget jscallback will be able to access the echart model by accessing the tags[0] entry. The example shows an action to redraw the chart with any appropriate animations based on what has changed in the echart.data options dictionary. I am experimenting with how to use the other events/actions - including how to sync zoom and pan between multiple echarts instantiated as separate panel panes which is one of the driving strengths of using panel with echarts over pure echarts with multiple grids in a single canvas.

1 Like