Skip to content

Commit

Permalink
feat: add inital wireframes proposal
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicoalee
nicoalee committed Sep 9, 2024
1 parent 12ed401 commit 761bea7
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 61 deletions.
68 changes: 65 additions & 3 deletions compose/neurosynth-frontend/src/pages/Study/EditStudyPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Box } from '@mui/material';
import { ArrowLeft, ArrowRight } from '@mui/icons-material';
import { Box, Button, Typography } from '@mui/material';
import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
import {
useInitProjectStoreIfRequired,
Expand All @@ -10,7 +11,6 @@ import EditStudyDetails from 'pages/Study/components/EditStudyDetails';
import EditStudyMetadata from 'pages/Study/components/EditStudyMetadata';
import EditStudyPageHeader from 'pages/Study/components/EditStudyPageHeader';
import EditStudySaveButton from 'pages/Study/components/EditStudySaveButton';
import EditStudySwapVersionButton from 'pages/Study/components/EditStudySwapVersionButton';
import EditStudyPageStyles from 'pages/Study/EditStudyPage.styles';
import {
useClearStudyStore,
Expand Down Expand Up @@ -71,7 +71,69 @@ const EditStudyPage: React.FC = (props) => {
<EditStudyMetadata />
</Box>
<Box sx={EditStudyPageStyles.loadingButtonContainer}>
<EditStudySwapVersionButton />
{/* <EditStudySwapVersionButton /> */}
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Button
startIcon={<ArrowLeft />}
disableElevation
sx={{
backgroundColor: '#f5f5f5',
color: 'black',
':hover': { backgroundColor: 'lightblue' },
}}
>
<Box>
<Typography
sx={{
textOverflow: 'ellipsis',
maxWidth: '200px',
width: '200px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textAlign: 'start',
}}
fontSize="0.6rem"
>
Giant Panda Identification
</Typography>
<Typography textAlign="start" fontSize="0.6rem">
Back
</Typography>
</Box>
</Button>
<Typography variant="body2" sx={{ marginX: '1rem' }}>
2 of 3
</Typography>
<Button
endIcon={<ArrowRight />}
disableElevation
sx={{
backgroundColor: '#f5f5f5',
color: 'black',
':hover': { backgroundColor: 'lightblue' },
}}
>
<Box>
<Typography
sx={{
textOverflow: 'ellipsis',
maxWidth: '200px',
width: '200px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textAlign: 'end',
}}
fontSize="0.6rem"
>
Reproducibility of fMRI results across four institutions using a
spatial workign memory task
</Typography>
<Typography textAlign="end" fontSize="0.6rem">
Next
</Typography>
</Box>
</Button>
</Box>
<EditStudySaveButton />
</Box>
</StateHandlerComponent>
Expand Down
6 changes: 3 additions & 3 deletions compose/neurosynth-frontend/src/pages/Study/components/EditStudyPageHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Typography } from '@mui/material';
import { Box, Button, Typography } from '@mui/material';
import DisplayStudyChipLinks from 'components/DisplayStudyChipLinks/DisplayStudyChipLinks';
import EditStudyToolbar from 'pages/Study/components/EditStudyToolbar';
import NeurosynthBreadcrumbs from 'components/NeurosynthBreadcrumbs';
Expand Down Expand Up @@ -32,7 +32,7 @@ const EditStudyPageHeader: React.FC = () => {
return (
<>
<EditStudyToolbar />
<Box sx={{ marginBottom: '0.5rem' }}>
<Box>
<Box sx={{ display: 'flex' }}>
<NeurosynthBreadcrumbs
breadcrumbItems={[
Expand Down Expand Up @@ -60,7 +60,7 @@ const EditStudyPageHeader: React.FC = () => {
/>
<ProjectIsLoadingText />
</Box>
<Box sx={{ marginTop: '1rem', display: 'flex', flexDirection: 'column' }}>
<Box sx={{ display: 'flex', flexDirection: 'column', margin: '0.5rem 0' }}>
<Typography variant="h5">
{studyYear && `(${studyYear}).`} {studyName}
</Typography>
Expand Down
4 changes: 2 additions & 2 deletions compose/neurosynth-frontend/src/pages/Study/components/EditStudyToolbar.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ const EditStudyToolbarStyles: Style = {
},
toolbarContainer: {
position: 'absolute',
right: 'calc(-8% - 18px)',
right: 'calc(-10%)',
borderRadius: '4px',
border: '2px solid',
border: '1px solid',
borderColor: 'primary.main',
},
header: {
Expand Down
149 changes: 96 additions & 53 deletions compose/neurosynth-frontend/src/pages/Study/components/EditStudyToolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,17 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import BookmarkIcon from '@mui/icons-material/Bookmark';
import CheckIcon from '@mui/icons-material/Check';
import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
import DoneAllIcon from '@mui/icons-material/DoneAll';
import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material';
import {
Box,
Button,
ButtonGroup,
CircularProgress,
Fab,
IconButton,
Tooltip,
} from '@mui/material';
import { useGetExtractionSummary, useGetStudysetById } from 'hooks';
import { StudyReturn } from 'neurostore-typescript-sdk';
import { EExtractionStatus } from 'pages/Extraction/ExtractionPage';
Expand Down Expand Up @@ -199,53 +208,90 @@ const EditStudyToolbar: React.FC<{ isViewOnly?: boolean }> = ({ isViewOnly = fal

return (
<Box sx={EditStudyToolbarStyles.stickyContainer}>
<Box sx={EditStudyToolbarStyles.toolbarContainer}>
<Box sx={EditStudyToolbarStyles.header}>Toolbar</Box>
<Box
sx={{
padding: '10px',
}}
>
{!isViewOnly && (
<>
<Box sx={{ marginBottom: '1rem' }}>
{isComplete ? (
<Tooltip
placement="right"
title="You're done! Click this button to continue to the next phase"
>
<Box>
<IconButton
onClick={handleContinueToMetaAnalysisCreation}
sx={GlobalStyles.colorPulseAnimation}
>
<DoneAllIcon color="success" />
</IconButton>
{!isViewOnly && (
<Box sx={EditStudyToolbarStyles.toolbarContainer}>
<Box sx={EditStudyToolbarStyles.header}>Toolbar</Box>
<Box
sx={{
padding: '10px',
}}
>
<Box sx={{ marginBottom: '1rem' }}>
{isComplete ? (
<Tooltip
placement="right"
title="You're done! Click this button to continue to the next phase"
>
<Box>
<IconButton
onClick={handleContinueToMetaAnalysisCreation}
sx={GlobalStyles.colorPulseAnimation}
>
<DoneAllIcon color="success" />
</IconButton>
</Box>
</Tooltip>
) : (
<Tooltip
placement="right"
title={`${percentageCompleteString} studies marked as complete`}
>
<Box>
<Box sx={EditStudyToolbarStyles.showProgress}>
{percentageComplete}%
</Box>
</Tooltip>
) : (
<Tooltip
placement="right"
title={`${percentageCompleteString} studies marked as complete`}
>
<Box>
<Box sx={EditStudyToolbarStyles.showProgress}>
{percentageComplete}%
</Box>

<CircularProgress
sx={{
backgroundColor: '#ededed',
borderRadius: '50%',
}}
variant="determinate"
value={percentageComplete}
/>
</Box>
</Tooltip>
)}
</Box>
<Box sx={{ marginBottom: '1rem' }}>
<CircularProgress
sx={{
backgroundColor: '#ededed',
borderRadius: '50%',
}}
variant="determinate"
value={percentageComplete}
/>
</Box>
</Tooltip>
)}
</Box>
<Box sx={{ marginBottom: '1rem' }}>
<Fab color="secondary" size="small" sx={{ boxShadow: 'none' }}>
<SwapHorizIcon />
</Fab>
</Box>
<Box>
<ButtonGroup orientation="vertical">
<Button
onClick={() =>
handleClickStudyListStatus(EExtractionStatus.COMPLETED)
}
sx={{ padding: '0.5rem 0', height: '40px' }}
disableElevation
variant={
extractionStatus?.status === EExtractionStatus.COMPLETED
? 'contained'
: 'outlined'
}
>
<CheckIcon />
</Button>
<Button
onClick={() =>
handleClickStudyListStatus(EExtractionStatus.SAVEDFORLATER)
}
sx={{ padding: '0.5rem 0', height: '40px' }}
disableElevation
variant={
extractionStatus?.status === EExtractionStatus.SAVEDFORLATER
? 'contained'
: 'outlined'
}
>
<BookmarkIcon />
</Button>
</ButtonGroup>
</Box>

{/* <Box sx={{ marginBottom: '1rem' }}>
<Tooltip placement="right" title="move to completed">
<IconButton
sx={{
Expand Down Expand Up @@ -282,10 +328,8 @@ const EditStudyToolbar: React.FC<{ isViewOnly?: boolean }> = ({ isViewOnly = fal
<BookmarkIcon color="info" />
</IconButton>
</Tooltip>
</Box>
</>
)}
<Box sx={{ marginBottom: '1rem' }}>
</Box> */}
{/* <Box sx={{ marginBottom: '1rem' }}>
<Tooltip
placement="right"
title={
Expand All @@ -294,7 +338,6 @@ const EditStudyToolbar: React.FC<{ isViewOnly?: boolean }> = ({ isViewOnly = fal
: `no previous ${currSelectedChipText} study`
}
>
{/* tooltip cannot act on a disabled element so we need to add a span here */}
<span>
<IconButton
disabled={!hasPrevStudies}
Expand All @@ -320,7 +363,6 @@ const EditStudyToolbar: React.FC<{ isViewOnly?: boolean }> = ({ isViewOnly = fal
: `no next ${currSelectedChipText} study`
}
>
{/* tooltip cannot act on a disabled element so we need to add a span here */}
<span>
<IconButton
disabled={!hasNextStudies}
Expand All @@ -336,9 +378,10 @@ const EditStudyToolbar: React.FC<{ isViewOnly?: boolean }> = ({ isViewOnly = fal
</IconButton>
</span>
</Tooltip>
</Box> */}
</Box>
</Box>
</Box>
)}
</Box>
);
};
Expand Down

0 comments on commit 761bea7

Please sign in to comment.