Stop scroll capture on crash map and upgrade react-map-gl to v7 #1398

mddilley · 2024-03-14T20:10:26Z

Associated issues

cityofaustin/atd-data-tech#15867
cityofaustin/atd-data-tech#15190

Please review these PRs in this order: #1398, #1399, #1400

This PR:

updates react-map-gl to v7 and mapbox-gl as well
removes react-map-gl-draw and the LocationEditMap component that used it. This feature/component was intended to allow VZ users to edit location polygon which was never needed.
updates the browserslist config in package.json to address a JavaScript transpile error related to Mapbox GL
- Lots of TIL for me so here is the background on it and here is how browserslist fits into Create React App. the tldr is that our config was telling Babel to make sure our app was compatible with JavaScript ES5. I think it is safe to say that all VZE users are using modern browsers that support JavaScript ES6.
- if you want to check out the summaries of the change in browser support:
  - current config
  - new config in this PR that is recommended in the mapbox link above

Testing

URL to test:
https://deploy-preview-1398--atd-vze-staging.netlify.app/

Steps to test:

Go to a crash page and make sure the map loads
See that there are zoom and fullscreen controls just like in staging and production
Try scrolling while hovering the mouse over the crash map. You should see a prompt to use a cooperative gesture to zoom the map in and out.
When the crash page loads, make sure that the map and the tile layer adjust to different heights of crash diagram to the right since they are in the same flex row. If they don't adjust correctly, you will see that the map tiles look partially loaded with some white space in the bottom portion. We don't want that!
Explore and drag the map around, and you can compare side-by-side with staging or production too. Zoom out and notice that you can't explore the entire planet - just within a bounding box that I stole from Moped.
You should expect the crash edit and location maps to not load. They are commented out and are updated in the next two PRs, and all of this will merge in together.

Ship list

Check migrations for any conflicts with latest migrations in master branch
Confirm Hasura role permissions for necessary access
Code reviewed
Product manager approved

…-map

mddilley · 2024-03-15T16:05:39Z

atd-vze/src/views/Crashes/Maps/CrashMap.js

This looks like a lot of change because it used to be a class component. The big changes are that shared config between all the maps was extracted into map.js. The old code also manages viewport state which isn't needed in the newer react-map-gl API.

mddilley · 2024-03-15T16:06:41Z

atd-vze/src/views/Crashes/Maps/Pin.js

Same here - class component made into a function component.

mddilley · 2024-03-15T16:09:05Z

atd-vze/src/views/Crashes/Maps/Pin.js

+    transform: `translate(0px, ${
+      isDragging && animated ? `-${size}px` : `${-size / 2}px`
+    })`,


I had to update this style because the map was rendering the pin marker way off center with the old transform/translate values.

mddilley · 2024-03-15T16:09:49Z

atd-vze/src/views/Locations/LocationEditMap.js

This was the location polygon editor component. Not needed. 🗑️

mddilley · 2024-03-15T16:10:03Z

atd-vze/src/views/Locations/toolbar.js

The toolbar only used by LocationEditMap. 🗑️

mddilley · 2024-03-15T16:12:12Z

atd-vze/package.json

@@ -49,8 +49,7 @@
    "react-csv-reader": "^3.0.6",
    "react-datepicker": "^2.9.6",
    "react-dom": "^16.8.6",
-    "react-map-gl": "^5.1.1",
-    "react-map-gl-draw": "^0.15.0",


This package was only used by the unneeded LocationEditMap component removed in this PR. It isn't compatible with the new react-map-gl version anyways.

frankhereford

This looks great Mike. I've read through the code and tested it with your really helpful and clear PR comment / testing steps. It's all 🚢 🚀 . I'm looking forward to reading the next PR!

I especially enjoyed reading about the browser coverage, and that's a really cool site you linked to show how they compared. Lots of TIL in there for me too.

frankhereford · 2024-03-18T14:59:21Z

atd-vze/src/views/Crashes/Maps/CrashMap.js

-  padding: "10px",
-};
-
-export default class CrashMap extends Component {


Thanks for taking the time to turn this into a functional component! 🙏 🙏

roseeichelmann · 2024-03-20T15:52:20Z

atd-vze/src/helpers/map.js

+  touchPitch: false,
+  dragRotate: false,
+  boxZoom: false,
+  maxBounds: [[-99, 29], [-96, 32]],


love the touch of making a bounding box so you cant go exploring the whole planet anymore!

roseeichelmann

Thanks for working on this Mike, everything looks great! +1 thanks for turning those classes into functional components and rly like the touch of the bounding box 🚢

johnclary

this is looking so good! i'm moving on to the related PRs 🍿 🙌 🚢

johnclary · 2024-03-20T18:20:56Z

atd-vze/package.json

@@ -49,8 +49,7 @@
    "react-csv-reader": "^3.0.6",
    "react-datepicker": "^2.9.6",
    "react-dom": "^16.8.6",
-    "react-map-gl": "^5.1.1",
-    "react-map-gl-draw": "^0.15.0",


johnclary · 2024-03-20T18:21:23Z

atd-vze/src/helpers/map.js

+  touchPitch: false,
+  dragRotate: false,
+  boxZoom: false,
+  maxBounds: [[-99, 29], [-96, 32]],


johnclary · 2024-03-20T18:23:10Z

atd-vze/src/views/Crashes/Crash.js

+              //   refetchCrashData={refetch}
+              //   setIsEditingCoords={setIsEditingCoords}
+              // />
+              null}


noting that this is restored in a related branch of this work

johnclary · 2024-03-20T18:23:57Z

