Global maps layout

Description

This MR updates the global threats map page to add the top threat maps and spots in the layout for additional placeholder text.

Changes Made

• Add new section at top of page for top threat maps
  • Set up w/ toggle so that individual threat categories can be added/removed from map
  • Adjust mapping code to not plot basin where a given threat is not the top threat and add a base map with all polygons (to set up maps to work with toggle)
• Update placeholders for sub-threat text
  • Place all text in collapsible accordions
  • Show drivers and potential impacts text by default
• Add the findex logo to the project page

How to Test

Pull changes locally and run npm run dev to preview in browser.

MR t-shirt size

• extra-small (e.g., update color scheme)
• small (e.g., add tooltip to chart)
• medium (e.g., add new static chart, add new pipeline output)
• large (e.g., initial data processing pipeline, interactive chart)

Timeline for review

• ASAP - blocker for deployment
• Today - blocker for ongoing work
• Next couple of days
• This week
• When reviewer has availability

Review Needs

Does this MR include data processing, modeling, or visualization code that will require domain review prior to release?

• Yes, and I have opened an issue to document the need for review, using the DomainReview issue template
• Yes, and a domain review issue already exists
• No

Related Issues

NA

Additional Notes

Only used placeholder text for now - will need to update later.

Merge Request Checklists

• Code changes adhere to best practices documented in README.md
• Code has been cleaned the way Vue likes it - run npm run lint --fix
• If applicable, the need for future domain review has been documented in an issue
• Below section documents which browsers the site has been tested on:
  • Desktop/laptop
    • Chrome
    • Safari
    • Edge
    • Firefox
  • Mobile device
    • Chrome
    • Safari
    • Edge
    • Firefox

requested review from @kvaarre-lamoureux

Okay, I'm testing the site and I'm running into an issue. When I first opened the link after running npm run dev, everything looked and worked as expected. However, at some point when I was clicking around the tab structure, the accordion folders disappeared, and I was left with the old placeholder text. Here is a screenshot of the console and issues tabs in the website inspection window:

I'm not sure what caused the website to break but here is all the info I have. After some refreshing of my VS code session and making sure my local repo was still up to date, I was able to get the accordions to load for habitat, but when clicking on a different tab the accordions were gone again.

added 1 commit

• 9ab34e9a - add max width for top threats map

Compare with previous version

added 1 commit

• d665d296 - fix accordion button click event for symbol

Compare with previous version

Okay, issue resolved! Everything is looking really slick! All the functionality is working as expected, the page looks good on different device simulations, and aesthetically this is exactly what I had in mind! Revisiting the legend justification convo we had before, I think the left justified legend looks the best, so no changes needed there.

I think this is good to merge!

Awesome -thanks for the review! This should rebuild the test site automatically in a bit. I'll ping you when it's up and good to share w/ the collaborators

approved this merge request

mentioned in commit 499a5339

merged