refactor to create scene bounding box taking into account of nav graphs too (#1072)

* refactor to create scene bounding box taking into account of nav graphs too

Signed-off-by: Aaron Chong <[email protected]>

* Push alert when a scene bounding box is invalid

Signed-off-by: Aaron Chong <[email protected]>

* fallback to a generic scale, and changing to better worded warning

Signed-off-by: Aaron Chong <[email protected]>

---------

Signed-off-by: Aaron Chong <[email protected]>

Author: aaronchongth

packages/rmf-dashboard-framework/src/components/map/map.tsx

@@ -1,7 +1,7 @@
 import { Box, styled, Typography } from '@mui/material';
 import { Line } from '@react-three/drei';
 import { Canvas, useLoader } from '@react-three/fiber';
-import { BuildingMap, FleetState, Level, Lift } from 'api-client';
+import { AlertRequest, BuildingMap, FleetState, Level, Lift } from 'api-client';
 import Debug from 'debug';
 import React, { ChangeEvent, Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -518,10 +518,25 @@ export const Map = styled((props: MapProps) => {
       </Box>
       <Canvas
         onCreated={({ camera }) => {
-          if (!sceneBoundingBox) {
-            return;
+          let sceneBoundingBoxToUse = sceneBoundingBox;
+          if (!sceneBoundingBoxToUse) {
+            let alertRequest: AlertRequest = {
+              id: `scene-bounding-${new Date().toLocaleTimeString()}`,
+              unix_millis_alert_time: new Date().getTime(),
+              title: 'Map rendering error',
+              subtitle: 'Missing walls or navigation graphs in Building Map',
+              message:
+                'Please verify that the Building Map contains valid walls and navigation graphs, for the map to be displayed properly. Falling back to a generic scale.',
+              display: true,
+              tier: 'warning',
+              responses_available: [],
+              alert_parameters: [],
+              task_id: null,
+            };
+            AppEvents.pushAlert.next(alertRequest);
+            sceneBoundingBoxToUse = new Box3(new Vector3(-10, -10, 0), new Vector3(10, 10, 10));
           }
-          const center = sceneBoundingBox.getCenter(new Vector3());
+          const center = sceneBoundingBoxToUse.getCenter(new Vector3());
           camera.position.set(center.x, center.y, center.z + distance);
           camera.zoom = zoom;
           camera.updateProjectionMatrix();

packages/rmf-dashboard-framework/src/components/map/utils.ts

@@ -41,7 +41,7 @@ export function getDoorCenter(door: Door): [x: number, y: number] {
   }
 }
 
-interface WallSegment {
+interface GraphSegment {
   position: number[];
   width: number;
   height: number;
@@ -52,8 +52,8 @@ interface WallSegment {
 const distance = (v1: GraphNode, v2: GraphNode) => Math.hypot(v2.x - v1.x, v2.y - v1.y);
 const midPoint = (v1: GraphNode, v2: GraphNode) => [(v2.x + v1.x) / 2, (v2.y + v1.y) / 2];
 
-export const graphToWalls = (graph: Graph): WallSegment[] => {
-  const walls = [] as WallSegment[];
+export const graphToSegments = (graph: Graph): GraphSegment[] => {
+  const segments = [] as GraphSegment[];
   const { edges, vertices } = graph;
 
   edges.map((edge) => {
@@ -69,7 +69,7 @@ export const graphToWalls = (graph: Graph): WallSegment[] => {
     const angle = Math.atan2(v1.y - v2.y, v1.x - v2.x) - Math.PI / 2;
     const rot = new Euler(0, 0, angle);
 
-    return walls.push({
+    return segments.push({
       position,
       width,
       height,
@@ -78,11 +78,12 @@ export const graphToWalls = (graph: Graph): WallSegment[] => {
     });
   });
 
-  return walls;
+  return segments;
 };
 
 export const findSceneBoundingBoxFromThreeFiber = (level: Level | undefined): Box3 | undefined => {
   if (!level) {
+    console.error('Level is invalid');
     return;
   }
   let minX = Infinity;
@@ -91,20 +92,43 @@ export const findSceneBoundingBoxFromThreeFiber = (level: Level | undefined): Bo
   let maxX = -Infinity;
   let maxY = -Infinity;
   let maxZ = -Infinity;
+  let valid = false;
 
-  const walls = graphToWalls(level.wall_graph);
-  walls.forEach((wall) => {
-    const [x, y, z] = wall.position;
-    const width = wall.width;
-    const height = wall.height;
+  const wallSegments = graphToSegments(level.wall_graph);
+  wallSegments.forEach((segment) => {
+    const [x, y, z] = segment.position;
+    const width = segment.width;
+    const height = segment.height;
 
     minX = Math.min(minX, x - width / 2);
     minY = Math.min(minY, y - width / 2);
     minZ = Math.min(minZ, z - height / 2);
     maxX = Math.max(maxX, x + width / 2);
     maxY = Math.max(maxY, y + width / 2);
     maxZ = Math.max(maxZ, z + height / 2);
+    valid = true;
   });
 
+  level.nav_graphs.forEach((navGraph) => {
+    const navGraphSegments = graphToSegments(navGraph);
+    navGraphSegments.forEach((segment) => {
+      const [x, y, z] = segment.position;
+      const width = segment.width;
+      const height = segment.height;
+
+      minX = Math.min(minX, x - width / 2);
+      minY = Math.min(minY, y - width / 2);
+      minZ = Math.min(minZ, z - height / 2);
+      maxX = Math.max(maxX, x + width / 2);
+      maxY = Math.max(maxY, y + width / 2);
+      maxZ = Math.max(maxZ, z + height / 2);
+      valid = true;
+    });
+  });
+
+  if (!valid) {
+    console.error('Level has invalid wall graphs and nav graphs');
+    return;
+  }
   return new Box3(new Vector3(minX, minY, minZ), new Vector3(maxX, maxY, maxZ));
 };

packages/rmf-dashboard-framework/src/components/map/wall-maker.tsx

@@ -1,18 +1,18 @@
 import { Graph } from 'api-client';
 
 import { CubeMaker } from './cube-maker';
-import { graphToWalls } from './utils';
+import { graphToSegments } from './utils';
 
 interface WallProps {
   wallGraph: Graph;
 }
 
 export const WallMaker = ({ wallGraph }: WallProps): JSX.Element => {
-  const walls = graphToWalls(wallGraph);
+  const wallSegments = graphToSegments(wallGraph);
 
   return (
     <>
-      {walls.map((wall, i) => {
+      {wallSegments.map((wall, i) => {
         return (
           <CubeMaker
             key={i}