diff --git a/frontend/src/api/ApiCaller.tsx b/frontend/src/api/ApiCaller.tsx index cd09acb85..10bbc9391 100644 --- a/frontend/src/api/ApiCaller.tsx +++ b/frontend/src/api/ApiCaller.tsx @@ -8,7 +8,6 @@ import { PaginatedResponse, PaginationHeader, PaginationHeaderName } from 'model import { Area } from 'models/Area' import { timeout } from 'utils/timeout' import { tokenReverificationInterval } from 'components/Contexts/AuthProvider' -import { MapMetadata } from 'models/MapMetadata' import { MissionDefinition, PlantInfo } from 'models/MissionDefinition' import { MissionDefinitionUpdateForm } from 'models/MissionDefinitionUpdateForm' import { InspectionArea } from 'models/InspectionArea' @@ -376,15 +375,6 @@ export class BackendAPICaller { return result.content } - static async getInspectionAreaMapMetadata(id: string): Promise { - const path: string = 'inspectionAreas/' + id + '/map-metadata' - const result = await this.GET(path).catch((e) => { - console.error(`Failed to GET /${path}: ` + e) - throw e - }) - return result.content - } - static async reRunMission(missionId: string, failedTasksOnly: boolean = false): Promise { const mission = await BackendAPICaller.getMissionRunById(missionId) diff --git a/frontend/src/components/Displays/ConfirmScheduleDialogs/ConfirmScheduleDialog.tsx b/frontend/src/components/Displays/ConfirmScheduleDialogs/ConfirmScheduleDialog.tsx deleted file mode 100644 index cdc815d02..000000000 --- a/frontend/src/components/Displays/ConfirmScheduleDialogs/ConfirmScheduleDialog.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { Robot, RobotCapabilitiesEnum } from 'models/Robot' -import { useEffect, useState } from 'react' -import { useRobotContext } from 'components/Contexts/RobotContext' -import { ScheduleMissionWithLocalizationVerificationDialog } from './LocalizationVerification/ScheduleMissionWithLocalizationVerification' - -interface ConfirmScheduleDialogProps { - scheduleMissions: () => void - closeDialog: () => void - robotId: string - missionInspectionAreaNames: string[] -} - -export const ScheduleMissionWithConfirmDialogs = ({ - robotId, - missionInspectionAreaNames, - scheduleMissions, - closeDialog, -}: ConfirmScheduleDialogProps) => { - const { enabledRobots } = useRobotContext() - const [robot, setRobot] = useState() - const [shouldScheduleWithoutLocalization, setShouldScheduleWithoutLocalization] = useState() - - useEffect(() => { - setRobot(enabledRobots.find((robot) => robot.id === robotId)) - }, [robotId, enabledRobots]) - - useEffect(() => { - if (shouldScheduleWithoutLocalization) { - scheduleMissions() - closeDialog() - } - }, [shouldScheduleWithoutLocalization]) - - if (!robot) { - return <> - } else { - // Auto-localizing robots don't need to confirmation localization. Localization dialog can be skipped - if ( - robot.robotCapabilities?.includes(RobotCapabilitiesEnum.auto_localize) && - !shouldScheduleWithoutLocalization - ) { - setShouldScheduleWithoutLocalization(true) - return <> - } - return ( - - ) - } -} diff --git a/frontend/src/components/Displays/ConfirmScheduleDialogs/LocalizationVerification/ConfirmLocalizationDialog.tsx b/frontend/src/components/Displays/ConfirmScheduleDialogs/LocalizationVerification/ConfirmLocalizationDialog.tsx deleted file mode 100644 index 786cc72c6..000000000 --- a/frontend/src/components/Displays/ConfirmScheduleDialogs/LocalizationVerification/ConfirmLocalizationDialog.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { Button, Checkbox, Dialog, Typography } from '@equinor/eds-core-react' -import { InspectionAreaMapView } from 'utils/InspectionAreaMapView' -import { HorizontalContent, StyledDialog, VerticalContent } from './ScheduleMissionStyles' -import { useLanguageContext } from 'components/Contexts/LanguageContext' -import { Robot } from 'models/Robot' -import { ChangeEvent, useState } from 'react' -import { useInstallationContext } from 'components/Contexts/InstallationContext' - -interface ConfirmLocalizationDialogProps { - closeDialog: () => void - scheduleMissions: () => void - robot: Robot - newInspectionAreaName: string -} - -export const ConfirmLocalizationDialog = ({ - closeDialog, - scheduleMissions, - robot, - newInspectionAreaName, -}: ConfirmLocalizationDialogProps) => { - const { TranslateText } = useLanguageContext() - const { installationInspectionAreas } = useInstallationContext() - const [isCheckboxClicked, setIsCheckboxClicked] = useState(false) - - const newInspectionArea = installationInspectionAreas.find( - (inspectionArea) => inspectionArea.inspectionAreaName === newInspectionAreaName - ) - - return ( - - - {TranslateText('Confirm placement of robot')} - - - - - {`${robot.name} (${robot.model.type}) ${TranslateText( - 'needs to be placed on marked position on' - )} ${newInspectionAreaName} `} - {TranslateText('before')} - {` ${TranslateText('clicking confirm')}.`} - - {newInspectionArea && newInspectionArea.defaultLocalizationPose && ( - - )} - - ) => setIsCheckboxClicked(e.target.checked)} - /> - - {`${TranslateText('I confirm that')} ${robot.name} (${robot.model.type}) ${TranslateText( - 'has been placed on marked position on' - )} `} - {newInspectionAreaName} - - - - - - - - - - - - ) -} diff --git a/frontend/src/components/Displays/ConfirmScheduleDialogs/LocalizationVerification/ConflictingLocalizationDialog.tsx b/frontend/src/components/Displays/InspectionAreaVerificationDialogs/ConflictingInspectionAreaDialog.tsx similarity index 100% rename from frontend/src/components/Displays/ConfirmScheduleDialogs/LocalizationVerification/ConflictingLocalizationDialog.tsx rename to frontend/src/components/Displays/InspectionAreaVerificationDialogs/ConflictingInspectionAreaDialog.tsx diff --git a/frontend/src/components/Displays/ConfirmScheduleDialogs/LocalizationVerification/ScheduleMissionStyles.tsx b/frontend/src/components/Displays/InspectionAreaVerificationDialogs/ScheduleMissionStyles.tsx similarity index 82% rename from frontend/src/components/Displays/ConfirmScheduleDialogs/LocalizationVerification/ScheduleMissionStyles.tsx rename to frontend/src/components/Displays/InspectionAreaVerificationDialogs/ScheduleMissionStyles.tsx index f8b7f2974..c9e86f843 100644 --- a/frontend/src/components/Displays/ConfirmScheduleDialogs/LocalizationVerification/ScheduleMissionStyles.tsx +++ b/frontend/src/components/Displays/InspectionAreaVerificationDialogs/ScheduleMissionStyles.tsx @@ -9,10 +9,6 @@ export const StyledDialog = styled(Dialog)` max-width: 500px; max-height: 90vh; ` -export const HorizontalContent = styled.div` - display: flex; - gap: 1rem; -` export const VerticalContent = styled.div` display: flex; flex-direction: column; diff --git a/frontend/src/components/Displays/ConfirmScheduleDialogs/LocalizationVerification/ScheduleMissionWithLocalizationVerification.tsx b/frontend/src/components/Displays/InspectionAreaVerificationDialogs/ScheduleMissionWithInspectionAreaVerification.tsx similarity index 62% rename from frontend/src/components/Displays/ConfirmScheduleDialogs/LocalizationVerification/ScheduleMissionWithLocalizationVerification.tsx rename to frontend/src/components/Displays/InspectionAreaVerificationDialogs/ScheduleMissionWithInspectionAreaVerification.tsx index 4bf3f4895..2178f3667 100644 --- a/frontend/src/components/Displays/ConfirmScheduleDialogs/LocalizationVerification/ScheduleMissionWithLocalizationVerification.tsx +++ b/frontend/src/components/Displays/InspectionAreaVerificationDialogs/ScheduleMissionWithInspectionAreaVerification.tsx @@ -1,13 +1,11 @@ import { Robot } from 'models/Robot' import { useEffect, useState } from 'react' -import { ConfirmLocalizationDialog } from './ConfirmLocalizationDialog' import { ConflictingMissionInspectionAreasDialog, ConflictingRobotInspectionAreaDialog, -} from './ConflictingLocalizationDialog' +} from './ConflictingInspectionAreaDialog' import { UnknownInspectionAreaDialog } from './UnknownInspectionAreaDialog' import { useRobotContext } from 'components/Contexts/RobotContext' -import { useMissionsContext } from 'components/Contexts/MissionRunsContext' interface IProps { scheduleMissions: () => void @@ -17,14 +15,13 @@ interface IProps { } enum DialogTypes { - verifyInspectionArea, unknownNewInspectionArea, conflictingMissionInspectionAreas, conflictingRobotInspectionArea, unknown, } -export const ScheduleMissionWithLocalizationVerificationDialog = ({ +export const ScheduleMissionWithInspectionAreaVerification = ({ robotId, missionInspectionAreaNames, scheduleMissions, @@ -33,20 +30,12 @@ export const ScheduleMissionWithLocalizationVerificationDialog = ({ const { enabledRobots } = useRobotContext() const [dialogToOpen, setDialogToOpen] = useState(DialogTypes.unknown) const [selectedRobot, setSelectedRobot] = useState() - const { ongoingMissions } = useMissionsContext() const unikMissionInspectionAreaNames = missionInspectionAreaNames.filter( (inspectionAreaName, index) => inspectionAreaName !== '' && missionInspectionAreaNames.indexOf(inspectionAreaName) === index ) - const ongoingLocalizationMissionOnSameInspectionAreaExists = - ongoingMissions.filter( - (mission) => - mission.robot?.id === selectedRobot?.id && - mission.inspectionArea?.inspectionAreaName === unikMissionInspectionAreaNames[0] - ).length > 0 - useEffect(() => { setSelectedRobot(enabledRobots.find((robot) => robot.id === robotId)) }, [robotId, enabledRobots]) @@ -54,16 +43,6 @@ export const ScheduleMissionWithLocalizationVerificationDialog = ({ useEffect(() => { if (!selectedRobot) return - if ( - (unikMissionInspectionAreaNames.length === 1 && - selectedRobot.currentInspectionArea?.inspectionAreaName && - unikMissionInspectionAreaNames[0] === selectedRobot?.currentInspectionArea?.inspectionAreaName) || - ongoingLocalizationMissionOnSameInspectionAreaExists - ) { - scheduleMissions() - return - } - if (unikMissionInspectionAreaNames.length > 1) { setDialogToOpen(DialogTypes.conflictingMissionInspectionAreas) return @@ -75,29 +54,18 @@ export const ScheduleMissionWithLocalizationVerificationDialog = ({ } if ( - !selectedRobot.currentInspectionArea?.inspectionAreaName && - !ongoingLocalizationMissionOnSameInspectionAreaExists + selectedRobot.currentInspectionArea?.inspectionAreaName && + unikMissionInspectionAreaNames[0] !== selectedRobot.currentInspectionArea?.inspectionAreaName ) { - setDialogToOpen(DialogTypes.verifyInspectionArea) - return - } - - if (unikMissionInspectionAreaNames[0] !== selectedRobot.currentInspectionArea?.inspectionAreaName) { setDialogToOpen(DialogTypes.conflictingRobotInspectionArea) return } + + scheduleMissions() }, [unikMissionInspectionAreaNames, selectedRobot?.currentInspectionArea?.inspectionAreaName]) return ( <> - {dialogToOpen === DialogTypes.verifyInspectionArea && ( - - )} {dialogToOpen === DialogTypes.conflictingMissionInspectionAreas && ( {isLocationVerificationOpen && ( - startReRun(selectedRerunOption!)} closeDialog={() => setIsLocationVerificationOpen(false)} robotId={mission.robot.id} diff --git a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx index fc822745a..8e20a5b74 100644 --- a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx +++ b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx @@ -11,9 +11,9 @@ import { StyledAutoComplete, StyledButton, StyledDialog } from 'components/Style import { useMissionsContext } from 'components/Contexts/MissionRunsContext' import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' -import { ScheduleMissionWithConfirmDialogs } from 'components/Displays/ConfirmScheduleDialogs/ConfirmScheduleDialog' import { FrontPageSectionId } from 'models/FrontPageSectionId' import { AlertCategory } from 'components/Alerts/AlertsBanner' +import { ScheduleMissionWithInspectionAreaVerification } from 'components/Displays/InspectionAreaVerificationDialogs/ScheduleMissionWithInspectionAreaVerification' interface IProps { selectedMissions: MissionDefinition[] @@ -55,7 +55,7 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { const { enabledRobots } = useRobotContext() const { setLoadingRobotMissionSet } = useMissionsContext() const { setAlert, setListAlert } = useAlertContext() - const [isLocalizationVerificationDialogOpen, setIsLocalizationVerificationDialog] = useState(false) + const [isInspectionAreaVerificationDialogOpen, setIsInspectionAreaVerificationDialogOpen] = useState(false) const [missionsToSchedule, setMissionsToSchedule] = useState() const filteredRobots = enabledRobots.filter( (r) => @@ -76,11 +76,11 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { if (!selectedRobot) return setMissionsToSchedule(missions) - setIsLocalizationVerificationDialog(true) + setIsInspectionAreaVerificationDialogOpen(true) } const scheduleMissions = () => { - setIsLocalizationVerificationDialog(false) + setIsInspectionAreaVerificationDialogOpen(false) if (!selectedRobot || !missionsToSchedule) return @@ -132,14 +132,14 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { } const closeScheduleDialogs = () => { - setIsLocalizationVerificationDialog(false) + setIsInspectionAreaVerificationDialogOpen(false) props.closeDialog() } return ( <> - + {TranslateText('Add mission to the queue')} {props.isAlreadyScheduled && ( @@ -195,8 +195,8 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { - {isLocalizationVerificationDialogOpen && ( - { +const getMeta = async (url: string) => { const image = new Image() image.src = url await image.decode() diff --git a/frontend/src/language/en.json b/frontend/src/language/en.json index 50f5d8419..5e4946d35 100644 --- a/frontend/src/language/en.json +++ b/frontend/src/language/en.json @@ -65,9 +65,6 @@ "You don't have access to this site. Apply for access in AccessIT": "You don't have access to this site. Apply for access in AccessIT", "An unknown error has occurred": "An unknown error has occurred", "Select area": "Select area", - "Localize": "Localize", - "Localization": "Localization", - "Localize robot": "Localize robot", "Robot Status": "Robot Status", "Stop": "Stop", "Start": "Start", @@ -75,7 +72,6 @@ "Moving arm to ": "Moving arm to ", " Error message: ": " Error message: ", "Error moving robot arm to ": "Error moving robot arm to ", - "Click on the map to move the localization position": "Click on the map to move the localization position", "Select direction": "Select direction", "North": "North", "East": "East", @@ -99,7 +95,6 @@ "selected": "selected", "This button is disabled because the robot is not available. Check that the robot is on, and are not doing any other activities.": "This button is disabled because the robot is not available. Check that the robot is on, and are not doing any other activities.", "Close": "Close", - "Localizing": "Localizing", "statuses": "Statuses", "tagId": "Tag ID", "robotName": "Robot name", @@ -186,13 +181,6 @@ "No missions available": "No missions available", "Failed to delete mission from queue": "Failed to delete mission from queue", "Failed to rerun mission": "Failed to rerun mission", - "needs to be placed on marked position on": "needs to be placed on marked position on", - "before": "before", - "clicking confirm": "clicking confirm", - "Confirm": "Confirm", - "I confirm that": "I confirm that", - "has been placed on marked position on": "has been placed on marked position on", - "Confirm placement of robot": "Confirm placement of robot", "Conflicting inspection areas": "Conflicting inspection areas", "The missions you are trying to add are on": "The missions you are trying to add are on", "but the robot is currently running missions on": "but the robot is currently running missions on", @@ -221,7 +209,6 @@ "Connection Issues": "Connection Issues", "Stop button pressed during return home warning text": "You are about to stop a mission that will send the robot back to the start position. You must manually drive the robot to the start position to start a new mission.", "Failed Telemetry": "Failed Telemetry", - "Stop button pressed during localization warning text": "You are about to stop a mission that localizes the robot. You will not be able to run an inspection mission until you have successfully localized the robot.", "HighHigh": "HighHigh", "High": "High", "Ok": "Ok", diff --git a/frontend/src/language/no.json b/frontend/src/language/no.json index 569cca2c2..04f6356e7 100644 --- a/frontend/src/language/no.json +++ b/frontend/src/language/no.json @@ -65,9 +65,6 @@ "You don't have access to this site. Apply for access in AccessIT": "Du har ikke tilgang til denne siden. Søk om tilgang i AccessIT", "An unknown error has occurred": "En ukjent feil oppstod", "Select area": "Velg område", - "Localize": "Lokaliser", - "Localization": "Lokalisering", - "Localize robot": "Lokaliser roboten", "Robot Status": "Robotstatus", "Stop": "Stopp", "Start": "Start", @@ -75,7 +72,6 @@ "Moving arm to ": "Flytter armen til ", " Error message: ": " Feilmelding: ", "Error moving robot arm to ": "Feil med å flytte robotarm til ", - "Click on the map to move the localization position": "Klikk på kartet for å flytte lokaliseringspunktet", "Select direction": "Velg retning", "North": "Nord", "East": "Øst", @@ -99,7 +95,6 @@ "selected": "valgte", "This button is disabled because the robot is not available. Check that the robot is on, and are not doing any other activities.": "Denne knappen er deaktivert fordi roboten ikke er tilgjengelig. Sjekk at roboten er på og ikke gjør noen andre aktiviteter.", "Close": "Lukk", - "Localizing": "Lokaliserer", "statuses": "Statuser", "tagId": "Tag ID", "robotName": "Robotnavn", @@ -186,13 +181,6 @@ "No missions available": "Ingen oppdrag tilgjengelig", "Failed to delete mission from queue": "Kunne ikke fjerne oppdrag fra køen", "Failed to rerun mission": "Kunne ikke kjøre oppdraget på nytt", - "needs to be placed on marked position on": "må settes på markert plassering på", - "before": "før", - "clicking confirm": "du trykker bekreft", - "Confirm": "Bekreft", - "I confirm that": "Jeg bekrefter at", - "has been placed on marked position on": "har blitt plassert på markert plassering på", - "Confirm placement of robot": "Bekreft plassering av robot", "Conflicting inspection areas": "Motstridende inspeksjonsområder", "The missions you are trying to add are on": "Oppdragene du vil legge til er på", "but the robot is currently running missions on": "men roboten kjører oppdrag på", @@ -221,7 +209,6 @@ "Connection Issues": "Tilkoblings\u00adproblemer", "Stop button pressed during return home warning text": "Du er i ferd med å stoppe et oppdrag som sender roboten tilbake til startposisjonen. Du må kjøre roboten manuelt til startposisjonen for å starte et nytt oppdrag.", "Failed Telemetry": "Mislykket telemetri", - "Stop button pressed during localization warning text": "Du er i ferd med å stoppe et oppdrag som lokaliserer roboten. Du vil ikke kunne kjøre et inspeksjonsoppdrag før du har lokalisert roboten.", "HighHigh": "HøyHøy", "High": "Høy", "Ok": "Ok", diff --git a/frontend/src/models/InspectionArea.ts b/frontend/src/models/InspectionArea.ts index 0e5032a6b..101178140 100644 --- a/frontend/src/models/InspectionArea.ts +++ b/frontend/src/models/InspectionArea.ts @@ -1,9 +1,6 @@ -import { Pose } from './Pose' - export interface InspectionArea { id: string inspectionAreaName: string plantName: string installationCode: string - defaultLocalizationPose?: Pose } diff --git a/frontend/src/models/Robot.ts b/frontend/src/models/Robot.ts index 27f49ddcf..46afa1031 100644 --- a/frontend/src/models/Robot.ts +++ b/frontend/src/models/Robot.ts @@ -53,7 +53,7 @@ export const placeholderRobot: Robot = { deprecated: false, } -export enum RobotCapabilitiesEnum { +enum RobotCapabilitiesEnum { take_thermal_image = 'take_thermal_image', take_image = 'take_image', take_video = 'take_video', diff --git a/frontend/src/utils/InspectionAreaMapView.tsx b/frontend/src/utils/InspectionAreaMapView.tsx deleted file mode 100644 index 58d5b7775..000000000 --- a/frontend/src/utils/InspectionAreaMapView.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { CircularProgress, Typography } from '@equinor/eds-core-react' -import { useCallback, useEffect, useState } from 'react' -import styled from 'styled-components' -import NoMap from 'mediaAssets/NoMap.png' -import { placeRobotInMap } from 'utils/MapMarkers' -import { BackendAPICaller } from 'api/ApiCaller' -import { MapMetadata } from 'models/MapMetadata' -import { Pose } from 'models/Pose' -import { MapCompass } from 'utils/MapCompass' -import { InspectionArea } from 'models/InspectionArea' -import { useLanguageContext } from 'components/Contexts/LanguageContext' -import { getMeta } from 'components/Pages/MissionPage/MapPosition/MissionMapView' - -interface InspectionAreaProps { - inspectionArea: InspectionArea - markedRobotPosition: Pose -} - -const StyledMap = styled.canvas` - max-height: 50vh; - max-width: 90%; - margin: auto; -` -const StyledMapLimits = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -` -const StyledLoading = styled.div` - display: flex; - justify-content: center; -` -const StyledMapCompass = styled.div` - display: flex; - flex-direction: row; - align-items: end; -` -const StyledCaption = styled.div` - display: flex; - flex-direction: column; - justify-content: left; - gap: 10px; -` - -export const InspectionAreaMapView = ({ inspectionArea, markedRobotPosition }: InspectionAreaProps) => { - const [mapCanvas, setMapCanvas] = useState(document.createElement('canvas')) - const [mapImage, setMapImage] = useState(document.createElement('img')) - const [mapContext, setMapContext] = useState() - const [mapMetadata, setMapMetadata] = useState() - const [isLoading, setIsLoading] = useState() - const { TranslateText } = useLanguageContext() - - const updateMap = useCallback(() => { - const context = mapCanvas.getContext('2d') - if (context === null) { - return - } - context.clearRect(0, 0, mapCanvas.width, mapCanvas.height) - context?.drawImage(mapImage, 0, 0) - if (mapMetadata) { - placeRobotInMap(mapMetadata, mapCanvas, markedRobotPosition) - } - }, [mapCanvas, mapImage, mapMetadata, markedRobotPosition]) - - let mapName = mapMetadata?.mapName.split('.')[0].replace(/[^0-9a-zA-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) - if (!imageObjectURL) return - - getMeta(imageObjectURL as string) - .then((img) => { - const mapCanvas = document.getElementById('inspectionAreaMapCanvas') as HTMLCanvasElement - if (!mapCanvas) return - mapCanvas.width = img.width - mapCanvas.height = img.height - const context = mapCanvas?.getContext('2d') - if (context) { - setMapContext(context) - context.drawImage(img, 0, 0) - } - setMapCanvas(mapCanvas) - setMapImage(img) - }) - .catch((error) => { - console.error('Failed to get image metadata:', error) - }) - setIsLoading(false) - } - - setIsLoading(true) - BackendAPICaller.getInspectionAreaMapMetadata(inspectionArea.id) - .then((mapMetadata) => { - setMapMetadata(mapMetadata) - BackendAPICaller.getMap(inspectionArea.installationCode, mapMetadata.mapName) - .then(processImageURL) - .catch(() => { - setIsLoading(false) - processImageURL(NoMap) - }) - }) - .catch(() => { - setMapMetadata(undefined) - processImageURL(NoMap) - }) - }, []) - - useEffect(() => { - let animationFrameId = 0 - if (mapContext) { - const render = () => { - updateMap() - animationFrameId = window.requestAnimationFrame(render) - } - render() - } - return () => window.cancelAnimationFrame(animationFrameId) - }, [updateMap, mapContext]) - - return ( - <> - {isLoading && ( - - - - )} - {!isLoading && ( - - - - - {mapMetadata && } - - {mapMetadata !== undefined && ( - - {TranslateText('Map of {0}', [mapName])} - - )} - - - )} - - ) -}