654 ux adding a new analysis puts it at top (#703)

* feat: update with latest openapi spec and fix up create-analysis-ux

* chore: remove unused code

* fix: align display analyses list component

* update submodule

---------

Co-authored-by: James Kent <[email protected]>

Author: nicoalee

compose/neurosynth-frontend/src/components/DisplayStudy/DisplayAnalyses/DisplayAnalyses.tsx

@@ -1,39 +1,45 @@
 import { Box } from '@mui/material';
 import DisplayAnalysesList from './DisplayAnalysesList/DisplayAnalysesList';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import DisplayAnalysis from './DisplayAnalysis/DisplayAnalysis';
 import { IStoreAnalysis } from 'pages/Studies/StudyStore.helpers';
 
 const DisplayAnalyses: React.FC<{
     id: string | undefined;
     analyses: IStoreAnalysis[];
 }> = (props) => {
-    const [selectedAnalysisIndex, setSelectedAnalysisIndex] = useState(0);
+    const [selectedAnalysisId, setSelectedAnalysisId] = useState<string | undefined>('');
 
     useEffect(() => {
-        setSelectedAnalysisIndex(0);
-    }, [props.id]);
+        if (props.analyses.length <= 0) return;
+        setSelectedAnalysisId(props.analyses[0].id);
+    }, [props.analyses, props.id]);
 
