diff --git a/web/src/components/core/tooltip/MQTooltip.tsx b/web/src/components/core/tooltip/MQTooltip.tsx new file mode 100644 index 0000000000..a058de010e --- /dev/null +++ b/web/src/components/core/tooltip/MQTooltip.tsx @@ -0,0 +1,36 @@ +// Copyright 2018-2023 contributors to the Marquez project +// SPDX-License-Identifier: Apache-2.0 + +import { createTheme } from '@mui/material/styles' +import { useTheme } from '@emotion/react' +import React, { ReactElement } from 'react' +import Tooltip from '@mui/material/Tooltip' + +interface MqToolTipProps { + title: string | ReactElement + children: ReactElement +} + +const MQTooltip: React.FC = ({ title, children }) => { + const theme = createTheme(useTheme()) + return ( + + {children} + + ) +} + +export default MQTooltip diff --git a/web/src/components/lineage/components/node/Node.tsx b/web/src/components/lineage/components/node/Node.tsx index 63fb30d55f..eee2e79828 100644 --- a/web/src/components/lineage/components/node/Node.tsx +++ b/web/src/components/lineage/components/node/Node.tsx @@ -10,13 +10,13 @@ import { Link } from 'react-router-dom' import { MqNode } from '../../types' import { NodeText } from './NodeText' import { bindActionCreators } from 'redux' - import { connect } from 'react-redux' import { encodeNode, isDataset, isJob } from '../../../../helpers/nodes' import { faCog } from '@fortawesome/free-solid-svg-icons/faCog' import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase' import { setSelectedNode } from '../../../../store/actionCreators' import { theme } from '../../../../helpers/theme' +import MQTooltip from '../../../core/tooltip/MQTooltip' const RADIUS = 14 const ICON_SIZE = 16 @@ -43,69 +43,88 @@ const Node: React.FC = ({ node, selectedNode, setSelectedNode }) => { return '/' } + const addToToolTip = (inputData: GraphNode) => { + return ( + <> + {'Namespace: '} + {inputData.data.namespace} +

+ {'Name: '} + {inputData.data.name} +

+ {'Description: '} + {inputData.data.description === null ? 'No Description' : inputData.data.description} +

+ + ) + } + const job = isJob(node) const isSelected = selectedNode === node.label const ariaJobLabel = 'Job' const ariaDatasetLabel = 'Dataset' + return ( node.label && setSelectedNode(node.label)}> - {job ? ( - - - - - ) : ( - - - - - - )} + + {job ? ( + + + + + ) : ( + + + + + + )} + )