dash-table icon indicating copy to clipboard operation
dash-table copied to clipboard

tooltip_conditional filter cause "TypeError: Can not read property of undefined" exception when client side pagination is enabled

Open xwk opened this issue 3 years ago • 2 comments

When client side pagination is enabled, the tooltip_conditional filter will cause "TypeError: Can not read property of undefined" exception when try to navigate to next page. It is fine on the first page though.

A sample example to reproduce the problem.

import dash_html_components as html
import dash_table
import pandas as pd
from collections import OrderedDict


app = dash.Dash(__name__)

df = pd.DataFrame(OrderedDict([
    ('climate', ['Sunny', 'Snowy', 'Sunny', 'Rainy']),
    ('temperature', [13, 43, 50, 30]),
    ('city', ['NYC', 'Montreal', 'Miami', 'NYC'])
]))


app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        data=df.to_dict('records'),
        columns=[
            {'id': 'climate', 'name': 'climate'},
            {'id': 'temperature', 'name': 'temperature'},
            {'id': 'city', 'name': 'city'},
        ],
        page_size=3,
        tooltip_conditional=[
            {
                'if': {
                    'filter_query': '{climate} = "Sunny"',
                },
                'value': 'it is sunny'
            }
        ]
    ),
    html.Div(id='table-dropdown-container')
])


if __name__ == '__main__':
    app.run_server(debug=True, dev_tools_hot_reload=False, port=8051)

Test environment:

  • python==3.8.10
  • dash==1.20.0
  • dash-table==4.11.3

Run the program and try to navigate to the second page, you will see the error prompt by developer tool.

I did a bit debugging with Chrome developer tool. The exception is at this line.

More specifically, on the first time when this line is executed after navigating to the second page, it has row = 3, virtualized.offset.rows=0 and virtualized.data array containing only one row (i.e. the only row in the second page), which makes virtualized.data[row - virtualized.offset.rows] to access beyond the array tail and hence the exception.

I suspect the line should be changed to something like virtualized.data[row - virtualized.indicies[0] - virtualized.offset.rows], but I'm not familiar with the code base enough to tell whether this is a proper fix.

xwk avatar Jul 06 '21 01:07 xwk

I created a PR for fixing this bug https://github.com/plotly/dash-table/pull/926

xwk avatar Jul 20 '21 01:07 xwk

Withdraw my PR in favor of https://github.com/plotly/dash-table/pull/906

xwk avatar Jul 20 '21 02:07 xwk