revert confirmation page after training settings validation

hotosm · Nov 16, 2024 · 48f34a2 · 48f34a2
1 parent fc46437
commit 48f34a2
Show file tree

Hide file tree

Showing 44 changed files with 588 additions and 532 deletions.
diff --git a/frontend/src/app/providers/auth-provider.tsx b/frontend/src/app/providers/auth-provider.tsx
@@ -97,7 +97,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       const user = await authService.getUser();
       setUser(user);
     } catch (error) {
-      showErrorToast(error)
+      showErrorToast(error);
     }
   };
 

diff --git a/frontend/src/app/providers/map-provider.tsx b/frontend/src/app/providers/map-provider.tsx
@@ -1,4 +1,11 @@
-import { createContext, useContext, ReactNode, useState, useMemo, useEffect } from "react";
+import {
+  createContext,
+  useContext,
+  ReactNode,
+  useState,
+  useMemo,
+  useEffect,
+} from "react";
 import { Map } from "maplibre-gl";
 import { TerraDraw } from "terra-draw";
 import { setupTerraDraw } from "@/components/map/setup-terra-draw";
@@ -8,14 +15,14 @@ const MapContext = createContext<{
   map: Map | null;
   setMap: React.Dispatch<React.SetStateAction<Map | null>>;
   terraDraw: TerraDraw | undefined;
-  drawingMode: DrawingModes,
+  drawingMode: DrawingModes;
   setDrawingMode: React.Dispatch<React.SetStateAction<DrawingModes>>;
 }>({
   map: null,
-  setMap: () => { },
+  setMap: () => {},
   terraDraw: undefined,
   drawingMode: DrawingModes.STATIC,
-  setDrawingMode: () => DrawingModes
+  setDrawingMode: () => DrawingModes,
 });
 
 export const MapProvider = ({ children }: { children: ReactNode }) => {
@@ -29,14 +36,18 @@ export const MapProvider = ({ children }: { children: ReactNode }) => {
     }
   }, [map]);
 
-  const [drawingMode, setDrawingMode] = useState<DrawingModes>(DrawingModes.STATIC);
+  const [drawingMode, setDrawingMode] = useState<DrawingModes>(
+    DrawingModes.STATIC,
+  );
 
   // sync the modes
   useEffect(() => {
     terraDraw?.setMode(drawingMode);
-  }, [terraDraw, drawingMode])
+  }, [terraDraw, drawingMode]);
   return (
-    <MapContext.Provider value={{ map, setMap, terraDraw, drawingMode, setDrawingMode }}>
+    <MapContext.Provider
+      value={{ map, setMap, terraDraw, drawingMode, setDrawingMode }}
+    >
       {children}
     </MapContext.Provider>
   );

