plotly/plotly.js

[BUG]: Plotly.react with config that includes modeBarButtons broken in v3.1.1

Closed this issue · 3 comments

WeisSebastian commented

Description

With 3.1.1 using Plotly.react with a config object that has a modeBarButtons property on an already existing plot freezes the browser tab, spikes CPU Usage and consumes multiple GB of memory pretty quickly

Steps to reproduce

CodePen with reproducer
Clicking the Trigger plotly react button is triggering the issue.

Notes

This seems to be a regression in version 3.1.1, it works in 3.1.0 without issues.
When using WebGL plots, many WARNING: Too many active WebGL contexts. Oldest context will be lost. warnings are printed to the console (not visible in code pen, but visible when run locally). I'd assume it's some kind of infinite loop/recursion issue.
The error is present when using non WebGL plot types and the actual modeBarButtons added do not matter, it even happens with an empty modeBarButtons array (see example)

camdecoster commented

Thanks for the report! Sorry about this bug. It seems some of the changes from #7475 had some unintended consequences. I've added it to my list to look into.

  • 👍1
m-podlesny commented

A hacky bypass would be composing the custom modebar by adjusting the default one via modeBarButtonsToRemove and/or modeBarButtonsToAdd.
Example: Plotly v3 Modebar Buttons Issue Hack
Nonetheless, I confirm the bug mentioned by @WeisSebastian hits me as well.

camdecoster commented

This issue stems from a config diff check that we do here. The function doesn't handle nested arrays properly, so the diff check will always return true in this case. It didn't cause a problem before because the old code ran through react once and that was it. The new code can make a call to react recursively, which is triggered by your example. It only happens with the modeBarButtons config option because that's the only one that takes a nested array as a value. I'm updating the diff check to handle nested arrays.