[react-components/dashboard] upgrade react-leaflet and fix map overlays

[vallq]

What's new

fixes #532

• The initial version of react-leaflet used was no longer supported and the API broke, hence upgrading was necessary.

• Upgraded to use react-leaflet v3.1.0
  The reason for not using the latest v3.2.2 is because there is an existing incompatibility of v3.2.0 and above with Webpack 4 which create-react-app uses as outlined here. I wasn't able to resolve the issues with the temporary solutions provided hence next best move is to use v3.1.0

• Clicking on the different levels rendered will now show the corresponding icons
  

Self-checks

• I have prototyped this new feature (if necessary) on Figma
• I'm familiar with and follow this Typescript guideline
• I added unit-tests for new components
• I tried testing edge cases
• I tested the behavior of the components that interact with the backend, with an e2e test

Others

• Temporal removal of Trajectory Time Control; still trying to figure out how to create a custom control with the new react-leaflet bindings
• Fix ui for panels

[codecov]

Codecov Report

Merging #553 (3d22d09) into main (44b296d) will decrease coverage by 0.55%.
The diff coverage is 63.79%.

@@            Coverage Diff             @@
##             main     #553      +/-   ##
==========================================
- Coverage   80.28%   79.73%   -0.56%     
==========================================
  Files         255      253       -2     
  Lines        5367     5432      +65     
  Branches      602      611       +9     
==========================================
+ Hits         4309     4331      +22     
- Misses        871      905      +34     
- Partials      187      196       +9     

Flag	Coverage Δ
dashboard	66.85% <43.24%> (-3.32%)	⬇️
react-components	77.36% <79.00%> (-0.08%)	⬇️
reporting	41.95% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
packages/react-components/lib/lifts/lift-utils.ts	79.31% <0.00%> (-5.88%)	⬇️
...ackages/react-components/lib/map/doors-overlay.tsx	68.42% <0.00%> (-1.58%)	⬇️
packages/react-components/lib/map/label-marker.tsx	52.52% <ø> (-12.13%)	⬇️
...ackages/react-components/lib/map/lifts-overlay.tsx	65.78% <0.00%> (-0.88%)	⬇️
...ckages/react-components/lib/map/robots-overlay.tsx	75.00% <0.00%> (-1.20%)	⬇️
.../react-components/lib/map/trajectories-overlay.tsx	100.00% <ø> (ø)
...ges/react-components/lib/map/waypoints-overlay.tsx	90.90% <ø> (ø)
...ges/react-components/lib/map/workcells-overlay.tsx	73.33% <ø> (ø)
...ackages/react-components/lib/tasks/create-task.tsx	78.10% <0.00%> (ø)
packages/react-components/lib/workcells/utils.ts	71.42% <0.00%> (-28.58%)	⬇️
... and 20 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 44b296d...3d22d09. Read the comment docs.

[aaronchongth]

Per VC, this should be targetting after #530 and #525 are merged, in order to use the new interactions and API.

[aaronchongth]

Per VC, there were breaking changes in the newer release of react-leaflet, which will break the click-centering behavior, #503. Ideally we would like to have preserve behaviors with each new incoming feature, hence we might want to update the click-centering feature to use the newer API.

This new ticket can be used to track that version update, #558.

[vallq]

Update
Current Progress:

• Updated the map to show the icons on respective levels
• Added the state references for the doors and lifts on the robot page, otherwise, they would not have been receiving any updates
• minor UI fixes to the paneled components (doors, lifts, workcells)

Fixes needed:

• Custom control for Trajectory Time Control
• Visibility of label markers on the map

Trajectory Time Control

• react-leaflet v3 uses custom hooks and factory apis to create custom controls as functional components. the logic of having createElement and updateElement follows.
• Resources: custom control layer, extending tile layer, react-leaftlet docs

Label Markers

• I'm not sure where the problem lies with this, maybe broken referencing..?

[aaronchongth]

closing with #644