Skip to content

Commit

Permalink
feat: visualizer changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicoalee
nicoalee committed Dec 2, 2024
1 parent f7f598f commit 42da8e4
Show file tree
Hide file tree
Showing 7 changed files with 123 additions and 140 deletions.
12 changes: 4 additions & 8 deletions compose/neurosynth-frontend/src/components/NeurosynthAutocomplete/NeurosynthAutocomplete.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>) => {
Expand All @@ -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) => {
Expand Down Expand Up @@ -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>
)}
Expand Down
28 changes: 15 additions & 13 deletions compose/neurosynth-frontend/src/components/Visualizer/NiiVueVisualizer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ let niivue: Niivue;

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

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

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

const volumes = [
{
// TODO: need to check if TAL vs MNI and set accordingly
url: 'https://neurovault.org/static/images/GenericMNI.nii.gz',
// url: 'https://niivue.github.io/niivue/images/fslmean.nii.gz',
colormap: 'gray',
opacity: 1,
},
{
url: imageURL,
// url: 'https://niivue.github.io/niivue/images/fslt.nii.gz',
colorMap: 'warm',
colormapNegative: 'winter',
cal_min: 0,
cal_max: 2,
cal_minNeg: -1,
cal_maxNeg: -2,
cal_min: 3,
cal_max: 6,
cal_minNeg: -6,
cal_maxNeg: -3,
opacity: 1,
},
];
Expand All @@ -56,11 +59,10 @@ const NiiVueVisualizer: React.FC<{ imageURL: string }> = ({ imageURL }) => {
niivue.addVolumesFromUrl(volumes).then(() => {
niivue.volumes[1].alphaThreshold = 0;
niivue.volumes[0].colorbarVisible = false;
niivue.volumes[1].cal_minNeg = -1.0;
niivue.volumes[1].cal_maxNeg = -2.0;
niivue.opts.multiplanarShowRender = SHOW_RENDER.ALWAYS;
niivue.setInterpolation(true);
niivue.updateGLVolume();
console.log(niivue);
});
}, [imageURL]);

