Merge pull request #68 from jamiewaese/main

A bunch of style tweaks and UX improvements
BioAnalyticResource · Jan 19, 2024 · 2fb7f9d · 2fb7f9d
2 parents 8273540 + f19e002
commit 2fb7f9d
Show file tree

Hide file tree

Showing 27 changed files with 232 additions and 183 deletions.
diff --git a/Eplant/Eplant.tsx b/Eplant/Eplant.tsx
@@ -1,4 +1,5 @@
-import { Add, CallMade, CallReceived, Close } from '@mui/icons-material'
+import useStateWithStorage from '@eplant/util/useStateWithStorage'
+import { Add, OpenInNew, CallReceived, Close } from '@mui/icons-material'
 import {
   Box,
   CircularProgress,
@@ -8,6 +9,7 @@ import {
   DrawerProps,
   IconButton,
   LinearProgress,
+  Tooltip,
   ThemeProvider,
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
@@ -44,7 +46,7 @@ import { dark, light } from './theme'
 
 // TODO: Make this drawer support opening/closing on mobile
 
-const sideBarWidth = 300
+const sideBarWidth = 240
 
 function ResponsiveDrawer(props: DrawerProps) {
   const [open, setOpen] = React.useState(props.open)
@@ -342,6 +344,7 @@ function EplantLayout() {
         right: '0px',
         position: 'absolute',
         margin: theme.spacing(1),
+        marginRight: 0,
         boxSizing: 'border-box',
       })}
     >
@@ -391,7 +394,7 @@ function EplantLayout() {
                   }}
                   size="small"
                 >
-                  <Close />
+                  <Close fontSize="inherit" />
                 </IconButton>,
               ]
             }}
@@ -463,20 +466,22 @@ function EplantLayout() {
         size="small"
         key="add-tab"
       >
-        <Add />
-      </IconButton>,
+        <Add fontSize="inherit" />
+      </IconButton>
     )
     renderValues.buttons.push(
-      <IconButton
-        onClick={() => {
-          const id = node.getSelectedNode()?.getId()
-          if (id) makePopout(id)
-        }}
-        size="small"
-        key="make-popout"
-      >
-        <CallMade />
-      </IconButton>,
+      <Tooltip title="Open in new window">
+        <IconButton
+          onClick={() => {
+            const id = node.getSelectedNode()?.getId()
+            if (id) makePopout(id)
+          }}
+          size="small"
+          key="make-popout"
+        >
+          <OpenInNew fontSize="inherit" />
+        </IconButton>
+      </Tooltip>
     )
   }
 }

diff --git a/Eplant/UI/Dropdown.tsx b/Eplant/UI/Dropdown.tsx
@@ -83,6 +83,8 @@ export default function Dropdown({
           'aria-labelledby': buttonId,
         }}
         anchorEl={anchorEl}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
         open={open}
         onClose={handleClose}
       >

