Slider to update playback speed

[tsmbland]

Description

Currently we have two dcc.Interval objects (data_interval and figure_interval), in charge of updating the data and figures. The time-interval of these two objects is specified manually in the code, and fixed to 7 seconds for both. This way we get data and figure updates at the same rate, but the interval objects are not linked in any way so updates don't necessarily occur on the same cycle (i.e. the figures may wait several seconds after the data has updated before updating themselves). Also, since the time-interval is fixed in the code it can't be changed from the app.

I have three main goals with this pull request:

1. Synchronise figure updates with data updates (i.e. have figures detect when the data changes and update accordingly, rather than running on their own interval)
2. Terminate updates once the pre-set data has reached the end
3. Add a slider to the control page so the time-interval can be adjusted from the app

The overall approach is fairly convoluted but the simplest I could come up with and seems to work. The main steps can be summarised as follows:

• I have changed figure_interval to a dcc.Store object which just contains a value and doesn't increment on its own. The update_figure_interval callback runs in the background and is responsible for synchronising figure_interval with data_interval (via the N_INTERVALS_DATA global variable).
• The update_figures callback on each of the figure pages then responds whenever figure_interval changes and triggers the figures to update
• Once the pre-set data has reached the end, the update_data callback will switch the disabled property of data_interval to True. This prevents data_interval from incrementing any further, therefore terminating data and figure updates.
• The time-interval for updates is now set from the control app. I've added a slider on the middle of the page (ranging from 2s to 10s, with a default value of 7s). This is linked to a callback (update_data_interval) which updates the interval attribute of data_interval.

Note: When the live model is being used this will only change the rate at which the data is pulled in and the figures updated, it doesn't interact with the model in any way so won't change the speed of the simulation or anything like that. When using the pre-set data, we add one new timepoint each interval, so this does change the rate at which new data appears.

Control app:

Close #97

Type of change

• [x] New feature (non-breaking change which adds functionality)
• [ ] Optimization (non-breaking, back-end change that speeds up the code)
• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] Breaking change (whatever its nature)

Key checklist

• [x] All tests pass (python -m pytest)
• [x] Pre-commit hooks run successfully (pre-commit run --all-files)

[tsmbland]

BUT, when working with data produced by the models live, there might be issues if requesting data too fast as there might not be new data. I seem to remember that the agents model produces data and pushes it to Gridlington precisely every 7 seconds, and that's where that number is coming from. I am not entirely sure how this changes in the visualisation side of things will get along with slow data ingestion in the data hub.

If the model has a fixed interval of 7 seconds then it probably makes sense to hide the slider when using the live model, as it won't really do anything apart from changing how quickly the plots update. If the model interval is something that can be configured, then we could get the controller to send signals to the model to update the interval (similar to what I'm doing in #109 for start/stop signals), but not sure if this is desired.

Maybe something to discuss with Yue/Phil, but for now I think we should just hide the slider when using the live model and keep the interval fixed to 7 seconds.