Data table rendering does not update with ColumnDataSource change in >0.12.6 when used in tabs

I recently upgraded from bokeh 0.12.6 and discovered different behavior in data table rendering. This happened for me 0.12.7 and 0.12.9. It seems as though changes to the source data do not instigate a change in the data table rendering in the same way bokeh 0.12.6 did.

I do have code below illustrating a bug, which I believe is related to the following comments. So please bare with me through the less concrete examples.

In the following example the data in the plot and table share the same ColumnDataSource. The data table appears empty until I scroll the table view. I created a very short .mpg showing the behavior, I’m not sure how to show this bug with minimal code. https://www.dropbox.com/s/64q8itqux5pf4hv/data_table_bug.mp4?dl=0

In some cases, only one row of data are displayed even when a 2nd table with the same ColumnDataSource is used which displays the full dataset (see attached image). table_bug

And finally, this one I was able to create some minimal code. Please compare running it on 0.12.6 and 0.12.9. When you click the checkbox, the value from the dropdown should be added to the table on the right. However, in 0.12.7 through 0.12.9, the table is not updated until the ‘<’ button is clicked. You can verify that the ColumnSourceData has changed by the line printed to the terminal, as well as unchecking the box if it’s correlated variable is in the table… this results in the data being removed but the table still has the same number of rows.

I’m using Chrome v60 on Mac OS 10.12.6 and Ubuntu 16. Python 2.7.10 and 2.7.12

from __future__ import print_function
from future.utils import listitems
from bokeh.layouts import column, row
from bokeh.models import ColumnDataSource
from bokeh.io import curdoc
from bokeh.models.widgets import Select, Button, TableColumn, DataTable, CheckboxGroup

source_multi_var_include = ColumnDataSource(data=dict(var_name=[]))
variables = ['a', 'b', 'c']

multi_var_reg_vars = {name: False for name in variables}


def update_check_box():
    if multi_var_reg_vars[corr_chart_x.value]:
        corr_chart_x_include.active = [0]
    else:
        corr_chart_x_include.active = []


def corr_chart_x_prev_ticker():
    current_index = corr_chart_x.options.index(corr_chart_x.value)
    corr_chart_x.value = corr_chart_x.options[current_index - 1]
    update_check_box()


def corr_chart_x_ticker(atrr, old, new):
    update_check_box()


def corr_chart_x_include_ticker(attr, old, new):
    if new:
        multi_var_reg_vars[corr_chart_x.value] = True
    if not new:
        multi_var_reg_vars[corr_chart_x.value] = False
    included_vars = [key for key, value in listitems(multi_var_reg_vars) if value]
    included_vars.sort()
    source_multi_var_include.data = {'var_name': included_vars}
    print(source_multi_var_include.data['var_name'])


corr_chart_x_include = CheckboxGroup(labels=["Include"], active=[], width=400)
corr_chart_x_prev = Button(label="<", button_type="primary", width=50)
corr_chart_x_prev.on_click(corr_chart_x_prev_ticker)
corr_chart_x_include.on_change('active', corr_chart_x_include_ticker)

corr_chart_x = Select(value=variables[0], options=variables, width=300)
corr_chart_x.title = "Select a Variable"
corr_chart_x.on_change('value', corr_chart_x_ticker)

columns = [TableColumn(field="var_name", title="Variables for Multi-Var Regression", width=100)]
data_table_multi_var_include = DataTable(source=source_multi_var_include, columns=columns,
                                         height=175, width=275, row_headers=False)


layout_correlation = column(row(column(corr_chart_x_include,
                                       row(corr_chart_x_prev, corr_chart_x)),
                                data_table_multi_var_include))

# Create the document Bokeh server will use to generate the webpage
curdoc().add_root(layout_correlation)
curdoc().title = "DVH Analytics"

Stack traceback and/or browser JavaScript console output

Screenshots or screencasts of the bug in action

[bpostance]

I am having the same issue, this is still open if I understand correctly? The current workaround is to not use tabs?

Yes same here. @bpostance As a workaround I find that if I initialize the table with some dummy rows then the update will be visible for that number of dummy rows. e.g. this shows a total of 10 rows on update.

#initialize table with 1 dummy row
df1 = pd.DataFrame({'dummy':range(10})
table1_columns = [TableColumn(field=col, title=col) for col in df1.columns]
table1_source = ColumnDataSource(df1)
datatable1 = DataTable(source=table1_source,    
                           columns=table1_columns,
                           width=1200,
                           height=1200)

# function to update table source
def update_table(attr, old, new):
     new_df = function_to_create_updated_df()
     datatable1.source =  ColumnDataSource(new_df )
     datatable1.columns = [TableColumn(field=col, title=col) for col in new_df .columns]
        
# callback to update table        
wdiget.on_change("value",update_table)

[bryevdv]

This was fixed at some point, the example in https://github.com/bokeh/bokeh/issues/6925#issuecomment-330894142 is working for me with 2.2 (table shows immediately without needing any scrolling)