From b584399de8a554fccbbe7e061d10ec0f5731ef96 Mon Sep 17 00:00:00 2001
From: Aaron Chong <aaronchongth@gmail.com>
Date: Wed, 11 Oct 2023 22:13:39 +0800
Subject: [PATCH] Fix dashboard CI for react-three-fiber migration (#795)

* 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>
---
 .github/workflows/dashboard.yml               |  2 +
 .../components/three-fiber/robot-three.tsx    |  9 +--
 .../lib/map/three-fiber/robot-three-maker.tsx | 61 +++----------------
 3 files changed, 11 insertions(+), 61 deletions(-)

diff --git a/.github/workflows/dashboard.yml b/.github/workflows/dashboard.yml
index 53e8dd6af..ad17be889 100644
--- a/.github/workflows/dashboard.yml
+++ b/.github/workflows/dashboard.yml
@@ -31,6 +31,8 @@ jobs:
       - name: setup python
         run: apt update && apt install -y python3-venv python-is-python3
       - name: bootstrap
+        env:
+          NODE_OPTIONS: '--max_old_space_size=4096'
         uses: ./.github/actions/bootstrap
         with:
           package: rmf-dashboard
diff --git a/packages/dashboard/src/components/three-fiber/robot-three.tsx b/packages/dashboard/src/components/three-fiber/robot-three.tsx
index 632a13ab4..95edd62d5 100644
--- a/packages/dashboard/src/components/three-fiber/robot-three.tsx
+++ b/packages/dashboard/src/components/three-fiber/robot-three.tsx
@@ -8,15 +8,9 @@ interface RobotThreeProps {
   robots: RobotData[];
   robotLocations: Record<string, [number, number, number]>;
   onRobotClick?: (ev: ThreeEvent<MouseEvent>, robot: RobotData) => void;
-  objectModel?: string;
 }
 
-export const RobotThree = ({
-  robots,
-  robotLocations,
-  onRobotClick,
-  objectModel, //Object model should be some path of the object to be rendered.
-}: RobotThreeProps) => {
+export const RobotThree = ({ robots, robotLocations, onRobotClick }: RobotThreeProps) => {
   const STANDAR_Z_POSITION = 4;
   const CIRCLE_SEGMENT = 64;
 
@@ -34,7 +28,6 @@ export const RobotThree = ({
               robot={robot}
               position={position}
               onRobotClick={onRobotClick}
-              objectModel={objectModel}
               rotation={new Euler(0, 0, rotationZ)}
               circleSegment={CIRCLE_SEGMENT}
             />
diff --git a/packages/react-components/lib/map/three-fiber/robot-three-maker.tsx b/packages/react-components/lib/map/three-fiber/robot-three-maker.tsx
index 180346f81..306f3e144 100644
--- a/packages/react-components/lib/map/three-fiber/robot-three-maker.tsx
+++ b/packages/react-components/lib/map/three-fiber/robot-three-maker.tsx
@@ -1,9 +1,7 @@
 import { Circle, Line, Text } from '@react-three/drei';
-import { ThreeEvent, useLoader } from '@react-three/fiber';
+import { ThreeEvent } from '@react-three/fiber';
 import React from 'react';
 import { Euler, Vector3 } from 'three';
-import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
 
 export interface RobotData {
   fleet: string;
@@ -23,18 +21,10 @@ interface CircleShapeProps {
   segment: number;
 }
 
-interface ObjectLoaderProps {
-  position: Vector3;
-  rotation: THREE.Euler;
-  onRobotClick?: (ev: ThreeEvent<MouseEvent>) => void;
-  robot: RobotData;
-}
-
 interface RobotThreeMakerProps {
   robot: RobotData;
   position: Vector3;
   onRobotClick?: (ev: ThreeEvent<MouseEvent>, robot: RobotData) => void;
-  objectModel?: string;
   rotation: Euler;
   circleSegment: number;
 }
@@ -70,35 +60,10 @@ const CircleShape = ({
   );
 };
 
-const ObjectLoader = ({
-  position,
-  rotation,
-  onRobotClick,
-  robot,
-}: ObjectLoaderProps): JSX.Element => {
-  const objPath = '/Hatchback/meshes/hatchback.obj';
-  const mtlPath = '/Hatchback/meshes/hatchback.mtl';
-  const objectRef = React.useRef<THREE.Object3D>(null);
-  const scale = new Vector3(0.007, 0.007, 0.007);
-
-  const materials = useLoader(MTLLoader, mtlPath);
-  const object = useLoader(OBJLoader, objPath, (loader) => {
-    materials.preload();
-    loader.setMaterials(materials);
-  });
-  return (
-    <group position={position} rotation={rotation} scale={scale} onClick={onRobotClick}>
-      <primitive object={object} ref={objectRef} color={robot.color} opacity={1} />
-      <primitive object={object.clone()} ref={objectRef} />
-    </group>
-  );
-};
-
 export const RobotThreeMaker = ({
   robot,
   position,
   onRobotClick,
-  objectModel, //Object model should be some path of the object to be rendered.
   rotation,
   circleSegment,
 }: RobotThreeMakerProps): JSX.Element => {
@@ -107,23 +72,13 @@ export const RobotThreeMaker = ({
       <Text color="black" fontSize={0.5} position={[position.x, position.y, position.z + 1]}>
         {robot.name}
       </Text>
-
-      {objectModel ? (
-        <ObjectLoader
-          position={position}
-          rotation={rotation}
-          onRobotClick={(ev: ThreeEvent<MouseEvent>) => onRobotClick && onRobotClick(ev, robot)}
-          robot={robot}
-        />
-      ) : (
-        <CircleShape
-          position={position}
-          rotation={rotation}
-          onRobotClick={(ev: ThreeEvent<MouseEvent>) => onRobotClick && onRobotClick(ev, robot)}
-          robot={robot}
-          segment={circleSegment}
-        />
-      )}
+      <CircleShape
+        position={position}
+        rotation={rotation}
+        onRobotClick={(ev: ThreeEvent<MouseEvent>) => onRobotClick && onRobotClick(ev, robot)}
+        robot={robot}
+        segment={circleSegment}
+      />
     </>
   );
 };