3171 Add the active model to the model menu

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

Author: camiloHimura

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

@@ -31,18 +31,19 @@ const useDefaultModel = () => {
     const { projectId } = useProjectIdentifier();
     const patchPipeline = usePatchPipeline(projectId);
 
-    const selectedModelId = pipeline?.model?.id;
+    const hasSelectedModel = pipeline?.model?.id !== undefined;
+    const hasNonAvailableModels = models.length === 0;
 
     useEffect(() => {
-        if (selectedModelId !== undefined || models.length === 0 || patchPipeline.isPending) {
+        if (hasSelectedModel || hasNonAvailableModels || patchPipeline.isPending) {
             return;
         }
 
         patchPipeline.mutate({
             params: { path: { project_id: projectId } },
             body: { model_id: models[0].id },
         });
-    }, [models, patchPipeline, projectId, selectedModelId]);
+    }, [hasNonAvailableModels, hasSelectedModel, models, patchPipeline, projectId]);
 };
 
 export const ProgressBarItem = () => {

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { $api } from '@geti-inspect/api';
-import { useProjectIdentifier } from '@geti-inspect/hooks';
+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';
 
@@ -12,13 +12,13 @@ import type { ModelData } from './model-types';
 interface ModelActionsMenuProps {
     model: ModelData;
     selectedModelId: string | undefined;
-    onSetSelectedModelId: (modelId: string | undefined) => void;
 }
 
 type DialogType = 'logs' | 'delete' | 'export' | null;
 
-export const ModelActionsMenu = ({ model, selectedModelId, onSetSelectedModelId }: ModelActionsMenuProps) => {
+export const ModelActionsMenu = ({ model, selectedModelId }: ModelActionsMenuProps) => {
     const { projectId } = useProjectIdentifier();
+    const patchPipeline = usePatchPipeline(projectId);
     const [openDialog, setOpenDialog] = useState<DialogType>(null);
 
     const cancelJobMutation = $api.useMutation('post', '/api/jobs/{job_id}:cancel');
@@ -33,8 +33,9 @@ export const ModelActionsMenu = ({ model, selectedModelId, onSetSelectedModelId
     });
 
     const hasJobActions = Boolean(model.job?.id);
-    const canDeleteModel = model.status === 'Completed' && model.id !== selectedModelId;
-    const canExportModel = model.status === 'Completed';
+    const hasCompletedStatus = model.status === 'Completed';
+    const canDeleteModel = hasCompletedStatus && model.id !== selectedModelId;
+    const canExportModel = hasCompletedStatus;
     const shouldShowMenu = hasJobActions || canDeleteModel || canExportModel;
 
     if (!shouldShowMenu) {
@@ -48,20 +49,17 @@ export const ModelActionsMenu = ({ model, selectedModelId, onSetSelectedModelId
     if (deleteModelMutation.isPending) {
         disabledMenuKeys.push('delete');
     }
+    if (model.id === selectedModelId || patchPipeline.isPending) {
+        disabledMenuKeys.push('activate');
+    }
 
     const handleCancelJob = () => {
         if (!model.job?.id) {
             return;
         }
 
         void cancelJobMutation.mutateAsync(
-            {
-                params: {
-                    path: {
-                        job_id: model.job.id,
-                    },
-                },
-            },
+            { params: { path: { job_id: model.job.id } } },
             {
                 onError: () => {
                     toast({ type: 'error', message: 'Failed to cancel training job.' });
@@ -70,20 +68,17 @@ export const ModelActionsMenu = ({ model, selectedModelId, onSetSelectedModelId
         );
     };
 
+    const handleSetModel = (modelId?: string) => {
+        patchPipeline.mutateAsync({ params: { path: { project_id: projectId } }, body: { model_id: modelId } });
+    };
+
     const handleDeleteModel = () => {
         void deleteModelMutation.mutateAsync(
-            {
-                params: {
-                    path: {
-                        project_id: projectId,
-                        model_id: model.id,
-                    },
-                },
-            },
+            { params: { path: { project_id: projectId, model_id: model.id } } },
             {
                 onSuccess: () => {
                     if (selectedModelId === model.id) {
-                        onSetSelectedModelId(undefined);
+                        handleSetModel(undefined);
                     }
 
                     toast({ type: 'success', message: `Model "${model.name}" has been deleted.` });
@@ -119,8 +114,12 @@ export const ModelActionsMenu = ({ model, selectedModelId, onSetSelectedModelId
                         if (actionKey === 'delete' && canDeleteModel) {
                             setOpenDialog('delete');
                         }
+                        if (actionKey === 'activate' && hasCompletedStatus) {
+                            handleSetModel(model.id);
+                        }
                     }}
                 >
+                    {hasCompletedStatus ? <Item key='activate'>Activate</Item> : null}
                     {hasJobActions ? <Item key='logs'>View logs</Item> : null}
                     {model.job?.status === 'pending' || model.job?.status === 'running' ? (
                         <Item key='cancel'>Cancel training</Item>

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { $api } from '@geti-inspect/api';
-import { usePipeline, useProjectIdentifier, useSetModelToPipeline } from '@geti-inspect/hooks';
+import { usePipeline, useProjectIdentifier } from '@geti-inspect/hooks';
 import {
     Cell,
     Column,
@@ -39,7 +39,7 @@ const useModels = () => {
 export const ModelsView = () => {
     const { data: pipeline } = usePipeline();
     const { jobs = [] } = useProjectTrainingJobs();
-    const setModelToPipelineMutation = useSetModelToPipeline();
+
     const dateFormatter = useDateFormatter({ dateStyle: 'medium', timeStyle: 'short' });
     const selectedModelId = pipeline.model?.id;
     useRefreshModelsOnJobUpdates(jobs);
@@ -109,10 +109,6 @@ export const ModelsView = () => {
         return new Set<string>([selectedModelId]);
     }, [selectedModelId]);
 
-    const handleSetModel = (modelId?: string) => {
-        setModelToPipelineMutation(modelId);
-    };
-
     return (
         <View backgroundColor='gray-100' height='100%'>
             {/* Models Table */}
@@ -122,22 +118,6 @@ export const ModelsView = () => {
                 selectionStyle='highlight'
                 selectionMode='single'
                 selectedKeys={tableSelectedKeys}
-                onSelectionChange={(key) => {
-                    if (typeof key === 'string') {
-                        return;
-                    }
-
-                    const selectedId = key.values().next().value;
-                    if (selectedId === selectedModelId) {
-                        return;
-                    }
-
-                    const selectedModel = models.find((model) => model.id === selectedId);
-
-                    if (selectedModel?.status === 'Completed') {
-                        handleSetModel(selectedModel.id);
-                    }
-                }}
                 UNSAFE_className={classes.table}
                 renderEmptyState={() => (
                     <IllustratedMessage>
@@ -178,11 +158,7 @@ export const ModelsView = () => {
                             <Cell>
                                 <Flex justifyContent='end' alignItems='center'>
                                     <Flex alignItems='center' gap='size-200'>
-                                        <ModelActionsMenu
-                                            model={model}
-                                            selectedModelId={selectedModelId}
-                                            onSetSelectedModelId={handleSetModel}
-                                        />
+                                        <ModelActionsMenu model={model} selectedModelId={selectedModelId} />
                                     </Flex>
                                 </Flex>
                             </Cell>

application/ui/src/features/inspect/stream/fps/fps.component.tsx

@@ -25,7 +25,7 @@ export const Fps = ({ projectId }: FpsProp) => {
     const requestsPerSecond = metrics?.inference.throughput.avg_requests_per_second;
 
     if (isEmpty(metrics) || isNil(requestsPerSecond)) {
-        return <></>;
+        return null;
     }
 
     return (

application/ui/src/features/inspect/toolbar/models-list/model-list.module.scss

@@ -1,5 +1,14 @@
 .option {
+    text-align: left;
     background-color: var(--spectrum-global-color-gray-75);
     border-radius: var(--spectrum-alias-border-radius-regular);
     border: var(--spectrum-alias-border-size-thin) solid var(--spectrum-global-color-gray-200) !important;
+
+    span {
+        text-align: left;
+    }
+}
+
+.active {
+    border-left: var(--spectrum-global-dimension-size-50) solid var(--aqua) !important;
 }

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { usePatchPipeline, usePipeline, useProjectIdentifier } from '@geti-inspect/hooks';
-import { Button, Content, Flex, IllustratedMessage, Text } from '@geti/ui';
+import { Button, Content, Flex, IllustratedMessage } from '@geti/ui';
 import { clsx } from 'clsx';
 import { isEmpty } from 'lodash-es';
 import { NotFound } from 'packages/ui/icons';
@@ -27,7 +27,7 @@ export const ModelsList = () => {
         });
     };
 
-    if (isEmpty(modelsIds) || !selectedModelId) {
+    if (isEmpty(modelsIds)) {
         return renderEmptyState();
     }
 
@@ -36,13 +36,13 @@ export const ModelsList = () => {
             {models.map((model) => (
                 <Button
                     key={model.id}
-                    variant={model.id === selectedModelId ? 'accent' : 'secondary'}
+                    variant='secondary'
                     onPress={() => handleSelectionChange(String(model.id))}
                     isPending={patchPipeline.isPending}
                     isDisabled={patchPipeline.isPending}
-                    UNSAFE_className={clsx(classes.option)}
+                    UNSAFE_className={clsx(classes.option, { [classes.active]: model.id === selectedModelId })}
                 >
-                    <Text>{model.name}</Text>
+                    {model.name}
                 </Button>
             ))}
         </Flex>

application/ui/src/hooks/use-pipeline.hook.ts

@@ -112,18 +112,6 @@ export const useConnectSinkToPipeline = () => {
         pipeline.mutateAsync({ params: { path: { project_id: projectId } }, body: { sink_id } });
 };
 
-export const useSetModelToPipeline = () => {
-    const { projectId } = useProjectIdentifier();
-    const pipeline = usePatchPipeline(projectId);
-
-    return (modelId: string | undefined) => {
-        pipeline.mutate({
-            params: { path: { project_id: projectId } },
-            body: { model_id: modelId },
-        });
-    };
-};
-
 export const useActivePipeline = () => {
     return $api.useSuspenseQuery('get', '/api/active-pipeline');
 };