Config not reactive in some cases

[cshaa]

Steps to reproduce

1. Go to https://svelte-plotly-5lon9xrrn-m93as-projects.vercel.app/
2. Click on “Enable Fullscreen”
3. See that the button still says “Enable Fullscreen”, not “Disable Fullscreen“

Details

This is caused by plotly#6394 – Plotly.react ignores some changes in the config:

“Sometimes it works to change config via Plotly.react, sometimes it doesn't.”

Possible walkarounds

1. Switch from Plotly.react to Plotly.newPlot every time config is updated.
2. Add { ...element._context } to config. (No idea what this does, see the upstream ticket)
3. Display and then immediately hide the Plotly logo to trigger a config update, as seen here and here.

[cshaa]

Observation: This bug only seems to apply to deep changes in config.modeBarButtonsToAdd (see the original Steps to reproduce) and config.modeBarButtons (see Steps to reproduce #​2, below).

Steps to reproduce #​2

1. Go to https://svelte-plotly-era6xgkqo-m93as-projects.vercel.app/
2. Click on “Add custom button”
3. Click on “Rename first custom button”
4. See that it's still called “Foobar #​0”

[cshaa]

Fixed by introducing the configReactivityStrategy prop which can take either 'none' or 'static-plot' as values, 'static-plot' being the default. Setting the prop to 'none' disables the walkaround. Setting it to 'static-plot' briefly disables plot interactivity after every config change – this forces the modbar buttons to refresh.

This change is released in 1.0.0

[cshaa]

As per @Quacken8's report, the 'static-plot' strategy breaks interactivity in pie charts.

• Reproduce the issue
• Short term solution: default to 'none' for pie charts
• Long term solution: find a walkaround that works for all types of charts.

[camdecoster]

I believe the underlying issue that you've identified has been fixed in plotly/plotly.js#7475. It will be available in the next version.