✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
πŸ‡ Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Error Loading Layout after core-components 0.22.1 and ngrok

I am getting thrown an Error Loading Layout error when using Dash version >= 0.22.1 and deploying test app with ngrok. Pre-0.22.1, it worked fine, code below. Need the update as Candlesticks are broken in version < 0.22. I will replace the SQL query with a dataframe when I can.

Of note, I have isolated to 0.22.1 of dash-core-components, graph works with dash==0.21.1, dash-renderer==0.12.1, dash-html-components==0.10.1, with dash-core-components==0.22.0, but not dash-core-components==0.22.1 in plotly==2.6.0

import dash
from dash.dependencies import Output, Event
import dash_core_components as dcc
import dash_html_components as html
import plotly
import pandas as pd
import time
from datetime import datetime, timedelta
from sqlalchemy import create_engine
import dash

app = dash.Dash(__name__)
app.layout = html.Div(style={'backgroundColor':'rgb(27,36,47)',
                         'border-radius':'25px',
                         'height':'96vh'
                         },
                  children=[
                  

                            dcc.Graph(id='live-graph', animate=False,
                                      style={'padding-top':'10px',
                                             'backgroundColor':'rgb(27,36,47)'
                                             },
                                      figure={'layout':go.Layout(plot_bgcolor='rgb(27,36,47)',
                                                                 paper_bgcolor='rgb(27,36,47)',
                                                                 font={
                                                                       'color':'white'
                                                                       }
                                                                 )
                                              }
                                      ),
                                 
                 
                  
                            dcc.Interval(id='graph-update',
                                         interval=10*1000
                                         ),
                            ]
                  )


@app.callback(Output('live-graph', 'figure'),
          events=[Event('graph-update', 'interval')])
def update_graph_scatter2():
        try:
            db2 = create_engine('mysql+mysqlconnector://root:<password>@localhost/bitcoin', echo=False)
            c = db2.connect()
            N = 3
            week = int(time.time()) - 86400*N
            df = pd.read_sql(
            """
            SELECT
              FLOOR(MIN(UNIX_TIMESTAMP(trade_datetime))/300)*300 AS timestamp,
              SUM(trade_volume) AS volume,
              SUM(trade_px*trade_volume)/sum(trade_volume) AS wavg_price,
              SUBSTRING_INDEX(MIN(CONCAT(UNIX_TIMESTAMP(trade_datetime), '_', trade_px)), '_', -1) AS `open`,
              MAX(trade_px) AS high,
              MIN(trade_px) AS low,
              SUBSTRING_INDEX(MAX(CONCAT(UNIX_TIMESTAMP(trade_datetime), '_', trade_px)), '_', -1) AS `close`
            FROM exch_gdax_btcusd_snapshot_20180515 WHERE UNIX_TIMESTAMP(trade_datetime) >= {}
            GROUP BY FLOOR(UNIX_TIMESTAMP(trade_datetime)/300)
            ORDER BY timestamp;
            """.format(week), c)

            data = plotly.graph_objs.Candlestick(
                    x=df.index,
                    open=df.open,
                    close =df.close,
                    high = df.high,
                    low = df.low,
                    name='Price $BTC',
                    yaxis='y'
                    )

            data2 = plotly.graph_objs.Bar(
                    x=df.index,
                    y=df.volume,
                    name='Volume',
                    marker={'color':'rgb(27, 36, 47)'},
                    yaxis='y2'
                    )
            return {'data': [data,data2],
                    'layout' : go.Layout(xaxis=dict(range=[min(df.index),max(df.index)],
                                                    linecolor='white',
                                                    linewidth=2,
                                                    gridcolor='rgb(60,72,94)'
                                                    ),
                                            
                                         yaxis=go.YAxis(dict(range=[min(df.low)-20,max(df.high)+20],
                                                             linecolor='white',
                                                             linewidth=2,
                                                             gridcolor='rgb(60,72,94)'
                                                             )
                                                        ),
                                                
                                         yaxis2=go.YAxis(dict(range=[0,max(df.volume)+200],
                                                              side='right',
                                                              overlaying='y',
                                                              linecolor='white',
                                                              linewidth=2,
                                                              gridcolor='rgb(60,72,94)'
                                                              )
                                                         ),

                                                 
                                         title='BTC Price',
                                         plot_bgcolor='rgb(27,36,47)',
                                         paper_bgcolor='rgb(27,36,47)',
                                         font={'color':'white'},
                                         legend={'orientation':"h",'x':.1,'y':-.2}
                                          )
                    }

        except Exception as e:
            with open('errors.txt','a') as f:
                f.write(str(e))
                f.write('\n')
        
        

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

Never mind, turns out it had nothing to do with the part I showed, it was something to do with how core-components was creating the html. Fixed the layout and now its working.

do you mind sharing how this is fixed? I have the same problem (working in 0.22.0 but not 0.22.1)

Answering my own question here in case anyone encounters the same problem (or this can be handled by dash?)

What was causing the problem is that since 0.22.1 every figure dict has to have a β€˜data’ key to function correctly (just adding data=dict() ) is sufficient.

The cause seems to be this code that was introduced since 0.22.1:

+            if (intersection(
+                pluck('type', figure.data),
+                ['candlestick', 'ohlc']).length
+            ) {
+                PlotMethod = Plotly.newPlot;
+            } else {
+                PlotMethod = Plotly.react;
+            }

Thanks for looking into this @jzh! Just made an issue about this here: https://github.com/plotly/dash-core-components/issues/223