Column Lineage Linking and sticky tab titles

web/src/components/datasets/DatasetDetailPage.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mui/material'
 import { CalendarIcon } from '@mui/x-date-pickers'
 import { CircularProgress } from '@mui/material'
-import { DatasetVersion } from '../../types/api'
+import { Dataset, DatasetVersion } from '../../types/api'
 import { IState } from '../../store/reducers'
 import { LineageDataset } from '../../types/lineage'
 import { MqInfo } from '../core/info/MqInfo'
@@ -26,6 +26,7 @@ import { datasetFacetsStatus } from '../../helpers/nodes'
 import {
   deleteDataset,
   dialogToggle,
+  fetchDataset,
   fetchDatasetVersions,
   resetDataset,
   resetDatasetVersions,
@@ -48,6 +49,7 @@ import StorageIcon from '@mui/icons-material/Storage'
 
 interface StateProps {
   lineageDataset: LineageDataset
+  dataset: Dataset
   versions: DatasetVersion[]
   versionsLoading: boolean
   datasets: IState['datasets']
@@ -57,6 +59,7 @@ interface StateProps {
 
 interface DispatchProps {
   fetchDatasetVersions: typeof fetchDatasetVersions
+  fetchDataset: typeof fetchDataset
   resetDatasetVersions: typeof resetDatasetVersions
   resetDataset: typeof resetDataset
   deleteDataset: typeof deleteDataset
@@ -76,7 +79,9 @@ function a11yProps(index: number) {
 const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
   const {
     datasets,
+    dataset,
     display,
+    fetchDataset,
     fetchDatasetVersions,
     resetDataset,
     resetDatasetVersions,
@@ -105,6 +110,7 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
 
   useEffect(() => {
     fetchDatasetVersions(lineageDataset.namespace, lineageDataset.name)
+    fetchDataset(lineageDataset.namespace, lineageDataset.name)
   }, [lineageDataset.name, showTags])
 
   // if the dataset is deleted then redirect to datasets end point
@@ -135,19 +141,27 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
   const facetsStatus = datasetFacetsStatus(firstVersion.facets)
 
   return (
-    <Box
-      my={2}
-      sx={{
-        padding: `0 ${theme.spacing(2)}`,
-      }}
-    >
-      <Box>
-        <Box display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
-          <DatasetTags
-            datasetTags={tags}
-            datasetName={lineageDataset.name}
-            namespace={lineageDataset.namespace}
-          />
+    <Box px={2}>
+      <Box
+        position={'sticky'}
+        top={'98px'}
+        bgcolor={theme.palette.background.default}
+        pt={2}
+        zIndex={theme.zIndex.appBar}
+        sx={{ borderBottom: 1, borderColor: 'divider', width: '100%' }}
+        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'}>
+            <MqText heading font={'mono'}>
+              {name}
+            </MqText>
+          </Box>
           <Box display={'flex'} alignItems={'center'}>
             <Box mr={1}>
               <Button
@@ -182,74 +196,41 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
             </IconButton>
           </Box>
         </Box>
-        <Box display={'flex'} alignItems={'center'} justifyContent={'space-between'} my={2}>
-          {facetsStatus && (
-            <Box mr={1}>
-              <MqStatus label={'Quality'} color={facetsStatus} />
-            </Box>
-          )}
-          <Box display={'flex'} alignItems={'center'}>
-            <MqText heading font={'mono'}>
-              {name}
-            </MqText>
-            <Box ml={1}>
-              <MqText
-                small
-                link
-                linkTo={`/datasets/column-level/${encodeURIComponent(
-                  encodeURIComponent(firstVersion.id.namespace)
-                )}/${encodeURIComponent(firstVersion.id.name)}`}
-              >
-                COLUMN LEVEL
-              </MqText>
-            </Box>
-          </Box>
-          {tabIndex === 0 && (
-            <Box ml={1} display={'flex'} alignItems={'center'}>
-              <FormControlLabel
-                control={
-                  <Switch
-                    size={'small'}
-                    checked={showTags}
-                    onChange={() => setShowTags(!showTags)}
-                    inputProps={{ 'aria-label': 'toggle show tags' }}
-                    disabled={versionsLoading}
-                  />
-                }
-                label={i18next.t('datasets.show_field_tags')}
-              />
-            </Box>
-          )}
-        </Box>
         <Box>
           <MqText subdued>{description}</MqText>
         </Box>
       </Box>
-      <Divider sx={{ my: 1 }} />
       <Grid container spacing={2}>
         <Grid item xs={4}>
           <MqInfo
             icon={<CalendarIcon color={'disabled'} />}
-            label={'Updated at'}
+            label={'Updated at'.toUpperCase()}
             value={formatUpdatedAt(firstVersion.createdAt)}
           />
         </Grid>
         <Grid item xs={4}>
           <MqInfo
             icon={<StorageIcon color={'disabled'} />}
-            label={'Dataset Type'}
-            value={firstVersion.type}
+            label={'Dataset Type'.toUpperCase()}
+            value={<MqText font={'mono'}>{firstVersion.type}</MqText>}
           />
         </Grid>
         <Grid item xs={4}>
           <MqInfo
             icon={<ListIcon color={'disabled'} />}
-            label={'Fields'}
+            label={'Fields'.toUpperCase()}
             value={`${firstVersion.fields.length} columns`}
           />
         </Grid>
       </Grid>
-      <Divider sx={{ mt: 1 }} />
+      <Divider sx={{ my: 2 }} />
+      <Box display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
+        <DatasetTags
+          datasetTags={tags}
+          datasetName={lineageDataset.name}
+          namespace={lineageDataset.namespace}
+        />
+      </Box>
       <Box display={'flex'} justifyContent={'space-between'} mb={2}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider', width: '100%' }}>
           <Tabs
@@ -262,22 +243,42 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
             <Tab label={i18next.t('datasets.history_tab')} {...a11yProps(2)} disableRipple={true} />
           </Tabs>
         </Box>
+        {tabIndex === 0 && (
+          <Box display={'flex'} alignItems={'center'}>
+            <FormControlLabel
+              sx={{ textWrap: 'nowrap' }}
+              control={
+                <Switch
+                  size={'small'}
+                  checked={showTags}
+                  onChange={() => setShowTags(!showTags)}
+                  inputProps={{ 'aria-label': 'toggle show tags' }}
+                  disabled={versionsLoading}
+                />
+              }
+              label={i18next.t('datasets.show_field_tags')}
+            />
+          </Box>
+        )}
       </Box>
       {tabIndex === 0 && (
         <DatasetInfo
+          dataset={dataset}
           datasetFields={firstVersion.fields}
           facets={firstVersion.facets}
           run={firstVersion.createdByRun}
           showTags={showTags}
+          isCurrentVersion
         />
       )}
-      {tabIndex === 1 && <DatasetVersions versions={props.versions} />}
+      {tabIndex === 1 && <DatasetVersions dataset={dataset} versions={props.versions} />}
     </Box>
   )
 }
 
 const mapStateToProps = (state: IState) => ({
   datasets: state.datasets,
+  dataset: state.dataset.result,
   display: state.display,
   versions: state.datasetVersions.result.versions,
   versionsLoading: state.datasetVersions.isLoading,
@@ -288,6 +289,7 @@ const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
   bindActionCreators(
     {
       fetchDatasetVersions: fetchDatasetVersions,
+      fetchDataset: fetchDataset,
       resetDatasetVersions: resetDatasetVersions,
       resetDataset: resetDataset,
       deleteDataset: deleteDataset,

web/src/components/datasets/DatasetInfo.tsx

@@ -2,15 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 import * as Redux from 'redux'
 import { Box, Chip, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
-import { Field, Run } from '../../types/api'
+import { Dataset, Field, Run } from '../../types/api'
 import { IState } from '../../store/reducers'
+import { Link } from 'react-router-dom'
 import { connect, useSelector } from 'react-redux'
+import { encodeQueryString } from '../../routes/column-level/ColumnLineageColumnNode'
 import { fetchJobFacets, resetFacets } from '../../store/actionCreators'
 import DatasetTags from './DatasetTags'
+import IconButton from '@mui/material/IconButton'
+import MQTooltip from '../core/tooltip/MQTooltip'
 import MqEmpty from '../core/empty/MqEmpty'
 import MqJsonView from '../core/json-view/MqJsonView'
 import MqText from '../core/text/MqText'
 import React, { FunctionComponent, useEffect } from 'react'
+import SplitscreenIcon from '@mui/icons-material/Splitscreen'
 
 export interface DispatchProps {
   fetchJobFacets: typeof fetchJobFacets
@@ -23,10 +28,8 @@ interface JobFacets {
 
 export interface JobFacetsProps {
   jobFacets: JobFacets
-}
-
-export interface SqlFacet {
-  query: string
+  isCurrentVersion?: boolean
+  dataset: Dataset
 }
 
 type DatasetInfoProps = {
@@ -38,7 +41,7 @@ type DatasetInfoProps = {
   DispatchProps
 
 const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
-  const { datasetFields, facets, run, fetchJobFacets, resetFacets, showTags } = props
+  const { datasetFields, facets, run, dataset, fetchJobFacets, resetFacets, showTags } = props
   const i18next = require('i18next')
   const dsNamespace = useSelector(
     (state: IState) => state.datasetVersions.result.versions[0].namespace
@@ -88,6 +91,7 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
                     </MqText>
                   </TableCell>
                 )}
+                {!showTags && <TableCell align='left' />}
                 {showTags && (
                   <TableCell align='left'>
                     <MqText subheading inline>
@@ -99,17 +103,52 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
             </TableHead>
             <TableBody>
               {datasetFields.map((field) => {
+                const hasColumnLineage = dataset?.columnLineage?.find((f) => f.name === field.name)
                 return (
                   <React.Fragment key={field.name}>
                     <TableRow>
-                      <TableCell align='left'>{field.name}</TableCell>
+                      <TableCell align='left'>
+                        <MqText font={'mono'}>{field.name}</MqText>
+                      </TableCell>
                       {!showTags && (
                         <TableCell align='left'>
-                          <Chip size={'small'} label={field.type} variant={'outlined'} />
+                          <Chip
+                            size={'small'}
+                            label={<MqText font={'mono'}>{field.type}</MqText>}
+                            variant={'outlined'}
+                          />
                         </TableCell>
                       )}
                       {!showTags && (
-                        <TableCell align='left'>{field.description || 'no description'}</TableCell>
+                        <TableCell align='left'>
+                          <MqText subdued>{field.description || 'no description'}</MqText>
+                        </TableCell>
+                      )}
+                      {!showTags && (
+                        <TableCell align='left'>
+                          {dataset && (
+                            <MQTooltip
+                              title={
+                                !dataset.columnLineage
+                                  ? 'No Column Lineage, check facet'
+                                  : i18next.t('dataset_info_columns.column_lineage')
+                              }
+                            >
+                              <IconButton
+                                disabled={!hasColumnLineage}
+                                size={'small'}
+                                component={Link}
+                                to={`/datasets/column-level/${dataset.namespace}/${
+                                  dataset.name
+                                }?column=${encodeURIComponent(
+                                  encodeQueryString(dataset.namespace, dataset.name, field.name)
+                                )}&columnName=${field.name}`}
+                              >
+                                <SplitscreenIcon />
+                              </IconButton>
+                            </MQTooltip>
+                          )}
+                        </TableCell>
                       )}
                       {showTags && (
                         <TableCell align='left'>

web/src/components/datasets/DatasetTags.tsx

@@ -170,7 +170,7 @@ const DatasetTags: React.FC<IProps> = (props) => {
         message={'Tag updated.'}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       />
-      <Box display={'flex'} alignItems='center' justifyContent='center'>
+      <Box display={'flex'} alignItems='center' justifyContent='center' width={'100%'}>
         {!datasetField && (
           <MQTooltip title='Edit a Tag' key='edit-tag'>
             <Button
@@ -189,7 +189,7 @@ const DatasetTags: React.FC<IProps> = (props) => {
           multiple
           disableCloseOnSelect
           id='dataset-tags'
-          sx={{ width: 516, flex: 1 }}
+          sx={{ flex: 1 }}
           limitTags={!datasetField ? 5 : 4}
           autoHighlight
           disableClearable

web/src/components/datasets/DatasetVersions.tsx

@@ -3,7 +3,7 @@
 
 import { ArrowBackIosRounded } from '@mui/icons-material'
 import { Box, Chip, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
-import { DatasetVersion } from '../../types/api'
+import { Dataset, DatasetVersion } from '../../types/api'
 import { alpha, createTheme } from '@mui/material/styles'
 import { formatUpdatedAt } from '../../helpers'
 import { useTheme } from '@emotion/react'
@@ -15,10 +15,11 @@ import React, { FunctionComponent, SetStateAction } from 'react'
 
 interface DatasetVersionsProps {
   versions: DatasetVersion[]
+  dataset: Dataset
 }
 
 const DatasetVersions: FunctionComponent<DatasetVersionsProps> = (props) => {
-  const { versions } = props
+  const { versions, dataset } = props
 
   const [infoView, setInfoView] = React.useState<DatasetVersion | null>(null)
   const handleClick = (newValue: SetStateAction<DatasetVersion | null>) => {
@@ -40,6 +41,7 @@ const DatasetVersions: FunctionComponent<DatasetVersionsProps> = (props) => {
           </IconButton>
         </Box>
         <DatasetInfo
+          dataset={dataset}
           datasetFields={infoView.fields}
           facets={infoView.facets}
           run={infoView.createdByRun}