Improvements to the asset map UI

[smcalilly]

Overview

For issues:

• 109

• 108

  • i'm importing the rooks npm library to use a useSessionStorage hook for this. i tried to roll my own (real quick) based on an internet example but it was buggy. let me know if we need to use another library.

• 107

  • it started to get a bit complicated to parse through the geometries and filter out the intersections with turf js (based on our comments here), so instead i styled the search geometries to have a dashed line and the existing geometries to have a solid line. let me know if that looks awkward or you have any suggestions to tweak the styling.
  • note that this was largely an issue with trails (of geometry type LineString)

• 112

  • i made a MapZoom component that uses the react-leaflet useMap hook. the component zooms to the search geometries if there are any. if there aren't but there are existing geometries, then it will zoom to those geometries.
• renamed some state objects to present tense

Notes

Remaining UI improvements not in this PR:

• 95

  • i'm still figuring out how to parse out the different types of geometries and leverage turf js. unfortunately, the turf intersection only accepts polygons/multipolygons and not feature collections (which are the geometry types when we need to use turf). this is requires a bit heavier lifting that i haven't ironed out and could use more scrutiny in a standalone pr.

• 114

  • to do

Testing Instructions

• visit review app: https://ccfp-asset-d-existing-a-qfqdlr.herokuapp.com
• login with lastpass "ccfp-asset-dashboard test user" credentials

• 109

  • test the delete button and make sure it deletes your assets from the map from the table

• 108

  • search for assets and then reload by refreshing the page. you can also save an asset or delete one, and your search should persist after the page reloads.

• 107

  • search for some trails and save a portion trails. when the map reloads (it should've persisted the search!), you should be able to distinguish between the trails you saved and the trails from the search.

• 112

  • all of the searching in your tests should zoom so that the map fits the bounds of your search geometries.
  • to test that it zooms to existing geometries on a fresh page load, open the web page in a new tab, since the search geometries are stored in session storage.

[smcalilly]

And an odd UI question: What is the function of the table of search results? It doesn't seem to be adding much at the moment. Are there plans to add something like, highlight the building on the map when a result is hovered and select it when a result is clicked?

This is a good question and I agree, the table seems pointless as is. I've been wanting to add that feature you suggest and was planning to bring it up. I don't think it would be too difficult, but we'd be nearing the limit of complexity with this code.

Somewhat related, we could also go the opposite way, where a user selects a geometry on the map and allows them to save it by simply clicking. And it could also highlight in the table.

Garret has said that their staff knows the id's since it's common for them to use it, so I think having an identifier can be helpful. We could also add a popup easily that shows this info, like 15 minutes easy.

What do you think? @hancush, cc @fgregg

To recap, some ways to improve it:

1. a user could click on the table and it takes them to that asset on the map. the click would also load the asset so it can be saved.
2. a user could click on an asset in the map and they could save it. the click would also highlight the asset in the table.
   • alternatively, we could have a very simple implementation of a popup with info about each assest.

[hancush]

@smcalilly I think you should spin off the table UI into a separate issue.