From cc285f51d4a1bbefdc5499d31a9cb4ddad3012ee Mon Sep 17 00:00:00 2001
From: Nicholas Lee <niconal902@gmail.com>
Date: Tue, 15 Oct 2024 16:24:36 -0400
Subject: [PATCH] feat: update with feedback

---
 .../src/components/NeurosynthBreadcrumbs.tsx  |  4 +-
 .../src/pages/Extraction/ExtractionPage.tsx   | 20 +----
 .../Extraction/components/ExtractionTable.tsx | 55 ++++++++++---
 .../components/ExtractionTableAuthor.tsx      | 11 ++-
 .../components/ProjectExtractionStepCard.tsx  |  2 +-
 .../src/pages/Study/EditStudyPage.tsx         | 77 ++++++++++---------
 .../DisplayExtractionTableState.tsx           | 18 +++--
 .../EditStudyAnalysisPointsHotTable.tsx       |  2 +-
 .../components/EditStudyCompleteButton.tsx    |  3 +-
 .../components/EditStudySwapVersionButton.tsx | 22 ++++--
 .../src/pages/Study/hooks/useSaveStudy.tsx    |  2 +-
 .../pages/Study/store/StudyStore.helpers.ts   |  2 +-
 12 files changed, 132 insertions(+), 86 deletions(-)

