chore: minor fixes

hotosm · Nov 25, 2024 · 8a5c822 · 8a5c822
1 parent a986c37
commit 8a5c822
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 119 deletions.
diff --git a/frontend/src/features/model-creation/components/model-summary.tsx b/frontend/src/features/model-creation/components/model-summary.tsx
@@ -8,6 +8,7 @@ import {
   TextIcon,
   ZoomInIcon,
 } from "@/components/ui/icons";
+import { BASE_MODELS } from "@/enums";
 import { StepHeading } from "@/features/model-creation/components/";
 import { IconProps } from "@/types";
 import { MODEL_CREATION_CONTENT } from "@/utils";
@@ -76,8 +77,14 @@ const ModelSummaryForm = () => {
       content: [
         `${MODEL_CREATION_CONTENT.trainingSettings.form.epoch.label}: ${formData.epoch}`,
         `${MODEL_CREATION_CONTENT.trainingSettings.form.batchSize.label}: ${formData.batchSize}`,
-        `${MODEL_CREATION_CONTENT.trainingSettings.form.contactSpacing.label}: ${formData.contactSpacing}`,
-        `${MODEL_CREATION_CONTENT.trainingSettings.form.boundaryWidth.label}:  ${formData.boundaryWidth}`,
+        ...[
+          formData.baseModel === BASE_MODELS.RAMP
+            ? [
+                `${MODEL_CREATION_CONTENT.trainingSettings.form.contactSpacing.label}: ${formData.contactSpacing}`,
+                `${MODEL_CREATION_CONTENT.trainingSettings.form.boundaryWidth.label}:  ${formData.boundaryWidth}`,
+              ]
+            : [],
+        ],
       ],
     },
   ];

