dataset infinite scroll

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

Author: camiloHimura

application/ui/src/features/inspect/dataset/dataset-list.component.tsx

@@ -10,23 +10,21 @@ import { getThumbnailUrl } from '../utils';
 import { DatasetItemPlaceholder } from './dataset-item-placeholder/dataset-item-placeholder.component';
 import { getPlaceholderItem, isPlaceholderItem } from './dataset-item-placeholder/util';
 import { DeleteMediaItem } from './delete-dataset-item/delete-dataset-item.component';
+import { useGetMediaItems } from './hooks/use-get-media-items.hook';
 import { MediaPreview } from './media-preview/media-preview.component';
 import { InferenceOpacityProvider } from './media-preview/providers/inference-opacity-provider.component';
 import { MediaItem } from './types';
 import { REQUIRED_NUMBER_OF_NORMAL_IMAGES_TO_TRIGGER_TRAINING } from './utils';
 
-interface DatasetItemProps {
-    mediaItems: MediaItem[];
-}
-
 const layoutOptions = {
     maxColumns: 4,
     minSpace: new Size(8, 8),
     minItemSize: new Size(120, 120),
     preserveAspectRatio: true,
 };
 
-export const DatasetList = ({ mediaItems }: DatasetItemProps) => {
+export const DatasetList = () => {
+    const { mediaItems, isFetchingNextPage, fetchNextPage } = useGetMediaItems();
     const [selectedMediaItemId, setSelectedMediaItem] = useQueryState('selectedMediaItem');
     //TODO: revisit implementation when dataset loading is paginated
     const selectedMediaItem = mediaItems.find((item) => item.id === selectedMediaItemId);
@@ -58,6 +56,8 @@ export const DatasetList = ({ mediaItems }: DatasetItemProps) => {
                     ariaLabel='sidebar-items'
                     selectionMode='single'
                     layoutOptions={layoutOptions}
+                    isLoadingMore={isFetchingNextPage}
+                    onLoadMore={fetchNextPage}
                     onSelectionChange={handleSelectionChange}
                     contentItem={(mediaItem) =>
                         mediaItem.filename === 'placeholder' ? (

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

@@ -1,27 +1,12 @@
 import { Suspense } from 'react';
 
-import { $api } from '@geti-inspect/api';
-import { useProjectIdentifier } from '@geti-inspect/hooks';
 import { Flex, Heading, Loading, View } from '@geti/ui';
 
 import { TrainModelButton } from '../train-model/train-model-button.component';
 import { DatasetList } from './dataset-list.component';
 import { UploadImages } from './upload-images.component';
 
-const useMediaItems = () => {
-    const { projectId } = useProjectIdentifier();
-
-    const { data } = $api.useSuspenseQuery('get', '/api/projects/{project_id}/images', {
-        params: { path: { project_id: projectId } },
-    });
-
-    return {
-        mediaItems: data.media,
-    };
-};
-
 export const Dataset = () => {
-    const { mediaItems } = useMediaItems();
     return (
         <Flex direction={'column'} height={'100%'}>
             <Heading margin={0}>
@@ -36,7 +21,7 @@ export const Dataset = () => {
             <Suspense fallback={<Loading mode={'inline'} />}>
                 <View flex={1} padding={'size-300'}>
                     <Flex direction={'column'} height={'100%'} gap={'size-300'}>
-                        <DatasetList mediaItems={mediaItems} />
+                        <DatasetList />
                     </Flex>
                 </View>
             </Suspense>

application/ui/src/features/inspect/dataset/hooks/use-get-media-items.hook.tsx

@@ -0,0 +1,39 @@
+import { $api } from '@geti-inspect/api';
+import { useProjectIdentifier } from '@geti-inspect/hooks';
+
+const mediaItemsLimit = 20;
+
+export const useGetMediaItems = () => {
+    const { projectId } = useProjectIdentifier();
+
+    const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = $api.useInfiniteQuery(
+        'get',
+        '/api/projects/{project_id}/images',
+        {
+            params: {
+                query: { offset: 0, limit: mediaItemsLimit },
+                path: { project_id: projectId },
+            },
+        },
+        {
+            pageParamName: 'offset',
+            getNextPageParam: ({
+                pagination,
+            }: {
+                pagination: { offset: number; limit: number; count: number; total: number };
+            }) => {
+                const total = pagination.offset + pagination.count;
+
+                if (total >= pagination.total) {
+                    return undefined;
+                }
+
+                return pagination.offset + mediaItemsLimit;
+            },
+        }
+    );
+
+    const mediaItems = data?.pages.flatMap((page) => page.media) ?? [];
+
+    return { mediaItems, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage };
+};

application/ui/src/features/inspect/projects-management/project-list-item/project-list-item.component.tsx

@@ -9,7 +9,6 @@ import { Flex, PhotoPlaceholder, Text } from '@geti/ui';
 import { clsx } from 'clsx';
 import { useNavigate } from 'react-router';
 
-import { useWebRTCConnection } from '../../../../components/stream/web-rtc-connection-provider';
 import { paths } from '../../../../routes/paths';
 import { ProjectEdition } from './project-edition/project-edition.component';
 import { ProjectActions } from './project-list-actions/project-list-actions.component';
@@ -27,7 +26,6 @@ interface ProjectListItemProps {
 
 export const ProjectListItem = ({ project, isActive, isInEditMode, setProjectInEdition }: ProjectListItemProps) => {
     const navigate = useNavigate();
-    const { stop } = useWebRTCConnection();
 
     const updateProject = $api.useMutation('patch', '/api/projects/{project_id}', {
         onSettled: () => setProjectInEdition(null),
@@ -50,7 +48,6 @@ export const ProjectListItem = ({ project, isActive, isInEditMode, setProjectInE
             return;
         }
 
-        stop();
         navigate(`${paths.project({ projectId: project.id })}?mode=Dataset`);
     };
 

application/ui/src/features/inspect/projects-management/project-list-item/project-list-item.test.tsx

@@ -20,7 +20,6 @@ vi.mock('react-router', async () => {
     };
 });
 
-const mockStop = vi.fn();
 const mockNavigate = vi.fn();
 
 describe('ProjectListItem', () => {
@@ -33,7 +32,7 @@ describe('ProjectListItem', () => {
         vi.clearAllMocks();
         vi.mocked(useNavigate).mockReturnValue(mockNavigate);
         vi.mocked(useWebRTCConnection).mockReturnValue({
-            stop: mockStop,
+            stop: vi.fn(),
             start: vi.fn(),
             status: 'idle',
             webRTCConnectionRef: { current: null },
@@ -54,7 +53,6 @@ describe('ProjectListItem', () => {
 
         await userEvent.click(screen.getByRole('listitem'));
 
-        expect(mockStop).toHaveBeenCalled();
         expect(mockNavigate).toHaveBeenCalledWith('/projects/project-123?mode=Dataset');
     });
 

application/ui/src/features/inspect/toolbar/inference-devices/inference-devices.component.tsx

@@ -45,6 +45,7 @@ export const InferenceDevices = () => {
             isQuiet
             width='auto'
             label='Inference devices: '
+            aria-label='inference devices'
             labelAlign='end'
             labelPosition='side'
             items={options}

application/ui/src/features/inspect/toolbar/toolbar.test.tsx

@@ -0,0 +1,65 @@
+import { ThemeProvider } from '@geti/ui/theme';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { SchemaPipeline } from 'src/api/openapi-spec';
+import { http } from 'src/api/utils';
+import { server } from 'src/msw-node-setup';
+
+import { getMockedPipeline } from '../../../../mocks/mock-pipeline';
+import { Toolbar } from './toolbar';
+
+describe('Toolbar', () => {
+    const renderApp = ({ pipelineConfig = {} }: { pipelineConfig?: Partial<SchemaPipeline> }) => {
+        server.use(
+            http.get('/api/projects/{project_id}/pipeline', ({ response }) =>
+                response(200).json(getMockedPipeline(pipelineConfig))
+            )
+        );
+
+        return render(
+            <ThemeProvider>
+                <QueryClientProvider client={new QueryClient()}>
+                    <MemoryRouter initialEntries={['/projects/123/inspect']}>
+                        <Routes>
+                            <Route path='/projects/:projectId/inspect' element={<Toolbar />} />
+                        </Routes>
+                    </MemoryRouter>
+                </QueryClientProvider>
+            </ThemeProvider>
+        );
+    };
+
+    describe('InferenceDevices', () => {
+        it.only('renders when model is configured', async () => {
+            renderApp({
+                pipelineConfig: {
+                    model: {
+                        id: '1',
+                        name: 'test-model',
+                        format: 'onnx',
+                        project_id: '123',
+                        threshold: 0.5,
+                        is_ready: true,
+                        train_job_id: 'train-job-1',
+                        dataset_snapshot_id: '',
+                    },
+                },
+            });
+
+            expect(await screen.findByRole('button', { name: /inference devices/i })).toBeVisible();
+        });
+
+        it('does not render when no model is configured', async () => {
+            renderApp({
+                pipelineConfig: {
+                    model: undefined,
+                },
+            });
+
+            await waitFor(() => {
+                expect(screen.queryByRole('button', { name: /inference devices/i })).not.toBeInTheDocument();
+            });
+        });
+    });
+});

application/ui/src/features/inspect/toolbar/toolbar.tsx

@@ -1,12 +1,18 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
+import { usePipeline } from '@geti-inspect/hooks';
 import { dimensionValue, Divider, Flex, View } from '@geti/ui';
+import { isNil } from 'lodash-es';
 
 import { InferenceDevices } from './inference-devices/inference-devices.component';
 import { PipelineConfiguration } from './pipeline-configuration.component';
 
 export const Toolbar = () => {
+    const { data: pipeline } = usePipeline();
+
+    const hasModel = !isNil(pipeline?.model?.id);
+
     return (
         <View
             gridArea='toolbar'
@@ -16,8 +22,12 @@ export const Toolbar = () => {
         >
             <Flex height='100%' gap='size-200' alignItems={'center'}>
                 <Flex marginStart='auto' alignItems={'center'} gap={'size-200'}>
-                    <Divider size={'S'} orientation={'vertical'} />
-                    <InferenceDevices />
+                    {hasModel && (
+                        <>
+                            <Divider size={'S'} orientation={'vertical'} />
+                            <InferenceDevices />
+                        </>
+                    )}
                     <Divider size={'S'} orientation={'vertical'} />
                     <PipelineConfiguration />
                 </Flex>