Long text handling

web/src/components/datasets/DatasetVersions.tsx

@@ -23,6 +23,7 @@ import { formatUpdatedAt } from '../../helpers'
 import { useTheme } from '@emotion/react'
 import DatasetInfo from './DatasetInfo'
 import IconButton from '@mui/material/IconButton'
+import MQTooltip from '../core/tooltip/MQTooltip'
 import MqCopy from '../core/copy/MqCopy'
 import MqPaging from '../paging/MqPaging'
 import MqText from '../core/text/MqText'
@@ -144,7 +145,9 @@ const DatasetVersions: FunctionComponent<DatasetVersionsProps & DispatchProps> =
               >
                 <TableCell align='left'>
                   <Box display={'flex'} alignItems={'center'}>
-                    {version.version.substring(0, 8)}...
+                    <MQTooltip title={version.version}>
+                      <MqText font={'mono'}>{version.version.substring(0, 8)}...</MqText>
+                    </MQTooltip>
                     <MqCopy string={version.version} />
                   </Box>
                 </TableCell>
@@ -154,7 +157,7 @@ const DatasetVersions: FunctionComponent<DatasetVersionsProps & DispatchProps> =
                   <Box display={'flex'} alignItems={'center'}>
                     {version.createdByRun ? (
                       <>
-                        {version.createdByRun.id.substring(0, 8)}...
+                        <MqText font={'mono'}>{version.createdByRun.id.substring(0, 8)}...</MqText>
                         <MqCopy string={version.createdByRun.id} />
                       </>
                     ) : (

web/src/helpers/text.ts

@@ -5,6 +5,13 @@ export const truncateText = (text: string, maxLength: number) => {
   return text
 }
 
+export const truncateTextFront = (text: string, maxLength: number) => {
+  if (text.length > maxLength) {
+    return `...${text.substring(text.length - maxLength)}`
+  }
+  return text
+}
+
 export const pluralize = (count: number, singular: string, plural: string) => {
   const noun = count === 1 ? singular : plural
   return `${count} ${noun}`

web/src/routes/dashboard/JobRunItem.tsx

@@ -45,9 +45,13 @@ const JobRunItem: React.FC<Props> = ({ job }) => {
     >
       <Box display={'flex'} alignItems={'center'} justifyContent={'space-between'} mb={1}>
         <Box display={'flex'} alignItems={'center'}>
-          <MqText bold font='mono' sx={{ mr: 2 }}>
-            {truncateText(job.name, 40)}
-          </MqText>
+          <MQTooltip title={job.name} placement={'top'}>
+            <Box>
+              <MqText bold font='mono' sx={{ mr: 2 }}>
+                {truncateText(job.name, 75)}
+              </MqText>
+            </Box>
+          </MQTooltip>
           {job.tags.slice(0, 3).map((tag, index) => (
             <Chip key={index} sx={{ mr: 1 }} size={'small'} label={tag} />
           ))}

web/src/routes/table-level/TableLineageDatasetNode.tsx

@@ -15,7 +15,7 @@ import { datasetFacetsQualityAssertions, datasetFacetsStatus } from '../../helpe
 import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase'
 import { fetchDataset, resetDataset } from '../../store/actionCreators'
 import { formatUpdatedAt } from '../../helpers'
-import { truncateText } from '../../helpers/text'
+import { truncateText, truncateTextFront } from '../../helpers/text'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import Box from '@mui/system/Box'
 import IconButton from '@mui/material/IconButton'
@@ -72,15 +72,15 @@ const TableLineageDatasetNode = ({
               Namespace:
             </MqText>
             <MqText block font={'mono'}>
-              {truncateText(lineageDataset.namespace, 40)}
+              {truncateTextFront(lineageDataset.namespace, 40)}
             </MqText>
           </Box>
           <Box display={'flex'} justifyContent={'space-between'}>
             <MqText block bold sx={{ mr: 6 }}>
               Name:
             </MqText>
             <MqText block font={'mono'}>
-              {truncateText(lineageDataset.name, 40)}
+              {truncateTextFront(lineageDataset.name, 40)}
             </MqText>
           </Box>
           {lineageDataset.description && (

web/src/routes/table-level/TableLineageJobNode.tsx

@@ -10,7 +10,7 @@ import { faCog } from '@fortawesome/free-solid-svg-icons/faCog'
 import { formatUpdatedAt } from '../../helpers'
 import { runStateColor } from '../../helpers/nodes'
 import { theme } from '../../helpers/theme'
-import { truncateText } from '../../helpers/text'
+import { truncateText, truncateTextFront } from '../../helpers/text'
 import { useNavigate, useParams } from 'react-router-dom'
 import Box from '@mui/system/Box'
 import MQTooltip from '../../components/core/tooltip/MQTooltip'
@@ -49,15 +49,15 @@ const TableLineageJobNode = ({ node }: TableLineageJobNodeProps & StateProps) =>
               Namespace:
             </MqText>
             <MqText block font={'mono'}>
-              {truncateText(job.namespace, 40)}
+              {truncateTextFront(job.namespace, 40)}
             </MqText>
           </Box>
           <Box display={'flex'} justifyContent={'space-between'}>
             <MqText block bold sx={{ mr: 6 }}>
               Name:
             </MqText>
             <MqText block font={'mono'}>
-              {truncateText(job.name, 40)}
+              {truncateTextFront(job.name, 40)}
             </MqText>
           </Box>
           {job.description && (