plotly / plotly/dash

Dashtable case-insensitive filter causes exception when the column contains null value

Open
#2,960 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug dash-data-table P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

If a column in the table contains null value at some rows and you try to do a case insensitive filtering like "ine foo', a javascript exception "Cannot read property 'toString' of null" exception" will occur. Apparently it is caused by the line "lhs.toString().toUpperCase()" of fnEval() method in relational.ts failed to check whether lhs (i.e. the cell value) is null or not.

A sample app to reproduce the problem.

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

import dash

app = dash.Dash(__name__)

df = pd.DataFrame(OrderedDict([
    ('climate', [None, 'Snowy', 'Sunny', 'Rainy']),
    ('temperature', [13, 43, 50, 30]),
    ('city', ['NYC', None, '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'},
        ],
        filter_action="native",
    ),
    html.Div(id='table-dropdown-container')
])


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

Run the app, in the 'city' column header of the table, type in 'ine foo' and hit enter, which should reproduce the problem.

I had a PR for fixing this bug for an old version of dash-table at https://github.com/plotly/dash-table/pull/935/files

Environment:

dash                 2.17.1
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table           5.0.0

- OS: Ubuntu 22.04
- Browser: Chrome
- Version: 127.0.6533.119

image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in relational.ts at the fnEval() method, then run the supplied Dash sample app and reproduce the case-insensitive filter with null cells. Done means entering a filter such as "ine foo" in the city column no longer raises a JavaScript exception when matching rows contain null values.

Written by the indexing model from the issue text.

Assessment

Tech stack
python, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.