feat: update with feedback

compose/neurosynth-frontend/src/components/NeurosynthBreadcrumbs.tsx

@@ -60,7 +60,7 @@ const NeurosynthBreadcrumbs: React.FC<{ breadcrumbItems: INeurosynthBreadcrumbs[
                                 color="secondary"
                                 variant="h6"
                                 sx={{
-                                    maxWidth: '300px',
+                                    maxWidth: '200px',
                                     textOverflow: 'ellipsis',
                                     display: 'block',
                                     overflow: 'hidden',
@@ -81,7 +81,7 @@ const NeurosynthBreadcrumbs: React.FC<{ breadcrumbItems: INeurosynthBreadcrumbs[
                                 sx={{
                                     fontSize: '1.25rem',
                                     cursor: 'pointer',
-                                    maxWidth: '300px',
+                                    maxWidth: '200px',
                                     textOverflow: 'ellipsis',
                                     display: 'block',
                                     overflow: 'hidden',

compose/neurosynth-frontend/src/pages/Extraction/ExtractionPage.tsx

@@ -15,7 +15,6 @@ import {
     useInitProjectStoreIfRequired,
     useProjectCurationColumns,
     useProjectExtractionStudysetId,
-    useProjectMetaAnalysisCanEdit,
     useProjectName,
     useProjectUser,
 } from 'pages/Project/store/ProjectStore';
@@ -40,7 +39,6 @@ const ExtractionPage: React.FC = (props) => {
     const columns = useProjectCurationColumns();
     const loading = useGetProjectIsLoading();
     const extractionSummary = useGetExtractionSummary(projectId || '');
-    const canEditMetaAnalyses = useProjectMetaAnalysisCanEdit();
     const projectUser = useProjectUser();
     const canEdit = useUserCanEdit(projectUser || undefined);
 
@@ -140,31 +138,19 @@ const ExtractionPage: React.FC = (props) => {
                     </Box>
                     <Box>
                         <Button
-                            sx={{ fontSize: '0.7rem' }}
                             color="secondary"
                             variant="contained"
                             disableElevation
-                            size="small"
                             onClick={() =>
                                 navigate(`/projects/${projectId}/extraction/annotations`)
                             }
                         >
-                            View Annotations
-                        </Button>
-                        <Button
-                            sx={{ marginLeft: '4px', fontSize: '0.7rem' }}
-                            size="small"
-                            color="info"
-                            variant="contained"
-                            disableElevation
-                        >
-                            Mark all as complete
+                            Annotations
                         </Button>
                         <Tooltip title={`${percentageCompleteString} marked as complete`}>
                             <span style={{ width: '100%' }}>
                                 <Button
-                                    size="small"
-                                    sx={{ marginLeft: '4px', fontSize: '0.7rem' }}
+                                    sx={{ marginLeft: '4px' }}
                                     onClick={handleMoveToSpecificationPhase}
                                     color="success"
                                     variant="contained"
@@ -180,7 +166,7 @@ const ExtractionPage: React.FC = (props) => {
                     </Box>
                 </Box>
                 {showReconcilePrompt && <ExtractionOutOfSync />}
-                <Box>
+                <Box sx={{ flexGrow: 1 }}>
                     <Box>
                         <TextEdit
                             editIconIsVisible={canEdit}

compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx

@@ -1,5 +1,6 @@
 import {
     Box,
+    Button,
     Chip,
     Pagination,
     Table,
@@ -28,6 +29,7 @@ import { useGetStudysetById } from 'hooks';
 import { IStudyExtractionStatus } from 'hooks/projects/useGetProjects';
 import { StudyReturn } from 'neurostore-typescript-sdk';
 import {
+    useProjectExtractionSetGivenStudyStatusesAsComplete,
     useProjectExtractionStudysetId,
     useProjectExtractionStudyStatusList,
     useProjectId,
@@ -44,6 +46,7 @@ import { ExtractionTablePMIDCell, ExtractionTablePMIDHeader } from './Extraction
 import { ExtractionTableStatusCell, ExtractionTableStatusHeader } from './ExtractionTableStatus';
 import { ExtractionTableYearCell, ExtractionTableYearHeader } from './ExtractionTableYear';
 import { retrieveExtractionTableState } from './ExtractionTable.helpers';
+import ConfirmationDialog from 'components/Dialogs/ConfirmationDialog';
 
 //allows us to define custom properties for our columns
 declare module '@tanstack/react-table' {
@@ -63,11 +66,13 @@ const ExtractionTable: React.FC = () => {
     const navigate = useNavigate();
     const studyStatusList = useProjectExtractionStudyStatusList();
     const { data: studyset } = useGetStudysetById(studysetId, true); // this should already be loaded in the cache from the parent component
+    const setGivenStudyStatusesAsComplete = useProjectExtractionSetGivenStudyStatusesAsComplete();
 
     const [pagination, setPagination] = useState<PaginationState>({
         pageIndex: 0,
         pageSize: 25,
     });
+    const [confirmationDialogIsOpen, setConfirmationDialogIsOpen] = useState(false);
 
     useEffect(() => {
         const state = retrieveExtractionTableState(projectId);
@@ -100,9 +105,9 @@ const ExtractionTable: React.FC = () => {
         return [
             columnHelper.accessor(({ year }) => (year ? String(year) : ''), {
                 id: 'year',
-                size: 70,
-                minSize: 70,
-                maxSize: 70,
+                size: 60,
+                minSize: 60,
+                maxSize: 60,
                 cell: ExtractionTableYearCell,
                 header: ExtractionTableYearHeader,
                 enableSorting: true,
@@ -128,9 +133,9 @@ const ExtractionTable: React.FC = () => {
             }),
             columnHelper.accessor('authors', {
                 id: 'authors',
-                size: 300,
-                minSize: 300,
-                maxSize: 300,
+                size: 100,
+                minSize: 100,
+                maxSize: 100,
                 enableSorting: true,
                 enableColumnFilter: true,
                 sortingFn: 'text',
@@ -156,9 +161,9 @@ const ExtractionTable: React.FC = () => {
             }),
             columnHelper.accessor('pmid', {
                 id: 'pmid',
-                size: 100,
-                minSize: 100,
-                maxSize: 100,
+                size: 80,
+                minSize: 80,
+                maxSize: 80,
                 enableColumnFilter: true,
                 filterFn: 'includesString',
                 cell: ExtractionTablePMIDCell,
@@ -222,6 +227,18 @@ const ExtractionTable: React.FC = () => {
         []
     );
 
+    const handleMarkAllAsComplete = useCallback(
+        (ok: boolean | undefined) => {
+            if (ok) {
+                const studies = (studyset?.studies || []) as Array<StudyReturn>;
+                setGivenStudyStatusesAsComplete(studies.map((x) => x.id) as string[]);
+            }
+
+            setConfirmationDialogIsOpen(false);
+        },
+        [setGivenStudyStatusesAsComplete, studyset?.studies]
+    );
+
     const handlePaginationChange = useCallback((_event: any, page: number) => {
         // page is 0 indexed
         setPagination((prev) => ({
@@ -249,11 +266,29 @@ const ExtractionTable: React.FC = () => {
                     onChange={handlePaginationChangeMuiPaginator}
                     page={pagination.pageIndex + 1}
                 />
+                <Box sx={{ width: '271px', display: 'flex', justifyContent: 'flex-end' }}>
+                    <ConfirmationDialog
+                        onCloseDialog={handleMarkAllAsComplete}
+                        rejectText="Cancel"
+                        confirmText="Mark all as complete"
+                        isOpen={confirmationDialogIsOpen}
+                        dialogTitle="Are you sure you want to mark all the studies as complete?"
+                        dialogMessage="You can skip reviewing to expedite the process, but any studies you have not reviewed may have incomplete or inaccurate metadata or coordinates."
+                    />
+                    <Button
+                        sx={{ marginLeft: '4px' }}
+                        color="success"
+                        disableElevation
+                        onClick={() => setConfirmationDialogIsOpen(true)}
+                    >
+                        Mark all as complete
+                    </Button>
+                </Box>
             </Box>
             <TableContainer sx={{ marginBottom: '2rem' }}>
                 <Table
                     size="small"
-                    sx={{ tableLayout: 'fixed', width: 'fit-content', minWidth: '1200px' }}
+                    sx={{ tableLayout: 'fixed', width: 'fit-content', minWidth: '800px' }}
                 >
                     <TableHead>
                         {table.getHeaderGroups().map((headerGroup) => (

compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableAuthor.tsx

@@ -8,7 +8,16 @@ export const ExtractionTableAuthorCell: React.FC<CellContext<IExtractionTableStu
     props
 ) => {
     const value = props.getValue();
-    return <Typography variant="body2">{value}</Typography>;
+    let shortName = value;
+    const authorsList = (value || '').split(',');
+    if (authorsList.length > 1) {
+        shortName = `${authorsList[0]}., et al.`;
+    }
+    return (
+        <Tooltip title={value ? <Typography variant="body2">{value}</Typography> : null}>
+            <Typography variant="body2">{shortName}</Typography>
+        </Tooltip>
+    );
 };
 
 export const ExtractionTableAuthorHeader: React.FC<

compose/neurosynth-frontend/src/pages/Project/components/ProjectExtractionStepCard.tsx

@@ -141,7 +141,7 @@ const ProjectExtractionStepCard: React.FC<{ disabled: boolean }> = ({ disabled }
                                 display: allStudiesAreComplete ? 'none' : 'block',
                             }}
                             onClick={() => setMarkAllAsCompleteConfirmationDialogIsOpen(true)}
-                            color="info"
+                            color="success"
                             disabled={disabled}
                         >
                             Mark all as complete

compose/neurosynth-frontend/src/pages/Study/EditStudyPage.tsx

@@ -87,44 +87,47 @@ const EditStudyPage: React.FC = (props) => {
                 !studyStoreId || !annotationStoreId || getStudyIsLoading || getAnnotationIsLoading
             }
         >
-            <EditStudyPageHeader />
-            <EditStudyAnnotations />
-            <EditStudyAnalyses />
-            <EditStudyDetails />
-            <Box sx={{ marginBottom: '5rem' }}>
-                <EditStudyMetadata />
-            </Box>
-            <Box sx={EditStudyPageStyles.loadingButtonContainer}>
-                <Box sx={{ width: '20%', justifyContent: 'flex-start' }}>
-                    <ConfirmationDialog
-                        isOpen={confirmationDialogIsOpen}
-                        dialogTitle="You have unsaved changes"
-                        dialogMessage="Are you sure you want to continue? You'll lose your unsaved changes"
-                        onCloseDialog={handleCloseConfirmationDialog}
-                        rejectText="Cancel"
-                        confirmText="Continue"
-                    />
-                    <Button
-                        color="secondary"
-                        disableElevation
-                        sx={{ width: '200px' }}
-                        variant="contained"
-                        onClick={handleBackToExtraction}
-                    >
-                        Back to extraction
-                    </Button>
+            <Box>
+                <EditStudyPageHeader />
+                <EditStudyAnnotations />
+                <EditStudyAnalyses />
+                <EditStudyDetails />
+                <Box sx={{ marginBottom: '5rem' }}>
+                    <EditStudyMetadata />
                 </Box>
-                <Box
-                    sx={{
-                        width: '60%',
-                        display: 'flex',
-                        justifyContent: 'center',
-                    }}
-                >
-                    <DisplayExtractionTableState />
-                </Box>
-                <Box sx={{ width: '20%', display: 'flex', justifyContent: 'flex-end' }}>
-                    <EditStudyCompleteButton />
+                <Box sx={[EditStudyPageStyles.loadingButtonContainer]}>
+                    <Box sx={{ width: '20%', justifyContent: 'flex-start' }}>
+                        <ConfirmationDialog
+                            isOpen={confirmationDialogIsOpen}
+                            dialogTitle="You have unsaved changes"
+                            dialogMessage="Are you sure you want to continue? You'll lose your unsaved changes"
+                            onCloseDialog={handleCloseConfirmationDialog}
+                            rejectText="Cancel"
+                            confirmText="Continue"
+                        />
+                        <Button
+                            color="secondary"
+                            disableElevation
+                            size="small"
+                            sx={{ width: '160px' }}
+                            variant="contained"
+                            onClick={handleBackToExtraction}
+                        >
+                            Back to extraction
+                        </Button>
+                    </Box>
+                    <Box
+                        sx={{
+                            width: '60%',
+                            display: 'flex',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <DisplayExtractionTableState />
+                    </Box>
+                    <Box sx={{ width: '20%', display: 'flex', justifyContent: 'flex-end' }}>
+                        <EditStudyCompleteButton />
+                    </Box>
                 </Box>
             </Box>
         </StateHandlerComponent>

compose/neurosynth-frontend/src/pages/Study/components/DisplayExtractionTableState.tsx

@@ -135,8 +135,9 @@ const DisplayExtractionTableState: React.FC = (props) => {
                         <Typography
                             sx={{
                                 textOverflow: 'ellipsis',
-                                maxWidth: '200px',
-                                width: '200px',
+                                maxWidth: '100px',
+                                width: '100px',
+                                fontSize: '8px',
                                 whiteSpace: 'nowrap',
                                 overflow: 'hidden',
                                 textAlign: 'start',
@@ -148,7 +149,7 @@ const DisplayExtractionTableState: React.FC = (props) => {
                     </Button>
                 </Tooltip>
             ) : (
-                <Box sx={{ width: '200px' }}></Box>
+                <Box sx={{ width: '100px' }}></Box>
             )}
             <Tooltip
                 title={
@@ -176,13 +177,13 @@ const DisplayExtractionTableState: React.FC = (props) => {
                         alignItems: 'center',
                     }}
                 >
-                    <Typography sx={{ display: 'block' }} variant="caption">
+                    <Typography sx={{ display: 'block', fontSize: '10px' }}>
                         {thisStudyIndex + 1} of {(extractionTableState?.studies || []).length}
                         <span style={{ color: 'gray', marginLeft: '4px' }}>
                             ({data?.studies?.length || 0} total)
                         </span>
                     </Typography>
-                    <Typography sx={{ display: 'block' }} variant="caption">
+                    <Typography sx={{ display: 'block', fontSize: '10px' }}>
                         {(extractionTableState?.columnFilters || []).length > 0 && (
                             <>{(extractionTableState?.columnFilters || []).length} filters</>
                         )}
@@ -211,8 +212,9 @@ const DisplayExtractionTableState: React.FC = (props) => {
                         <Typography
                             sx={{
                                 textOverflow: 'ellipsis',
-                                maxWidth: '200px',
-                                width: '200px',
+                                maxWidth: '100px',
+                                width: '100px',
+                                fontSize: '8px',
                                 whiteSpace: 'nowrap',
                                 overflow: 'hidden',
                                 textAlign: 'end',
@@ -224,7 +226,7 @@ const DisplayExtractionTableState: React.FC = (props) => {
                     </Button>
                 </Tooltip>
             ) : (
-                <Box sx={{ width: '200px' }}></Box>
+                <Box sx={{ width: '100px' }}></Box>
             )}
         </Box>
     );

compose/neurosynth-frontend/src/pages/Study/components/EditStudyAnalysisPointsHotTable.tsx

@@ -243,7 +243,7 @@ const EditStudyAnalysisPointsHotTable: React.FC<{ analysisId?: string; readOnly?
                             onDeleteRows={handleDeleteRows}
                         />
                     </Box>
-                    <Box sx={{ height: height, width: '100%' }}>
+                    <Box sx={{ height: height, width: '567px' }}>
                         <HotTable
                             {...EditStudyAnalysisPointsDefaultConfig}
                             ref={hotTableRef}

compose/neurosynth-frontend/src/pages/Study/components/EditStudyCompleteButton.tsx

@@ -28,9 +28,10 @@ const EditStudyCompleteButton: React.FC = React.memo((props) => {
     return (
         <Box>
             <LoadingButton
-                sx={{ width: '200px' }}
+                sx={{ width: '175px' }}
                 variant="contained"
                 color="success"
+                size="small"
                 disabled={extractionStatus?.status === EExtractionStatus.COMPLETED}
                 disableElevation
                 loaderColor="secondary"