From 8a5c822e02d1560532d22d8ffc4c267797621d61 Mon Sep 17 00:00:00 2001 From: jeafreezy Date: Mon, 25 Nov 2024 10:18:31 +0100 Subject: [PATCH] chore: minor fixes --- .../components/model-summary.tsx | 11 +- .../components/progress-buttons.tsx | 9 +- .../training-dataset/training-dataset.tsx | 16 +- .../features/models/api/update-trainings.ts | 2 +- .../components/training-history-table.tsx | 222 +++++++++--------- frontend/src/utils/content.ts | 2 + 6 files changed, 143 insertions(+), 119 deletions(-) diff --git a/frontend/src/features/model-creation/components/model-summary.tsx b/frontend/src/features/model-creation/components/model-summary.tsx index 19d60ba5..7daec69e 100644 --- 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 index 704618cf..4a9feb7c 100644 --- 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 = ({ handleModelCreationAndUpdate, handleTrainingDatasetCreation, trainingDatasetCreationInProgress, + isEditMode, } = useModelsContext(); const nextPage = () => { @@ -56,9 +57,10 @@ const ProgressButtons: React.FC = ({ 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 = ({ ); } 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 index 9271ae3c..737fac00 100644 --- 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 (
{formData.trainingDatasetOption === TrainingDatasetOption.NONE ? (
@@ -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 index cf1101d0..15e11f38 100644 --- 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 index c98c5f85..6b2efa43 100644 --- 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[] => [ - { - accessorKey: "id", - header: ({ column }) => , + { + accessorKey: "id", + header: ({ column }) => , + }, + { + header: + APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader + .epochAndBatchSize, + accessorFn: (row) => `${row.epochs}/${row.batch_size}`, + cell: (row) => ( + {row.getValue() as string} + ), + }, + { + accessorKey: "started_at", + accessorFn: (row) => + row.started_at !== null ? formatDate(row.started_at) : "-", + header: + APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.startedAt, + cell: (row) => { + return {row.getValue() as string}; }, - { - header: - APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader - .epochAndBatchSize, - accessorFn: (row) => `${row.epochs}/${row.batch_size}`, - cell: (row) => ( - {row.getValue() as string} - ), + }, + { + 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) => ( + {row.getValue() as string} + ), + }, + { + accessorKey: "user.username", + header: + APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader + .sumittedBy, + cell: ({ row }) => { + return {truncateString(row.original.user.username)}; }, - { - accessorKey: "started_at", - accessorFn: (row) => - row.started_at !== null ? formatDate(row.started_at) : "-", - header: - APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.startedAt, - cell: (row) => { - return {row.getValue() as string}; - }, - }, - { - 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) => ( - {row.getValue() as string} - ), - }, - { - accessorKey: "user.username", - header: - APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader - .sumittedBy, - cell: ({ row }) => { - return {truncateString(row.original.user.username)}; - }, + }, + { + accessorKey: "chips_length", + header: + APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.dsSize, + cell: ({ row }) => { + return {row.getValue("chips_length") ?? 0}; }, - { - accessorKey: "chips_length", - header: - APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.dsSize, - cell: ({ row }) => { - return {row.getValue("chips_length") ?? 0}; - }, - }, - { - accessorKey: "accuracy", - header: ({ column }) => ( - - ), - cell: ({ row }) => { - return ( - - {Number(row.getValue("accuracy")) > 0 - ? roundNumber(row.getValue("accuracy")) - : "-"} - - ); - }, + }, + { + accessorKey: "accuracy", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( + + {Number(row.getValue("accuracy")) > 0 + ? roundNumber(row.getValue("accuracy")) + : "-"} + + ); }, - { - header: - APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.status, - accessorKey: "status", - cell: (row) => { - const statusToVariant: Record = { - finished: "green", - failed: "red", - submitted: "blue", - running: "yellow", - }; + }, + { + header: + APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.status, + accessorKey: "status", + cell: (row) => { + const statusToVariant: Record = { + finished: "green", + failed: "red", + submitted: "blue", + running: "yellow", + }; - return ( - - {String(row.getValue()).toLocaleLowerCase() as string} - - ); - }, + ] + } + > + {String(row.getValue()).toLocaleLowerCase() as string} + + ); }, - { - header: - APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.inUse, + }, + { + header: + APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.inUse, - cell: ({ row }) => { - return ( - - {row.getValue("id") === trainingId ? ( - - - - ) : null} - - ); - }, + cell: ({ row }) => { + return ( + + {row.getValue("id") === trainingId ? ( + + + + ) : null} + + ); }, - ...(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 = ({ trainingId, diff --git a/frontend/src/utils/content.ts b/frontend/src/utils/content.ts index 80b777d5..40444821 100644 --- 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!", },