feat(inspect): Select default model (#3190)

select completed models

Signed-off-by: Colorado, Camilo <camilo.colorado@intel.com>

Author: camiloHimura

application/ui/src/features/inspect/dataset/dataset-status-panel.component.tsx

@@ -1,12 +1,12 @@
 import { ComponentProps, Suspense, useEffect, useRef } from 'react';
 
-import { $api } from '@geti-inspect/api';
 import { SchemaJob as Job, SchemaJob, SchemaJobStatus } from '@geti-inspect/api/spec';
 import { useProjectIdentifier } from '@geti-inspect/hooks';
 import { Content, Flex, Heading, InlineAlert, IntelBrandedLoading, ProgressBar, Text } from '@geti/ui';
 import { useQueryClient } from '@tanstack/react-query';
 import { isEqual } from 'lodash-es';
 
+import { useProjectTrainingJobs } from '../../../hooks/use-project-trainingJobs.hook';
 import { ShowJobLogs } from '../jobs/show-job-logs.component';
 import { REQUIRED_NUMBER_OF_NORMAL_IMAGES_TO_TRIGGER_TRAINING } from './utils';
 
@@ -88,25 +88,6 @@ const TrainingInProgress = ({ job }: TrainingInProgressProps) => {
     );
 };
 
-const REFETCH_INTERVAL_WITH_TRAINING = 1_000;
-
-export const useProjectTrainingJobs = () => {
-    const { projectId } = useProjectIdentifier();
-
-    const { data } = $api.useQuery('get', '/api/jobs', undefined, {
-        refetchInterval: ({ state }) => {
-            const projectHasTrainingJob = state.data?.jobs.some(
-                ({ project_id, type, status }) =>
-                    projectId === project_id && type === 'training' && (status === 'running' || status === 'pending')
-            );
-
-            return projectHasTrainingJob ? REFETCH_INTERVAL_WITH_TRAINING : undefined;
-        },
-    });
-
-    return { jobs: data?.jobs.filter((job) => job.project_id === projectId) };
-};
-
 export const useRefreshModelsOnJobUpdates = (jobs: Job[] | undefined) => {
     const queryClient = useQueryClient();
     const { projectId } = useProjectIdentifier();

application/ui/src/features/inspect/footer/footer.component.tsx

@@ -8,8 +8,9 @@ import { SchemaJob as Job } from '@geti-inspect/api/spec';
 import { usePatchPipeline, usePipeline, useProjectIdentifier } from '@geti-inspect/hooks';
 import { Flex, Loading, Text, View } from '@geti/ui';
 import { WaitingIcon } from '@geti/ui/icons';
+import { isEmpty } from 'lodash-es';
 
-import { useTrainedModels } from '../../../hooks/use-model';
+import { useCompletedModels } from '../../../hooks/use-completed-models.hook';
 import { TrainingStatusItem } from './training-status-item.component';
 
 const useCurrentJob = () => {
@@ -26,13 +27,13 @@ const useCurrentJob = () => {
 };
 
 const useDefaultModel = () => {
-    const models = useTrainedModels();
+    const models = useCompletedModels();
     const { data: pipeline } = usePipeline();
     const { projectId } = useProjectIdentifier();
     const patchPipeline = usePatchPipeline(projectId);
 
     const hasSelectedModel = pipeline?.model?.id !== undefined;
-    const hasNonAvailableModels = models.length === 0;
+    const hasNonAvailableModels = isEmpty(models.filter(({ status }) => status === 'Completed'));
 
     useEffect(() => {
         if (hasSelectedModel || hasNonAvailableModels || patchPipeline.isPending) {

application/ui/src/features/inspect/models/export-model-dialog.component.tsx

@@ -20,8 +20,8 @@ import { useMutation } from '@tanstack/react-query';
 import type { SchemaCompressionType, SchemaExportType } from 'src/api/openapi-spec';
 import { Onnx, OpenVino, PyTorch } from 'src/assets/icons';
 
+import type { ModelData } from '../../../hooks/utils';
 import { downloadBlob, sanitizeFilename } from '../utils';
-import type { ModelData } from './model-types';
 
 import classes from './export-model-dialog.module.scss';
 

application/ui/src/features/inspect/models/model-actions-menu.component.tsx

@@ -5,9 +5,9 @@ import { usePatchPipeline, useProjectIdentifier } from '@geti-inspect/hooks';
 import { ActionButton, AlertDialog, DialogContainer, Item, Menu, MenuTrigger, toast, type Key } from '@geti/ui';
 import { MoreMenu } from '@geti/ui/icons';
 
+import type { ModelData } from '../../../hooks/utils';
 import { JobLogsDialog } from '../jobs/show-job-logs.component';
 import { ExportModelDialog } from './export-model-dialog.component';
-import type { ModelData } from './model-types';
 
 interface ModelActionsMenuProps {
     model: ModelData;

application/ui/src/features/inspect/models/models-view.component.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 
-import { $api } from '@geti-inspect/api';
-import { usePipeline, useProjectIdentifier } from '@geti-inspect/hooks';
+import { usePipeline } from '@geti-inspect/hooks';
 import {
     Cell,
     Column,
@@ -18,63 +17,25 @@ import {
 import { sortBy } from 'lodash-es';
 import { useDateFormatter } from 'react-aria';
 
-import { useProjectTrainingJobs, useRefreshModelsOnJobUpdates } from '../dataset/dataset-status-panel.component';
+import { useCompletedModels } from '../../../hooks/use-completed-models.hook';
+import { useProjectTrainingJobs } from '../../../hooks/use-project-trainingJobs.hook';
+import type { ModelData } from '../../../hooks/utils';
+import { useRefreshModelsOnJobUpdates } from '../dataset/dataset-status-panel.component';
 import { formatSize } from '../utils';
 import { ModelActionsMenu } from './model-actions-menu.component';
 import { ModelStatusBadges } from './model-status-badges.component';
-import { ModelData } from './model-types';
 
 import classes from './models-view.module.scss';
 
-const useModels = () => {
-    const { projectId } = useProjectIdentifier();
-    const modelsQuery = $api.useSuspenseQuery('get', '/api/projects/{project_id}/models', {
-        params: { path: { project_id: projectId } },
-    });
-    const models = modelsQuery.data.models;
-
-    return models;
-};
-
 export const ModelsView = () => {
     const { data: pipeline } = usePipeline();
     const { jobs = [] } = useProjectTrainingJobs();
 
     const dateFormatter = useDateFormatter({ dateStyle: 'medium', timeStyle: 'short' });
     const selectedModelId = pipeline.model?.id;
-    useRefreshModelsOnJobUpdates(jobs);
-
-    const models = useModels()
-        .filter((model) => model.is_ready)
-        .map((model): ModelData | null => {
-            const job = jobs.find(({ id }) => id === model.train_job_id);
-            if (job === undefined) {
-                return null;
-            }
-
-            let timestamp = '';
-            let durationInSeconds = 0;
-            const start = job.start_time ? new Date(job.start_time) : new Date();
-            if (job) {
-                const end = job.end_time ? new Date(job.end_time) : new Date();
-                durationInSeconds = Math.floor((end.getTime() - start.getTime()) / 1000);
-                timestamp = dateFormatter.format(start);
-            }
+    const models = useCompletedModels();
 
-            return {
-                id: model.id!,
-                name: model.name!,
-                status: 'Completed',
-                architecture: model.name!,
-                startTime: start.getTime(),
-                timestamp,
-                durationInSeconds,
-                progress: 1.0,
-                job,
-                sizeBytes: model.size ?? null,
-            };
-        })
-        .filter((model): model is ModelData => model !== null);
+    useRefreshModelsOnJobUpdates(jobs);
 
     const completedModelsJobsIDs = new Set(models.map((model) => model.job?.id));
 

application/ui/src/features/inspect/toolbar/models-list/models-list.component.tsx

@@ -7,7 +7,7 @@ import { clsx } from 'clsx';
 import { isEmpty } from 'lodash-es';
 import { NotFound } from 'packages/ui/icons';
 
-import { useTrainedModels } from '../../../../hooks/use-model';
+import { useTrainedModels } from '../../../../hooks/use-trained-models';
 
 import classes from './model-list.module.scss';
 

application/ui/src/hooks/use-completed-models.hook.ts

@@ -0,0 +1,48 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { useDateFormatter } from '@react-aria/i18n';
+
+import { useProjectTrainingJobs } from './use-project-trainingJobs.hook';
+import { useTrainedModels } from './use-trained-models';
+import { ModelData } from './utils';
+
+export const useCompletedModels = () => {
+    const { jobs = [] } = useProjectTrainingJobs();
+
+    const dateFormatter = useDateFormatter({ dateStyle: 'medium', timeStyle: 'short' });
+
+    const models = useTrainedModels()
+        .filter((model) => model.is_ready)
+        .map((model): ModelData | null => {
+            const job = jobs.find(({ id }) => id === model.train_job_id);
+            if (job === undefined) {
+                return null;
+            }
+
+            let timestamp = '';
+            let durationInSeconds = 0;
+            const start = job.start_time ? new Date(job.start_time) : new Date();
+            if (job) {
+                const end = job.end_time ? new Date(job.end_time) : new Date();
+                durationInSeconds = Math.floor((end.getTime() - start.getTime()) / 1000);
+                timestamp = dateFormatter.format(start);
+            }
+
+            return {
+                id: model.id!,
+                name: model.name!,
+                status: 'Completed',
+                architecture: model.name!,
+                startTime: start.getTime(),
+                timestamp,
+                durationInSeconds,
+                progress: 1.0,
+                job,
+                sizeBytes: model.size ?? null,
+            };
+        })
+        .filter((model): model is ModelData => model !== null);
+
+    return models;
+};

application/ui/src/hooks/use-project-trainingJobs.hook.ts

@@ -0,0 +1,21 @@
+import { $api } from '../api/client';
+import { useProjectIdentifier } from './use-project-identifier.hook';
+
+const REFETCH_INTERVAL_WITH_TRAINING = 1_000;
+
+export const useProjectTrainingJobs = () => {
+    const { projectId } = useProjectIdentifier();
+
+    const { data } = $api.useQuery('get', '/api/jobs', undefined, {
+        refetchInterval: ({ state }) => {
+            const projectHasTrainingJob = state.data?.jobs.some(
+                ({ project_id, type, status }) =>
+                    projectId === project_id && type === 'training' && (status === 'running' || status === 'pending')
+            );
+
+            return projectHasTrainingJob ? REFETCH_INTERVAL_WITH_TRAINING : undefined;
+        },
+    });
+
+    return { jobs: data?.jobs.filter((job) => job.project_id === projectId) };
+};

application/ui/src/hooks/use-model.tsx …ation/ui/src/hooks/use-trained-models.tsapplication/ui/src/hooks/use-model.tsx renamed to application/ui/src/hooks/use-trained-models.ts application/ui/src/hooks/use-model.tsx renamed to application/ui/src/hooks/use-trained-models.ts

@@ -6,13 +6,13 @@ import { useProjectIdentifier } from '@geti-inspect/hooks';
 
 export const useTrainedModels = () => {
     const { projectId } = useProjectIdentifier();
-    const { data } = $api.useQuery('get', '/api/projects/{project_id}/models', {
+    const { data } = $api.useSuspenseQuery('get', '/api/projects/{project_id}/models', {
         params: {
             path: {
                 project_id: projectId,
             },
         },
     });
 
-    return data?.models.map((model) => ({ id: model.id, name: model.name })) || [];
+    return data.models;
 };