Expand All @@ -73,10 +75,10 @@ const NiiVueVisualizer: React.FC<{ imageURL: string }> = ({ imageURL }) => {
</Typography>
<Slider
valueLabelDisplay="auto"
min={-2}
min={-6}
step={0.01}
max={0}
onChange={handkleUpdateThresholdNegative}
onChange={handleUpdateThresholdNegative}
value={thresholdNegative}
></Slider>
</Box>
Expand All @@ -88,7 +90,7 @@ const NiiVueVisualizer: React.FC<{ imageURL: string }> = ({ imageURL }) => {
valueLabelDisplay="auto"
min={0}
step={0.01}
max={2}
max={6}
onChange={handleUpdateThresholdPositive}
value={thresholdPositive}
></Slider>
Expand Down
78 changes: 6 additions & 72 deletions compose/neurosynth-frontend/src/pages/MetaAnalysis/MetaAnalysisPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Box, Button, Chip, Typography } from '@mui/material';
import NeurosynthAccordion from 'components/NeurosynthAccordion/NeurosynthAccordion';
import { Box, Chip, Typography } from '@mui/material';
import NeurosynthBreadcrumbs from 'components/NeurosynthBreadcrumbs';
import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
import TextEdit from 'components/TextEdit/TextEdit';
Expand All @@ -9,18 +8,14 @@ import useGetSpecificationById from 'hooks/metaAnalyses/useGetSpecificationById'
import useUpdateMetaAnalysis from 'hooks/metaAnalyses/useUpdateMetaAnalysis';
import useUserCanEdit from 'hooks/useUserCanEdit';
import { ResultReturn, SpecificationReturn, StudysetReturn } from 'neurosynth-compose-typescript-sdk';
import EditSpecificationDialog from 'pages/MetaAnalysis/components/EditSpecificationDialog';
import MetaAnalysisPageStyles from 'pages/MetaAnalysis/MetaAnalysisPage.styles';
import { useInitProjectStoreIfRequired, useProjectName, useProjectUser } from 'pages/Project/store/ProjectStore';
import { useState } from 'react';
import { useParams } from 'react-router-dom';
import { NeurostoreAnnotation } from 'utils/api';
import MetaAnalysisResult from './components/MetaAnalysisResult';
import DisplayMetaAnalysisSpecification from './components/MetaAnalysisSpecification';
import RunMetaAnalysisInstructions from './components/RunMetaAnalysisInstructions';
import MetaAnalysisResultStatusAlert from './components/MetaAnalysisResultStatusAlert';
import NoMetaAnalysisResultDisplay from './components/NoMetaAnalysisResultDisplay';

const MetaAnalysisPage: React.FC = (props) => {
const MetaAnalysisPage: React.FC = () => {
// const { startTour } = useGetTour('MetaAnalysisPage');
const { projectId, metaAnalysisId } = useParams<{
projectId: string;
Expand Down Expand Up @@ -63,9 +58,7 @@ const MetaAnalysisPage: React.FC = (props) => {

const viewingThisPageFromProject = !!projectId;

const [editSpecificationDialogIsOpen, setEditSpecificationDialogIsOpen] = useState(false);

const updateName = (updatedName: string, _label: string) => {
const updateName = (updatedName: string) => {
if (metaAnalysis?.id && specification?.id && studyset?.id && annotation?.id) {
updateMetaAnalysisName({
metaAnalysisId: metaAnalysis.id,
Expand All @@ -76,7 +69,7 @@ const MetaAnalysisPage: React.FC = (props) => {
}
};

const updateDescription = (updatedDescription: string, _label: string) => {
const updateDescription = (updatedDescription: string) => {
if (metaAnalysis?.id && specification?.id && studyset?.id && annotation?.id) {
updateMetaAnalysisDescription({
metaAnalysisId: metaAnalysis.id,
Expand Down Expand Up @@ -177,66 +170,7 @@ const MetaAnalysisPage: React.FC = (props) => {
</Box>
</Box>

{noMetaAnalysisResults ? (
<>
<MetaAnalysisResultStatusAlert
metaAnalysis={metaAnalysis}
metaAnalysisResult={metaAnalysisResult}
/>
<NeurosynthAccordion
elevation={0}
expandIconColor={editsAllowed ? 'secondary.main' : 'primary.main'}
sx={{
border: '2px solid',
borderColor: editsAllowed ? 'secondary.main' : 'primary.main',
}}
accordionSummarySx={{
':hover': {
backgroundColor: '#f2f2f2',
},
}}
TitleElement={
<Typography
sx={{
color: editsAllowed ? 'secondary.main' : 'primary.main',
}}
>
{editsAllowed ? 'View/Edit' : 'View'} Meta-Analysis Specification
</Typography>
}
>
<Box>
<EditSpecificationDialog
isOpen={editSpecificationDialogIsOpen}
onCloseDialog={() => setEditSpecificationDialogIsOpen(false)}
/>
<Button
onClick={(e) => {
e.stopPropagation();
setEditSpecificationDialogIsOpen(true);
}}
color="secondary"
variant="contained"
size="small"
sx={{ marginBottom: '1rem' }}
disableElevation
disabled={!editsAllowed}
>
Edit Specification
</Button>
</Box>
<DisplayMetaAnalysisSpecification
metaAnalysisId={metaAnalysis?.id || ''}
projectId={projectId || ''}
/>
</NeurosynthAccordion>
<Box sx={{ marginTop: '1rem' }}>
<RunMetaAnalysisInstructions metaAnalysisId={metaAnalysis?.id || ''} />
</Box>
</>
) : (
<MetaAnalysisResult />
)}
{noMetaAnalysisResults ? <NoMetaAnalysisResultDisplay /> : <MetaAnalysisResult />}
</StateHandlerComponent>
</>
);
Expand Down
18 changes: 6 additions & 12 deletions ...ontend/src/pages/MetaAnalysis/components/CreateMetaAnalysisSpecificationSelectionStep.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { Box, Button, Link, Typography } from '@mui/material';
import { ENavigationButton } from 'components/Buttons/NavigationButtons';
import { EPropertyType } from 'components/EditMetadata/EditMetadata.types';
import {
useProjectExtractionAnnotationId,
useProjectExtractionStudysetId,
} from 'pages/Project/store/ProjectStore';
import { useProjectExtractionAnnotationId, useProjectExtractionStudysetId } from 'pages/Project/store/ProjectStore';
import { useState } from 'react';
import {
IAnalysesSelection,
Expand Down Expand Up @@ -40,8 +37,8 @@ const CreateMetaAnalysisSpecificationSelectionStep: React.FC<{
<Box>
<Box>
<Typography gutterBottom>
At this time, all of the studies within your studyset should have all the
relevant information (i.e. coordinates, annotations) needed for a meta-analysis
At this time, all of the studies within your studyset should have all the relevant information (i.e.
coordinates, annotations) needed for a meta-analysis
</Typography>
</Box>
<Box>
Expand All @@ -66,8 +63,8 @@ const CreateMetaAnalysisSpecificationSelectionStep: React.FC<{
</Typography>

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

<SelectAnalysesComponent
Expand All @@ -94,10 +91,7 @@ const CreateMetaAnalysisSpecificationSelectionStep: React.FC<{
marginTop: '1rem',
}}
>
<Button
onClick={() => handleNavigate(ENavigationButton.PREV)}
variant="outlined"
>
<Button onClick={() => handleNavigate(ENavigationButton.PREV)} variant="outlined">
Back
</Button>
<SelectAnalysesSummaryComponent
Expand Down
13 changes: 7 additions & 6 deletions .../pages/MetaAnalysis/components/CreateMetaAnalysisSpecificationSelectionStepMultiGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,10 @@ const CreateMetaAnalysisSpecificationSelectionStepMultiGroup: React.FC<{
return (
<Box sx={{ margin: '1rem 0' }}>
<Typography sx={{ marginBottom: '1rem' }}>
You selected <b>{algorithm?.estimator?.label || ''}</b> in the previous step, which
is an estimator that requires a second dataset to use as a comparison. Select a
dataset using the dropdown below. You can either select our default reference
datasets (i.e. neurostore, neuroquery, etc) or choose another value from the
inclusion column you set above to use as your own dataset.
You selected <b>{algorithm?.estimator?.label || ''}</b> in the previous step, which is an estimator that
requires a second dataset to use as a comparison. Select a dataset using the dropdown below. You can
either select our default reference datasets (i.e. neurostore, neuroquery, etc) or choose another value
from the inclusion column you set above to use as your own dataset.
</Typography>
<Box
sx={{
Expand All @@ -74,6 +73,8 @@ const CreateMetaAnalysisSpecificationSelectionStepMultiGroup: React.FC<{
shouldDisable={false}
isOptionEqualToValue={(option, value) => option?.label === value?.label}
value={selectedOption}
isError={!selectedOption}
errorText="No option selected"
size="medium"
inputPropsSx={{
color: NeurosynthTableStyles[EPropertyType.NONE],
Expand All @@ -85,7 +86,7 @@ const CreateMetaAnalysisSpecificationSelectionStepMultiGroup: React.FC<{
</ListItem>
)}
getOptionLabel={(option) => `${option?.label}`}
onChange={(_event, newVal, _reason) => handleSelect(newVal || undefined)}
onChange={(_event, newVal) => handleSelect(newVal || undefined)}
options={multiGroupOptions}
/>
</Box>
Expand Down
Loading

0 comments on commit 42da8e4

Please sign in to comment.