Skip to content

Commit 73e0044

Browse files
nicoaleenicoalee
committed
fix: feedback updats
1 parent fbef1ea commit 73e0044

File tree

9 files changed

+224
-94
lines changed

9 files changed

+224
-94
lines changed

‎compose/neurosynth-frontend/src/components/Dialogs/ConfirmationDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ import {
99
IconButton,
1010
} from '@mui/material';
1111
import CloseIcon from '@mui/icons-material/Close';
12-
import React, { useMemo } from 'react';
12+
import React, { ReactNode, useMemo } from 'react';
1313

1414
export interface IConfirmationDialog {
1515
isOpen: boolean;
1616
onCloseDialog: (confirm: boolean | undefined) => void;
1717
dialogTitle: string;
18-
dialogMessage?: JSX.Element | string;
18+
dialogMessage?: ReactNode | string;
1919
confirmText?: string;
2020
rejectText?: string;
2121
}

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

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Box, Breadcrumbs, Link, Typography } from '@mui/material';
2-
import React from 'react';
3-
import { NavLink } from 'react-router-dom';
2+
import React, { useState } from 'react';
3+
import { NavLink, useNavigate } from 'react-router-dom';
4+
import ConfirmationDialog from './Dialogs/ConfirmationDialog';
5+
import { hasUnsavedChanges, hasUnsavedStudyChanges } from 'helpers/BeforeUnload.helpers';
46

