diff --git a/src/components/SingleTermView/OverView/CustomizedTable.jsx b/src/components/SingleTermView/OverView/CustomizedTable.jsx index ce1f6040..cc3a819f 100644 --- a/src/components/SingleTermView/OverView/CustomizedTable.jsx +++ b/src/components/SingleTermView/OverView/CustomizedTable.jsx @@ -33,7 +33,8 @@ const tableStyles = { root: { padding: '.5rem', display: 'flex', - border: '1 solid transparent', + alignItems: 'center', + border: '1px solid transparent', position: 'relative', borderBottom: `1px solid ${gray100}`, marginTop: '.25rem', @@ -42,11 +43,9 @@ const tableStyles = { color: 'red', gap: '0.5rem', fontSize: '0.875rem', - flexShrink: 0, - lineHeight: '142.857%', + lineHeight: '1.25rem', fontWeight: 600, - display: 'flex', - alignItems: 'center' + textDecoration: 'none' }, '& .MuiIconButton-root': { padding: '0', @@ -69,6 +68,9 @@ const tableStyles = { display: 'flex', alignItems: 'center', minWidth: 0, + gap: '0.5rem', + paddingRight: '0.75rem', + paddingLeft: 0 }, '&:not(.secondary)': { '&:hover': { @@ -88,13 +90,7 @@ const tableStyles = { margin: 'auto 0', borderRadius: '0.1875rem' }, - }, - - '& > .MuiBox-root': { - gap: '0.5rem', - paddingRight: '0.75rem', - paddingLeft: 0 - }, + } }, }, inputParentBox: { @@ -149,7 +145,7 @@ const CustomizedTable = ({ data, term, isAddButtonVisible }) => { const [tableHeader, setTableHeader] = useState([ { key: 'subject', label: 'Subject', allowSort: false, direction: 'desc' }, { key: 'predicate', label: 'Predicates', allowSort: false }, - { key: 'object', label: 'Objects', allowSort: true, direction: 'desc' } + { key: 'object', label: 'Objects', allowSort: true, direction: 'desc' }, ]); // eslint-disable-next-line no-unused-vars @@ -260,7 +256,7 @@ const CustomizedTable = ({ data, term, isAddButtonVisible }) => { }, [objectSearchTerm, fetchTerms]); const tableWidth = 800; - const columnWidth = `${tableWidth / tableHeader.length}px`; + const columnWidth = `${Math.round(tableWidth / tableHeader.length)}px`; return ( <> @@ -283,21 +279,20 @@ const CustomizedTable = ({ data, term, isAddButtonVisible }) => { )} ))} + - - {tableContent.map((row, index) => - - )} - + {tableContent.map((row, index) => + + )} {isAddButtonVisible && ( diff --git a/src/components/SingleTermView/OverView/TableRow.jsx b/src/components/SingleTermView/OverView/TableRow.jsx index 1ff524a4..9cd2d370 100644 --- a/src/components/SingleTermView/OverView/TableRow.jsx +++ b/src/components/SingleTermView/OverView/TableRow.jsx @@ -1,8 +1,11 @@ import { useState } from "react"; import PropTypes from "prop-types"; -import { Box, IconButton, Tooltip, Typography } from "@mui/material"; +import { Box, IconButton, Tooltip, Typography, Link } from "@mui/material"; import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined'; +function isValidURL(value) { + return /^https?:\/\/[\w.-]+(\.[a-z]{2,})(:\d+)?(\/.*)?$/i.test(value); +} const TableRow = ({ tableStyles, data, onDragStart, onDragEnter, onDragEnd, index, columnWidth }) => { const { id, subject, predicate, object } = data; @@ -16,11 +19,15 @@ const TableRow = ({ tableStyles, data, onDragStart, onDragEnter, onDragEnd, inde onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > - + - - {subject} - + {isValidURL(subject) ? ( + + {subject} + + ) : ( + {subject} + )} @@ -32,12 +39,16 @@ const TableRow = ({ tableStyles, data, onDragStart, onDragEnter, onDragEnd, inde - - {object} - + {isValidURL(object) ? ( + + {object} + + ) : ( + {object} + )} - + { isHovered && ( diff --git a/src/components/SingleTermView/index.jsx b/src/components/SingleTermView/index.jsx index 57443edb..3ccda1ce 100644 --- a/src/components/SingleTermView/index.jsx +++ b/src/components/SingleTermView/index.jsx @@ -219,7 +219,7 @@ const SingleTermView = () => { - +