diff --git a/frontend/src/app/providers/models-provider.tsx b/frontend/src/app/providers/models-provider.tsx index 247e1cfa..a888ea98 100644 --- a/frontend/src/app/providers/models-provider.tsx +++ b/frontend/src/app/providers/models-provider.tsx @@ -219,11 +219,11 @@ const ModelsContext = createContext<{ trainingDatasetCreationInProgress: boolean; handleModelCreationAndUpdate: () => void; handleTrainingDatasetCreation: () => void; - validateEditMode: boolean + validateEditMode: boolean; }>({ formData: initialFormState, - setFormData: () => { }, - handleChange: () => { }, + setFormData: () => {}, + handleChange: () => {}, createNewTrainingDatasetMutation: {} as UseMutationResult< TTrainingDataset, Error, @@ -238,14 +238,14 @@ const ModelsContext = createContext<{ >, hasLabeledTrainingAreas: false, hasAOIsWithGeometry: false, - resetState: () => { }, + resetState: () => {}, isEditMode: false, modelId: "", getFullPath: () => "", - handleModelCreationAndUpdate: () => { }, + handleModelCreationAndUpdate: () => {}, trainingDatasetCreationInProgress: false, - handleTrainingDatasetCreation: () => { }, - validateEditMode: false + handleTrainingDatasetCreation: () => {}, + validateEditMode: false, }); export const ModelsProvider: React.FC<{ @@ -292,7 +292,10 @@ export const ModelsProvider: React.FC<{ ); // Will be used in the route validator component to delay the redirection for a while until the data are retrieved - const validateEditMode = useMemo(() => formData.selectedTrainingDatasetId !== "" && formData.tmsURL !== "", [formData]) + const validateEditMode = useMemo( + () => formData.selectedTrainingDatasetId !== "" && formData.tmsURL !== "", + [formData], + ); // Fetch and prefill model details useEffect(() => { @@ -313,11 +316,7 @@ export const ModelsProvider: React.FC<{ // Fetch and prefill training dataset useEffect(() => { - if ( - !isEditMode || - trainingDatasetIsPending || - trainingDatasetIsError - ) + if (!isEditMode || trainingDatasetIsPending || trainingDatasetIsError) return; handleChange(MODEL_CREATION_FORM_NAME.DATASET_NAME, trainingDataset.name); handleChange( @@ -480,7 +479,7 @@ export const ModelsProvider: React.FC<{ handleModelCreationAndUpdate, handleTrainingDatasetCreation, trainingDatasetCreationInProgress, - validateEditMode + validateEditMode, }), [ setFormData, @@ -497,7 +496,7 @@ export const ModelsProvider: React.FC<{ handleModelCreationAndUpdate, handleTrainingDatasetCreation, trainingDatasetCreationInProgress, - validateEditMode + validateEditMode, ], ); diff --git a/frontend/src/app/routes/models/models-list.tsx b/frontend/src/app/routes/models/models-list.tsx index ac39b440..a899e8ed 100644 --- a/frontend/src/app/routes/models/models-list.tsx +++ b/frontend/src/app/routes/models/models-list.tsx @@ -59,9 +59,9 @@ const ClearFilters = ({ }) => { const canClearAllFilters = Boolean( query[SEARCH_PARAMS.searchQuery] || - query[SEARCH_PARAMS.startDate] || - query[SEARCH_PARAMS.endDate] || - query[SEARCH_PARAMS.id], + query[SEARCH_PARAMS.startDate] || + query[SEARCH_PARAMS.endDate] || + query[SEARCH_PARAMS.id], ); return ( @@ -252,8 +252,11 @@ export const ModelsPage = () => { setQuery(newQuery); }, []); - const { data: mapData, isPending: modelsMapDataIsPending, isError: modelsMapDataIsError } = - useModelsMapData(); + const { + data: mapData, + isPending: modelsMapDataIsPending, + isError: modelsMapDataIsError, + } = useModelsMapData(); // Since it's just a static filter, it's better to memoize it. const memoizedCategoryFilter = useMemo( @@ -318,11 +321,21 @@ export const ModelsPage = () => { if (query[SEARCH_PARAMS.layout] === LayoutView.LIST) { return (
- +
); } - return ; + return ( + + ); }; return ( diff --git a/frontend/src/components/layouts/model-forms-layout.tsx b/frontend/src/components/layouts/model-forms-layout.tsx index 296b7687..59b11175 100644 --- a/frontend/src/components/layouts/model-forms-layout.tsx +++ b/frontend/src/components/layouts/model-forms-layout.tsx @@ -20,50 +20,49 @@ import { } from "@/app/providers/models-provider"; import ModelsLayout from "./models-layout"; - const pages: { id: number; title: string; icon: React.ElementType; path: string; }[] = [ - { - id: 1, - title: MODEL_CREATION_CONTENT.progressStepper.modelDetails, - icon: TagsIcon, - path: MODELS_ROUTES.DETAILS, - }, - { - id: 2, - title: MODEL_CREATION_CONTENT.progressStepper.trainingDataset, - icon: DatabaseIcon, - path: MODELS_ROUTES.TRAINING_DATASET, - }, - { - id: 3, - title: MODEL_CREATION_CONTENT.progressStepper.trainingArea, - icon: SquareShadowIcon, - path: MODELS_ROUTES.TRAINING_AREA, - }, - { - id: 4, - title: MODEL_CREATION_CONTENT.progressStepper.trainingSettings, - icon: SettingsIcon, - path: MODELS_ROUTES.TRAINING_SETTINGS, - }, - { - id: 5, - title: MODEL_CREATION_CONTENT.progressStepper.submitModel, - icon: CloudIcon, - path: MODELS_ROUTES.MODEL_SUMMARY, - }, - { - id: 6, - title: MODEL_CREATION_CONTENT.progressStepper.confirmation, - icon: StarIcon, - path: MODELS_ROUTES.CONFIRMATION, - }, - ]; + { + id: 1, + title: MODEL_CREATION_CONTENT.progressStepper.modelDetails, + icon: TagsIcon, + path: MODELS_ROUTES.DETAILS, + }, + { + id: 2, + title: MODEL_CREATION_CONTENT.progressStepper.trainingDataset, + icon: DatabaseIcon, + path: MODELS_ROUTES.TRAINING_DATASET, + }, + { + id: 3, + title: MODEL_CREATION_CONTENT.progressStepper.trainingArea, + icon: SquareShadowIcon, + path: MODELS_ROUTES.TRAINING_AREA, + }, + { + id: 4, + title: MODEL_CREATION_CONTENT.progressStepper.trainingSettings, + icon: SettingsIcon, + path: MODELS_ROUTES.TRAINING_SETTINGS, + }, + { + id: 5, + title: MODEL_CREATION_CONTENT.progressStepper.submitModel, + icon: CloudIcon, + path: MODELS_ROUTES.MODEL_SUMMARY, + }, + { + id: 6, + title: MODEL_CREATION_CONTENT.progressStepper.confirmation, + icon: StarIcon, + path: MODELS_ROUTES.CONFIRMATION, + }, +]; const ModelCreationLayout = () => { const { pathname } = useLocation(); @@ -116,10 +115,16 @@ const ModelFormRouteValidator = ({ currentPageIndex: number; }) => { const navigate = useNavigate(); - const { formData, hasLabeledTrainingAreas, getFullPath, validateEditMode, isEditMode } = useModelsContext(); + const { + formData, + hasLabeledTrainingAreas, + getFullPath, + validateEditMode, + isEditMode, + } = useModelsContext(); useEffect(() => { - if (isEditMode && !validateEditMode) return + if (isEditMode && !validateEditMode) return; if (!pathname || !formData || !currentPageIndex) return; const prevRoute = getFullPath(pages[currentPageIndex - 1].path); if (pathname.includes(MODELS_ROUTES.TRAINING_DATASET)) { diff --git a/frontend/src/features/model-creation/components/progress-buttons.tsx b/frontend/src/features/model-creation/components/progress-buttons.tsx index b1395a51..704618cf 100644 --- a/frontend/src/features/model-creation/components/progress-buttons.tsx +++ b/frontend/src/features/model-creation/components/progress-buttons.tsx @@ -5,12 +5,7 @@ import { } from "@/app/providers/models-provider"; import { ButtonWithIcon } from "@/components/ui/button"; import { ChevronDownIcon } from "@/components/ui/icons"; -import { - APPLICATION_ROUTES, - MODEL_CREATION_CONTENT, - MODELS_BASE, - MODELS_ROUTES, -} from "@/utils"; +import { MODEL_CREATION_CONTENT, MODELS_BASE, MODELS_ROUTES } from "@/utils"; import { useMemo } from "react"; import { useNavigate } from "react-router-dom"; import { TrainingDatasetOption } from "@/enums"; @@ -98,11 +93,11 @@ const ProgressButtons: React.FC = ({ if (currentPath.includes(MODELS_ROUTES.DETAILS)) { return ( formData.modelName.length >= - FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_NAME] - .minLength && + FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_NAME] + .minLength && formData.modelDescription.length >= - FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION] - .minLength + FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION] + .minLength ); } 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. @@ -118,8 +113,8 @@ const ProgressButtons: React.FC = ({ return ( formData.tmsURLValidation.valid && formData.datasetName.length >= - FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.DATASET_NAME] - .minLength + FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.DATASET_NAME] + .minLength ); } else if ( formData.trainingDatasetOption === TrainingDatasetOption.USE_EXISTING diff --git a/frontend/src/features/model-creation/components/training-area/training-area-list.tsx b/frontend/src/features/model-creation/components/training-area/training-area-list.tsx index 5d84d2a9..136832b8 100644 --- a/frontend/src/features/model-creation/components/training-area/training-area-list.tsx +++ b/frontend/src/features/model-creation/components/training-area/training-area-list.tsx @@ -40,7 +40,6 @@ const TrainingAreaList = ({ totalLength={data?.count} setOffset={setOffset} isPlaceholderData={isPlaceholderData} - /> diff --git a/frontend/src/features/model-creation/components/training-area/training-area.tsx b/frontend/src/features/model-creation/components/training-area/training-area.tsx index add3031c..e9ec3ccf 100644 --- a/frontend/src/features/model-creation/components/training-area/training-area.tsx +++ b/frontend/src/features/model-creation/components/training-area/training-area.tsx @@ -65,7 +65,6 @@ const TrainingAreaForm = () => { }); }; - return ( <> 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}; - }, + }, + { + accessorKey: "chips_length", + header: + APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.dsSize, + cell: ({ row }) => { + return {row.getValue("chips_length") ?? 0}; }, - { - 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: "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/features/models/layouts/grid.tsx b/frontend/src/features/models/layouts/grid.tsx index 3efe8a01..1a633a12 100644 --- a/frontend/src/features/models/layouts/grid.tsx +++ b/frontend/src/features/models/layouts/grid.tsx @@ -4,7 +4,7 @@ import ModelCard from "@/features/models/components/model-card"; type ModelListProps = { models?: TModel[]; isPending: boolean; - isError: boolean + isError: boolean; }; const ModelListSkeleton = () => { @@ -37,7 +37,7 @@ const ModelListSkeleton = () => { const ModelListGridLayout: React.FC = ({ models, isPending, - isError + isError, }) => { return ( <> diff --git a/frontend/src/features/models/layouts/table.tsx b/frontend/src/features/models/layouts/table.tsx index e345e57d..fa9af710 100644 --- a/frontend/src/features/models/layouts/table.tsx +++ b/frontend/src/features/models/layouts/table.tsx @@ -12,7 +12,7 @@ import { TableSkeleton } from "@/features/models/components/skeletons"; type ModelListProps = { models?: TModel[]; isPending: boolean; - isError: boolean + isError: boolean; }; const columnDefinitions: ColumnDef[] = [ @@ -63,7 +63,7 @@ const columnDefinitions: ColumnDef[] = [ const ModelListTableLayout: React.FC = ({ models, isPending, - isError + isError, }) => { if (isPending || isError) return ; const [sorting, setSorting] = useState([]); diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css index ce5c0536..f9bfad51 100644 --- a/frontend/src/styles/index.css +++ b/frontend/src/styles/index.css @@ -59,7 +59,6 @@ body { --scrollbar-track-bg: #f0f0f0; --scrollbar-thumb-bg: #ccc; --scrollbar-thumb-hover-bg: #bbb; - } /* Toast stack placement style begins */ @@ -158,7 +157,7 @@ sl-alert.success::part(base) { /* General scrollbar styles */ ::-webkit-scrollbar { width: var(--scrollbar-width); - height:5px; + height: 5px; } /* Scrollbar track */ @@ -175,4 +174,4 @@ sl-alert.success::part(base) { /* Scrollbar thumb on hover */ ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-bg); -} \ No newline at end of file +} diff --git a/frontend/src/utils/string-utils.ts b/frontend/src/utils/string-utils.ts index 9e9ee2bf..e774cca8 100644 --- a/frontend/src/utils/string-utils.ts +++ b/frontend/src/utils/string-utils.ts @@ -15,4 +15,3 @@ export const truncateString = (string?: string, maxLength: number = 30) => { } return string; }; -