Skip to content

Commit

Permalink
some small changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ARADDCC002
ARADDCC002 committed Feb 22, 2024
1 parent 582fbd5 commit 0c1afe7
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 110 deletions.
223 changes: 113 additions & 110 deletions frontend/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
Box,
Button,
Chip,
Container,
FilledInput,
FormControl,
IconButton,
Expand Down Expand Up @@ -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>
)
}
1 change: 1 addition & 0 deletions frontend/src/MuiForms/EntitySelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down

0 comments on commit 0c1afe7

Please sign in to comment.