Adding tag descriptions to tooltips

web/src/components/datasets/DatasetInfo.tsx

@@ -3,10 +3,10 @@
 
 import * as Redux from 'redux'
 import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
-import { Field, Run } from '../../types/api'
+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 { fetchJobFacets, resetFacets, fetchTags } from '../../store/actionCreators'
 import { stopWatchDuration } from '../../helpers/time'
 import MqCode from '../core/code/MqCode'
 import MqEmpty from '../core/empty/MqEmpty'
@@ -17,6 +17,7 @@ import RunStatus from '../jobs/RunStatus'
 import { Chip } from '@mui/material'
 import { createTheme } from '@mui/material/styles'
 import { useTheme } from '@emotion/react'
+import MQTooltip from '../core/tooltip/MQTooltip'
 
 export interface DispatchProps {
   fetchJobFacets: typeof fetchJobFacets
@@ -42,28 +43,35 @@ type DatasetInfoProps = {
 } & JobFacetsProps &
   DispatchProps
 
-const formatColumnTags = (tags: string[]) => {
-  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}}
-        />
-      ))}
-    </>
-  )
-}
+  const formatColumnTags = (tags: string[], tag_desc: Tag[]) => {
+    const theme = createTheme(useTheme())
+    return (
+      <>
+        {tags.map((tag, index) => {
+          const tagDescription = tag_desc.find((tagItem) => tagItem.name === tag)
+          const tooltipTitle = tagDescription ? (tagDescription.description || 'No Tag 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>
+          );
+        })}
+      </>
+    );
+  };
+
 
 const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
   const { datasetFields, facets, run, jobFacets, fetchJobFacets, resetFacets } = props
   const i18next = require('i18next')
 
   useEffect(() => {
     run && fetchJobFacets(run.id)
+    fetchTags()
   }, [])
 
   // unmounting
@@ -73,6 +81,8 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
     },
     []
   )
+
+  const tagData = useSelector((state: IState) => state.tags.tags)
 
   return (
     <Box>
@@ -115,7 +125,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>
               )
             })}
@@ -153,14 +163,15 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
 }
 
 const mapStateToProps = (state: IState) => ({
-  jobFacets: state.facets.result,
+  jobFacets: state.facets.result
 })
 
 const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
   Redux.bindActionCreators(
     {
       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,33 @@
+// Copyright 2018-2023 contributors to the Marquez project
+// SPDX-License-Identifier: Apache-2.0
+import { Tag } from '../../types/api'
+import {
+    FETCH_TAGS,
+    FETCH_TAGS_SUCCESS
+  } from '../actionCreators/actionTypes'
+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,7 @@ 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 +37,7 @@ import {
   fetchNamespacesSuccess,
   fetchRunsSuccess,
   fetchSearchSuccess,
+  fetchTagsSuccess
 } from '../actionCreators'
 import {
   deleteDataset,
@@ -50,10 +51,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 +238,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[]
 }