feat: added table

neurostuff · Sep 10, 2024 · 2e5aac8 · 2e5aac8
1 parent c5ccc42
commit 2e5aac8
Show file tree

Hide file tree

Showing 15 changed files with 497 additions and 293 deletions.
diff --git a/compose/neurosynth-frontend/package-lock.json b/compose/neurosynth-frontend/package-lock.json
diff --git a/compose/neurosynth-frontend/package.json b/compose/neurosynth-frontend/package.json
@@ -21,6 +21,7 @@
         "@mui/x-data-grid": "^5.10.0",
         "@reactour/tour": "^2.10.3",
         "@sentry/react": "^7.48.0",
+        "@tanstack/react-table": "^8.20.5",
         "@types/jest": "^26.0.24",
         "@types/react": "^17.0.13",
         "@types/react-dom": "^17.0.8",

diff --git a/compose/neurosynth-frontend/src/components/Dialogs/ConfirmationDialog.tsx b/compose/neurosynth-frontend/src/components/Dialogs/ConfirmationDialog.tsx
@@ -59,7 +59,8 @@ const ConfirmationDialog: React.FC<IConfirmationDialog> = (props) => {
                         sx={{ width: '250px' }}
                         onClick={() => props.onCloseDialog(true, props.data)}
                         variant="contained"
-                        color="success"
+                        color="primary"
+                        disableElevation
                     >
                         {props.confirmText ? props.confirmText : 'Confirm'}
                     </Button>

diff --git a/compose/neurosynth-frontend/src/components/Search/SearchContainer.tsx b/compose/neurosynth-frontend/src/components/Search/SearchContainer.tsx
@@ -18,7 +18,7 @@ export interface ISearchContainer {
     searchMode?: 'study-search' | 'project-search';
 }
 
-const getNumTotalPages = (totalCount: number | undefined, pageSize: number | undefined) => {
+export const getNumTotalPages = (totalCount: number | undefined, pageSize: number | undefined) => {
     if (!totalCount || !pageSize) {
         return 0;
     }

diff --git a/compose/neurosynth-frontend/src/pages/Extraction/ExtractionPage.tsx b/compose/neurosynth-frontend/src/pages/Extraction/ExtractionPage.tsx
@@ -1,22 +1,9 @@
-import { ArrowDropDown } from '@mui/icons-material';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 import CheckIcon from '@mui/icons-material/Check';
 import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
-import {
-    Box,
-    Button,
-    Chip,
-    MenuItem,
-    MenuList,
-    Tab,
-    Tabs,
-    TextField,
-    Typography,
-} from '@mui/material';
+import { Box, Button, Chip, Tab, Tabs, Typography } from '@mui/material';
 import NeurosynthBreadcrumbs from 'components/NeurosynthBreadcrumbs';
-import NeurosynthPopper from 'components/NeurosynthPopper/NeurosynthPopper';
 import ProjectIsLoadingText from 'components/ProjectIsLoadingText';
-import SearchSelectSortChip from 'components/Search/SearchSelectSortChip';
 import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
 import TextEdit from 'components/TextEdit/TextEdit';
 import { useGetStudysetById, useUpdateStudyset } from 'hooks';
@@ -372,8 +359,7 @@ const ExtractionPage: React.FC = (props) => {
                     onChange={(_, val) => setDesignOptions(val)}
                 >
                     <Tab value={0} label="Original design" />
-                    <Tab value={1} label="Option 1 (simple)" />
-                    <Tab value={2} label="Option 2 (tabular)" />
+                    <Tab value={1} label="Option 2 (tabular)" />
                 </Tabs>
 
                 {designOptions === 0 && (
@@ -468,91 +454,7 @@ const ExtractionPage: React.FC = (props) => {
                     </>
                 )}
 
-                {designOptions === 1 && (
-                    <Box>
-                        <Box
-                            sx={{
-                                marginBottom: '1rem',
-                            }}
-                        >
-                            {studiesDisplayed.length === 0 && (
-                                <Typography sx={{ color: 'warning.dark' }}>
-                                    No studies marked as {text}
-                                </Typography>
-                            )}
-                            <Box>
-                                <Box>
-                                    <TextField
-                                        variant="outlined"
-                                        sx={{ width: '100%' }}
-                                        placeholder="Search"
-                                    />
-                                </Box>
-                                <Box
-                                    my="1rem"
-                                    sx={{ display: 'flex', justifyContent: 'space-between' }}
-                                >
-                                    <Box>
-                                        <NeurosynthPopper
-                                            anchorElement={ref?.current}
-                                            onClickAway={() => setPopperIsOpen(false)}
-                                            open={popperIsOpen}
-                                        >
-                                            <Box>
-                                                <MenuList sx={{ width: '170px' }}>
-                                                    <MenuItem>None</MenuItem>
-                                                    <MenuItem>Uncategorized</MenuItem>
-                                                    <MenuItem>Saved for later</MenuItem>
-                                                    <MenuItem>Completed</MenuItem>
-                                                </MenuList>
-                                            </Box>
-                                        </NeurosynthPopper>
-                                        <Chip
-                                            ref={ref}
-                                            variant="filled"
-                                            clickable
-                                            onClick={() => setPopperIsOpen(true)}
-                                            icon={<ArrowDropDown />}
-                                            sx={{
-                                                width: '170px',
-                                                marginLeft: '5px',
-                                            }}
-                                            label="Select Filter"
-                                        />
-                                    </Box>
-                                    <Box>
-                                        <SearchSelectSortChip
-                                            onSelectDescOrder={() => null}
-                                            onSelectSort={() => null}
-                                            descOrderChipLabel="DESC"
-                                            searchMode="study-search"
-                                            chipLabel="Sort By"
-                                        />
-                                    </Box>
-                                </Box>
-                                <FixedSizeList
-                                    height={600}
-                                    itemCount={(studyset?.studies || []).length}
-                                    width="100%"
-                                    itemSize={140}
-                                    itemKey={(index, data) => data.studies[index]?.id || index}
-                                    itemData={{
-                                        studies: (studyset?.studies || []) as StudyReturn[],
-                                        currentSelectedChip: currentChip,
-                                        canEdit: canEdit,
-                                        studyStatusList: studyStatusList,
-                                    }}
-                                    layout="vertical"
-                                    overscanCount={3}
-                                >
-                                    {ReadOnlyStudySummaryFixedSizeListRow2}
-                                </FixedSizeList>
-                            </Box>
-                        </Box>
-                    </Box>
-                )}
-
-                {designOptions === 2 && <ExtractionTable />}
+                {designOptions === 1 && <ExtractionTable />}
             </Box>
         </StateHandlerComponent>
     );

diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.module.css b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.module.css
@@ -0,0 +1,11 @@
+.completed {
+    background-color: #e5ffe5;
+}
+
+.savedforlater {
+    background-color: #effbff;
+}
+
+.uncategorized {
+    background-color: #ffffeb;
+}