Understanding animation_frame and sliders.
I have a px.density_mapbox() figure that is animated with animation_frame. The slider is the default/standard slider you get when using animation_frame.
I have a multi-page app that changes ‘pages’ based on the chosen data - meaning when the user selects a new key for data (from a dropdown) then the app fetches a new dataframe for that key (all different CSV files) and a new figure is drawn. This is handled by callbacks.
The data in the CSV is locations (lat,lon) with a date and different keys (different bird species), and the animation plays the location data from 01-01 to 12-31.
Where I am stumped is this - A user can select different keys (species) and may return to the same key. All good, changing the value in the dropdown resets the animation to the beginning, a new figure is drawn and animation begins at 01-01.
Now the issue - if the user moves the slider manually, then the data reflects that value. Hover over the data and it shows the value where the slider is positioned, e.g. move the slider to 03-01 and hover over data and it shows data from 03-01. But at some point you can ‘disconnect’ the slider from the data - meaning you set the slider to 07-05 but the data will show a different value, like 06-27. At this point the behavior is not repeatable nor understandable. Sometimes the slider will move and the label will increment/change along with the slider (so what the slider shows is what the label says). Other times the data will change in the figure but neither the slider nor the label will change at all. Sometimes the slider will move but the label will not changes. Sometimes the slider will be at a value but the data (when hovered) will be a different value. Sometimes pushing the stop button and reseting the slider to 0 and pushing stop again gets everything aligned. Other times that does nothing. It’s really quite maddening…
It would be great if the slider (always) accurately reflected the data in the figure and the label accurately showed the value of the slider.
Next, to make things more understandable for the user, I want to provide a ‘refresh’ button which would use the current data (species) and just reset the page with the slider back to 01-01. That does not seem possible. Well, it is possible to implement it with a callback, but it doesn’t do what I expect. I have a refresh button which reloads the entire figure but the animation state is seemingly kept client-side and so even though the slider (and label) show 01-01 the animation will start again at whatever position it was at when the user clicked the refresh button. So if they let the animation run until 08-20 and then click ‘refresh’ the figure will reset and the data will reset (hover will show data from 01-01) but the animation will start at the prior date, e.g. 08-20. It just jumps to that date and the data for that date is shown on hover.
Can anyone explain all this behavior? The ability to easily animate data using animate_frame is so nice - but it ends up being confusing to the user when trying to use the animated figure and the slider.
Give the app a try and see for yourself… the data is bird sighting data from Ebird. https://mappalachian.info:4443/app/neomigrants/
I have tried many different things to get a full page reset when the user clicks refresh and none work to reset the slider index to 01-01 when a new animation starts. The slider itself resets in the browser but the animation does not start on 01-01 unless the user manually resets it to 01-01 before pushing refresh. The behavior of the slider and the label and the animation is always pretty random.