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>
open-rmf · Oct 11, 2023 · b584399 · b584399
1 parent 12384b9
commit b584399
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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}
+      />
     </>
   );
 };