dashboard: fix alert audio (#1002)

Signed-off-by: Teo Koon Peng <teokoonpeng@gmail.com>
open-rmf · Aug 22, 2024 · fc440d1 · fc440d1
1 parent 7e77763
commit fc440d1
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 17 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -13,7 +13,7 @@ export default tseslint.config(
   ...tseslint.configs.recommended,
   {
     files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
-    plugins: { react, reactHooks },
+    plugins: { react, 'react-hooks': reactHooks },
     settings: {
       react: {
         version: 'detect',
@@ -24,6 +24,7 @@ export default tseslint.config(
       '@typescript-eslint/ban-types': ['error', { types: { '{}': false }, extendDefaults: true }],
       '@typescript-eslint/no-loss-of-precision': 'off',
       '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      ...reactHooks.configs.recommended.rules,
     },
   },
   ...compat.config(storybook.configs.recommended),

diff --git a/packages/dashboard/app-config.schema.json b/packages/dashboard/app-config.schema.json
@@ -136,7 +136,7 @@
     },
     "properties": {
         "alertAudioPath": {
-            "description": "Url to a .wav file to be played when an alert occurs on the dashboard.",
+            "description": "Url to a file to be played when an alert occurs on the dashboard.",
             "type": "string"
         },
         "allowedTasks": {

diff --git a/packages/dashboard/src/app-config.ts b/packages/dashboard/src/app-config.ts
@@ -126,7 +126,7 @@ export interface RuntimeConfig {
   allowedTasks: TaskResource[];
 
   /**
-   * Url to a .wav file to be played when an alert occurs on the dashboard.
+   * Url to a file to be played when an alert occurs on the dashboard.
    */
   alertAudioPath?: string;
 

diff --git a/packages/dashboard/src/components/alert-manager.tsx b/packages/dashboard/src/components/alert-manager.tsx
@@ -258,9 +258,10 @@ export const AlertManager = React.memo(() => {
   const rmf = React.useContext(RmfAppContext);
   const [openAlerts, setOpenAlerts] = React.useState<Record<string, AlertRequest>>({});
   const appConfig = React.useContext(AppConfigContext);
-  const alertAudio: HTMLAudioElement | undefined = appConfig.alertAudioPath
-    ? new Audio(appConfig.alertAudioPath)
-    : undefined;
+  const alertAudio: HTMLAudioElement | undefined = React.useMemo(
+    () => (appConfig.alertAudioPath ? new Audio(appConfig.alertAudioPath) : undefined),
+    [appConfig.alertAudioPath],
+  );
 
   React.useEffect(() => {
     if (!rmf) {
@@ -349,7 +350,7 @@ export const AlertManager = React.memo(() => {
         sub.unsubscribe();
       }
     };
-  }, [rmf]);
+  }, [rmf, alertAudio]);
 
   const removeOpenAlert = (id: string) => {
     const filteredAlerts = Object.fromEntries(

diff --git a/packages/dashboard/src/components/map-app.tsx b/packages/dashboard/src/components/map-app.tsx
@@ -148,7 +148,7 @@ export const MapApp: StyledComponent<MicroAppProps & MUIStyledCommonProps<Theme>
         clearInterval(interval);
         debug(`cleared interval ${interval}`);
       };
-    }, [trajManager, currentLevel, trajectoryTime, trajectoryAnimScale]);
+    }, [trajManager, currentLevel, trajectoryTime, trajectoryAnimScale, authenticator.token]);
 
     React.useEffect(() => {
       if (!rmf) {
@@ -201,7 +201,7 @@ export const MapApp: StyledComponent<MicroAppProps & MUIStyledCommonProps<Theme>
           sub.unsubscribe();
         }
       };
-    }, [rmf, resourceManager]);
+    }, [rmf, resourceManager, appConfig.defaultMapLevel]);
 
     const [imageUrl, setImageUrl] = React.useState<string | null>(null);
     // Since the configurable zoom level is for supporting the lowest resolution
@@ -307,7 +307,14 @@ export const MapApp: StyledComponent<MicroAppProps & MUIStyledCommonProps<Theme>
         });
         setRobots(newRobots);
       })();
-    }, [fleets, robotsStore, resourceManager, currentLevel, currentLevelOfRobots]);
+    }, [
+      fleets,
+      robotsStore,
+      resourceManager,
+      currentLevel,
+      currentLevelOfRobots,
+      resources.fleets,
+    ]);
 
     const { current: robotLocations } = React.useRef<
       Record<string, [number, number, number, string]>
@@ -485,7 +492,7 @@ export const MapApp: StyledComponent<MicroAppProps & MUIStyledCommonProps<Theme>
           sub.unsubscribe();
         }
       };
-    }, [robotLocations, sceneBoundingBox, buildingMap]);
+    }, [robotLocations, sceneBoundingBox, buildingMap, appConfig.defaultRobotZoom]);
 
     React.useEffect(() => {
       if (!sceneBoundingBox) {

diff --git a/packages/dashboard/src/components/rmf-app.tsx b/packages/dashboard/src/components/rmf-app.tsx
@@ -24,7 +24,7 @@ export function RmfApp(props: RmfAppProps): JSX.Element {
       );
       return undefined;
     }
-  }, [authenticator]);
+  }, [authenticator, appConfig]);
 
   return (
     <UserProfileProvider authenticator={authenticator} basePath={appConfig.rmfServerUrl}>

diff --git a/packages/dashboard/src/components/robots/robot-summary.tsx b/packages/dashboard/src/components/robots/robot-summary.tsx
@@ -181,6 +181,8 @@ export const RobotSummary = React.memo(({ onClose, robot }: RobotSummaryProps) =
     }
   }, [taskState]);
 
+  const theme = useTheme();
+
   const returnDialogContent = () => {
     const contents = [
       {
@@ -221,8 +223,6 @@ export const RobotSummary = React.memo(({ onClose, robot }: RobotSummaryProps) =
       });
     }
 
-    const theme = useTheme();
-
     return (
       <>
         {contents.map((message, index) => (

diff --git a/packages/dashboard/src/components/tasks/task-schedule.tsx b/packages/dashboard/src/components/tasks/task-schedule.tsx
@@ -150,7 +150,7 @@ export const TaskSchedule = () => {
         }),
       );
     },
-    [rmf, allowedTasks],
+    [rmf],
   );
 
   const CustomCalendarEditor = ({ scheduler, value, onChange }: CustomCalendarEditorProps) => {

diff --git a/packages/dashboard/src/components/tasks/task-summary.tsx b/packages/dashboard/src/components/tasks/task-summary.tsx
@@ -109,6 +109,8 @@ export const TaskSummary = React.memo((props: TaskSummaryProps) => {
     return () => sub.unsubscribe();
   }, [rmf, task]);
 
+  const theme = useTheme();
+
   const returnDialogContent = () => {
     const contents = [
       {
@@ -132,8 +134,6 @@ export const TaskSummary = React.memo((props: TaskSummaryProps) => {
       }
     }
 
-    const theme = useTheme();
-
     return (
       <>
         {contents.map((message, index) => (