Improve naming of the maps

Author: mrica-equinor

frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx

@@ -79,6 +79,9 @@ export const MissionMapView = ({ mission }: MissionProps) => {
         [mission.tasks]
     )
 
+    let displayedMapName = mission.map?.mapName.split('.')[0].replace(/[^0-9a-z-A-Z ]/g, ' ')
+    displayedMapName = displayedMapName ? displayedMapName.charAt(0).toUpperCase() + displayedMapName.slice(1) : ' '
+
     useEffect(() => {
         BackendAPICaller.getMap(mission.installationCode!, mission.map?.mapName!)
             .then((imageBlob) => {
@@ -130,7 +133,7 @@ export const MissionMapView = ({ mission }: MissionProps) => {
 
     return (
         <MapCard style={{ boxShadow: tokens.elevation.raised }}>
-            <Typography variant="h3">{mission.map?.mapName}</Typography>
+            <Typography variant="h3">{displayedMapName}</Typography>
             <SyledContainer>
                 <StyledElements>
                     <StyledMap id="mapCanvas" />

frontend/src/language/en.json

@@ -265,5 +265,6 @@
     "No alerts": "No alerts",
     "minutes ago": "minutes ago",
     "Failed to retrieve previous mission runs": "Failed to retrieve previous mission runs",
-    "Documentation": "Documentation"
+    "Documentation": "Documentation",
+    "Map of": "Map of"
 }

frontend/src/language/no.json

@@ -265,5 +265,6 @@
     "No alerts": "Ingen varsler",
     "minutes ago": "minutter siden",
     "Failed to retrieve previous mission runs": "Kunne ikke hente tildigere oppdragskjøringer",
-    "Documentation": "Dokumentasjon"
+    "Documentation": "Dokumentasjon",
+    "Map of": "Kart over"
 }

frontend/src/utils/DeckMapView.tsx

@@ -8,6 +8,7 @@ import { MapMetadata } from 'models/MapMetadata'
 import { Pose } from 'models/Pose'
 import { MapCompass } from 'utils/MapCompass'
 import { Deck } from 'models/Deck'
+import { useLanguageContext } from 'components/Contexts/LanguageContext'
 
 interface DeckProps {
     deck: Deck
@@ -23,7 +24,6 @@ const StyledMap = styled.canvas`
 const StyledMapLimits = styled.div`
     display: flex;
     flex-direction: column;
-    padding-left: 30px;
     justify-content: center;
     align-items: center;
 `
@@ -35,16 +35,24 @@ const StyledLoading = styled.div`
 
 const StyledMapCompass = styled.div`
     display: flex;
-    flex-direction: columns;
+    flex-direction: row;
     align-items: end;
 `
 
+const StyledCaption = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    gap: 10px;
+`
+
 export const DeckMapView = ({ deck, markedRobotPosition }: DeckProps) => {
     const [mapCanvas, setMapCanvas] = useState<HTMLCanvasElement>(document.createElement('canvas'))
     const [mapImage, setMapImage] = useState<HTMLImageElement>(document.createElement('img'))
     const [mapContext, setMapContext] = useState<CanvasRenderingContext2D>()
     const [mapMetadata, setMapMetadata] = useState<MapMetadata>()
     const [isLoading, setIsLoading] = useState<boolean>()
+    const { TranslateText } = useLanguageContext()
 
     const updateMap = useCallback(() => {
         let context = mapCanvas.getContext('2d')
@@ -65,6 +73,9 @@ export const DeckMapView = ({ deck, markedRobotPosition }: DeckProps) => {
         return image
     }
 
+    let mapName = mapMetadata?.mapName.split('.')[0].replace(/[^0-9a-z-A-Z ]/g, ' ')
+    mapName = mapName ? mapName.charAt(0).toUpperCase() + mapName.slice(1) : ' '
+
     useEffect(() => {
         const processImageURL = (imageBlob: Blob | string) => {
             const imageObjectURL = typeof imageBlob === 'string' ? imageBlob : URL.createObjectURL(imageBlob as Blob)
@@ -125,13 +136,15 @@ export const DeckMapView = ({ deck, markedRobotPosition }: DeckProps) => {
             )}
             {!isLoading && (
                 <StyledMapLimits>
-                    <Typography variant="h2">
-                        {mapMetadata?.mapName ? mapMetadata.mapName : 'No map available'}
-                    </Typography>
-                    <StyledMapCompass>
-                        <StyledMap id="deckMapCanvas" />
-                        {mapMetadata && <MapCompass />}
-                    </StyledMapCompass>
+                    <StyledCaption>
+                        <StyledMapCompass>
+                            <StyledMap id="deckMapCanvas" />
+                            {mapMetadata && <MapCompass />}
+                        </StyledMapCompass>
+                        <Typography italic variant="body_short">
+                            {TranslateText('Map of') + ' ' + mapName}
+                        </Typography>
+                    </StyledCaption>
                 </StyledMapLimits>
             )}
         </>