Merge pull request #308 from jeafreezy/model-creation

Bug Fix During Model Enhancement
hotosm · Dec 6, 2024 · f63deb6 · f63deb6
2 parents 02be49c + a80c619
commit f63deb6
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 41 deletions.
diff --git 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
@@ -32,8 +32,12 @@ export const ModelDetailsPage = () => {
     openDialog: openModelFilesDialog,
   } = useDialog();
   const navigate = useNavigate();
-  const { data, isPending, isError, error } = useModelDetails(id as string, id !== undefined, 10000);
-  const { user } = useAuth();
+  const { data, isPending, isError, error } = useModelDetails(
+    id as string,
+    id !== undefined,
+    10000,
+  );
+  const { isAuthenticated } = useAuth();
 
   useEffect(() => {
     if (isError) {
@@ -55,7 +59,6 @@ export const ModelDetailsPage = () => {
   if (isPending || isError) {
     return <ModelDetailsSkeleton />;
   }
-  const isOwner = user?.osm_id === data?.user?.osm_id;
 
   return (
     <>
@@ -108,6 +111,7 @@ export const ModelDetailsPage = () => {
             size="medium"
             prefixIcon={StarStackIcon}
             onClick={openModelEnhancementDialog}
+            disabled={!isAuthenticated}
           />
         </div>
         {/* mobile */}
@@ -123,7 +127,7 @@ export const ModelDetailsPage = () => {
               size="medium"
               prefixIcon={StarStackIcon}
               onClick={openModelEnhancementDialog}
-              disabled={!isOwner}
+              disabled={!isAuthenticated}
             />
           </div>
           <TrainingHistoryTable

diff --git 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
@@ -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
@@ -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">

diff --git 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
@@ -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
@@ -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
@@ -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