Tooltip styling (#682)

* Fix bottom whitespace & divider position * Remove filtering of unassigned jobs * NavBar button location * update showUnassigned test * Add ShowJobOperation test * Remove operation resolves MANAGE - remove operation from job (Frondend: 8pts) #573 * refactor background color & icon * Add tooltip to buttons * Auto db changes * Add tooltips and column labels * Fix columns * Fix tooltip error in header * Add cancel column name * Adding more tooltips * Begin fixing migrations * Check for table existence before creating tables * Check for id_strings existence before sql create * db structure Co-authored-by: Aquadoc <[email protected]>
aquariumbio · Oct 4, 2021 · 03030bb · 03030bb
1 parent 5762681
commit 03030bb
Show file tree

Hide file tree

Showing 11 changed files with 174 additions and 120 deletions.
diff --git a/frontend/src/components/jobs/HorizontalNavList.jsx b/frontend/src/components/jobs/HorizontalNavList.jsx
@@ -61,7 +61,6 @@ const HorizontalNavList = ({
           {!!count && <Typography className={classes.count}>({count})</Typography>}
         </ListItem>
       ))}
-
     </List>
   );
 };

diff --git a/frontend/src/components/jobs/JobsSideBar.jsx b/frontend/src/components/jobs/JobsSideBar.jsx
@@ -8,6 +8,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
+import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import SideBar from '../shared/layout/SideBar';
 import ListFixed from '../shared/layout/ListFixed';
