Updating tooltips and fixing rendering issue in column lineage table …

…display.
MarquezProject · May 6, 2024 · 2a6eddc · 2a6eddc
1 parent b29be3d
commit 2a6eddc
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 46 deletions.
diff --git a/web/src/components/core/text/MqText.tsx b/web/src/components/core/text/MqText.tsx
@@ -3,7 +3,7 @@
 
 import React, { ReactElement } from 'react'
 
-import { Box } from '@mui/system'
+import { Box, SxProps } from '@mui/system'
 import { Link as LinkRouter } from 'react-router-dom'
 import { THEME_EXTRA } from '../../../helpers/theme'
 import { Typography } from '@mui/material'
@@ -30,6 +30,8 @@ interface OwnProps {
   font?: 'primary' | 'mono'
   small?: boolean
   bottomMargin?: boolean
+  block?: boolean
+  sx?: SxProps
   children: ReactElement | (string | ReactElement)[] | string | string[] | number | undefined | null
   onClick?: () => void
 }
@@ -56,7 +58,9 @@ const MqText: React.FC<MqTextProps> = ({
   highlight,
   color,
   small,
+  block,
   onClick,
+  sx,
 }) => {
   const theme = createTheme(useTheme())
 
@@ -87,6 +91,9 @@ const MqText: React.FC<MqTextProps> = ({
     bold: {
       fontWeight: 700,
     },
+    block: {
+      display: 'block',
+    },
     subdued: {
       color: THEME_EXTRA.typography.subdued,
     },
@@ -140,6 +147,7 @@ const MqText: React.FC<MqTextProps> = ({
     inline ? classesObject.inline : {},
     small ? classesObject.small : {},
     link ? classesObject.link : {},
+    block ? classesObject.block : {},
     paragraph ? classesObject.paragraph : {},
     subheading ? classesObject.subheading : {},
     overflowHidden ? classesObject.overflowHidden : {}
@@ -154,7 +162,10 @@ const MqText: React.FC<MqTextProps> = ({
       <Typography
         onClick={onClick}
         variant='h4'
-        sx={Object.assign(classesObject.root, classesObject.heading, conditionalClasses)}
+        sx={{
+          ...Object.assign(classesObject.root, classesObject.heading, conditionalClasses),
+          ...sx,
+        }}
         style={style}
       >
         {children}
@@ -170,7 +181,10 @@ const MqText: React.FC<MqTextProps> = ({
       >
         <Box
           component='span'
-          sx={Object.assign(classesObject.root, classesObject.link, conditionalClasses)}
+          sx={{
+            ...Object.assign(classesObject.root, classesObject.link, conditionalClasses),
+            ...sx,
+          }}
         >
           {children}
         </Box>
@@ -183,7 +197,10 @@ const MqText: React.FC<MqTextProps> = ({
         href={href}
         target={'_blank'}
         rel='noopener noreferrer'
-        sx={Object.assign(classesObject.root, classesObject.link, conditionalClasses)}
+        sx={{
+          ...Object.assign(classesObject.root, classesObject.link, conditionalClasses),
+          ...sx,
+        }}
       >
         {children}
       </Link>
@@ -192,7 +209,7 @@ const MqText: React.FC<MqTextProps> = ({
     return (
       <Box
         onClick={onClick}
-        sx={Object.assign(classesObject.root, conditionalClasses)}
+        sx={{ ...Object.assign(classesObject.root, conditionalClasses), ...sx }}
         style={style}
       >
         {children}

diff --git a/web/src/components/core/tooltip/MQTooltip.tsx b/web/src/components/core/tooltip/MQTooltip.tsx
@@ -2,15 +2,27 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { createTheme } from '@mui/material/styles'
-import { grey } from '@mui/material/colors'
+import { darken } from '@mui/material'
 import { useTheme } from '@emotion/react'
 import React, { ReactElement } from 'react'
 import Tooltip from '@mui/material/Tooltip'
 
 interface MqToolTipProps {
   title: string | ReactElement
   children: ReactElement
-  placement?: 'left' | 'right' | 'top'
+  placement?:
+    | 'left'
+    | 'right'
+    | 'top'
+    | 'right-end'
+    | 'left-end'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-end'
+    | 'top-start'
+    | 'bottom-start'
+    | 'left-start'
+    | 'right-start'
 }
 
 const MQTooltip: React.FC<MqToolTipProps> = ({ title, children, placement }) => {
@@ -22,9 +34,8 @@ const MQTooltip: React.FC<MqToolTipProps> = ({ title, children, placement }) =>
       componentsProps={{
         tooltip: {
           sx: {
-            backgroundColor: `${theme.palette.common.white}`,
-            color: grey['900'],
-            border: `1px solid ${theme.palette.common.white}`,
+            backgroundColor: `${darken(theme.palette.background.paper, 0.1)}`,
+            color: theme.palette.common.white,
             maxWidth: '600px',
             fontSize: 14,
           },

diff --git a/web/src/routes/column-level/ColumnLevelDrawer.tsx b/web/src/routes/column-level/ColumnLevelDrawer.tsx
@@ -1,6 +1,7 @@
 import * as Redux from 'redux'
 import { Box } from '@mui/system'
 import {
+  Chip,
   CircularProgress,
   Divider,
   Table,
@@ -102,10 +103,18 @@ const ColumnLevelDrawer = ({
                     return (
                       <React.Fragment key={field.name}>
                         <TableRow>
-                          <TableCell align='left'>{field.name}</TableCell>
-                          <TableCell align='left'>{field.type}</TableCell>
                           <TableCell align='left'>
-                            {field.description || 'no description'}
+                            <MqText font={'mono'}>{field.name}</MqText>
+                          </TableCell>
+                          <TableCell align='left'>
+                            <Chip
+                              size={'small'}
+                              label={<MqText font={'mono'}>{field.type}</MqText>}
+                              variant={'outlined'}
+                            />
+                          </TableCell>
+                          <TableCell align='left'>
+                            <MqText subdued>{field.description || 'no description'}</MqText>
                           </TableCell>
                         </TableRow>
                       </React.Fragment>

diff --git a/web/src/routes/column-level/ZoomControls.tsx b/web/src/routes/column-level/ZoomControls.tsx
@@ -1,8 +1,8 @@
 import { CenterFocusStrong, CropFree, ZoomIn, ZoomOut } from '@mui/icons-material'
-import { Tooltip } from '@mui/material'
 import { theme } from '../../helpers/theme'
 import Box from '@mui/material/Box'
 import IconButton from '@mui/material/IconButton'
+import MQTooltip from '../../components/core/tooltip/MQTooltip'
 import React from 'react'
 
 interface ZoomControlsProps {
@@ -28,27 +28,27 @@ export const ZoomControls = ({
       zIndex={1}
       borderColor={theme.palette.grey[500]}
     >
-      <Tooltip title={'Zoom in'} placement={'left'}>
+      <MQTooltip title={'Zoom in'} placement={'left'}>
         <IconButton size='small' onClick={() => handleScaleZoom('in')}>
           <ZoomIn />
         </IconButton>
-      </Tooltip>
-      <Tooltip title={'Zoom out'} placement={'left'}>
+      </MQTooltip>
+      <MQTooltip title={'Zoom out'} placement={'left'}>
         <IconButton size='small' onClick={() => handleScaleZoom('out')}>
           <ZoomOut />
         </IconButton>
-      </Tooltip>
-      <Tooltip title={'Reset zoom'} placement={'left'}>
+      </MQTooltip>
+      <MQTooltip title={'Reset zoom'} placement={'left'}>
         <IconButton size={'small'} onClick={handleResetZoom}>
           <CropFree />
         </IconButton>
-      </Tooltip>
+      </MQTooltip>
       {handleCenterOnNode && (
-        <Tooltip title={'Center on selected node'} placement={'left'}>
+        <MQTooltip title={'Center on selected node'} placement={'left'}>
           <IconButton size={'small'} onClick={handleCenterOnNode}>
             <CenterFocusStrong />
           </IconButton>
-        </Tooltip>
+        </MQTooltip>
       )}
     </Box>
   )

diff --git a/web/src/routes/table-level/TableLineageDatasetNode.tsx b/web/src/routes/table-level/TableLineageDatasetNode.tsx
@@ -14,6 +14,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import Box from '@mui/system/Box'
 import IconButton from '@mui/material/IconButton'
 import MQTooltip from '../../components/core/tooltip/MQTooltip'
+import MqText from '../../components/core/text/MqText'
 import React from 'react'
 
 interface StateProps {
@@ -46,17 +47,36 @@ const TableLineageDatasetNode = ({ node }: TableLineageDatasetNodeProps & StateP
 
   const addToToolTip = (dataset: LineageDataset) => {
     return (
-      <>
-        <b>{'Namespace: '}</b>
-        {dataset.namespace}
-        <br></br>
-        <b>{'Name: '}</b>
-        {dataset.name}
-        <br></br>
-        <b>{'Description: '}</b>
-        {dataset.description === null ? 'No Description' : dataset.description}
-        <br></br>
-      </>
+      <foreignObject>
+        <Box>
+          <Box display={'flex'} justifyContent={'space-between'}>
+            <MqText block bold sx={{ mr: 6 }}>
+              Namespace:
+            </MqText>
+            <MqText block font={'mono'}>
+              {truncateText(dataset.namespace, 25)}
+            </MqText>
+          </Box>
+          <Box display={'flex'} justifyContent={'space-between'}>
+            <MqText block bold sx={{ mr: 6 }}>
+              Name:
+            </MqText>
+            <MqText block font={'mono'}>
+              {truncateText(dataset.name, 25)}
+            </MqText>
+          </Box>
+          {dataset.description && (
+            <Box display={'flex'} justifyContent={'space-between'}>
+              <MqText block bold sx={{ mr: 6 }}>
+                Description:
+              </MqText>
+              <MqText block font={'mono'}>
+                {dataset.description}
+              </MqText>
+            </Box>
+          )}
+        </Box>
+      </foreignObject>
     )
   }
 
@@ -130,7 +150,7 @@ const TableLineageDatasetNode = ({ node }: TableLineageDatasetNodeProps & StateP
           </IconButton>
         </MQTooltip>
       </foreignObject>
-      <MQTooltip title={addToToolTip(node.data.dataset)}>
+      <MQTooltip placement={'right-start'} title={addToToolTip(node.data.dataset)}>
         <g>
           <text
             fontSize='8'

diff --git a/web/src/routes/table-level/TableLineageJobNode.tsx b/web/src/routes/table-level/TableLineageJobNode.tsx
@@ -11,6 +11,7 @@ import { truncateText } from '../../helpers/text'
 import { useNavigate, useParams } from 'react-router-dom'
 import Box from '@mui/system/Box'
 import MQTooltip from '../../components/core/tooltip/MQTooltip'
+import MqText from '../../components/core/text/MqText'
 import React from 'react'
 
 interface StateProps {
@@ -37,17 +38,36 @@ const TableLineageJobNode = ({ node }: TableLineageJobNodeProps & StateProps) =>
 
   const addToToolTip = (job: LineageJob) => {
     return (
-      <>
-        <b>{'Namespace: '}</b>
-        {job.namespace}
-        <br></br>
-        <b>{'Name: '}</b>
-        {job.name}
-        <br></br>
-        <b>{'Description: '}</b>
-        {job.description === null ? 'No Description' : job.description}
-        <br></br>
-      </>
+      <foreignObject>
+        <Box>
+          <Box display={'flex'} justifyContent={'space-between'}>
+            <MqText block bold sx={{ mr: 6 }}>
+              Namespace:
+            </MqText>
+            <MqText block font={'mono'}>
+              {truncateText(job.namespace, 25)}
+            </MqText>
+          </Box>
+          <Box display={'flex'} justifyContent={'space-between'}>
+            <MqText block bold sx={{ mr: 6 }}>
+              Name:
+            </MqText>
+            <MqText block font={'mono'}>
+              {truncateText(job.name, 25)}
+            </MqText>
+          </Box>
+          {job.description && (
+            <Box display={'flex'} justifyContent={'space-between'}>
+              <MqText block bold sx={{ mr: 6 }}>
+                Description:
+              </MqText>
+              <MqText block font={'mono'}>
+                {job.description}
+              </MqText>
+            </Box>
+          )}
+        </Box>
+      </foreignObject>
     )
   }
 
@@ -87,7 +107,7 @@ const TableLineageJobNode = ({ node }: TableLineageJobNodeProps & StateProps) =>
         color={theme.palette.common.white}
         onClick={handleClick}
       />
-      <MQTooltip title={addToToolTip(node.data.job)}>
+      <MQTooltip title={addToToolTip(node.data.job)} placement={'right-start'}>
         <g>
           <text
             fontSize='8'