Hi chriddyp, thanks for the quick reply!
Alright, I manage to reduce the app by a significant amount yet showing the bug:
There are 4 files (at the end of this message).
I use the following version for my test
dash==0.28.5
dash-auth==1.2.0
dash-html-components==0.13.2
dash-renderer==0.14.3
Flask==1.0.2
plotly==3.3.0 (is it called ?)
and in between two tests, I only change
dash-core-components==0.32.0
to
dash-core-components==0.28.0
and vice-versa.
At the launch of the app (python main.py), there should be a graph (mapbox) and a dropdown (just to initialise the map).
The map shows the world plus some layers around Santiago (Chile). I have put 10 layers of 1000 polygons as an example, but you can add more polygons if you want to see the problems enhanced.
You should notice that by changing the dash-core-components version, the rendering time varies from almost instantly for version 0.28.0 to more than 10 seconds for version 0.32.0 on my mac pro (2017).
I ll edit this message if I remember anything important, and let me know if I should add anything!
Thanks a lot!
main.py:
import os
import flask
import dash
import dash_auth
import layout as lay
from server import app, server
app.layout = lay.serve_layout
if __name__ == '__main__':
server.run(host='127.0.0.1', debug=True)
server.py
import dash
import flask
server = flask.Flask(__name__)
app = dash.Dash(sharing=True, server=server,
static_folder='static', dev_tools_serve_dev_bundles=False)
app.config['suppress_callback_exceptions']=True
app.index_string = '''
<!DOCTYPE html>
<html>
<head>
{%metas%}
<title>Mosaic</title>
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
{%css%}
</head>
<body>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
</footer>
</body>
</html>
'''
layout.py
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
from server import app
import callbacks
def serve_layout():
return html.Div([
dcc.Graph(
id='map_general',
config={'displayModeBar': False,},
style={'height': '450px'},
),
dcc.Dropdown(
id='features_unified',
options= [{'label': '1',
'value': '1'},
{'label': '2',
'value': '2'},
{'label': '3',
'value': '3'}],
value='1',
),])
callbacks.py
import geojson as gj
from dash.dependencies import Input, Output
import random
from server import app
@app.callback(Output('map_general', 'figure'),
[Input('features_unified', 'value')])
def create_main_map(feature):
layout_map_tab1= dict(
autosize=True,
height=450,
font=dict(color='#CCCCCC'),
titlefont=dict(color='#CCCCCC', size='10'),
margin=dict(l=0, r=0, b=0, t=0),
hovermode="closest",
showlegend=False,
plot_bgcolor="#191A1A",
paper_bgcolor="#191A1A",
title='',
mapbox=dict(
accesstoken='pk.eyJ1IjoiamFja2x1byIsImEiOiJjajNlcnh' + \
'3MzEwMHZtMzNueGw3NWw5ZXF5In0.fk8k06T96' + \
'Ml9CLGgKmk81w',
style="dark",
center=dict(lon=0, lat=0),
zoom=1,
)
)
layers = []
for n in range(1, 10):
poly = []
for nn in range(1, 1000):
minlat = random.uniform(-33.7, -33.5)
minlon = random.uniform(-70.9, -70.6)
maxlat = random.uniform(-33.5, -33.3)
maxlon = random.uniform(-70.6, -70.3)
poly.append([[minlon, minlat], [maxlon, minlat], [maxlon, maxlat], [minlon, maxlat], [minlon, minlat]])
poly = '{"geometry": {"coordinates": ['+str(poly)+'], "type": "MultiPolygon"}, "properties": {}, "type": "Feature"}'
layer = dict(
sourcetype = 'geojson',
source = gj.loads(poly),
below = "water",
type = 'fill',
color = '#770000',
opacity = 0.7,)
layers.append(layer)
layout_map_tab1['mapbox']['layers'] = layers
data = []
data.append(
dict(
type='scattermapbox',
lat=[0],
lon=[0],
text=[0],
hoverinfo='text',
showlegend=False,
)
)
return dict(data=data, layout=layout_map_tab1)