@@ -57,37 +58,43 @@ const JobsSideBar = ({
   };
 
   const opsList = Object.keys(activeCounts).map((key) => (
-    <ListItem
-      button
-      role="tab"
-      onClick={(event) => handleOperationClick(event, key)}
-      selected={category === key}
-      id="category-list"
-      key={key}
-    >
-      <Typography variant="caption" noWrap>{key}</Typography>
-      <Typography variant="caption" className={classes.count}>{`(${activeCounts[`${key}`]})`}</Typography>
-    </ListItem>
+    <Tooltip title={key}>
+      <ListItem
+        button
+        role="tab"
+        onClick={(event) => handleOperationClick(event, key)}
+        selected={category === key}
+        key={key}
+      >
+        <Typography variant="caption" noWrap>{key}</Typography>
+        <Typography variant="caption" className={classes.count}>{`(${activeCounts[`${key}`]})`}</Typography>
+      </ListItem>
+    </Tooltip>
   ));
 
   opsList.push(
     <ListItem button className={classes.label} onClick={handleExpand} id="inactive" key="inactive">
-      <ListItemIcon>{expand ? <ExpandLess /> : <ExpandMore />}</ListItemIcon>
+      <ListItemIcon>
+        {expand
+          ? <Tooltip title="Collapse Inactive List"><ExpandLess /></Tooltip>
+          : <Tooltip title="Expand Inactive List"><ExpandMore /></Tooltip>}
+      </ListItemIcon>
       <ListItemText primary="Inactive" />
     </ListItem>,
     <Collapse in={expand} timeout="auto" unmountOnExit key="collapse">
       {inactive.map((key, count) => (
-        <ListItem
-          button
-          role="tab"
-          className={classes.inactive}
-          key={key}
-          onClick={(event) => handleJobStateClick(event)}
-          selected={value === key}
-        >
-          <Typography variant="caption" noWrap>{key}</Typography>
-          <Typography variant="caption" className={classes.count}>({count})</Typography>
-        </ListItem>
+        <Tooltip title={key} key={key}>
+          <ListItem
+            button
+            role="tab"
+            className={classes.inactive}
+            onClick={(event) => handleJobStateClick(event)}
+            selected={value === key}
+          >
+            <Typography variant="caption" noWrap>{key}</Typography>
+            <Typography variant="caption" className={classes.count}>({count})</Typography>
+          </ListItem>
+        </Tooltip>
       ))}
     </Collapse>,
   );
@@ -98,44 +105,44 @@ const JobsSideBar = ({
         title="JOBS"
         ariaLabel="job-states"
       >
-        <ListItem
-          button
-          role="tab"
-          onClick={(event) => handleJobStateClick(event, 'unassigned')}
-          selected={value === 'unassigned'}
-          id="unassigned"
-          key="unassigned"
-
-        >
-          <Typography variant="caption" noWrap>Unassigned</Typography>
-          <Typography variant="caption" className={classes.count}>{`(${jobCounts.unassigned})`}</Typography>
-        </ListItem>
-
-        <ListItem
-          button
-          role="tab"
-          onClick={(event) => handleJobStateClick(event, 'assigned')}
-          selected={value === 'assigned'}
-          id="assigned"
-          key="assigned"
-
-        >
-          <Typography variant="caption" noWrap>Assigned</Typography>
-          <Typography variant="caption" className={classes.count}>{`(${jobCounts.assigned})`}</Typography>
-        </ListItem>
-
-        <ListItem
-          button
-          role="tab"
-          onClick={(event) => handleJobStateClick(event, 'finished')}
-          selected={value === 'finished'}
-          id="finished"
-          key="finished"
-
-        >
-          <Typography variant="caption" noWrap>Finished</Typography>
-          <Typography variant="caption" className={classes.count}>{`(${jobCounts.finished})`}</Typography>
-        </ListItem>
+        <Tooltip title="Unassigned Jobs" key="unassigned">
+          <ListItem
+            button
+            role="tab"
+            onClick={(event) => handleJobStateClick(event, 'unassigned')}
+            selected={value === 'unassigned'}
+            id="unassigned"
+          >
+            <Typography variant="caption" noWrap>Unassigned</Typography>
+            <Typography variant="caption" className={classes.count}>{`(${jobCounts.unassigned})`}</Typography>
+          </ListItem>
+        </Tooltip>
+
+        <Tooltip title="Assigned Jobs" key="assigned">
+          <ListItem
+            button
+            role="tab"
+            onClick={(event) => handleJobStateClick(event, 'assigned')}
+            selected={value === 'assigned'}
+            id="assigned"
+          >
+            <Typography variant="caption" noWrap>Assigned</Typography>
+            <Typography variant="caption" className={classes.count}>{`(${jobCounts.assigned})`}</Typography>
+          </ListItem>
+        </Tooltip>
+
+        <Tooltip title="Finished Jobs" key="finished">
+          <ListItem
+            button
+            role="tab"
+            onClick={(event) => handleJobStateClick(event, 'finished')}
+            selected={value === 'finished'}
+            id="finished"
+          >
+            <Typography variant="caption" noWrap>Finished</Typography>
+            <Typography variant="caption" className={classes.count}>{`(${jobCounts.finished})`}</Typography>
+          </ListItem>
+        </Tooltip>
       </ListFixed>
 
       <ListScroll

diff --git a/frontend/src/components/jobs/ShowAssigned.jsx b/frontend/src/components/jobs/ShowAssigned.jsx
@@ -64,7 +64,7 @@ const ShowAssigned = () => {
             <Typography variant={tablet ? 'body2' : 'body1'} noWrap>{job.operations_count}</Typography>
           </div>
           <div className={`${globalClasses.flexCol1}`}>
-            <Typography variant={tablet ? 'body2' : 'body1'} noWrap>{job.created_at ? job.created_at.substring(0, 16).replace('T', ' ') : '-'}</Typography>
+            <Typography variant={tablet ? 'body2' : 'body1'} noWrap>{job.updated_at ? job.updated_at.substring(0, 16).replace('T', ' ') : '-'}</Typography>
           </div>
         </div>
       ))

diff --git a/frontend/src/components/jobs/ShowByOperation.jsx b/frontend/src/components/jobs/ShowByOperation.jsx
@@ -4,6 +4,7 @@ import {
   func, string, object,
 } from 'prop-types';
 import Divider from '@material-ui/core/Divider';
+import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core';
 import jobsAPI from '../../helpers/api/jobsAPI';
@@ -231,16 +232,18 @@ const ShowByOperation = ({
       <div className={globalClasses.flexWrapper} key={operation.id}>
         <div className={`${globalClasses.flex} ${globalClasses.flexRow} ${checked.includes(operation.id) && globalClasses.hightlight}`} key={`op_${operation.id}`}>
           <div className={`${globalClasses.flexCol1}`}>
-            <Checkbox
-              color="primary"
-              inputProps={{ 'aria-label': 'operation-checkbox' }}
-              edge="end"
-              checked={checked.indexOf(operation.id) !== -1}
-              onChange={handleToggle(operation.id)}
-              tabIndex={-1}
-              disableRipple
-              className={classes.checkbox}
-            />
+            <Tooltip title="add to job">
+              <Checkbox
+                color="primary"
+                inputProps={{ 'aria-label': 'operation-checkbox' }}
+                edge="end"
+                checked={checked.indexOf(operation.id) !== -1}
+                onChange={handleToggle(operation.id)}
+                tabIndex={-1}
+                disableRipple
+                className={classes.checkbox}
+              />
+            </Tooltip>
           </div>
           <div className={`${globalClasses.flexCol1}`}>
             <Typography variant="body2" noWrap>{operation.plan_id}</Typography>

diff --git a/frontend/src/components/jobs/ShowFinished.jsx b/frontend/src/components/jobs/ShowFinished.jsx
@@ -59,12 +59,12 @@ const ShowFinished = () => {
       </TextField>
 
       <div className={`${globalClasses.flex} ${globalClasses.flexTitle}`}>
-        <div className={`${globalClasses.flexCol1}`}>Assigned To</div>
+        <div className={`${globalClasses.flexCol1}`}>Experimenter</div>
         <div className={`${globalClasses.flexCol1}`}>Assigned</div>
         <div className={`${globalClasses.flexCol1}`}>Started</div>
         <div className={`${globalClasses.flexCol1}`}>Finished</div>
         <div className={`${globalClasses.flexCol2}`}>Protocol</div>
-        <div className={`${globalClasses.flexCol1}`}>Job</div>
+        <div className={`${globalClasses.flexCol1}`}>Job#</div>
         <div className={`${globalClasses.flexCol1}`}>Operations</div>
       </div>
     </div>
@@ -84,6 +84,12 @@ const ShowFinished = () => {
           <div className={`${globalClasses.flexCol1}`}>
             <Typography variant={tablet ? 'body2' : 'body1'} noWrap>{job.assigned_date ? job.assigned_date.substring(0, 16).replace('T', ' ') : '-'}</Typography>
           </div>
+          <div className={`${globalClasses.flexCol1}`}>
+            <Typography variant={tablet ? 'body2' : 'body1'} noWrap>{job.created_at ? job.created_at.substring(0, 16).replace('T', ' ') : '-'}</Typography>
+          </div>
+          <div className={`${globalClasses.flexCol1}`}>
+            <Typography variant={tablet ? 'body2' : 'body1'} noWrap>{job.updated_at ? job.updated_at.substring(0, 16).replace('T', ' ') : '-'}</Typography>
+          </div>
           <div className={`${globalClasses.flexCol2}`}>
             <Typography variant={tablet ? 'body2' : 'body1'} noWrap>{job.name}</Typography>
           </div>
@@ -93,9 +99,7 @@ const ShowFinished = () => {
           <div className={`${globalClasses.flexCol1}`}>
             <Typography variant={tablet ? 'body2' : 'body1'} noWrap>{job.operations_count}</Typography>
           </div>
-          <div className={`${globalClasses.flexCol1}`}>
-            <Typography variant={tablet ? 'body2' : 'body1'} noWrap>{job.created_at ? job.created_at.substring(0, 16).replace('T', ' ') : '-'}</Typography>
-          </div>
+
         </div>
       ))
     );

diff --git a/frontend/src/components/jobs/ShowJobOperations.jsx b/frontend/src/components/jobs/ShowJobOperations.jsx
@@ -15,7 +15,7 @@ import { useWindowDimensions } from '../../WindowDimensionsProvider';
 
 const useStyles = makeStyles((theme) => ({
   title: {
-    padding: theme.spacing(2),
+    padding: `${theme.spacing(2)}px ${theme.spacing(4)}px`,
     borderBottom: '1px solid #DDD',
     fontWeight: 'bold',
 

diff --git a/frontend/src/components/jobs/ShowUnassigned.jsx b/frontend/src/components/jobs/ShowUnassigned.jsx
@@ -9,6 +9,7 @@ import AccordionDetails from '@material-ui/core/AccordionDetails';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { makeStyles } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
 import globalUseSyles from '../../globalUseStyles';
 import jobsAPI from '../../helpers/api/jobsAPI';
 import Main from '../shared/layout/Main';
@@ -98,7 +99,7 @@ const ShowUnassigned = (props) => {
         <div className={`${globalClasses.flexCol1}`}><Typography variant="body2">Job</Typography></div>
         <div className={`${globalClasses.flexCol1}`}><Typography variant="body2">Operations</Typography></div>
         <div className={`${globalClasses.flexCol1}`}><Typography variant="body2">Created</Typography></div>
-        <div className={`${globalClasses.flexCol1}`}><Typography variant="body2" /></div>
+        <div className={`${globalClasses.flexCol1}`}><Typography variant="body2">Cancel</Typography></div>
       </div>
     </div>
   );
@@ -131,7 +132,9 @@ const ShowUnassigned = (props) => {
                 aria-label={`expand job ${job.job_id}`}
                 onClick={() => toggleExpand(job.job_id)}
               >
-                {expand[job.job_id].open ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+                {expand[job.job_id].open
+                  ? <Tooltip title={`Collapse Job ${job.job_id}`}><ExpandLessIcon /></Tooltip>
+                  : <Tooltip title={`Expand Job ${job.job_id}`}><ExpandMoreIcon /></Tooltip>}
               </IconButton>
             </div>
             <div className={`${globalClasses.flexCol2}`}>

diff --git a/frontend/src/components/jobs/VerticalNavList.jsx b/frontend/src/components/jobs/VerticalNavList.jsx
@@ -5,9 +5,12 @@ import {
 import { makeStyles } from '@material-ui/core';
 import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
 import SideBar from '../shared/layout/SideBar';
 import ListFixed from '../shared/layout/ListFixed';
 
+// Operations navigation component
+
 const useStyles = makeStyles(() => ({
   count: {
     marginLeft: '2px',
@@ -37,17 +40,18 @@ const VerticalNavList = ({
         )}
 
         {list !== undefined && list.map((li) => (
-          <ListItem
-            button
-            role="tab"
-            onClick={(event) => handleListItemClick(event, li.name)}
-            selected={value.name === li.name}
-            key={li.name}
-            // className={globalClasses.pointer}
-          >
-            <Typography variant="body2" noWrap>{li.name} </Typography>
-            <Typography variant="body2" className={classes.count}>({li.n})</Typography>
-          </ListItem>
+          <Tooltip title={li.name}>
+            <ListItem
+              button
+              role="tab"
+              onClick={(event) => handleListItemClick(event, li.name)}
+              selected={value.name === li.name}
+              key={li.name}
+            >
+              <Typography variant="body2" noWrap>{li.name} </Typography>
+              <Typography variant="body2" className={classes.count}>({li.n})</Typography>
+            </ListItem>
+          </Tooltip>
         ))}
       </ListFixed>
     </SideBar>

diff --git a/frontend/src/components/navigation/Header.jsx b/frontend/src/components/navigation/Header.jsx
@@ -7,6 +7,7 @@ import Toolbar from '@material-ui/core/Toolbar';
 import { withRouter, Link as RouterLink } from 'react-router-dom';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
+import Tooltip from '@material-ui/core/Tooltip';
 import UserMenu from './UserMenu';
 import LeftHamburgerMenu from './LeftHamburgerMenu';
 import { HomeButton } from '../shared/Buttons';
@@ -97,9 +98,19 @@ const Header = ({ location }) => {
     <AppBar position="fixed" elevation={0} className={classes.root} component="header">
       <Toolbar>
         <div className={classes.headerOptions}>
-          <LeftHamburgerMenu />
+          <Tooltip title="Menu">
+            {/* Wrap custom components in fragment to avoid
+                'Invalid prop `children` supplied to `ForwardRef(Tooltip)`' error */}
+            <>
+              <LeftHamburgerMenu />
+            </>
+          </Tooltip>
 
-          <HomeButton />
+          <Tooltip title="Home">
+            <>
+              <HomeButton />
+            </>
+          </Tooltip>
 
           <Tabs
             value={value}
@@ -123,8 +134,11 @@ const Header = ({ location }) => {
           </Tabs>
 
         </div>
-
-        <UserMenu />
+        <Tooltip title="User Menu">
+          <>
+            <UserMenu />
+          </>
+        </Tooltip>
 
       </Toolbar>
     </AppBar>
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,7 +61,6 @@ const HorizontalNavList = ({ @@
               {!!count && <Typography className={classes.count}>({count})</Typography>}
             </ListItem>
           ))}
         </List>
       );
     };
@@ Expand Down @@