Feat 839 update visualizer with niivue

compose/neurosynth-frontend/index.html

@@ -17,7 +17,7 @@
 
         <link rel="preload" as="image" href="/static/brain-analysis.png" type="image/png">
 
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" crossorigin="anonymous" />
 
         <link
             rel="stylesheet"

compose/neurosynth-frontend/package.json

@@ -19,6 +19,7 @@
         "@mui/styles": "^5.5.1",
         "@mui/system": "^5.5.1",
         "@mui/x-data-grid": "^5.10.0",
+        "@niivue/niivue": "^0.46.0",
         "@reactour/tour": "^2.10.3",
         "@sentry/react": "^7.119.2",
         "@tanstack/react-table": "^8.20.5",

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

@@ -1,11 +1,5 @@
 import ErrorIcon from '@mui/icons-material/Error';
-import {
-    Autocomplete,
-    AutocompleteRenderOptionState,
-    Box,
-    FilterOptionsState,
-    TextField,
-} from '@mui/material';
+import { Autocomplete, AutocompleteRenderOptionState, Box, FilterOptionsState, TextField } from '@mui/material';
 import { SystemStyleObject } from '@mui/system';
 import ProgressLoader from 'components/ProgressLoader';
 import { useInputValidation } from '../../hooks';
@@ -38,6 +32,7 @@ interface INeurosynthAutocomplete<T> {
     inputPropsSx?: SystemStyleObject;
     filterOptions?: (options: T[], state: FilterOptionsState<T>) => T[];
     groupBy?: (option: T) => string;
+    errorText?: string;
 }
 
 const NeurosynthAutocomplete = <T,>(props: INeurosynthAutocomplete<T>) => {
@@ -63,6 +58,7 @@ const NeurosynthAutocomplete = <T,>(props: INeurosynthAutocomplete<T>) => {
         size = 'small',
         inputPropsSx = {},
         groupBy = undefined,
+        errorText = 'There was an error',
     } = props;
 
     const handleOnChange = (_event: any, newVal: T | null, _reason: any) => {
@@ -96,7 +92,7 @@ const NeurosynthAutocomplete = <T,>(props: INeurosynthAutocomplete<T>) => {
                             <>
                                 {isError && (
                                     <Box sx={{ color: 'error.main', display: 'flex' }}>
-                                        There was an error
+                                        {errorText}
                                         <ErrorIcon sx={{ marginLeft: '5px' }} />
                                     </Box>
                                 )}

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

@@ -13,11 +13,7 @@ export interface IStateHandlerComponent {
 
 const StateHandlerComponent: React.FC<IStateHandlerComponent> = (props) => {
     if (props.isError) {
-        return (
-            <Typography sx={{ color: 'error.main' }}>
-                {props.errorMessage || 'There was an error'}
-            </Typography>
-        );
+        return <Typography sx={{ color: 'error.main' }}>{props.errorMessage || 'There was an error'}</Typography>;
     }
 
     if (props.isLoading) {