Adding tag descriptions to tooltips (#2612)

* add tag descriptions to tooltips

Signed-off-by: sharpd <number6labs@gmail.com>

* remove tag import after linting

Signed-off-by: sharpd <number6labs@gmail.com>

* remove comments

Signed-off-by: sharpd <number6labs@gmail.com>

* ran linter over impacted files and changed code based on feedback

Signed-off-by: sharpd <number6labs@gmail.com>

* add [run] as dependency based on feedback

Signed-off-by: sharpd <number6labs@gmail.com>

---------

Signed-off-by: sharpd <number6labs@gmail.com>
Co-authored-by: sharpd <number6labs@gmail.com>

Author: davidsharp7

web/src/components/datasets/DatasetInfo.tsx

@@ -3,20 +3,21 @@
 
 import * as Redux from 'redux'
 import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
-import { Field, Run } from '../../types/api'
+import { Chip } from '@mui/material'
+import { Field, Run, Tag } from '../../types/api'
 import { IState } from '../../store/reducers'
-import { connect } from 'react-redux'
-import { fetchJobFacets, resetFacets } from '../../store/actionCreators'
+import { connect, useSelector } from 'react-redux'
+import { createTheme } from '@mui/material/styles'
+import { fetchJobFacets, fetchTags, resetFacets } from '../../store/actionCreators'
 import { stopWatchDuration } from '../../helpers/time'
+import { useTheme } from '@emotion/react'
+import MQTooltip from '../core/tooltip/MQTooltip'
 import MqCode from '../core/code/MqCode'
 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 RunStatus from '../jobs/RunStatus'
-import { Chip } from '@mui/material'
-import { createTheme } from '@mui/material/styles'
-import { useTheme } from '@emotion/react'
 
 export interface DispatchProps {
   fetchJobFacets: typeof fetchJobFacets
@@ -42,18 +43,26 @@ type DatasetInfoProps = {
 } & JobFacetsProps &
   DispatchProps
 
-const formatColumnTags = (tags: string[]) => {
+const formatColumnTags = (tags: string[], tag_desc: Tag[]) => {
   const theme = createTheme(useTheme())
   return (
     <>
-      {tags.map((tag, index) => (
-        <Chip
-          key={tag}
-          label={tag}
-          size="small"
-          style={{display: 'inline', marginRight: index < tags.length - 1 ? theme.spacing(1) : 0}}
-        />
-      ))}
+      {tags.map((tag, index) => {
+        const tagDescription = tag_desc.find((tagItem) => tagItem.name === tag)
+        const tooltipTitle = tagDescription?.description || 'No Tag Description'
+        return (
+          <MQTooltip title={tooltipTitle} key={tag}>
+            <Chip
+              label={tag}
+              size='small'
+              style={{
+                display: 'inline',
+                marginRight: index < tags.length - 1 ? theme.spacing(1) : 0,
+              }}
+            />
+          </MQTooltip>
+        )
+      })}
     </>
   )
 }
@@ -64,7 +73,8 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
 
   useEffect(() => {
     run && fetchJobFacets(run.id)
-  }, [])
+    run && fetchTags()
+  }, [run])
 
   // unmounting
   useEffect(
@@ -74,6 +84,8 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
     []
   )
 
+  const tagData = useSelector((state: IState) => state.tags.tags)
+
   return (
     <Box>
       {datasetFields.length === 0 && (
@@ -103,7 +115,7 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
               </TableCell>
               <TableCell align='left'>
                 <MqText subheading inline>
-                {i18next.t('dataset_info_columns.tags')}
+                  {i18next.t('dataset_info_columns.tags')}
                 </MqText>
               </TableCell>
             </TableRow>
@@ -115,7 +127,7 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
                   <TableCell align='left'>{field.name}</TableCell>
                   <TableCell align='left'>{field.type}</TableCell>
                   <TableCell align='left'>{field.description || 'no description'}</TableCell>
-                  <TableCell align='left'>{formatColumnTags(field.tags)}</TableCell>
+                  <TableCell align='left'>{formatColumnTags(field.tags, tagData)}</TableCell>
                 </TableRow>
               )
             })}
@@ -127,7 +139,13 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
           <Box mb={1}>
             <MqText subheading>{i18next.t('dataset_info.facets_subhead')}</MqText>
           </Box>
-          <MqJsonView data={facets} searchable={true} aria-label={i18next.t('dataset_info.facets_subhead_aria')} aria-required='True' placeholder='Search' />
+          <MqJsonView
+            data={facets}
+            searchable={true}
+            aria-label={i18next.t('dataset_info.facets_subhead_aria')}
+            aria-required='True'
+            placeholder='Search'
+          />
         </Box>
       )}
       {run && (
@@ -161,6 +179,7 @@ const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
     {
       fetchJobFacets: fetchJobFacets,
       resetFacets: resetFacets,
+      fetchTags: fetchTags,
     },
     dispatch
   )

web/src/store/actionCreators/actionTypes.ts

@@ -57,3 +57,7 @@ export const FETCH_RUN_FACETS = 'FETCH_RUN_FACETS'
 export const FETCH_JOB_FACETS = 'FETCH_JOB_FACETS'
 export const FETCH_FACETS_SUCCESS = 'FETCH_FACETS_SUCCESS'
 export const RESET_FACETS = 'RESET_FACETS'
+
+// tags
+export const FETCH_TAGS = 'FETCH_TAGS'
+export const FETCH_TAGS_SUCCESS = 'FETCH_TAGS_SUCCESS'

web/src/store/actionCreators/index.ts

@@ -13,6 +13,7 @@ import {
   Namespace,
   Run,
   Search,
+  Tag,
 } from '../../types/api'
 import { JobOrDataset } from '../../components/lineage/types'
 
@@ -194,6 +195,17 @@ export const fetchNamespacesSuccess = (namespaces: Namespace[]) => ({
   },
 })
 
