1084 allow selecting multiple ai categories from dropdown (#1092)

* feat: for table filters, open options by default and persist input

* feat: removed unused properties and moved chips to top of table

Author: nicoalee

compose/neurosynth-frontend/src/pages/Curation/components/CurationBoardAIInterfaceCuratorTable.tsx

@@ -122,6 +122,44 @@ const CurationBoardAIInterfaceCuratorTable: React.FC<ICurationBoardAIInterfaceCu
                     allowAIColumns={prismaPhase !== 'identification'}
                 />
             </Box>
+            <Box
+                sx={{
+                    maxWidth: '100%',
+                    width: '100%',
+                    overflow: 'hidden',
+                }}
+            >
+                <Box sx={{ display: 'flex', overflowX: 'scroll', scrollbarColor: '#c1c1c1 white' }}>
+                    {columnFilters
+                        .filter((filter) => !!filter.value)
+                        .map((filter) => (
+                            <Chip
+                                onDelete={() =>
+                                    table.setColumnFilters((prev) => prev.filter((f) => f.id !== filter.id))
+                                }
+                                key={filter.id}
+                                variant="outlined"
+                                color="secondary"
+                                sx={{ margin: '0px 2px', fontSize: '10px', maxWidth: '200px', height: '18px' }}
+                                label={`Filtering ${filter.id.toUpperCase()}: ${filter.value}`}
+                                size="small"
+                            />
+                        ))}
+                    {sorting.map((sort) => (
+                        <Chip
+                            key={sort.id}
+                            onDelete={() => {
+                                table.setSorting((prev) => prev.filter((f) => f.id !== sort.id));
+                            }}
+                            variant="filled"
+                            color="secondary"
+                            sx={{ margin: '0px 2px', fontSize: '10px', maxWidth: '200px', height: '18px' }}
+                            label={`Sorting by ${sort.id.toUpperCase()}: ${sort.desc ? 'desc' : 'asc'}`}
+                            size="small"
+                        />
+                    ))}
+                </Box>
+            </Box>
             <TableContainer
                 ref={tableContainerRef}
                 id="scroller"
@@ -181,44 +219,6 @@ const CurationBoardAIInterfaceCuratorTable: React.FC<ICurationBoardAIInterfaceCu
                     </Typography>
                 )}
             </TableContainer>
-            <Box
-                sx={{
-                    maxWidth: '100%',
-                    width: '100%',
-                    overflow: 'hidden',
-                }}
-            >
-                <Box sx={{ display: 'flex', overflowX: 'scroll', scrollbarColor: '#c1c1c1 white' }}>
-                    {columnFilters
-                        .filter((filter) => !!filter.value)
-                        .map((filter) => (
-                            <Chip
-                                onDelete={() =>
-                                    table.setColumnFilters((prev) => prev.filter((f) => f.id !== filter.id))
-                                }
-                                key={filter.id}
-                                variant="outlined"
-                                color="secondary"
-                                sx={{ margin: '0px 2px', fontSize: '10px', maxWidth: '200px', height: '18px' }}
-                                label={`Filtering ${filter.id.toUpperCase()}: ${filter.value}`}
-                                size="small"
-                            />
-                        ))}
-                    {sorting.map((sort) => (
-                        <Chip
-                            key={sort.id}
-                            onDelete={() => {
-                                table.setSorting((prev) => prev.filter((f) => f.id !== sort.id));
-                            }}
-                            variant="filled"
-                            color="secondary"
-                            sx={{ margin: '0px 2px', fontSize: '10px', maxWidth: '200px', height: '18px' }}
-                            label={`Sorting by ${sort.id.toUpperCase()}: ${sort.desc ? 'desc' : 'asc'}`}
-                            size="small"
-                        />
-                    ))}
-                </Box>
-            </Box>
         </Box>
     );
 };

compose/neurosynth-frontend/src/pages/Curation/components/CurationBoardAIInterfaceCuratorTableHeaderFilterNestedAutocomplete.tsx

@@ -1,6 +1,6 @@
-import { Autocomplete, Box, ListItem, ListItemText, TextField } from '@mui/material';
+import { Autocomplete, Box, Chip, ListItem, ListItemText, TextField } from '@mui/material';
 import { AccessorFn, Row } from '@tanstack/react-table';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { flattenColumnValues } from '../hooks/useCuratorTableState.helpers';
 import { ICurationTableColumnType, ICurationTableStudy } from '../hooks/useCuratorTableState.types';
 
@@ -10,6 +10,8 @@ const CurationBoardAIInterfaceCuratorTableHeaderFilterNestedAutocomplete: React.
     value: string[] | undefined;
     onChange: (newVal: string[] | undefined) => void;
 }> = ({ rows, onChange, value, accessorFn }) => {
+    const [inputValue, setInputValue] = useState('');
+
     // note that for this data, we only expect column data to be a string or an object
     const uniqueValuesForColumn = useMemo(() => {
         if (!accessorFn) return [];
@@ -34,25 +36,36 @@ const CurationBoardAIInterfaceCuratorTableHeaderFilterNestedAutocomplete: React.
     }, [accessorFn, rows]);
 
     return (
-        <Box sx={{ padding: '0.5rem' }}>
+        <Box>
             <Autocomplete
                 size="small"
+                open
                 renderInput={(params) => (
-                    <TextField
-                        {...params}
-                        sx={{
-                            width: '200px',
-                            input: { fontSize: '12px' },
-                        }}
-                        placeholder="filter"
-                    />
+                    <TextField {...params} sx={{ width: '200px', input: { fontSize: '12px' } }} placeholder="filter" />
                 )}
                 onChange={(_event, value) => {
                     onChange(value.length === 0 ? undefined : value);
                 }}
                 value={value || []}
+                inputValue={inputValue}
+                onInputChange={(event, value, reason) => {
+                    if (event && event.type === 'blur') {
+                        setInputValue('');
+                    } else if (reason !== 'reset') {
+                        setInputValue(value);
+                    }
+                }}
                 options={uniqueValuesForColumn}
                 multiple
+                slotProps={{
+                    popper: { disablePortal: true },
+                    paper: { sx: { fontSize: '12px' } },
+                }}
+                renderTags={(value, getTagProps) =>
+                    value.map((option, index) => (
+                        <Chip label={option} sx={{ fontSize: '12px' }} size="small" {...getTagProps({ index })} />
+                    ))
+                }
                 renderOption={(props, option) => (
                     <ListItem {...props} key={option}>
                         <ListItemText primary={option} primaryTypographyProps={{ fontSize: '12px' }} />