-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
34 changed files
with
802 additions
and
726 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,196 @@ | ||
| import { useId } from 'react' | ||
| import { useLocation, useNavigate } from 'react-router-dom' | ||
|
|
||
| import { useConfig } from '@eplant/config' | ||
| import { useActiveViewId } from '@eplant/state' | ||
| import { useURLState } from '@eplant/state/URLStateProvider' | ||
| import { ActionsPanel } from '@eplant/util/stateUtils/ActionsPanel' | ||
| import { View } from '@eplant/View' | ||
| import { | ||
| AppBar, | ||
| Box, | ||
| Button, | ||
| FormControl, | ||
| ListItemText, | ||
| MenuItem, | ||
| Select, | ||
| Stack, | ||
| Toolbar, | ||
| } from '@mui/material' | ||
|
|
||
| interface TopBarProps { | ||
| activeView: View<any, any, any> | ||
| setViewingCitations: (value: boolean) => void | ||
| loading: boolean | ||
| activeActions: any[] | ||
| } | ||
| export const TopBar = ({ | ||
| activeView, | ||
| setViewingCitations, | ||
| loading, | ||
| activeActions, | ||
| }: TopBarProps) => { | ||
| const { userViews, views } = useConfig() | ||
| const [activeViewId, setActiveViewId] = useActiveViewId() | ||
| const { setState } = useURLState<any>() | ||
| const location = useLocation() | ||
| const idLabel = useId() | ||
| const selectId = useId() | ||
|
|
||
| const handleChangeView = (e: any) => { | ||
| const view = views.find((view) => view.id === e.target.value) | ||
| if (view) { | ||
| setState(null) | ||
| setActiveViewId(view.id) | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <AppBar | ||
| variant='elevation' | ||
| sx={(theme) => ({ | ||
| background: theme.palette.background.active, | ||
| })} | ||
| position='sticky' | ||
| elevation={0} | ||
| > | ||
| <Toolbar | ||
| sx={(theme) => ({ | ||
| gap: '8px', | ||
| paddingRight: 16, | ||
| borderStyle: 'solid', | ||
| borderWidth: '1px 0px 1px 1px', | ||
| borderColor: theme.palette.background.edge, | ||
| borderLeftColor: theme.palette.background.edgeLight, | ||
| })} | ||
| > | ||
| <Stack | ||
| direction='row' | ||
| gap={2} | ||
| sx={{ | ||
| flexGrow: 1, | ||
| height: '100%', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| {/* View selector dropdown */} | ||
| <FormControl variant='standard'> | ||
| <Select | ||
| value={activeView.id} | ||
| renderValue={() => { | ||
| if (activeView.id === 'get-started') { | ||
| return <span style={{ paddingLeft: 8 }}>View selector</span> | ||
| } | ||
| return ( | ||
| <span | ||
| style={{ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <Box sx={{ paddingRight: 1.5, marginTop: 0.5 }}> | ||
| {activeView.icon && <activeView.icon />} | ||
| </Box> | ||
| {activeView.name} | ||
| </span> | ||
| ) | ||
| }} | ||
| labelId={idLabel} | ||
| label={'View'} | ||
| id={selectId} | ||
| onChange={handleChangeView} | ||
| sx={{ | ||
| '& .MuiSelect-select': { | ||
| paddingRight: '36px !important', | ||
| }, | ||
| }} | ||
| inputProps={{ | ||
| sx: (theme: any) => ({ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| backgroundColor: theme.palette.background.paperOverlay, | ||
| paddingTop: 0.75, | ||
| paddingLeft: 1, | ||
| paddingBottom: 0.5, | ||
| borderTopLeftRadius: theme.shape.borderRadius, | ||
| borderTopRightRadius: theme.shape.borderRadius, | ||
| borderStyle: 'solid', | ||
| borderWidth: 1, | ||
| borderColor: theme.palette.background.edgeLight, | ||
| ':focus': { | ||
| backgroundColor: theme.palette.background.paperOverlay, | ||
| borderRadius: 1, | ||
| }, | ||
| '& legend': { display: 'none' }, | ||
| '& fieldset': { top: 0 }, | ||
| }), | ||
| }} | ||
| > | ||
| <MenuItem disabled value=''> | ||
| Select a view | ||
| </MenuItem> | ||
| {userViews.map((view) => ( | ||
| <MenuItem | ||
| key={view.id} | ||
| value={view.id} | ||
| style={{ | ||
| display: userViews.some((u) => u.id === view.id) | ||
| ? 'flex' | ||
| : 'none', | ||
| paddingTop: 8, | ||
| paddingBottom: 8, | ||
| marginBottom: 0, | ||
| }} | ||
| > | ||
| <Box sx={{ paddingRight: 2, marginTop: 0.5 }}> | ||
| {view.icon && <view.icon />} | ||
| </Box> | ||
| <ListItemText | ||
| sx={{ | ||
| textAlign: 'left', | ||
| color: 'secondary.contrastText', | ||
| textTransform: 'none', | ||
| fontWeight: 'regular', | ||
| }} | ||
| key={view.name} | ||
| onClick={() => setActiveViewId(view.id)} | ||
| > | ||
| {view.name} | ||
| </ListItemText> | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| </FormControl> | ||
| </Stack> | ||
| <ActionsPanel actions={activeActions} /> | ||
| <Button | ||
| variant='text' | ||
| sx={{ | ||
| color: 'secondary.contrastText', | ||
| }} | ||
| disabled={loading} | ||
| color='secondary' | ||
| onClick={() => setViewingCitations(true)} | ||
| > | ||
| Data sources | ||
| </Button> | ||
| <Button | ||
| variant='text' | ||
| sx={{ | ||
| color: 'secondary.contrastText', | ||
| }} | ||
| disabled={loading} | ||
| color='secondary' | ||
| onClick={() => { | ||
| // downloadFile( | ||
| // `${activeView.id}${gene ? '-' + gene.id : ''}.json`, | ||
| // JSON.stringify(activeData, null, 2) | ||
| // ) | ||
| }} | ||
| > | ||
| Download data | ||
| </Button> | ||
| </Toolbar> | ||
| </AppBar> | ||
| ) | ||
| } |
Oops, something went wrong.