diff --git a/Eplant/UI/GeneticElementComponent.tsx b/Eplant/UI/GeneticElementComponent.tsx
@@ -188,14 +188,15 @@ export default function GeneticElementComponent({
                   ? theme.palette.background.selected
                   : theme.palette.background.default
               })`,
+
               width: '100%',
               height: '100%',
               position: 'absolute',
               pointerEvents: 'none',
               zIndex: 5,
             },
             ':hover::before': {
-              background: `linear-gradient(to right, transparent, 95%, ${theme.palette.background.hover})`,
+              background: `linear-gradient(to right, transparent, 95%, ${theme.palette.background.selected})`,
             },
           }}
           ref={textContainerRef}
@@ -211,14 +212,21 @@ export default function GeneticElementComponent({
                 : '',
               position: 'absolute',
               userSelect: 'none',
+              top: '2px',
             })}
             ref={textGroupRef}
           >
-            <Typography sx={{ fontWeight: selected ? 'bold' : 'regular' }}>
+            <Typography
+              variant="body2"
+              // sx={{ fontWeight: selected ? 'bold' : 'regular' }}
+            >
               {geneticElement.id}
             </Typography>
             <Divider orientation="vertical" flexItem></Divider>
-            <Typography sx={{ fontWeight: selected ? 'bold' : 'regular' }}>
+            <Typography
+              variant="body2"
+              // sx={{ fontWeight: selected ? 'bold' : 'regular' }}
+            >
               {geneticElement.aliases.join(', ')}
             </Typography>
           </Stack>

diff --git a/Eplant/UI/Layout/ViewContainer/index.tsx b/Eplant/UI/Layout/ViewContainer/index.tsx
@@ -76,37 +76,71 @@ export function ViewContainer<T, S, A>({
         position="sticky"
         elevation={0}
       >
-        <Toolbar style={{ gap: '8px' }}>
+        <Toolbar style={{ gap: '8px', padding: 8, paddingRight: 16 }}>
           <Stack
             direction="row"
             gap={2}
-            sx={{ flexGrow: 1, height: '100%', alignItems: 'center' }}
+            sx={{
+              flexGrow: 1,
+              height: '100%',
+              alignItems: 'center',
+            }}
           >
             {/* View selector dropdown */}
             <FormControl variant="standard">
-              {/* <InputLabel id={idLabel}>View</InputLabel> */}
               <Select
                 value={view.id}
+                renderValue={() => {
+                  if (view.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 }}>
+                        {view.icon && <view.icon />}
+                      </Box>
+                      {view.name}
+                    </span>
+                  )
+                }}
                 labelId={idLabel}
                 label={'View'}
                 id={selectId}
                 onChange={(e) => {
                   const view = views.find((view) => view.id == e?.target?.value)
                   if (view) setView(view)
                 }}
+                sx={{
+                  '& .MuiSelect-select': {
+                    paddingRight: '36px !important',
+                  },
+                }}
                 inputProps={{
-                  sx: {
+                  sx: (theme: {
+                    palette: { background: { paperOverlay: any } }
+                  }) => ({
                     display: 'flex',
                     alignItems: 'center',
-
+                    backgroundColor: theme.palette.background.paperOverlay,
+                    padding: 1,
+                    borderRadius: 1,
                     ':focus': {
-                      backgroundColor: 'transparent',
+                      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}
@@ -117,7 +151,7 @@ export function ViewContainer<T, S, A>({
                         : 'none',
                       paddingTop: 8,
                       paddingBottom: 8,
-                      marginBottom: 8,
+                      marginBottom: 0,
                     }}
                   >
                     <Box sx={{ paddingRight: 2, marginTop: 0.5 }}>
@@ -207,7 +241,7 @@ export function ViewContainer<T, S, A>({
       {topBar}
       <Box
         sx={(theme) => ({
-          padding: '2rem',
+          padding: '1rem',
           flexGrow: 1,
           display: 'flex',
           gap: theme.spacing(4),
@@ -240,12 +274,12 @@ export function ViewContainer<T, S, A>({
             />
           ) : (
             <>
-              <view.header
+              {/* <view.header
                 state={state}
                 activeData={activeData}
                 dispatch={dispatch}
                 geneticElement={gene}
-              />
+              /> */}
               <view.component
                 state={state}
                 geneticElement={gene}

diff --git a/Eplant/UI/Layout/ViewNotSupported.tsx b/Eplant/UI/Layout/ViewNotSupported.tsx
@@ -10,7 +10,7 @@ const Illustration = ({
 }: { color: string } & SVGProps<SVGSVGElement>) => (
   <svg
     width="204"
-    height="386"
+    height="200"
     viewBox="0 0 204 386"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -31,8 +31,18 @@ export default function NotSupported(props: {
 }) {
   const theme = useTheme()
   return (
-    <Stack gap={2} alignItems="center" direction="column" width="100%">
-      <Typography variant="h5">
+    <Stack
+      gap={2}
+      alignItems="center"
+      textAlign="center"
+      justifyContent="center"
+      direction="column"
+      width="100%"
+      minHeight="70vh"
+    >
+      <Illustration color={theme.palette.primary.dark} />
+
+      <Typography variant="h6">
         {props.geneticElement
           ? `Cannot view ${props.view.name.toLowerCase()} for ${
               props.geneticElement.id
@@ -43,20 +53,12 @@ export default function NotSupported(props: {
         variant="body1"
         sx={(theme) => ({
           color: theme.palette.text.secondary,
-          marginBottom: 8,
         })}
       >
         {props.geneticElement
           ? 'No data is available for this gene.'
           : `The ${props.view.name.toLowerCase()} requires a selected gene.`}
       </Typography>
-      <Illustration
-        color={theme.palette.primary.dark}
-        style={{
-          marginTop: 8,
-          maxHeight: '200px',
-        }}
-      />
     </Stack>
   )
 }
diff --git a/Eplant/UI/LeftNav/Collections.tsx b/Eplant/UI/LeftNav/Collections.tsx
@@ -151,11 +151,11 @@ export function Collection({
       <Card
         elevation={0}
         sx={(theme) => ({
-          borderRadius: theme.shape.borderRadius,
+          borderRadius: theme.shape.borderRadius + 'px',
           color: theme.palette.text.secondary,
           backgroundColor:
             genes.length > 0 && !open
-              ? theme.palette.background.active
+              ? theme.palette.background.paper
               : theme.palette.background.default,
         })}
       >
@@ -202,9 +202,10 @@ export function Collection({
             <div
               style={{
                 display: 'flex',
-                flexFlow: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
+                flexFlow: 'column',
+                lineHeight: 'normal',
+                padding: '8px 0px',
+                // justifyContent: 'space-between',
               }}
             >
               <span>{name}</span>
@@ -235,7 +236,7 @@ export function Collection({
           )}
         </Stack>
       </Card>
-      <Collapse in={open}>
+      <Collapse in={open} sx={{ marginTop: '0px !important' }}>
         <SortableContext items={genes} strategy={verticalListSortingStrategy}>
           <Stack
             direction="column"
@@ -256,15 +257,19 @@ export function Collection({
               ))
             ) : (
               <Stack spacing={1} direction="row">
-                <div style={{ width: '24px' }} />
                 <Typography
                   variant="caption"
                   fontStyle="italic"
                   sx={(theme) => ({
-                    color: theme.palette.text.disabled,
+                    color: theme.palette.background.hover,
+                    padding: '0.25rem 0.75rem',
+                    flexGrow: 1,
+                    border: 'dashed 1px',
+                    borderColor: theme.palette.background.hover,
+                    borderRadius: theme.shape.borderRadius + 'px',
                   })}
                 >
-                  Drag genes here
+                  Drag genes to reorder them
                 </Typography>
               </Stack>
             )}

diff --git a/Eplant/UI/LeftNav/GeneSearch/index.tsx b/Eplant/UI/LeftNav/GeneSearch/index.tsx
@@ -43,7 +43,7 @@ export function SearchGroup({
         onChange={(e) =>
           setSpecies(speciesList.find((s) => s.name == e.target.value))
         }
-        label="Species"
+        // label="Species"
         variant="standard"
         inputProps={{
           sx: {
@@ -60,7 +60,7 @@ export function SearchGroup({
         ))}
       </TextField>
       <SearchBar
-        label="Search by gene name"
+        label="Search for genes"
         inputProps={{
           // TODO: Make these clickable
           helperText: <span>Example ABI3 or AT5G60200</span>,

diff --git a/Eplant/UI/LeftNav/index.tsx b/Eplant/UI/LeftNav/index.tsx
@@ -30,7 +30,7 @@ export function LeftNav(props: {
     if (uniq.length != geneticElements.length) setGeneticElements(uniq)
   }, [geneticElements])
   return (
-    <Stack gap={4} direction="column" height={'100%'}>
+    <Stack gap={2} direction="column" height={'100%'}>
       <LogoWithText text="ePlant" />
       <SearchGroup
         addGeneticElements={(s) => {
@@ -66,7 +66,7 @@ export function LeftNav(props: {
               checked={darkMode}
             />
           }
-          label="Dark Mode"
+          label="Dark mode"
         />
       </FormGroup>
     </Stack>