+export const fetchTags = () => ({
+  type: actionTypes.FETCH_TAGS,
+})
+
+export const fetchTagsSuccess = (tags: Tag[]) => ({
+  type: actionTypes.FETCH_TAGS_SUCCESS,
+  payload: {
+    tags,
+  },
+})
+
 export const applicationError = (message: string) => ({
   type: actionTypes.APPLICATION_ERROR,
   payload: {

web/src/store/reducers/index.ts

@@ -15,8 +15,10 @@ import lineage, { ILineageState } from './lineage'
 import namespaces, { INamespacesState } from './namespaces'
 import runs, { IRunsState } from './runs'
 import search, { ISearchState } from './search'
+import tags, { ITagsState } from './tags'
 
 export interface IState {
+  tags: ITagsState
   datasets: IDatasetsState
   dataset: IDatasetState
   datasetVersions: IDatasetVersionsState
@@ -44,5 +46,6 @@ export default (history: History): Reducer =>
     display,
     lineage,
     search,
-    facets
+    facets,
+    tags,
   })

web/src/store/reducers/tags.ts

@@ -0,0 +1,27 @@
+// Copyright 2018-2023 contributors to the Marquez project
+// SPDX-License-Identifier: Apache-2.0
+import { FETCH_TAGS, FETCH_TAGS_SUCCESS } from '../actionCreators/actionTypes'
+import { Tag } from '../../types/api'
+import { fetchTagsSuccess } from '../actionCreators'
+
+export type ITagsState = { isLoading: boolean; tags: Tag[]; init: boolean }
+
+export const initialState: ITagsState = {
+  isLoading: false,
+  init: false,
+  tags: [],
+}
+
+type ITagsAction = ReturnType<typeof fetchTagsSuccess>
+
+export default (state: ITagsState = initialState, action: ITagsAction): ITagsState => {
+  const { type, payload } = action
+  switch (type) {
+    case FETCH_TAGS:
+      return { ...state, isLoading: true }
+    case FETCH_TAGS_SUCCESS:
+      return { ...state, isLoading: false, init: true, tags: payload.tags }
+    default:
+      return state
+  }
+}

web/src/store/requests/index.ts

@@ -45,3 +45,4 @@ export * from './events'
 export * from './facets'
 export * from './namespaces'
 export * from './jobs'
+export * from './tags'

web/src/store/requests/tags.ts

@@ -0,0 +1,10 @@
+// Copyright 2018-2023 contributors to the Marquez project
+// SPDX-License-Identifier: Apache-2.0
+
+import { API_URL } from '../../globals'
+import { genericFetchWrapper } from './index'
+
+export const getTags = async () => {
+  const url = `${API_URL}/tags`
+  return genericFetchWrapper(url, { method: 'GET' }, 'fetchTags')
+}

web/src/store/sagas/index.ts

@@ -16,7 +16,15 @@ import {
   FETCH_RUN_FACETS,
   FETCH_SEARCH,
 } from '../actionCreators/actionTypes'
-import { Dataset, DatasetVersion, Events, Facets, LineageGraph, Namespaces } from '../../types/api'
+import {
+  Dataset,
+  DatasetVersion,
+  Events,
+  Facets,
+  LineageGraph,
+  Namespaces,
+  Tags,
+} from '../../types/api'
 import { all, put, take } from 'redux-saga/effects'
 
 const call: any = Effects.call
@@ -37,6 +45,7 @@ import {
   fetchNamespacesSuccess,
   fetchRunsSuccess,
   fetchSearchSuccess,
+  fetchTagsSuccess,
 } from '../actionCreators'
 import {
   deleteDataset,
@@ -50,10 +59,21 @@ import {
   getNamespaces,
   getRunFacets,
   getRuns,
+  getTags,
 } from '../requests'
 import { getLineage } from '../requests/lineage'
 import { getSearch } from '../requests/search'
 
+export function* fetchTags() {
+  try {
+    const response: Tags = yield call(getTags)
+    const { tags } = response
+    yield put(fetchTagsSuccess(tags))
+  } catch (e) {
+    yield put(applicationError('Something went wrong while fetching initial data.'))
+  }
+}
+
 export function* fetchNamespaces() {
   try {
     const response: Namespaces = yield call(getNamespaces)
@@ -226,7 +246,7 @@ export function* fetchRunFacetsSaga() {
 }
 
 export default function* rootSaga(): Generator {
-  const sagasThatAreKickedOffImmediately = [fetchNamespaces()]
+  const sagasThatAreKickedOffImmediately = [fetchNamespaces(), fetchTags()]
   const sagasThatWatchForAction = [
     fetchJobsSaga(),
     fetchRunsSaga(),

web/src/types/api.ts

@@ -7,6 +7,11 @@ export interface Tag {
   name: string
   description: string
 }
+
+export interface Tags {
+  tags: Tag[]
+}
+
 export interface Runs {
   runs: Run[]
 }