diff --git a/frontend/src/app/providers/models-provider.tsx b/frontend/src/app/providers/models-provider.tsx
@@ -5,7 +5,6 @@ import { useSessionStorage } from "@/hooks/use-storage";
 import {
   APPLICATION_ROUTES,
   HOT_FAIR_MODEL_CREATION_LOCAL_STORAGE_KEY,
-  MODEL_CREATION_CONTENT,
   showErrorToast,
   showSuccessToast,
   TMS_URL_REGEX_PATTERN,
@@ -52,9 +51,7 @@ export enum MODEL_CREATION_FORM_NAME {
   OAM_TIME_NAME = "oamTileName",
   OAM_BOUNDS = "oamBounds",
   TRAINING_AREAS = "trainingAreas",
-  TRAINING_REQUEST_SUCCESS = 'trainingRequestIsSuccessful',
-  TRAINING_REQUEST_MESSAGE = 'trainingRequestMessage',
-  TRAINING_SETTINGS_IS_VALID = 'trainingSettingsIsValid'
+  TRAINING_SETTINGS_IS_VALID = "trainingSettingsIsValid",
 }
 
 export const FORM_VALIDATION_CONFIG = {
@@ -129,8 +126,7 @@ export const FORM_VALIDATION_CONFIG = {
       max: 8,
       min: 1,
     },
-  }
-
+  },
 };
 
 type FormData = {
@@ -154,9 +150,9 @@ type FormData = {
   batchSize: number;
   boundaryWidth: number;
   zoomLevels: number[];
-  trainingRequestIsSuccessful: boolean
-  trainingRequestMessage: string
-  trainingSettingsIsValid: boolean
+  trainingRequestIsSuccessful: boolean;
+  trainingRequestMessage: string;
+  trainingSettingsIsValid: boolean;
 };
 
 const initialFormState: FormData = {
@@ -185,9 +181,6 @@ const initialFormState: FormData = {
   boundaryWidth: 3,
   zoomLevels: [19, 20, 21],
   trainingSettingsIsValid: true,
-  // Training requests response
-  trainingRequestIsSuccessful: true,
-  trainingRequestMessage: ""
 };
 
 const ModelsContext = createContext<{
@@ -217,11 +210,11 @@ const ModelsContext = createContext<{
   >;
   hasLabeledTrainingAreas: boolean;
   hasAOIsWithGeometry: boolean;
-  resetState: () => void
+  resetState: () => void;
 }>({
   formData: initialFormState,
-  setFormData: () => { },
-  handleChange: () => { },
+  setFormData: () => {},
+  handleChange: () => {},
   createNewTrainingDatasetMutation: {} as UseMutationResult<
     TTrainingDataset,
     Error,
@@ -236,7 +229,7 @@ const ModelsContext = createContext<{
   >,
   hasLabeledTrainingAreas: false,
   hasAOIsWithGeometry: false,
-  resetState: () => { }
+  resetState: () => {},
 });
 
 export const ModelsProvider: React.FC<{
@@ -278,47 +271,13 @@ export const ModelsProvider: React.FC<{
     mutationConfig: {
       onSuccess: () => {
         showSuccessToast(TOAST_NOTIFICATIONS.trainingRequestSubmittedSuccess);
-        handleChange(
-          MODEL_CREATION_FORM_NAME.TRAINING_REQUEST_SUCCESS,
-          true
-        );
-        handleChange(
-          MODEL_CREATION_FORM_NAME.TRAINING_REQUEST_MESSAGE,
-          MODEL_CREATION_CONTENT.confirmation.trainingRequestSuccess
-        );
-        // delay for a few seconds before resetting the state
         timeOutRef.current = setTimeout(() => {
-          setFormData((prevFormData) => ({
-            ...initialFormState,
-            // Preserve the training requests information because it's needed in the confirmation page.
-            trainingRequestMessage: prevFormData.trainingRequestMessage,
-            trainingRequestIsSuccessful: prevFormData.trainingRequestIsSuccessful,
-          }));
+          setFormData(initialFormState);
         }, 2000);
       },
 
       onError: (error) => {
         showErrorToast(error);
-        // delay for a few seconds before resetting the state, but keep the data that will be needed for submitting training
-        // request incase the user wants to do that.
-        timeOutRef.current = setTimeout(() => {
-          setFormData((prevFormData) => ({
-            ...initialFormState,
-            // Preserve the training requests information because it's needed in the confirmation page.
-            trainingRequestMessage: prevFormData.trainingRequestMessage,
-            trainingRequestIsSuccessful: prevFormData.trainingRequestIsSuccessful,
-          }));
-        }, 2000);
-
-        handleChange(
-          MODEL_CREATION_FORM_NAME.TRAINING_REQUEST_SUCCESS,
-          false
-        );
-        handleChange(
-          MODEL_CREATION_FORM_NAME.TRAINING_REQUEST_MESSAGE,
-          // @ts-expect-error bad type definition 
-          `Your created model could not be trained because ${String(error?.response?.data[0]).toLocaleLowerCase()}. Click on the enhance button below to retrain your model.`
-        );
       },
     },
   });
@@ -372,7 +331,6 @@ export const ModelsProvider: React.FC<{
     );
   }, [formData]);
 
-
   // Confirm that all the training areas labels has been retrieved
   const hasLabeledTrainingAreas = useMemo(() => {
     return (
@@ -389,8 +347,8 @@ export const ModelsProvider: React.FC<{
     );
   }, [formData]);
   const resetState = () => {
-    setFormData(initialFormState)
-  }
+    setFormData(initialFormState);
+  };
   const memoizedValues = useMemo(
     () => ({
       setFormData,
@@ -400,7 +358,7 @@ export const ModelsProvider: React.FC<{
       hasLabeledTrainingAreas,
       hasAOIsWithGeometry,
       formData,
-      resetState
+      resetState,
     }),
     [
       setFormData,
@@ -410,7 +368,7 @@ export const ModelsProvider: React.FC<{
       createNewModelMutation,
       hasLabeledTrainingAreas,
       hasAOIsWithGeometry,
-      resetState
+      resetState,
     ],
   );
 

diff --git a/frontend/src/app/routes/models/confirmation.tsx b/frontend/src/app/routes/models/confirmation.tsx
@@ -1,59 +1,49 @@
-import { useModelsContext } from "@/app/providers/models-provider";
 import ModelFormConfirmation from "@/assets/images/model_creation_success.png";
 import { Button } from "@/components/ui/button";
 import { Image } from "@/components/ui/image";
 import { Link } from "@/components/ui/link";
-import ModelEnhancementDialog from "@/features/models/components/dialogs/model-enhancement-dialog";
-import { useDialog } from "@/hooks/use-dialog";
 import { APPLICATION_ROUTES, MODEL_CREATION_CONTENT } from "@/utils";
 import ConfettiExplosion from "react-confetti-explosion";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 
 export const ModelConfirmationPage = () => {
   const [searchParams] = useSearchParams();
-  const modelId = searchParams.get("id");
-  const { formData } = useModelsContext();
-  const { isOpened, openDialog, closeDialog } = useDialog();
-  const navigate = useNavigate();
 
-  const handleClick = () => {
-    if (formData.trainingRequestIsSuccessful) {
-      navigate(`${APPLICATION_ROUTES.MODELS}/${modelId}`)
-    } else {
-      openDialog()
-    }
-  }
+  const modelId = searchParams.get("id");
   return (
-    <>
-      <ModelEnhancementDialog isOpened={isOpened} closeDialog={closeDialog} modelId={modelId as string} />
-      <div className={"col-start-3 col-span-8 flex flex-col gap-y-10"}>
-        <div className="flex items-center justify-center w-full h-full flex-col gap-y-10 text-center">
-          <ConfettiExplosion
-            force={0.2}
-            duration={5000}
-            particleCount={250}
-            height={10000}
-          />
-          <Image src={ModelFormConfirmation} alt="Model Creation Success Icon" />
-          <p className="text-title-2">Model {modelId} is Created!</p>
-          <p className="text-gray">
-            {formData.trainingRequestMessage}
-          </p>
-          <div className="flex items-center justify-between gap-x-4">
-            <Button onClick={handleClick}>
-              {formData.trainingRequestIsSuccessful ? MODEL_CREATION_CONTENT.confirmation.buttons.goToModel : MODEL_CREATION_CONTENT.confirmation.buttons.enhanceModel}
+    <div className={"col-start-3 col-span-8 flex flex-col gap-y-10"}>
+      <div className="flex items-center justify-center w-full h-full flex-col gap-y-10 text-center">
+        <ConfettiExplosion
+          force={0.2}
+          duration={5000}
+          particleCount={250}
+          height={10000}
+        />
+        <Image src={ModelFormConfirmation} alt="Model Creation Success Icon" />
+        <p className="text-title-2">Model {modelId} is Created!</p>
+        <p className="text-gray">
+          {MODEL_CREATION_CONTENT.confirmation.description}
+        </p>
+        <div className="flex items-center justify-between gap-x-4">
+          <Link
+            href={`${APPLICATION_ROUTES.MODELS}/${modelId}`}
+            title={MODEL_CREATION_CONTENT.confirmation.buttons.goToModel}
+            nativeAnchor={false}
+          >
+            <Button>
+              {MODEL_CREATION_CONTENT.confirmation.buttons.goToModel}
+            </Button>
+          </Link>
+          <Link
+            href={`${APPLICATION_ROUTES.MODELS}`}
+            title={MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}
+          >
+            <Button variant="dark">
+              {MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}
             </Button>
-            <Link
-              href={!formData.trainingRequestIsSuccessful ? `${APPLICATION_ROUTES.MODELS}/${modelId}` : `${APPLICATION_ROUTES.MODELS}`}
-              title={!formData.trainingRequestIsSuccessful ? MODEL_CREATION_CONTENT.confirmation.buttons.goToModel : MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}
-            >
-              <Button variant="dark">
-                {!formData.trainingRequestIsSuccessful ? MODEL_CREATION_CONTENT.confirmation.buttons.goToModel : MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}
-              </Button>
-            </Link>
-          </div>
+          </Link>
         </div>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/frontend/src/app/routes/models/models-list.tsx b/frontend/src/app/routes/models/models-list.tsx
@@ -59,9 +59,9 @@ const ClearFilters = ({
 }) => {
   const canClearAllFilters = Boolean(
     query[SEARCH_PARAMS.searchQuery] ||
-    query[SEARCH_PARAMS.startDate] ||
-    query[SEARCH_PARAMS.endDate] ||
-    query[SEARCH_PARAMS.id],
+      query[SEARCH_PARAMS.startDate] ||
+      query[SEARCH_PARAMS.endDate] ||
+      query[SEARCH_PARAMS.id],
   );
 
   return (

diff --git a/frontend/src/components/map/draw-control.tsx b/frontend/src/components/map/draw-control.tsx
@@ -4,11 +4,8 @@ import { ToolTip } from "@/components/ui/tooltip";
 import { PenIcon } from "@/components/ui/icons";
 import { useMap } from "@/app/providers/map-provider";
 
-
 const DrawControl = () => {
-
-  const { drawingMode, terraDraw, setDrawingMode } = useMap()
-
+  const { drawingMode, terraDraw, setDrawingMode } = useMap();
 
   const changeMode = useCallback(
     (newMode: DrawingModes) => {
@@ -50,8 +47,6 @@ const DrawControl = () => {
     </ToolTip>
   );
 
-
-
   return (
     <>
       {renderButton(
@@ -61,7 +56,7 @@ const DrawControl = () => {
         drawingMode === DrawingModes.RECTANGLE,
       )}
     </>
-  )
+  );
 };
 
 export default DrawControl;
diff --git a/frontend/src/components/map/index.ts b/frontend/src/components/map/index.ts
@@ -3,4 +3,4 @@ export { default as ZoomControls } from "./zoom-controls";
 export { default as DrawControl } from "./draw-control";
 export { default as ZoomLevel } from "./zoom-level";
 export { default as LayerControl } from "./layer-control";
-export { default as MapCursorToolTip } from './map-cursor-tooltip'
+export { default as MapCursorToolTip } from "./map-cursor-tooltip";
diff --git a/frontend/src/components/map/layer-control.tsx b/frontend/src/components/map/layer-control.tsx
@@ -17,7 +17,7 @@ const LayerControl = ({
 }: {
   map: Map | null;
   layers: TLayers;
-  basemaps: TBasemaps
+  basemaps: TBasemaps;
 }) => {
   const { dropdownIsOpened, onDropdownHide, onDropdownShow } =
     useDropdownMenu();