🏠 back to Observable

Plotly graphs don't reset after zoom

I’m getting a really weird error.

See minimal example here: https://observablehq.com/@bluprince13/plotly-graphs-dont-reset-after-zoom

For some reason, I get different behaviour depending on whether one cell refers to hardcoded values or to a different cell - even though the values are the same.

Hopefully, you can understand what the problem is from my minimal example. If not, let me know and I can try and explain it better.

The issue is with the dependence on limit. Its entries get mutated when you zoom in on the plot, and so when you drag the slider and the chart cell is re-evaluated, the chart pulls the new values from limit instead of resetting.

To solve this, you can change the chart cell so that it depends on a copy of the array in limit; that way when you zoom in, what gets modified is the copy, rather than limit itself:

1 Like

That makes total sense. Thank you!! How the heck did you figure that out? Have you come across this before?

Nvm. I think I get how you arrived at that conclusion now.

Yeah, I’ve inflicted many, many frustrating bugs on myself by forgetting that JS objects can get changed “under the hood”. In this case, you gave me a big clue by stating in the notebook that only the x-axis range didn’t reset. When I saw the reference to the cell limit in the chart cell, I then tried zooming in on the plot and then clicking on the value of limit to see whether it was getting changed. Once I saw that it was getting updated by the zoom operation, that confirmed my suspicions. Then I tried the usual sanitizing technique of “copying an object before passing a reference to it to a function which might modify it” and that did the trick.

1 Like