diff --git a/src/components/CollapsibleTable.js b/src/components/CollapsibleTable.js index 8f84199e0..12d320ea3 100644 --- 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 ( + + + + + {cell.value} + + + + ); + } + if (cell?.truncate && cell?.increaseWidth) { return {cell.value} @@ -297,4 +351,5 @@ const SubtableCellRenderer = ({ cell }) => { return {cell.value} ; + }; diff --git a/src/components/data_search/DatasetSearchTable.js b/src/components/data_search/DatasetSearchTable.js index e156541e3..ff424908f 100644 --- 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(', ')