57
interface INeurosynthBreadcrumbs {
68
link: string;
@@ -10,8 +12,46 @@ interface INeurosynthBreadcrumbs {
1012

1113
const NeurosynthBreadcrumbs: React.FC<{ breadcrumbItems: INeurosynthBreadcrumbs[] }> = React.memo(
1214
(props) => {
15+
const [confirmationDialogState, setConfirmationDialogState] = useState({
16+
isOpen: false,
17+
navigationLink: '',
18+
});
19+
const navigate = useNavigate();
20+
21+
const handleNavigate = (link: string) => {
22+
const hasUnsavedChanges = hasUnsavedStudyChanges();
23+
if (hasUnsavedChanges) {
24+
setConfirmationDialogState({
25+
isOpen: true,
26+
navigationLink: link,
27+
});
28+
} else {
29+
navigate(link);
30+
}
31+
};
32+
33+
const handleCloseConfirmationDialog = (ok: boolean | undefined) => {
34+
if (ok) {
35+
navigate(confirmationDialogState.navigationLink);
36+
}
37+
38+
setConfirmationDialogState({
39+
isOpen: false,
40+
navigationLink: '',
41+
});
42+
};
43+
1344
return (
1445
<Box sx={{ display: 'flex' }}>
46+
<ConfirmationDialog
47+
isOpen={confirmationDialogState.isOpen}
48+
dialogTitle="You have unsaved changes"
49+
dialogMessage="Are you sure you want to continue? You'll lose your unsaved changes"
50+
onCloseDialog={handleCloseConfirmationDialog}
51+
rejectText="Cancel"
52+
confirmText="Continue"
53+
/>
54+
1555
<Breadcrumbs>
1656
{props.breadcrumbItems.map((breadcrumb, index) =>
1757
breadcrumb.isCurrentPage ? (
@@ -34,6 +74,10 @@ const NeurosynthBreadcrumbs: React.FC<{ breadcrumbItems: INeurosynthBreadcrumbs[
3474
key={index}
3575
component={NavLink}
3676
to={breadcrumb.link}
77+
onClick={(e) => {
78+
e.preventDefault();
79+
handleNavigate(breadcrumb.link);
80+
}}
3781
sx={{
3882
fontSize: '1.25rem',
3983
cursor: 'pointer',

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

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Button, Typography } from '@mui/material';
1+
import { Box, Button, Tooltip, Typography } from '@mui/material';
22
import NeurosynthBreadcrumbs from 'components/NeurosynthBreadcrumbs';
33
import ProjectIsLoadingText from 'components/ProjectIsLoadingText';
44
import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
@@ -86,17 +86,13 @@ const ExtractionPage: React.FC = (props) => {
8686
};
8787

8888
const handleMoveToSpecificationPhase = () => {
89-
if (canEditMetaAnalyses) {
90-
navigate(`/projects/${projectId}/meta-analyses`);
91-
} else {
92-
navigate(`/projects/${projectId}/project`, {
93-
state: {
94-
projectPage: {
95-
scrollToMetaAnalysisProceed: true,
96-
},
97-
} as IProjectPageLocationState,
98-
});
99-
}
89+
navigate(`/projects/${projectId}/project`, {
90+
state: {
91+
projectPage: {
92+
scrollToMetaAnalysisProceed: true,
93+
},
94+
} as IProjectPageLocationState,
95+
});
10096
};
10197

10298
const isReadyToMoveToNextStep = useMemo(
@@ -105,6 +101,17 @@ const ExtractionPage: React.FC = (props) => {
105101
[extractionSummary]
106102
);
107103

104+
const percentageCompleteString = useMemo((): string => {
105+
if (extractionSummary.total === 0) return '0 / 0';
106+
return `${extractionSummary.completed} / ${extractionSummary.total}`;
107+
}, [extractionSummary.completed, extractionSummary.total]);
108+
109+
const percentageComplete = useMemo((): number => {
110+
if (extractionSummary.total === 0) return 0;
111+
const percentageComplete = (extractionSummary.completed / extractionSummary.total) * 100;
112+
return Math.floor(percentageComplete);
113+
}, [extractionSummary.completed, extractionSummary.total]);
114+
108115
return (
109116
<StateHandlerComponent isError={getStudysetIsError} isLoading={getStudysetIsLoading}>
110117
<Box sx={{ minWidth: '450px', margin: '0 auto' }}>
@@ -133,28 +140,43 @@ const ExtractionPage: React.FC = (props) => {
133140
</Box>
134141
<Box>
135142
<Button
136-
sx={{ width: '220px' }}
143+
sx={{ fontSize: '0.7rem' }}
137144
color="secondary"
138145
variant="contained"
139146
disableElevation
147+
size="small"
140148
onClick={() =>
141149
navigate(`/projects/${projectId}/extraction/annotations`)
142150
}
143151
>
144152
View Annotations
145153
</Button>
146-
{isReadyToMoveToNextStep && (
147-
<Button
148-
sx={{ marginLeft: '1rem' }}
149-
onClick={handleMoveToSpecificationPhase}
150-
color="success"
151-
variant="contained"
152-
disableElevation
153-
disabled={!canEdit}
154-
>
155-
Move to Specification Phase
156-
</Button>
157-
)}
154+
<Button
155+
sx={{ marginLeft: '4px', fontSize: '0.7rem' }}
156+
size="small"
157+
color="info"
158+
variant="contained"
159+
disableElevation
160+
>
161+
Mark all as complete
162+
</Button>
163+
<Tooltip title={`${percentageCompleteString} marked as complete`}>
164+
<span style={{ width: '100%' }}>
165+
<Button
166+
size="small"
167+
sx={{ marginLeft: '4px', fontSize: '0.7rem' }}
168+
onClick={handleMoveToSpecificationPhase}
169+
color="success"
170+
variant="contained"
171+
disableElevation
172+
disabled={!canEdit || !isReadyToMoveToNextStep}
173+
>
174+
{isReadyToMoveToNextStep
175+
? 'Advance'
176+
: `${percentageComplete}% complete`}
177+
</Button>
178+
</span>
179+
</Tooltip>
158180
</Box>
159181
</Box>
160182
{showReconcilePrompt && <ExtractionOutOfSync />}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ const ProjectExtractionStepCard: React.FC<{ disabled: boolean }> = ({ disabled }
141141
display: allStudiesAreComplete ? 'none' : 'block',
142142
}}
143143
onClick={() => setMarkAllAsCompleteConfirmationDialogIsOpen(true)}
144-
color="success"
144+
color="info"
145145
disabled={disabled}
146146
>
147147
Mark all as complete

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import { Add } from '@mui/icons-material';
22
import { Box, Button, Typography } from '@mui/material';
3+
import CreateMetaAnalysisSpecificationDialogBase from 'pages/MetaAnalysis/components/CreateMetaAnalysisSpecificationDialogBase';
34
import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
45
import { useGetMetaAnalysesByIds, useGuard } from 'hooks';
5-
import useUserCanEdit from 'hooks/useUserCanEdit';
6-
import { MetaAnalysisReturn } from 'neurosynth-compose-typescript-sdk';
7-
import CreateMetaAnalysisSpecificationDialogBase from 'pages/MetaAnalysis/components/CreateMetaAnalysisSpecificationDialogBase';
8-
import ProjectViewMetaAnalysis from 'pages/Project/components/ProjectViewMetaAnalysis';
96
import {
107
useProjectId,
118
useProjectMetaAnalyses,
129
useProjectMetaAnalysisCanEdit,
1310
useProjectUser,
1411
} from 'pages/Project/store/ProjectStore';
12+
import { MetaAnalysisReturn } from 'neurosynth-compose-typescript-sdk';
1513
import { useState } from 'react';
14+
import { useParams } from 'react-router-dom';
15+
import ProjectViewMetaAnalysis from 'pages/Project/components/ProjectViewMetaAnalysis';
16+
import useUserCanEdit from 'hooks/useUserCanEdit';
1617

1718
const ProjectViewMetaAnalyses: React.FC = () => {
18-
const projectId = useProjectId();
19+
const { projectId } = useParams<{ projectId: string }>();
1920
const projectUser = useProjectUser();
2021
const canEdit = useUserCanEdit(projectUser || undefined);
2122
const projectMetaAnalyses = useProjectMetaAnalyses() || [];
@@ -31,12 +32,15 @@ const ProjectViewMetaAnalyses: React.FC = () => {
3132
}
3233
const { data = [], isLoading, isError } = useGetMetaAnalysesByIds(metaAnalysisIds);
3334
const canEditMetaAnalyses = useProjectMetaAnalysisCanEdit();
35+
const projectIdFromProject = useProjectId();
3436
const [createMetaAnalysisDialogIsOpen, setCreateMetaAnalysisDialogIsOpen] = useState(false);
3537

3638
useGuard(
37-
`/projects/${projectId}/edit`,
38-
'you must finish the meta-analysis creation process to view this page',
39-
projectId !== undefined ? false : !canEditMetaAnalyses
39+
`/projects/${projectId}/project`,
40+
'You must finish the meta-analysis creation process to view this page',
41+
projectIdFromProject === undefined || projectId !== projectIdFromProject
42+
? false
43+
: !canEditMetaAnalyses
4044
);
4145

4246
return (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Box, Button } from '@mui/material';
2+
import ConfirmationDialog from 'components/Dialogs/ConfirmationDialog';
23
import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
4+
import { hasUnsavedStudyChanges, unsetUnloadHandler } from 'helpers/BeforeUnload.helpers';
35
import {
46
useInitProjectStoreIfRequired,
57
useProjectExtractionAnnotationId,
@@ -17,13 +19,11 @@ import {
1719
useStudyId,
1820
} from 'pages/Study/store/StudyStore';
1921
import { useEffect, useState } from 'react';
20-
import { Link, useNavigate, useParams } from 'react-router-dom';
22+
import { useNavigate, useParams } from 'react-router-dom';
2123
import { useClearAnnotationStore, useInitAnnotationStore } from 'stores/AnnotationStore.actions';
2224
import { useAnnotationId, useGetAnnotationIsLoading } from 'stores/AnnotationStore.getters';
2325
import DisplayExtractionTableState from './components/DisplayExtractionTableState';
2426
import EditStudyCompleteButton from './components/EditStudyCompleteButton';
25-
import ConfirmationDialog from 'components/Dialogs/ConfirmationDialog';
26-
import { hasUnsavedStudyChanges, unsetUnloadHandler } from 'helpers/BeforeUnload.helpers';
2727

2828
const EditStudyPage: React.FC = (props) => {
2929
const { projectId, studyId } = useParams<{ projectId: string; studyId: string }>();

‎compose/neurosynth-frontend/src/pages/Study/components/EditStudyPageHeader.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
1-
import { Box, Button, Typography } from '@mui/material';
1+
import { Box, Typography } from '@mui/material';
22
import DisplayStudyChipLinks from 'components/DisplayStudyChipLinks/DisplayStudyChipLinks';
3-
import EditStudyToolbar from 'pages/Study/components/EditStudyToolbar';
43
import NeurosynthBreadcrumbs from 'components/NeurosynthBreadcrumbs';
54
import ProjectIsLoadingText from 'components/ProjectIsLoadingText';
65
import { useProjectId, useProjectName } from 'pages/Project/store/ProjectStore';
6+
import EditStudyToolbar from 'pages/Study/components/EditStudyToolbar';
77
import {
8-
useStudyId,
8+
useStudyAuthors,
99
useStudyLastUpdated,
1010
useStudyName,
11-
useStudyYear,
12-
useStudyAuthors,
1311
useStudyUsername,
12+
useStudyYear,
1413
} from 'pages/Study/store/StudyStore';
1514
import { useMemo } from 'react';
1615

1716
const EditStudyPageHeader: React.FC = () => {
18-
const studyId = useStudyId();
1917
const projectId = useProjectId();
2018
const studyName = useStudyName();
2119
const studyYear = useStudyYear();
@@ -53,7 +51,7 @@ const EditStudyPageHeader: React.FC = () => {
5351
},
5452
{
5553
text: studyName || '',
56-
link: `/projects/${projectId}/extraction/studies/${studyId}/edit`,
54+
link: '',
5755
isCurrentPage: true,
5856
},
5957
]}

0 commit comments

Comments
 (0)