The plotting order is not respected when I plot a Circle and a Multiline later

[chesucr]

I am plotting some circles with blue color with one ColumnDataSource

On the order hand, once the circles are plotted, I plot a Multiline glyph as well. I use another source for this glyph.

The glyphs are plotted correctly but they do not respect the order I have plotted them. I want to plot the Multiline on the top of the figure to make it always visible.

from bokeh.plotting import figure
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models.filters import IndexFilter
from bokeh.palettes import Reds3
from bokeh.io import curdoc


ml_source = ColumnDataSource(data=dict(
    colors=[Reds3[0], Reds3[1]],
    xs=[[1, 20, 30, 50], [24, 25, 36, 57]],
    ys=[[4, 20, 50, 50], [10, 25, 35, 60]],
))

source = ColumnDataSource(data=dict(
    x=[7, 8, 9, 10, 15, 30, 55, 23, 50],
    y=[10, 8, 9, 20, 15, 30, 55, 23, 50],
))

plot = figure(
    width=500,
    height=500,
    toolbar_location='left',
    tools='pan,wheel_zoom,tap,lasso_select',
    output_backend='webgl',
)

plot.circle(
    x='x',
    y='y',
    radius=3,
    fill_color='blue',
    line_color=None,
    source=source,
)

ml_prof_line = plot.multi_line(
    xs='xs',
    ys='ys',
    source=ml_source,
    color='colors',
    line_width=5,
    line_alpha=1.0,
)

curdoc().add_root(plot)

This is the result:

I think there is a bug with Multiline because if I use the line works as expected

plot.line(
    x='x',
    y='y',
    source=source,
    color='red',
    line_width=5,
    line_alpha=1.0,
)

[rocheseb]

The multilines are above the circles if you don't use webgl

[bryevdv]

Oh, I missed that this was webgl related. Probably a dupe of #7699 @mattpap ?

[mattpap]

Yes, a duplicate.

[chesucr]

Just in the mean time this is not fixed, Scatter glyphs (with marker='circle' by default) can be used, instead of circle to get the same effect of my example, to preserve the right order

from bokeh.plotting import figure
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models.filters import IndexFilter
from bokeh.models.markers import Scatter, Circle
from bokeh.models.tools import LassoSelectTool
from bokeh.palettes import Reds3
from bokeh.plotting import show


ml_source = ColumnDataSource(data=dict(
    colors=[Reds3[0], Reds3[1]],
    xs=[[1, 20, 30, 50], [24, 25, 36, 57]],
    ys=[[4, 20, 50, 50], [10, 25, 35, 60]],
))

source = ColumnDataSource(data=dict(
    x=[7, 8, 9, 10, 15, 30, 55, 23, 50],
    y=[10, 8, 9, 20, 15, 30, 55, 23, 50],
))

plot = figure(
    width=500,
    height=500,
    toolbar_location='left',
    tools='pan,wheel_zoom,tap,lasso_select',
    output_backend='webgl',
)

c = plot.scatter(
    x='x',
    y='y',
    size=20,
    fill_color='blue',
    line_color=None,
    line_alpha=1.0,
    source=source,

    nonselection_fill_color='blue',
    nonselection_line_color=None,
    nonselection_fill_alpha=1.0,
)
c.selection_glyph = Scatter(
    fill_color='yellow',
    line_color='red',
    line_alpha=1.0,
)

ml_prof_line = plot.multi_line(
    xs='xs',
    ys='ys',
    source=ml_source,
    color='colors',
    line_width=5,
    line_alpha=1.0,
)

show(plot)