Variable not updating on CustomJS

Im trying to group the data and glyphs of multiple plots via a CheckboxGroup and an additional Button.

The part of the CheckboxGroup is working, the selection of 1 box change the visibility of multiple glyphs.

From that widget I can get a list of selected boxes (

(The next part I have not coded yet, but I think I can) The other Button must group boxes that are not grouped allready, the actions of grouping are sum of, change visibility of Glyphs, disabling some boxes on CheckboxGroup, assign new color to a group of labels, etc.

Before trying to implement the actions, Im having problem with the variables which decide if the code must start grouping:

from bokeh.plotting import output_notebook, show
from bokeh.models import Button, CustomJS

button = Button(label="Create new group")
button.js_on_click(CustomJS(args=dict(Active=[3,4,10,18,19], Groups=[10,11,18]),
var NewGroup = Active.filter( x => !Groups.includes( x ) );
if (NewGroup.length>1) {
    Active = Groups;
    // All the actions of grouping

Instead of setting on the arguments of CustomJS I use a list trying to simplify the debugging, I hope that doesn’t create other problem.

Groups=[10,11,18] are the first elements of previously grouped checkboxes.

When pushing the button I expect:
NewGroup = [3,4,19]
Active = Groups = [3,10,11,18]
If I don’t press anything on the CheckboxGroup, when pushing the Button again I expect:
NewGroup = [ ]
NewGroup.length>1 = False

The first push have no problem, but on the nexts is not behaving the way I expected.
I think Groups is updating his value on each Button press, but Active is using [3,4,10,18,19] each time.

Im pretty confused. Should change completely the approach? Need a simply change to update Active inside js? Any other errors? Im not clear explaining or need to clarify something? Thanks

I hope that doesn’t create other problem

That’s exactly the root cause of your problem. :slight_smile: