Web: Tooltips and display updates (#2809)

phixMe · phix · web-flow · commit f1eabc44343c · 2024-05-06T15:14:32.000-07:00
* Updating tooltips and fixing rendering issue in column lineage table display.

* Icons for jobs and datasets on lineage panels.

---------

Co-authored-by: phix &lt;peter.hicks@astronomer.io&gt;
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/components/datasets/DatasetDetailPage.tsx b/web/src/components/datasets/DatasetDetailPage.tsx
@@ -16,6 +16,7 @@ import {
 import { CalendarIcon } from '@mui/x-date-pickers'
 import { CircularProgress } from '@mui/material'
 import { Dataset, DatasetVersion } from '../../types/api'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IState } from '../../store/reducers'
 import { LineageDataset } from '../../types/lineage'
 import { MqInfo } from '../core/info/MqInfo'
@@ -32,7 +33,9 @@ import {
   resetDatasetVersions,
   setTabIndex,
 } from '../../store/actionCreators'
+import { faDatabase } from '@fortawesome/free-solid-svg-icons'
 import { formatUpdatedAt } from '../../helpers'
+import { truncateText } from '../../helpers/text'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useTheme } from '@emotion/react'
 import CloseIcon from '@mui/icons-material/Close'
@@ -159,9 +162,29 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
           )}
           <Box display={'flex'} alignItems={'center'}>
             <Box>
-              <MqText heading font={'mono'}>
-                {name}
-              </MqText>
+              <Box display={'flex'} alignItems={'center'}>
+                <Box
+                  mr={2}
+                  borderRadius={theme.spacing(1)}
+                  p={1}
+                  width={32}
+                  height={32}
+                  display={'flex'}
+                  bgcolor={theme.palette.info.main}
+                >
+                  <FontAwesomeIcon
+                    aria-hidden={'true'}
+                    title={'Dataset'}
+                    icon={faDatabase}
+                    width={16}
+                    height={16}
+                    color={theme.palette.common.white}
+                  />
+                </Box>
+                <MqText font={'mono'} heading>
+                  {truncateText(name, 40)}
+                </MqText>
+              </Box>
               <MqText subdued>{description}</MqText>
             </Box>
           </Box>
diff --git a/web/src/components/jobs/JobDetailPage.tsx b/web/src/components/jobs/JobDetailPage.tsx
@@ -8,6 +8,7 @@ import * as Redux from 'redux'
 import { Box, Button, CircularProgress, Divider, Grid, Tab, Tabs } from '@mui/material'
 import { CalendarIcon } from '@mui/x-date-pickers'
 import { DirectionsRun, SportsScore, Start } from '@mui/icons-material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IState } from '../../store/reducers'
 import { LineageJob } from '../../types/lineage'
 import { MqInfo } from '../core/info/MqInfo'
@@ -23,9 +24,11 @@ import {
   resetRuns,
   setTabIndex,
 } from '../../store/actionCreators'
+import { faCog } from '@fortawesome/free-solid-svg-icons/faCog'
 import { formatUpdatedAt } from '../../helpers'
 import { jobRunsStatus } from '../../helpers/nodes'
 import { stopWatchDuration } from '../../helpers/time'
+import { truncateText } from '../../helpers/text'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useTheme } from '@emotion/react'
 import CloseIcon from '@mui/icons-material/Close'
@@ -118,9 +121,29 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
       >
         <Box display={'flex'} alignItems={'center'} justifyContent={'space-between'}>
           <Box>
-            <MqText font={'mono'} heading>
-              {job.name}
-            </MqText>
+            <Box display={'flex'} alignItems={'center'}>
+              <Box
+                mr={2}
+                borderRadius={theme.spacing(1)}
+                p={1}
+                width={32}
+                height={32}
+                display={'flex'}
+                bgcolor={theme.palette.primary.main}
+              >
+                <FontAwesomeIcon
+                  aria-hidden={'true'}
+                  title={'Job'}
+                  icon={faCog}
+                  width={16}
+                  height={16}
+                  color={theme.palette.common.white}
+                />
+              </Box>
+              <MqText font={'mono'} heading>
+                {truncateText(job.name, 40)}
+              </MqText>
+            </Box>
             {job.description && (
               <Box mt={1}>
                 <MqText subdued>{job.description}</MqText>
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
