From df3a7f14e56cac6cef4c2eeacb008badcbe74985 Mon Sep 17 00:00:00 2001
From: Peter Hicks <phixMe@users.noreply.github.com>
Date: Tue, 7 May 2024 15:27:41 -0700
Subject: [PATCH] Web: Data Quality  (#2810)

* Quality and node display

* Fixing display on column lineage title.

* Fixing bad status icon and adding divider to tooltip.

* Fixing minor theme details.

* Minor code review updates.

* UX tweaks

* Adding updated at

---------

Co-authored-by: phix <peter.hicks@astronomer.io>
---
 web/src/components/core/copy/MqCopy.tsx       |  7 +-
 .../core/date-picker/MqDatePicker.tsx         |  7 ++
 web/src/components/core/tooltip/MQTooltip.tsx |  6 +-
 web/src/components/datasets/Assertions.tsx    | 65 ++++++++++++++++
 .../components/datasets/DatasetDetailPage.tsx | 65 +++++++++++++---
 web/src/components/jobs/Runs.tsx              |  6 +-
 .../namespace-select/NamespaceSelect.tsx      |  9 +++
 web/src/helpers/nodes.ts                      |  8 +-
 web/src/i18n/config.ts                        |  2 +-
 .../routes/column-level/ColumnLevelDrawer.tsx | 54 ++++++++++---
 web/src/routes/datasets/Datasets.tsx          | 33 +++++---
 .../table-level/TableLineageDatasetNode.tsx   | 77 ++++++++++++++++---
 .../table-level/TableLineageJobNode.tsx       | 33 +++++++-
 web/src/types/api.ts                          | 12 +--
 14 files changed, 329 insertions(+), 55 deletions(-)
 create mode 100644 web/src/components/datasets/Assertions.tsx

diff --git a/web/src/components/core/copy/MqCopy.tsx b/web/src/components/core/copy/MqCopy.tsx
index 829aaaab14..ce62eecf31 100644
--- a/web/src/components/core/copy/MqCopy.tsx
+++ b/web/src/components/core/copy/MqCopy.tsx
@@ -1,9 +1,10 @@
 // Copyright 2018-2023 contributors to the Marquez project
 // SPDX-License-Identifier: Apache-2.0
 
-import { Snackbar, Tooltip } from '@mui/material'
+import { Snackbar } from '@mui/material'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import IconButton from '@mui/material/IconButton'
+import MQTooltip from '../tooltip/MQTooltip'
 import React from 'react'
 
 interface MqCopyProps {
@@ -21,7 +22,7 @@ const MqEmpty: React.FC<MqCopyProps> = ({ string }) => {
   }
   return (
     <>
-      <Tooltip title='Copy'>
+      <MQTooltip title='Copy'>
         <IconButton
           onClick={(event) => {
             event.stopPropagation()
@@ -34,7 +35,7 @@ const MqEmpty: React.FC<MqCopyProps> = ({ string }) => {
         >
           <ContentCopyIcon fontSize={'small'} />
         </IconButton>
-      </Tooltip>
+      </MQTooltip>
       <Snackbar
         open={open}
         autoHideDuration={2000}
diff --git a/web/src/components/core/date-picker/MqDatePicker.tsx b/web/src/components/core/date-picker/MqDatePicker.tsx
index 0173d5d985..24db62efc3 100644
--- a/web/src/components/core/date-picker/MqDatePicker.tsx
+++ b/web/src/components/core/date-picker/MqDatePicker.tsx
@@ -27,6 +27,13 @@ const MqDatePicker: React.FC<DatePickerProps> = ({
   return (
     <DateTimePicker
       label={label}
+      slotProps={{
+        desktopPaper: {
+          sx: {
+            backgroundImage: 'none',
+          },
+        },
+      }}
       sx={{
         label: {
           left: theme.spacing(2),
diff --git a/web/src/components/core/tooltip/MQTooltip.tsx b/web/src/components/core/tooltip/MQTooltip.tsx
index 903ce7a235..63f14f8508 100644
--- a/web/src/components/core/tooltip/MQTooltip.tsx
+++ b/web/src/components/core/tooltip/MQTooltip.tsx
@@ -10,6 +10,8 @@ import Tooltip from '@mui/material/Tooltip'
 interface MqToolTipProps {
   title: string | ReactElement
   children: ReactElement
+  onOpen?: (event: React.SyntheticEvent) => void
+  onClose?: (event: React.SyntheticEvent) => void
   placement?:
     | 'left'
     | 'right'
@@ -25,10 +27,12 @@ interface MqToolTipProps {
     | 'right-start'
 }
 
-const MQTooltip: React.FC<MqToolTipProps> = ({ title, children, placement }) => {
+const MQTooltip: React.FC<MqToolTipProps> = ({ title, onOpen, onClose, children, placement }) => {
   const theme = createTheme(useTheme())
   return (
     <Tooltip
+      onOpen={onOpen}
+      onClose={onClose}
       title={title}
       placement={placement || 'bottom'}
       componentsProps={{
diff --git a/web/src/components/datasets/Assertions.tsx b/web/src/components/datasets/Assertions.tsx
new file mode 100644
index 0000000000..22aacd7820
--- /dev/null
+++ b/web/src/components/datasets/Assertions.tsx
@@ -0,0 +1,65 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import { Assertion } from '../../types/api'
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
+import { theme } from '../../helpers/theme'
+import MqStatus from '../core/status/MqStatus'
+import MqText from '../core/text/MqText'
+import React from 'react'
+
+interface OwnProps {
+  assertions: Assertion[]
+  hasHeader?: boolean
+}
+
+const Assertions: React.FC<OwnProps> = ({ assertions, hasHeader }) => {
+  if (assertions.length === 0) {
+    return null
+  }
+  return (
+    <Table size={'small'}>
+      {hasHeader && (
+        <TableHead>
+          <TableRow>
+            <TableCell align={'left'}>
+              <MqText bold>COLUMN</MqText>
+            </TableCell>
+            <TableCell align={'left'}>
+              <MqText bold>ASSERTION</MqText>
+            </TableCell>
+            <TableCell align={'left'}>
+              <MqText bold>STATUS</MqText>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+      )}
+      <TableBody>
+        {assertions.map((assertion) => {
+          const sx = { borderBottom: 'none' }
+          return (
+            <TableRow key={`${assertion.column}-${assertion.assertion}`}>
+              <TableCell align={'left'} sx={sx}>
+                <MqText font={'mono'}>{assertion.column}</MqText>
+              </TableCell>
+              <TableCell align={'left'} sx={sx}>
+                <MqText subdued>{assertion.assertion}</MqText>
+              </TableCell>
+              <TableCell align={'left'} sx={sx}>
+                {
+                  <MqStatus
+                    label={assertion.success ? 'pass'.toUpperCase() : 'fail'.toUpperCase()}
+                    color={
+                      assertion.success ? theme.palette.primary.main : theme.palette.error.main
+                    }
+                  ></MqStatus>
+                }
+              </TableCell>
+            </TableRow>
+          )
+        })}
+      </TableBody>
+    </Table>
+  )
+}
+
+export default Assertions
diff --git a/web/src/components/datasets/DatasetDetailPage.tsx b/web/src/components/datasets/DatasetDetailPage.tsx
index 796f2d57fb..9962d6eeef 100644
--- a/web/src/components/datasets/DatasetDetailPage.tsx
+++ b/web/src/components/datasets/DatasetDetailPage.tsx
@@ -23,7 +23,7 @@ import { MqInfo } from '../core/info/MqInfo'
 import { alpha } from '@mui/material/styles'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { datasetFacetsStatus } from '../../helpers/nodes'
+import { datasetFacetsQualityAssertions, datasetFacetsStatus } from '../../helpers/nodes'
 import {
   deleteDataset,
   dialogToggle,
@@ -38,6 +38,7 @@ import { formatUpdatedAt } from '../../helpers'
 import { truncateText } from '../../helpers/text'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useTheme } from '@emotion/react'
+import Assertions from './Assertions'
 import CloseIcon from '@mui/icons-material/Close'
 import DatasetInfo from './DatasetInfo'
 import DatasetTags from './DatasetTags'
@@ -45,9 +46,11 @@ import DatasetVersions from './DatasetVersions'
 import Dialog from '../Dialog'
 import IconButton from '@mui/material/IconButton'
 import ListIcon from '@mui/icons-material/List'
+import MQTooltip from '../core/tooltip/MQTooltip'
 import MqStatus from '../core/status/MqStatus'
 import MqText from '../core/text/MqText'
 import React, { ChangeEvent, FunctionComponent, useEffect, useState } from 'react'
+import RuleIcon from '@mui/icons-material/Rule'
 import StorageIcon from '@mui/icons-material/Storage'
 
 interface StateProps {
@@ -143,6 +146,8 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
   const { name, tags, description } = firstVersion
   const facetsStatus = datasetFacetsStatus(firstVersion.facets)
 
+  const assertions = datasetFacetsQualityAssertions(firstVersion.facets)
+
   return (
     <Box px={2}>
       <Box
@@ -155,11 +160,6 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
         mb={2}
       >
         <Box display={'flex'} alignItems={'center'} justifyContent={'space-between'} pb={2}>
-          {facetsStatus && (
-            <Box mr={1}>
-              <MqStatus label={'Quality'} color={facetsStatus} />
-            </Box>
-          )}
           <Box display={'flex'} alignItems={'center'}>
             <Box>
               <Box display={'flex'} alignItems={'center'}>
@@ -224,27 +224,74 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
         </Box>
       </Box>
       <Grid container spacing={2}>
-        <Grid item xs={4}>
+        <Grid item xs={6}>
           <MqInfo
             icon={<CalendarIcon color={'disabled'} />}
             label={'Updated at'.toUpperCase()}
             value={formatUpdatedAt(firstVersion.createdAt)}
           />
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={6}>
           <MqInfo
             icon={<StorageIcon color={'disabled'} />}
             label={'Dataset Type'.toUpperCase()}
             value={<MqText font={'mono'}>{firstVersion.type}</MqText>}
           />
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={6}>
           <MqInfo
             icon={<ListIcon color={'disabled'} />}
             label={'Fields'.toUpperCase()}
             value={`${firstVersion.fields.length} columns`}
           />
         </Grid>
+        <Grid item xs={6}>
+          <MqInfo
+            icon={<RuleIcon color={'disabled'} />}
+            label={'Quality'.toUpperCase()}
+            value={
+              facetsStatus ? (
+                <Box display={'flex'}>
+                  <MQTooltip
+                    title={
+                      <Assertions
+                        assertions={assertions.filter((assertion) => assertion.success)}
+                      />
+                    }
+                  >
+                    <Box>
+                      <MqStatus
+                        label={`${
+                          assertions.filter((assertion) => assertion.success).length
+                        } Passing`.toUpperCase()}
+                        color={theme.palette.primary.main}
+                      />
+                    </Box>
+                  </MQTooltip>
+                  <Divider sx={{ mx: 1 }} orientation={'vertical'} />
+                  <MQTooltip
+                    title={
+                      <Assertions
+                        assertions={assertions.filter((assertion) => !assertion.success)}
+                      />
+                    }
+                  >
+                    <Box>
+                      <MqStatus
+                        label={`${
+                          assertions.filter((assertion) => !assertion.success).length
+                        } Failing`.toUpperCase()}
+                        color={theme.palette.error.main}
+                      />
+                    </Box>
+                  </MQTooltip>
+                </Box>
+              ) : (
+                <MqStatus label={'N/A'} color={theme.palette.secondary.main} />
+              )
+            }
+          />
+        </Grid>
       </Grid>
       <Divider sx={{ my: 2 }} />
       <Box display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
diff --git a/web/src/components/jobs/Runs.tsx b/web/src/components/jobs/Runs.tsx
index 401c04ebe1..f69ebe7b80 100644
--- a/web/src/components/jobs/Runs.tsx
+++ b/web/src/components/jobs/Runs.tsx
@@ -25,7 +25,6 @@ import MqStatus from '../core/status/MqStatus'
 import MqText from '../core/text/MqText'
 import React, { FunctionComponent, SetStateAction } from 'react'
 import RunInfo from './RunInfo'
-import RunStatus from './RunStatus'
 
 interface RunsProps {
   runs: Run[]
@@ -139,10 +138,7 @@ const Runs: FunctionComponent<RunsProps> = (props) => {
               >
                 <TableCell align='left'>{run.id}</TableCell>
                 <TableCell align='left'>
-                  <Box display={'flex'} alignItems={'center'}>
-                    <RunStatus run={run} />
-                    <MqText>{run.state}</MqText>
-                  </Box>
+                  <MqStatus color={runStateColor(run.state)} label={run.state} />
                 </TableCell>
                 <TableCell align='left'>{formatUpdatedAt(run.createdAt)}</TableCell>
                 <TableCell align='left'>{formatUpdatedAt(run.startedAt)}</TableCell>
diff --git a/web/src/components/namespace-select/NamespaceSelect.tsx b/web/src/components/namespace-select/NamespaceSelect.tsx
index 4494fa3361..8c73a6414a 100644
--- a/web/src/components/namespace-select/NamespaceSelect.tsx
+++ b/web/src/components/namespace-select/NamespaceSelect.tsx
@@ -59,6 +59,15 @@ const NamespaceSelect: React.FC<NamespaceSelectProps> = ({
           </MqText>
         </Box>
         <Select
+          inputProps={{
+            MenuProps: {
+              PaperProps: {
+                sx: {
+                  backgroundImage: 'none',
+                },
+              },
+            },
+          }}
           labelId='namespace-label'
           id='namespace-select'
           value={selectedNamespace}
diff --git a/web/src/helpers/nodes.ts b/web/src/helpers/nodes.ts
index 8bd43ef5e4..436899bf5a 100644
--- a/web/src/helpers/nodes.ts
+++ b/web/src/helpers/nodes.ts
@@ -107,6 +107,12 @@ export function jobRunsStatus(runs: Run[], limit = 14) {
     return theme.palette.primary.main as string
   }
 }
+export function datasetFacetsQualityAssertions(facets: DataQualityFacets) {
+  const assertions = facets?.dataQualityAssertions?.assertions
+  if (!assertions) {
+    return []
+  } else return assertions
+}
 
 export function datasetFacetsStatus(facets: DataQualityFacets, limit = 14) {
   const assertions = facets?.dataQualityAssertions?.assertions?.slice(-limit)
@@ -121,7 +127,7 @@ export function datasetFacetsStatus(facets: DataQualityFacets, limit = 14) {
   if (isAllFalse) {
     return theme.palette.error.main as string
   } else if (isSomeFalse) {
-    return theme.palette.info.main as string
+    return theme.palette.error.main as string
   } else {
     return theme.palette.primary.main as string
   }
diff --git a/web/src/i18n/config.ts b/web/src/i18n/config.ts
index 798fc113a4..cad3d10b29 100644
--- a/web/src/i18n/config.ts
+++ b/web/src/i18n/config.ts
@@ -103,7 +103,7 @@ i18next
             namespace_col: 'NAMESPACE',
             source_col: 'SOURCE',
             updated_col: 'UPDATED AT',
-            status_col: 'STATUS',
+            quality: 'QUALITY',
           },
           datasets_column_lineage: {
             empty_title: 'No column lineage',
diff --git a/web/src/routes/column-level/ColumnLevelDrawer.tsx b/web/src/routes/column-level/ColumnLevelDrawer.tsx
index 54f7c4f877..1e1bb8976d 100644
--- a/web/src/routes/column-level/ColumnLevelDrawer.tsx
+++ b/web/src/routes/column-level/ColumnLevelDrawer.tsx
@@ -3,7 +3,6 @@ import { Box } from '@mui/system'
 import {
   Chip,
   CircularProgress,
-  Divider,
   Table,
   TableBody,
   TableCell,
@@ -11,10 +10,13 @@ import {
   TableRow,
 } from '@mui/material'
 import { ColumnLineageGraph, Dataset } from '../../types/api'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IState } from '../../store/reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import { faDatabase } from '@fortawesome/free-solid-svg-icons'
 import { fetchDataset } from '../../store/actionCreators'
+import { theme } from '../../helpers/theme'
 import { useSearchParams } from 'react-router-dom'
 import CloseIcon from '@mui/icons-material/Close'
 import IconButton from '@mui/material/IconButton'
@@ -55,17 +57,47 @@ const ColumnLevelDrawer = ({
 
   return (
     <Box width={`${WIDTH}px`}>
-      <Box p={2} display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
-        <MqText heading>{searchParams.get('dataset')}</MqText>
-        <IconButton
-          onClick={() => {
-            setSearchParams({})
-          }}
-        >
-          <CloseIcon />
-        </IconButton>
+      <Box
+        position={'sticky'}
+        top={'98px'}
+        bgcolor={theme.palette.background.default}
+        pt={2}
+        zIndex={theme.zIndex.appBar}
+        sx={{ borderBottom: 1, borderColor: 'divider', width: '100%' }}
+      >
+        <Box px={2} pb={2} display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
+          <Box display={'flex'} alignItems={'center'}>
+            <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>
+            </Box>
+            <MqText heading>{searchParams.get('dataset')}</MqText>
+          </Box>
+          <IconButton
+            onClick={() => {
+              setSearchParams({})
+            }}
+          >
+            <CloseIcon fontSize={'small'} />
+          </IconButton>
+        </Box>
       </Box>
-      <Divider />
       {!dataset || isDatasetLoading ? (
         <Box mt={2} display={'flex'} justifyContent={'center'}>
           <CircularProgress color='primary' />
diff --git a/web/src/routes/datasets/Datasets.tsx b/web/src/routes/datasets/Datasets.tsx
index 1634f93fca..8a202bc6a1 100644
--- a/web/src/routes/datasets/Datasets.tsx
+++ b/web/src/routes/datasets/Datasets.tsx
@@ -21,13 +21,19 @@ import { MqScreenLoad } from '../../components/core/screen-load/MqScreenLoad'
 import { Nullable } from '../../types/util/Nullable'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { datasetFacetsStatus, encodeNode } from '../../helpers/nodes'
+import {
+  datasetFacetsQualityAssertions,
+  datasetFacetsStatus,
+  encodeNode,
+} from '../../helpers/nodes'
 import { fetchDatasets, resetDatasets } from '../../store/actionCreators'
 import { formatUpdatedAt } from '../../helpers'
 import { useTheme } from '@emotion/react'
+import Assertions from '../../components/datasets/Assertions'
 import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
 import IconButton from '@mui/material/IconButton'
+import MQTooltip from '../../components/core/tooltip/MQTooltip'
 import MqEmpty from '../../components/core/empty/MqEmpty'
 import MqStatus from '../../components/core/status/MqStatus'
 import MqText from '../../components/core/text/MqText'
@@ -162,8 +168,8 @@ const Datasets: React.FC<DatasetsProps> = ({
                     <TableCell key={i18next.t('datasets_route.updated_col')} align='left'>
                       <MqText subheading>{i18next.t('datasets_route.updated_col')}</MqText>
                     </TableCell>
-                    <TableCell key={i18next.t('datasets_route.status_col')} align='left'>
-                      <MqText subheading>{i18next.t('datasets_route.status_col')}</MqText>
+                    <TableCell key={i18next.t('datasets_route.quality')} align='left'>
+                      <MqText subheading>{i18next.t('datasets_route.quality')}</MqText>
                     </TableCell>
                     <TableCell key={i18next.t('datasets.column_lineage_tab')} align='left'>
                       <MqText inline subheading>
@@ -176,6 +182,7 @@ const Datasets: React.FC<DatasetsProps> = ({
                   {datasets
                     .filter((dataset) => !dataset.deleted)
                     .map((dataset) => {
+                      const assertions = datasetFacetsQualityAssertions(dataset.facets)
                       return (
                         <TableRow key={dataset.name}>
                           <TableCell align='left'>
@@ -202,13 +209,21 @@ const Datasets: React.FC<DatasetsProps> = ({
                           <TableCell align='left'>
                             {datasetFacetsStatus(dataset.facets) ? (
                               <>
-                                <MqStatus
-                                  label={'Quality'}
-                                  color={datasetFacetsStatus(dataset.facets)}
-                                />
+                                <MQTooltip title={<Assertions assertions={assertions} />}>
+                                  <Box>
+                                    <MqStatus
+                                      label={
+                                        assertions.find((a) => !a.success)
+                                          ? 'UNHEALTHILY'
+                                          : 'HEALTHY'
+                                      }
+                                      color={datasetFacetsStatus(dataset.facets)}
+                                    />
+                                  </Box>
+                                </MQTooltip>
                               </>
                             ) : (
-                              <MqText>N/A</MqText>
+                              <MqStatus label={'N/A'} color={theme.palette.secondary.main} />
                             )}
                           </TableCell>
                           <TableCell>
@@ -222,7 +237,7 @@ const Datasets: React.FC<DatasetsProps> = ({
                                 VIEW
                               </MqText>
                             ) : (
-                              <MqText>N/A</MqText>
+                              <MqText subdued>N/A</MqText>
                             )}
                           </TableCell>
                         </TableRow>
diff --git a/web/src/routes/table-level/TableLineageDatasetNode.tsx b/web/src/routes/table-level/TableLineageDatasetNode.tsx
index 9b0eeb6d88..7342225b76 100644
--- a/web/src/routes/table-level/TableLineageDatasetNode.tsx
+++ b/web/src/routes/table-level/TableLineageDatasetNode.tsx
@@ -1,24 +1,37 @@
 import { ChevronLeft } from '@mui/icons-material'
+import { Dataset, LineageGraph } from '../../types/api'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IState } from '../../store/reducers'
 import { LineageDataset } from '../../types/lineage'
-import { LineageGraph } from '../../types/api'
 import { PositionedNode } from '../../../libs/graph'
 import { THEME_EXTRA, theme } from '../../helpers/theme'
 import { TableLineageDatasetNodeData } from './nodes'
 import { connect } from 'react-redux'
 
+import * as Redux from 'redux'
+import { Divider } from '@mui/material'
+import { bindActionCreators } from 'redux'
+import { datasetFacetsQualityAssertions, datasetFacetsStatus } from '../../helpers/nodes'
 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 { 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 MqStatus from '../../components/core/status/MqStatus'
 import MqText from '../../components/core/text/MqText'
 import React from 'react'
 
+interface DispatchProps {
+  fetchDataset: typeof fetchDataset
+  resetDataset: typeof resetDataset
+}
+
 interface StateProps {
   lineage: LineageGraph
+  dataset: Dataset
 }
 
 interface TableLineageDatasetNodeProps {
@@ -28,7 +41,12 @@ interface TableLineageDatasetNodeProps {
 const ICON_SIZE = 12
 const COMPACT_HEIGHT = 24
 
-const TableLineageDatasetNode = ({ node }: TableLineageDatasetNodeProps & StateProps) => {
+const TableLineageDatasetNode = ({
+  node,
+  dataset,
+  fetchDataset,
+  resetDataset,
+}: TableLineageDatasetNodeProps & StateProps & DispatchProps) => {
   const isCompact = node.height === COMPACT_HEIGHT
 
   const navigate = useNavigate()
@@ -45,7 +63,7 @@ const TableLineageDatasetNode = ({ node }: TableLineageDatasetNodeProps & StateP
     )
   }
 
-  const addToToolTip = (dataset: LineageDataset) => {
+  const addToToolTip = (lineageDataset: LineageDataset, dataset: Dataset) => {
     return (
       <foreignObject>
         <Box>
@@ -54,7 +72,7 @@ const TableLineageDatasetNode = ({ node }: TableLineageDatasetNodeProps & StateP
               Namespace:
             </MqText>
             <MqText block font={'mono'}>
-              {truncateText(dataset.namespace, 25)}
+              {truncateText(lineageDataset.namespace, 25)}
             </MqText>
           </Box>
           <Box display={'flex'} justifyContent={'space-between'}>
@@ -62,19 +80,45 @@ const TableLineageDatasetNode = ({ node }: TableLineageDatasetNodeProps & StateP
               Name:
             </MqText>
             <MqText block font={'mono'}>
-              {truncateText(dataset.name, 25)}
+              {truncateText(lineageDataset.name, 25)}
             </MqText>
           </Box>
-          {dataset.description && (
+          {lineageDataset.description && (
             <Box display={'flex'} justifyContent={'space-between'}>
               <MqText block bold sx={{ mr: 6 }}>
                 Description:
               </MqText>
               <MqText block font={'mono'}>
-                {dataset.description}
+                {lineageDataset.description}
               </MqText>
             </Box>
           )}
+          <Box display={'flex'} justifyContent={'space-between'}>
+            <MqText block bold sx={{ mr: 6 }}>
+              Updated at:
+            </MqText>
+            <MqText block font={'mono'}>
+              {formatUpdatedAt(lineageDataset.updatedAt)}
+            </MqText>
+          </Box>
+          {dataset && datasetFacetsStatus(dataset.facets) && (
+            <>
+              <Divider sx={{ my: 1 }} />
+              <Box display={'flex'} justifyContent={'space-between'}>
+                <MqText block bold sx={{ mr: 6 }}>
+                  Quality:
+                </MqText>
+                <MqStatus
+                  label={
+                    datasetFacetsQualityAssertions(dataset.facets).find((a) => !a.success)
+                      ? 'UNHEALTHILY'
+                      : 'HEALTHY'
+                  }
+                  color={datasetFacetsStatus(dataset.facets)}
+                />
+              </Box>
+            </>
+          )}
         </Box>
       </foreignObject>
     )
@@ -150,7 +194,12 @@ const TableLineageDatasetNode = ({ node }: TableLineageDatasetNodeProps & StateP
           </IconButton>
         </MQTooltip>
       </foreignObject>
-      <MQTooltip placement={'right-start'} title={addToToolTip(node.data.dataset)}>
+      <MQTooltip
+        onOpen={() => fetchDataset(node.data.dataset.namespace, node.data.dataset.name)}
+        onClose={() => resetDataset}
+        placement={'right-start'}
+        title={addToToolTip(node.data.dataset, dataset)}
+      >
         <g>
           <text
             fontSize='8'
@@ -193,6 +242,16 @@ TableLineageDatasetNode.getLayoutOptions = (node: TableLineageDatasetNodeProps['
 
 const mapStateToProps = (state: IState) => ({
   lineage: state.lineage.lineage,
+  dataset: state.dataset.result,
 })
 
-export default connect(mapStateToProps)(TableLineageDatasetNode)
+const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
+  bindActionCreators(
+    {
+      fetchDataset: fetchDataset,
+      resetDataset: resetDataset,
+    },
+    dispatch
+  )
+
+export default connect(mapStateToProps, mapDispatchToProps)(TableLineageDatasetNode)
diff --git a/web/src/routes/table-level/TableLineageJobNode.tsx b/web/src/routes/table-level/TableLineageJobNode.tsx
index ec0a96f7be..e3009f322d 100644
--- a/web/src/routes/table-level/TableLineageJobNode.tsx
+++ b/web/src/routes/table-level/TableLineageJobNode.tsx
@@ -1,3 +1,4 @@
+import { Divider } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IState } from '../../store/reducers'
 import { LineageGraph } from '../../types/api'
@@ -6,11 +7,13 @@ import { PositionedNode } from '../../../libs/graph'
 import { TableLineageJobNodeData } from './nodes'
 import { connect } from 'react-redux'
 import { faCog } from '@fortawesome/free-solid-svg-icons/faCog'
+import { formatUpdatedAt } from '../../helpers'
 import { theme } from '../../helpers/theme'
 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 MqStatus from '../../components/core/status/MqStatus'
 import MqText from '../../components/core/text/MqText'
 import React from 'react'
 
@@ -66,6 +69,28 @@ const TableLineageJobNode = ({ node }: TableLineageJobNodeProps & StateProps) =>
               </MqText>
             </Box>
           )}
+          <Box display={'flex'} justifyContent={'space-between'}>
+            <MqText block bold sx={{ mr: 6 }}>
+              Updated at:
+            </MqText>
+            <MqText block font={'mono'}>
+              {formatUpdatedAt(job.updatedAt)}
+            </MqText>
+          </Box>
+          <Divider sx={{ my: 1 }} />
+          <Box display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
+            <MqText block bold sx={{ mr: 6 }}>
+              Latest Run:
+            </MqText>
+            <MqStatus
+              label={job.latestRun?.state || 'N/A'}
+              color={
+                job.latestRun?.state === 'COMPLETED'
+                  ? theme.palette.primary.main
+                  : theme.palette.error.main
+              }
+            />
+          </Box>
         </Box>
       </foreignObject>
     )
@@ -94,7 +119,13 @@ const TableLineageJobNode = ({ node }: TableLineageJobNodeProps & StateProps) =>
         y={0}
         height={node.height}
         width={24}
-        sx={{ rx: 4, fill: theme.palette.primary.main }}
+        sx={{
+          rx: 4,
+          fill:
+            node.data.job.latestRun?.state === 'COMPLETED'
+              ? theme.palette.primary.main
+              : theme.palette.error.main,
+        }}
       />
       <FontAwesomeIcon
         aria-hidden={'true'}
diff --git a/web/src/types/api.ts b/web/src/types/api.ts
index 3744438887..ca7d56fdf2 100644
--- a/web/src/types/api.ts
+++ b/web/src/types/api.ts
@@ -106,14 +106,16 @@ export interface DatasetVersions {
 
 export interface DataQualityFacets {
   dataQualityAssertions?: {
-    assertions?: {
-      assertion: string
-      column: string
-      success: boolean
-    }[]
+    assertions?: Assertion[]
   }
 }
 
+export interface Assertion {
+  assertion: string
+  column: string
+  success: boolean
+}
+
 export interface DatasetVersion {
   id: DatasetVersionId
   type: DatasetType