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] 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