fix: feedback updats

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

@@ -9,13 +9,13 @@ import {
     IconButton,
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
-import React, { useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 
 export interface IConfirmationDialog {
     isOpen: boolean;
     onCloseDialog: (confirm: boolean | undefined) => void;
     dialogTitle: string;
-    dialogMessage?: JSX.Element | string;
+    dialogMessage?: ReactNode | string;
     confirmText?: string;
     rejectText?: string;
 }

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

@@ -1,6 +1,8 @@
 import { Box, Breadcrumbs, Link, Typography } from '@mui/material';
-import React from 'react';
-import { NavLink } from 'react-router-dom';
+import React, { useState } from 'react';
+import { NavLink, useNavigate } from 'react-router-dom';
+import ConfirmationDialog from './Dialogs/ConfirmationDialog';
+import { hasUnsavedChanges, hasUnsavedStudyChanges } from 'helpers/BeforeUnload.helpers';
 
 interface INeurosynthBreadcrumbs {
     link: string;
@@ -10,8 +12,46 @@ interface INeurosynthBreadcrumbs {
 
 const NeurosynthBreadcrumbs: React.FC<{ breadcrumbItems: INeurosynthBreadcrumbs[] }> = React.memo(
     (props) => {
+        const [confirmationDialogState, setConfirmationDialogState] = useState({
+            isOpen: false,
+            navigationLink: '',
+        });
+        const navigate = useNavigate();
+
+        const handleNavigate = (link: string) => {
+            const hasUnsavedChanges = hasUnsavedStudyChanges();
+            if (hasUnsavedChanges) {
+                setConfirmationDialogState({
+                    isOpen: true,
+                    navigationLink: link,
+                });
+            } else {
+                navigate(link);
+            }
+        };
+
+        const handleCloseConfirmationDialog = (ok: boolean | undefined) => {
+            if (ok) {
+                navigate(confirmationDialogState.navigationLink);
+            }
+
+            setConfirmationDialogState({
+                isOpen: false,
+                navigationLink: '',
+            });
+        };
+
         return (
             <Box sx={{ display: 'flex' }}>
+                <ConfirmationDialog
+                    isOpen={confirmationDialogState.isOpen}
+                    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"
+                />
+
                 <Breadcrumbs>
                     {props.breadcrumbItems.map((breadcrumb, index) =>
                         breadcrumb.isCurrentPage ? (
@@ -34,6 +74,10 @@ const NeurosynthBreadcrumbs: React.FC<{ breadcrumbItems: INeurosynthBreadcrumbs[
                                 key={index}
                                 component={NavLink}
                                 to={breadcrumb.link}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    handleNavigate(breadcrumb.link);
+                                }}
                                 sx={{
                                     fontSize: '1.25rem',
                                     cursor: 'pointer',

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

@@ -1,4 +1,4 @@
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, Tooltip, Typography } from '@mui/material';
 import NeurosynthBreadcrumbs from 'components/NeurosynthBreadcrumbs';
 import ProjectIsLoadingText from 'components/ProjectIsLoadingText';
 import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
@@ -86,17 +86,13 @@ const ExtractionPage: React.FC = (props) => {
     };
 
     const handleMoveToSpecificationPhase = () => {
-        if (canEditMetaAnalyses) {
-            navigate(`/projects/${projectId}/meta-analyses`);
-        } else {
-            navigate(`/projects/${projectId}/project`, {
-                state: {
-                    projectPage: {
-                        scrollToMetaAnalysisProceed: true,
-                    },
-                } as IProjectPageLocationState,
-            });
-        }
+        navigate(`/projects/${projectId}/project`, {
+            state: {
+                projectPage: {
+                    scrollToMetaAnalysisProceed: true,
+                },
+            } as IProjectPageLocationState,
+        });
     };
 
     const isReadyToMoveToNextStep = useMemo(
@@ -105,6 +101,17 @@ const ExtractionPage: React.FC = (props) => {
         [extractionSummary]
     );
 
+    const percentageCompleteString = useMemo((): string => {
+        if (extractionSummary.total === 0) return '0 / 0';
+        return `${extractionSummary.completed} / ${extractionSummary.total}`;
+    }, [extractionSummary.completed, extractionSummary.total]);
+
+    const percentageComplete = useMemo((): number => {
+        if (extractionSummary.total === 0) return 0;
+        const percentageComplete = (extractionSummary.completed / extractionSummary.total) * 100;
+        return Math.floor(percentageComplete);
+    }, [extractionSummary.completed, extractionSummary.total]);
+
     return (
         <StateHandlerComponent isError={getStudysetIsError} isLoading={getStudysetIsLoading}>
             <Box sx={{ minWidth: '450px', margin: '0 auto' }}>
@@ -133,28 +140,43 @@ const ExtractionPage: React.FC = (props) => {
                     </Box>
                     <Box>
                         <Button
-                            sx={{ width: '220px' }}
+                            sx={{ fontSize: '0.7rem' }}
                             color="secondary"
                             variant="contained"
                             disableElevation
+                            size="small"
                             onClick={() =>
                                 navigate(`/projects/${projectId}/extraction/annotations`)
                             }
                         >
                             View Annotations
                         </Button>
-                        {isReadyToMoveToNextStep && (
-                            <Button
-                                sx={{ marginLeft: '1rem' }}
-                                onClick={handleMoveToSpecificationPhase}
-                                color="success"
-                                variant="contained"
-                                disableElevation
-                                disabled={!canEdit}
-                            >
-                                Move to Specification Phase
-                            </Button>
-                        )}
+                        <Button
+                            sx={{ marginLeft: '4px', fontSize: '0.7rem' }}
+                            size="small"
+                            color="info"
+                            variant="contained"
+                            disableElevation
+                        >
+                            Mark all as complete
+                        </Button>
+                        <Tooltip title={`${percentageCompleteString} marked as complete`}>
+                            <span style={{ width: '100%' }}>
+                                <Button
+                                    size="small"
+                                    sx={{ marginLeft: '4px', fontSize: '0.7rem' }}
+                                    onClick={handleMoveToSpecificationPhase}
+                                    color="success"
+                                    variant="contained"
+                                    disableElevation
+                                    disabled={!canEdit || !isReadyToMoveToNextStep}
+                                >
+                                    {isReadyToMoveToNextStep
+                                        ? 'Advance'
+                                        : `${percentageComplete}% complete`}
+                                </Button>
+                            </span>
+                        </Tooltip>
                     </Box>
                 </Box>
                 {showReconcilePrompt && <ExtractionOutOfSync />}

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="success"
+                            color="info"
                             disabled={disabled}
                         >
                             Mark all as complete

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

@@ -1,21 +1,22 @@
 import { Add } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
+import CreateMetaAnalysisSpecificationDialogBase from 'pages/MetaAnalysis/components/CreateMetaAnalysisSpecificationDialogBase';
 import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
 import { useGetMetaAnalysesByIds, useGuard } from 'hooks';
-import useUserCanEdit from 'hooks/useUserCanEdit';
-import { MetaAnalysisReturn } from 'neurosynth-compose-typescript-sdk';
-import CreateMetaAnalysisSpecificationDialogBase from 'pages/MetaAnalysis/components/CreateMetaAnalysisSpecificationDialogBase';
-import ProjectViewMetaAnalysis from 'pages/Project/components/ProjectViewMetaAnalysis';
 import {
     useProjectId,
     useProjectMetaAnalyses,
     useProjectMetaAnalysisCanEdit,
     useProjectUser,
 } from 'pages/Project/store/ProjectStore';
+import { MetaAnalysisReturn } from 'neurosynth-compose-typescript-sdk';
 import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import ProjectViewMetaAnalysis from 'pages/Project/components/ProjectViewMetaAnalysis';
+import useUserCanEdit from 'hooks/useUserCanEdit';
 
 const ProjectViewMetaAnalyses: React.FC = () => {
-    const projectId = useProjectId();
+    const { projectId } = useParams<{ projectId: string }>();
     const projectUser = useProjectUser();
     const canEdit = useUserCanEdit(projectUser || undefined);
     const projectMetaAnalyses = useProjectMetaAnalyses() || [];
@@ -31,12 +32,15 @@ const ProjectViewMetaAnalyses: React.FC = () => {
     }
     const { data = [], isLoading, isError } = useGetMetaAnalysesByIds(metaAnalysisIds);
     const canEditMetaAnalyses = useProjectMetaAnalysisCanEdit();
+    const projectIdFromProject = useProjectId();
     const [createMetaAnalysisDialogIsOpen, setCreateMetaAnalysisDialogIsOpen] = useState(false);
 
     useGuard(
-        `/projects/${projectId}/edit`,
-        'you must finish the meta-analysis creation process to view this page',
-        projectId !== undefined ? false : !canEditMetaAnalyses
+        `/projects/${projectId}/project`,
+        'You must finish the meta-analysis creation process to view this page',
+        projectIdFromProject === undefined || projectId !== projectIdFromProject
+            ? false
+            : !canEditMetaAnalyses
     );
 
     return (

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

@@ -1,5 +1,7 @@
 import { Box, Button } from '@mui/material';
+import ConfirmationDialog from 'components/Dialogs/ConfirmationDialog';
 import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
+import { hasUnsavedStudyChanges, unsetUnloadHandler } from 'helpers/BeforeUnload.helpers';
 import {
     useInitProjectStoreIfRequired,
     useProjectExtractionAnnotationId,
@@ -17,13 +19,11 @@ import {
     useStudyId,
 } from 'pages/Study/store/StudyStore';
 import { useEffect, useState } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useClearAnnotationStore, useInitAnnotationStore } from 'stores/AnnotationStore.actions';
 import { useAnnotationId, useGetAnnotationIsLoading } from 'stores/AnnotationStore.getters';
 import DisplayExtractionTableState from './components/DisplayExtractionTableState';
 import EditStudyCompleteButton from './components/EditStudyCompleteButton';
-import ConfirmationDialog from 'components/Dialogs/ConfirmationDialog';
-import { hasUnsavedStudyChanges, unsetUnloadHandler } from 'helpers/BeforeUnload.helpers';
 
 const EditStudyPage: React.FC = (props) => {
     const { projectId, studyId } = useParams<{ projectId: string; studyId: string }>();

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

@@ -1,21 +1,19 @@
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import DisplayStudyChipLinks from 'components/DisplayStudyChipLinks/DisplayStudyChipLinks';
-import EditStudyToolbar from 'pages/Study/components/EditStudyToolbar';
 import NeurosynthBreadcrumbs from 'components/NeurosynthBreadcrumbs';
 import ProjectIsLoadingText from 'components/ProjectIsLoadingText';
 import { useProjectId, useProjectName } from 'pages/Project/store/ProjectStore';
+import EditStudyToolbar from 'pages/Study/components/EditStudyToolbar';
 import {
-    useStudyId,
+    useStudyAuthors,
     useStudyLastUpdated,
     useStudyName,
-    useStudyYear,
-    useStudyAuthors,
     useStudyUsername,
+    useStudyYear,
 } from 'pages/Study/store/StudyStore';
 import { useMemo } from 'react';
 
 const EditStudyPageHeader: React.FC = () => {
-    const studyId = useStudyId();
     const projectId = useProjectId();
     const studyName = useStudyName();
     const studyYear = useStudyYear();
@@ -53,7 +51,7 @@ const EditStudyPageHeader: React.FC = () => {
                             },
                             {
                                 text: studyName || '',
-                                link: `/projects/${projectId}/extraction/studies/${studyId}/edit`,
+                                link: '',
                                 isCurrentPage: true,
                             },
                         ]}