From fbe39f979f5b12282894779c48df6de757fbf317 Mon Sep 17 00:00:00 2001
From: jeafreezy <jolaiyaemmanuel@gmail.com>
Date: Fri, 6 Dec 2024 13:38:35 +0100
Subject: [PATCH 1/4] chore: fixed bug in model details

---
 frontend/src/app/providers/models-provider.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/providers/models-provider.tsx b/frontend/src/app/providers/models-provider.tsx
index af814ae6..7047744a 100644
--- a/frontend/src/app/providers/models-provider.tsx
+++ b/frontend/src/app/providers/models-provider.tsx
@@ -306,8 +306,8 @@ export const ModelsProvider: React.FC<{
     }
 
     handleChange(MODEL_CREATION_FORM_NAME.BASE_MODELS, data.base_model);
-    handleChange(MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION, data.description);
-    handleChange(MODEL_CREATION_FORM_NAME.MODEL_NAME, data.name);
+    handleChange(MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION, data.description ?? '');
+    handleChange(MODEL_CREATION_FORM_NAME.MODEL_NAME, data.name ?? '');
     handleChange(
       MODEL_CREATION_FORM_NAME.SELECTED_TRAINING_DATASET_ID,
       data.dataset,
@@ -318,10 +318,10 @@ export const ModelsProvider: React.FC<{
   useEffect(() => {
     if (!isEditMode || trainingDatasetIsPending || trainingDatasetIsError)
       return;
-    handleChange(MODEL_CREATION_FORM_NAME.DATASET_NAME, trainingDataset.name);
+    handleChange(MODEL_CREATION_FORM_NAME.DATASET_NAME, trainingDataset.name ?? '');
     handleChange(
       MODEL_CREATION_FORM_NAME.TMS_URL,
-      trainingDataset.source_imagery,
+      trainingDataset.source_imagery ?? '',
     );
   }, [
     isEditMode,

From 541237cbe1085bb7035c914c429bb7948db14654 Mon Sep 17 00:00:00 2001
From: jeafreezy <jolaiyaemmanuel@gmail.com>
Date: Fri, 6 Dec 2024 13:40:17 +0100
Subject: [PATCH 2/4] chore: enabled enhancement for all authenticated users

---
 frontend/src/app/routes/models/model-details.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/routes/models/model-details.tsx b/frontend/src/app/routes/models/model-details.tsx
index c98d3f5c..2a6183c0 100644
--- a/frontend/src/app/routes/models/model-details.tsx
+++ b/frontend/src/app/routes/models/model-details.tsx
@@ -33,7 +33,7 @@ export const ModelDetailsPage = () => {
   } = useDialog();
   const navigate = useNavigate();
   const { data, isPending, isError, error } = useModelDetails(id as string, id !== undefined, 10000);
-  const { user } = useAuth();
+  const { isAuthenticated } = useAuth();
 
   useEffect(() => {
     if (isError) {
@@ -55,7 +55,7 @@ export const ModelDetailsPage = () => {
   if (isPending || isError) {
     return <ModelDetailsSkeleton />;
   }
-  const isOwner = user?.osm_id === data?.user?.osm_id;
+
 
   return (
     <>
@@ -108,6 +108,7 @@ export const ModelDetailsPage = () => {
             size="medium"
             prefixIcon={StarStackIcon}
             onClick={openModelEnhancementDialog}
+            disabled={!isAuthenticated}
           />
         </div>
         {/* mobile */}
@@ -123,7 +124,7 @@ export const ModelDetailsPage = () => {
               size="medium"
               prefixIcon={StarStackIcon}
               onClick={openModelEnhancementDialog}
-              disabled={!isOwner}
+              disabled={!isAuthenticated}
             />
           </div>
           <TrainingHistoryTable

From 94e064d7bb87cab13ad4d285c5c50d22edec06d1 Mon Sep 17 00:00:00 2001
From: jeafreezy <jolaiyaemmanuel@gmail.com>
Date: Fri, 6 Dec 2024 13:56:21 +0100
Subject: [PATCH 3/4] feat: enabled navigation with progress bar during
 enhancement

---
 .../model-creation/components/progress-bar.tsx        | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/model-creation/components/progress-bar.tsx b/frontend/src/features/model-creation/components/progress-bar.tsx
index ee5a68f1..73f015a6 100644
--- a/frontend/src/features/model-creation/components/progress-bar.tsx
+++ b/frontend/src/features/model-creation/components/progress-bar.tsx
@@ -1,6 +1,8 @@
+import { useModelsContext } from "@/app/providers/models-provider";
 import CheckIcon from "@/components/ui/icons/check-icon";
 import { cn } from "@/utils";
 import { memo } from "react";
+import { useNavigate } from "react-router-dom";
 
 type ProgressBarProps = {
   currentPath: string;
@@ -10,14 +12,21 @@ type ProgressBarProps = {
 
 const ProgressBar: React.FC<ProgressBarProps> = memo(
   ({ currentPath, currentPageIndex, pages }) => {
+    const navigate = useNavigate();
+    const {
+      getFullPath, isEditMode,
+    } = useModelsContext();
     return (
       <div className="flex items-center justify-between w-full gap-x-4 overflow-x-scroll p-1">
-        {pages.map((step) => {
+        {pages.map((step, index) => {
           const activeStep = currentPath.includes(step.path);
+          const isLastPage = index === pages.length - 1
           return (
             <button
               key={`current-form-progress-${step.id}`}
               className="flex items-center gap-x-3 cursor-pointer"
+              disabled={isLastPage}
+              onClick={() => isEditMode && !isLastPage && navigate(getFullPath(step.path))}
             >
               {step.id < currentPageIndex + 1 ? (
                 <span className="rounded-full bg-primary flex items-center justify-center w-9 h-9">

From a80c619c7dbc2544fcf18935f0362603045253d0 Mon Sep 17 00:00:00 2001
From: jeafreezy <jolaiyaemmanuel@gmail.com>
Date: Fri, 6 Dec 2024 13:56:51 +0100
Subject: [PATCH 4/4] chore: prettier formatting

---
 .../src/app/providers/models-provider.tsx     | 24 +++++++-----
 .../src/app/routes/models/model-details.tsx   |  7 +++-
 .../routes/start-mapping/start-mapping.tsx    |  2 +-
 .../components/model-summary.tsx              |  8 +++-
 .../components/progress-bar.tsx               | 10 ++---
 frontend/src/features/models/api/factory.ts   |  7 +++-
 .../components/dialogs/model-files-dialog.tsx |  7 +++-
 .../models/components/directory-tree.tsx      | 39 +++++++++----------
 .../src/features/models/hooks/use-models.ts   |  6 ++-
 9 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/frontend/src/app/providers/models-provider.tsx b/frontend/src/app/providers/models-provider.tsx
index 7047744a..1ae1b717 100644
--- a/frontend/src/app/providers/models-provider.tsx
+++ b/frontend/src/app/providers/models-provider.tsx
@@ -222,8 +222,8 @@ const ModelsContext = createContext<{
   validateEditMode: boolean;
 }>({
   formData: initialFormState,
-  setFormData: () => { },
-  handleChange: () => { },
+  setFormData: () => {},
+  handleChange: () => {},
   createNewTrainingDatasetMutation: {} as UseMutationResult<
     TTrainingDataset,
     Error,
@@ -238,13 +238,13 @@ const ModelsContext = createContext<{
   >,
   hasLabeledTrainingAreas: false,
   hasAOIsWithGeometry: false,
-  resetState: () => { },
+  resetState: () => {},
   isEditMode: false,
   modelId: "",
   getFullPath: () => "",
-  handleModelCreationAndUpdate: () => { },
+  handleModelCreationAndUpdate: () => {},
   trainingDatasetCreationInProgress: false,
-  handleTrainingDatasetCreation: () => { },
+  handleTrainingDatasetCreation: () => {},
   validateEditMode: false,
 });
 
@@ -306,8 +306,11 @@ export const ModelsProvider: React.FC<{
     }
 
     handleChange(MODEL_CREATION_FORM_NAME.BASE_MODELS, data.base_model);
-    handleChange(MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION, data.description ?? '');
-    handleChange(MODEL_CREATION_FORM_NAME.MODEL_NAME, data.name ?? '');
+    handleChange(
+      MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION,
+      data.description ?? "",
+    );
+    handleChange(MODEL_CREATION_FORM_NAME.MODEL_NAME, data.name ?? "");
     handleChange(
       MODEL_CREATION_FORM_NAME.SELECTED_TRAINING_DATASET_ID,
       data.dataset,
@@ -318,10 +321,13 @@ export const ModelsProvider: React.FC<{
   useEffect(() => {
     if (!isEditMode || trainingDatasetIsPending || trainingDatasetIsError)
       return;
-    handleChange(MODEL_CREATION_FORM_NAME.DATASET_NAME, trainingDataset.name ?? '');
+    handleChange(
+      MODEL_CREATION_FORM_NAME.DATASET_NAME,
+      trainingDataset.name ?? "",
+    );
     handleChange(
       MODEL_CREATION_FORM_NAME.TMS_URL,
-      trainingDataset.source_imagery ?? '',
+      trainingDataset.source_imagery ?? "",
     );
   }, [
     isEditMode,
diff --git a/frontend/src/app/routes/models/model-details.tsx b/frontend/src/app/routes/models/model-details.tsx
index 2a6183c0..48f22460 100644
--- a/frontend/src/app/routes/models/model-details.tsx
+++ b/frontend/src/app/routes/models/model-details.tsx
@@ -32,7 +32,11 @@ export const ModelDetailsPage = () => {
     openDialog: openModelFilesDialog,
   } = useDialog();
   const navigate = useNavigate();
-  const { data, isPending, isError, error } = useModelDetails(id as string, id !== undefined, 10000);
+  const { data, isPending, isError, error } = useModelDetails(
+    id as string,
+    id !== undefined,
+    10000,
+  );
   const { isAuthenticated } = useAuth();
 
   useEffect(() => {
@@ -56,7 +60,6 @@ export const ModelDetailsPage = () => {
     return <ModelDetailsSkeleton />;
   }
 
-
   return (
     <>
       <ModelEnhancementDialog
diff --git a/frontend/src/app/routes/start-mapping/start-mapping.tsx b/frontend/src/app/routes/start-mapping/start-mapping.tsx
index d6049065..dc65903e 100644
--- a/frontend/src/app/routes/start-mapping/start-mapping.tsx
+++ b/frontend/src/app/routes/start-mapping/start-mapping.tsx
@@ -56,7 +56,7 @@ export const StartMappingPage = () => {
   const { modelId } = useParams();
   const { isError, isPending, data, error } = useModelDetails(
     modelId as string,
-    modelId !== undefined
+    modelId !== undefined,
   );
   const navigate = useNavigate();
   const { currentZoom } = useMap();
diff --git a/frontend/src/features/model-creation/components/model-summary.tsx b/frontend/src/features/model-creation/components/model-summary.tsx
index 79900bf7..1c045cee 100644
--- a/frontend/src/features/model-creation/components/model-summary.tsx
+++ b/frontend/src/features/model-creation/components/model-summary.tsx
@@ -77,8 +77,12 @@ const ModelSummaryForm = () => {
       content: [
         `${MODEL_CREATION_CONTENT.trainingSettings.form.epoch.label}: ${formData.epoch}`,
         `${MODEL_CREATION_CONTENT.trainingSettings.form.batchSize.label}: ${formData.batchSize}`,
-        formData.baseModel === BASE_MODELS.RAMP ? `${MODEL_CREATION_CONTENT.trainingSettings.form.contactSpacing.label}: ${formData.contactSpacing}` : '',
-        formData.baseModel === BASE_MODELS.RAMP ? `${MODEL_CREATION_CONTENT.trainingSettings.form.boundaryWidth.label}:  ${formData.boundaryWidth}` : '',
+        formData.baseModel === BASE_MODELS.RAMP
+          ? `${MODEL_CREATION_CONTENT.trainingSettings.form.contactSpacing.label}: ${formData.contactSpacing}`
+          : "",
+        formData.baseModel === BASE_MODELS.RAMP
+          ? `${MODEL_CREATION_CONTENT.trainingSettings.form.boundaryWidth.label}:  ${formData.boundaryWidth}`
+          : "",
       ],
     },
   ];
diff --git a/frontend/src/features/model-creation/components/progress-bar.tsx b/frontend/src/features/model-creation/components/progress-bar.tsx
index 73f015a6..b2ecd89d 100644
--- a/frontend/src/features/model-creation/components/progress-bar.tsx
+++ b/frontend/src/features/model-creation/components/progress-bar.tsx
@@ -13,20 +13,20 @@ type ProgressBarProps = {
 const ProgressBar: React.FC<ProgressBarProps> = memo(
   ({ currentPath, currentPageIndex, pages }) => {
     const navigate = useNavigate();
-    const {
-      getFullPath, isEditMode,
-    } = useModelsContext();
+    const { getFullPath, isEditMode } = useModelsContext();
     return (
       <div className="flex items-center justify-between w-full gap-x-4 overflow-x-scroll p-1">
         {pages.map((step, index) => {
           const activeStep = currentPath.includes(step.path);
-          const isLastPage = index === pages.length - 1
+          const isLastPage = index === pages.length - 1;
           return (
             <button
               key={`current-form-progress-${step.id}`}
               className="flex items-center gap-x-3 cursor-pointer"
               disabled={isLastPage}
-              onClick={() => isEditMode && !isLastPage && navigate(getFullPath(step.path))}
+              onClick={() =>
+                isEditMode && !isLastPage && navigate(getFullPath(step.path))
+              }
             >
               {step.id < currentPageIndex + 1 ? (
                 <span className="rounded-full bg-primary flex items-center justify-center w-9 h-9">
diff --git a/frontend/src/features/models/api/factory.ts b/frontend/src/features/models/api/factory.ts
index b416db41..2285603b 100644
--- a/frontend/src/features/models/api/factory.ts
+++ b/frontend/src/features/models/api/factory.ts
@@ -46,12 +46,15 @@ export const getModelsQueryOptions = ({
   });
 };
 
-export const getModelDetailsQueryOptions = (id: string, refetchInterval: boolean | number) => {
+export const getModelDetailsQueryOptions = (
+  id: string,
+  refetchInterval: boolean | number,
+) => {
   return queryOptions({
     queryKey: [queryKeys.MODEL_DETAILS(id)],
     queryFn: () => getModelDetails(id),
     //@ts-expect-error bad type definition
-    refetchInterval: refetchInterval
+    refetchInterval: refetchInterval,
   });
 };
 
diff --git a/frontend/src/features/models/components/dialogs/model-files-dialog.tsx b/frontend/src/features/models/components/dialogs/model-files-dialog.tsx
index 4a2de107..d1ce6ded 100644
--- a/frontend/src/features/models/components/dialogs/model-files-dialog.tsx
+++ b/frontend/src/features/models/components/dialogs/model-files-dialog.tsx
@@ -20,7 +20,12 @@ const ModelFilesDialog: React.FC<TrainingAreaDialogProps> = ({
       closeDialog={closeDialog}
       label={APP_CONTENT.models.modelsDetailsCard.modelFilesDialog.dialogTitle}
     >
-      <p className="text-dark text-body-2base px-2 mb-4">{APP_CONTENT.models.modelsDetailsCard.modelFilesDialog.dialogDescription}</p>
+      <p className="text-dark text-body-2base px-2 mb-4">
+        {
+          APP_CONTENT.models.modelsDetailsCard.modelFilesDialog
+            .dialogDescription
+        }
+      </p>
       {isOpened && (
         <DirectoryTree
           trainingId={trainingId}
diff --git a/frontend/src/features/models/components/directory-tree.tsx b/frontend/src/features/models/components/directory-tree.tsx
index 3d78c46d..7472aaf1 100644
--- a/frontend/src/features/models/components/directory-tree.tsx
+++ b/frontend/src/features/models/components/directory-tree.tsx
@@ -121,10 +121,9 @@ const DirectoryTree: React.FC<DirectoryTreeProps> = ({
   const fetchDirectoryRecursive = async (
     currentDirectory: string = "",
     currentDepth: number = 0,
-    maxDepth: number = 2
+    maxDepth: number = 2,
   ): Promise<any> => {
     if (currentDepth >= maxDepth) {
-
       return {};
     }
 
@@ -136,24 +135,24 @@ const DirectoryTree: React.FC<DirectoryTreeProps> = ({
     const subdirectories =
       dir && currentDepth < maxDepth
         ? await Promise.all(
-          Object.keys(dir).map(async (key: string) => {
-            const fullPath = currentDirectory
-              ? `${currentDirectory}/${key}`
-              : key;
-            const subDirData = await fetchDirectoryRecursive(
-              fullPath,
-              currentDepth + 1,
-              maxDepth
-            );
-            return {
-              [key]: {
-                ...subDirData,
-                size: dir[key]?.size || 0,
-                length: dir[key]?.len || 0,
-              },
-            };
-          })
-        )
+            Object.keys(dir).map(async (key: string) => {
+              const fullPath = currentDirectory
+                ? `${currentDirectory}/${key}`
+                : key;
+              const subDirData = await fetchDirectoryRecursive(
+                fullPath,
+                currentDepth + 1,
+                maxDepth,
+              );
+              return {
+                [key]: {
+                  ...subDirData,
+                  size: dir[key]?.size || 0,
+                  length: dir[key]?.len || 0,
+                },
+              };
+            }),
+          )
         : [];
 
     return {
diff --git a/frontend/src/features/models/hooks/use-models.ts b/frontend/src/features/models/hooks/use-models.ts
index 2606cb0d..576670a5 100644
--- a/frontend/src/features/models/hooks/use-models.ts
+++ b/frontend/src/features/models/hooks/use-models.ts
@@ -39,7 +39,11 @@ export const useModels = ({
   });
 };
 
-export const useModelDetails = (id: string, enabled: boolean = true, refetchInterval: boolean | number = false) => {
+export const useModelDetails = (
+  id: string,
+  enabled: boolean = true,
+  refetchInterval: boolean | number = false,
+) => {
   return useQuery({
     ...getModelDetailsQueryOptions(id, refetchInterval),
     //@ts-expect-error bad type definition