Interactively move the editing glyph to top

Community Support
1

Is is possible to change the z-order of glyph so that the interactively-editing one can be moved to top? For example:

import bokeh.plotting as bpl
bpl.output_notebook()

import numpy as np

from bokeh.layouts import gridplot
from bokeh.plotting import figure, show
from bokeh.models import Select, ColorPicker
from bokeh.layouts import column
from bokeh.models import CustomJS

x = np.linspace(0, 4*np.pi, 100)
y = np.sin(x)

TOOLS = "pan,wheel_zoom,box_zoom,reset,save,box_select"

p1 = figure(title="Legend Example", tools=TOOLS)

g1 = p1.circle(x,   y, radius=1, legend_label="sin(x)").glyph
g2 = p1.circle(x, 2*y, radius=1, legend_label="2*sin(x)", color="orange").glyph

circle_colorpicker = ColorPicker(title="Circle Color", color="orange")
# need a js callback to move the modifying render to the top of glyph.renderers
circle_colorpicker.js_link("color", g1, "fill_color")

show(column(p1, circle_colorpicker))

image
image735×797 38 KB

I wish the moment I set a color for sinx, it can move to top, instead of being covered by 2sinx

2

@m3lab-zzl the glyphs are rendered in the order they appear in the renderers list:

In [2]: p = figure()

In [3]: p.circle('x', 'y')
Out[3]: GlyphRenderer(id='p1039', ...)

In [4]: p.line('x', 'y')
Out[4]: GlyphRenderer(id='p1048', ...)

In [5]: p.renderers
Out[5]: [GlyphRenderer(id='p1039', ...), GlyphRenderer(id='p1048', ...)]

You can create a new list in a new order of your choosing and set

p.renderers = new_renderer_list
3

I know the renderer list, but how can I tell bokeh.js to automatically move the user-editing renderer to the top? I guess that’s something on js side.

4

The user is not editing a glyph, the user is picking a color from a color picker. To do what you want you would need to switch from using js_link to js_on_change with a CustomJS callback on the color picker that manually does both things:

  • updates the glyph color from the picker value
  • re-orders the figure’s renderers
5

hi, @Bryan , thank you for your solution, I am trying to implement it.

6

I cannot find a solution to do that, could you kindly give me an example?

Not sure why this would not work.

circle_colorpicker.js_on_change('color', CustomJS(args=dict(p1=p1, g1=g1, g2=g2), code="""
    g1.fill_color = cb_obj.color;
    p1.renderers = [g2, g1];
"""))

Color can be edited, but the renderer list seems to be unchanged.