From 72ba7f154e3cf59d5809cfb78a1069f11fca999b Mon Sep 17 00:00:00 2001
From: "Mariana R. Santos" <mrica@equinor.com>
Date: Wed, 8 Jan 2025 13:23:15 +0100
Subject: [PATCH] Fix fetching map on mission page

---
 .../api/Services/MissionDefinitionService.cs  |  3 +-
 .../MapPosition/MissionMapView.tsx            | 33 ++++++++++++++-----
 frontend/src/models/Mission.ts                |  3 +-
 frontend/src/models/MissionDefinition.ts      |  2 ++
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/backend/api/Services/MissionDefinitionService.cs b/backend/api/Services/MissionDefinitionService.cs
index 91fbea6e..4dfdedf5 100644
--- a/backend/api/Services/MissionDefinitionService.cs
+++ b/backend/api/Services/MissionDefinitionService.cs
@@ -260,7 +260,8 @@ private IQueryable<MissionDefinition> GetMissionDefinitionsWithSubModels(
                         || accessibleInstallationCodes.Result.Contains(
                             m.InspectionArea.Installation.InstallationCode.ToUpper()
                         )
-                );
+                )
+                .Include(missionDefinition => missionDefinition.Map);
             return readOnly ? query.AsNoTracking() : query.AsTracking();
         }
 
diff --git a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx
index 624eed53..d8b8687f 100644
--- a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx
+++ b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx
@@ -9,6 +9,7 @@ import { BackendAPICaller } from 'api/ApiCaller'
 import { TaskStatus } from 'models/Task'
 import { MapCompass } from 'utils/MapCompass'
 import { useRobotContext } from 'components/Contexts/RobotContext'
+import { useQuery } from '@tanstack/react-query'
 
 interface MissionProps {
     mission: Mission
@@ -48,16 +49,32 @@ export const MissionMapView = ({ mission }: MissionProps) => {
 
     const imageObjectURL = useRef<string>('')
 
+    const fetchMapInfo = (mission: Mission) => {
+        const map = useQuery({
+            queryKey: [mission.missionId],
+            queryFn: async () => {
+                const missionDefinition = await BackendAPICaller.getMissionDefinitionById(mission.missionId!)
+                return missionDefinition.map
+            },
+            retryDelay: 60 * 1000,
+            staleTime: 60 * 1000,
+            enabled: mission.missionId !== undefined,
+        })
+        return map.data
+    }
+
+    const mapInfo = fetchMapInfo(mission)
+
     const updateMap = useCallback(() => {
         const context = mapCanvas.getContext('2d')
-        if (!context || !mission.map) {
+        if (!context || !mapInfo) {
             return
         }
         context.clearRect(0, 0, mapCanvas.width, mapCanvas.height)
         context.drawImage(mapImage, 0, 0)
-        placeTagsInMap(mission.tasks, mission.map!, mapCanvas, currentTaskOrder)
-        if (missionRobot?.pose && mission.map) {
-            placeRobotInMap(mission.map, mapCanvas, missionRobot.pose)
+        placeTagsInMap(mission.tasks, mapInfo, mapCanvas, currentTaskOrder)
+        if (missionRobot?.pose && mapInfo) {
+            placeRobotInMap(mapInfo, mapCanvas, missionRobot.pose)
         }
     }, [currentTaskOrder, mapCanvas, mapImage, mission, missionRobot?.pose])
 
@@ -76,12 +93,12 @@ export const MissionMapView = ({ mission }: MissionProps) => {
         [mission.tasks]
     )
 
-    let displayedMapName = mission.map?.mapName.split('.')[0].replace(/[^0-9a-z-A-Z ]/g, ' ')
+    let displayedMapName = mapInfo?.mapName.split('.')[0].replace(/[^0-9a-z-A-Z ]/g, ' ')
     displayedMapName = displayedMapName ? displayedMapName.charAt(0).toUpperCase() + displayedMapName.slice(1) : ' '
 
     useEffect(() => {
-        if (mission.map?.mapName) {
-            BackendAPICaller.getMap(mission.installationCode!, mission.map?.mapName)
+        if (mapInfo?.mapName) {
+            BackendAPICaller.getMap(mission.installationCode!, mapInfo.mapName)
                 .then((imageBlob) => {
                     imageObjectURL.current = URL.createObjectURL(imageBlob)
                 })
@@ -107,7 +124,7 @@ export const MissionMapView = ({ mission }: MissionProps) => {
         } else {
             imageObjectURL.current = NoMap
         }
-    }, [mission.installationCode, mission.id, mission.map?.mapName])
+    }, [mission.installationCode, mission.id, mapInfo?.mapName])
 
     useEffect(() => {
         if (mission.isCompleted) {
diff --git a/frontend/src/models/Mission.ts b/frontend/src/models/Mission.ts
index c656599e..51ea2d56 100644
--- a/frontend/src/models/Mission.ts
+++ b/frontend/src/models/Mission.ts
@@ -1,4 +1,3 @@
-import { MapMetadata } from './MapMetadata'
 import { InspectionArea } from './InspectionArea'
 import { Robot, placeholderRobot } from './Robot'
 import { Task } from './Task'
@@ -41,8 +40,8 @@ export interface Mission {
     endTime?: Date
     estimatedDuration?: number
     tasks: Task[]
-    map?: MapMetadata
 }
+
 export const placeholderMission: Mission = {
     id: 'placeholderId',
     name: 'placeholderMission',
diff --git a/frontend/src/models/MissionDefinition.ts b/frontend/src/models/MissionDefinition.ts
index 43e73bbf..88d20daa 100644
--- a/frontend/src/models/MissionDefinition.ts
+++ b/frontend/src/models/MissionDefinition.ts
@@ -1,5 +1,6 @@
 import { InspectionArea } from './InspectionArea'
 import { Mission } from './Mission'
+import { MapMetadata } from './MapMetadata'
 
 export interface MissionDefinition {
     id: string
@@ -11,6 +12,7 @@ export interface MissionDefinition {
     inspectionArea?: InspectionArea
     isDeprecated: boolean
     sourceId: string
+    map?: MapMetadata
 }
 
 export interface PlantInfo {