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(', ')