From 0c1afe7cd02083d90fd2bdf7eea81c874e3c85f8 Mon Sep 17 00:00:00 2001
From: araddcc002 <araddcc002@euro.ngc.com>
Date: Thu, 22 Feb 2024 17:19:56 +0000
Subject: [PATCH] some small changes

---
 frontend/pages/index.tsx                 | 223 ++++++++++++-----------
 frontend/src/MuiForms/EntitySelector.tsx |   1 +
 2 files changed, 114 insertions(+), 110 deletions(-)

diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 7481a6571..c53d1fea8 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   Chip,
+  Container,
   FilledInput,
   FormControl,
   IconButton,
@@ -81,117 +82,119 @@ function Marketplace() {
   if (error) return error
 
   return (
-    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-      <Stack spacing={2} sx={{ maxWidth: '250px' }}>
-        <Button component={Link} href='/model/new' variant='contained'>
-          Add new model
-        </Button>
-        <FormControl
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            maxWidth: '400px',
-            marginBottom: 3,
-          }}
-          variant='filled'
-          onSubmit={onFilterSubmit}
-        >
-          <InputLabel htmlFor='model-filter-input'>Filter models</InputLabel>
-          <FilledInput
-            sx={{ flex: 1, backgroundColor: theme.palette.background.paper }}
-            id='model-filter-input'
-            value={filter}
-            disableUnderline
-            onChange={handleFilterChange}
-            endAdornment={
-              <InputAdornment position='end'>
-                <IconButton color='secondary' type='submit' sx={{ p: '10px' }} aria-label='filter'>
-                  <SearchIcon />
-                </IconButton>
-              </InputAdornment>
-            }
-          />
-        </FormControl>
-        <Box>
-          <ChipSelector
-            label='Tasks'
-            // TODO fetch all model tags
-            tags={[
-              'Translation',
-              'Image Classification',
-              'Summarization',
-              'Tokenisation',
-              'Text to Speech',
-              'Tabular Regression',
-            ]}
-            expandThreshold={10}
-            selectedTags={selectedTask}
-            onChange={setSelectedTask}
-            size='small'
-          />
-        </Box>
-        <Box>
-          <ChipSelector
-            label='Libraries'
-            // TODO fetch all model libraries
-            tags={['PyTorch', 'TensorFlow', 'JAX', 'Transformers', 'ONNX', 'Safetensors', 'spaCy']}
-            expandThreshold={10}
-            multiple
-            selectedTags={selectedLibraries}
-            onChange={setSelectedLibraries}
-            size='small'
-          />
-        </Box>
-        <Box>
-          <ChipSelector
-            label='Other'
-            multiple
-            tags={[...searchFilterTypeLabels.map((type) => type.label)]}
-            onChange={handleSelectedTypesOnChange}
-            selectedTags={searchFilterTypeLabels
-              .filter((label) => selectedTypes.includes(label.key))
-              .map((type) => type.label)}
-            size='small'
-          />
+    <Container maxWidth='xl'>
+      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+        <Stack spacing={2} sx={{ maxWidth: '250px' }}>
+          <Button component={Link} href='/model/new' variant='contained'>
+            Add new model
+          </Button>
+          <FormControl
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              maxWidth: '400px',
+              marginBottom: 3,
+            }}
+            variant='filled'
+            onSubmit={onFilterSubmit}
+          >
+            <InputLabel htmlFor='model-filter-input'>Filter models</InputLabel>
+            <FilledInput
+              sx={{ flex: 1, backgroundColor: theme.palette.background.paper }}
+              id='model-filter-input'
+              value={filter}
+              disableUnderline
+              onChange={handleFilterChange}
+              endAdornment={
+                <InputAdornment position='end'>
+                  <IconButton color='secondary' type='submit' sx={{ p: '10px' }} aria-label='filter'>
+                    <SearchIcon />
+                  </IconButton>
+                </InputAdornment>
+              }
+            />
+          </FormControl>
+          <Box>
+            <ChipSelector
+              label='Tasks'
+              // TODO fetch all model tags
+              tags={[
+                'Translation',
+                'Image Classification',
+                'Summarization',
+                'Tokenisation',
+                'Text to Speech',
+                'Tabular Regression',
+              ]}
+              expandThreshold={10}
+              selectedTags={selectedTask}
+              onChange={setSelectedTask}
+              size='small'
+            />
+          </Box>
+          <Box>
+            <ChipSelector
+              label='Libraries'
+              // TODO fetch all model libraries
+              tags={['PyTorch', 'TensorFlow', 'JAX', 'Transformers', 'ONNX', 'Safetensors', 'spaCy']}
+              expandThreshold={10}
+              multiple
+              selectedTags={selectedLibraries}
+              onChange={setSelectedLibraries}
+              size='small'
+            />
+          </Box>
+          <Box>
+            <ChipSelector
+              label='Other'
+              multiple
+              tags={[...searchFilterTypeLabels.map((type) => type.label)]}
+              onChange={handleSelectedTypesOnChange}
+              selectedTags={searchFilterTypeLabels
+                .filter((label) => selectedTypes.includes(label.key))
+                .map((type) => type.label)}
+              size='small'
+            />
+          </Box>
+        </Stack>
+        <Box sx={{ overflow: 'hidden', width: '100%' }}>
+          <Paper sx={{ py: 2, px: 4 }}>
+            <Box sx={{ mb: 2, borderBottom: 1, borderColor: 'divider' }} data-test='indexPageTabs'>
+              <Tabs value={'bailo'} indicatorColor='secondary'>
+                <Tab label={`Models ${models ? `(${models.length})` : ''}`} value='bailo' />
+              </Tabs>
+            </Box>
+            <div data-test='modelListBox'>
+              {models.length === 0 && <EmptyBlob data-test='emptyModelListBlob' text='No models here' />}
+              {models.map((model, index) => {
+                return (
+                  <Fragment key={model.id}>
+                    <Link style={{ textDecoration: 'none' }} href={`model/${model.id}`} passHref>
+                      <MuiLink
+                        variant='h5'
+                        sx={{ fontWeight: '500', textDecoration: 'none', color: theme.palette.primary.main }}
+                      >
+                        {model.name}
+                      </MuiLink>
+                    </Link>
+                    <Typography variant='body1' sx={{ marginBottom: 2 }}>
+                      {model.description}
+                    </Typography>
+                    <Stack direction='row' spacing={1} sx={{ marginBottom: 2 }}>
+                      {model.tags.slice(0, 10).map((tag) => (
+                        <Chip color='secondary' key={`chip-${tag}`} label={tag} size='small' variant='outlined' />
+                      ))}
+                    </Stack>
+                    {index !== models.length - 1 && (
+                      <Box sx={{ borderBottom: 1, borderColor: 'divider', marginBottom: 2 }} />
+                    )}
+                  </Fragment>
+                )
+              })}
+            </div>
+          </Paper>
         </Box>
       </Stack>
