Bokeh Networkx graph slider not updating correctly

Here is a minimal working example for the problem I am facing:

I am building a simple graph with Networkx and then displaying it with Bokeh, adding a slider to show only the edges whose weight is greater than the slider value. Unfortunately, this works perfectly when the value increases, i.e., the slider moves to the right, whereas it stops working (some edges reappear, but then, when clicking on the graph, everything blows up) when the slider value decreases. In the customJS callback function I am modifying the edge data, and also when printing to the console every part of it, they work as expected, but in browser console I get a Shape Mismatch error, even if it is not specified what two shapes are being compared.

import pandas as pd
import networkx as nx
from bokeh.io import show 
from bokeh.plotting import figure, from_networkx
from bokeh.models import CustomJS, Slider
from bokeh.layouts import row, column
import copy

df = pd.DataFrame(data={'Source': {0: 'A', 1: 'A', 2: 'A', 3: 'B', 4: 'B', 5: 'C'},
                        'Target': {0: 'B', 1: 'C', 2: 'D', 3: 'C', 4: 'D', 5: 'D'},
                        'Weight': {0: 0, 1: 1, 2: 1.5, 3: 0.6, 4: 3, 5: 4}}) 

G = nx.from_pandas_edgelist(df, 'Source', 'Target', 'Weight')

plot = figure(title='Attempt')
network_graph = from_networkx(G, nx.circular_layout, scale=1, center=(0, 0))
plot.renderers.append(network_graph)

# save edge data to select only a subset of the edges
backup_edge_data = copy.deepcopy(network_graph.edge_renderer.data_source.data)

slider = Slider(start=0, end=4, value=0, step=.2)


# the last line of this object (the one with change.emit()) is probably unnecessary
code = """
const old_Weight = edata["Weight"];
const old_start = edata["start"];
const old_end = edata["end"];

let acceptableIndexes = old_Weight.reduce(function(acc, curr, index) {
  if (curr >= cb_obj.value) {
    acc.push(index);
  }
  return acc;
}, []);


const new_Weight = acceptableIndexes.map(i => old_Weight[i]);
const new_start = acceptableIndexes.map(i => old_start[i]);
const new_end = acceptableIndexes.map(i => old_end[i]);

const new_data_edge = {'Weight': new_Weight, 
                       'start': new_start, 
                       'end': new_end};

graph_setup.edge_renderer.data_source.data = new_data_edge; 
graph_setup.edge_renderer.data_source.change.emit();
"""

callback = CustomJS(args = dict(graph_setup = network_graph,
                                edata = backup_edge_data),
                    code = code)

slider.js_on_change('value', callback)

layout = row(
    plot,
    column(slider),
)

show(layout)

image of the networkx graph and the slider

Answer

I found out that this is actually due to a bug: https://discourse.bokeh.org/t/dynamic-layout-behavior-changes-between-bokeh-2-2-3-and-bokeh-2-3-0/7594

To solve this until the bokeh library is not updated (I am using version 2.4.0) I modified the customJS code to add placeholder data to match the initial datasource dimension:

code = """
const old_Weight = edata["Weight"];
const old_start = edata["start"];
const old_end = edata["end"];

let acceptableIndexes = old_Weight.reduce(function(acc, curr, index) {
  if (curr >= cb_obj.value) {
    acc.push(index);
  }
  return acc;
}, []);

\ compute how many fake edges have to be added
const num_ph = old_Weight.length - acceptableIndexes.length
\ create an array of that dimension with fake value '9999'
const placeholder = Array(num_ph).fill('9999')

\ for each new value, concatenate the new array with the placeholder array
const new_Weight = acceptableIndexes.map(i => old_Weight[i]).concat(placeholder);
const new_start = acceptableIndexes.map(i => old_start[i]).concat(placeholder);
const new_end = acceptableIndexes.map(i => old_end[i]).concat(placeholder);

const new_data_edge = {'Weight': new_Weight, 
                       'start': new_start, 
                       'end': new_end};

graph_setup.edge_renderer.data_source.data = new_data_edge; 
graph_setup.edge_renderer.data_source.change.emit();
"""