Migration to React three fiber #775

Angatupyry · 2023-09-19T23:43:17Z

What's new

Migration to React three fiber

Remove all react leaflet component
Using react three fiber instead.

Pending:

Labels overlapping.
Some hardcode z and scales values
Test from new react components
It still happening that something the image doesn't load correctly and the frontend crash. I couldn't reproduce it properly yet.
Issue related Migrate react leaflet to react three fiber. #734

Screencast.from.09-19-2023.07.41.42.PM.webm

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

Discussion

Signed-off-by: angatupyry <fierrofenix@gmail.com>

…x component noise Signed-off-by: angatupyry <fierrofenix@gmail.com>

Signed-off-by: angatupyry <fierrofenix@gmail.com>

codecov · 2023-09-19T23:51:56Z

Codecov Report

Merging #775 (5a39c12) into main (c885e3d) will decrease coverage by 2.72%.
Report is 8 commits behind head on main.
The diff coverage is 5.17%.

@@            Coverage Diff             @@
##             main     #775      +/-   ##
==========================================
- Coverage   53.92%   51.21%   -2.72%     
==========================================
  Files         263      281      +18     
  Lines        6639     7055     +416     
  Branches      882      948      +66     
==========================================
+ Hits         3580     3613      +33     
- Misses       2919     3299     +380     
- Partials      140      143       +3

Flag	Coverage Δ
dashboard	`16.48% <0.00%> (-1.40%)`	⬇️
react-components	`48.00% <11.25%> (-3.64%)`	⬇️

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

Files	Coverage Δ
packages/dashboard/src/components/app-events.ts	`100.00% <ø> (ø)`
...dashboard/src/components/robots/robot-info-app.tsx	`0.00% <ø> (ø)`
.../dashboard/src/components/robots/robot-summary.tsx	`0.00% <ø> (ø)`
.../dashboard/src/components/tasks/task-inspector.tsx	`0.00% <ø> (ø)`
...kages/dashboard/src/components/tasks/task-logs.tsx	`57.44% <ø> (ø)`
packages/dashboard/src/components/workspace.tsx	`0.00% <ø> (ø)`
packages/react-components/lib/alert-dialog.tsx	`76.92% <ø> (-3.08%)`	⬇️
...t-components/lib/beacons/beacon-table-datagrid.tsx	`90.90% <ø> (ø)`
...react-components/lib/doors/door-table-datagrid.tsx	`74.28% <ø> (ø)`
packages/react-components/lib/lifts/lift-card.tsx	`0.00% <ø> (ø)`
... and 21 more

... and 9 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

Signed-off-by: angatupyry <fierrofenix@gmail.com>

* Disable walls Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Use useLoader with url only, catch CORS errors potentially due to timeout issues when images are large Signed-off-by: Aaron Chong <aaronchongth@gmail.com> --------- Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

Signed-off-by: angatupyry <fierrofenix@gmail.com>

aaronchongth

Thanks for helping with this huge migration! I think we're in pretty good shape now. There might be small issues here and there that pops up, but we can fix them later on.

I'll move this to a reviewable so CI can be run on it. Once we address all the check failures and CI passes, I think we are good.

aaronchongth · 2023-10-05T17:35:57Z

packages/react-components/lib/map/three-fiber/image-maker.tsx

