Changes:

• This depends on the API changes in Station groups challenger-api#68
• Added the left sidebar, which includes station grouping and summary cards for ocean regions and stations.
• Changed the map zooming/flying logic to work with left sidebar menus. Based on the design, the current interaction logic consists of three states (not sure if this is Fangyu's original intent):
  • State 1: top-level summary view for FAO areas. The map is zoomed out to include all filtered stations.
  • State 2: Focused view on a single FAO area. The map is zoomed in to include only stations in that area. Click on a different icon in the horizontal scroll menu on the top switches the focus to the corresponding FAO area. Clicking on the currently selected/highlighted icon sends the user back to State 1.
  • State 3: Station detail view. The state can be entered by clicking on the "view more" button on any station card from State 2, or by clicking on station pins on the map from any state. Once you are in State 3, clicking on the station pin or the "back" button in the detail panel takes you to State 2. The horizontal scroll menu for FAO areas behaves in the same way as in State 2.
• Reenabled clustering as it seems to be involved in the interaction as well -- You should be able to expand clusters until you can click on a single station, which will then take you straight to State 3.
• Updated feature styles on the map, and changed the basemap to World Imagery so there is enough contrast between the station/cluster labels and the background.

Issues:

• I added automatic scrolling to make sure the highlighted FAO area and station in the menu are actually visible, otherwise there is no feedback when you click on the station pin or the "prev"/"next" buttons in the detail view because all the changes in UI are hidden. But there is a bug in Chrome that doesn't let you scroll two things at once, so I made a hacky solution around it. I'm not sure if it always works.
• I believe Fangyu didn't make all the icons for FAO areas, so for now I'm actually generating those contours on the fly by rendering the GeoJSON feature of each FAO area onto a tiny map and caching the image data extracted from the canvas for subsequent renders. I think this is completely unnecessary and we should just use static PNG or SVG images. We should remove this hack once Fangyu has time to make those icons.