Unwanted Reload Dash (0.36) and Dash-table (3.3)?

Dash Python
1

Hi guys,

This is more a report for the Plotly team. I encounter problems where I could not keep data into a Datatable, because every new input into the table will automatically refresh the page, (FYI flask being in debug mode).

I was working on a project with the following versions - everything works as expected.

dash==0.28.6
dash-core-components==0.37.0
dash-html-components==0.13.2
dash-renderer==0.14.3
dash-table==3.2.0

then I just decided to update the different version and I encounter the problem with the table reloading my whole page to every single changes, with the following versions :

dash==0.36.0
dash-core-components==0.43.0
dash-html-components==0.13.5
dash-renderer==0.17.0
dash-table==3.3.0

So last try, I tried downgrading the others module and update Dash :

dash==0.36.0
dash-core-components==0.37.0
dash-html-components==0.13.2
dash-renderer==0.14.3
dash-table==3.2.0

And these gave me the error message : ‘Error loading depedencies’

Anyway, I went back to the first version for the moment because everything was working fine.
I just hope to help you guys resolve or at least detect the issue.

Here is the (incomplete) code if needed :

app = dash.Dash(__name__)

app.layout = html.Div(

children = [

dcc.Dropdown(
		id = 'dropdown-roster-site',
        options = list_option_venues,
        placeholder = 'Choose Venues',
        value = [],
        className = 'dropdown-roster-site'),

html.Div(
	children = [
    dash_table.DataTable(
	        style_table={'width' : '650'},
	        id='table-roster-site',
	        editable = True,
			data=df_roster.to_dict('rows'),
	    	columns=[{'id': c, 'name': c} for c in df_roster.columns]
    	), 


@app.callback(
Output(component_id='table-roster-site', component_property='data'),
[Input(component_id='dropdown-roster-site', component_property='value')]
)
def update_table_material_delivery(value) :
new_df_material = df_roster.loc[value].reset_index()
data = new_df_material.to_dict("rows")
return data

@app.callback(
Output(component_id='table-roster-site', component_property='columns'),
[Input(component_id='dropdown-roster-site', component_property='value')]
)
def update_table_material_delivery(value) :
new_df_material = df_roster.loc[value].reset_index()
columns = [{'name' : i, 'id' : i} for i in new_df_material.columns]
return columns

@app.callback(
Output('empty-div-2', 'children'),
[Input('table-roster-site', 'data')],
[State('dropdown-roster-site', 'value')])
def get_data(data, value) :
dataframe = pd.DataFrame(data)
now = datetime.datetime.now().strftime("%Y-%m-%d")
dataframe.to_excel(str(Path.cwd())+'\\assets\\'+str(value)+'_'+str(now)+'.xlsx')
2

Error loading depedencies

If you open the browser dev tools (F12 on chrome) do you see any message ?

3

I just tried again with the following, and it worked. I guess the message loading dependencies was related to a coding mistake.

dash==0.36.0
dash-core-components==0.37.0
dash-html-components==0.13.2
dash-renderer==0.14.3
dash-table==3.2.0

Would you like me to edit my message and remove that part?

4

@Philippe, sorry to be a pain in the ass, but I ran again in the same problem with depencies. And the message is the following :

image
image.png1022×902 66.5 KB 

dash==0.36.0
dash-auth==1.3.2
dash-core-components==0.43.0
dash-daq==0.1.0
dash-html-components==0.13.5
dash-renderer==0.14.3
dash-table==3.1.11
5

Final precision, I made the test again.

The code works with Dash 0.30.0, but the version 0.36 will raise the following message “Error Loading Dependencies”

6

but the version 0.36 will raise the following message “Error Loading Dependencies”

Do you have any callbacks with events ? They were removed in 0.36.0

7

No, I do not have any callback with events. The code, is the one poster upper if you wanna see more.
PS : Dash 0.35.0 works as well.

8

Sorry, dash==0.36.0 needs dash-renderer==0.17.0 to works otherwise it gives Error Loading Dependencies

1 Like
9

Did you solve the unwanted reloading problem? I’m still having trouble with it.
(I’m using Dash v0.38)
What happens is the following:

  1. A webpage is shown with a Upload component, in order for the user to upload a CSV with the data
  2. When uploading, the file contents are stored in a file in a specific folder in the project.
  3. When the uploading process finished, a message is shown saying that it was successful.
  4. After more or less 1 second, the page is automatically refreshed.

The problem here is that I am using a global variable to know if the file was already uploaded or not, and when it is set, the user has the option of clicking a button, otherwise the button does nothing. However, when the page refreshes, the value of the variable is reset, so the button does anything.

Why does the page refresh even if no refresh command is given?

app.py code below:

import datetime
import io
import base64

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd

import plotly.plotly as py
import plotly.graph_objs as go
import numpy as np

import parsedataframe as parse
import slidingwindow as sw
import modules.maxvelocitymodule as mvm
from server import app

file_loaded = None #TODO: Change this for user sessions
window_size = 20

app.layout = html.Div([
    html.H1("Sports Analytics"),
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '100%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        }
    ),
    html.Div(id='output-data-upload'),
    html.Button("Start", id='start-button'),
    html.Div(id='display-area')
])

def parse_contents(contents, filename):
    if filename[-3:] == "csv":
        content_type, content_string = contents.split(",")
    
        decoded_bytes = base64.b64decode(content_string)
        decoded_string = decoded_bytes.decode('utf-8').translate({ord(c): None for c in '\r'})
    
        try:
            f = open("assets/" + filename, "w")
            f.write(decoded_string)
            f.close()
            file_loaded = filename
        except:
            file_loaded = None
            
        return html.Div([
            html.H5(filename + " uploaded successfully")
        ])
    else:
        return html.Div([
            html.H5("File must be a .csv")
        ])
    


@app.callback(Output('output-data-upload', 'children'),
              [Input('upload-data', 'contents')],
              [State('upload-data', 'filename')])
def update_output(contents, name):
    if contents is not None:
        children = [
            parse_contents(contents, name)
        ]
        return children

         
@app.callback(Output('display-area', 'children'),
                [Input('start-button', 'n_clicks')])
def start_calculations(n_clicks):
    if file_loaded is not None:
        df = parse.prepare_data(parse.read_positions_csv("assets/" + file_loaded, False))
        df_length = len(df.index)
        sliding_window = sw.SlidingWindow(df, window_size)
        max_velocity_module = mvm.MaxVelocityModule()
        
        window_df = sliding_window.get_actual_dataframe()
        max_velocity_module.apply_to(window_df)
        for i in range(df_length - window_size):
            window_df = sliding_window.slide()
            max_velocity_module.apply_to(window_df)
        return max_velocity_module.get_layout()
    else:
        return html.H4("File not loaded yet")
10

Are you using dash-renderer 0.17.0?

When I use dash-renderer 0.17.0, any change within a DataTable will reload the full app.

I uploaded it, but yeah, it took me a while before understanding what was wrong.

Uploading the different module should fix your issue

11

I was using 0.18.0.

The thing is that I am not using the Datatable element, so it is strange the fact that I also get the reloads

12

Hey, did you solve the issue?

I was working on another app when that reload happened again, without dash-table now. I however realized that I was bringing a modification within the asset folder by creating a new file.

So I am thinking that any modifications within the asset folder may reload the app. I opened a topic to confirm this idea :

Let’s see.

13

No, it still happens.
But I agree with you. My app, after making calculations and saving the results in .csv files (in the assets folder), also reloads, so probably is that change that triggers the reload.

14

I finally found this page : https://dash.plot.ly/devtools

Maybe, if you try :

app.run_server(debug=True, dev_tools_hot_reload = False)

dev_tools_hot_reload = False, seems to do the trick on my side. Would you be able to confirm if it does on yours?

15

Yes, it was the hot reload that was causing the problem!
Thanks!

I guess that the only way to avoid the reloading problem would be configuring the hot reload not to check the assets folder for updates.
I’m using React in another project, and it works like that. When I update the source files, hot reload comes in and changes the app immediately, but when I change the css in the assets folder, I have to restart the server for the changes to apply.