Enh 835 support curation hints (#1080)

* feat: raised groups state and added snackbar hint for curation

* feat: added hint to snackbar

* fix: cypress test

Author: nicoalee

compose/neurosynth-frontend/cypress/e2e/workflows/ingestion/Ingestion.cy.tsx

@@ -44,7 +44,7 @@ describe('Ingestion', () => {
 
     it('should show the dialog', () => {
         cy.login('mocked').visit(PATH);
-        cy.contains('button', 'go to extraction').click(); // popup should open automatically as extraction has not been initialized in this mock
+        cy.contains('button', 'start extraction').click(); // popup should open automatically as extraction has not been initialized in this mock
         cy.contains('button', 'NEXT').click();
 
         cy.get('@baseStudiesFixture').its('request.body').should('not.have.a.property', 'doi');

compose/neurosynth-frontend/src/App.tsx

@@ -62,6 +62,10 @@ function App() {
             <SnackbarProvider
                 ref={notistackRef}
                 autoHideDuration={8000}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
                 action={(key) => (
                     <IconButton onClick={handleCloseSnackbar(key)}>
                         <Close sx={{ color: 'white' }} />

compose/neurosynth-frontend/src/hooks/projects/useGetProjectById.tsx

@@ -9,6 +9,7 @@ const useGetProjectById = (projectId: string | undefined) => {
         {
             select: (axiosResponse) => axiosResponse.data as INeurosynthProjectReturn,
             enabled: !!projectId,
+            cacheTime: 0, // IMPORTANT: disable cache for this query as caching causes the project store to sometimes have old data when you switch between projects
         }
     );
 };

compose/neurosynth-frontend/src/pages/Curation/CurationPage.tsx

@@ -9,6 +9,7 @@ import { IProjectPageLocationState } from 'pages/Project/ProjectPage';
 import {
     useGetProjectIsLoading,
     useProjectCreatedAt,
+    useProjectCurationColumns,
     useProjectCurationIsPrisma,
     useProjectExtractionAnnotationId,
     useProjectExtractionStudysetId,
@@ -21,6 +22,8 @@ import CurationBoardAI from './components/CurationBoardAi';
 import CurationDownloadSummaryButton from './components/CurationDownloadSummaryButton';
 import PrismaDialog from './components/PrismaDialog';
 import LoadingStateIndicatorProject from 'components/LoadingStateIndicator/LoadingStateIndicatorProject';
+import { SnackbarKey, useSnackbar } from 'notistack';
+import useCurationBoardGroupsState from './hooks/useCurationBoardGroupsState';
 
 const localStorageNewUIKey = 'show-new-ui-may-30-2025';
 
@@ -30,10 +33,13 @@ const CurationPage: React.FC = () => {
     const studysetId = useProjectExtractionStudysetId();
     const canEdit = useUserCanEdit(projectUser || undefined);
     const { included, uncategorized } = useGetCurationSummary();
+    const columns = useProjectCurationColumns();
     const annotationId = useProjectExtractionAnnotationId();
     const { data: studyset } = useGetStudysetById(studysetId || '', false);
     const { projectId } = useParams<{ projectId: string | undefined }>();
     const projectIsLoading = useGetProjectIsLoading();
+    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+    const { groups, selectedGroup, handleSetSelectedGroup } = useCurationBoardGroupsState();
 
     const [prismaIsOpen, setPrismaIsOpen] = useState(false);
 
@@ -59,8 +65,58 @@ const CurationPage: React.FC = () => {
     const extractionStepInitialized = studysetId && annotationId && (studyset?.studies?.length || 0) > 0;
     const canMoveToExtractionPhase = included > 0 && uncategorized === 0;
 
+    const handleNavigateToStep = (groupId: string, snackbarId: SnackbarKey) => {
+        const foundGroup = groups.find((g) => g.id === groupId);
+        if (foundGroup) {
+            handleSetSelectedGroup(foundGroup);
+        }
+        closeSnackbar(snackbarId);
+    };
+
     const handleMoveToExtractionPhase = () => {
-        if (extractionStepInitialized) {
+        if (!canMoveToExtractionPhase) {
+            const existingIssues: { phase: string; colId: string; numUncategorized: number }[] = [];
+            for (let i = 0; i < columns.length - 1; i++) {
+                // skip the last column as it is included
+                const column = columns[i];
+                const numUncategorized = column.stubStudies.filter((s) => s.exclusionTag === null).length;
+                if (numUncategorized > 0) {
+                    existingIssues.push({ phase: column.name, colId: column.id, numUncategorized });
+                }
+            }
+
+            const snackbarId = enqueueSnackbar(
+                <Box>
+                    <Typography variant="body1" sx={{ fontWeight: 'bold' }} gutterBottom>
+                        You must complete curation before moving to extraction
+                    </Typography>
+                    {existingIssues.map((issue) => (
+                        <Typography key={issue.phase} variant="body2">
+                            The <b>{issue.phase}</b> step still has <b>{issue.numUncategorized} studies</b> that need to
+                            be either <b>included</b> or <b>excluded</b>.
+                        </Typography>
+                    ))}
+
+                    <Box sx={{ marginTop: '1rem' }}>
+                        {existingIssues.map((issue) => (
+                            <Button
+                                key={issue.phase}
+                                sx={{ margin: '4px' }}
+                                variant="contained"
+                                color="primary"
+                                disableElevation
+                                size="small"
+                                onClick={() => handleNavigateToStep(issue.colId, snackbarId)}
+                            >
+                                Go to {issue.phase}
+                            </Button>
+                        ))}
+                    </Box>
+                </Box>,
+                { variant: 'warning', autoHideDuration: null }
+            );
+            return;
+        } else if (extractionStepInitialized) {
             navigate(`/projects/${projectId}/extraction`);
         } else {
             navigate(`/projects/${projectId}/project`, {
@@ -73,6 +129,8 @@ const CurationPage: React.FC = () => {
         }
     };
 
+    const indicateGoToExtraction = !extractionStepInitialized && canMoveToExtractionPhase;
+
     return (
         <StateHandlerComponent isError={false} isLoading={projectIsLoading}>
             <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
@@ -161,28 +219,33 @@ const CurationPage: React.FC = () => {
                         )}
                         <Button
                             onClick={handleMoveToExtractionPhase}
-                            variant="contained"
+                            variant={canMoveToExtractionPhase ? 'contained' : 'outlined'}
                             color="success"
                             size="small"
                             sx={{
                                 ml: '0.5rem',
                                 fontSize: '12px',
-                                ...(extractionStepInitialized || !canMoveToExtractionPhase
-                                    ? { color: 'white' }
-                                    : {
-                                          ...GlobalStyles.colorPulseAnimation,
-                                          color: 'success.dark',
-                                      }),
+                                ...(indicateGoToExtraction
+                                    ? { ...GlobalStyles.colorPulseAnimation, color: 'success.dark' }
+                                    : {}),
                             }}
                             disableElevation
-                            disabled={!canEdit || !canMoveToExtractionPhase}
+                            disabled={!canEdit}
                         >
-                            {extractionStepInitialized ? 'view extraction' : 'go to extraction'}
+                            {extractionStepInitialized ? 'view extraction' : 'start extraction'}
                         </Button>
                     </Box>
                 </Box>
                 <Box sx={{ height: '100%', overflow: 'hidden' }}>
-                    {useNewUI ? <CurationBoardAI /> : <CurationBoardBasic />}
+                    {useNewUI ? (
+                        <CurationBoardAI
+                            groups={groups}
+                            selectedGroup={selectedGroup}
+                            handleSetSelectedGroup={handleSetSelectedGroup}
+                        />
+                    ) : (
+                        <CurationBoardBasic />
+                    )}
                 </Box>
             </Box>
         </StateHandlerComponent>

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

@@ -1,24 +1,26 @@
 import { Box } from '@mui/material';
+import InfoPopup from 'components/InfoPopup';
 import { NAVBAR_HEIGHT } from 'components/Navbar/Navbar';
 import { useSnackbar } from 'notistack';
-import CurationBoardAIGroupsList from 'pages/Curation/components/CurationBoardAIGroupsList';
+import CurationBoardAIGroupsList, { IGroupListItem } from 'pages/Curation/components/CurationBoardAIGroupsList';
 import { useDeleteCurationImport } from 'pages/Project/store/ProjectStore';
-import useCurationBoardGroupsState from '../hooks/useCurationBoardGroupsState';
 import CurationBoardAIInterfaceCurator from './CurationBoardAIInterfaceCurator';
 import CurationBoardAIInterfaceExclude from './CurationBoardAIInterfaceExclude';
 import CurationBoardAIInterfaceImportSummary from './CurationBoardAIInterfaceImportSummary';
-import InfoPopup from 'components/InfoPopup';
 
 export enum ECurationBoardAIInterface {
     CURATOR = 'CURATOR', // basic curation interface with ability to toggle between spreadsheet and focused UIs.
     IMPORT_SUMMARY = 'IMPORT_SUMMARY', // see summary of your import (time, keywords, method, etc)
     EXCLUDE = 'EXCLUDE', // exclusion view
 }
 
-const CurationBoardAI: React.FC = () => {
+const CurationBoardAI: React.FC<{
+    groups: IGroupListItem[];
+    selectedGroup: IGroupListItem | undefined;
+    handleSetSelectedGroup: (group: IGroupListItem) => void;
+}> = ({ groups, selectedGroup, handleSetSelectedGroup }) => {
     const deleteCurationImport = useDeleteCurationImport();
     const { enqueueSnackbar } = useSnackbar();
-    const { groups, selectedGroup, handleSetSelectedGroup } = useCurationBoardGroupsState();
 
     const handleDeleteCurationImport = (importId: string) => {
         deleteCurationImport(importId);

compose/neurosynth-frontend/src/pages/Curation/hooks/useCurationBoardGroupsState.tsx

@@ -43,14 +43,12 @@ function useCurationBoardGroupsState() {
         if (curationColumns.length === 0) return [];
         let groupListItems: IGroupListItem[] = [];
 
-        const numTotalStudies = curationColumns.reduce((acc, curr) => acc + curr.stubStudies.length, 0);
-
         if (prismaConfig.isPrisma) {
             groupListItems.push({
                 id: 'prisma_header',
                 type: 'SUBHEADER',
                 label: 'PRISMA Curation',
-                count: numTotalStudies,
+                count: null,
                 UI: null,
             });
 
@@ -142,7 +140,7 @@ function useCurationBoardGroupsState() {
                     id: 'curate_header',
                     type: 'SUBHEADER',
                     label: 'Curation',
-                    count: numTotalStudies,
+                    count: null,
                     UI: null,
                 },
                 {
@@ -239,7 +237,7 @@ function useCurationBoardGroupsState() {
             localStorage.setItem(selectedCurationStepLocalStorageKey, groups[1].id);
             setSelectedGroup(groups[1]);
         }
-    }, [groups, curationColumns.length, selectedGroup, selectedCurationStepLocalStorageKey]);
+    }, [groups, curationColumns.length, selectedGroup, selectedCurationStepLocalStorageKey, projectId]);
 
     return {
         groups,

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

@@ -24,9 +24,7 @@ const ProjectEditMetaAnalyses: React.FC = (props) => {
     const curationStepHasBeenInitialized = useProjectCurationColumns().length > 0;
 
     const extractionStepHasBeenInitialized =
-        !!extractionMetadata.annotationId &&
-        !!extractionMetadata.studysetId &&
-        (studyset?.studies?.length || 0) > 0;
+        !!extractionMetadata.annotationId && !!extractionMetadata.studysetId && (studyset?.studies?.length || 0) > 0;
 
     const { total, included, uncategorized } = useGetCurationSummary();
     const disableExtractionStep =
@@ -41,10 +39,7 @@ const ProjectEditMetaAnalyses: React.FC = (props) => {
 
     return (
         <Stepper activeStep={activeStep} orientation="vertical" sx={[ProjectPageStyles.stepper]}>
-            <ProjectCurationStep
-                disabled={!canEdit}
-                curationStepHasBeenInitialized={curationStepHasBeenInitialized}
-            />
+            <ProjectCurationStep disabled={!canEdit} curationStepHasBeenInitialized={curationStepHasBeenInitialized} />
             <ProjectExtractionStep
                 extractionStepHasBeenInitialized={extractionStepHasBeenInitialized}
                 disabled={!canEdit || disableExtractionStep}

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

@@ -35,14 +35,14 @@ const ProjectExtractionStep: React.FC<IExtractionStep & StepProps> = (props) =>
                 <Box sx={{ marginLeft: '2rem' }}>
                     <Typography sx={{ color: 'muted.main' }}>
                         <b>
-                            You have completed your study curation, and now have a potential list of
-                            studies to include in your meta-analysis
+                            You have completed your study curation, and now have a potential list of studies to include
+                            in your meta-analysis
                         </b>
                     </Typography>
                     <Typography gutterBottom sx={{ color: 'muted.main' }}>
-                        In this step, add necessary study data to the studies in your studyset (like
-                        coordinates and metadata) as well as analysis annotations that will be used
-                        to help filter analyses within your studies
+                        In this step, add necessary study data to the studies in your studyset (like coordinates and
+                        metadata) as well as analysis annotations that will be used to help filter analyses within your
+                        studies
                     </Typography>
                     <Box sx={{ marginTop: '1rem' }}>
                         {extractionStepHasBeenInitialized ? (

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

@@ -1,15 +1,7 @@
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 import CheckIcon from '@mui/icons-material/Check';
 import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
-import {
-    Box,
-    Card,
-    CardContent,
-    Typography,
-    CircularProgress,
-    CardActions,
-    Button,
-} from '@mui/material';
+import { Box, Card, CardContent, Typography, CircularProgress, CardActions, Button } from '@mui/material';
 import ConfirmationDialog from 'components/Dialogs/ConfirmationDialog';
 import ProjectComponentsStyles from 'pages/Project/components/Project.styles';
 import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
@@ -30,10 +22,7 @@ const getPercentageComplete = (extractionSummary: IExtractionSummary): number =>
 };
 
 const ProjectExtractionStepCard: React.FC<{ disabled: boolean }> = ({ disabled }) => {
-    const [
-        markAllAsCompleteConfirmationDialogIsOpen,
-        setMarkAllAsCompleteConfirmationDialogIsOpen,
-    ] = useState(false);
+    const [markAllAsCompleteConfirmationDialogIsOpen, setMarkAllAsCompleteConfirmationDialogIsOpen] = useState(false);
     const studysetId = useProjectExtractionStudysetId();
     const { projectId } = useParams<{ projectId: string }>();
     const extractionSummary = useGetExtractionSummary(projectId);
@@ -55,9 +44,7 @@ const ProjectExtractionStepCard: React.FC<{ disabled: boolean }> = ({ disabled }
     };
 
     const allStudiesAreComplete = useMemo(() => {
-        return (
-            extractionSummary.total > 0 && extractionSummary.completed === extractionSummary.total
-        );
+        return extractionSummary.total > 0 && extractionSummary.completed === extractionSummary.total;
     }, [extractionSummary.completed, extractionSummary.total]);
 
     return (
@@ -70,10 +57,7 @@ const ProjectExtractionStepCard: React.FC<{ disabled: boolean }> = ({ disabled }
                     padding: '8px',
                 }}
             >
-                <StateHandlerComponent
-                    isError={getStudysetIsError}
-                    isLoading={getStudysetIsLoading}
-                >
+                <StateHandlerComponent isError={getStudysetIsError} isLoading={getStudysetIsLoading}>
                     <CardContent>
                         <Box sx={ProjectComponentsStyles.stepTitle}>
                             <Typography sx={{ color: 'muted.main' }}>
@@ -83,11 +67,7 @@ const ProjectExtractionStepCard: React.FC<{ disabled: boolean }> = ({ disabled }
                                 sx={ProjectComponentsStyles.progressCircle}
                                 variant="determinate"
                                 value={getPercentageComplete(extractionSummary)}
-                                color={
-                                    getPercentageComplete(extractionSummary) === 100
-                                        ? 'success'
-                                        : 'secondary'
-                                }
+                                color={getPercentageComplete(extractionSummary) === 100 ? 'success' : 'secondary'}
                             />
                         </Box>
                         <Typography gutterBottom variant="h5" sx={{ marginRight: '40px' }}>

compose/neurosynth-frontend/src/pages/Project/store/ProjectStore.ts

@@ -20,7 +20,7 @@ import {
     setGivenStudyStatusesAsCompleteHelper,
     updateStubFieldHelper,
 } from 'pages/Project/store/ProjectStore.helpers';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useParams } from 'react-router-dom';
 import API from 'utils/api';