+export const ReactThreeFiberImageMaker = ({ level, imageUrl }: ImageThreeProps): JSX.Element => {
+  let texture: Texture | undefined = undefined;
+  try {
+    texture = useLoader(TextureLoader, imageUrl);


This is a tricky check failure (sorry I introduced this), however I'm unsure how we can be sure the imageUrl is accessible in the first place, these were some of the things I found, https://www.freecodecamp.org/news/how-to-validate-urls-in-javascript/.

It is currently working properly, could you try it?

Signed-off-by: angatupyry <fierrofenix@gmail.com>

aaronchongth

Just a comment left regarding linting, otherwise LGTM

packages/react-components/lib/map/three-fiber/shape-three-rendering.tsx

packages/dashboard/src/components/three-fiber/camera-control.tsx

Signed-off-by: angatupyry <fierrofenix@gmail.com>

* Set max heap size Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Stop producing sourcemap for CI Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * max space to ci Signed-off-by: angatupyry <fierrofenix@gmail.com> * Try build without sourcemap for CI, alongside heap size increment Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Increasing heapsize on bootstrap step Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Use experimental support for ECMAScript modules Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Use react-components as a module instead Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Remove use of meshes for robot icons Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Revert module call Signed-off-by: Aaron Chong <aaronchongth@gmail.com> --------- Signed-off-by: Aaron Chong <aaronchongth@gmail.com> Signed-off-by: angatupyry <fierrofenix@gmail.com> Co-authored-by: angatupyry <fierrofenix@gmail.com>

aaronchongth

Thank you! Looks good, just a few tweaks and naming suggestions left

packages/dashboard/src/components/map-app.tsx

Signed-off-by: angatupyry <fierrofenix@gmail.com>

aaronchongth

I think we're in a good state! LGMT, thanks for this huge effort!

Angatupyry added 13 commits September 18, 2023 18:27

Add react three fiber and drei

4fee533

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Use component property in Box material ui component to avoid three Bo…

7e39688

…x component noise Signed-off-by: angatupyry <fierrofenix@gmail.com>

Use component property in Box material ui component to avoid three Bo…

22c33b1

…x component noise Signed-off-by: angatupyry <fierrofenix@gmail.com>

Use component property in Box material ui component to avoid three Bo…

74aa6bd

…x component noise Signed-off-by: angatupyry <fierrofenix@gmail.com>

Export function

7f2ca75

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Add wall draw calculation

66bb689

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Add reac three fiber logical

074fa07

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Migrate to react three fiber

cbb33de

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Remove center state

7013e9f

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Remove map setting

436cb2d

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Make circle shape smaller

31340ad

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Add zindex to for the text layers to appear on top

911a83b

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Ensure that React doesn't attempt to create or update component

760a2fc

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Angatupyry requested a review from aaronchongth September 19, 2023 23:43

aaronchongth mentioned this pull request Sep 25, 2023

three map #660

Closed

5 tasks

Angatupyry and others added 14 commits September 26, 2023 16:29

Add text rendering

ead6eaf

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Rendering labels

36601c3

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Hover and zoom text

c44a731

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Show labesl correctly

3f29ebb

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Remove unused imports

37faf6f

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Implementing debounce to show labels with delay

0c7b27f

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Add labels for elevator and door names

9c9628d

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Wrap checkboxes into a div and use select to choose levels

04b8e9e

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Add zoom icon

e813678

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Add levelselect event to persits between tabs

63963a6

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Using AppEvents to persits levels

5f2ba33

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Camera control component has been added

3b4b987

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Zoom in and zoom out events

4bfb294

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Angatupyry added 5 commits October 4, 2023 13:12

Add camera control component

9922270

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Add a wheel function to test event

b2dab2b

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Expose debounce function

a80ad97

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Add wheel function to get the zoom value

cc5ef2e

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Updating zoom properly

4ed43e1

Signed-off-by: angatupyry <fierrofenix@gmail.com>

aaronchongth requested changes Oct 5, 2023

View reviewed changes

aaronchongth marked this pull request as ready for review October 5, 2023 17:37

Angatupyry added 4 commits October 9, 2023 12:47

Remove conditional useLoader

6736f52

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Remove zoom icon

13d6ab7

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Remove zoom implementation

b32f61c

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Fix lint

794456f

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Angatupyry requested a review from aaronchongth October 9, 2023 17:20

aaronchongth requested changes Oct 10, 2023

View reviewed changes

packages/react-components/lib/map/three-fiber/shape-three-rendering.tsx Outdated Show resolved Hide resolved

packages/dashboard/src/components/three-fiber/camera-control.tsx Show resolved Hide resolved

Angatupyry and others added 3 commits October 10, 2023 16:03

Rewrite debounce functino

87b60cc

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Add layers for pickup and dropoff waypoints

12384b9

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Angatupyry requested a review from aaronchongth October 11, 2023 14:17

aaronchongth changed the title ~~[WIP] Migration to React three fiber~~ Migration to React three fiber Oct 11, 2023

aaronchongth requested changes Oct 11, 2023

View reviewed changes

packages/dashboard/src/components/map-app.tsx Outdated Show resolved Hide resolved

Add spaces in layer names

5a39c12

Signed-off-by: angatupyry <fierrofenix@gmail.com>

Angatupyry requested a review from aaronchongth October 11, 2023 17:10

aaronchongth approved these changes Oct 11, 2023

View reviewed changes

aaronchongth merged commit 72b99d0 into main Oct 11, 2023
4 checks passed

aaronchongth deleted the feature/port-three-fiber-branch branch October 11, 2023 17:28

Angatupyry mentioned this pull request Oct 11, 2023

Port react three fiber to hammer #798

Merged

5 tasks

This was referenced Oct 12, 2023

Increase memory allocation for build open-rmf/rmf_deployment_template#34

Merged

Re-introduced and refactored zoom button implementation #800

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migration to React three fiber #775

Migration to React three fiber #775

Angatupyry commented Sep 19, 2023

codecov bot commented Sep 19, 2023 •

edited

Loading

aaronchongth left a comment

aaronchongth Oct 5, 2023

Angatupyry Oct 9, 2023

aaronchongth left a comment

aaronchongth left a comment

aaronchongth left a comment

Migration to React three fiber #775

Migration to React three fiber #775

Conversation

Angatupyry commented Sep 19, 2023

What's new