diff --git a/compose/neurosynth-frontend/src/components/NeurosynthBreadcrumbs.tsx b/compose/neurosynth-frontend/src/components/NeurosynthBreadcrumbs.tsx
index ecc7d5f3..caf292ec 100644
--- a/compose/neurosynth-frontend/src/components/NeurosynthBreadcrumbs.tsx
+++ b/compose/neurosynth-frontend/src/components/NeurosynthBreadcrumbs.tsx
@@ -60,7 +60,7 @@ const NeurosynthBreadcrumbs: React.FC<{ breadcrumbItems: INeurosynthBreadcrumbs[
                                 color="secondary"
                                 variant="h6"
                                 sx={{
-                                    maxWidth: '300px',
+                                    maxWidth: '200px',
                                     textOverflow: 'ellipsis',
                                     display: 'block',
                                     overflow: 'hidden',
@@ -81,7 +81,7 @@ const NeurosynthBreadcrumbs: React.FC<{ breadcrumbItems: INeurosynthBreadcrumbs[
                                 sx={{
                                     fontSize: '1.25rem',
                                     cursor: 'pointer',
-                                    maxWidth: '300px',
+                                    maxWidth: '200px',
                                     textOverflow: 'ellipsis',
                                     display: 'block',
                                     overflow: 'hidden',
diff --git a/compose/neurosynth-frontend/src/pages/Extraction/ExtractionPage.tsx b/compose/neurosynth-frontend/src/pages/Extraction/ExtractionPage.tsx
index 0b487b33..71782251 100644
--- a/compose/neurosynth-frontend/src/pages/Extraction/ExtractionPage.tsx
+++ b/compose/neurosynth-frontend/src/pages/Extraction/ExtractionPage.tsx
@@ -15,7 +15,6 @@ import {
     useInitProjectStoreIfRequired,
     useProjectCurationColumns,
     useProjectExtractionStudysetId,
-    useProjectMetaAnalysisCanEdit,
     useProjectName,
     useProjectUser,
 } from 'pages/Project/store/ProjectStore';
@@ -40,7 +39,6 @@ const ExtractionPage: React.FC = (props) => {
     const columns = useProjectCurationColumns();
     const loading = useGetProjectIsLoading();
     const extractionSummary = useGetExtractionSummary(projectId || '');
-    const canEditMetaAnalyses = useProjectMetaAnalysisCanEdit();
     const projectUser = useProjectUser();
     const canEdit = useUserCanEdit(projectUser || undefined);
 
@@ -140,31 +138,19 @@ const ExtractionPage: React.FC = (props) => {
                     </Box>
                     <Box>
                         <Button
-                            sx={{ fontSize: '0.7rem' }}
                             color="secondary"
                             variant="contained"
                             disableElevation
-                            size="small"
                             onClick={() =>
                                 navigate(`/projects/${projectId}/extraction/annotations`)
                             }
                         >
-                            View Annotations
-                        </Button>
-                        <Button
-                            sx={{ marginLeft: '4px', fontSize: '0.7rem' }}
-                            size="small"
-                            color="info"
-                            variant="contained"
-                            disableElevation
-                        >
-                            Mark all as complete
+                            Annotations
                         </Button>
                         <Tooltip title={`${percentageCompleteString} marked as complete`}>
                             <span style={{ width: '100%' }}>
                                 <Button
-                                    size="small"
-                                    sx={{ marginLeft: '4px', fontSize: '0.7rem' }}
+                                    sx={{ marginLeft: '4px' }}
                                     onClick={handleMoveToSpecificationPhase}
                                     color="success"
                                     variant="contained"
@@ -180,7 +166,7 @@ const ExtractionPage: React.FC = (props) => {
                     </Box>
                 </Box>
                 {showReconcilePrompt && <ExtractionOutOfSync />}
-                <Box>
+                <Box sx={{ flexGrow: 1 }}>
                     <Box>
                         <TextEdit
                             editIconIsVisible={canEdit}
diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx
index 2a5d50e2..9944afa5 100644
--- a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx
+++ b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx
@@ -1,5 +1,6 @@
 import {
     Box,
+    Button,
     Chip,
     Pagination,
     Table,
@@ -28,6 +29,7 @@ import { useGetStudysetById } from 'hooks';
 import { IStudyExtractionStatus } from 'hooks/projects/useGetProjects';
 import { StudyReturn } from 'neurostore-typescript-sdk';
 import {
+    useProjectExtractionSetGivenStudyStatusesAsComplete,
     useProjectExtractionStudysetId,
     useProjectExtractionStudyStatusList,
     useProjectId,
@@ -44,6 +46,7 @@ import { ExtractionTablePMIDCell, ExtractionTablePMIDHeader } from './Extraction
 import { ExtractionTableStatusCell, ExtractionTableStatusHeader } from './ExtractionTableStatus';
 import { ExtractionTableYearCell, ExtractionTableYearHeader } from './ExtractionTableYear';
 import { retrieveExtractionTableState } from './ExtractionTable.helpers';
+import ConfirmationDialog from 'components/Dialogs/ConfirmationDialog';
 
 //allows us to define custom properties for our columns
 declare module '@tanstack/react-table' {
@@ -63,11 +66,13 @@ const ExtractionTable: React.FC = () => {
     const navigate = useNavigate();
     const studyStatusList = useProjectExtractionStudyStatusList();
     const { data: studyset } = useGetStudysetById(studysetId, true); // this should already be loaded in the cache from the parent component
+    const setGivenStudyStatusesAsComplete = useProjectExtractionSetGivenStudyStatusesAsComplete();
 
     const [pagination, setPagination] = useState<PaginationState>({
         pageIndex: 0,
         pageSize: 25,
     });
+    const [confirmationDialogIsOpen, setConfirmationDialogIsOpen] = useState(false);
 
     useEffect(() => {
         const state = retrieveExtractionTableState(projectId);
@@ -100,9 +105,9 @@ const ExtractionTable: React.FC = () => {
         return [
             columnHelper.accessor(({ year }) => (year ? String(year) : ''), {
                 id: 'year',
-                size: 70,
-                minSize: 70,
-                maxSize: 70,
+                size: 60,
+                minSize: 60,
+                maxSize: 60,
                 cell: ExtractionTableYearCell,
                 header: ExtractionTableYearHeader,
                 enableSorting: true,
@@ -128,9 +133,9 @@ const ExtractionTable: React.FC = () => {
             }),
             columnHelper.accessor('authors', {
                 id: 'authors',
-                size: 300,
-                minSize: 300,
-                maxSize: 300,
+                size: 100,
+                minSize: 100,
+                maxSize: 100,
                 enableSorting: true,
                 enableColumnFilter: true,
                 sortingFn: 'text',
@@ -156,9 +161,9 @@ const ExtractionTable: React.FC = () => {
             }),
             columnHelper.accessor('pmid', {
                 id: 'pmid',
-                size: 100,
-                minSize: 100,
-                maxSize: 100,
+                size: 80,
+                minSize: 80,
+                maxSize: 80,
                 enableColumnFilter: true,
                 filterFn: 'includesString',
                 cell: ExtractionTablePMIDCell,
@@ -222,6 +227,18 @@ const ExtractionTable: React.FC = () => {
         []
     );
 
+    const handleMarkAllAsComplete = useCallback(
+        (ok: boolean | undefined) => {
+            if (ok) {
+                const studies = (studyset?.studies || []) as Array<StudyReturn>;
+                setGivenStudyStatusesAsComplete(studies.map((x) => x.id) as string[]);
+            }
+
+            setConfirmationDialogIsOpen(false);
+        },
+        [setGivenStudyStatusesAsComplete, studyset?.studies]
+    );
+
     const handlePaginationChange = useCallback((_event: any, page: number) => {
         // page is 0 indexed
         setPagination((prev) => ({
@@ -249,11 +266,29 @@ const ExtractionTable: React.FC = () => {
                     onChange={handlePaginationChangeMuiPaginator}
                     page={pagination.pageIndex + 1}
                 />
+                <Box sx={{ width: '271px', display: 'flex', justifyContent: 'flex-end' }}>
+                    <ConfirmationDialog
+                        onCloseDialog={handleMarkAllAsComplete}
+                        rejectText="Cancel"
+                        confirmText="Mark all as complete"
+                        isOpen={confirmationDialogIsOpen}
+                        dialogTitle="Are you sure you want to mark all the studies as complete?"
+                        dialogMessage="You can skip reviewing to expedite the process, but any studies you have not reviewed may have incomplete or inaccurate metadata or coordinates."
+                    />
+                    <Button
+                        sx={{ marginLeft: '4px' }}
+                        color="success"
+                        disableElevation
+                        onClick={() => setConfirmationDialogIsOpen(true)}
+                    >
+                        Mark all as complete
+                    </Button>
+                </Box>
             </Box>
             <TableContainer sx={{ marginBottom: '2rem' }}>
                 <Table
                     size="small"
-                    sx={{ tableLayout: 'fixed', width: 'fit-content', minWidth: '1200px' }}
+                    sx={{ tableLayout: 'fixed', width: 'fit-content', minWidth: '800px' }}
                 >
                     <TableHead>
                         {table.getHeaderGroups().map((headerGroup) => (
diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableAuthor.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableAuthor.tsx
index 0636a61c..57dd1e2c 100644
--- a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableAuthor.tsx
+++ b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableAuthor.tsx
@@ -8,7 +8,16 @@ export const ExtractionTableAuthorCell: React.FC<CellContext<IExtractionTableStu
     props
 ) => {
     const value = props.getValue();
-    return <Typography variant="body2">{value}</Typography>;
+    let shortName = value;
+    const authorsList = (value || '').split(',');
+    if (authorsList.length > 1) {
+        shortName = `${authorsList[0]}., et al.`;
+    }
+    return (
+        <Tooltip title={value ? <Typography variant="body2">{value}</Typography> : null}>
+            <Typography variant="body2">{shortName}</Typography>
+        </Tooltip>
+    );
 };
 
 export const ExtractionTableAuthorHeader: React.FC<
diff --git a/compose/neurosynth-frontend/src/pages/Project/components/ProjectExtractionStepCard.tsx b/compose/neurosynth-frontend/src/pages/Project/components/ProjectExtractionStepCard.tsx
index 5acb968e..a27442e6 100644
--- a/compose/neurosynth-frontend/src/pages/Project/components/ProjectExtractionStepCard.tsx
+++ b/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="info"
+                            color="success"
                             disabled={disabled}
                         >
                             Mark all as complete
diff --git a/compose/neurosynth-frontend/src/pages/Study/EditStudyPage.tsx b/compose/neurosynth-frontend/src/pages/Study/EditStudyPage.tsx
index 7509af29..2aa0eb87 100644
--- a/compose/neurosynth-frontend/src/pages/Study/EditStudyPage.tsx
+++ b/compose/neurosynth-frontend/src/pages/Study/EditStudyPage.tsx
@@ -87,44 +87,47 @@ const EditStudyPage: React.FC = (props) => {
                 !studyStoreId || !annotationStoreId || getStudyIsLoading || getAnnotationIsLoading
             }
         >
-            <EditStudyPageHeader />
-            <EditStudyAnnotations />
-            <EditStudyAnalyses />
-            <EditStudyDetails />
-            <Box sx={{ marginBottom: '5rem' }}>
-                <EditStudyMetadata />
-            </Box>
-            <Box sx={EditStudyPageStyles.loadingButtonContainer}>
-                <Box sx={{ width: '20%', justifyContent: 'flex-start' }}>
-                    <ConfirmationDialog
-                        isOpen={confirmationDialogIsOpen}
-                        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"
-                    />
-                    <Button
-                        color="secondary"
-                        disableElevation
-                        sx={{ width: '200px' }}
-                        variant="contained"
-                        onClick={handleBackToExtraction}
-                    >
-                        Back to extraction
-                    </Button>
+            <Box>
+                <EditStudyPageHeader />
+                <EditStudyAnnotations />
+                <EditStudyAnalyses />
+                <EditStudyDetails />
+                <Box sx={{ marginBottom: '5rem' }}>
+                    <EditStudyMetadata />
                 </Box>
-                <Box
-                    sx={{
-                        width: '60%',
-                        display: 'flex',
-                        justifyContent: 'center',
-                    }}
-                >
-                    <DisplayExtractionTableState />
-                </Box>
-                <Box sx={{ width: '20%', display: 'flex', justifyContent: 'flex-end' }}>
-                    <EditStudyCompleteButton />
+                <Box sx={[EditStudyPageStyles.loadingButtonContainer]}>
+                    <Box sx={{ width: '20%', justifyContent: 'flex-start' }}>
+                        <ConfirmationDialog
+                            isOpen={confirmationDialogIsOpen}
+                            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"
+                        />
+                        <Button
+                            color="secondary"
+                            disableElevation
+                            size="small"
+                            sx={{ width: '160px' }}
+                            variant="contained"
+                            onClick={handleBackToExtraction}
+                        >
+                            Back to extraction
+                        </Button>
+                    </Box>
+                    <Box
+                        sx={{
+                            width: '60%',
+                            display: 'flex',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <DisplayExtractionTableState />
+                    </Box>
+                    <Box sx={{ width: '20%', display: 'flex', justifyContent: 'flex-end' }}>
+                        <EditStudyCompleteButton />
+                    </Box>
                 </Box>
             </Box>
         </StateHandlerComponent>
diff --git a/compose/neurosynth-frontend/src/pages/Study/components/DisplayExtractionTableState.tsx b/compose/neurosynth-frontend/src/pages/Study/components/DisplayExtractionTableState.tsx
index 9774614a..982bfa91 100644
--- a/compose/neurosynth-frontend/src/pages/Study/components/DisplayExtractionTableState.tsx
+++ b/compose/neurosynth-frontend/src/pages/Study/components/DisplayExtractionTableState.tsx
@@ -135,8 +135,9 @@ const DisplayExtractionTableState: React.FC = (props) => {
                         <Typography
                             sx={{
                                 textOverflow: 'ellipsis',
-                                maxWidth: '200px',
-                                width: '200px',
+                                maxWidth: '100px',
+                                width: '100px',
+                                fontSize: '8px',
                                 whiteSpace: 'nowrap',
                                 overflow: 'hidden',
                                 textAlign: 'start',
@@ -148,7 +149,7 @@ const DisplayExtractionTableState: React.FC = (props) => {
                     </Button>
                 </Tooltip>
             ) : (
-                <Box sx={{ width: '200px' }}></Box>
+                <Box sx={{ width: '100px' }}></Box>
             )}
             <Tooltip
                 title={
@@ -176,13 +177,13 @@ const DisplayExtractionTableState: React.FC = (props) => {
                         alignItems: 'center',
                     }}
                 >
-                    <Typography sx={{ display: 'block' }} variant="caption">
+                    <Typography sx={{ display: 'block', fontSize: '10px' }}>
                         {thisStudyIndex + 1} of {(extractionTableState?.studies || []).length}
                         <span style={{ color: 'gray', marginLeft: '4px' }}>
                             ({data?.studies?.length || 0} total)
                         </span>
                     </Typography>
-                    <Typography sx={{ display: 'block' }} variant="caption">
+                    <Typography sx={{ display: 'block', fontSize: '10px' }}>
                         {(extractionTableState?.columnFilters || []).length > 0 && (
                             <>{(extractionTableState?.columnFilters || []).length} filters</>
                         )}
@@ -211,8 +212,9 @@ const DisplayExtractionTableState: React.FC = (props) => {
                         <Typography
                             sx={{
                                 textOverflow: 'ellipsis',
-                                maxWidth: '200px',
-                                width: '200px',
+                                maxWidth: '100px',
+                                width: '100px',
+                                fontSize: '8px',
                                 whiteSpace: 'nowrap',
                                 overflow: 'hidden',
                                 textAlign: 'end',
@@ -224,7 +226,7 @@ const DisplayExtractionTableState: React.FC = (props) => {
                     </Button>
                 </Tooltip>
             ) : (
-                <Box sx={{ width: '200px' }}></Box>
+                <Box sx={{ width: '100px' }}></Box>
             )}
         </Box>
     );
diff --git a/compose/neurosynth-frontend/src/pages/Study/components/EditStudyAnalysisPointsHotTable.tsx b/compose/neurosynth-frontend/src/pages/Study/components/EditStudyAnalysisPointsHotTable.tsx
index 83aa450d..70200821 100644
--- a/compose/neurosynth-frontend/src/pages/Study/components/EditStudyAnalysisPointsHotTable.tsx
+++ b/compose/neurosynth-frontend/src/pages/Study/components/EditStudyAnalysisPointsHotTable.tsx
@@ -243,7 +243,7 @@ const EditStudyAnalysisPointsHotTable: React.FC<{ analysisId?: string; readOnly?
                             onDeleteRows={handleDeleteRows}
                         />
                     </Box>
-                    <Box sx={{ height: height, width: '100%' }}>
+                    <Box sx={{ height: height, width: '567px' }}>
                         <HotTable
                             {...EditStudyAnalysisPointsDefaultConfig}
                             ref={hotTableRef}
diff --git a/compose/neurosynth-frontend/src/pages/Study/components/EditStudyCompleteButton.tsx b/compose/neurosynth-frontend/src/pages/Study/components/EditStudyCompleteButton.tsx
index 70478b8a..7241548e 100644
--- a/compose/neurosynth-frontend/src/pages/Study/components/EditStudyCompleteButton.tsx
+++ b/compose/neurosynth-frontend/src/pages/Study/components/EditStudyCompleteButton.tsx
@@ -28,9 +28,10 @@ const EditStudyCompleteButton: React.FC = React.memo((props) => {
     return (
         <Box>
             <LoadingButton
-                sx={{ width: '200px' }}
+                sx={{ width: '175px' }}
                 variant="contained"
                 color="success"
+                size="small"
                 disabled={extractionStatus?.status === EExtractionStatus.COMPLETED}
                 disableElevation
                 loaderColor="secondary"
diff --git a/compose/neurosynth-frontend/src/pages/Study/components/EditStudySwapVersionButton.tsx b/compose/neurosynth-frontend/src/pages/Study/components/EditStudySwapVersionButton.tsx
index 598e1b3e..1b1f75d6 100644
--- a/compose/neurosynth-frontend/src/pages/Study/components/EditStudySwapVersionButton.tsx
+++ b/compose/neurosynth-frontend/src/pages/Study/components/EditStudySwapVersionButton.tsx
@@ -15,7 +15,7 @@ import ProgressLoader from 'components/ProgressLoader';
 import { setAnalysesInAnnotationAsIncluded } from 'helpers/Annotation.helpers';
 import { hasUnsavedStudyChanges, unsetUnloadHandler } from 'helpers/BeforeUnload.helpers';
 import { lastUpdatedAtSortFn } from 'helpers/utils';
-import { useGetStudysetById, useUpdateStudyset } from 'hooks';
+import { useGetStudysetById, useUpdateStudy, useUpdateStudyset } from 'hooks';
 import useGetBaseStudyById from 'hooks/studies/useGetBaseStudyById';
 import { StudyReturn } from 'neurostore-typescript-sdk';
 import { useSnackbar } from 'notistack';
@@ -25,7 +25,11 @@ import {
     useProjectExtractionStudysetId,
     useProjectId,
 } from 'pages/Project/store/ProjectStore';
-import { useStudyBaseStudyId, useStudyId } from 'pages/Study/store/StudyStore';
+import {
+    useStudyBaseStudyId,
+    useStudyId,
+    useUpdateStudyDetails,
+} from 'pages/Study/store/StudyStore';
 import React, { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAnnotationId } from 'stores/AnnotationStore.getters';
@@ -41,6 +45,7 @@ const EditStudySwapVersionButton: React.FC = (props) => {
     const updateStudyListStatusWithNewStudyId = useProjectExtractionReplaceStudyListStatusId();
     const studysetId = useProjectExtractionStudysetId();
     const { data: studyset } = useGetStudysetById(studysetId, false);
+    const updateStudyByField = useUpdateStudyDetails();
     const navigate = useNavigate();
     const { enqueueSnackbar } = useSnackbar();
 
@@ -109,6 +114,8 @@ const EditStudySwapVersionButton: React.FC = (props) => {
                 },
             });
             updateStudyListStatusWithNewStudyId(studyId, versionToSwapTo);
+            updateStudyByField('id', versionToSwapTo);
+            unsetUnloadHandler('study');
             updateExtractionTableStateInStorage(projectId, studyId, versionToSwapTo);
             await setAnalysesInAnnotationAsIncluded(annotationId);
 
@@ -230,24 +237,27 @@ const EditStudySwapVersionButton: React.FC = (props) => {
                         <ListItem key={version.id} sx={{ padding: '0.2rem 1rem' }}>
                             <ListItemButton
                                 selected={isCurrentlySelected}
-                                sx={{ ':hover': { backgroundColor: 'transparent' }, py: '0' }}
+                                sx={{ ':hover': { backgroundColor: 'transparent' }, p: '0' }}
                             >
                                 <ButtonGroup variant="text">
                                     <Button
                                         onClick={() => handleSwitchVersion(version.id)}
                                         sx={{
-                                            width: '450px',
+                                            width: '300px',
                                             textTransform: 'none',
                                             display: 'flex',
                                             alignItems: 'flex-start',
                                             flexDirection: 'column',
                                         }}
                                     >
-                                        <Typography variant="body2" textAlign="left">
+                                        <Typography variant="caption" textAlign="left">
                                             Switch to version: {version.id}
                                         </Typography>
                                         <Typography variant="caption" color="gray" textAlign="left">
-                                            Last Modified: {lastUpdated} | Owner: {username}
+                                            Last Modified: {lastUpdated}
+                                        </Typography>
+                                        <Typography variant="caption" color="gray" textAlign="left">
+                                            Owner: {username}
                                         </Typography>
                                     </Button>
                                     <Button
diff --git a/compose/neurosynth-frontend/src/pages/Study/hooks/useSaveStudy.tsx b/compose/neurosynth-frontend/src/pages/Study/hooks/useSaveStudy.tsx
index 336c0b84..4f7c8f1e 100644
--- a/compose/neurosynth-frontend/src/pages/Study/hooks/useSaveStudy.tsx
+++ b/compose/neurosynth-frontend/src/pages/Study/hooks/useSaveStudy.tsx
@@ -237,7 +237,7 @@ const useSaveStudy = () => {
             unsetUnloadHandler('annotation');
 
             navigate(`/projects/${projectId}/extraction/studies/${clonedStudyId}/edit`);
-            enqueueSnackbar('Saved successfully. You are now the owner of this study', {
+            enqueueSnackbar('Made a new a copy and saved succesfully', {
                 variant: 'success',
             });
 
diff --git a/compose/neurosynth-frontend/src/pages/Study/store/StudyStore.helpers.ts b/compose/neurosynth-frontend/src/pages/Study/store/StudyStore.helpers.ts
index 0a7f2bb6..6fa601e4 100644
--- a/compose/neurosynth-frontend/src/pages/Study/store/StudyStore.helpers.ts
+++ b/compose/neurosynth-frontend/src/pages/Study/store/StudyStore.helpers.ts
@@ -114,7 +114,7 @@ export interface IStoreStudy extends Omit<StudyReturn, 'metadata' | 'analyses'>
 
 export type StudyDetails = Pick<
     StudyReturn,
-    'name' | 'description' | 'publication' | 'authors' | 'doi' | 'pmid' | 'pmcid' | 'year'
+    'id' | 'name' | 'description' | 'publication' | 'authors' | 'doi' | 'pmid' | 'pmcid' | 'year'
 >;
 
 export type IStudyVersion = Pick<StudyReturn, 'user' | 'id'>;