feat: updated tests and removed old types (#365)

compose/neurosynth-frontend/src/components/DisplayAnalysis/DisplayAnalysis.spec.tsx

@@ -1,10 +1,19 @@
 import { render, screen } from '@testing-library/react';
 import DisplayAnalysis from './DisplayAnalysis';
 import { AnalysisReturn, ImageReturn } from 'neurostore-typescript-sdk';
+import { DataGridProps } from '@mui/x-data-grid';
 
 jest.mock('../Visualizer/Visualizer');
-jest.mock('../Tables/DisplayValuesTable/DisplayValuesTable');
 jest.mock('../Tables/DisplayImagesTable/DisplayImagesTable');
+jest.mock('@mui/x-data-grid', () => {
+    const { DataGrid } = jest.requireActual('@mui/x-data-grid');
+    return {
+        ...jest.requireActual('@mui/x-data-grid'),
+        DataGrid: (props: DataGridProps) => {
+            return <DataGrid {...props} disableVirtualization />;
+        },
+    };
+});
 
 describe('DisplayAnalysis Component', () => {
     afterAll(() => {

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

@@ -1,24 +1,24 @@
 import { Typography, Box } from '@mui/material';
 import { useEffect, useState } from 'react';
 import TextExpansion from 'components/TextExpansion/TextExpansion';
-import DisplayValuesTable from 'components/Tables/DisplayValuesTable/DisplayValuesTable';
 import Visualizer from 'components/Visualizer/Visualizer';
 import DisplayImagesTable from 'components/Tables/DisplayImagesTable/DisplayImagesTable';
 import NeurosynthAccordion from 'components/NeurosynthAccordion/NeurosynthAccordion';
-import { IDisplayValuesTableModel } from 'components/Tables/DisplayValuesTable';
-import {
-    AnalysisApiResponse,
-    ConditionApiResponse,
-    ImageApiResponse,
-    PointApiResponse,
-} from 'utils/api';
 import DisplayAnalysisStyles from './DisplayAnalysis.styles';
+import { DataGrid } from '@mui/x-data-grid';
+import {
+    AnalysisReturn,
+    ConditionReturn,
+    ImageReturn,
+    PointReturn,
+} from 'neurostore-typescript-sdk';
+import { ROW_HEIGHT } from 'components/EditStudyComponents/EditAnalyses/EditAnalysis/EditAnalysisPoints/EditAnalysisPoints';
 
-const DisplayAnalysis: React.FC<AnalysisApiResponse | undefined> = (props) => {
-    const [selectedImage, setSelectedImage] = useState<ImageApiResponse | undefined>(undefined);
+const DisplayAnalysis: React.FC<AnalysisReturn | undefined> = (props) => {
+    const [selectedImage, setSelectedImage] = useState<ImageReturn | undefined>(undefined);
 
     useEffect(() => {
-        const images = props?.images as ImageApiResponse[];
+        const images = props?.images as ImageReturn[];
         if (!images || images.length === 0) {
             // images does not exist or is empty
             setSelectedImage(undefined);
@@ -44,106 +44,35 @@ const DisplayAnalysis: React.FC<AnalysisApiResponse | undefined> = (props) => {
         return <Box sx={{ color: 'warning.dark', padding: '1rem' }}>No analysis</Box>;
     }
 
-    const coordinateDataForTable: IDisplayValuesTableModel = {
-        columnHeaders: [
-            {
-                value: 'X',
-                center: false,
-                bold: false,
-            },
-            {
-                value: 'Y',
-                center: false,
-                bold: false,
-            },
-            {
-                value: 'Z',
-                center: false,
-                bold: false,
-            },
-            {
-                value: 'Kind',
-                center: false,
-                bold: false,
-            },
-            {
-                value: 'Space',
-                center: false,
-                bold: false,
-            },
-        ],
-        rowData: (props?.points as PointApiResponse[]).map((point) => ({
-            uniqueKey: point.id as string,
-            columnValues: [
-                {
-                    value: point.coordinates ? point?.coordinates[0] : undefined,
-                    colorByType: true,
-                    center: false,
-                    bold: false,
-                },
-                {
-                    value: point.coordinates ? point?.coordinates[1] : undefined,
-                    colorByType: true,
-                    center: false,
-                    bold: false,
-                },
-                {
-                    value: point.coordinates ? point?.coordinates[2] : undefined,
-                    colorByType: true,
-                    center: false,
-                    bold: false,
-                },
-                {
-                    value: point.kind as string,
-                    colorByType: true,
-                    center: false,
-                    bold: false,
-                },
-                {
-                    value: point.space as string,
-                    colorByType: true,
-                    center: false,
-                    bold: false,
-                },
-            ],
-        })),
-    };
-
-    const handleSelectImage = (selectedImage: ImageApiResponse | undefined) => {
+    const handleSelectImage = (selectedImage: ImageReturn | undefined) => {
         setSelectedImage(selectedImage);
     };
 
-    const conditionsForTable: IDisplayValuesTableModel = {
-        columnHeaders: [
-            {
-                value: 'Condition',
-                bold: false,
-                center: false,
-            },
-            {
-                value: 'Weight',
-                bold: false,
-                center: false,
-            },
-        ],
-        rowData: (props?.conditions as ConditionApiResponse[]).map((condition, index) => ({
-            uniqueKey: condition.id || index.toString(),
-            columnValues: [
-                {
-                    value: condition.name,
-                    colorByType: false,
-                    center: false,
-                    bold: false,
-                },
-                {
-                    value: (props?.weights || [])[index],
-                    colorByType: false,
-                    center: false,
-                    bold: false,
-                },
-            ],
-        })),
-    };
+    const conditionRows = ((props?.conditions as ConditionReturn[]) || []).map(
+        (condition, index) => ({
+            id: condition.id,
+            condition: condition.name,
+            weight: (props?.weights || [])[index],
+        })
+    );
+
+    const coordinateRows = ((props.points as PointReturn[]) || []).map((point, index) => ({
+        id: point.id,
+        x: point.coordinates ? point.coordinates[0] : 0,
+        y: point.coordinates ? point.coordinates[1] : 0,
+        z: point.coordinates ? point.coordinates[2] : 0,
+        kind: point.kind || '',
+        space: point.space || '',
+    }));
+
+    // 2 is for the borders
+    // add one to account for column header
+    // add one to account for the "no rows message"
+    const conditionsGridHeight =
+        2 + (conditionRows.length + 1 + (conditionRows.length === 0 ? 1 : 0)) * ROW_HEIGHT;
+
+    const coordinateGridHeight =
+        2 + (coordinateRows.length + 1 + (coordinateRows.length === 0 ? 1 : 0)) * ROW_HEIGHT;
 
     return (
         <Box sx={DisplayAnalysisStyles.analysisContainer}>
@@ -161,10 +90,39 @@ const DisplayAnalysis: React.FC<AnalysisApiResponse | undefined> = (props) => {
                 >
                     <NeurosynthAccordion
                         TitleElement={<Typography>Conditions</Typography>}
-                        defaultExpanded={conditionsForTable.rowData.length > 0}
+                        defaultExpanded={conditionRows.length > 0}
                         elevation={2}
                     >
-                        <DisplayValuesTable {...conditionsForTable} />
+                        <Box sx={{ height: `${conditionsGridHeight}px`, maxHeight: '600px' }}>
+                            <DataGrid
+                                disableColumnSelector
+                                hideFooter
+                                disableSelectionOnClick
+                                showCellRightBorder
+                                rowHeight={ROW_HEIGHT}
+                                columns={[
+                                    {
+                                        field: 'condition',
+                                        headerAlign: 'left',
+                                        align: 'left',
+                                        headerName: 'Condition',
+                                        editable: false,
+                                        flex: 1,
+                                        type: 'string',
+                                    },
+                                    {
+                                        field: 'weight',
+                                        headerAlign: 'left',
+                                        align: 'left',
+                                        headerName: 'Weight',
+                                        editable: false,
+                                        flex: 1,
+                                        type: 'number',
+                                    },
+                                ]}
+                                rows={conditionRows}
+                            />
+                        </Box>
                     </NeurosynthAccordion>
                 </Box>
                 <Box
@@ -173,10 +131,66 @@ const DisplayAnalysis: React.FC<AnalysisApiResponse | undefined> = (props) => {
                 >
                     <NeurosynthAccordion
                         TitleElement={<Typography>Coordinates</Typography>}
-                        defaultExpanded={coordinateDataForTable.rowData.length > 0}
+                        defaultExpanded={coordinateRows.length > 0}
                         elevation={2}
                     >
-                        <DisplayValuesTable {...coordinateDataForTable} />
+                        <Box sx={{ height: `${coordinateGridHeight}px`, maxHeight: '600px' }}>
+                            <DataGrid
+                                disableColumnSelector
+                                hideFooter
+                                disableSelectionOnClick
+                                showCellRightBorder
+                                rowHeight={ROW_HEIGHT}
+                                columns={[
+                                    {
+                                        field: 'x',
+                                        headerAlign: 'left',
+                                        align: 'left',
+                                        headerName: 'X Coordinate',
+                                        editable: false,
+                                        flex: 1,
+                                        type: 'string',
+                                    },
+                                    {
+                                        field: 'y',
+                                        headerAlign: 'left',
+                                        align: 'left',
+                                        headerName: 'Y Coordinate',
+                                        editable: false,
+                                        flex: 1,
+                                        type: 'string',
+                                    },
+                                    {
+                                        field: 'z',
+                                        headerAlign: 'left',
+                                        align: 'left',
+                                        headerName: 'Z Coordinate',
+                                        editable: false,
+                                        flex: 1,
+                                        type: 'string',
+                                    },
+                                    {
+                                        field: 'kind',
+                                        headerAlign: 'left',
+                                        align: 'left',
+                                        headerName: 'Kind',
+                                        editable: false,
+                                        flex: 1,
+                                        type: 'string',
+                                    },
+                                    {
+                                        field: 'space',
+                                        headerAlign: 'left',
+                                        align: 'left',
+                                        headerName: 'Space',
+                                        editable: false,
+                                        flex: 1,
+                                        type: 'string',
+                                    },
+                                ]}
+                                rows={coordinateRows}
+                            />
+                        </Box>
                     </NeurosynthAccordion>
                 </Box>
                 <Box data-tour="StudyPage-6" sx={DisplayAnalysisStyles.spaceBelow}>
@@ -188,7 +202,7 @@ const DisplayAnalysis: React.FC<AnalysisApiResponse | undefined> = (props) => {
                         <DisplayImagesTable
                             initialSelectedImage={selectedImage}
                             onSelectImage={handleSelectImage}
-                            images={props.images as ImageApiResponse[]}
+                            images={props.images as ImageReturn[]}
                         />
                     </NeurosynthAccordion>
                 </Box>

compose/neurosynth-frontend/src/components/EditStudyComponents/EditAnalyses/EditAnalysis/EditAnalysisConditions/ConditionSelector/__mocks__/ConditionSelector.tsx

@@ -1,4 +1,4 @@
-import { ConditionApiResponse } from 'utils/api';
+import { ConditionReturn } from 'neurostore-typescript-sdk';
 
 export const MockConditionSelected = {
     name: 'mock-selected-condition-name',
@@ -9,7 +9,7 @@ export const MockConditionSelected = {
 };
 
 const mockConditionSelector: React.FC<{
-    onConditionSelected: (condition: ConditionApiResponse) => void;
+    onConditionSelected: (condition: ConditionReturn) => void;
 }> = (props) => {
     return (
         <button

compose/neurosynth-frontend/src/components/EditStudyComponents/EditAnalyses/EditAnalysis/EditAnalysisPoints/AnalysisPointsHeader.tsx

@@ -6,7 +6,6 @@ import AddIcon from '@mui/icons-material/Add';
 import { useRef, useState } from 'react';
 import { useGridApiContext } from '@mui/x-data-grid';
 import { useGetStudyById } from 'hooks';
-import { AnalysisApiResponse } from 'utils/api';
 import { AnalysisReturn, PointReturn } from 'neurostore-typescript-sdk';
 
 export interface IAnalysisPointsHeader {
@@ -44,7 +43,7 @@ const AnalysisPointsHeader: React.FC<IAnalysisPointsHeader> = (props) => {
         }
     };
 
-    const analysisOptions = ((study?.analyses || []) as AnalysisApiResponse[])
+    const analysisOptions = ((study?.analyses || []) as AnalysisReturn[])
         .filter((x) => x.id !== props.analysisId)
         .map((analysis, index) => (
             <MenuItem

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

@@ -14,7 +14,7 @@ import { useCreatePoint, useDeletePoint, useUpdatePoint, useUpdateAnalysis } fro
 import AnalysisPointsHeader from './AnalysisPointsHeader';
 import AnalysisPointsDeleteButton from './AnalysisPointsDeleteButton';
 
-const ROW_HEIGHT = 56;
+export const ROW_HEIGHT = 56;
 
 const EditAnalysisPoints: React.FC<IEditAnalysisPoints> = (props) => {
     const { isLoading: createPointIsLoading, mutate: createPoint } = useCreatePoint();

compose/neurosynth-frontend/src/components/EditStudyComponents/EditAnalyses/index.ts

@@ -1,5 +1,4 @@
-import { ConditionReturn } from '../../../neurostore-typescript-sdk';
-import { PointApiResponse } from '../../../utils/api';
+import { ConditionReturn, PointReturn } from 'neurostore-typescript-sdk';
 
 export interface IEditAnalysisDetails {
     studyId: string;
@@ -9,7 +8,7 @@ export interface IEditAnalysisDetails {
 }
 
 export interface IEditAnalysisPoints {
-    points: PointApiResponse[] | undefined;
+    points: PointReturn[] | undefined;
     studyId: string | undefined;
     analysisId: string | undefined;
 }

compose/neurosynth-frontend/src/components/MetaAnalysisConfigComponents/index.ts

@@ -1,11 +1,11 @@
+import { Annotation, ReadOnly, StudysetReturn } from 'neurostore-typescript-sdk';
 import {
     EAnalysisType as EMetaAnalysisType,
     IMetaAnalysisComponents,
     IEstimatorCorrectorArgs,
-} from '../../pages/MetaAnalyses/MetaAnalysisBuilderPage/MetaAnalysisBuilderPage';
-import { AnnotationsApiResponse, StudysetsApiResponse } from '../../utils/api';
-import { ENavigationButton } from '../Buttons/NavigationButtons/NavigationButtons';
-import { IAutocompleteObject } from '../NeurosynthAutocomplete/NeurosynthAutocomplete';
+} from 'pages/MetaAnalyses/MetaAnalysisBuilderPage/MetaAnalysisBuilderPage';
+import { ENavigationButton } from 'components/Buttons/NavigationButtons/NavigationButtons';
+import { IAutocompleteObject } from 'components/NeurosynthAutocomplete/NeurosynthAutocomplete';
 
 export const KWARG_STRING = '**kwargs';
 
@@ -21,8 +21,8 @@ export interface IMetaAnalysisDetails extends IMetaAnalysisBuilderStep {
 
 export interface IMetaAnalysisData extends IMetaAnalysisBuilderStep {
     metaAnalysisType: EMetaAnalysisType | undefined;
-    studyset: StudysetsApiResponse | undefined | null;
-    annotation: AnnotationsApiResponse | undefined | null;
+    studyset: StudysetReturn | undefined | null;
+    annotation: (Annotation & ReadOnly) | undefined | null;
     inclusionColumn: string | undefined | null;
 }