looping playback and tooltip styling

[interim17]

Problem:

Users want to be able to loop simulation playback, tooltips across simularium have different styling.

Closes https://github.com/simularium/simularium-website/issues/298

NOTE: Initial feature branch was mistakenly branched from auto-conversion feature branch instead of main, leading to git mess. Deleted that and recreated this branch so commit history is compressed into one commit.

Solution:

New feature (non-breaking change which adds functionality)

Gives users the ability to loop simulation playback, as well as setting primary global styling for tooltips.

Looping button was added to UI, clicking the button toggles a new piece of state in the viewer branch. Playback functions, icons, and tooltips respond to that state.

Styles were added/removed to make tooltips across the application have matching styling.

Steps to Verify:

Load a simulation, find and click the looping icon in the playback controls, run a simulation and see if its starts over when it reaches the last frame.

Check styling on tooltips by hovering cursor over left panel checkboxes, playback controls, and home icon. Should match design.

Keyfiles:

• UI elements added to PlaybackControls/index.tsx
• Looping state changes the standard suite of Redux files.
• ViewerPanel/index.tsx holds function toggleLooping to toggle looping state, and function receiveTimeChange which has the logic for looping playback.

[github-actions[bot]]

Coverage report

St.:grey_question:	Category	Percentage	Covered / Total
🟡	Statements	75.07% (-0.24% 🔻)	563/750
🟡	Branches	70.64%	77/109
🔴	Functions	41.67% (-0.95% 🔻)	75/180
🟡	Lines	73.72% (-0.17% 🔻)	505/685

Show files with reduced coverage 🔻

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------- | :------------------------------------------------------------- | :------- | :-------- | :------------------------------------------------------------- | | 🔴 |

`...` / reducer.ts

|

23.81% (-2.51% 🔻)

| 0% | 0% |

23.81% (-2.51% 🔻)

| | 🔴 |

`...` / actions.ts

|

53.33% (-0.51% 🔻)

| 100% | 0% |

53.33% (-0.51% 🔻)

|

Test suite run success

90 tests passing in 7 suites.

Report generated by 🧪jest coverage report action from ac22916ede152783b20d6daea533708afd79cc64

[interim17]

This feature works pretty well as it is, but I discovered a bug today related to the playback slider. Bug is in production branch but has side effects on the looping feature.

Looking into it now and hoping I can resolve easily and fold into this PR, may make a second issue if need be.

Error results from selecting points on the playback slider during playback.

[interim17]

The bug seems to be mostly on the backend.

When frames are selected during playback (either by using the slider, or when looping back to the first frame) there are issues with data formatting and floats arriving when integers are expecting. Not something I can really fix on my own, so I'm going to assume we will make a separate issue/ticket for this.

My question: since this bug affects this feature, should this PR continue to go through review or maybe be changed into a draft and postpone review until the bug is ironed out?