-      <Box sx={{ width: '100%' }}>
-        <Paper sx={{ py: 2, px: 4 }}>
-          <Box sx={{ mb: 2, borderBottom: 1, borderColor: 'divider' }} data-test='indexPageTabs'>
-            <Tabs value={'bailo'} indicatorColor='secondary'>
-              <Tab label={`Models ${models ? `(${models.length})` : ''}`} value='bailo' />
-            </Tabs>
-          </Box>
-          <div data-test='modelListBox'>
-            {models.length === 0 && <EmptyBlob data-test='emptyModelListBlob' text='No models here' />}
-            {models.map((model, index) => {
-              return (
-                <Fragment key={model.id}>
-                  <Link style={{ textDecoration: 'none' }} href={`model/${model.id}`} passHref>
-                    <MuiLink
-                      variant='h5'
-                      sx={{ fontWeight: '500', textDecoration: 'none', color: theme.palette.primary.main }}
-                    >
-                      {model.name}
-                    </MuiLink>
-                  </Link>
-                  <Typography variant='body1' sx={{ marginBottom: 2 }}>
-                    {model.description}
-                  </Typography>
-                  <Stack direction='row' spacing={1} sx={{ marginBottom: 2 }}>
-                    {model.tags.map((tag) => (
-                      <Chip color='secondary' key={`chip-${tag}`} label={tag} size='small' variant='outlined' />
-                    ))}
-                  </Stack>
-                  {index !== models.length - 1 && (
-                    <Box sx={{ borderBottom: 1, borderColor: 'divider', marginBottom: 2 }} />
-                  )}
-                </Fragment>
-              )
-            })}
-          </div>
-        </Paper>
-      </Box>
-    </Stack>
+    </Container>
   )
 }
diff --git a/frontend/src/MuiForms/EntitySelector.tsx b/frontend/src/MuiForms/EntitySelector.tsx
index 755f38d5e..b18e41460 100644
--- a/frontend/src/MuiForms/EntitySelector.tsx
+++ b/frontend/src/MuiForms/EntitySelector.tsx
@@ -93,6 +93,7 @@ export default function EntitySelector(props: EntitySelectorProps) {
           isOptionEqualToValue={(option, value) => option.id === value.id}
           getOptionLabel={(option) => option.id}
           value={selectedEntities || []}
+          filterOptions={(x) => x}
           onChange={handleUserChange}
           noOptionsText={userListQuery.length < 3 ? 'Please enter at least three characters' : 'No options'}
           onInputChange={debounceOnInputChange}