Merge pull request #316 from jeafreezy/improvements

Bug fixes
hotosm · Jan 16, 2025 · cf688da · cf688da
2 parents b5fb5db + f8a25c5
commit cf688da
Show file tree

Hide file tree

Showing 10 changed files with 192 additions and 200 deletions.
diff --git a/frontend/src/app/providers/models-provider.tsx b/frontend/src/app/providers/models-provider.tsx
@@ -1,17 +1,17 @@
-import { APPLICATION_ROUTES, MODELS_BASE, MODELS_ROUTES } from "@/constants";
-import { BASE_MODELS, TrainingDatasetOption, TrainingType } from "@/enums";
-import { LngLatBoundsLike } from "maplibre-gl";
-import { TOAST_NOTIFICATIONS } from "@/constants";
+import { APPLICATION_ROUTES, MODELS_BASE, MODELS_ROUTES } from '@/constants';
+import { BASE_MODELS, TrainingDatasetOption, TrainingType } from '@/enums';
+import { LngLatBoundsLike } from 'maplibre-gl';
+import { TOAST_NOTIFICATIONS } from '@/constants';
+import { useCreateTrainingDataset } from '@/features/model-creation/hooks/use-training-datasets';
+import { useGetTrainingDataset } from '@/features/models/hooks/use-dataset';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useModelDetails } from '@/features/models/hooks/use-models';
+import { UseMutationResult } from '@tanstack/react-query';
 import {
   TTrainingAreaFeature,
   TTrainingDataset,
   TTrainingDetails,
 } from "@/types";
