Feat/study analyses editing (#156)

* feat: finished preliminary steps for analyses editing * feat: added analyses editing component * feat: created analyses editing tabs for details and coordinates * feat: finished input highlighting and localized save changes buttons * feat: added REVERT CHANGES functionality to edit study * feat: finished testing edit analysis changes * fix: remove unnecessary console.log statement
neurostuff · Nov 26, 2021 · 2f1f77f · 2f1f77f
1 parent ae1f31d
commit 2f1f77f
Show file tree

Hide file tree

Showing 93 changed files with 3,983 additions and 26,013 deletions.
diff --git a/neurosynth-frontend/package-lock.json b/neurosynth-frontend/package-lock.json
diff --git a/neurosynth-frontend/src/components/DisplayAnalysis/DisplayAnalysis.spec.tsx b/neurosynth-frontend/src/components/DisplayAnalysis/DisplayAnalysis.spec.tsx
@@ -30,7 +30,7 @@ jest.mock('../DisplayImagesTable/DisplayImagesTable', () => {
     };
 });
 
-describe('DisplayMetadataTableRow Component', () => {
+describe('DisplayAnalysis Component', () => {
     it('should render', () => {
         render(<DisplayAnalysis />);
         const noDataText = screen.getByText('No analysis');
@@ -101,6 +101,7 @@ describe('DisplayMetadataTableRow Component', () => {
                 index: 0,
                 sx: {
                     height: 'auto',
+                    padding: '0 2px',
                     width: '100%',
                 },
                 template: 'some_test_template',
@@ -180,6 +181,7 @@ describe('DisplayMetadataTableRow Component', () => {
                 index: 0,
                 sx: {
                     height: 'auto',
+                    padding: '0 2px',
                     width: '100%',
                 },
                 template: 'some_test_template',

diff --git a/.../DisplayAnalysis/DisplayAnalysisStyles.ts → ...DisplayAnalysis/DisplayAnalysis.styles.ts b/.../DisplayAnalysis/DisplayAnalysisStyles.ts → ...DisplayAnalysis/DisplayAnalysis.styles.ts
@@ -22,6 +22,7 @@ const DisplayAnalysisStyles: Style = {
     visualizer: {
         width: '100%',
         height: 'auto',
+        padding: '0 2px', // papaya gives an 8px border already so we padd it to match
     },
     visualizerContainer: {
         width: '100%',
@@ -45,14 +46,10 @@ const DisplayAnalysisStyles: Style = {
             xs: '0px',
             md: '10px',
         },
-        flexBasis: 0,
+        // when there is no visualizer, the left section will take up the entire page
         flexGrow: 1,
     },
     rightSection: {
-        paddingLeft: {
-            xs: '0px',
-            md: '10px',
-        },
         marginBottom: {
             xs: '10%',
             md: '0',

diff --git a/neurosynth-frontend/src/components/DisplayAnalysis/DisplayAnalysis.tsx b/neurosynth-frontend/src/components/DisplayAnalysis/DisplayAnalysis.tsx
@@ -2,13 +2,14 @@ import { ExpandMoreOutlined } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useEffect, useState } from 'react';
-import { DisplayValuesTable, DisplayValuesTableModel, TextExpansion } from '..';
-import { Analysis, Condition, Point, ReadOnly, Image } from '../../gen/api';
+import { DisplayValuesTable, IDisplayValuesTableModel, TextExpansion } from '..';
+import { Condition, Point, ReadOnly, Image } from '../../gen/api';
+import { AnalysisApiResponse } from '../../utils/api';
 import DisplayImagesTable from '../DisplayImagesTable/DisplayImagesTable';
 import Visualizer from '../Visualizer/Visualizer';
-import DisplayAnalysisStyles from './DisplayAnalysisStyles';
+import DisplayAnalysisStyles from './DisplayAnalysis.styles';
 
-const DisplayAnalysis: React.FC<Analysis> = (props) => {
+const DisplayAnalysis: React.FC<AnalysisApiResponse | undefined> = (props) => {
     const [selectedImage, setSelectedImage] = useState<(Image & ReadOnly) | undefined>(undefined);
 
     useEffect(() => {
@@ -42,34 +43,65 @@ const DisplayAnalysis: React.FC<Analysis> = (props) => {
         );
     }
 
-    const coordinateDataForTable: DisplayValuesTableModel = {
-        columnHeaders: ['X', 'Y', 'Z', 'Kind', 'Space'],
+    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 (Point & ReadOnly)[]).map((point) => ({
             uniqueKey: point.id as string,
             columnValues: [
                 {
                     value: point.coordinates ? point?.coordinates[0] : undefined,
                     colorByType: false,
+                    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,
                 },
             ],
@@ -80,19 +112,32 @@ const DisplayAnalysis: React.FC<Analysis> = (props) => {
         setSelectedImage(selectedImage);
     };
 
-    const conditionsForTable: DisplayValuesTableModel = {
-        columnHeaders: ['Condition', 'Weight'],
+    const conditionsForTable: IDisplayValuesTableModel = {
+        columnHeaders: [
+            {
+                value: 'Condition',
+                bold: false,
+                center: false,
+            },
+            {
+                value: 'Weight',
+                bold: false,
+                center: false,
+            },
+        ],
         rowData: (props?.conditions as (Condition & ReadOnly)[]).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,
                 },
             ],
@@ -113,7 +158,7 @@ const DisplayAnalysis: React.FC<Analysis> = (props) => {
                 <TextExpansion
                     sx={DisplayAnalysisStyles.spaceBelow}
                     text={props.description || ''}
-                ></TextExpansion>
+                />
                 <Box sx={{ ...DisplayAnalysisStyles.spaceBelow, width: '100%' }}>
                     <Accordion defaultExpanded={true} elevation={4}>
                         <AccordionSummary expandIcon={<ExpandMoreOutlined />}>

diff --git a/...ageTableRow/DisplayImageTableRowStyles.ts → ...geTableRow/DisplayImageTableRow.styles.ts b/...ageTableRow/DisplayImageTableRowStyles.ts → ...geTableRow/DisplayImageTableRow.styles.ts
diff --git a/...frontend/src/components/DisplayImagesTable/DisplayImageTableRow/DisplayImagesTableRow.tsx b/...frontend/src/components/DisplayImagesTable/DisplayImageTableRow/DisplayImagesTableRow.tsx
@@ -1,26 +1,39 @@
 import { Box, Collapse, IconButton, TableCell, TableRow, Typography } from '@mui/material';
 import { KeyboardArrowDownRounded, KeyboardArrowUpRounded } from '@mui/icons-material';
 import React, { useState } from 'react';
-import { DisplayValuesTable, DisplayValuesTableModel } from '../..';
-import DisplayImageTableRowStyles from './DisplayImageTableRowStyles';
+import { DisplayValuesTable, IDisplayValuesTableModel } from '../..';
+import DisplayImageTableRowStyles from './DisplayImageTableRow.styles';
 import { DisplayImagesTableRowModel } from '..';
 
 const DisplayImagesTableRow: React.FC<DisplayImagesTableRowModel> = (props) => {
     const [expanded, setExpanded] = useState(false);
 
-    const metadataForTable: DisplayValuesTableModel = {
-        columnHeaders: ['Name', 'Value'],
+    const metadataForTable: IDisplayValuesTableModel = {
+        columnHeaders: [
+            {
+                value: 'Name',
+                center: false,
+                bold: false,
+            },
+            {
+                value: 'Value',
+                center: false,
+                bold: false,
+            },
+        ],
         rowData: Object.entries(props.image?.metadata || {}).map(([key, value]) => ({
             uniqueKey: key,
             columnValues: [
                 {
                     value: key,
                     colorByType: false,
+                    center: false,
                     bold: true,
                 },
                 {
                     value: value,
                     colorByType: true,
+                    center: false,
                     bold: true,
                 },
             ],

diff --git a/...ayImagesTable/DisplayImagesTableStyles.ts → ...yImagesTable/DisplayImagesTable.styles.ts b/...ayImagesTable/DisplayImagesTableStyles.ts → ...yImagesTable/DisplayImagesTable.styles.ts
diff --git a/...StudiesTable/DisplayStudiesTableStyles.ts → ...tudiesTable/DisplayStudiesTable.styles.ts b/...StudiesTable/DisplayStudiesTableStyles.ts → ...tudiesTable/DisplayStudiesTable.styles.ts
diff --git a/neurosynth-frontend/src/components/DisplayStudiesTable/DisplayStudiesTable.tsx b/neurosynth-frontend/src/components/DisplayStudiesTable/DisplayStudiesTable.tsx
@@ -3,7 +3,7 @@ import { Box } from '@mui/system';
 import { useHistory } from 'react-router-dom';
 import { ReadOnly, Study } from '../../gen/api';
 import { StudyApiResponse } from '../../utils/api';
-import DisplayStudiesTableStyles from './DisplayStudiesTableStyles';
+import DisplayStudiesTableStyles from './DisplayStudiesTable.styles';
 
 interface DisplayStudiesTableModel {
     studies: StudyApiResponse[];

diff --git a/neurosynth-frontend/src/components/DisplayValuesTable/DisplayValuesTable.spec.tsx b/neurosynth-frontend/src/components/DisplayValuesTable/DisplayValuesTable.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { DisplayValuesTable, DisplayValuesTableModel } from '..';
+import { DisplayValuesTable, IDisplayValuesTableModel } from '..';
 
 describe('DisplayValuesTable Component', () => {
     it('should render', () => {
@@ -9,7 +9,7 @@ describe('DisplayValuesTable Component', () => {
     });
 
     it('should render data with rows', () => {
-        const mockTableData: DisplayValuesTableModel = {
+        const mockTableData: IDisplayValuesTableModel = {
             columnHeaders: ['testCol1', 'testCol2'],
             rowData: [
                 {

diff --git a/neurosynth-frontend/src/components/DisplayValuesTable/DisplayValuesTable.tsx b/neurosynth-frontend/src/components/DisplayValuesTable/DisplayValuesTable.tsx
@@ -1,9 +1,9 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import { Box } from '@mui/system';
-import { DisplayValuesTableModel } from '.';
+import { IDisplayValuesTableModel } from '.';
 import DisplayValuesTableRow from './DisplayValuesTableRow/DisplayValuesTableRow';
 
-const DisplayValuesTable: React.FC<DisplayValuesTableModel> = (props) => {
+const DisplayValuesTable: React.FC<IDisplayValuesTableModel> = (props) => {
     if (
         !props.rowData ||
         props.rowData.length === 0 ||
@@ -22,8 +22,16 @@ const DisplayValuesTable: React.FC<DisplayValuesTableModel> = (props) => {
             <Table size="small">
                 <TableHead>
                     <TableRow>
-                        {props.columnHeaders.map((header, index) => (
-                            <TableCell key={index}>{header}</TableCell>
+                        {props.columnHeaders.map((colHeader, index) => (
+                            <TableCell
+                                sx={{
+                                    fontWeight: colHeader.bold ? 'bold' : 'normal',
+                                    textAlign: colHeader.center ? 'center' : 'left',
+                                }}
+                                key={index}
+                            >
+                                {colHeader.value}
+                            </TableCell>
                         ))}
                     </TableRow>
                 </TableHead>

diff --git a/...esTableRow/DisplayValuesTableRowStyles.ts → ...sTableRow/DisplayValuesTableRow.styles.ts b/...esTableRow/DisplayValuesTableRowStyles.ts → ...sTableRow/DisplayValuesTableRow.styles.ts
diff --git a/...rontend/src/components/DisplayValuesTable/DisplayValuesTableRow/DisplayValuesTableRow.tsx b/...rontend/src/components/DisplayValuesTable/DisplayValuesTableRow/DisplayValuesTableRow.tsx
@@ -1,9 +1,9 @@
 import { TableCell, TableRow } from '@mui/material';
 import { Box } from '@mui/system';
 import React from 'react';
-import { DisplayValuesTableRowModel } from '..';
+import { IDisplayValuesTableRowModel } from '..';
 import { EPropertyType } from '../..';
-import DisplayValuesTableRowStyles from './DisplayValuesTableRowStyles';
+import DisplayValuesTableRowStyles from './DisplayValuesTableRow.styles';
 
 const getValue = (value: any): string => {
     if (value === null) {
@@ -29,7 +29,7 @@ const getType = (value: any): EPropertyType => {
     }
 };
 
-const DisplayMetadataTableRow: React.FC<DisplayValuesTableRowModel> = (props) => {
+const DisplayMetadataTableRow: React.FC<IDisplayValuesTableRowModel> = (props) => {
     return (
         <TableRow>
             {props.columnValues.map((col, index) => {
@@ -38,7 +38,7 @@ const DisplayMetadataTableRow: React.FC<DisplayValuesTableRowModel> = (props) =>
                     : {};
 
                 return (
-                    <TableCell key={index}>
+                    <TableCell key={index} sx={{ textAlign: col.center ? 'center' : 'left' }}>
                         <Box
                             component="span"
                             sx={{

diff --git a/neurosynth-frontend/src/components/DisplayValuesTable/index.ts b/neurosynth-frontend/src/components/DisplayValuesTable/index.ts
@@ -1,13 +1,18 @@
-export interface DisplayValuesTableRowModel {
+export interface IDisplayValuesTableRowModel {
     uniqueKey: string;
     columnValues: {
         value: string | boolean | number | undefined | null;
         colorByType: boolean;
+        center: boolean;
         bold: boolean;
     }[];
 }
 
-export interface DisplayValuesTableModel {
-    columnHeaders: string[];
-    rowData: DisplayValuesTableRowModel[];
+export interface IDisplayValuesTableModel {
+    columnHeaders: {
+        value: string;
+        center: boolean;
+        bold: boolean;
+    }[];
+    rowData: IDisplayValuesTableRowModel[];
 }