[BUG] Javascript error when using dcc.Loading around 3+ Graph objects that use modBarButtons

[jordanweaver]

Describe your context
Please provide us your environment so we can easily reproduce the issue.

• replace the result of pip list | grep dash below

dash                 1.3.1
dash-core-components 1.2.1
dash-html-components 1.2.1
dash-renderer        1.1.0
dash-table           4.3.0

• don't think this is frontend related, but here are my details:

  • OS: macOS
  • Browser Firefox (also seen on Chrome)
  • Version 76.0a1 (2020-03-19)

Describe the bug

The app will throw a Javascript error if it uses a dcc.Loading component to wrap a collection of Graph objects, specifically ones that specify a config containing modBarButtons. There doesn't seem to be a problem when we only have 2 Graphs, but once we add a third (duplicated) Graph the error appears.

must provide button 'click' function in button config

Also posted on the Plotly forums here

I have also included a reasonably small test app that illustrates the problem. It's probably a bit longer than it needs to be but we weren't sure how many aspects of our setup were complicating the issue. I can try to simplify further if needed.

click_bug.py.txt

Expected behavior

Given that the app works as long as we only duplicate our graph once (for a total of two graph objs), we'd expect this to continue to work when adding additional objects.

Screenshots

cc @ZachPope531

[alexcjohnson]

As I mentioned in #1924 - which I closed because we should fix it in plotly.js:

The problem is here where we mutate the input - which is the user-provided array, something we should not alter. Instead we should create a copy with the object inserted in place of the string. Would be a one-line change if we used ramda in plotly.js, but we don't...

[alexcjohnson]

Closed by @nickmelnikov82 in plotly/plotly.js#6177 and included in Dash via #2042 🎉