plotly pan is not working in covidtrends

[joachimneumann]

Expected behavior:
After zooming into the plot and pressing on the plotly pan Icon at the top, the mouse cursor should change to the cross-shaped pan cursor image and allow moving the plotted data under the cursor to see the data from other countries with the current zoom level.

This expected behavior can be observed at https://plotly.com/~demos/1698
I have observed this bug on April 18, April 21 and April 22 of 2020 with up-to-date Chrome and Safari on MacOS

Observed behavior in covidtrends:
The cursor does not change and panning is not possible

Remarks:

• The dragmode lasso is also not working
• This issue is still present with plotly-basic.min.js
• This is not a critical issue, feel free to ignore.

[joachimneumann]

I am not a frontend developer and can only speculate about the cause of the issue:
David-Desmaisons/vue-plotly#8
https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
May be, there is a problem how vue reacts to events. Related file: vue-definitions.js

[aatishb]

@joachimneumann, thanks for filing this bug.

I believe this may be the section causing the bug. If you change line 75 to the version below, you recover panning behavior (but introduce other bugs with zooming in/out).

Plotly.react(this.$refs.graph, this.graphData.traces, this.graphData.layout, this.config);

I'll look into this some more to investigate.

Some background:

On a recent redesign we switched to using Plotly.react as this allowed us to simplify the codebase. As before, I needed to control the x and y range of the graph so that when you click autoscale after zooming in, we return to the initial x and y range set by the code (and not to an automatic range determined by Plotly).

However, I ran into an known issue with Plotly where it mutates the layout object when the user interacts with the graph, leading to unexpected side effects.

The workaround I adopted was to pass Plotly a deep copy of the layout object, so that original layout object is not mutated. However, this seems to be causing the issues you point out.

[aatishb]

@all-contributors add @joachimneumann for bug

[allcontributors]

@aatishb

I've put up a pull request to add @joachimneumann! 🎉