Unable to clear multi-line figure with callback

Question

I have a figure with a line plot and another one with a multi-line plot. The plot updates when a user selects a new option from a Select object. The line plot updates correctly as is syncd with a ColumnDataSource. However, the multi-line plot pulls the info from a pandas dataframe. The problem is that the lines accumulate on the multi-line plot every time I select a new option.

I tried to use this within the on_change callback function but won't work: select.js_on_change('value',CustomJS(args=dict(plot=plot), code="""plot.reset.emit()"""))

I actually should include the CustomJS within my onchange callback but then I get an error. Not sure how to use it.

###############
# callback function
###############
def callback(attr,old,new):
    selected = function_returning_DF_with_data_from_selected_users(select.value,times)
    source.data={'index': selected.index, 'count': selected.count}
    similar_time_users = get_top_5_neighbors_by_time(times,select.value)
    neighbors = function_that_returns_DF_with_selected_user_neighbors()

    numlines=len(neighbors.columns)
    mypalette=Spectral11[0:numlines]
    plot.multi_line(xs=[neighbors.index.values]*numlines,
                ys=[neighbors[name].values for name in neighbors, axis=1)],
                line_color=mypalette,
                line_width=1)


###############
# plotting
###############
select = Select(title="Select user: ", value='', options=user_list)

plot = figure(x_axis_label='Time of the day',y_axis_label='count')
plot.line(x= 'index', y='count', source=source, line_width=5) 

plot.multi_line(xs=[neighbors.index.values]*numlines,
            ys=[neighbors[name].values for name in neighbors, axis=1)],
            line_color=mypalette,
            line_width=1)

select.on_change('value',callback)
#select.js_on_change('value',CustomJS(args=dict(plot=plot), code="""plot.reset.emit()"""))

layout = row(widgetbox(select), plot)
curdoc().add_root(layout)

I expect to have a plot like the first plotted:

However, this is what I'm getting after selecting multiple times:

Any suggestions? Many Thanks! Raul.

Answer 1

Calling glyph methods is additive. Calling multi_line over and over adds new multi-lines every time, without removing anything previously added. For this kind of use case, what you should do instead is call multi_line (or whatever glyph you might be using) only once, and then later, only update the data source. For example:

source = ColumnDataSource(data=dict(xs=..., ys==...)
plot.multi_line(xs='xs', ys='ys', ..., source=source)

def callback(attr,old,new):
    source.data = new_data_dict