Add models and labels routes (#4604)

Author: jpggvilaca

ui/src/layout.tsx

@@ -2,12 +2,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Flex, Grid, Item, TabList, TabPanels, Tabs, View } from '@geti/ui';
+import { Tag } from '@geti/ui/icons';
 import { Outlet, useLocation } from 'react-router';
 
 import { ReactComponent as BuildIcon } from './assets/icons/build-icon.svg';
 import { ReactComponent as LiveFeedIcon } from './assets/icons/live-feed-icon.svg';
+import { ReactComponent as Webhook } from './assets/icons/webhook.svg';
 import { paths } from './router';
 
+const iconStyles = {
+    width: 'var(--spectrum-global-dimension-size-200)',
+    height: 'var(--spectrum-global-dimension-size-200)',
+};
+
 const Header = () => {
     return (
         <View backgroundColor={'gray-300'} gridArea={'header'}>
@@ -29,7 +36,7 @@ const Header = () => {
                         href={paths.inference.index({})}
                     >
                         <Flex alignItems='center' gap='size-100'>
-                            <LiveFeedIcon />
+                            <LiveFeedIcon style={iconStyles} />
                             Inference
                         </Flex>
                     </Item>
@@ -39,10 +46,30 @@ const Header = () => {
                         href={paths.dataset.index({})}
                     >
                         <Flex alignItems='center' gap='size-100'>
-                            <BuildIcon />
+                            <BuildIcon style={iconStyles} />
                             Dataset
                         </Flex>
                     </Item>
+                    <Item
+                        textValue='Models page to visualise your models'
+                        key={paths.models.index({})}
+                        href={paths.models.index({})}
+                    >
+                        <Flex alignItems='center' gap='size-100'>
+                            <Webhook style={iconStyles} />
+                            Models
+                        </Flex>
+                    </Item>
+                    <Item
+                        textValue='Labels page to visualise your labels'
+                        key={paths.labels.index({})}
+                        href={paths.labels.index({})}
+                    >
+                        <Flex alignItems='center' gap='size-100'>
+                            <Tag style={iconStyles} />
+                            Labels
+                        </Flex>
+                    </Item>
                 </TabList>
             </Flex>
         </View>
@@ -81,6 +108,12 @@ export const Layout = () => {
                         <Item textValue='dataset' key={paths.dataset.index({})}>
                             <Outlet />
                         </Item>
+                        <Item textValue='models' key={paths.models.index({})}>
+                            <Outlet />
+                        </Item>
+                        <Item textValue='labels' key={paths.labels.index({})}>
+                            <Outlet />
+                        </Item>
                     </TabPanels>
                 </View>
             </Grid>

ui/src/router.tsx

@@ -15,13 +15,17 @@ import { Layout } from './layout';
 import { Dataset } from './routes/dataset/dataset.component';
 import { SelectedDataProvider } from './routes/dataset/provider';
 import { Inference } from './routes/inference/inference';
+import { Labels } from './routes/labels/labels';
+import { Models } from './routes/models/models';
 import { CreateProject } from './routes/project/create-project';
 import { EditProject } from './routes/project/edit-project';
 
 const root = path('/');
 const project = root.path('/project');
 const inference = root.path('/inference');
 const dataset = root.path('/dataset');
+const models = root.path('/models');
+const labels = root.path('/labels');
 
 export const paths = {
     root,
@@ -36,6 +40,12 @@ export const paths = {
     dataset: {
         index: dataset,
     },
+    models: {
+        index: models,
+    },
+    labels: {
+        index: labels,
+    },
 };
 
 export const router = createBrowserRouter([
@@ -92,6 +102,14 @@ export const router = createBrowserRouter([
                     </ZoomProvider>
                 ),
             },
+            {
+                path: paths.models.index.pattern,
+                element: <Models />,
+            },
+            {
+                path: paths.labels.index.pattern,
+                element: <Labels />,
+            },
         ],
     },
 ]);

ui/src/routes/labels/labels.tsx

@@ -0,0 +1,6 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+export const Labels = () => {
+    return <div>Labels</div>;
+};

ui/src/routes/models/models.tsx

@@ -0,0 +1,6 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+export const Models = () => {
+    return <div>Models</div>;
+};