Feature/555 add cyan to overview

[maxdiebold-erg]

Related Issues:

• HMW-555

Main Changes:

• Added CyAN content to the Community page's Overview tab.
• Added a ResizeObserver to the VirtualizedList component to address rows with dynamically-sized content.
  • This addition caused many errors with the message "ResizeObserver loop completed with undelivered notifications" or "ResizeObserver loop limit exceeded", which have not been thrown with other instances of ResizeObserver in the app. This is due to the rate at which elements in the virtualized list are added to the observation list: the errors are triggered when ResizeObserver sends multiple messages inside a single animation frame, fearing an infinite loop, which is not the case here. As stated by the author (https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded#comment86691361_49384120 and ResizeObserver#observe() firing the callback immediately results in infinite loop WICG/resize-observer#38), this error is usually benign and can be ignored.
• Fixed some style issues in the popups.
• Changed the text 'CyAN Satellite Imagery' to 'Harmful Algal Blooms (HABs)'.

Steps To Test:

1. Navigate to http://localhost:3000/community/lake%20okeechobee/overview.
2. Open the Water Monitoring Locations tab, and confirm that the CyAN layer toggles on (and is visible), along with the other monitoring layers.
3. Expand the Lake Okeechobee CyAN list item, and confirm that all content is visible without scrolling in the accordion item.
4. Confirm the proper text changes were made in this tab and in the "Current Water Conditions" of the Water Monitoring tab.

TODO:

• We should wait to hear back about the proper text changes before merging this in. While the email states the change should be "Harmful Algal Blooms (HABs)", "Potentially Harmful Algal Blooms (HABs)" was discussed in a recent meeting, along with other potential changes.

[cschwinderg]

I'm seeing some rendering issues with the ResizeObserver. On smaller screens (1000px X 720px) a scrollbar is shown for the accordion headers. Also, I'm seeing a lot of flickering (gif below) on smaller screens (1000px X 720px). It seems like removing , overflowX: 'hidden' from line 120 of VirtualizedList.tsx fixes the issue.

What was the issue the ResizeObserver is intended to fix? I'm assuming it is just to move away from reach-ui.

An unrelated issue, the pageYOffset (used on line 89 of the VirtualizedList.tsx file) value has been deprecated. We should switch to scrollY.

[maxdiebold-erg]

The ResizeObserver is for properly resizing when asynchronous content is loaded inside the virtualized list (i.e. the CyAN content). Otherwise, the expanded list items will have the height that is calculated when loading spinners are visible.

It looks like react-window was working on similar functionality with the DynamicSizeList (bvaughn/react-window#516) class, but ran into issues. Other similar packages (e.g. React Virtuoso) use ResizeObserver under the hood.

Good catch on that overflow issue, I'll make those changes.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[cschwinderg]

Thank you for making those changes. The switch to using ResizeObserver makes sense.

I'm going to go ahead and merge this in. Kiki can let us know what she thinks of the new HABs text during our next meeting.