Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

TypeError: "e[r] is undefined

So, this one may be a bit obscure but I am hoping that someone will recognize this error and be able to help.

I am trying to tie a graph and DataTable to each other. The idea is to allow a user to highlight a column in the table by using box select, etc. This will trigger the ‘style_cell_conditional’ prop of the table. From the table, a user should be able to click on any cell in a column and filter the chart to only include the data from that column.

This works if I do each independently - i.e. the box select highlights the chart and clicking on the table filters the chart. It also works if I click on the table and then use box select on the chart. HOWEVER, if I use box select and then click on the table, nothing happens UNLESS I click on another tab in the application and then click back.

That’s probably be confusing so I included an mp4 demo in the github repository: https://github.com/ghavranek/Dash_Graph_DataTable_Inter_Select .

When it breaks, there is no error in the terminal but the console logs: TypeError: "e[r] is undefined.
TypeError

I cannot find much on this error other than maybe it has something to do with the webpack version?
https://github.com/rxaviers/globalize-webpack-plugin/issues/78

This has occurred on Mozilla 64.0.2 and Chrome 71.0.3578.98 .

Dash version are:

dash==0.35.1
dash-core-components==0.42.1
dash-html-components==0.11.0
dash-renderer==0.15.0
dash-table==3.1.12
plotly==3.5.0

Example code is below and on github repo in venv file. Thanks in advance for any help you could give.

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from dash.dependencies import Input,Output,State
import plotly.graph_objs as go


import pandas as pd


df = pd.DataFrame({'Car':['Honda','Ford','Toyota','Chevrolet'],'Cylinders':[4,8,6,6],'Mpg':[27,20,28,25],})





external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = dcc.Tabs(id='tabs', children=[
        dcc.Tab(label='Cars', children = [        
        html.Div(id='blank'),
        dcc.Graph(id='graph'), 
        dash_table.DataTable(id = 'dTable'),
        dcc.Textarea(id='text')
        ]),
        dcc.Tab(label = 'Blank', children = [])
                
                ])

# Create chart with trace selected by the active cell from the datatable

@app.callback(Output('graph','figure'),[Input('dTable','active_cell')])
def graph(activeCells):
    
    
    cols = ['Cylinders','Mpg']
    
    if activeCells is not None:
        cols = [str(cols[activeCells[1]-1])]  # Select col to include in building data list
    
    dataList = []    
    for z in cols:
        z = go.Scatter(x=df['Car'],y=df[z],customdata = list(df[z].apply(lambda x: z)))
        dataList.append(z)
    
    return go.Figure(data=dataList)



# Create Table
@app.callback(Output('dTable','columns'),[Input('blank','children')])
def dtableCols(cols):
            colName = list(df.columns.unique())
            colID = list(df.columns.unique())
            cols = zip(colName,colID)
            
            return [{'name':i,'id':j,'editable_name':True,} for i,j in cols]

@app.callback(Output('dTable','data'),[Input('blank','children')])
def dtableData(test):
    return df.to_dict('rows')



#Style table columns per data selected - Uses custom data component of graph 
@app.callback(Output('dTable','style_cell_conditional'),[Input('graph','selectedData')])
def styleConditional(selectData):
    if (selectData is None):
        return [{}]
    else:         
        columnId = [selectData['points'][i]['customdata'] for i in range(len(selectData['points']))]
        
        return [{'if': {'column_id':columnId[i]},'backgroundColor':'grey'} for i in range(len(columnId))]



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