diff --git a/frontend/src/features/model-creation/components/progress-buttons.tsx b/frontend/src/features/model-creation/components/progress-buttons.tsx
@@ -32,6 +32,7 @@ const ProgressButtons: React.FC<ProgressButtonsProps> = ({
     handleModelCreationAndUpdate,
     handleTrainingDatasetCreation,
     trainingDatasetCreationInProgress,
+    isEditMode,
   } = useModelsContext();
 
   const nextPage = () => {
@@ -56,9 +57,10 @@ const ProgressButtons: React.FC<ProgressButtonsProps> = ({
   const prevPage = () => {
     if (currentPageIndex > 0) {
       const prevRoute = getFullPath(pages[currentPageIndex - 1].path);
-      // When going back, if it's the training dataset page and the user already selected an option previously
+      // When going back, if it's the training dataset page and the user already selected an option previously, and not in edit mode,
       // Reset the selection to none so they can see the options again.
       if (
+        !isEditMode &&
         currentPageIndex === 1 &&
         formData.trainingDatasetOption !== TrainingDatasetOption.NONE
       ) {
@@ -101,7 +103,10 @@ const ProgressButtons: React.FC<ProgressButtonsProps> = ({
       );
     } else if (currentPath.includes(MODELS_ROUTES.TRAINING_DATASET)) {
       // if the user hasn't selected any of the options, then they can not proceed to next page.
-      if (formData.trainingDatasetOption === TrainingDatasetOption.NONE) {
+      if (
+        !isEditMode &&
+        formData.trainingDatasetOption === TrainingDatasetOption.NONE
+      ) {
         return false;
       } else if (
         formData.trainingDatasetOption === TrainingDatasetOption.CREATE_NEW

diff --git a/frontend/src/features/model-creation/components/training-dataset/training-dataset.tsx b/frontend/src/features/model-creation/components/training-dataset/training-dataset.tsx
@@ -11,13 +11,21 @@ import {
 import { MODEL_CREATION_CONTENT } from "@/utils";
 
 const TrainingDatasetForm = () => {
-  const { handleChange, formData } = useModelsContext();
+  const { handleChange, formData, isEditMode } = useModelsContext();
 
   return (
     <div className="flex flex-col gap-y-6 w-full">
       <StepHeading
-        heading={MODEL_CREATION_CONTENT.trainingDataset.pageTitle}
-        description={MODEL_CREATION_CONTENT.trainingDataset.pageDescription}
+        heading={
+          isEditMode
+            ? MODEL_CREATION_CONTENT.trainingDataset.editModePageTitle
+            : MODEL_CREATION_CONTENT.trainingDataset.pageTitle
+        }
+        description={
+          isEditMode
+            ? MODEL_CREATION_CONTENT.trainingDataset.editModePageDescription
+            : MODEL_CREATION_CONTENT.trainingDataset.pageDescription
+        }
       />
       {formData.trainingDatasetOption === TrainingDatasetOption.NONE ? (
         <div className="flex flex-col gap-y-10 w-full">
@@ -27,6 +35,7 @@ const TrainingDatasetForm = () => {
             iconClassName="-rotate-90"
             variant={"dark"}
             capitalizeText={false}
+            disabled={isEditMode}
             onClick={() =>
               handleChange(
                 MODEL_CREATION_FORM_NAME.TRAINING_DATASET_OPTION,
@@ -41,6 +50,7 @@ const TrainingDatasetForm = () => {
             suffixIcon={ChevronDownIcon}
             iconClassName="-rotate-90"
             capitalizeText={false}
+            disabled={isEditMode}
             onClick={() =>
               handleChange(
                 MODEL_CREATION_FORM_NAME.TRAINING_DATASET_OPTION,

diff --git a/frontend/src/features/models/api/update-trainings.ts b/frontend/src/features/models/api/update-trainings.ts
@@ -22,7 +22,7 @@ export const useUpdateTraining = ({
     String(modelId),
     0,
     PAGE_LIMIT,
-    "-id"
+    "-id",
   );
 
   const { onSuccess, ...restConfig } = mutationConfig || {};

diff --git a/frontend/src/features/models/components/training-history-table.tsx b/frontend/src/features/models/components/training-history-table.tsx
@@ -41,121 +41,121 @@ const columnDefinitions = (
   handleTrainingModal: (trainingId: number) => void,
   publishTraining: (trainingId: number) => void,
 ): ColumnDef<TTrainingDetails>[] => [
-    {
-      accessorKey: "id",
-      header: ({ column }) => <SortableHeader title={"ID"} column={column} />,
+  {
+    accessorKey: "id",
+    header: ({ column }) => <SortableHeader title={"ID"} column={column} />,
+  },
+  {
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
+        .epochAndBatchSize,
+    accessorFn: (row) => `${row.epochs}/${row.batch_size}`,
+    cell: (row) => (
+      <span title={row.getValue() as string}>{row.getValue() as string}</span>
+    ),
+  },
+  {
+    accessorKey: "started_at",
+    accessorFn: (row) =>
+      row.started_at !== null ? formatDate(row.started_at) : "-",
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.startedAt,
+    cell: (row) => {
+      return <span>{row.getValue() as string}</span>;
     },
-    {
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
-          .epochAndBatchSize,
-      accessorFn: (row) => `${row.epochs}/${row.batch_size}`,
-      cell: (row) => (
-        <span title={row.getValue() as string}>{row.getValue() as string}</span>
-      ),
+  },
+  {
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.duration,
+    accessorFn: (row) =>
+      row.finished_at && row.started_at
+        ? formatDuration(new Date(row.started_at), new Date(row.finished_at))
+        : "-",
+    cell: (row) => (
+      <span title={row.getValue() as string}>{row.getValue() as string}</span>
+    ),
+  },
+  {
+    accessorKey: "user.username",
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
+        .sumittedBy,
+    cell: ({ row }) => {
+      return <span>{truncateString(row.original.user.username)}</span>;
     },
-    {
-      accessorKey: "started_at",
-      accessorFn: (row) =>
-        row.started_at !== null ? formatDate(row.started_at) : "-",
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.startedAt,
-      cell: (row) => {
-        return <span>{row.getValue() as string}</span>;
-      },
-    },
-    {
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.duration,
-      accessorFn: (row) =>
-        row.finished_at && row.started_at
-          ? formatDuration(new Date(row.started_at), new Date(row.finished_at))
-          : "-",
-      cell: (row) => (
-        <span title={row.getValue() as string}>{row.getValue() as string}</span>
-      ),
-    },
-    {
-      accessorKey: "user.username",
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
-          .sumittedBy,
-      cell: ({ row }) => {
-        return <span>{truncateString(row.original.user.username)}</span>;
-      },
+  },
+  {
+    accessorKey: "chips_length",
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.dsSize,
+    cell: ({ row }) => {
+      return <span>{row.getValue("chips_length") ?? 0}</span>;
     },
-    {
-      accessorKey: "chips_length",
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.dsSize,
-      cell: ({ row }) => {
-        return <span>{row.getValue("chips_length") ?? 0}</span>;
-      },
-    },
-    {
-      accessorKey: "accuracy",
-      header: ({ column }) => (
-        <SortableHeader
-          title={
-            APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
-              .accuracy
-          }
-          column={column}
-        />
-      ),
-      cell: ({ row }) => {
-        return (
-          <span>
-            {Number(row.getValue("accuracy")) > 0
-              ? roundNumber(row.getValue("accuracy"))
-              : "-"}
-          </span>
-        );
-      },
+  },
+  {
+    accessorKey: "accuracy",
+    header: ({ column }) => (
+      <SortableHeader
+        title={
+          APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
+            .accuracy
+        }
+        column={column}
+      />
+    ),
+    cell: ({ row }) => {
+      return (
+        <span>
+          {Number(row.getValue("accuracy")) > 0
+            ? roundNumber(row.getValue("accuracy"))
+            : "-"}
+        </span>
+      );
     },
-    {
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.status,
-      accessorKey: "status",
-      cell: (row) => {
-        const statusToVariant: Record<string, TBadgeVariants> = {
-          finished: "green",
-          failed: "red",
-          submitted: "blue",
-          running: "yellow",
-        };
+  },
+  {
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.status,
+    accessorKey: "status",
+    cell: (row) => {
+      const statusToVariant: Record<string, TBadgeVariants> = {
+        finished: "green",
+        failed: "red",
+        submitted: "blue",
+        running: "yellow",
+      };
 
-        return (
-          <Badge
-            variant={
-              statusToVariant[
+      return (
+        <Badge
+          variant={
+            statusToVariant[
               String(row.getValue()).toLocaleLowerCase() as TBadgeVariants
-              ]
-            }
-          >
-            {String(row.getValue()).toLocaleLowerCase() as string}
-          </Badge>
-        );
-      },
+            ]
+          }
+        >
+          {String(row.getValue()).toLocaleLowerCase() as string}
+        </Badge>
+      );
     },
-    {
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.inUse,
+  },
+  {
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.inUse,
 
-      cell: ({ row }) => {
-        return (
-          <span>
-            {row.getValue("id") === trainingId ? (
-              <Badge variant="green" rounded>
-                <CheckIcon className="icon" />
-              </Badge>
-            ) : null}
-          </span>
-        );
-      },
+    cell: ({ row }) => {
+      return (
+        <span>
+          {row.getValue("id") === trainingId ? (
+            <Badge variant="green" rounded>
+              <CheckIcon className="icon" />
+            </Badge>
+          ) : null}
+        </span>
+      );
     },
-    ...(modelOwner !== authUsername
-      ? [
+  },
+  ...(modelOwner !== authUsername
+    ? [
         {
           header:
             APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
@@ -174,9 +174,9 @@ const columnDefinitions = (
           },
         },
       ]
-      : []),
-    ...(modelOwner === authUsername && isAuthenticated
-      ? [
+    : []),
+  ...(modelOwner === authUsername && isAuthenticated
+    ? [
         {
           header:
             APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
@@ -225,8 +225,8 @@ const columnDefinitions = (
           },
         },
       ]
-      : []),
-  ];
+    : []),
+];
 
 const TrainingHistoryTable: React.FC<TrainingHistoryTableProps> = ({
   trainingId,

diff --git a/frontend/src/utils/content.ts b/frontend/src/utils/content.ts
@@ -69,6 +69,7 @@ export const MODEL_CREATION_CONTENT = {
   },
   trainingDataset: {
     pageTitle: "Create New Training Dataset",
+    editModePageTitle: "Training Dataset",
     buttons: {
       createNew: "Create a new training dataset",
       selectExisting: "select from existing training dataset",
@@ -94,6 +95,7 @@ export const MODEL_CREATION_CONTENT = {
         placeholder: "Search",
       },
     },
+    editModePageDescription: "You cannot edit a model dataset when editing...",
     pageDescription:
       "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id fugit ducimus harum debitis deserunt cum quod quam rerum aliquid. Quibusdam sequi incidunt quasi delectus laudantium accusamus modi omnis maiores. Incidunt!",
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,7 +22,7 @@ export const useUpdateTraining = ({ @@
         String(modelId),
 ,
         PAGE_LIMIT,
-        "-id"
+        "-id",
       );
       const { onSuccess, ...restConfig } = mutationConfig || {};
@@ Expand Down @@