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 = () => {
-
+