feat: finished implementing clone on save

neurostuff · Oct 27, 2023 · 5b3210c · 5b3210c
1 parent ad50dd7
commit 5b3210c
Show file tree

Hide file tree

Showing 18 changed files with 506 additions and 259 deletions.
diff --git a/...mponents/DisplayStudy/DisplayAnalyses/DisplayAnalysisWarnings/DisplayAnalysisWarnings.tsx b/...mponents/DisplayStudy/DisplayAnalyses/DisplayAnalysisWarnings/DisplayAnalysisWarnings.tsx
@@ -2,17 +2,17 @@ import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import { Chip } from '@mui/material';
 import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
 import useDisplayWarnings from './useDisplayWarnings';
-import { useStudyIsLoading } from 'pages/Studies/StudyStore';
+import { useGetStudyIsLoading } from 'pages/Studies/StudyStore';
 
 const DisplayAnalysisWarnings: React.FC<{ analysisId: string }> = (props) => {
-    const studyIsLoading = useStudyIsLoading();
+    const getStudyIsLoading = useGetStudyIsLoading();
 
     const { hasNoPoints, hasNoName, hasDuplicateName, hasNonMNICoordinates } = useDisplayWarnings(
         props.analysisId
     );
 
     return (
-        <StateHandlerComponent isLoading={studyIsLoading} isError={false} loaderSize={20}>
+        <StateHandlerComponent isLoading={getStudyIsLoading} isError={false} loaderSize={20}>
             {hasNoPoints && (
                 <Chip
                     sx={{ margin: '2px', marginBottom: '1rem' }}

diff --git a/compose/neurosynth-frontend/src/components/DisplayStudy/DisplayStudy.tsx b/compose/neurosynth-frontend/src/components/DisplayStudy/DisplayStudy.tsx
@@ -26,16 +26,17 @@ const DisplayStudy: React.FC<Optional<IStoreStudy, 'metadata'>> = (props) => {
     return (
         <Box>
             <Box data-tour="StudyPage-1">
-                <Box sx={{ marginBottom: '0.5rem', display: 'flex', alignItems: 'center' }}>
-                    <Typography sx={{ display: 'inline' }} variant="h6">
-                        {id && (
-                            <Chip
-                                variant="filled"
-                                sx={{ marginRight: '5px', borderRadius: '8px' }}
-                                size="medium"
-                                label={`Version: ${id}` || ''}
-                            />
-                        )}
+                <Box sx={{ marginBottom: '0.5rem' }}>
+                    {id && (
+                        <Chip
+                            variant="filled"
+                            color="primary"
+                            sx={{ marginRight: '5px', borderRadius: '8px', marginBottom: '0.5rem' }}
+                            size="medium"
+                            label={`Version: ${id}` || ''}
+                        />
+                    )}
+                    <Typography variant="h6">
                         <b>{name}</b>
                     </Typography>
                 </Box>

diff --git a/compose/neurosynth-frontend/src/components/EditStudyComponents/EditAnalyses/EditAnalyses.tsx b/compose/neurosynth-frontend/src/components/EditStudyComponents/EditAnalyses/EditAnalyses.tsx
@@ -2,7 +2,7 @@ import { Add } from '@mui/icons-material';
 import { Box, Button, Divider, Typography } from '@mui/material';
 import CreateDetailsDialog from 'components/Dialogs/CreateDetailsDialog/CreateDetailsDialog';
 import { useAddOrUpdateAnalysis, useNumStudyAnalyses, useStudyId } from 'pages/Studies/StudyStore';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import EditAnalysesList from './EditAnalysesList/EditAnalysesList';
 import EditAnalysis from './EditAnalysis/EditAnalysis';
 import NeurosynthAccordion from 'components/NeurosynthAccordion/NeurosynthAccordion';
@@ -33,9 +33,9 @@ const EditAnalyses: React.FC = React.memo((props) => {
         createAnnotationNote(createdAnalysis.id, studyId, name);
     };
 
-    const handleSelectAnalysis = (analysisId: string) => {
+    const handleSelectAnalysis = useCallback((analysisId: string) => {
         setSelectedAnalysisId(analysisId);
-    };
+    }, []);
 
     const handleOnDeleteAnalysis = () => {
         setSelectedAnalysisId(undefined);

diff --git a/...end/src/components/EditStudyComponents/EditAnalyses/EditAnalysesList/EditAnalysesList.tsx b/...end/src/components/EditStudyComponents/EditAnalyses/EditAnalysesList/EditAnalysesList.tsx
@@ -1,37 +1,42 @@
 import { Box, List } from '@mui/material';
 import { useStudyAnalyses } from 'pages/Studies/StudyStore';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import EditAnalysesListItem from './EditAnalysesListItem';
 
 const EditAnalysesList: React.FC<{
     onSelectAnalysis: (analysisId: string) => void;
     selectedAnalysisId?: string;
 }> = (props) => {
+    const { onSelectAnalysis, selectedAnalysisId } = props;
+
     const analyses = useStudyAnalyses();
     const [selectedIndex, setSelectedIndex] = useState(0);
 
-    const handleSelectAnalysis = (analysisId: string, index: number) => {
-        setSelectedIndex(index);
-        props.onSelectAnalysis(analysisId);
-    };
+    const handleSelectAnalysis = useCallback(
+        (analysisId: string, index: number) => {
+            setSelectedIndex(index);
+            onSelectAnalysis(analysisId);
+        },
+        [onSelectAnalysis]
+    );
 
     useEffect(() => {
         if (!analyses[0]?.id) return;
 
-        if (!props.selectedAnalysisId) {
+        if (!selectedAnalysisId) {
             // select the first analysis on first render
-            props.onSelectAnalysis(analyses[0].id);
+            onSelectAnalysis(analyses[0].id);
             return;
         }
 
-        if (!analyses.find((x) => x.id === props.selectedAnalysisId)) {
+        if (!analyses.find((x) => x.id === selectedAnalysisId)) {
             // when a new analysis is created and saved in the DB, it is given a neurostore ID which replaces the temporary one
             // initially given. We need to handle this case, otherwise the UI will show nothing is currently selected
             const newAnalysisId = analyses[selectedIndex].id;
             if (!newAnalysisId) return;
-            props.onSelectAnalysis(newAnalysisId);
+            onSelectAnalysis(newAnalysisId);
         }
-    }, [analyses, props, selectedIndex]);
+    }, [analyses, onSelectAnalysis, selectedIndex, selectedAnalysisId]);
 
     return (
         <Box

diff --git a/...frontend/src/components/EditStudyComponents/EditStudyAnnotations/EditStudyAnnotations.tsx b/...frontend/src/components/EditStudyComponents/EditStudyAnnotations/EditStudyAnnotations.tsx
@@ -2,15 +2,10 @@ import { Box, Typography } from '@mui/material';
 import EditStudyComponentsStyles from 'components/EditStudyComponents/EditStudyComponents.styles';
 import EditStudyAnnotationsHotTable from 'components/HotTables/EditStudyAnnotationsHotTable/EditStudyAnnotationsHotTable';
 import NeurosynthAccordion from 'components/NeurosynthAccordion/NeurosynthAccordion';
-import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
-import { useStudyAnalyses } from 'pages/Studies/StudyStore';
-import { useAnnotationIsError, useAnnotationIsLoading } from 'stores/AnnotationStore.getters';
+import { useNumStudyAnalyses } from 'pages/Studies/StudyStore';
 
 const EditStudyAnnotations: React.FC = (props) => {
-    const analyses = useStudyAnalyses();
-    const isLoading = useAnnotationIsLoading();
-    const isError = useAnnotationIsError();
-
+    const numAnalyses = useNumStudyAnalyses();
     return (
         <NeurosynthAccordion
             elevation={0}
@@ -25,7 +20,7 @@ const EditStudyAnnotations: React.FC = (props) => {
             }
         >
             <Box sx={{ padding: '1rem 0' }}>
-                {analyses.length === 0 ? (
+                {numAnalyses === 0 ? (
                     <Typography sx={{ color: 'warning.dark' }}>
                         There are no annotations for this study. To get started, add an analysis
                         below

diff --git a/...es/EditStudyPage/EditStudyPage.helpers.ts → ...SaveButton/EditStudySaveButton.helpers.ts b/...es/EditStudyPage/EditStudyPage.helpers.ts → ...SaveButton/EditStudySaveButton.helpers.ts
@@ -1,4 +1,4 @@
-import { IStoreAnalysis } from '../StudyStore.helpers';
+import { IStoreAnalysis } from 'pages/Studies/StudyStore.helpers';
 
 export const hasDuplicateStudyAnalysisNames = (
     analyses: IStoreAnalysis[]