From 82beadf0788100e8acc03ff4be7f193b564e5b14 Mon Sep 17 00:00:00 2001
From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 01:43:35 +0545
Subject: [PATCH] fix(frontend): display submission point feature if feature
 not in extract  (#1638)

* feat(submissionDetails): show submission point if no submission feature present

* feat(submissionInstanceMap): style, zoomToLayer fix
---
 .../SubmissionMap/SubmissionInstanceMap.tsx   |  9 ++++++++-
 src/frontend/src/views/SubmissionDetails.tsx  | 20 ++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/SubmissionMap/SubmissionInstanceMap.tsx b/src/frontend/src/components/SubmissionMap/SubmissionInstanceMap.tsx
index 88f81c75cb..fa855e954c 100644
--- a/src/frontend/src/components/SubmissionMap/SubmissionInstanceMap.tsx
+++ b/src/frontend/src/components/SubmissionMap/SubmissionInstanceMap.tsx
@@ -38,9 +38,16 @@ const SubmissionInstanceMap = ({ featureGeojson }: submissionInstanceMapPropType
         {featureGeojson?.type && (
           <VectorLayer
             geojson={featureGeojson}
+            viewProperties={{
+              size: map?.getSize(),
+              padding: [50, 50, 50, 50],
+              constrainResolution: true,
+              duration: 2000,
+              maxZoom: 20,
+            }}
             zIndex={10}
             zoomToLayer
-            style={{ ...defaultStyles, lineColor: '#D73F37', lineThickness: 2 }}
+            style={{ ...defaultStyles, lineColor: '#D73F37', lineThickness: 2, circleRadius: 10, fillColor: '#D73F37' }}
           />
         )}
       </MapComponent>
diff --git a/src/frontend/src/views/SubmissionDetails.tsx b/src/frontend/src/views/SubmissionDetails.tsx
index edc58ebe71..c29d76da26 100644
--- a/src/frontend/src/views/SubmissionDetails.tsx
+++ b/src/frontend/src/views/SubmissionDetails.tsx
@@ -22,7 +22,11 @@ const SubmissionDetails = () => {
   const projectDashboardLoading = useAppSelector((state) => state.project.projectDashboardLoading);
   const submissionDetails = useAppSelector((state) => state.submission.submissionDetails);
   const submissionDetailsLoading = useAppSelector((state) => state.submission.submissionDetailsLoading);
-  const taskId = submissionDetails?.task_id;
+  const taskId = submissionDetails?.task_id
+    ? submissionDetails?.task_id
+    : submissionDetails?.task_filter
+      ? submissionDetails?.task_filter
+      : '-';
 
   useEffect(() => {
     dispatch(GetProjectDashboard(`${import.meta.env.VITE_API_URL}/projects/project_dashboard/${projectId}`));
@@ -54,7 +58,7 @@ const SubmissionDetails = () => {
   }
   const filteredData = submissionDetails ? removeNullValues(submissionDetails) : {};
 
-  var coordinatesArray: [number, number][] = submissionDetails?.xlocation?.split(';').map(function (coord: string) {
+  const coordinatesArray: [number, number][] = submissionDetails?.xlocation?.split(';').map(function (coord: string) {
     let coordinate = coord
       .trim()
       .split(' ')
@@ -79,6 +83,14 @@ const SubmissionDetails = () => {
     ],
   };
 
+  const pointFeature = {
+    type: 'Feature',
+    geometry: {
+      ...submissionDetails?.point,
+    },
+    properties: {},
+  };
+
   const renderValue = (value: any, key: string = '') => {
     if (key === 'start' || key === 'end') {
       return (
@@ -169,7 +181,9 @@ const SubmissionDetails = () => {
         </div>
         <div className="fmtm-flex fmtm-flex-grow fmtm-justify-center">
           <div className="fmtm-w-full fmtm-my-10 xl:fmtm-my-0 xl:fmtm-w-[500px] 2xl:fmtm-w-[700px] fmtm-h-[300px] fmtm-rounded-lg fmtm-overflow-hidden">
-            <SubmissionInstanceMap featureGeojson={geojsonFeature} />
+            <SubmissionInstanceMap
+              featureGeojson={coordinatesArray ? geojsonFeature : submissionDetails?.point ? pointFeature : {}}
+            />
           </div>
         </div>
       </div>