Time estimate or Size

medium: 10-15

Problem

Closes #411

Solution

New redux actions/type/constant/state for selectedAgent

`ViewerPanel`

Retrieve agent meta data via the new viewer callback onFollowObjectChanged and put into redux as AgentMetadata.

`ModelPanel` -> `SidebarContents`

Get metadata from state and pass it (and UIDisplayData) down to new Metadata Panel. Refactored both of these components from Classes into Functional Components, trivial because no lifecycle methods. Small tweaks to html structure and CSS

`MetadataPanel`

Hopefully it reads easily, is fairly self explanatory. Use helper functions and manage a few pieces of state/constants to track whether the panel is open and what it should display.

selectedAgentNotRendered is truthy only when the agent type is a positive number, greater than the number of agents in UIDisplayData. I don't know if there are any other ways to check for an agent that exists, but has "left the simulation" that don't collide with the null state where the id is -1.

New feature (non-breaking change which adds functionality)

Steps to Verify:

Open and close the panel.
Select/deselect agents, play the sim and verify that data updates

Screenshots (optional):

Thanks for contributing!

Coverage report

St.^{:grey_question:}	Category	Percentage	Covered / Total
🟡	Statements	66.23% (-0.03% 🔻)	651/983
🟡	Branches	65.73%	94/143
🔴	Functions	34.8% (-0.3% 🔻)	87/250
🟡	Lines	64.56% (-0.09% 🔻)	581/900

St.^{:grey_question:}

simularium / simularium-website

Feature/information panel #532

Time estimate or Size

Problem