maint: info popup for curation (#911)

* maint: info popup for curation

* fix: remove unused imports

* fix: failing tests

Author: nicoalee

compose/neurosynth-frontend/cypress/e2e/workflows/Curation/CurationAIInterface.cy.tsx

@@ -26,6 +26,9 @@ describe('CurationAIInterface', () => {
             fixture: 'pipeline-results/ParticipantDemographicsExtraction',
         }).as('taskExtraction');
 
+        // this is necessary to hide an info popup that appears for the first time in projects for the new curation UI
+        cy.addToLocalStorage('abc123-hide-info-popup', 'true');
+
         // cy.intercept('GET', `**/api/studysets/*`, { fixture: 'studyset' }).as('studysetFixture');
     });
 

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

@@ -0,0 +1,50 @@
+import { Box, Button, Typography } from '@mui/material';
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import BaseDialog from './Dialogs/BaseDialog';
+
+const InfoPopup: React.FC = () => {
+    const { projectId } = useParams<{ projectId: string | undefined }>();
+    const localStorageKey = `${projectId}-hide-info-popup`;
+    const shouldHide = !!localStorage.getItem(localStorageKey);
+    const [hide, setShouldHide] = useState(shouldHide);
+
+    const handleCloseDialog = () => {
+        setShouldHide(true);
+        window.localStorage.setItem(localStorageKey, 'true');
+    };
+
+    return (
+        <BaseDialog
+            dialogTitle="Welcome to the new Curation interface!"
+            isOpen={!hide}
+            onCloseDialog={handleCloseDialog}
+        >
+            <Box>
+                <Typography gutterBottom>
+                    We've made some significant changes to make the UI more useful and intuitive.
+                </Typography>
+                <Typography gutterBottom>
+                    We're also introducing <b>AI Assisted Curation</b>. This feature uses LLMs to extract key study
+                    information (e.g. demographics, design & task details) from the full text of papers, making it
+                    easier to screen studies for inclusion.
+                </Typography>
+                <Typography gutterBottom>To get started, import studies into curation.</Typography>
+                <Typography>
+                    In the <i>simple workflow</i>, AI-extracted information will be shown in the table, as well as
+                    individual study pages.
+                </Typography>
+                <Typography>
+                    For <i>PRISMA</i>, this feature is available after the Identification step.
+                </Typography>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
+                    <Button fullWidth onClick={handleCloseDialog} variant="contained" color="primary" disableElevation>
+                        Continue
+                    </Button>
+                </Box>
+            </Box>
+        </BaseDialog>
+    );
+};
+
+export default InfoPopup;

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

@@ -7,6 +7,7 @@ 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.
@@ -34,6 +35,8 @@ const CurationBoardAI: React.FC = () => {
                 height: `calc(100vh - 40px - ${NAVBAR_HEIGHT}px - 64px - 4px)`, // add 4px for a bit of padding at the bottom
             }}
         >
+            {/* eventually remove this */}
+            <InfoPopup />
             <Box sx={{ width: '20%', minWidth: '200px', height: '100%' }}>
                 <CurationBoardAIGroupsList
                     groups={groups}