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.

I cannot find much on this error other than maybe it has something to do with the webpack version?

This has occurred on Mozilla 64.0.2 and Chrome 71.0.3578.98 .

Dash version are:


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 = [        
        dash_table.DataTable(id = 'dTable'),
        dcc.Tab(label = 'Blank', children = [])

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

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)))
    return go.Figure(data=dataList)

# Create Table
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]

def dtableData(test):
    return df.to_dict('rows')

#Style table columns per data selected - Uses custom data component of graph 
def styleConditional(selectData):
    if (selectData is None):
        return [{}]
        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__':