feat(inspect): Toolbar improvements (#3212)

* reorder anomaly-map

Signed-off-by: Colorado, Camilo <[email protected]>

* selection card style

Signed-off-by: Colorado, Camilo <[email protected]>

* field validations

Signed-off-by: Colorado, Camilo <[email protected]>

* disable remove source/sink when connected to a pipeline

Signed-off-by: Colorado, Camilo <[email protected]>

---------

Signed-off-by: Colorado, Camilo <[email protected]>

Author: camiloHimura

application/ui/src/components/load-more-list/load-more-list.component.tsx

@@ -11,7 +11,7 @@ type LoadMoreListProps = {
 };
 
 export const LoadMoreList = ({ children, isLoading, hasNextPage, onLoadMore }: LoadMoreListProps) => {
-    const sentinelRef = useListEnd({ onEndReached: onLoadMore, disabled: isLoading });
+    const sentinelRef = useListEnd({ onEndReached: onLoadMore, disabled: isLoading || !hasNextPage });
 
     return (
         <Flex

application/ui/src/features/inspect/models/models-view.module.scss

@@ -48,7 +48,7 @@
 }
 
 .table :global([class*='spectrum-Table']) {
-    --spectrum-table-row-background-color-selected: #0c1e29;
+    --spectrum-table-row-background-color-selected: var(--selection-dark-blue);
     --spectrum-table-background-color: var(--spectrum-global-color-gray-75);
     --spectrum-table-row-background-color-selected-hover: var(--spectrum-table-row-background-color-hover);
     --spectrum-table-row-background-color-hover: var(--spectrum-global-color-gray-300);

…ine-switch/pipeline-switch.component.tsx …ar/anomaly-map/anomaly-map.component.tsxapplication/ui/src/features/inspect/toolbar/pipeline-switch/pipeline-switch.component.tsx renamed to application/ui/src/features/inspect/toolbar/anomaly-map/anomaly-map.component.tsx application/ui/src/features/inspect/toolbar/pipeline-switch/pipeline-switch.component.tsx renamed to application/ui/src/features/inspect/toolbar/anomaly-map/anomaly-map.component.tsx

@@ -1,9 +1,9 @@
 import { usePatchPipeline, usePipeline, useProjectIdentifier } from '@geti-inspect/hooks';
 import { Flex, Switch } from '@geti/ui';
 
-import classes from './pipeline-switch.module.scss';
+import classes from './anomaly-map.module.scss';
 
-export const PipelineSwitch = () => {
+export const AnomalyMap = () => {
     const { projectId } = useProjectIdentifier();
     const patchPipeline = usePatchPipeline(projectId);
     const { data: pipeline } = usePipeline();
@@ -23,7 +23,7 @@ export const PipelineSwitch = () => {
                 isSelected={hasOverlay}
                 isDisabled={patchPipeline.isPending || isPipelineStopped}
             >
-                Overlay
+                Anomaly Map
             </Switch>
         </Flex>
     );

…eline-switch/pipeline-switch.module.scss …lbar/anomaly-map/anomaly-map.module.scssapplication/ui/src/features/inspect/toolbar/pipeline-switch/pipeline-switch.module.scss renamed to application/ui/src/features/inspect/toolbar/anomaly-map/anomaly-map.module.scss application/ui/src/features/inspect/toolbar/pipeline-switch/pipeline-switch.module.scss renamed to application/ui/src/features/inspect/toolbar/anomaly-map/anomaly-map.module.scss

@@ -8,9 +8,9 @@ import { http } from 'src/api/utils';
 import { server } from 'src/msw-node-setup';
 
 import { getMockedPipeline } from '../../../../../mocks/mock-pipeline';
-import { PipelineSwitch } from './pipeline-switch.component';
+import { AnomalyMap } from './anomaly-map.component';
 
-describe('PipelineSwitch', () => {
+describe('AnomalyMap', () => {
     const renderApp = ({ pipelineConfig = {} }: { pipelineConfig?: Partial<SchemaPipeline> } = {}) => {
         server.use(
             http.get('/api/projects/{project_id}/pipeline', () => {
@@ -25,7 +25,7 @@ describe('PipelineSwitch', () => {
             <QueryClientProvider client={new QueryClient()}>
                 <MemoryRouter initialEntries={['/projects/123/inspect']}>
                     <Routes>
-                        <Route path='/projects/:projectId/inspect' element={<PipelineSwitch />} />
+                        <Route path='/projects/:projectId/inspect' element={<AnomalyMap />} />
                     </Routes>
                 </MemoryRouter>
             </QueryClientProvider>

…pipeline-switch/pipeline-switch.test.tsx …toolbar/anomaly-map/anomaly-map.test.tsxapplication/ui/src/features/inspect/toolbar/pipeline-switch/pipeline-switch.test.tsx renamed to application/ui/src/features/inspect/toolbar/anomaly-map/anomaly-map.test.tsx application/ui/src/features/inspect/toolbar/pipeline-switch/pipeline-switch.test.tsx renamed to application/ui/src/features/inspect/toolbar/anomaly-map/anomaly-map.test.tsx

@@ -5,8 +5,6 @@ import { useProjectIdentifier } from '@geti-inspect/hooks';
 import { Item, Key, Picker, toast } from '@geti/ui';
 import { usePipeline } from 'src/hooks/use-pipeline.hook';
 
-import classes from './inference-devices.module.scss';
-
 export const InferenceDevices = () => {
     const { data } = $api.useSuspenseQuery('get', '/api/devices/inference');
     const { data: pipeline } = usePipeline();
@@ -42,16 +40,14 @@ export const InferenceDevices = () => {
 
     return (
         <Picker
-            isQuiet
-            width='auto'
+            maxWidth={'size-3000'}
             label='Inference devices: '
             aria-label='inference devices'
             labelAlign='end'
             labelPosition='side'
             items={options}
             onSelectionChange={handleChange}
             selectedKey={selectedKey}
-            UNSAFE_className={classes.picker}
         >
             {(item) => <Item>{item.name}</Item>}
         </Picker>

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

@@ -9,6 +9,7 @@
     }
 }
 
-.active {
-    border-left: var(--spectrum-global-dimension-size-50) solid var(--aqua) !important;
+.activeCard {
+    background: var(--selection-dark-blue) !important;
+    border: var(--spectrum-global-dimension-size-25) solid var(--energy-blue) !important;
 }

application/ui/src/features/inspect/toolbar/inference-devices/inference-devices.module.scss

@@ -42,7 +42,7 @@ export const ModelsList = () => {
                     height={'size-800'}
                     isPending={patchPipeline.isPending}
                     isDisabled={patchPipeline.isPending}
-                    UNSAFE_className={clsx(classes.option, { [classes.active]: model.id === selectedModelId })}
+                    UNSAFE_className={clsx(classes.option, { [classes.activeCard]: model.id === selectedModelId })}
                 >
                     {model.name}
                 </Button>

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

@@ -57,7 +57,7 @@ export const PipelineConfiguration = () => {
                             </Item>
                             <Item key='model'>
                                 <View marginTop={'size-200'}>
-                                    <Suspense fallback={<Loading size='M' />}>
+                                    <Suspense fallback={<Loading size='S' />}>
                                         <ModelsList />
                                     </Suspense>
                                 </View>