Skip to content

Commit 42da8e4

Browse files
nicoaleenicoalee
committed
feat: visualizer changes
1 parent f7f598f commit 42da8e4

File tree

7 files changed

+123
-140
lines changed

7 files changed

+123
-140
lines changed

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
import ErrorIcon from '@mui/icons-material/Error';
2-
import {
3-
Autocomplete,
4-
AutocompleteRenderOptionState,
5-
Box,
6-
FilterOptionsState,
7-
TextField,
8-
} from '@mui/material';
2+
import { Autocomplete, AutocompleteRenderOptionState, Box, FilterOptionsState, TextField } from '@mui/material';
93
import { SystemStyleObject } from '@mui/system';
104
import ProgressLoader from 'components/ProgressLoader';
115
import { useInputValidation } from '../../hooks';
@@ -38,6 +32,7 @@ interface INeurosynthAutocomplete<T> {
3832
inputPropsSx?: SystemStyleObject;
3933
filterOptions?: (options: T[], state: FilterOptionsState<T>) => T[];
4034
groupBy?: (option: T) => string;
35+
errorText?: string;
4136
}
4237

4338
const NeurosynthAutocomplete = <T,>(props: INeurosynthAutocomplete<T>) => {
@@ -63,6 +58,7 @@ const NeurosynthAutocomplete = <T,>(props: INeurosynthAutocomplete<T>) => {
6358
size = 'small',
6459
inputPropsSx = {},
6560
groupBy = undefined,
61+
errorText = 'There was an error',
6662
} = props;
6763

6864
const handleOnChange = (_event: any, newVal: T | null, _reason: any) => {
@@ -96,7 +92,7 @@ const NeurosynthAutocomplete = <T,>(props: INeurosynthAutocomplete<T>) => {
9692
<>
9793
{isError && (
9894
<Box sx={{ color: 'error.main', display: 'flex' }}>
99-
There was an error
95+
{errorText}
10096
<ErrorIcon sx={{ marginLeft: '5px' }} />
10197
</Box>
10298
)}

‎compose/neurosynth-frontend/src/components/Visualizer/NiiVueVisualizer.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ let niivue: Niivue;
66

77
const NiiVueVisualizer: React.FC<{ imageURL: string }> = ({ imageURL }) => {
88
const canvasRef = useRef(null);
9-
const [thresholdPositive, setThresholdPositive] = useState(0);
10-
const [thresholdNegative, setThresholdNegative] = useState(0);
9+
const [thresholdPositive, setThresholdPositive] = useState(3);
10+
const [thresholdNegative, setThresholdNegative] = useState(-3);
1111

1212
const handleUpdateThresholdPositive = (event: Event, newValue: number | number[]) => {
1313
if (!niivue) return;
@@ -16,10 +16,10 @@ const NiiVueVisualizer: React.FC<{ imageURL: string }> = ({ imageURL }) => {
1616
niivue.updateGLVolume();
1717
};
1818

19-
const handkleUpdateThresholdNegative = (event: Event, newValue: number | number[]) => {
19+
const handleUpdateThresholdNegative = (event: Event, newValue: number | number[]) => {
2020
if (!niivue) return;
2121
setThresholdNegative(newValue as number);
22-
niivue.volumes[1].cal_minNeg = -2;
22+
niivue.volumes[1].cal_minNeg = -6;
2323
niivue.volumes[1].cal_maxNeg = newValue as number;
2424
niivue.updateGLVolume();
2525
};
@@ -29,18 +29,21 @@ const NiiVueVisualizer: React.FC<{ imageURL: string }> = ({ imageURL }) => {
2929

3030
const volumes = [
3131
{
32+
// TODO: need to check if TAL vs MNI and set accordingly
3233
url: 'https://neurovault.org/static/images/GenericMNI.nii.gz',
34+
// url: 'https://niivue.github.io/niivue/images/fslmean.nii.gz',
3335
colormap: 'gray',
3436
opacity: 1,
3537
},
3638
{
3739
url: imageURL,
40+
// url: 'https://niivue.github.io/niivue/images/fslt.nii.gz',
3841
colorMap: 'warm',
3942
colormapNegative: 'winter',
40-
cal_min: 0,
41-
cal_max: 2,
42-
cal_minNeg: -1,
43-
cal_maxNeg: -2,
43+
cal_min: 3,
44+
cal_max: 6,
45+
cal_minNeg: -6,
46+
cal_maxNeg: -3,
4447
opacity: 1,
4548
},
4649
];
@@ -56,11 +59,10 @@ const NiiVueVisualizer: React.FC<{ imageURL: string }> = ({ imageURL }) => {
5659
niivue.addVolumesFromUrl(volumes).then(() => {
5760
niivue.volumes[1].alphaThreshold = 0;
5861
niivue.volumes[0].colorbarVisible = false;
59-
niivue.volumes[1].cal_minNeg = -1.0;
60-
niivue.volumes[1].cal_maxNeg = -2.0;
6162
niivue.opts.multiplanarShowRender = SHOW_RENDER.ALWAYS;
6263
niivue.setInterpolation(true);
6364
niivue.updateGLVolume();
65+
console.log(niivue);
6466
});
6567
}, [imageURL]);
6668

@@ -73,10 +75,10 @@ const NiiVueVisualizer: React.FC<{ imageURL: string }> = ({ imageURL }) => {
7375
</Typography>
7476
<Slider
7577
valueLabelDisplay="auto"
76-
min={-2}
78+
min={-6}
7779
step={0.01}
7880
max={0}
79-
onChange={handkleUpdateThresholdNegative}
81+
onChange={handleUpdateThresholdNegative}
8082
value={thresholdNegative}
8183
></Slider>
8284
</Box>
@@ -88,7 +90,7 @@ const NiiVueVisualizer: React.FC<{ imageURL: string }> = ({ imageURL }) => {
8890
valueLabelDisplay="auto"
8991
min={0}
9092
step={0.01}
91-
max={2}
93+
max={6}
9294
onChange={handleUpdateThresholdPositive}
9395
value={thresholdPositive}
9496
></Slider>

‎compose/neurosynth-frontend/src/pages/MetaAnalysis/MetaAnalysisPage.tsx‎

Lines changed: 6 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { Box, Button, Chip, Typography } from '@mui/material';
2-
import NeurosynthAccordion from 'components/NeurosynthAccordion/NeurosynthAccordion';
1+
import { Box, Chip, Typography } from '@mui/material';
32
import NeurosynthBreadcrumbs from 'components/NeurosynthBreadcrumbs';
43
import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
54
import TextEdit from 'components/TextEdit/TextEdit';
@@ -9,18 +8,14 @@ import useGetSpecificationById from 'hooks/metaAnalyses/useGetSpecificationById'
98
import useUpdateMetaAnalysis from 'hooks/metaAnalyses/useUpdateMetaAnalysis';
109
import useUserCanEdit from 'hooks/useUserCanEdit';
1110
import { ResultReturn, SpecificationReturn, StudysetReturn } from 'neurosynth-compose-typescript-sdk';
12-
import EditSpecificationDialog from 'pages/MetaAnalysis/components/EditSpecificationDialog';
1311
import MetaAnalysisPageStyles from 'pages/MetaAnalysis/MetaAnalysisPage.styles';
1412
import { useInitProjectStoreIfRequired, useProjectName, useProjectUser } from 'pages/Project/store/ProjectStore';
15-
import { useState } from 'react';
1613
import { useParams } from 'react-router-dom';
1714
import { NeurostoreAnnotation } from 'utils/api';
1815
import MetaAnalysisResult from './components/MetaAnalysisResult';
19-
import DisplayMetaAnalysisSpecification from './components/MetaAnalysisSpecification';
20-
import RunMetaAnalysisInstructions from './components/RunMetaAnalysisInstructions';
21-
import MetaAnalysisResultStatusAlert from './components/MetaAnalysisResultStatusAlert';
16+
import NoMetaAnalysisResultDisplay from './components/NoMetaAnalysisResultDisplay';
2217

23-
const MetaAnalysisPage: React.FC = (props) => {
18+
const MetaAnalysisPage: React.FC = () => {
2419
// const { startTour } = useGetTour('MetaAnalysisPage');
2520
const { projectId, metaAnalysisId } = useParams<{
2621
projectId: string;
@@ -63,9 +58,7 @@ const MetaAnalysisPage: React.FC = (props) => {
6358

6459
const viewingThisPageFromProject = !!projectId;
6560

66-
const [editSpecificationDialogIsOpen, setEditSpecificationDialogIsOpen] = useState(false);
67-
68-
const updateName = (updatedName: string, _label: string) => {
61+
const updateName = (updatedName: string) => {
6962
if (metaAnalysis?.id && specification?.id && studyset?.id && annotation?.id) {
7063
updateMetaAnalysisName({
7164
metaAnalysisId: metaAnalysis.id,
@@ -76,7 +69,7 @@ const MetaAnalysisPage: React.FC = (props) => {
7669
}
7770
};
7871

79-
const updateDescription = (updatedDescription: string, _label: string) => {
72+
const updateDescription = (updatedDescription: string) => {
8073
if (metaAnalysis?.id && specification?.id && studyset?.id && annotation?.id) {
8174
updateMetaAnalysisDescription({
8275
metaAnalysisId: metaAnalysis.id,
@@ -177,66 +170,7 @@ const MetaAnalysisPage: React.FC = (props) => {
177170
</Box>
178171
</Box>
179172

180-
{noMetaAnalysisResults ? (
181-
<>
182-
<MetaAnalysisResultStatusAlert
183-
metaAnalysis={metaAnalysis}
184-
metaAnalysisResult={metaAnalysisResult}
185-
/>
186-
<NeurosynthAccordion
187-
elevation={0}
188-
expandIconColor={editsAllowed ? 'secondary.main' : 'primary.main'}
189-
sx={{
190-
border: '2px solid',
191-
borderColor: editsAllowed ? 'secondary.main' : 'primary.main',
192-
}}
193-
accordionSummarySx={{
194-
':hover': {
195-
backgroundColor: '#f2f2f2',
196-
},
197-
}}
198-
TitleElement={
199-
<Typography
200-
sx={{
201-
color: editsAllowed ? 'secondary.main' : 'primary.main',
202-
}}
203-
>
204-
{editsAllowed ? 'View/Edit' : 'View'} Meta-Analysis Specification
205-
</Typography>
206-
}
207-
>
208-
<Box>
209-
<EditSpecificationDialog
210-
isOpen={editSpecificationDialogIsOpen}
211-
onCloseDialog={() => setEditSpecificationDialogIsOpen(false)}
212-
/>
213-
<Button
214-
onClick={(e) => {
215-
e.stopPropagation();
216-
setEditSpecificationDialogIsOpen(true);
217-
}}
218-
color="secondary"
219-
variant="contained"
220-
size="small"
221-
sx={{ marginBottom: '1rem' }}
222-
disableElevation
223-
disabled={!editsAllowed}
224-
>
225-
Edit Specification
226-
</Button>
227-
</Box>
228-
<DisplayMetaAnalysisSpecification
229-
metaAnalysisId={metaAnalysis?.id || ''}
230-
projectId={projectId || ''}
231-
/>
232-
</NeurosynthAccordion>
233-
<Box sx={{ marginTop: '1rem' }}>
234-
<RunMetaAnalysisInstructions metaAnalysisId={metaAnalysis?.id || ''} />
235-
</Box>
236-
</>
237-
) : (
238-
<MetaAnalysisResult />
239-
)}
173+
{noMetaAnalysisResults ? <NoMetaAnalysisResultDisplay /> : <MetaAnalysisResult />}
240174
</StateHandlerComponent>
241175
</>
242176
);

‎compose/neurosynth-frontend/src/pages/MetaAnalysis/components/CreateMetaAnalysisSpecificationSelectionStep.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import { Box, Button, Link, Typography } from '@mui/material';
22
import { ENavigationButton } from 'components/Buttons/NavigationButtons';
33
import { EPropertyType } from 'components/EditMetadata/EditMetadata.types';
4-
import {
5-
useProjectExtractionAnnotationId,
6-
useProjectExtractionStudysetId,
7-
} from 'pages/Project/store/ProjectStore';
4+
import { useProjectExtractionAnnotationId, useProjectExtractionStudysetId } from 'pages/Project/store/ProjectStore';
85
import { useState } from 'react';
96
import {
107
IAnalysesSelection,
@@ -40,8 +37,8 @@ const CreateMetaAnalysisSpecificationSelectionStep: React.FC<{
4037
<Box>
4138
<Box>
4239
<Typography gutterBottom>
43-
At this time, all of the studies within your studyset should have all the
44-
relevant information (i.e. coordinates, annotations) needed for a meta-analysis
40+
At this time, all of the studies within your studyset should have all the relevant information (i.e.
41+
coordinates, annotations) needed for a meta-analysis
4542
</Typography>
4643
</Box>
4744
<Box>
@@ -66,8 +63,8 @@ const CreateMetaAnalysisSpecificationSelectionStep: React.FC<{
6663
</Typography>
6764

6865
<Typography gutterBottom sx={{ marginBottom: '1rem' }}>
69-
By default, the "included" column includes all studies & analyses. At the
70-
moment, only boolean and string annotations are supported.
66+
By default, the "included" column includes all studies & analyses. At the moment, only boolean and
67+
string annotations are supported.
7168
</Typography>
7269

7370
<SelectAnalysesComponent
@@ -94,10 +91,7 @@ const CreateMetaAnalysisSpecificationSelectionStep: React.FC<{
9491
marginTop: '1rem',
9592
}}
9693
>
97-
<Button
98-
onClick={() => handleNavigate(ENavigationButton.PREV)}
99-
variant="outlined"
100-
>
94+
<Button onClick={() => handleNavigate(ENavigationButton.PREV)} variant="outlined">
10195
Back
10296
</Button>
10397
<SelectAnalysesSummaryComponent

‎compose/neurosynth-frontend/src/pages/MetaAnalysis/components/CreateMetaAnalysisSpecificationSelectionStepMultiGroup.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,10 @@ const CreateMetaAnalysisSpecificationSelectionStepMultiGroup: React.FC<{
5555
return (
5656
<Box sx={{ margin: '1rem 0' }}>
5757
<Typography sx={{ marginBottom: '1rem' }}>
58-
You selected <b>{algorithm?.estimator?.label || ''}</b> in the previous step, which
59-
is an estimator that requires a second dataset to use as a comparison. Select a
60-
dataset using the dropdown below. You can either select our default reference
61-
datasets (i.e. neurostore, neuroquery, etc) or choose another value from the
62-
inclusion column you set above to use as your own dataset.
58+
You selected <b>{algorithm?.estimator?.label || ''}</b> in the previous step, which is an estimator that
59+
requires a second dataset to use as a comparison. Select a dataset using the dropdown below. You can
60+
either select our default reference datasets (i.e. neurostore, neuroquery, etc) or choose another value
61+
from the inclusion column you set above to use as your own dataset.
6362
</Typography>
6463
<Box
6564
sx={{
@@ -74,6 +73,8 @@ const CreateMetaAnalysisSpecificationSelectionStepMultiGroup: React.FC<{
7473
shouldDisable={false}
7574
isOptionEqualToValue={(option, value) => option?.label === value?.label}
7675
value={selectedOption}
76+
isError={!selectedOption}
77+
errorText="No option selected"
7778
size="medium"
7879
inputPropsSx={{
7980
color: NeurosynthTableStyles[EPropertyType.NONE],
@@ -85,7 +86,7 @@ const CreateMetaAnalysisSpecificationSelectionStepMultiGroup: React.FC<{
8586
</ListItem>
8687
)}
8788
getOptionLabel={(option) => `${option?.label}`}
88-
onChange={(_event, newVal, _reason) => handleSelect(newVal || undefined)}
89+
onChange={(_event, newVal) => handleSelect(newVal || undefined)}
8990
options={multiGroupOptions}
9091
/>
9192
</Box>

0 commit comments

Comments
 (0)