From 140382419a5bbed7eb7fc9230338ca388284d187 Mon Sep 17 00:00:00 2001 From: Sujit <90745363+suzit-10@users.noreply.github.com> Date: Tue, 19 Nov 2024 10:16:18 +0545 Subject: [PATCH] Fix: Application crash on file upload and implement zoom to orthophoto (#341) * feat(project-creation-form): form wrapper UI update * feat(project-creation-form): form header update * feat(project-creation-form): form step switcher UI update * feat(project-creation-form): update wrapper of form content and description * feat(project-creation-form): update basic information form information and form content * feat(project-creation-form): update define AOI form information and form content * feat(project-creation-form): update Key parameters form information and form content UI * feat(project-creation-form): update generate task step form information and form content UI * feat(project-creation-form): add animaiton on info text * feat(project-creation-form): update contribution step form information and form content UI * feat(project-creation-form): update style on form wrapper * feat(dashboard): make UI responsive * feat(project-creation-form): clear all state on form component unmount * feat(task-description): prevent click event untill processing starter api and status updation success * feat(project-description): add getLayerOptionsByStatus static function * feat(project-description): refactor dynamic fill color as per task status using `getLayerOptionsByStatus` * feat(project-description): separate the logic of showing `go To Task`/`Lock Task` button by the use of `showPrimaryButton` function * feat: restrict user redirection to complete profile if user profile is loading * feat: add maxBounds `[[-179, -89],[179, 89]]` to restrict map panning * fix(#332): fix crash application on file upload on firefox in firefox `File.lastmodifiedDate` has no longer support fixed replacing `lastModifiedDate` with `lastModified` * feat: add zoomToLayer optional feature on COGOrthophotoViewer component * feat(orthophoto-preview): implement zoom to orthohphoto --------- Co-authored-by: Sujit --- .../ModalContent/TaskOrthophotoPreview.tsx | 18 +++++------------- .../COGOrthophotoViewer/index.tsx | 11 ++++++++++- .../src/components/common/UploadArea/index.tsx | 6 +++--- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/frontend/src/components/DroneOperatorTask/ModalContent/TaskOrthophotoPreview.tsx b/src/frontend/src/components/DroneOperatorTask/ModalContent/TaskOrthophotoPreview.tsx index 902068be..68dff04f 100644 --- a/src/frontend/src/components/DroneOperatorTask/ModalContent/TaskOrthophotoPreview.tsx +++ b/src/frontend/src/components/DroneOperatorTask/ModalContent/TaskOrthophotoPreview.tsx @@ -4,7 +4,8 @@ import COGOrthophotoViewer from '@Components/common/MapLibreComponents/COGOrthop import MapContainer from '@Components/common/MapLibreComponents/MapContainer'; import { setSelectedTaskDetailToViewOrthophoto } from '@Store/actions/droneOperatorTask'; import { useTypedSelector } from '@Store/hooks'; -import { LngLatBoundsLike, RasterSourceSpecification } from 'maplibre-gl'; +import hasErrorBoundary from '@Utils/hasErrorBoundary'; +import { RasterSourceSpecification } from 'maplibre-gl'; import { useEffect, useMemo } from 'react'; import { useDispatch } from 'react-redux'; @@ -12,10 +13,6 @@ const { COG_URL } = process.env; const TaskOrthophotoPreview = () => { const dispatch = useDispatch(); - const taskOutline = useTypedSelector( - state => - state.droneOperatorTask.selectedTaskDetailToViewOrthophoto?.outline, - ); const taskIdFromRedux = useTypedSelector( state => state.droneOperatorTask.selectedTaskDetailToViewOrthophoto?.taskId, ); @@ -26,7 +23,7 @@ const TaskOrthophotoPreview = () => { const { map, isMapLoaded } = useMapLibreGLMap({ containerId: 'orthophoto-map', mapOptions: { - zoom: 21, + zoom: 5, center: [0, 0], }, disableRotation: true, @@ -42,12 +39,6 @@ const TaskOrthophotoPreview = () => { [projectId, taskId], ); - useEffect(() => { - if (!map || !isMapLoaded || !taskOutline) return; - const { bbox } = taskOutline.properties; - map?.fitBounds(bbox as LngLatBoundsLike, { padding: 50, duration: 500 }); - }, [map, isMapLoaded, taskOutline]); - useEffect(() => { return () => { dispatch(setSelectedTaskDetailToViewOrthophoto(null)); @@ -70,10 +61,11 @@ const TaskOrthophotoPreview = () => { id="task-orthophoto" source={orthophotoSource} visibleOnMap + zoomToLayer /> ); }; -export default TaskOrthophotoPreview; +export default hasErrorBoundary(TaskOrthophotoPreview); diff --git a/src/frontend/src/components/common/MapLibreComponents/COGOrthophotoViewer/index.tsx b/src/frontend/src/components/common/MapLibreComponents/COGOrthophotoViewer/index.tsx index 3a465717..c3488d9b 100644 --- a/src/frontend/src/components/common/MapLibreComponents/COGOrthophotoViewer/index.tsx +++ b/src/frontend/src/components/common/MapLibreComponents/COGOrthophotoViewer/index.tsx @@ -9,6 +9,7 @@ interface IViewOrthophotoProps { id: string; source: RasterSourceSpecification; visibleOnMap?: Boolean; + zoomToLayer?: Boolean; } const COGOrthophotoViewer = ({ @@ -17,6 +18,7 @@ const COGOrthophotoViewer = ({ id, source, visibleOnMap, + zoomToLayer = false, }: IViewOrthophotoProps) => { useEffect(() => { if (!map || !isMapLoaded || !source || !visibleOnMap) return; @@ -34,14 +36,21 @@ const COGOrthophotoViewer = ({ }); } + const zoomToSource = setTimeout(() => { + if (map?.getSource(id) && zoomToLayer) + // @ts-ignore + map?.fitBounds(map?.getSource(id)?.bounds, { padding: 50 }); + }, 1000); + // eslint-disable-next-line consistent-return return () => { if (map?.getSource(id)) { map?.removeSource(id); if (map?.getLayer(id)) map?.removeLayer(id); } + clearTimeout(zoomToSource); }; - }, [map, isMapLoaded, id, source, visibleOnMap]); + }, [map, isMapLoaded, id, source, visibleOnMap, zoomToLayer]); return null; }; diff --git a/src/frontend/src/components/common/UploadArea/index.tsx b/src/frontend/src/components/common/UploadArea/index.tsx index 258434d1..8fdb5cfd 100644 --- a/src/frontend/src/components/common/UploadArea/index.tsx +++ b/src/frontend/src/components/common/UploadArea/index.tsx @@ -141,14 +141,14 @@ export default function FileUpload({ key={id} className="naxatw-items-center naxatw-justify-between naxatw-rounded-lg naxatw-border naxatw-px-4 naxatw-py-2" > - +
{file?.name}
{file && file?.lastModified && (

- Uploaded on - {format(new Date(file.lastModifiedDate), 'MMM dd yyyy')} + Uploaded on{' '} + {format(new Date(file.lastModified), 'MMM dd yyyy')}

)}