How to delete glyph with CustomJS callback?

Hi, in my interactive interface based on CustomJS, i need to add and delete glyphs. I found the way to add glyph. But can’t solve, how do remove it, when it is needed. Please help me how glyphs should be deleted. Here is part of code for adding to layout new Glyph:

                        if (p.renderers[j].name === select_cur_obj.value[i]) {
                        var new_source = new Bokeh.ColumnDataSource({ data: p.renderers[j].data_source.data });
                        var new_line = new Bokeh.Line({
                            x: { field: "PERIOD_START_TIME" },
                            y: { field: cb_obj.value },
                            line_color: pallete[i],
                            line_width: 3,
                            name: new_name
                        });
                        break;
                    };
                }
            p.add_glyph(new_line, new_source, {'name': new_name});
            }
            p.change.emit();

Hi Alpensin,

Do you actually need to delete the glyph, or would making it invisible work in your case? It’s pretty easy to just toggle the .visible attribute of a glyph on and off as needed, so maybe that’s an option.

Here’s a Stack Overflow question on this same topic.

It has a couple options for addressing this-- I’m interested to know which approach you decide to take!

Hi,
it can be around 30-50 objects and same count of KPI’s. So in worst situation, if user selects all objects and all kpi’s we will have 50*50 = 2500 Glyphs. In practise not all in same time - depends what KPI’s and objects currently selected. My idea is to add and delete Glyphs for better resourse optimization.

It would be helpful to know more about the data and the kind of plot you are trying to make. The best approach with Bokeh is to add a fixed set of glyphs once, up front, and then to update the data that backs the glyphs, rather than deleting or swapping out glyph objects themselves.