331 pin on click

[gsehrlich]

Checklist

• Add description
• Reference the open issue that the pull request addresses
• Pass code quality checks
  • spin up docker docker-compose up -d --build
  • enter api container docker-compose exec api /bin/bash
  • run api tests make validate
  • exit container ctrl/command+D or exit
  • enter web container docker-compose exec web /bin/sh
  • run front-end tests npm run test or npx jest
  • lint npm run lint-fix
  • exit container as above
• Request code review
  • Please allow 36 hours from opening a pull request before merging a pull request- even if it has already received an approving review.
• Address comments on code and resolve requested changes
• Merge own code

Description

Issues: #331, #442, and #464

Brief description of solution

• Manually handle mouse interaction with map so that the popup follows the cursor while hovering over data and can be pinned by clicking on a data point
• Add clickable question mark link to popup
• Use react-map-gl's Popup element to fix the popup to a specific latitude and longitude; popup now automatically appears in optimal orientation to stay within the map frame
• Give the popup a custom close button that plays nice with the new event handling
• Splice in correct EPA link
• When the user hovers over the question mark, show a modal at the top of map to clarify units and EPA link

Reviewer: It'll be easier to understand my edits by looking at the individual commits. At least for the last batch of commits (today's), I separated them into hunks representing atomic changes.

[theecrit]

@gsehrlich Should we start with this link for the question mark icon destination? https://www.airnow.gov/aqi/aqi-basics/

It's imperfect, because it implies we're measuring more than just PM2.5, but I think it's a decent MVP start.

I also wonder if we should change the icon from a question mark to an off-site link icon. Normally I would discourage opening links in a new window, but given the nature of the interaction (that users will likely want to remain in the map experience), I wonder if we should make an exception in this instance. E.g. "external square alternate" from Semantic UI.

[gsehrlich]

I think it's a decent start as well, certainly better than the EPA homepage, which is what I have in there right now. My main concern is actually that users will think the numbers on the map (which are in hidden units of micrograms per cubic meter) mean the same thing as the numbers in the chart (which have been converted to AQI). Especially since I haven't added text anywhere yet to clarify that.

…

On Thu, Jun 2, 2022 at 10:52 AM Jess Sand ***@***.***> wrote: @gsehrlich <https://github.com/gsehrlich> Should we start with this link for the question mark icon destination? https://www.airnow.gov/aqi/aqi-basics/ It's imperfect, because it implies we're measuring more than just PM2.5, but I think it's a decent MVP start. — Reply to this email directly, view it on GitHub <#472 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACT5UIWJ3VPNY7IVKI2T2YLVNDYEBANCNFSM5XDCRMQQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[theecrit]

My main concern is
actually that users will think the numbers on the map (which are in hidden
units of micrograms per cubic meter) mean the same thing as the numbers in
the chart (which have been converted to AQI).

Yeah, I hear that. Not sure we should worry about it for MVP but maybe prioritize it as a fast-follow for improvements?

[theecrit]

Actually, I'm just realizing, we have an open criteria item in the comments on this in-progress issue: #464 (comment)

[gsehrlich]

Good point. Maybe I'll just implement that when I put the new link in and call it done.

…

On Thu, Jun 2, 2022 at 4:54 PM Jess Sand ***@***.***> wrote: Actually, I'm just realizing, we have an open criteria item in the comments on this in-progress issue: #464 (comment) <#464 (comment)> — Reply to this email directly, view it on GitHub <#472 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACT5UIXMSBJ6PO6GFUWC2JLVNFCR3ANCNFSM5XDCRMQQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[theecrit]

LGTM!