Skip to content
This repository has been archived by the owner on Jun 4, 2024. It is now read-only.

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

Open
xwk opened this issue Jul 6, 2021 · 2 comments

Comments

@xwk
Copy link

xwk commented Jul 6, 2021

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 xwk changed the title tooltip_conditional filter cause cause "TypeError: Can not read property of undefined" exception when client side pagination is enabled tooltip_conditional filter cause "TypeError: Can not read property of undefined" exception when client side pagination is enabled Jul 6, 2021
xwk added a commit to xwk/dash-table that referenced this issue Jul 20, 2021
To fix the bug reported in plotly#917  tooltip_conditional filter cause "TypeError: Can not read property of undefined" exception when client side pagination is enabled
@xwk
Copy link
Author

xwk commented Jul 20, 2021

I created a PR for fixing this bug #926

@xwk
Copy link
Author

xwk commented Jul 20, 2021

Withdraw my PR in favor of #906

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant