🚀 feat(inspect): Add dataset list (#2971)

* feat: Display placeholders for images

* refactor: Fix scrollbar

* chore: Remove learn more

Author: dwesolow

app/ui/src/assets/icons/image.svg

@@ -18,3 +18,4 @@ export { ReactComponent as ThreeDotsCircle } from './three-dots-circle.svg';
 export { ReactComponent as VideoFile } from './video-file.svg';
 export { ReactComponent as Webcam } from './webcam.svg';
 export { ReactComponent as Webhook } from './webhook.svg';
+export { ReactComponent as Image } from './image.svg';

app/ui/src/assets/icons/index.ts

@@ -0,0 +1,26 @@
+import { Image } from '@geti-inspect/icons';
+import { Flex, View } from '@geti/ui';
+
+import styles from './dataset-item.module.scss';
+
+const DatasetItemPlaceholder = () => {
+    return (
+        <Flex justifyContent={'center'} alignItems={'center'} UNSAFE_className={styles.datasetItemPlaceholder}>
+            <Flex>
+                <Image />
+            </Flex>
+        </Flex>
+    );
+};
+
+interface DatasetItemProps {
+    mediaItem: string | undefined;
+}
+
+export const DatasetItem = ({ mediaItem }: DatasetItemProps) => {
+    if (mediaItem === undefined) {
+        return <DatasetItemPlaceholder />;
+    }
+
+    return <View>Item</View>;
+};

app/ui/src/features/inspect/dataset/dataset-item/dataset-item.component.tsx

@@ -0,0 +1,5 @@
+.datasetItemPlaceholder {
+    border: 1px dashed var(--spectrum-global-color-gray-700);
+    background-color: var(--spectrum-global-color-gray-200);
+    aspect-ratio: 4/3;
+}

app/ui/src/features/inspect/dataset/dataset-item/dataset-item.module.scss

@@ -0,0 +1,55 @@
+import { Content, Divider, Flex, Grid, Heading, InlineAlert, minmax, repeat, View } from '@geti/ui';
+
+import { DatasetItem } from './dataset-item/dataset-item.component';
+
+const NotEnoughNormalImagesToTrain = () => {
+    // TODO: This should change dynamically when user provides more normal images
+    const requiredNumberOfNormalImages = 20;
+
+    return (
+        <InlineAlert variant='info'>
+            <Heading>{requiredNumberOfNormalImages} images required</Heading>
+            <Content>
+                Capture {requiredNumberOfNormalImages} images of normal cases. They help the model learn what is
+                standard, so it can better detect anomalies.
+            </Content>
+        </InlineAlert>
+    );
+};
+
+const DatasetItemsList = () => {
+    const mediaItems = Array.from({ length: 20 }).map((_, index) => ({
+        id: index,
+        mediaItem: undefined,
+    }));
+
+    return (
+        <Grid
+            flex={1}
+            columns={repeat('auto-fill', minmax('size-1600', '1fr'))}
+            gap={'size-100'}
+            alignContent={'start'}
+        >
+            {mediaItems.map(({ id, mediaItem }) => (
+                <DatasetItem key={id} mediaItem={mediaItem} />
+            ))}
+        </Grid>
+    );
+};
+
+export const Dataset = () => {
+    return (
+        <Flex direction={'column'} height={'100%'}>
+            <Heading margin={0}>Dataset</Heading>
+            <View flex={1} padding={'size-300'}>
+                <Flex direction={'column'} height={'100%'} gap={'size-300'}>
+                    <NotEnoughNormalImagesToTrain />
+
+                    <Divider size={'S'} />
+
+                    <DatasetItemsList />
+                </Flex>
+            </View>
+        </Flex>
+    );
+};

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

@@ -5,13 +5,15 @@
 
 import { useState } from 'react';
 
-import { Dataset, Models, Stats } from '@geti-inspect/icons';
+import { Dataset as DatasetIcon, Models, Stats } from '@geti-inspect/icons';
 import { Flex, Grid, ToggleButton, View } from '@geti/ui';
 
+import { Dataset } from './dataset/dataset.component';
+
 import styles from './sidebar.module.scss';
 
 const TABS = [
-    { label: 'Dataset', icon: <Dataset />, content: <>Dataset</> },
+    { label: 'Dataset', icon: <DatasetIcon />, content: <Dataset /> },
     { label: 'Models', icon: <Models />, content: <>Models</> },
     { label: 'Stats', icon: <Stats />, content: <>Stats</> },
 ];
@@ -34,6 +36,7 @@ const SidebarTabs = ({ tabs, selectedTab }: TabProps) => {
             UNSAFE_className={styles.container}
             columns={gridTemplateColumns}
             data-expanded={tab !== null}
+            minHeight={0}
         >
             <View
                 gridColumn={'1/2'}

app/ui/src/features/inspect/sidebar.component.tsx

@@ -53,6 +53,10 @@ html {
     background-color: var(--background);
 }
 
+* {
+    box-sizing: border-box;
+}
+
 h1,
 h2,
 h3,

app/ui/src/index.css

@@ -26,7 +26,7 @@ export const Layout = () => {
             <Grid
                 areas={['header', 'content']}
                 UNSAFE_style={{
-                    gridTemplateRows: 'var(--spectrum-global-dimension-size-800, 4rem) auto',
+                    gridTemplateRows: 'var(--spectrum-global-dimension-size-800, 4rem) minmax(0, 1fr)',
                 }}
                 minHeight={'100vh'}
                 maxHeight={'100vh'}