-import { useCreateTrainingDataset } from "@/features/model-creation/hooks/use-training-datasets";
-import { useGetTrainingDataset } from "@/features/models/hooks/use-dataset";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
-import { useModelDetails } from "@/features/models/hooks/use-models";
-import { UseMutationResult } from "@tanstack/react-query";
 import {
   showErrorToast,
   showSuccessToast,
@@ -224,8 +224,8 @@ const ModelsContext = createContext<{
   validateEditMode: boolean;
 }>({
   formData: initialFormState,
-  setFormData: () => {},
-  handleChange: () => {},
+  setFormData: () => { },
+  handleChange: () => { },
   createNewTrainingDatasetMutation: {} as UseMutationResult<
     TTrainingDataset,
     Error,
@@ -240,13 +240,13 @@ const ModelsContext = createContext<{
   >,
   hasLabeledTrainingAreas: false,
   hasAOIsWithGeometry: false,
-  resetState: () => {},
+  resetState: () => { },
   isEditMode: false,
   modelId: "",
   getFullPath: () => "",
-  handleModelCreationAndUpdate: () => {},
+  handleModelCreationAndUpdate: () => { },
   trainingDatasetCreationInProgress: false,
-  handleTrainingDatasetCreation: () => {},
+  handleTrainingDatasetCreation: () => { },
   validateEditMode: false,
 });
 
@@ -349,6 +349,7 @@ export const ModelsProvider: React.FC<{
     mutationConfig: {
       onSuccess: () => {
         showSuccessToast(TOAST_NOTIFICATIONS.trainingRequestSubmittedSuccess);
+
         timeOutRef.current = setTimeout(() => {
           setFormData(initialFormState);
         }, 2000);

diff --git a/frontend/src/app/routes/start-mapping.tsx b/frontend/src/app/routes/start-mapping.tsx
@@ -1,25 +1,25 @@
-import useScreenSize from "@/hooks/use-screen-size";
-import { APPLICATION_ROUTES } from "@/constants";
-import { BASE_MODELS } from "@/enums";
+import useScreenSize from '@/hooks/use-screen-size';
+import { APPLICATION_ROUTES } from '@/constants';
+import { BASE_MODELS } from '@/enums';
+import { FitToBounds, LayerControl, ZoomLevel } from '@/components/map';
+import { Head } from '@/components/seo';
+import { LngLatBoundsLike } from 'maplibre-gl';
+import { ModelDetailsPopUp } from '@/features/start-mapping/components';
+import { useCallback, useEffect, useState } from 'react';
+import { useDropdownMenu } from '@/hooks/use-dropdown-menu';
+import { useGetTMSTileJSON } from '@/features/model-creation/hooks/use-tms-tilejson';
+import { useGetTrainingDataset } from '@/features/models/hooks/use-dataset';
+import { useMapInstance } from '@/hooks/use-map-instance';
+import { useModelDetails } from '@/features/models/hooks/use-models';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { UserProfile } from '@/components/layout';
 import {
   BBOX,
   Feature,
   TileJSON,
   TModelPredictions,
   TModelPredictionsConfig,
 } from "@/types";
-import { FitToBounds, LayerControl, ZoomLevel } from "@/components/map";
-import { Head } from "@/components/seo";
-import { LngLatBoundsLike } from "maplibre-gl";
-import { ModelDetailsPopUp } from "@/features/start-mapping/components";
-import { useCallback, useEffect, useState } from "react";
-import { useDropdownMenu } from "@/hooks/use-dropdown-menu";
-import { useGetTMSTileJSON } from "@/features/model-creation/hooks/use-tms-tilejson";
-import { useGetTrainingDataset } from "@/features/models/hooks/use-dataset";
-import { useMapInstance } from "@/hooks/use-map-instance";
-import { useModelDetails } from "@/features/models/hooks/use-models";
-import { useNavigate, useParams, useSearchParams } from "react-router-dom";
-import { UserProfile } from "@/components/layout";
 import {
   BrandLogoWithDropDown,
   Legend,
@@ -174,42 +174,42 @@ export const StartMappingPage = () => {
   const mapLayers = [
     ...(modelPredictions.accepted.length > 0
       ? [
-          {
-            value:
-              START_MAPPING_PAGE_CONTENT.map.controls.legendControl
-                .acceptedPredictions,
-            subLayers: [
-              ACCEPTED_MODEL_PREDICTIONS_FILL_LAYER_ID,
-              ACCEPTED_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
-            ],
-          },
-        ]
+        {
+          value:
+            START_MAPPING_PAGE_CONTENT.map.controls.legendControl
+              .acceptedPredictions,
+          subLayers: [
+            ACCEPTED_MODEL_PREDICTIONS_FILL_LAYER_ID,
+            ACCEPTED_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
+          ],
+        },
+      ]
       : []),
     ...(modelPredictions.rejected.length > 0
       ? [
-          {
-            value:
-              START_MAPPING_PAGE_CONTENT.map.controls.legendControl
-                .rejectedPredictions,
-            subLayers: [
-              REJECTED_MODEL_PREDICTIONS_FILL_LAYER_ID,
-              REJECTED_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
-            ],
-          },
-        ]
+        {
+          value:
+            START_MAPPING_PAGE_CONTENT.map.controls.legendControl
+              .rejectedPredictions,
+          subLayers: [
+            REJECTED_MODEL_PREDICTIONS_FILL_LAYER_ID,
+            REJECTED_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
+          ],
+        },
+      ]
       : []),
     ...(modelPredictions.all.length > 0
       ? [
-          {
-            value:
-              START_MAPPING_PAGE_CONTENT.map.controls.legendControl
-                .predictionResults,
-            subLayers: [
-              ALL_MODEL_PREDICTIONS_FILL_LAYER_ID,
-              ALL_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
-            ],
-          },
-        ]
+        {
+          value:
+            START_MAPPING_PAGE_CONTENT.map.controls.legendControl
+              .predictionResults,
+          subLayers: [
+            ALL_MODEL_PREDICTIONS_FILL_LAYER_ID,
+            ALL_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
+          ],
+        },
+      ]
       : []),
   ];
 
@@ -406,6 +406,7 @@ export const StartMappingPage = () => {
             currentZoom={currentZoom}
             layers={mapLayers}
             tmsBounds={oamTileJSON?.bounds as LngLatBoundsLike}
+            trainingId={data?.published_training}
           />
         </div>
       </div>

diff --git a/frontend/src/features/start-mapping/api/create-feedbacks.ts b/frontend/src/features/start-mapping/api/create-feedbacks.ts
@@ -1,5 +1,5 @@
-import { API_ENDPOINTS, apiClient } from "@/services";
-import { Feature, TModelPredictionFeature } from "@/types";
+import { API_ENDPOINTS, apiClient } from '@/services';
+import { Feature, TModelPredictionFeature } from '@/types';
 
 export type TCreateFeedbackPayload = {
   comments: string;
@@ -32,11 +32,11 @@ export const createFeedback = async ({
 
 export type TCreateApprovedPredictionPayload = {
   config: {
-    areathreshold: number;
-    josmq: boolean;
-    maxanglechange: number;
-    skewtolerance: number;
-    zoomlevel: number;
+    area_threshold: number;
+    use_josm_q: boolean;
+    max_angle_change: number;
+    skew_tolerance: number;
+    zoom_level: number;
     confidence: number;
     tolerance: number;
   };

diff --git a/frontend/src/features/start-mapping/api/get-model-predictions.ts b/frontend/src/features/start-mapping/api/get-model-predictions.ts
@@ -1,7 +1,7 @@
-import axios from "axios";
-import { API_ENDPOINTS } from "@/services";
-import { FeatureCollection } from "geojson";
-import { TModelPredictionsConfig } from "@/types";
+import axios from 'axios';
+import { API_ENDPOINTS } from '@/services';
+import { FeatureCollection } from 'geojson';
+import { TModelPredictionsConfig } from '@/types';
 
 export const getModelPredictions = async ({
   area_threshold,

diff --git a/frontend/src/features/start-mapping/components/feature-popup.tsx b/frontend/src/features/start-mapping/components/feature-popup.tsx
@@ -1,17 +1,23 @@
-import maplibregl, { Map, Popup } from "maplibre-gl";
-import { CheckIcon } from "@/components/ui/icons";
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
-import { geojsonToWKT } from "@terraformer/wkt";
+import maplibregl, { Map, Popup } from 'maplibre-gl';
+import { CheckIcon } from '@/components/ui/icons';
+import {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { geojsonToWKT } from '@terraformer/wkt';
+import { Input } from '@/components/ui/form';
+import { SHOELACE_SIZES } from '@/enums';
+import { showErrorToast } from '@/utils';
+import { START_MAPPING_PAGE_CONTENT } from '@/constants';
+import { useAuth } from '@/app/providers/auth-provider';
 import {
   GeoJSONType,
   TModelPredictionFeature,
   TModelPredictions,
 } from "@/types";
-import { Input } from "@/components/ui/form";
-import { SHOELACE_SIZES } from "@/enums";
-import { showErrorToast } from "@/utils";
-import { START_MAPPING_PAGE_CONTENT } from "@/constants";
-import { useAuth } from "@/app/providers/auth-provider";
 
 import {
   useCreateApprovedModelPrediction,
@@ -122,13 +128,13 @@ const PredictedFeatureActionPopup = ({
         onSuccess: (data) => {
           const { updatedSource, updatedTarget } = alreadyRejected
             ? moveFeature(rejected, accepted, featureId, {
-                _id: data.id,
-                ...data.properties,
-              })
+              _id: data.id,
+              ...data.properties,
+            })
             : moveFeature(all, accepted, featureId, {
-                _id: data.id,
-                ...data.properties,
-              });
+              _id: data.id,
+              ...data.properties,
+            });
 
           setModelPredictions((prev) => ({
             ...prev,
@@ -171,6 +177,8 @@ const PredictedFeatureActionPopup = ({
     },
   });
 
+
+
   const deleteApprovedModelPrediction = useDeleteApprovedModelPrediction({
     mutationConfig: {
       onSuccess: async (_, variables) => {
@@ -211,13 +219,13 @@ const PredictedFeatureActionPopup = ({
       training: trainingId,
       config: {
         // Use the configuration when the prediction was made.
-        areathreshold: feature?.properties.config.area_threshold as number,
+        area_threshold: feature?.properties.config.area_threshold as number,
         confidence: feature?.properties.config.confidence as number,
-        josmq: feature?.properties.config.use_josm_q as boolean,
-        maxanglechange: feature?.properties.config.max_angle_change as number,
-        skewtolerance: feature?.properties.config.skew_tolerance as number,
+        use_josm_q: feature?.properties.config.use_josm_q as boolean,
+        max_angle_change: feature?.properties.config.max_angle_change as number,
+        skew_tolerance: feature?.properties.config.skew_tolerance as number,
         tolerance: feature?.properties.config.tolerance as number,
-        zoomlevel: feature?.properties.config.zoom_level as number,
+        zoom_level: feature?.properties.config.zoom_level as number,
       },
       user: user.osm_id,
     });
@@ -232,8 +240,8 @@ const PredictedFeatureActionPopup = ({
             accepted,
             rejected,
             featureId,
-            // update the feature with the returned id from the backend as `_id` and other properties from the backend.
-            { _id: data.id, ...data.properties },
+            // update the feature with the returned id from the backend as `_id`.
+            { _id: data.id },
           );
           setModelPredictions((prev) => ({
             ...prev,
@@ -245,8 +253,8 @@ const PredictedFeatureActionPopup = ({
             all,
             rejected,
             featureId,
-            // update the feature with the returned id from the backend as `_id` and other properties from the backend.
-            { _id: data.id, ...data.properties },
+            // update the feature with the returned id from the backend as `_id`.
+            { _id: data.id },
           );
           setModelPredictions((prev) => ({
             ...prev,
@@ -306,45 +314,45 @@ const PredictedFeatureActionPopup = ({
 
   const primaryButton = alreadyAccepted
     ? {
-        label: START_MAPPING_PAGE_CONTENT.map.popup.reject,
-        action: handleRejection,
-        className: "bg-primary",
-        icon: RejectIcon,
-      }
+      label: START_MAPPING_PAGE_CONTENT.map.popup.reject,
+      action: handleRejection,
+      className: "bg-primary",
+      icon: RejectIcon,
+    }
     : alreadyRejected
       ? {
-          label: START_MAPPING_PAGE_CONTENT.map.popup.resolve,
-          action: handleResolve,
-          className: "bg-black",
-          icon: ResolveIcon,
-        }
-      : {
-          label: START_MAPPING_PAGE_CONTENT.map.popup.accept,
-          action: handleAcceptance,
-          className: "bg-green-primary",
-          icon: AcceptIcon,
-        };
-
-  const secondaryButton = alreadyAccepted
-    ? {
         label: START_MAPPING_PAGE_CONTENT.map.popup.resolve,
         action: handleResolve,
         className: "bg-black",
         icon: ResolveIcon,
       }
+      : {
+        label: START_MAPPING_PAGE_CONTENT.map.popup.accept,
+        action: handleAcceptance,
+        className: "bg-green-primary",
+        icon: AcceptIcon,
+      };
+
+  const secondaryButton = alreadyAccepted
+    ? {
+      label: START_MAPPING_PAGE_CONTENT.map.popup.resolve,
+      action: handleResolve,
+      className: "bg-black",
+      icon: ResolveIcon,
+    }
     : alreadyRejected
       ? {
-          label: START_MAPPING_PAGE_CONTENT.map.popup.accept,
-          action: handleAcceptance,
-          className: "bg-green-primary",
-          icon: AcceptIcon,
-        }
+        label: START_MAPPING_PAGE_CONTENT.map.popup.accept,
+        action: handleAcceptance,
+        className: "bg-green-primary",
+        icon: AcceptIcon,
+      }
       : {
-          label: START_MAPPING_PAGE_CONTENT.map.popup.reject,
-          action: handleRejection,
-          className: "bg-primary",
-          icon: RejectIcon,
-        };
+        label: START_MAPPING_PAGE_CONTENT.map.popup.reject,
+        action: handleRejection,
+        className: "bg-primary",
+        icon: RejectIcon,
+      };
 
   return (
     <div