From 44bc2056d922149b9135b2913a9fef585b7716b6 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Wed, 24 Jan 2024 12:38:26 +0545
Subject: [PATCH 1/5] feat (createNewProject): mapControlComponent -
 mapControlComponent including edit, undo added

---
 .../LayerSwitcher/index.js                    | 11 +++-
 .../createnewproject/MapControlComponent.tsx  | 63 +++++++++++++++++++
 .../createnewproject/SplitTasks.tsx           |  1 +
 src/frontend/src/views/NewDefineAreaMap.tsx   |  5 ++
 4 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/src/components/createnewproject/MapControlComponent.tsx

diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
index a574f4f5d7..7d967cae3d 100644
--- a/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
@@ -161,12 +161,19 @@ const LayerSwitcherControl = ({ map, visible = 'osm' }) => {
       layerSwitcher.style.justifyContent = 'center';
       layerSwitcher.style.alignItems = 'center';
     }
-    if (location.pathname.includes('project_details')) {
+    if (
+      location.pathname.includes('project_details') ||
+      location.pathname.includes('upload-area') ||
+      location.pathname.includes('select-form') ||
+      location.pathname.includes('data-extract') ||
+      location.pathname.includes('split-tasks')
+    ) {
+      console.log('yesssss');
       const olZoom = document.querySelector('.ol-zoom');
       if (olZoom) {
         olZoom.style.display = 'none';
       }
-      if (layerSwitcher) {
+      if (layerSwitcher && location.pathname.includes('project_details')) {
         layerSwitcher.style.right = '19px';
         layerSwitcher.style.top = '250px';
         layerSwitcher.style.zIndex = '1000';
diff --git a/src/frontend/src/components/createnewproject/MapControlComponent.tsx b/src/frontend/src/components/createnewproject/MapControlComponent.tsx
new file mode 100644
index 0000000000..f469c4be3b
--- /dev/null
+++ b/src/frontend/src/components/createnewproject/MapControlComponent.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import AssetModules from '../../shared/AssetModules';
+import VectorLayer from 'ol/layer/Vector';
+import CoreModules from '../../shared/CoreModules.js';
+import { ProjectActions } from '../../store/slices/ProjectSlice';
+
+const btnList = [
+  {
+    id: 'Add',
+    icon: <AssetModules.AddIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+  },
+  {
+    id: 'Minus',
+    icon: <AssetModules.RemoveIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+  },
+  {
+    id: 'Edit',
+    icon: <AssetModules.TimelineIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+  },
+  {
+    id: 'Undo',
+    icon: <AssetModules.UndoIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+  },
+];
+
+const MapControlComponent = ({ map, hasEditUndo }) => {
+  const dispatch = CoreModules.useAppDispatch();
+
+  const handleOnClick = (btnId) => {
+    if (btnId === 'Add') {
+      const actualZoom = map.getView().getZoom();
+      map.getView().setZoom(actualZoom + 1);
+    } else if (btnId === 'Minus') {
+      const actualZoom = map.getView().getZoom();
+      map.getView().setZoom(actualZoom - 1);
+    } else if (btnId === 'Edit') {
+    } else if (btnId === 'Undo') {
+    }
+  };
+
+  return (
+    <div className="fmtm-absolute fmtm-top-[20px] fmtm-left-3 fmtm-z-50 fmtm-bg-white fmtm-rounded-md fmtm-p-[2px] fmtm-shadow-xl">
+      {btnList.map((btn) => {
+        return (
+          <div key={btn.id} title={btn.id}>
+            {((btn.id !== 'Edit' && btn.id !== 'Undo') ||
+              (btn.id === 'Edit' && hasEditUndo) ||
+              (btn.id === 'Undo' && hasEditUndo)) && (
+              <div
+                className="fmtm-bg-white fmtm-p-1 fmtm-rounded-md hover:fmtm-bg-gray-100 fmtm-duration-200"
+                onClick={() => handleOnClick(btn.id)}
+              >
+                {btn.icon}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default MapControlComponent;
diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
index 55e92b5ff6..a49e81df99 100644
--- a/src/frontend/src/components/createnewproject/SplitTasks.tsx
+++ b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -432,6 +432,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
                     dispatch(CreateProjectActions.SetDividedTaskGeojson(JSON.parse(geojson)));
                     setGeojsonFile(null);
                   }}
+                  hasEditUndo
                 />
               </div>
               {generateProjectLog ? (
diff --git a/src/frontend/src/views/NewDefineAreaMap.tsx b/src/frontend/src/views/NewDefineAreaMap.tsx
index 15364b012e..c14cc9eb12 100644
--- a/src/frontend/src/views/NewDefineAreaMap.tsx
+++ b/src/frontend/src/views/NewDefineAreaMap.tsx
@@ -4,6 +4,8 @@ import { MapContainer as MapComponent } from '../components/MapComponent/OpenLay
 import LayerSwitcherControl from '../components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js';
 import { VectorLayer } from '../components/MapComponent/OpenLayersComponent/Layers';
 import { GeoJSONFeatureTypes } from '../store/types/ICreateProject';
+import AssetModules from '../shared/AssetModules.js';
+import MapControlComponent from '../components/createnewproject/MapControlComponent';
 
 type NewDefineAreaMapProps = {
   drawToggle?: boolean;
@@ -13,6 +15,7 @@ type NewDefineAreaMapProps = {
   lineExtractedGeojson?: GeoJSONFeatureTypes;
   onDraw?: (geojson: any, area: number) => void;
   onModify?: (geojson: any, area?: number) => void;
+  hasEditUndo?: boolean;
 };
 const NewDefineAreaMap = ({
   drawToggle,
@@ -22,6 +25,7 @@ const NewDefineAreaMap = ({
   lineExtractedGeojson,
   onDraw,
   onModify,
+  hasEditUndo,
 }: NewDefineAreaMapProps) => {
   const { mapRef, map } = useOLMap({
     // center: fromLonLat([85.3, 27.7]),
@@ -43,6 +47,7 @@ const NewDefineAreaMap = ({
         }}
       >
         <LayerSwitcherControl />
+        <MapControlComponent map={map} hasEditUndo={hasEditUndo} />
         {splittedGeojson && (
           <VectorLayer
             geojson={splittedGeojson}

From 2b1a0102063a7eae65d61068b4037647d95cb0dc Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Wed, 24 Jan 2024 12:39:07 +0545
Subject: [PATCH 2/5] feat AssetModules: icons added

---
 src/frontend/src/shared/AssetModules.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/frontend/src/shared/AssetModules.js b/src/frontend/src/shared/AssetModules.js
index adf038da20..4baba51804 100755
--- a/src/frontend/src/shared/AssetModules.js
+++ b/src/frontend/src/shared/AssetModules.js
@@ -56,6 +56,8 @@ import {
   AccessTime as AccessTimeIcon,
   ImportExport as ImportExportIcon,
   Check as CheckIcon,
+  Undo as UndoIcon,
+  Timeline as TimelineIcon,
 } from '@mui/icons-material';
 import LockPng from '../assets/images/lock.png';
 import RedLockPng from '../assets/images/red-lock.png';
@@ -122,4 +124,6 @@ export default {
   AccessTimeIcon,
   ImportExportIcon,
   CheckIcon,
+  UndoIcon,
+  TimelineIcon,
 };

From ec2e9fe93f3805a6f6040f8a146e54d93061ab97 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Wed, 24 Jan 2024 14:44:38 +0545
Subject: [PATCH 3/5] feat (createNewProject): splitTasks - edit task on
 editBtn click

---
 .../OpenLayersComponent/Layers/VectorLayer.js |  6 +-
 .../createnewproject/MapControlComponent.tsx  | 56 +++++++++++--------
 .../createnewproject/SplitTasks.tsx           | 18 ++++--
 .../src/store/slices/CreateProjectSlice.ts    |  4 ++
 .../src/store/types/ICreateProject.ts         |  1 +
 src/frontend/src/views/NewDefineAreaMap.tsx   |  3 +-
 6 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js
index e3cb4c26d7..3ed0cc9a7f 100644
--- a/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js
@@ -83,7 +83,9 @@ const VectorLayer = ({
     map.addInteraction(select);
 
     return () => {
-      // map.removeInteraction(defaultInteractions().extend([select, modify]))
+      // map.removeInteraction(defaultInteractions().extend([select, modify]));
+      map.removeInteraction(modify);
+      map.removeInteraction(select);
     };
   }, [map, vectorLayer, onModify]);
 
@@ -213,7 +215,7 @@ const VectorLayer = ({
           ]
         : [getStyles({ style, feature, resolution })];
     });
-  }, [vectorLayer, style, setStyle]);
+  }, [vectorLayer, style, setStyle, onModify]);
 
   useEffect(() => {
     if (!vectorLayer) return;
diff --git a/src/frontend/src/components/createnewproject/MapControlComponent.tsx b/src/frontend/src/components/createnewproject/MapControlComponent.tsx
index f469c4be3b..ec1387133d 100644
--- a/src/frontend/src/components/createnewproject/MapControlComponent.tsx
+++ b/src/frontend/src/components/createnewproject/MapControlComponent.tsx
@@ -2,29 +2,36 @@ import React, { useState } from 'react';
 import AssetModules from '../../shared/AssetModules';
 import VectorLayer from 'ol/layer/Vector';
 import CoreModules from '../../shared/CoreModules.js';
-import { ProjectActions } from '../../store/slices/ProjectSlice';
-
-const btnList = [
-  {
-    id: 'Add',
-    icon: <AssetModules.AddIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
-  },
-  {
-    id: 'Minus',
-    icon: <AssetModules.RemoveIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
-  },
-  {
-    id: 'Edit',
-    icon: <AssetModules.TimelineIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
-  },
-  {
-    id: 'Undo',
-    icon: <AssetModules.UndoIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
-  },
-];
+import { CreateProjectActions } from '../../store/slices/CreateProjectSlice';
 
 const MapControlComponent = ({ map, hasEditUndo }) => {
   const dispatch = CoreModules.useAppDispatch();
+  const toggleSplittedGeojsonEdit = CoreModules.useAppSelector(
+    (state) => state.createproject.toggleSplittedGeojsonEdit,
+  );
+  const btnList = [
+    {
+      id: 'Add',
+      icon: <AssetModules.AddIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+    },
+    {
+      id: 'Minus',
+      icon: <AssetModules.RemoveIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+    },
+    {
+      id: 'Edit',
+      icon: (
+        <AssetModules.TimelineIcon
+          style={{ fontSize: '20px' }}
+          className={`${toggleSplittedGeojsonEdit ? 'fmtm-text-primaryRed' : 'fmtm-text-[#666666]'}`}
+        />
+      ),
+    },
+    {
+      id: 'Undo',
+      icon: <AssetModules.UndoIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+    },
+  ];
 
   const handleOnClick = (btnId) => {
     if (btnId === 'Add') {
@@ -34,12 +41,13 @@ const MapControlComponent = ({ map, hasEditUndo }) => {
       const actualZoom = map.getView().getZoom();
       map.getView().setZoom(actualZoom - 1);
     } else if (btnId === 'Edit') {
+      dispatch(CreateProjectActions.SetToggleSplittedGeojsonEdit(!toggleSplittedGeojsonEdit));
     } else if (btnId === 'Undo') {
     }
   };
 
   return (
-    <div className="fmtm-absolute fmtm-top-[20px] fmtm-left-3 fmtm-z-50 fmtm-bg-white fmtm-rounded-md fmtm-p-[2px] fmtm-shadow-xl">
+    <div className="fmtm-absolute fmtm-top-[20px] fmtm-left-3 fmtm-z-50 fmtm-bg-white fmtm-rounded-md fmtm-p-[2px] fmtm-shadow-xl fmtm-flex fmtm-flex-col fmtm-gap-[2px]">
       {btnList.map((btn) => {
         return (
           <div key={btn.id} title={btn.id}>
@@ -47,7 +55,11 @@ const MapControlComponent = ({ map, hasEditUndo }) => {
               (btn.id === 'Edit' && hasEditUndo) ||
               (btn.id === 'Undo' && hasEditUndo)) && (
               <div
-                className="fmtm-bg-white fmtm-p-1 fmtm-rounded-md hover:fmtm-bg-gray-100 fmtm-duration-200"
+                className={` fmtm-p-1 fmtm-rounded-md fmtm-duration-200 fmtm-cursor-pointer ${
+                  toggleSplittedGeojsonEdit && btn.id === 'Edit'
+                    ? 'fmtm-bg-red-50'
+                    : 'fmtm-bg-white hover:fmtm-bg-gray-100'
+                }`}
                 onClick={() => handleOnClick(btn.id)}
               >
                 {btn.icon}
diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
index a49e81df99..d8915bc6a4 100644
--- a/src/frontend/src/components/createnewproject/SplitTasks.tsx
+++ b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -62,6 +62,9 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
   );
   const isTasksGenerated = CoreModules.useAppSelector((state) => state.createproject.isTasksGenerated);
   const isFgbFetching = CoreModules.useAppSelector((state) => state.createproject.isFgbFetching);
+  const toggleSplittedGeojsonEdit = CoreModules.useAppSelector(
+    (state) => state.createproject.toggleSplittedGeojsonEdit,
+  );
 
   const toggleStep = (step, url) => {
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: step }));
@@ -427,11 +430,16 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
                   splittedGeojson={dividedTaskGeojson}
                   uploadedOrDrawnGeojsonFile={drawnGeojson}
                   buildingExtractedGeojson={dataExtractGeojson}
-                  onModify={(geojson) => {
-                    handleCustomChange('drawnGeojson', geojson);
-                    dispatch(CreateProjectActions.SetDividedTaskGeojson(JSON.parse(geojson)));
-                    setGeojsonFile(null);
-                  }}
+                  onModify={
+                    toggleSplittedGeojsonEdit
+                      ? (geojson) => {
+                          handleCustomChange('drawnGeojson', geojson);
+                          dispatch(CreateProjectActions.SetDividedTaskGeojson(JSON.parse(geojson)));
+                          setGeojsonFile(null);
+                        }
+                      : null
+                  }
+                  // toggleSplittedGeojsonEdit
                   hasEditUndo
                 />
               </div>
diff --git a/src/frontend/src/store/slices/CreateProjectSlice.ts b/src/frontend/src/store/slices/CreateProjectSlice.ts
index b8e677609d..ecdf7b33b9 100755
--- a/src/frontend/src/store/slices/CreateProjectSlice.ts
+++ b/src/frontend/src/store/slices/CreateProjectSlice.ts
@@ -49,6 +49,7 @@ export const initialState: CreateProjectStateTypes = {
   canSwitchCreateProjectSteps: false,
   isTasksGenerated: { divide_on_square: false, task_splitting_algorithm: false },
   isFgbFetching: false,
+  toggleSplittedGeojsonEdit: false,
 };
 
 const CreateProject = createSlice({
@@ -225,6 +226,9 @@ const CreateProject = createSlice({
       state.dataExtractGeojson = null;
       state.projectDetails = { ...action.payload, customLineUpload: null, customPolygonUpload: null };
     },
+    SetToggleSplittedGeojsonEdit(state, action) {
+      state.toggleSplittedGeojsonEdit = action.payload;
+    },
   },
 });
 
diff --git a/src/frontend/src/store/types/ICreateProject.ts b/src/frontend/src/store/types/ICreateProject.ts
index 2ce4a158a6..adfd719988 100644
--- a/src/frontend/src/store/types/ICreateProject.ts
+++ b/src/frontend/src/store/types/ICreateProject.ts
@@ -35,6 +35,7 @@ export type CreateProjectStateTypes = {
   canSwitchCreateProjectSteps: boolean;
   isTasksGenerated: {};
   isFgbFetching: boolean;
+  toggleSplittedGeojsonEdit: boolean;
 };
 export type ValidateCustomFormResponse = {
   detail: { message: string; possible_reason: string };
diff --git a/src/frontend/src/views/NewDefineAreaMap.tsx b/src/frontend/src/views/NewDefineAreaMap.tsx
index c14cc9eb12..db465efe80 100644
--- a/src/frontend/src/views/NewDefineAreaMap.tsx
+++ b/src/frontend/src/views/NewDefineAreaMap.tsx
@@ -4,7 +4,6 @@ import { MapContainer as MapComponent } from '../components/MapComponent/OpenLay
 import LayerSwitcherControl from '../components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js';
 import { VectorLayer } from '../components/MapComponent/OpenLayersComponent/Layers';
 import { GeoJSONFeatureTypes } from '../store/types/ICreateProject';
-import AssetModules from '../shared/AssetModules.js';
 import MapControlComponent from '../components/createnewproject/MapControlComponent';
 
 type NewDefineAreaMapProps = {
@@ -14,7 +13,7 @@ type NewDefineAreaMapProps = {
   buildingExtractedGeojson?: GeoJSONFeatureTypes;
   lineExtractedGeojson?: GeoJSONFeatureTypes;
   onDraw?: (geojson: any, area: number) => void;
-  onModify?: (geojson: any, area?: number) => void;
+  onModify?: ((geojson: any, area?: number) => void) | null;
   hasEditUndo?: boolean;
 };
 const NewDefineAreaMap = ({

From 3990896a4b5f0f082730370fb814ed75b311e227 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Wed, 24 Jan 2024 14:59:58 +0545
Subject: [PATCH 4/5] fix codeRefactor: consoles removed

---
 .../MapComponent/OpenLayersComponent/LayerSwitcher/index.js      | 1 -
 .../createnewproject/validation/DataExtractValidation.tsx        | 1 -
 src/frontend/src/hooks/Prompt.tsx                                | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
index 7d967cae3d..1e5ca13fac 100644
--- a/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
@@ -168,7 +168,6 @@ const LayerSwitcherControl = ({ map, visible = 'osm' }) => {
       location.pathname.includes('data-extract') ||
       location.pathname.includes('split-tasks')
     ) {
-      console.log('yesssss');
       const olZoom = document.querySelector('.ol-zoom');
       if (olZoom) {
         olZoom.style.display = 'none';
diff --git a/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx b/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx
index 3a72dfdc88..c913144e34 100644
--- a/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx
+++ b/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx
@@ -36,7 +36,6 @@ function DataExtractValidation(values: ProjectValues) {
     errors.customPolygonUpload = 'A GeoJSON file is required.';
   }
 
-  console.log(errors);
   return errors;
 }
 
diff --git a/src/frontend/src/hooks/Prompt.tsx b/src/frontend/src/hooks/Prompt.tsx
index 79915cc18a..b61748154e 100644
--- a/src/frontend/src/hooks/Prompt.tsx
+++ b/src/frontend/src/hooks/Prompt.tsx
@@ -5,7 +5,6 @@ import { unstable_useBlocker as useBlocker } from 'react-router-dom';
 function Prompt(props) {
   const block = props.when;
   useBlocker(({ nextLocation }) => {
-    console.log(nextLocation, 'next');
     if (block && !pathNotToBlock.includes(nextLocation.pathname)) {
       return !window.confirm(props.message);
     }

From c69303834f9ad4daad63876987fc5bd9ab23e07a Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Wed, 24 Jan 2024 17:34:50 +0545
Subject: [PATCH 5/5] fix mapControlComponent: undoIcon removed

---
 .../components/createnewproject/MapControlComponent.tsx  | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/frontend/src/components/createnewproject/MapControlComponent.tsx b/src/frontend/src/components/createnewproject/MapControlComponent.tsx
index ec1387133d..93917ab5a5 100644
--- a/src/frontend/src/components/createnewproject/MapControlComponent.tsx
+++ b/src/frontend/src/components/createnewproject/MapControlComponent.tsx
@@ -27,10 +27,6 @@ const MapControlComponent = ({ map, hasEditUndo }) => {
         />
       ),
     },
-    {
-      id: 'Undo',
-      icon: <AssetModules.UndoIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
-    },
   ];
 
   const handleOnClick = (btnId) => {
@@ -42,7 +38,6 @@ const MapControlComponent = ({ map, hasEditUndo }) => {
       map.getView().setZoom(actualZoom - 1);
     } else if (btnId === 'Edit') {
       dispatch(CreateProjectActions.SetToggleSplittedGeojsonEdit(!toggleSplittedGeojsonEdit));
-    } else if (btnId === 'Undo') {
     }
   };
 
@@ -51,9 +46,7 @@ const MapControlComponent = ({ map, hasEditUndo }) => {
       {btnList.map((btn) => {
         return (
           <div key={btn.id} title={btn.id}>
-            {((btn.id !== 'Edit' && btn.id !== 'Undo') ||
-              (btn.id === 'Edit' && hasEditUndo) ||
-              (btn.id === 'Undo' && hasEditUndo)) && (
+            {((btn.id !== 'Edit' && btn.id !== 'Undo') || (btn.id === 'Edit' && hasEditUndo)) && (
               <div
                 className={` fmtm-p-1 fmtm-rounded-md fmtm-duration-200 fmtm-cursor-pointer ${
                   toggleSplittedGeojsonEdit && btn.id === 'Edit'