Slide between generations

[GoelBiju]

Description:

Add a Slider component (similar to that found in Slider Material UI) to show the generations that have been added to the database.

Acceptance criteria:

• [x] Able to slide between the generations that have been stored in the database,
• [x] The slider updates when receiving new generation information,
• [x] Able to scroll back through Pareto front estimations with the plugin loaded,
• [x] There should be a pause and replay button alongside the slider (left of the slider),
• [x] Controls include textbox and button to enter generation number to view,
• [x] Able to enter a generation and click view to load its data,
• [ ] Ensure that there are no side-effects from using controls e.g. hooks firing multiple times.

[GoelBiju]

There is currently an issue where if you pause the run and by the time you press play the run has finished, the current generation does not update to the correct final generation value. This means that the final data is not fetched as a result.

I need to rectify this so that when play is pressed (live mode is on) the run information is fetched and again and as a result the data is fetched again for the run.

[GoelBiju]

There is currently an issue where if you pause the run and by the time you press play the run has finished, the current generation does not update to the correct final generation value. This means that the final data is not fetched as a result.

I need to rectify this so that when play is pressed (live mode is on) the run information is fetched and again and as a result the data is fetched again for the run.

This has been fixed with https://github.com/GoelBiju/Visualising-Optimisation-Data/commit/4bce29a43f87e61813b9477335c9135bce4a2d31 by setting the currentGeneration to the initial value of -1 which in turns triggers the React hook to add the current generation from the run (once fetched) to the queue to fetch data for.

[GoelBiju]

We need to have a way of handling a change in the text-field for viewing another generation data but also update it when currentGeneration changes. One way of doing this would be to only set the value of the text-field as currentGeneration when we are in liveMode or replayMode otherwise when paused we should use another variable. This variable would need to be also kept up to date with the currentGeneration value when not in use.

[GoelBiju]

We need to have a way of handling a change in the text-field for viewing another generation data but also update it when currentGeneration changes. One way of doing this would be to only set the value of the text-field as currentGeneration when we are in liveMode or replayMode otherwise when paused we should use another variable. This variable would need to be also kept up to date with the currentGeneration value when not in use.

In addition to this, we also need to implement a separate variable to hold the current value of the slider since this is also locked onto currentGeneration which does not make it easy to change the slider as it does not show which value it will be moved to.

[GoelBiju]

We need to have a way of handling a change in the text-field for viewing another generation data but also update it when currentGeneration changes. One way of doing this would be to only set the value of the text-field as currentGeneration when we are in liveMode or replayMode otherwise when paused we should use another variable. This variable would need to be also kept up to date with the currentGeneration value when not in use.

In addition to this, we also need to implement a separate variable to hold the current value of the slider since this is also locked onto currentGeneration which does not make it easy to change the slider as it does not show which value it will be moved to.

I have addressed both of these issues by using a controls variable which is sets the current generation as the maximum value for the slider and text-field component (using InputProps) when live mode is turned off. When it is turned back on we use the total generation as the maximum value as both are disabled in this case.