-    const handleSelectAnalysis = (index: number) => {
-        if (props.analyses[index]) {
-            setSelectedAnalysisIndex(index);
+    const handleSelectAnalysis = (id: string) => {
+        const index = props.analyses.findIndex((a) => a.id === id);
+        if (index < 0) {
+            return;
         } else {
-            setSelectedAnalysisIndex(0);
+            setSelectedAnalysisId(props.analyses[index].id);
         }
     };
 
-    const selectedAnalysis = props.analyses[selectedAnalysisIndex];
+    const selectedAnalysis = useMemo(() => {
+        return props.analyses.find((a) => a.id === selectedAnalysisId);
+    }, [props.analyses, selectedAnalysisId]);
 
     return (
         <Box sx={{ display: 'flex' }}>
             <DisplayAnalysesList
-                selectedIndex={selectedAnalysisIndex}
+                selectedId={selectedAnalysisId}
                 onSelectAnalysisIndex={handleSelectAnalysis}
                 analyses={props.analyses}
             />
-            <Box sx={{ padding: '1rem', width: 'calc(100% - 250px - 2rem)', height: '100%' }}>
-                <DisplayAnalysis {...selectedAnalysis} />
-            </Box>
+            {selectedAnalysis && (
+                <Box sx={{ padding: '1rem', width: 'calc(100% - 250px - 2rem)', height: '100%' }}>
+                    <DisplayAnalysis {...selectedAnalysis} />
+                </Box>
+            )}
         </Box>
     );
 };

compose/neurosynth-frontend/src/components/DisplayStudy/DisplayAnalyses/DisplayAnalysesList/DisplayAnalysesList.tsx

@@ -4,8 +4,8 @@ import { IStoreAnalysis } from 'pages/Studies/StudyStore.helpers';
 
 const DisplayAnalysesList: React.FC<{
     analyses: IStoreAnalysis[];
-    selectedIndex: number;
-    onSelectAnalysisIndex: (index: number) => void;
+    selectedId: string | undefined;
+    onSelectAnalysisIndex: (id: string) => void;
 }> = (props) => {
     return (
         <Box
@@ -23,13 +23,12 @@ const DisplayAnalysesList: React.FC<{
                 }}
                 disablePadding
             >
-                {props.analyses.map((analysis, index) => (
+                {props.analyses.map((analysis) => (
                     <EditAnalysesListItem
-                        key={analysis.id || index}
+                        key={analysis.id}
                         analysis={analysis}
-                        index={index}
-                        selected={props.selectedIndex === index}
-                        onSelectAnalysis={(id, i) => props.onSelectAnalysisIndex(i)}
+                        selected={(props.selectedId || undefined) === (analysis.id || null)}
+                        onSelectAnalysis={(id) => props.onSelectAnalysisIndex(id)}
                     />
                 ))}
             </List>

compose/neurosynth-frontend/src/components/DisplayStudy/DisplayAnalyses/DisplayAnalysisWarnings/__mocks__/useDisplayWarnings.tsx

@@ -0,0 +1,8 @@
+const useDisplayWarnings = jest.fn().mockReturnValue({
+    hasDuplicateName: false,
+    hasNoName: false,
+    hasNoPoints: false,
+    hasNonMNICoordinates: false,
+});
+
+export default useDisplayWarnings;

compose/neurosynth-frontend/src/components/EditStudyComponents/EditAnalyses/EditAnalyses.tsx

@@ -1,46 +1,60 @@
 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 { useCallback, useState } from 'react';
-import EditAnalysesList from './EditAnalysesList/EditAnalysesList';
-import EditAnalysis from './EditAnalysis/EditAnalysis';
-import NeurosynthAccordion from 'components/NeurosynthAccordion/NeurosynthAccordion';
 import EditStudyComponentsStyles from 'components/EditStudyComponents/EditStudyComponents.styles';
+import NeurosynthAccordion from 'components/NeurosynthAccordion/NeurosynthAccordion';
+import { useAddOrUpdateAnalysis, useStudyAnalyses, useStudyId } from 'pages/Studies/StudyStore';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useCreateAnnotationNote } from 'stores/AnnotationStore.actions';
-import React from 'react';
+import EditAnalysesList from './EditAnalysesList/EditAnalysesList';
+import EditAnalysis from './EditAnalysis/EditAnalysis';
 
 const EditAnalyses: React.FC = React.memo((props) => {
-    const numAnalyses = useNumStudyAnalyses();
+    const analyses = useStudyAnalyses();
     const studyId = useStudyId();
     const addOrUpdateAnalysis = useAddOrUpdateAnalysis();
     const createAnnotationNote = useCreateAnnotationNote();
     const [selectedAnalysisId, setSelectedAnalysisId] = useState<string>();
-    const [createNewAnalysisDialogIsOpen, setCreateNewAnalysisDialogIsOpen] = useState(false);
 
-    const handleCreateNewAnalysis = (name: string, description: string) => {
+    const handleCreateNewAnalysis = () => {
         if (!studyId) return;
 
         const createdAnalysis = addOrUpdateAnalysis({
-            name,
-            description,
+            name: '',
+            description: '',
             isNew: true,
             conditions: [],
         });
 
         if (!createdAnalysis.id) return;
 
-        createAnnotationNote(createdAnalysis.id, studyId, name);
+        createAnnotationNote(createdAnalysis.id, studyId, '');
     };
 
     const handleSelectAnalysis = useCallback((analysisId: string) => {
         setSelectedAnalysisId(analysisId);
     }, []);
 
-    const handleOnDeleteAnalysis = () => {
-        setSelectedAnalysisId(undefined);
+    const handleAfterAnalysisDeleted = () => {
+        if (analyses.length <= 1) {
+            setSelectedAnalysisId(undefined);
+            return;
+        }
+        const analysisIndex = analyses.findIndex((analysis) => analysis.id === selectedAnalysisId);
+
+        if (analysisIndex === 0) {
+            setSelectedAnalysisId(analyses[1].id);
+            return;
+        }
+        setSelectedAnalysisId(analyses[analysisIndex - 1].id);
     };
 
+    useEffect(() => {
+        if (!selectedAnalysisId) {
+            // select the first analysis on first render
+            setSelectedAnalysisId(analyses[0].id);
+        }
+    }, [analyses, selectedAnalysisId]);
+
     return (
         <NeurosynthAccordion
             elevation={0}
@@ -60,19 +74,13 @@ const EditAnalyses: React.FC = React.memo((props) => {
         >
             <Box sx={{ width: '100%', margin: '0.5rem 0' }}>
                 <Box sx={{ marginBottom: '1rem' }}>
-                    {numAnalyses === 0 && (
+                    {analyses.length === 0 && (
                         <Typography sx={{ color: 'warning.dark' }} gutterBottom>
                             There are no analyses for this study.
                         </Typography>
                     )}
-                    <CreateDetailsDialog
-                        titleText="Create new analysis"
-                        onCreate={handleCreateNewAnalysis}
-                        onCloseDialog={() => setCreateNewAnalysisDialogIsOpen(false)}
-                        isOpen={createNewAnalysisDialogIsOpen}
-                    />
                     <Button
-                        onClick={() => setCreateNewAnalysisDialogIsOpen(true)}
+                        onClick={handleCreateNewAnalysis}
                         sx={{ width: '150px' }}
                         variant="contained"
                         disableElevation
@@ -81,11 +89,12 @@ const EditAnalyses: React.FC = React.memo((props) => {
                         analysis
                     </Button>
                 </Box>
-                {numAnalyses > 0 && (
+                {analyses.length > 0 && (
                     <>
                         <Divider />
                         <Box sx={{ display: 'flex' }}>
                             <EditAnalysesList
+                                analyses={analyses}
                                 selectedAnalysisId={selectedAnalysisId}
                                 onSelectAnalysis={handleSelectAnalysis}
                             />
@@ -96,7 +105,7 @@ const EditAnalyses: React.FC = React.memo((props) => {
                                 }}
                             >
                                 <EditAnalysis
-                                    onDeleteAnalysis={handleOnDeleteAnalysis}
+                                    onDeleteAnalysis={handleAfterAnalysisDeleted}
                                     analysisId={selectedAnalysisId}
                                 />
                             </Box>

compose/neurosynth-frontend/src/components/EditStudyComponents/EditAnalyses/EditAnalysesList/EditAnalysesList.spec.tsx

@@ -0,0 +1,95 @@
+import { render, screen } from '@testing-library/react';
+import EditAnalysesList from './EditAnalysesList';
+import { IStoreAnalysis } from 'pages/Studies/StudyStore.helpers';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('components/EditStudyComponents/EditAnalyses/EditAnalysesList/EditAnalysesListItem.tsx');
+
+describe('EditAnalysesList Component', () => {
+    it('should render', () => {
+        render(
+            <EditAnalysesList onSelectAnalysis={() => {}} selectedAnalysisId="" analyses={[]} />
+        );
+    });
+
+    it('should show two analyses in the list', () => {
+        const mockAnalyses: IStoreAnalysis[] = [
+            {
+                id: 'test-id-1',
+                name: 'test-name-1',
+                description: 'test-description-1',
+                isNew: false,
+                conditions: [],
+                points: [],
+                pointSpace: {
+                    value: '',
+                    label: '',
+                },
+                pointStatistic: {
+                    value: '',
+                    label: '',
+                },
+            },
+            {
+                id: 'test-id-2',
+                name: 'test-name-2',
+                description: 'test-description-2',
+                isNew: false,
+                conditions: [],
+                points: [],
+                pointSpace: {
+                    value: '',
+                    label: '',
+                },
+                pointStatistic: {
+                    value: '',
+                    label: '',
+                },
+            },
+        ];
+        render(
+            <EditAnalysesList
+                onSelectAnalysis={() => {}}
+                selectedAnalysisId=""
+                analyses={mockAnalyses}
+            />
+        );
+
+        mockAnalyses.forEach((mockAnalysis) => {
+            expect(screen.getByText(mockAnalysis.name as string)).toBeInTheDocument();
+            expect(screen.getByText(mockAnalysis.description as string)).toBeInTheDocument();
+        });
+    });
+
+    it('should call the onSelectAnalysis function when analysis is selected', () => {
+        const handleOnSelectAnalysisMock = jest.fn();
+        const mockAnalyses: IStoreAnalysis[] = [
+            {
+                id: 'test-id-1',
+                name: 'test-name-1',
+                description: 'test-description-1',
+                isNew: false,
+                conditions: [],
+                points: [],
+                pointSpace: {
+                    value: '',
+                    label: '',
+                },
+                pointStatistic: {
+                    value: '',
+                    label: '',
+                },
+            },
+        ];
+        render(
+            <EditAnalysesList
+                onSelectAnalysis={handleOnSelectAnalysisMock}
+                selectedAnalysisId=""
+                analyses={mockAnalyses}
+            />
+        );
+
+        userEvent.click(screen.getByTestId('test-trigger-select-analysis'));
+        expect(handleOnSelectAnalysisMock).toHaveBeenCalledWith(mockAnalyses[0].id);
+    });
+});

compose/neurosynth-frontend/src/components/EditStudyComponents/EditAnalyses/EditAnalysesList/EditAnalysesList.tsx

@@ -1,43 +1,22 @@
 import { Box, List } from '@mui/material';
-import { useStudyAnalyses } from 'pages/Studies/StudyStore';
-import { useCallback, useEffect, useState } from 'react';
+import { IStoreAnalysis } from 'pages/Studies/StudyStore.helpers';
+import { useCallback } from 'react';
 import EditAnalysesListItem from './EditAnalysesListItem';
 
 const EditAnalysesList: React.FC<{
     onSelectAnalysis: (analysisId: string) => void;
     selectedAnalysisId?: string;
+    analyses: IStoreAnalysis[];
 }> = (props) => {
-    const { onSelectAnalysis, selectedAnalysisId } = props;
-
-    const analyses = useStudyAnalyses();
-    const [selectedIndex, setSelectedIndex] = useState(0);
+    const { onSelectAnalysis, selectedAnalysisId, analyses } = props;
 
     const handleSelectAnalysis = useCallback(
-        (analysisId: string, index: number) => {
-            setSelectedIndex(index);
+        (analysisId: string) => {
             onSelectAnalysis(analysisId);
         },
         [onSelectAnalysis]
     );
 
-    useEffect(() => {
-        if (!analyses[0]?.id) return;
-
-        if (!selectedAnalysisId) {
-            // select the first analysis on first render
-            onSelectAnalysis(analyses[0].id);
-            return;
-        }
-
-        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;
-            onSelectAnalysis(newAnalysisId);
-        }
-    }, [analyses, onSelectAnalysis, selectedIndex, selectedAnalysisId]);
-
     return (
         <Box
             sx={{
@@ -54,13 +33,12 @@ const EditAnalysesList: React.FC<{
                 }}
                 disablePadding
             >
-                {analyses.map((analysis, index) => (
+                {analyses.map((analysis) => (
                     <EditAnalysesListItem
-                        key={analysis.id || index}
+                        key={analysis.id}
                         analysis={analysis}
-                        index={index}
                         onSelectAnalysis={handleSelectAnalysis}
-                        selected={(analysis.id || null) === (props.selectedAnalysisId || undefined)}
+                        selected={(analysis.id || null) === (selectedAnalysisId || undefined)}
                     />
                 ))}
             </List>