fix: address feedback

neurostuff · Sep 23, 2024 · b373fae · b373fae
1 parent e148f63
commit b373fae
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 64 deletions.
diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx
@@ -37,7 +37,6 @@ import { useNavigate } from 'react-router-dom';
 import { EExtractionStatus } from '../ExtractionPage';
 import styles from './ExtractionTable.module.css';
 import { ExtractionTableAuthorCell, ExtractionTableAuthorHeader } from './ExtractionTableAuthor';
-import { ExtractionTableDOICell, ExtractionTableDOIHeader } from './ExtractionTableDOI';
 import ExtractionTableFilterInput from './ExtractionTableFilterInput';
 import { ExtractionTableJournalCell, ExtractionTableJournalHeader } from './ExtractionTableJournal';
 import { ExtractionTableNameCell, ExtractionTableNameHeader } from './ExtractionTableName';
@@ -106,9 +105,9 @@ const ExtractionTable: React.FC = () => {
         return [
             columnHelper.accessor(({ year }) => (year ? String(year) : ''), {
                 id: 'year',
-                size: 5,
-                minSize: 5,
-                maxSize: 5,
+                size: 70,
+                minSize: 70,
+                maxSize: 70,
                 cell: ExtractionTableYearCell,
                 header: ExtractionTableYearHeader,
                 enableSorting: true,
@@ -121,9 +120,9 @@ const ExtractionTable: React.FC = () => {
             columnHelper.accessor('name', {
                 id: 'name',
                 cell: ExtractionTableNameCell,
-                size: 25,
-                minSize: 25,
-                maxSize: 25,
+                size: 500,
+                minSize: 500,
+                maxSize: 500,
                 header: ExtractionTableNameHeader,
                 enableSorting: true,
                 sortingFn: 'text',
@@ -134,9 +133,9 @@ const ExtractionTable: React.FC = () => {
             }),
             columnHelper.accessor('authors', {
                 id: 'authors',
-                size: 20,
-                minSize: 20,
-                maxSize: 20,
+                size: 300,
+                minSize: 300,
+                maxSize: 300,
                 enableSorting: true,
                 enableColumnFilter: true,
                 sortingFn: 'text',
@@ -149,9 +148,9 @@ const ExtractionTable: React.FC = () => {
             }),
             columnHelper.accessor('publication', {
                 id: 'journal',
-                size: 15,
-                minSize: 15,
-                maxSize: 15,
+                size: 100,
+                minSize: 100,
+                maxSize: 100,
                 enableSorting: true,
                 enableColumnFilter: true,
                 cell: ExtractionTableJournalCell,
@@ -160,26 +159,26 @@ const ExtractionTable: React.FC = () => {
                     filterVariant: 'journal-autocomplete',
                 },
             }),
-            columnHelper.accessor('doi', {
-                id: 'doi',
-                size: 15,
-                minSize: 15,
-                maxSize: 15,
-                sortingFn: 'alphanumeric',
-                enableSorting: true,
-                enableColumnFilter: true,
-                filterFn: 'includesString',
-                cell: ExtractionTableDOICell,
-                header: ExtractionTableDOIHeader,
-                meta: {
-                    filterVariant: 'text',
-                },
-            }),
+            // columnHelper.accessor('doi', {
+            //     id: 'doi',
+            //     size: 10,
+            //     minSize: 10,
+            //     maxSize: 10,
+            //     sortingFn: 'alphanumeric',
+            //     enableSorting: true,
+            //     enableColumnFilter: true,
+            //     filterFn: 'includesString',
+            //     cell: ExtractionTableDOICell,
+            //     header: ExtractionTableDOIHeader,
+            //     meta: {
+            //         filterVariant: 'text',
+            //     },
+            // }),
             columnHelper.accessor('pmid', {
                 id: 'pmid',
-                size: 10,
-                minSize: 10,
-                maxSize: 10,
+                size: 100,
+                minSize: 100,
+                maxSize: 100,
                 enableColumnFilter: true,
                 filterFn: 'includesString',
                 cell: ExtractionTablePMIDCell,
@@ -192,9 +191,9 @@ const ExtractionTable: React.FC = () => {
             }),
             columnHelper.accessor('status', {
                 id: 'status',
-                size: 10,
-                minSize: 10,
-                maxSize: 10,
+                size: 120,
+                minSize: 120,
+                maxSize: 120,
                 enableSorting: true,
                 cell: ExtractionTableStatusCell,
                 filterFn: (row, columnId, filterValue: EExtractionStatus | null) => {
@@ -270,20 +269,16 @@ const ExtractionTable: React.FC = () => {
                     onChange={handlePaginationChangeMuiPaginator}
                     page={pagination.pageIndex + 1}
                 />
-                <Typography variant="h5">Total: {data.length} studies</Typography>
             </Box>
             <TableContainer sx={{ marginBottom: '2rem' }}>
-                <Table
-                    size="small"
-                    sx={{ tableLayout: 'fixed', width: '100%', minWidth: '1300px' }}
-                >
+                <Table size="small">
                     <TableHead>
                         {table.getHeaderGroups().map((headerGroup) => (
                             <TableRow key={headerGroup.id}>
                                 {headerGroup.headers.map((header) => (
                                     <TableCell
                                         key={header.id}
-                                        sx={{ width: `${header.column.getSize()}%` }}
+                                        sx={{ maxWidth: `${header.column.getSize()}px` }}
                                     >
                                         <Box>
                                             {flexRender(
@@ -416,7 +411,14 @@ const ExtractionTable: React.FC = () => {
                     </Box>
                     <Box>
                         <Typography sx={{ whiteSpace: 'nowrap' }}>
-                            Viewing {table.getFilteredRowModel().rows.length} / {data.length}
+                            {columnFilters.length > 0 ? (
+                                <Typography>
+                                    Viewing {table.getFilteredRowModel().rows.length} /{' '}
+                                    {data.length}
+                                </Typography>
+                            ) : (
+                                <Typography>Total: {data.length} studies</Typography>
+                            )}
                         </Typography>
                     </Box>
                 </Box>

diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableAuthor.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableAuthor.tsx
@@ -33,19 +33,27 @@ export const ExtractionTableAuthorHeader: React.FC<
                             }
                         }}
                     >
-                        <ArrowDownward sx={{ color: 'lightgray' }} />
+                        <ArrowDownward
+                            sx={{ width: '0.9em', height: '0.9em', color: 'lightgray' }}
+                        />
                     </IconButton>
                 </Tooltip>
             ) : isSorted === 'asc' ? (
                 <IconButton size="small" onClick={() => table.resetSorting()}>
-                    <ArrowUpwardIcon sx={{ color: 'secondary.main' }} />
+                    sx={{ width: '' }}
+                    <ArrowUpwardIcon
+                        sx={{ width: '0.9em', height: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             ) : (
                 <IconButton
                     size="small"
+                    sx={{ width: '' }}
                     onClick={() => table.setSorting([{ id: 'authors', desc: false }])}
                 >
-                    <ArrowDownward sx={{ color: 'secondary.main' }} />
+                    <ArrowDownward
+                        sx={{ width: '0.9em', height: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             )}
         </Box>

diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableDOI.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableDOI.tsx
@@ -37,19 +37,25 @@ export const ExtractionTableDOIHeader: React.FC<HeaderContext<IExtractionTableSt
                             }
                         }}
                     >
-                        <ArrowDownward sx={{ color: 'lightgray' }} />
+                        <ArrowDownward
+                            sx={{ height: '0.9em', width: '0.9em', color: 'lightgray' }}
+                        />
                     </IconButton>
                 </Tooltip>
             ) : isSorted === 'asc' ? (
                 <IconButton size="small" onClick={() => table.resetSorting()}>
-                    <ArrowUpwardIcon sx={{ color: 'secondary.main' }} />
+                    <ArrowUpwardIcon
+                        sx={{ height: '0.9em', width: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             ) : (
                 <IconButton
                     size="small"
                     onClick={() => table.setSorting([{ id: 'doi', desc: false }])}
                 >
-                    <ArrowDownward sx={{ color: 'secondary.main' }} />
+                    <ArrowDownward
+                        sx={{ height: '0.9em', width: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             )}
         </Box>

diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableFilterInput.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableFilterInput.tsx
@@ -41,7 +41,7 @@ const ExtractionTableFilterInput: React.FC<{
             <Box sx={{ marginTop: '4px' }}>
                 <DebouncedTextField
                     size="small"
-                    placeholder="filter by..."
+                    placeholder="filter"
                     sx={{ width: '100%' }}
                     onChange={handleChangeAutocomplete}
                     value={columnFilterValue as string}

diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableJournal.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableJournal.tsx
@@ -32,19 +32,25 @@ export const ExtractionTableJournalHeader: React.FC<
                             }
                         }}
                     >
-                        <ArrowDownward sx={{ color: 'lightgray' }} />
+                        <ArrowDownward
+                            sx={{ height: '0.9em', width: '0.9em', color: 'lightgray' }}
+                        />
                     </IconButton>
                 </Tooltip>
             ) : isSorted === 'asc' ? (
                 <IconButton size="small" onClick={() => table.resetSorting()}>
-                    <ArrowUpwardIcon sx={{ color: 'secondary.main' }} />
+                    <ArrowUpwardIcon
+                        sx={{ height: '0.9em', width: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             ) : (
                 <IconButton
                     size="small"
                     onClick={() => table.setSorting([{ id: 'journal', desc: false }])}
                 >
-                    <ArrowDownward sx={{ color: 'secondary.main' }} />
+                    <ArrowDownward
+                        sx={{ height: '0.9em', width: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             )}
         </Box>

diff --git a/...eurosynth-frontend/src/pages/Extraction/components/ExtractionTableJournalAutocomplete.tsx b/...eurosynth-frontend/src/pages/Extraction/components/ExtractionTableJournalAutocomplete.tsx
@@ -31,7 +31,7 @@ const ExtractionTableJournalAutocomplete: React.FC<{
         <Box sx={{ marginTop: '4px' }}>
             <Autocomplete
                 size="small"
-                renderInput={(params) => <TextField {...params} placeholder="filter by..." />}
+                renderInput={(params) => <TextField {...params} placeholder="filter" />}
                 onChange={handleChange}
                 value={value || null}
                 options={options}

diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableName.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableName.tsx
@@ -37,19 +37,25 @@ export const ExtractionTableNameHeader: React.FC<HeaderContext<IExtractionTableS
                             }
                         }}
                     >
-                        <ArrowDownward sx={{ color: 'lightgray' }} />
+                        <ArrowDownward
+                            sx={{ height: '0.9em', width: '0.9em', color: 'lightgray' }}
+                        />
                     </IconButton>
                 </Tooltip>
             ) : isSorted === 'asc' ? (
                 <IconButton size="small" onClick={() => table.resetSorting()}>
-                    <ArrowUpwardIcon sx={{ color: 'secondary.main' }} />
+                    <ArrowUpwardIcon
+                        sx={{ height: '0.9em', width: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             ) : (
                 <IconButton
                     size="small"
                     onClick={() => table.setSorting([{ id: 'name', desc: false }])}
                 >
-                    <ArrowDownward sx={{ color: 'secondary.main' }} />
+                    <ArrowDownward
+                        sx={{ height: '0.9em', width: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             )}
         </Box>

diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTablePMID.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTablePMID.tsx
@@ -33,19 +33,25 @@ export const ExtractionTablePMIDHeader: React.FC<HeaderContext<IExtractionTableS
                             }
                         }}
                     >
-                        <ArrowDownward sx={{ color: 'lightgray' }} />
+                        <ArrowDownward
+                            sx={{ height: '0.9em', width: '0.9em', color: 'lightgray' }}
+                        />
                     </IconButton>
                 </Tooltip>
             ) : isSorted === 'asc' ? (
                 <IconButton size="small" onClick={() => table.resetSorting()}>
-                    <ArrowUpwardIcon sx={{ color: 'secondary.main' }} />
+                    <ArrowUpwardIcon
+                        sx={{ height: '0.9em', width: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             ) : (
                 <IconButton
                     size="small"
                     onClick={() => table.setSorting([{ id: 'pmid', desc: false }])}
                 >
-                    <ArrowDownward sx={{ color: 'secondary.main' }} />
+                    <ArrowDownward
+                        sx={{ height: '0.9em', width: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             )}
         </Box>

diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableStatus.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableStatus.tsx
@@ -28,6 +28,7 @@ export const ExtractionTableStatusCell: React.FC<
                     disableElevation
                     sx={{ paddingX: '0' }}
                     color="warning"
+                    size="small"
                     variant={
                         status === undefined || status === EExtractionStatus.UNCATEGORIZED
                             ? 'contained'
@@ -47,6 +48,7 @@ export const ExtractionTableStatusCell: React.FC<
                     disableElevation
                     sx={{ paddingX: '0' }}
                     color="info"
+                    size="small"
                     variant={status === EExtractionStatus.SAVEDFORLATER ? 'contained' : 'outlined'}
                 >
                     <BookmarkIcon />
@@ -62,6 +64,7 @@ export const ExtractionTableStatusCell: React.FC<
                     disableElevation
                     sx={{ paddingX: '0' }}
                     color="success"
+                    size="small"
                     variant={status === EExtractionStatus.COMPLETED ? 'contained' : 'outlined'}
                 >
                     <CheckCircle />
@@ -92,19 +95,25 @@ export const ExtractionTableStatusHeader: React.FC<
                             }
                         }}
                     >
-                        <ArrowDownward sx={{ color: 'lightgray' }} />
+                        <ArrowDownward
+                            sx={{ height: '0.9em', width: '0.9em', color: 'lightgray' }}
+                        />
                     </IconButton>
                 </Tooltip>
             ) : isSorted === 'asc' ? (
                 <IconButton size="small" onClick={() => table.resetSorting()}>
-                    <ArrowUpwardIcon sx={{ color: 'secondary.main' }} />
+                    <ArrowUpwardIcon
+                        sx={{ height: '0.9em', width: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             ) : (
                 <IconButton
                     size="small"
                     onClick={() => table.setSorting([{ id: 'status', desc: false }])}
                 >
-                    <ArrowDownward sx={{ color: 'secondary.main' }} />
+                    <ArrowDownward
+                        sx={{ height: '0.9em', width: '0.9em', color: 'secondary.main' }}
+                    />
                 </IconButton>
             )}
         </Box>