[DUOS-2774] Update Library Styling (#2412)

DataBiosphere · Nov 29, 2023 · de561a8 · de561a8
1 parent 3d9fd5e
commit de561a8
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 8 deletions.
diff --git a/src/components/CollapsibleTable.js b/src/components/CollapsibleTable.js
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
@@ -10,12 +10,13 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
+import Popover from '@mui/material/Popover';
+import Typography from '@mui/material/Typography';
+import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import { useEffect } from 'react';
 import { isEmpty } from 'lodash';
 import { Checkbox } from '@mui/material';
-import { useState } from 'react';
 
 /*
 The data should follow the following format:
@@ -104,16 +105,21 @@ const table = {
 
 const StyledTableCell = styled(TableCell)(() => ({
   [`&.${tableCellClasses.head}`]: {
-    fontSize: '1.4rem',
+    color: '#333F52',
     fontFamily: 'Montserrat',
-    fontWeight: 600,
+    fontSize: '14px',
+    fontWeight: 'bold',
+    lineHeight: '16px',
     backgroundColor: '#e2e8f4',
     textTransform: 'uppercase',
   },
   [`&.${tableCellClasses.body}`]: {
-    fontSize: '1.4rem',
+    fontSize: '14px',
+    lineHeight: '24px',
     fontFamily: 'Montserrat',
     fontWeight: 400,
+    color: '#333F52',
+    letterSpacing: 0,
   },
 }));
 
@@ -261,6 +267,54 @@ export default CollapsibleTable;
 
 const TableCellRenderer = ({ cell }) => {
 
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handlePopoverOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+
+  const popoverOpen = Boolean(anchorEl);
+
+  if (cell?.hideUnderIcon) {
+    return (
+      <StyledTableCell>
+        <ArticleOutlinedIcon
+          aria-owns={popoverOpen ? 'mouse-over-popover' : undefined}
+          aria-haspopup="true"
+          onMouseEnter={handlePopoverOpen}
+          onMouseLeave={handlePopoverClose}
+          sx={{ color: '#0948B7' }}
+        />
+        <Popover
+          id="mouse-over-popover"
+          sx={{
+            pointerEvents: 'none',
+          }}
+          open={popoverOpen}
+          anchorEl={anchorEl}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'left',
+          }}
+          onClose={handlePopoverClose}
+          disableRestoreFocus
+        >
+          <Typography sx={{ p: 1, fontFamily: 'Montserrat', fontSize: '14px', maxWidth: '80rem' }}>
+            {cell.value}
+          </Typography>
+        </Popover>
+      </StyledTableCell>
+    );
+  }
+
   if (cell?.truncate && cell?.increaseWidth) {
     return <TruncatedTableCell style={{ maxWidth: '30ch' }}>
       {cell.value}
@@ -297,4 +351,5 @@ const SubtableCellRenderer = ({ cell }) => {
   return <StyledTableCell>
     {cell.value}
   </StyledTableCell>;
+
 };
diff --git a/src/components/data_search/DatasetSearchTable.js b/src/components/data_search/DatasetSearchTable.js
@@ -121,10 +121,11 @@ export const DatasetSearchTable = (props) => {
             {
               value: entry[0].study.studyName,
               truncate: true,
-              increaseWidth: true
+              increaseWidth: true,
             },
             {
               value: entry[0].study.description,
+              hideUnderIcon: true,
             },
             {
               value: entry.length,
@@ -159,7 +160,7 @@ export const DatasetSearchTable = (props) => {
                 data: [
                   {
                     value: dataset.datasetIdentifier,
-                    increaseWidth: true
+                    increaseWidth: true,
                   },
                   {
                     value: dataset.dataUse?.primary.map((use) => use.code).join(', ')