Hello,
I am trying to do the following steps in a Dash program:
1. upload a csv file into a DataTable
2. select one column
3. upon pressing a button, create a new table with that column only
However, when I try to assess the initial table’s data in the button callback, the browser renders only the message “Error loading dependencies”.
The problem seems to be with these lines:
@app.callback(
[Output('new-table', 'data'), Output('new-table', 'columns')],
[Input('submit-button', 'n_clicks')],
[State('data-table', 'data')] # this line triggers "Error loading dependencies"
)
def trigger_update(n_clicks, data):
...
Any help would be appreciated…
A complete example is attached below.
Regards,
jpp
–
# -*- coding: utf-8 -*-
import base64
import datetime
import io
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from dash.dependencies import Input, Output, State
import dash_table
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config['suppress_callback_exceptions'] = True # for avoiding error in "unknown" dynamic elements
app.layout = html.Div([
html.Div(className="three columns", children=[
html.Div([
dcc.Upload(
id='upload-data',
children=html.Div([
'Drag and Drop or ',
html.A('Select Files')
]),
style={
'width': '90%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
},
# Allow multiple files to be uploaded
multiple=True
),
html.Div(id='output-data-upload'),
]),
]),
html.Div(className="two columns", children=[
html.Label('Select column'),
dcc.RadioItems(id='sel-col'),
html.Hr(),
html.Button(id='submit-button', n_clicks=0, children='Submit'),
]),
html.Div(className="two columns", children=[
html.Div(id='output-state', children='Initial value supplied here'),
dash_table.DataTable(
id='new-table',
# editable=True
),
]),
], style={'columnCount': 1})
def parse_contents(contents, filename, date):
content_type, content_string = contents.split(',')
decoded = base64.b64decode(content_string)
try:
if 'csv' in filename:
# Assume that the user uploaded a CSV file
df = pd.read_csv(
io.StringIO(decoded.decode('utf-8')))
elif 'xls' in filename:
# Assume that the user uploaded an excel file
df = pd.read_excel(io.BytesIO(decoded))
except Exception as e:
print(e)
return html.Div([
'There was an error processing this file.'
])
return html.Div([
html.H5(filename),
html.H6(datetime.datetime.fromtimestamp(date)),
dash_table.DataTable(
id='data-table',
n_fixed_columns=100,
n_fixed_rows=10,
data=df.to_dict('records'),
columns=[{'name': i, 'id': i} for i in df.columns],
# editable=True
),
html.Hr(), # horizontal line
])
@app.callback(Output('output-data-upload', 'children'),
[Input('upload-data', 'contents')],
[State('upload-data', 'filename'),
State('upload-data', 'last_modified')])
def update_output(list_of_contents, list_of_names, list_of_dates):
if list_of_contents is not None:
children = [
parse_contents(c, n, d) for c, n, d in
zip(list_of_contents, list_of_names, list_of_dates)]
return children
@app.callback(
Output('sel-col', 'options'),
[Input('data-table', 'data'), Input('data-table', 'columns')])
def set_time_option(data, columns):
return [{'label': i, 'value': i} for i in [c['name'] for c in columns]]
@app.callback(
Output('output-state', 'children'),
[Input('submit-button', 'n_clicks')],
[State('sel-col', 'value')])
def update_output(n_clicks, col):
return "{} clicks, sel-col is {}".format(n_clicks, col)
@app.callback(
[Output('new-table', 'data'), Output('new-table', 'columns')],
[Input('submit-button', 'n_clicks')],
[State('data-table', 'data')] # this line triggers "Error loading dependencies"
)
def trigger_update(n_clicks, data):
if n_clicks == 0:
return [], []
return [], []
if __name__ == '__main__':
app.run_server(debug=True)