diff --git a/Eplant/UI/Dropdown.tsx b/Eplant/UI/Dropdown.tsx index fc1f6394..69f994a3 100644 --- a/Eplant/UI/Dropdown.tsx +++ b/Eplant/UI/Dropdown.tsx @@ -25,6 +25,7 @@ const StyledMenu = styled((props: MenuProps) => ( ))(({ theme }) => ({ '& .MuiPaper-root': { borderRadius: 3, + backgroundColor: theme.palette.background.paperOverlay, marginTop: theme.spacing(1), minWidth: 180, '& .MuiMenuItem-root': { diff --git a/Eplant/UI/Layout/.DS_Store b/Eplant/UI/Layout/.DS_Store new file mode 100644 index 00000000..a219ae28 Binary files /dev/null and b/Eplant/UI/Layout/.DS_Store differ diff --git a/Eplant/UI/Layout/FailedToLoad.tsx b/Eplant/UI/Layout/FailedToLoad.tsx index 96220fee..2f4d72ac 100644 --- a/Eplant/UI/Layout/FailedToLoad.tsx +++ b/Eplant/UI/Layout/FailedToLoad.tsx @@ -9,8 +9,8 @@ const Illustration = ({ ...props }: { color: string } & SVGProps) => ( - + + + {props.geneticElement ? `There was an error while trying to load ${props.view.name.toLowerCase()} for ${ props.geneticElement.id @@ -52,12 +55,6 @@ export default function FailedToLoad(props: { GitHub - ) } diff --git a/Eplant/UI/Layout/ViewContainer/LoadingPage.tsx b/Eplant/UI/Layout/ViewContainer/LoadingPage.tsx index c35863a4..c03e59df 100644 --- a/Eplant/UI/Layout/ViewContainer/LoadingPage.tsx +++ b/Eplant/UI/Layout/ViewContainer/LoadingPage.tsx @@ -15,10 +15,16 @@ export function LoadingImage(props: SVGProps) { return ( + {/* + // OLD IMAGE (the watering can) ) { + /> */} + + + + + + + + ) } @@ -64,12 +91,6 @@ export default function LoadingPage(props: { return return ( - - Loading{' '} - {props.gene - ? props.gene.id + ' data for ' + props.view.name - : 'data for ' + props.view.name} - + + Loading{' '} + {props.gene + ? props.gene.id + ' data for ' + props.view.name + : 'data for ' + props.view.name} + ) } diff --git a/Eplant/UI/Layout/ViewContainer/index.tsx b/Eplant/UI/Layout/ViewContainer/index.tsx index ea24599e..d40601a6 100644 --- a/Eplant/UI/Layout/ViewContainer/index.tsx +++ b/Eplant/UI/Layout/ViewContainer/index.tsx @@ -76,7 +76,7 @@ export function ViewContainer({ position="sticky" elevation={0} > - + ({ gap: '8px', paddingRight: 16, borderStyle: 'solid', borderWidth: '1px 0px 1px 1px', borderColor: theme.palette.background.edge, borderLeftColor: theme.palette.background.edgeLight })}> ({ }} inputProps={{ sx: (theme: { - palette: { background: { paperOverlay: any } } + shape: any + palette: { background: { paperOverlay: any, edgeLight: any } } }) => ({ display: 'flex', alignItems: 'center', backgroundColor: theme.palette.background.paperOverlay, - padding: 1, - borderRadius: 1, + 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, @@ -195,7 +202,7 @@ export function ViewContainer({ setViewingCitations(true) }} > - Get citations + Data sources
- Gene - {geneticElement.id} -
-
- Aliases + {geneticElement.id} {geneticElement.aliases.join(', ')}
diff --git a/Eplant/views/GetStartedView/Tile.tsx b/Eplant/views/GetStartedView/Tile.tsx index ef70f3f2..d1260767 100644 --- a/Eplant/views/GetStartedView/Tile.tsx +++ b/Eplant/views/GetStartedView/Tile.tsx @@ -39,13 +39,16 @@ export default function Tile({ view }: TileProps) { boxShadow: '0px 4px 8px rgb(0,0,0,0.25)', height: '100%', marginRight: 1, + display: 'flex', + flexDirection: 'column', })} > theme.palette.background.edgeLight, borderRadius: (theme) => theme.shape.borderRadius+"px" }} /> diff --git a/Eplant/views/PlantEFP/index.tsx b/Eplant/views/PlantEFP/index.tsx index 96fa1c6a..afe5ab25 100644 --- a/Eplant/views/PlantEFP/index.tsx +++ b/Eplant/views/PlantEFP/index.tsx @@ -2,7 +2,8 @@ import React from 'react' import EFP from '../eFP' import EFPViewer from '../eFP/Viewer' import PlantEFPIcon from './icon' -import Thumbnail from '../../../thumbnails/plant_efp.png' +import ThumbnailLight from '../../../thumbnails/plant-efp-light.png' +import ThumbnailDark from '../../../thumbnails/plant-efp-dark.png' import { makeEfps } from '../eFP/Viewer/util' import { EFPViewerData } from '../eFP/Viewer/types' @@ -33,5 +34,5 @@ export default new EFPViewer( efps, () => , 'Visualize gene expression over time on a developmental map.', - Thumbnail, + ThumbnailLight, ) diff --git a/Eplant/views/PublicationViewer/GeneRIFs.tsx b/Eplant/views/PublicationViewer/GeneRIFs.tsx index ca9f7059..2ab4693d 100644 --- a/Eplant/views/PublicationViewer/GeneRIFs.tsx +++ b/Eplant/views/PublicationViewer/GeneRIFs.tsx @@ -22,6 +22,7 @@ const columns: GridColDef[] = [ variant="outlined" color="secondary" size="small" + target='_blank' > VIEW PAPER diff --git a/Eplant/views/PublicationViewer/Publications.tsx b/Eplant/views/PublicationViewer/Publications.tsx index b06d4b00..6f31a5cb 100644 --- a/Eplant/views/PublicationViewer/Publications.tsx +++ b/Eplant/views/PublicationViewer/Publications.tsx @@ -36,15 +36,15 @@ const columns: GridColDef[] = [ headerClassName: 'select-none', renderCell: (params: GridRenderCellParams<{ [key: string]: unknown }>) => ( <> - - - + VIEW PAPER + ), }, diff --git a/Eplant/views/PublicationViewer/index.tsx b/Eplant/views/PublicationViewer/index.tsx index f983e964..28b0dc37 100644 --- a/Eplant/views/PublicationViewer/index.tsx +++ b/Eplant/views/PublicationViewer/index.tsx @@ -1,13 +1,15 @@ -import { Link, Tab, Tabs, Typography } from '@mui/material' +import { Link, Tab, Tabs, Typography, Theme, useTheme } from '@mui/material' import * as React from 'react' import { View, ViewProps } from '../../View' import { GeneRIFs } from './GeneRIFs' import { Publications } from './Publications' import { PublicationViewerData, TabValues } from './types' import PublicationViewerIcon from './icon' -import Thumbnail from '../../../thumbnails/publication_viewer.png' +import ThumbnailLight from '../../../thumbnails/publication-viewer-light.png' +import ThumbnailDark from '../../../thumbnails/publication-viewer.png' import { ViewDataError } from '@eplant/View/viewData' + const PublicationViewer: View = { name: 'Publication viewer', id: 'publication-viewer', @@ -16,18 +18,19 @@ const PublicationViewer: View = { activeData, }: ViewProps) { const [tab, setTab] = React.useState('publications') + const theme = useTheme() return (
setTab(val)}> -