diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomNode.utils.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomNode.utils.tsx index fb12ce6c1431..08f76b345b87 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomNode.utils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomNode.utils.tsx @@ -21,7 +21,7 @@ import { EntityLineageNodeType } from '../../../enums/entity.enum'; import { Column } from '../../../generated/entity/data/table'; import { encodeLineageHandles } from '../../../utils/EntityLineageUtils'; import { getEntityName } from '../../../utils/EntityUtils'; -import { getConstraintIcon } from '../../../utils/TableUtils'; +import { getColumnDataTypeIcon } from '../../../utils/TableUtils'; import { EdgeTypeEnum } from './EntityLineage.interface'; export const getHandleByType = ( @@ -133,9 +133,7 @@ export const getColumnContent = (
- {getConstraintIcon({ - constraint: column.constraint, - })} - {getEntityName(column)} - + +
+ {getColumnDataTypeIcon({ + dataType: column.dataType, + width: '14px', + })} +
+ + {getEntityName(column)} + +
+ {column.constraint}
); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/NodeChildren/NodeChildren.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/NodeChildren/NodeChildren.component.tsx index d0e28bdaf070..220559a4792d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/NodeChildren/NodeChildren.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/NodeChildren/NodeChildren.component.tsx @@ -12,6 +12,7 @@ */ import { DownOutlined, SearchOutlined, UpOutlined } from '@ant-design/icons'; import { Button, Collapse, Input, Space } from 'antd'; +import classNames from 'classnames'; import { isEmpty } from 'lodash'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -200,7 +201,7 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => { if (supportsColumns && (showColumns || showDataObservability)) { return ( -
+
{showColumns && ( @@ -247,7 +248,10 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => {
-
+
{filteredColumns.map((column) => renderColumnsData(column as Column) )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less index 267ba9999fdb..740ea71fb28f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less @@ -62,14 +62,12 @@ } .column-container { min-height: 48px; - padding: 6px 12px; + padding: 12px; + background-color: @grey-1; - .lineage-collapse-column { - .ant-collapse { - border-radius: 0; - border: 1px solid @border-color; - border-color: @border-color; - } + .lineage-collapse-column.ant-collapse { + border: none; + border-radius: 0; .ant-collapse-header { padding: 0; font-size: 12px; @@ -253,11 +251,27 @@ .custom-node-column-container { display: flex; - align-items: center; - justify-content: center; + justify-content: space-between; + padding: 6px 12px; + background: @white; position: relative; - background-color: @white; font-size: 12px; + font-weight: 400; + + .custom-node-name-container { + display: flex; + align-items: center; + padding-left: 12px; + gap: 4px; + + .custom-node-name-icon { + width: 14px; + } + } + + .custom-node-constraint { + padding-right: 12px; + } } .custom-node-deleted-icon { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/entity-lineage.style.less b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/entity-lineage.style.less index 0cd225db58cd..5a7b36838005 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/entity-lineage.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/entity-lineage.style.less @@ -85,17 +85,6 @@ } } } -.custom-node-column-lineage-normal { - border-top: 1px solid @border-color; - display: flex; - justify-content: center; - align-items: center; - position: relative; - font-size: 12px; - &:first-child { - border-top: none; - } -} .custom-node { .custom-node-header-active { @@ -228,6 +217,7 @@ height: calc(100vh - @om-navbar-height); .lineage-card { height: calc(100vh - @om-navbar-height); + overflow-y: scroll; } .entity-lineage.sidebar { top: @lineage-breadcrumb-panel;