refactor: reword Data Extract --> Map Features (#1736)

* fix(dataExtract): rename data extract to map features * refactor: update wording of data extract no features error * refactor: update info about requirement for linestrings during splitting * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * refactor: tweak text for data extract explanation --------- Co-authored-by: Sam <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
hotosm · Aug 7, 2024 · ab716e0 · ab716e0
1 parent 84a365a
commit ab716e0
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 37 deletions.
diff --git a/src/frontend/e2e/createproject.spec.ts b/src/frontend/e2e/createproject.spec.ts
@@ -70,11 +70,11 @@ test('Project Creation', async ({ browserName, page }) => {
   await page.getByLabel('buildings').click();
   await page.getByRole('button', { name: 'NEXT' }).click();
 
-  // 4. Data Extract Step
-  const dataExtractRadio = await page.getByText('Use OSM data extract');
+  // 4. Map Features Step
+  const dataExtractRadio = await page.getByText('Use OSM map features');
   await dataExtractRadio.click();
   await expect(dataExtractRadio).toBeChecked();
-  await page.getByRole('button', { name: 'Generate Data Extract' }).click();
+  await page.getByRole('button', { name: 'Generate Map Features' }).click();
   await page.getByRole('button', { name: 'NEXT' }).click();
 
   // 5. Split Tasks Step

diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
@@ -235,7 +235,7 @@ const LayerSwitcherControl = ({ map, visible = 'osm', pmTileLayerData = null })
       location.pathname.includes('project/') ||
       location.pathname.includes('upload-area') ||
       location.pathname.includes('select-category') ||
-      location.pathname.includes('data-extract') ||
+      location.pathname.includes('map-features') ||
       location.pathname.includes('split-tasks')
     ) {
       const olZoom = document.querySelector('.ol-zoom');

diff --git a/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx b/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx
@@ -91,8 +91,8 @@ const ProjectOptions = ({ projectName }: projectOptionPropTypes) => {
         />
         <Button
           isLoading={downloadDataExtractLoading}
-          loadingText="DATA EXTRACT"
-          btnText="DATA EXTRACT"
+          loadingText="MAP FEATURES"
+          btnText="MAP FEATURES"
           btnType="other"
           className={`${
             downloadDataExtractLoading ? '' : 'hover:fmtm-text-red-700'

diff --git a/src/frontend/src/components/createnewproject/DataExtract.tsx b/src/frontend/src/components/createnewproject/DataExtract.tsx
@@ -19,12 +19,12 @@ import { task_split_type } from '@/types/enums';
 import { dataExtractGeojsonType } from '@/store/types/ICreateProject';
 
 const dataExtractOptions = [
-  { name: 'data_extract', value: 'osm_data_extract', label: 'Use OSM data extract' },
-  { name: 'data_extract', value: 'custom_data_extract', label: 'Upload custom data extract' },
+  { name: 'data_extract', value: 'osm_data_extract', label: 'Use OSM map features' },
+  { name: 'data_extract', value: 'custom_data_extract', label: 'Upload custom map features' },
 ];
 
 const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload }) => {
-  useDocumentTitle('Create Project: Data Extract');
+  useDocumentTitle('Create Project: Map Features');
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [extractWays, setExtractWays] = useState('');
@@ -105,7 +105,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: 'Data extract has no features. Please try adjusting your AOI.',
+            message: 'Map has no features. Please try adjusting the map area.',
             variant: 'error',
             duration: 2000,
           }),
@@ -116,7 +116,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
       dispatch(
         CommonActions.SetSnackBar({
           open: true,
-          message: 'Error generating data extract.',
+          message: 'Error generating map features.',
           variant: 'error',
           duration: 2000,
         }),
@@ -200,7 +200,8 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: 'Data extract must contain a LineString otherwise the task splitting algorithm will not work.',
+            message:
+              'Features must contain line data (roads, rivers) otherwise the task splitting algorithm will not work.',
             variant: 'warning',
             duration: 8000,
           }),
@@ -223,21 +224,16 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
   return (
     <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row">
       <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6">
-        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Data Extract</h6>
+        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Map Features</h6>
         <p className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
           <span>
-            You may choose to use the default OSM data extracts as your feature types to perform the field survey
+            You may either choose to use OSM data, or upload your own data for the mapping project.
           </span>
-          <span>The relevant data extracts that exist on OSM are imported based on your AOI.</span>
+          <span> The relevant map features that exist on OSM are imported based on the select map area.</span>{' '}
           <span>
-            You can use these data extracts to use the select_from_map functionality from ODK that allows you the mapper
-            to select the existing feature and conduct field mapping survey
-          </span>
-          <span>
-            In contrast to OSM data extracts, you can also upload custom data extracts around the AOI to conduct the
-            field mapping survey.
-          </span>
-          <span>Note: The custom data extracts shall follow the defined data standards.</span>
+            You can use these map features to use the 'select from map' functionality from ODK that allows you
+            to select the feature to collect data for.
+          </span>{' '}
         </p>
       </div>
       <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] lg:fmtm-h-[60vh] xl:fmtm-h-[58vh] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">
@@ -248,7 +244,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
           >
             <div>
               <RadioButton
-                topic="You may choose to use OSM data or upload your own data extract"
+                topic="You may choose to use OSM data or upload your own map features"
                 options={dataExtractOptions}
                 direction="column"
                 value={formValues.dataExtractWays}
@@ -260,15 +256,15 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
               />
               {extractWays === 'osm_data_extract' && (
                 <Button
-                  btnText="Generate Data Extract"
+                  btnText="Generate Map Features"
                   btnType="primary"
                   onClick={() => {
                     resetFile(setCustomDataExtractUpload);
                     generateDataExtract();
                   }}
                   className="fmtm-mt-6"
                   isLoading={isFgbFetching}
-                  loadingText="Data extracting..."
+                  loadingText="Generating Map Features..."
                   disabled={dataExtractGeojson && customDataExtractUpload ? true : false}
                 />
               )}
@@ -284,7 +280,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
                       dispatch(CreateProjectActions.setDataExtractGeojson(null));
                     }}
                     customFile={customDataExtractUpload}
-                    btnText="Upload Data Extract"
+                    btnText="Upload Map Features"
                     accept=".geojson,.json,.fgb"
                     fileDescription="*The supported file formats are .geojson, .json, .fgb"
                     errorMsg={errors.customDataExtractUpload}
@@ -305,7 +301,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
                 btnType="primary"
                 type="submit"
                 className="fmtm-font-bold"
-                dataTip={`${!dataExtractGeojson ? 'Please Generate Data Extract First.' : ''}`}
+                dataTip={`${!dataExtractGeojson ? 'Please Generate Map Features First.' : ''}`}
                 disabled={
                   !dataExtractGeojson || (extractWays === 'osm_data_extract' && !dataExtractGeojson) || isFgbFetching
                     ? true

diff --git a/src/frontend/src/components/createnewproject/SelectForm.tsx b/src/frontend/src/components/createnewproject/SelectForm.tsx
@@ -38,7 +38,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
       return;
     }
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: 4 }));
-    navigate('/data-extract');
+    navigate('/map-features');
   };
   const {
     handleSubmit,

diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -346,7 +346,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customDataExtractUpload
                     type="button"
                     onClick={() => {
                       dispatch(CreateProjectActions.SetIndividualProjectDetailsData(formValues));
-                      toggleStep(3, '/data-extract');
+                      toggleStep(3, '/map-features');
                     }}
                     className="fmtm-font-bold"
                   />

diff --git a/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx b/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx
@@ -17,7 +17,7 @@ function DataExtractValidation(values: ProjectValues) {
   const errors: ValidationErrors = {};
 
   if (!values?.dataExtractWays) {
-    errors.dataExtractWays = 'Data Extract Selection is Required.';
+    errors.dataExtractWays = 'Map Features Selection is Required.';
   }
 
   if (values.dataExtractWays && values.dataExtractWays === 'custom_data_extract' && !values.customDataExtractUpload) {

diff --git a/src/frontend/src/constants/StepFormConstants.ts b/src/frontend/src/constants/StepFormConstants.ts
@@ -25,10 +25,10 @@ export const createProjectSteps: ICreateProjectSteps[] = [
     name: 'Select Category',
   },
   {
-    url: '/data-extract',
+    url: '/map-features',
     step: 4,
     label: '04',
-    name: 'Data Extract',
+    name: 'Map Features',
   },
   {
     url: '/split-tasks',

diff --git a/src/frontend/src/constants/blockerUrl.ts b/src/frontend/src/constants/blockerUrl.ts
@@ -1,2 +1,2 @@
-const pathNotToBlock = ['/select-category', '/data-extract', '/split-tasks', '/upload-area', '/create-project'];
+const pathNotToBlock = ['/select-category', '/map-features', '/split-tasks', '/upload-area', '/create-project'];
 export default pathNotToBlock;
diff --git a/src/frontend/src/routes.jsx b/src/frontend/src/routes.jsx
@@ -164,7 +164,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: '/data-extract',
+        path: '/map-features',
         element: (
           <ProtectedRoute>
             <Suspense fallback={<div>Loading...</div>}>

diff --git a/src/frontend/src/views/CreateNewProject.tsx b/src/frontend/src/views/CreateNewProject.tsx
@@ -43,7 +43,7 @@ const CreateNewProject = () => {
       case '/select-category':
         dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 3 }));
         break;
-      case '/data-extract':
+      case '/map-features':
         dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 4 }));
         break;
       case '/split-tasks':
@@ -77,7 +77,7 @@ const CreateNewProject = () => {
             setCustomFormFile={setCustomFormFile}
           />
         );
-      case '/data-extract':
+      case '/map-features':
         return (
           <DataExtract
             flag="create_project"