Skip to content

Commit b829a3a

Browse files
nicoaleenicoalee
authored
feat: updated extraction dialog (#1098)
1 parent 48c6517 commit b829a3a

File tree

5 files changed

+177
-99
lines changed

5 files changed

+177
-99
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ describe('Ingestion', () => {
4646
cy.login('mocked').visit(PATH);
4747
cy.contains('button', 'start extraction').click(); // popup should open automatically as extraction has not been initialized in this mock
4848
cy.contains('button', 'NEXT').click();
49+
cy.contains('button', 'START').click();
4950

5051
cy.get('@baseStudiesFixture').its('request.body').should('not.have.a.property', 'doi');
5152
cy.get('@baseStudiesFixture').its('request.body').should('not.have.a.property', 'pmid');

‎compose/neurosynth-frontend/src/pages/Project/components/MoveToExtractionDialog.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import {
2020
} from 'pages/Project/store/ProjectStore';
2121
import { useMemo, useState } from 'react';
2222
import { useNavigate } from 'react-router-dom';
23-
import MoveToExtractionDialogIntroduction from './MoveToExtractionDialogIntroduction';
23+
import MoveToExtractionDialogIntroductionPart1 from './MoveToExtractionDialogIntroPart1';
24+
import MoveToExtractionDialogIntroductionPart2 from './MoveToExtractionDialogIntroPart2';
2425

2526
const MoveToExtractionDialog: React.FC<IDialog> = (props) => {
2627
const numColumns = useProjectNumCurationColumns();
@@ -37,6 +38,8 @@ const MoveToExtractionDialog: React.FC<IDialog> = (props) => {
3738
const { mutateAsync: asyncIngest } = useIngest();
3839
const { mutateAsync: asyncUpdateStudyset } = useUpdateStudyset();
3940

41+
const [step, setStep] = useState(0);
42+
4043
const navigate = useNavigate();
4144

4245
const [isLoadingPhase, setIsLoadingPhase] = useState(false);
@@ -168,7 +171,7 @@ const MoveToExtractionDialog: React.FC<IDialog> = (props) => {
168171
};
169172

170173
const handleInitialize = async () => {
171-
setIsLoadingPhase(true);
174+
setStep(2);
172175

173176
try {
174177
const newStudysetId = await handleCreateStudyset();
@@ -198,6 +201,14 @@ const MoveToExtractionDialog: React.FC<IDialog> = (props) => {
198201
}, 1000);
199202
};
200203

204+
const handleNavigateNext = () => {
205+
setStep((prev) => (prev < 2 ? prev + 1 : prev));
206+
};
207+
208+
const handleNavigatePrev = () => {
209+
setStep((prev) => (prev > 0 ? prev - 1 : prev));
210+
};
211+
201212
const progress = useMemo(() => {
202213
const createdStudyset = +loadingStatus.createdStudyset;
203214
const createdAnnotations = +loadingStatus.createdAnnotations;
@@ -225,7 +236,11 @@ const MoveToExtractionDialog: React.FC<IDialog> = (props) => {
225236
onCloseDialog={handleCloseDialog}
226237
>
227238
<StateHandlerComponent isLoading={false} isError={isError}>
228-
{isLoadingPhase ? (
239+
{step === 0 ? (
240+
<MoveToExtractionDialogIntroductionPart1 onNext={handleNavigateNext} />
241+
) : step === 1 ? (
242+
<MoveToExtractionDialogIntroductionPart2 onPrev={handleNavigatePrev} onNext={handleInitialize} />
243+
) : (
229244
<Box
230245
sx={{
231246
height: '300px',
@@ -250,8 +265,6 @@ const MoveToExtractionDialog: React.FC<IDialog> = (props) => {
250265
{/* need this empty div to space out elements properly */}
251266
<div></div>
252267
</Box>
253-
) : (
254-
<MoveToExtractionDialogIntroduction onNext={handleInitialize} />
255268
)}
256269
</StateHandlerComponent>
257270
</BaseDialog>

‎compose/neurosynth-frontend/src/pages/Project/components/MoveToExtractionDialogIntroPart1.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Box, Button, Link, Typography } from '@mui/material';
2+
3+
const MoveToExtractionDialogIntroductionPart1: React.FC<{
4+
onNext: () => void;
5+
}> = (props) => {
6+
return (
7+
<Box>
8+
<Typography sx={{ fontWeight: 'bold' }} gutterBottom>
9+
Congratulations on completing the Curation phase! You are now in{' '}
10+
<Link
11+
underline="hover"
12+
target="_blank"
13+
rel="noreferrer"
14+
href="https://neurostuff.github.io/compose-docs/guide/Project/Extraction"
15+
>
16+
Extraction
17+
</Link>
18+
, where you'll finalize the data for your meta-analysis.
19+
</Typography>
20+
<Typography gutterBottom>Your main tasks in this step are:</Typography>
21+
<ul>
22+
<li>
23+
<Typography>
24+
<b>Add & Review Study Data</b>: Ensure every study has accurate activation coordinates. You will
25+
need to either separate coordinates into distinct analyses for automatically processed studies,
26+
or input coordinates from the original paper manually for new studies.
27+
</Typography>
28+
</li>
29+
<li>
30+
<Typography>
31+
<b>Annotate Analyses</b>: Use annotations to tag the specific analyses (i.e., contrasts) you
32+
want to include. This allows you to group analyses from different studies to generate distinct
33+
meta-analyses later.
34+
</Typography>
35+
</li>
36+
</ul>
37+
38+
<Typography gutterBottom>
39+
Click <span style={{ fontWeight: 'bold', color: '#0077b6' }}>NEXT</span> to continue.
40+
</Typography>
41+
42+
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
43+
<Button
44+
sx={{ width: '220px', marginTop: '1rem' }}
45+
onClick={props.onNext}
46+
variant="contained"
47+
disableElevation
48+
>
49+
NEXT
50+
</Button>
51+
</Box>
52+
</Box>
53+
);
54+
};
55+
56+
export default MoveToExtractionDialogIntroductionPart1;

‎compose/neurosynth-frontend/src/pages/Project/components/MoveToExtractionDialogIntroPart2.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { Typography, Button, Box, Link } from '@mui/material';
2+
3+
function MoveToExtractionDialogIntroPart2({ onPrev, onNext }: { onPrev: () => void; onNext: () => void }) {
4+
return (
5+
<Box>
6+
<Typography gutterBottom>
7+
Once you start, the system will automatically initialize your project by:
8+
</Typography>
9+
10+
<ul>
11+
<li>
12+
<Typography>Creating a new Studyset from your curated selections.</Typography>
13+
</li>
14+
<li>
15+
<Typography>Ingesting your studies, which adds any new ones to the NeuroStore database.</Typography>
16+
</li>
17+
<li>
18+
<Typography>
19+
Creating a default Annotation column so you can begin selecting analyses. You can create
20+
additional annotation columns later to form different groups.
21+
</Typography>
22+
</li>
23+
</ul>
24+
25+
<Typography gutterBottom>
26+
This one-time setup can take several seconds to a few minutes, depending on the number of studies you
27+
selected. You can review our full guide to{' '}
28+
<Link
29+
underline="hover"
30+
target="_blank"
31+
rel="noreferrer"
32+
href="https://neurostuff.github.io/compose-docs/guide/Project/Extraction"
33+
>
34+
Extraction
35+
</Link>{' '}
36+
in our documentation.
37+
</Typography>
38+
39+
<Typography gutterBottom>
40+
To get started, click <span style={{ fontWeight: 'bold', color: '#0077b6' }}>START</span> below.
41+
</Typography>
42+
43+
{/* <Box sx={{ margin: '0.5rem 0' }}>
44+
<Link
45+
underline="hover"
46+
target="_blank"
47+
rel="noreferrer"
48+
href="https://neurostuff.github.io/compose-docs/guide/glossary#studyset"
49+
>
50+
Studyset
51+
</Link>
52+
<Typography gutterBottom sx={{ color: 'muted.main' }}>
53+
A studyset is a collection of studies you have selected
54+
</Typography>
55+
<Link
56+
underline="hover"
57+
target="_blank"
58+
rel="noreferrer"
59+
href="https://neurostuff.github.io/compose-docs/guide/glossary#analyses"
60+
>
61+
Analyses
62+
</Link>
63+
<Typography gutterBottom sx={{ color: 'muted.main' }}>
64+
Analyses are the statistical contrasts within a given study. Analyses contain coordinates
65+
representing brain regions of interest
66+
</Typography>
67+
<Link
68+
underline="hover"
69+
target="_blank"
70+
rel="noreferrer"
71+
href="https://neurostuff.github.io/compose-docs/guide/glossary#annotations"
72+
>
73+
Annotations
74+
</Link>
75+
<Typography gutterBottom sx={{ color: 'muted.main' }}>
76+
Annotations are checkboxes indicating whether you want to include or exclude analyses from your
77+
meta-analysis
78+
</Typography>
79+
80+
<Typography>
81+
To continue, click <b>NEXT</b>. Neurosynth Compose will proceed to create a new studyset, create a
82+
new annotation, and ingest your selected studies into the new studyset. If you have added any new
83+
studies, they will be created in NeuroStore for you.
84+
</Typography>
85+
<Typography sx={{ fontWeight: 'bold' }}>
86+
This process can take a few seconds or minutes depending on how many studies you selected.
87+
</Typography>
88+
</Box> */}
89+
90+
<Box sx={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
91+
<Button sx={{ width: '220px' }} onClick={onPrev} variant="outlined" disableElevation>
92+
PREVIOUS
93+
</Button>
94+
<Button sx={{ width: '220px' }} onClick={onNext} variant="contained" disableElevation>
95+
START
96+
</Button>
97+
</Box>
98+
</Box>
99+
);
100+
}
101+
102+
export default MoveToExtractionDialogIntroPart2;

‎compose/neurosynth-frontend/src/pages/Project/components/MoveToExtractionDialogIntroduction.tsx‎

Lines changed: 0 additions & 94 deletions
This file was deleted.

0 commit comments

Comments
 (0)