ILEX-79 Single term view table issues

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 }) => {
               )}
             </Box>
           ))}
+          <Box sx={{ width: '6.25rem' }}></Box>
         </Box>
-        <Box sx={tableStyles.body}>
-          {tableContent.map((row, index) =>
-            <TableRow
-              key={`${row.id}-${index}`}
-              tableStyles={tableStyles}
-              columnWidth={columnWidth}
-              data={row}
-              index={index}
-              onDragStart={dragStart}
-              onDragEnter={dragEnter}
-              onDragEnd={dragEnd}
-            />
-          )}
-        </Box>
+        {tableContent.map((row, index) =>
+          <TableRow
+            key={`${row.id}-${index}`}
+            tableStyles={tableStyles}
+            columnWidth={columnWidth}
+            data={row}
+            index={index}
+            onDragStart={dragStart}
+            onDragEnter={dragEnter}
+            onDragEnd={dragEnd}
+          />
+        )}
         {isAddButtonVisible && (
           <Box sx={tableStyles.root}>
             <Box sx={{ paddingLeft: '0 !important' }}>

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)}
     >
-      <Box sx={{ paddingLeft: "0 !important", width: columnWidth }}>
+      <Box sx={{ width: columnWidth }}>
         <Tooltip title={subject}>
-          <Typography>
-            {subject}
-          </Typography>
+          {isValidURL(subject) ? (
+            <Link href={subject} target="_blank" rel="noopener noreferrer">
+              {subject}
+            </Link>
+          ) : (
+            <Typography>{subject}</Typography>
+          )}
         </Tooltip>
       </Box>
       <Box sx={{ width: columnWidth }}>
@@ -32,12 +39,16 @@ const TableRow = ({ tableStyles, data, onDragStart, onDragEnter, onDragEnd, inde
       </Box>
       <Box sx={{ width: columnWidth }}>
         <Tooltip title={object}>
-          <Typography>
-            {object}
-          </Typography>
+          {isValidURL(object) ? (
+            <Link href={object} target="_blank" rel="noopener noreferrer">
+              {object}
+            </Link>
+          ) : (
+            <Typography>{object}</Typography>
+          )}
         </Tooltip>
       </Box>
-      <Box display="flex" justifyContent="flex-end" sx={{ paddingRight: "0 !important" }}>
+      <Box display="flex" sx={{ width: '6.25rem', justifyContent: "flex-end" }}>
         {
           isHovered && (
             <Tooltip placement='right' title={"Help"}>

src/components/SingleTermView/index.jsx

@@ -219,7 +219,7 @@ const SingleTermView = () => {
                 </Stack>
               </Grid>
               <Grid item xs={6}>
-                <CopyLinkComponent url="http://uri.interlex.org/base/ilx_0101901" />
+                <CopyLinkComponent url={`http://uri.interlex.org/base/${searchTerm}`} />
               </Grid>
               <Grid item xs={12} mt="2rem" display='flex' alignItems='center' justifyContent='space-between'>
                 <BasicTabs tabValue={tabValue} handleChange={handleChangeTabs} tabs={["Overview", "Variants", "Version history", "Discussions"]} />