atd-vze/src/views/Crashes/Maps/CrashMap.js

-  padding: "10px",
-};
-
-export default class CrashMap extends Component {


Update LocationMap

Update CrashEditCoordsMap

mddilley added 24 commits March 7, 2024 17:55

Remove unused LocationEditMap component

4d62255

Remove location map draw toolbar; uninstall react-map-gl-draw dependency

575c9c4

Upgrade react-map-gl and mapbox-gl; comment out broken code

bbbf667

Update map settings and make it render

1ed0990

Show nav and full screen controls

0eed3e3

Fix marker position and pin styles so they track position correctly

0b5f4c4

Move shared map config into params obj; fix mapStyle render

b90a7cc

Update browserlist values; add defaults for initialState

6144088

Convert basic CrashEditCoords features

9e75b70

Add missing css import

af22cb6

Merge branch 'md-15867-stop-scroll-capture' into md-15867-edit-coords…

67ed1dd

…-map

Reimplement marker dragging and animations

c63da80

Use rest of CrashEditCoordsMap props; update handle form submit

369421c

Update update form reset and cancel handlers

65316a9

Fix maxBounds and remove old code that is covered

9da9886

Fix maxBounds typo

025110d

Merge branch 'md-15867-stop-scroll-capture' into md-15867-edit-coords…

ff8bbc3

…-map

Merge branch 'master' into md-15867-stop-scroll-capture

44e78db

Merge branch 'md-15867-stop-scroll-capture' into md-15867-edit-coords…

ac98036

…-map

Jump map to new coords on reset; close map after reset

2a72d5a

Add isSubmitting to disable buttons on form submit

6043754

Show location polygon on map

3127ea9

Initialize map to location polygon with padding

fd4a03c

Remove old code and fix initial latitude

c88020c

mddilley added the WIP Work in progress label Mar 14, 2024

mddilley added 2 commits March 14, 2024 16:26

Resize on load to match diagram height

90c219e

Merge branch 'md-15867-stop-scroll-capture' into md-15867-edit-coords…

c327643

…-map

This was referenced Mar 14, 2024

Update LocationMap #1400

Merged

Update CrashEditCoordsMap #1399

Merged

mddilley commented Mar 15, 2024

View reviewed changes

mddilley removed the WIP Work in progress label Mar 15, 2024

mddilley requested review from frankhereford, chiaberry, johnclary, tillyw and roseeichelmann March 15, 2024 16:11

mddilley commented Mar 15, 2024

View reviewed changes

mddilley added 3 commits March 15, 2024 11:46

Add env helper file and use prod s3 path for crash diagrams if local

d6fa913

Merge branch 'md-15867-edit-coords-map' into md-15867-location-map

7c92430

Remove another unused pkg from the LocationEditMap

5eb16f4

mddilley mentioned this pull request Mar 15, 2024

Use alternate Mapbox error fix cityofaustin/atd-moped#1296

Merged

3 tasks

frankhereford approved these changes Mar 18, 2024

View reviewed changes

mddilley mentioned this pull request Mar 19, 2024

Remove LocationEditMap component from VZE cityofaustin/atd-data-tech#15190

Closed

3 tasks

mddilley added 2 commits March 19, 2024 15:38

Add helper to truncate lat/lon and use in CrashEditLatLonForm

1625fda

Merge branch 'md-15867-edit-coords-map' into md-15867-location-map

46c5ecc

roseeichelmann reviewed Mar 20, 2024

View reviewed changes

roseeichelmann approved these changes Mar 20, 2024

View reviewed changes

johnclary approved these changes Mar 20, 2024

View reviewed changes

mddilley added 4 commits March 20, 2024 13:52

Remove coop gestures from crash edit map

d79918c

Merge branch 'md-15867-edit-coords-map' into md-15867-location-map

1c98de7

Merge pull request #1400 from cityofaustin/md-15867-location-map

9311e06

Update LocationMap

Merge pull request #1399 from cityofaustin/md-15867-edit-coords-map

6bd8b4b

Update CrashEditCoordsMap

mddilley merged commit 81c99a1 into master Mar 22, 2024
8 checks passed

mddilley deleted the md-15867-stop-scroll-capture branch March 22, 2024 18:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stop scroll capture on crash map and upgrade react-map-gl to v7 #1398

Stop scroll capture on crash map and upgrade react-map-gl to v7 #1398

mddilley commented Mar 14, 2024 •

edited

Loading

mddilley Mar 15, 2024 •

edited

Loading

mddilley Mar 15, 2024

mddilley Mar 15, 2024

mddilley Mar 15, 2024

mddilley Mar 15, 2024

mddilley Mar 15, 2024

johnclary Mar 20, 2024

frankhereford left a comment •

edited

Loading

frankhereford Mar 18, 2024

johnclary Mar 20, 2024

roseeichelmann Mar 20, 2024

johnclary Mar 20, 2024

roseeichelmann left a comment

johnclary left a comment

johnclary Mar 20, 2024

johnclary Mar 20, 2024

johnclary Mar 20, 2024

johnclary Mar 20, 2024

Stop scroll capture on crash map and upgrade react-map-gl to v7 #1398

Stop scroll capture on crash map and upgrade react-map-gl to v7 #1398

Conversation

mddilley commented Mar 14, 2024 • edited Loading

Associated issues

Testing

Ship list

mddilley Mar 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frankhereford left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roseeichelmann left a comment

Choose a reason for hiding this comment

johnclary left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mddilley commented Mar 14, 2024 •

edited

Loading

mddilley Mar 15, 2024 •

edited

Loading

frankhereford left a comment •

edited

Loading