Fix task hover popup & disable splitting algo without linestring

src/frontend/src/components/MapComponent/OpenLayersComponent/AsyncPopup/AsyncPopup.tsx

@@ -148,6 +148,7 @@ const AsyncPopup = ({
   useEffect(() => {
     if (!map || !coordinates || !overlay || !properties || closePopup) return;
     const htmlString = renderToString(popupUI(properties));
+    if (!htmlString) return;
     setPopupHTML(htmlString);
 
     overlay.setPosition([coordinates[0], coordinates[1]]);

src/frontend/src/components/common/RadioButton.tsx

@@ -5,6 +5,7 @@ interface IRadioButton {
   value: string;
   label: string | number;
   icon?: React.ReactNode;
+  disabled?: boolean;
 }
 
 interface RadioButtonProps {
@@ -39,23 +40,31 @@ const RadioButton: React.FC<RadioButtonProps> = ({
     <div className={`fmtm-flex ${direction === 'column' ? 'fmtm-flex-col' : 'fmtm-flex-wrap fmtm-gap-x-16'}`}>
       {options.map((option) => {
         return (
-          <div key={option.value} className="fmtm-gap-2 fmtm-flex fmtm-items-center">
+          <div
+            key={option.value}
+            className={`fmtm-gap-2 fmtm-flex fmtm-items-center ${
+              option?.disabled === true ? 'fmtm-cursor-not-allowed' : ''
+            }`}
+          >
             <input
               type="radio"
               id={option.value}
               name={option.name}
               value={option.value}
-              className="fmtm-accent-primaryRed fmtm-cursor-pointer"
+              className={`fmtm-accent-primaryRed fmtm-cursor-pointer ${
+                option?.disabled === true ? 'fmtm-cursor-not-allowed' : ''
+              }`}
               onChange={(e) => {
                 onChangeData(e.target.value);
               }}
               checked={option.value === value}
+              disabled={option?.disabled === true}
             />
             <label
               htmlFor={option.value}
-              className={`fmtm-text-base fmtm-bg-white fmtm-text-gray-500 fmtm-mb-[2px] fmtm-cursor-pointer fmtm-flex fmtm-items-center fmtm-gap-2 ${className}`}
+              className={`fmtm-text-base fmtm-bg-white fmtm-text-gray-500 fmtm-mb-[2px] fmtm-cursor-pointer fmtm-flex fmtm-items-center fmtm-gap-2  ${className}`}
             >
-              <p>{option.label}</p>
+              <p className={`${option?.disabled === true ? 'fmtm-cursor-not-allowed' : ''}`}>{option.label}</p>
               <div>{option.icon && option.icon}</div>
             </label>
           </div>

src/frontend/src/components/createnewproject/DataExtract.tsx

@@ -14,6 +14,8 @@ import FileInputComponent from '@/components/common/FileInputComponent';
 import DataExtractValidation from '@/components/createnewproject/validation/DataExtractValidation';
 import NewDefineAreaMap from '@/views/NewDefineAreaMap';
 import useDocumentTitle from '@/utilfunctions/useDocumentTitle';
+import { checkGeomTypeInGeojson } from '@/utilfunctions/checkGeomTypeInGeojson';
+import { task_split_type } from '@/types/enums';
 
 const dataExtractOptions = [
   { name: 'data_extract', value: 'osm_data_extract', label: 'Use OSM data extract' },
@@ -108,7 +110,6 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
       );
       dispatch(CreateProjectActions.SetFgbFetchingStatus(false));
       // TODO add error message for user
-      console.error('Error getting data extract:', error);
     }
   };
 
@@ -177,7 +178,19 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
       const geojsonFile = new File([extractFeatCol], 'custom_extract.geojson', { type: 'application/json' });
       setDataExtractToState(geojsonFile);
     }
-
+    const hasGeojsonLineString = checkGeomTypeInGeojson(extractFeatCol, 'LineString');
+    handleCustomChange('hasGeojsonLineString', hasGeojsonLineString);
+    handleCustomChange('task_split_type', task_split_type['choose_area_as_task'].toString());
+    if (!hasGeojsonLineString) {
+      dispatch(
+        CommonActions.SetSnackBar({
+          open: true,
+          message: 'Data extract must contain a LineString otherwise the task splitting algorithm will not work.',
+          variant: 'warning',
+          duration: 8000,
+        }),
+      );
+    }
     // View on map
     await dispatch(CreateProjectActions.setDataExtractGeojson(extractFeatCol));
   };

src/frontend/src/components/createnewproject/SplitTasks.tsx

@@ -17,16 +17,7 @@ import {
 } from '@/api/CreateProjectService';
 import { task_split_type } from '@/types/enums';
 import useDocumentTitle from '@/utilfunctions/useDocumentTitle';
-
-const alogrithmList = [
-  { name: 'define_tasks', value: task_split_type['divide_on_square'].toString(), label: 'Divide on square' },
-  { name: 'define_tasks', value: task_split_type['choose_area_as_task'].toString(), label: 'Choose area as task' },
-  {
-    name: 'define_tasks',
-    value: task_split_type['task_splitting_algorithm'].toString(),
-    label: 'Task Splitting Algorithm',
-  },
-];
+import { taskSplitOptionsType } from '@/store/types/ICreateProject';
 
 const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customDataExtractUpload, customFormFile }) => {
   useDocumentTitle('Create Project: Split Tasks');
@@ -50,6 +41,30 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customDataExtractUpload
   const isFgbFetching = useAppSelector((state) => state.createproject.isFgbFetching);
   const toggleSplittedGeojsonEdit = useAppSelector((state) => state.createproject.toggleSplittedGeojsonEdit);
 
+  const taskSplitOptions: taskSplitOptionsType[] = [
+    {
+      name: 'define_tasks',
+      value: task_split_type['divide_on_square'].toString(),
+      label: 'Divide on square',
+      disabled: false,
+    },
+    {
+      name: 'define_tasks',
+      value: task_split_type['choose_area_as_task'].toString(),
+      label: 'Choose area as task',
+      disabled: false,
+    },
+    {
+      name: 'define_tasks',
+      value: task_split_type['task_splitting_algorithm'].toString(),
+      label: 'Task Splitting Algorithm',
+      disabled:
+        !projectDetails?.hasGeojsonLineString && projectDetails?.dataExtractWays === 'custom_data_extract'
+          ? true
+          : false,
+    },
+  ];
+
   const toggleStep = (step: number, url: string) => {
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: step }));
     navigate(url);
@@ -233,7 +248,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customDataExtractUpload
                   <RadioButton
                     value={splitTasksSelection?.toString() || ''}
                     topic="Select an option to split the task"
-                    options={alogrithmList}
+                    options={taskSplitOptions}
                     direction="column"
                     onChangeData={(value) => {
                       handleCustomChange('task_split_type', parseInt(value));

src/frontend/src/store/slices/CreateProjectSlice.ts

@@ -19,6 +19,7 @@ export const initialState: CreateProjectStateTypes = {
     formWays: 'existing_form',
     hasCustomTMS: false,
     custom_tms_url: '',
+    hasGeojsonLineString: true,
   },
   projectDetailsResponse: null,
   projectDetailsLoading: false,

src/frontend/src/store/types/ICreateProject.ts

@@ -117,6 +117,7 @@ export type ProjectDetailsTypes = {
   per_task_instructions?: string;
   custom_tms_url: string;
   hasCustomTMS: boolean;
+  hasGeojsonLineString: boolean;
 };
 
 export type ProjectAreaTypes = {
@@ -154,3 +155,10 @@ export type DrawnGeojsonTypes = {
   geometry: GeometryTypes;
   features?: [];
 };
+
+export type taskSplitOptionsType = {
+  name: string;
+  value: string;
+  label: string;
+  disabled: boolean;
+};

src/frontend/src/utilfunctions/checkGeomTypeInGeojson.ts

@@ -0,0 +1,9 @@
+export const checkGeomTypeInGeojson = (geojson: Record<string, any>, geomType: string): boolean => {
+  if (geojson?.type === 'FeatureCollection') {
+    const hasPreferredGeomType = geojson?.features?.some((feature: Record<string, any>) => {
+      return feature?.geometry?.type === geomType;
+    });
+    return hasPreferredGeomType;
+  }
+  return false;
+};

src/frontend/src/views/ProjectDetailsV2.tsx

@@ -166,8 +166,11 @@ const Home = () => {
     setDataExtractUrl(state.projectInfo.data_extract_url);
   }, [state.projectInfo.data_extract_url]);
 
-  const lockedPopup = () => {
-    return <p>This task was locked by you</p>;
+  const lockedPopup = (properties: Record<string, any>) => {
+    if (properties.locked_by_user === authDetails?.id) {
+      return <p>This task was locked by you</p>;
+    }
+    return null;
   };
 
   /**