Dash: mapbox layers fail to update on second callback

[araichev]

Hi folks, i've been plotting maps with custom GeoJSON layers using Plotly Scattermapbox and following this Plotly Community thread.
It works fine until i introduce callbacks.

I wrote a minimal Dash app to demonstrate my problem and made an animated GIF of it in action.
(I can't attach the GIF for some reason.)
The app has a dropdown and two maps, one with a marker and one with a marker and a custom GeoJSON polygon layer.
Selecting different colors from the dropdown should change the marker and polygon colors on both maps, but it only works on the first map, the one without a polygon.

[tomasfarias]

I'm running your test.py yet I cannot reproduce the bug. When selecting any color both maps (with marker only and with marker + GeoJSON polygon layer) change colors.

Might I make a small suggestion for you to try? There's no need to define a default argument for figure in the dcc.Graph elements of the app.layout, you can just leave them empty, like so:
html.Div([ dcc.Graph(id='map1', className='six columns'), dcc.Graph(id='map2', className='six columns'), ])
When the app starts it will automatically call all of the app.callbacks and fill in those for you.

Besides trying that, I really can't reproduce your problem to think of anything else.

[araichev]

Thanks for the suggestion on initializing the map.
I incorporated it in my code (Gist updated), but the problem still persists; see the new GIF.
This time i can update the color once on both maps (from orange to blue), but after that the right-hand map stops reacting.
This happens to me using Firefox 58.0.2 and using Chromium Version 64.0.3282.167 (Official Build).
I'm running LinuxMint 18.3 (64-bit), in case that matters.

[araichev]

@tomasfarias what versions of Plotly, Dash, etc. are you using?
My Pipfile.lock is attached.
Pipfile.lock.txt

[araichev]

Can somebody else try the example too?
It boggles my mind.

[tomasfarias]

@araichev I ran your app on dash 0.20.0, dash-core-components 0.18.1 and dash-html-components 0.8.0 and didn't experience any problem.

However I repeated the test in my work laptop, where I was running the latest version of dash and it's components, and there it was. Exactly the same issue you showed in that gif.

[dgatland]

@araichev I tested your updated code and have the same issue as you (can update the colour from orange to blue initially, but then the right-hand map no longer updates).

I ran it with dash 0.21.0, dash-core-components 0.21.0 and dash-html-components 0.9.0 (and viewed in Firefox browser)

[araichev]

OK, it appears we have a regression bug.
Any Dash developer out there up for fixing it?

[bcdunbar]

Specifically, the layers issue was introduced in dash-core-components 0.21.0 https://github.com/plotly/dash-core-components/blob/d034e25f6f56423ef2de7e5905328396040cf4d8/CHANGELOG.md#0210---2018-03-12

[ckaros]

any progress on this? Would the solution be an update to Dash or to Plotly.js?

[eddy-oj]

I have the same question as araichev!

[pikhovkin]

Any progress on this? I have same issue.

[janfreyberg]

+1 from me - this is quite a problem since this is the only way to do choropleth easily right now!

[chriddyp]

This is likely a plotly.js issue with Plotly.react. It would be helpful if someone could recreate this issue in plotly.js with codepen and make in issue in https://github.com/plotly/plotly.js

[pikhovkin]

@araichev, (your second gif) will the canvas of the second chart be updated (point will be orange) if you double-click on the second chart?

[araichev]

@pikhovkin no, it won't.

[yamunamaccarana]

I encountered the same issue with:

dash 0.21.0 
dash-core-components 0.22.1                    
dash-html-components 0.10.0                   
dash-renderer 0.12.1  

The only (temporary) solution I found was: pip install dash-core-components==0.18.1 as suggested above.

[charleyferrari]

This was fixed in https://github.com/plotly/plotly.js/pull/2734

Once the new plotly.js version is released and added this can be closed.

[leejt489]

Timeline for getting this fix propagated into dash?

[chriddyp]

Timeline for getting this fix propagated into dash?

As soon as plotly.js makes a release. Within 2 weeks usually. You can see their release schedule here: https://github.com/plotly/plotly.js/releases

[chriddyp]

Solved in https://github.com/plotly/dash-core-components/pull/228.

Many thanks to everyone who reported ❤️