I am passing a bokeh figure named plot1 in a CustomJS callback and I would like modify the plot so that it highlights the nodes in the array highlightedNodes. The highlighting works fine but I would like to increase the size of the highlighted points(circles) and give them distinct colors based on a custom color array.
I know that using the nonselection_glyph I can modify the color of the points/Circles in my plot that aren’t selected like this:
circle = Circle(x=xname, y=yname, fill_color = “red”, fill_alpha=0.6, size=5, line_color=None)
r = plot.add_glyph(self.source, circle)
r.nonselection_glyph = Circle(fill_color=“grey”, fill_alpha = 0.1, line_color=None)
But how would I change the colors and size of the selected points? Ideally what I want is to have an array of 10 different colors and for each node in the highlightedNodes array I want to highlight it with that respective color and increase it’s size. So if 10 points are the highlightedNodes array then should be 10 highlighted nodes that are distinctly colored and with an increased size.
Currently I have CustomJS function that looks like this, how can I interact with the variable plot using JS so that I can achieve what I discussed above? Thanks!
buttonCallback = CustomJS(args=dict(source=source, plot=plot1), code="""
// highlightedNodes is an array of NodeIds
console.log(“Clicked Bokeh Button highlighting node IDs”, highlightedNodes);
source.selected[‘1d’].indices = highlightedNodes;
console.log(plot);
colors_list = [list of 10 different colors]
// TODO: Modify the nodes specified by highlightedNodes to a set of distinct colors and increase their size
source.change.emit();
plot.change.emit()
“”")
``