From ad8b27139d2cc5f0a1b7580a5e370f4e964d1b55 Mon Sep 17 00:00:00 2001 From: Karan Hotchandani <33024356+karanh37@users.noreply.github.com> Date: Mon, 19 Aug 2024 12:15:01 +0530 Subject: [PATCH] fix lineage expand config (#17440) --- .../EntityLineage/CustomEdge.component.tsx | 23 ++++-- .../EntityLineage/LineageNodeLabelV1.tsx | 3 +- .../NodeChildren/NodeChildren.component.tsx | 71 +++++++++++++------ .../src/components/ExploreV1/exploreV1.less | 3 +- .../LineageProvider/LineageProvider.tsx | 1 + 5 files changed, 70 insertions(+), 31 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomEdge.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomEdge.component.tsx index 5d94c46adf07..4c4a3e8e3f9b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomEdge.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomEdge.component.tsx @@ -138,14 +138,18 @@ export const CustomEdge = ({ tracedNodes.includes(edge.fromEntity.id) && tracedNodes.includes(edge.toEntity.id); - let isStrokeNeeded = isNodeTraced; - + const isStrokeNeeded = isColumnLineage ? isColumnHighlighted : isNodeTraced; + let opacity = 1; if (isColumnLineage) { - isStrokeNeeded = isColumnHighlighted; + opacity = + tracedNodes.length === 0 && + (tracedColumns.length === 0 || isColumnHighlighted) + ? 1 + : 0.25; + } else { + opacity = tracedNodes.length === 0 || isStrokeNeeded ? 1 : 0.25; } - const opacity = tracedNodes.length === 0 || isStrokeNeeded ? 1 : 0.25; - return { ...style, ...{ @@ -153,7 +157,14 @@ export const CustomEdge = ({ opacity, }, }; - }, [style, tracedNodes, edge, isColumnHighlighted, isColumnLineage]); + }, [ + style, + tracedNodes, + edge, + isColumnHighlighted, + isColumnLineage, + tracedColumns, + ]); const isPipelineEdgeAllowed = ( sourceType: EntityType, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx index 0c07abdc7c58..9821f9f7e885 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx @@ -35,7 +35,8 @@ const EntityLabel = ({ node }: Pick) => { return { showDbtIcon: node.entityType === EntityType.TABLE && - (node as Table)?.dataModel?.modelType === ModelType.Dbt, + (node as Table)?.dataModel?.modelType === ModelType.Dbt && + (node as Table)?.dataModel?.resourceType?.toLowerCase() !== 'seed', showDeletedIcon: node.deleted ?? false, }; }, [node]); 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 1ac8f1ce1d41..caab966d9bfe 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 @@ -45,6 +45,7 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => { const { entityType } = node; const [searchValue, setSearchValue] = useState(''); const [filteredColumns, setFilteredColumns] = useState([]); + const [showAllColumns, setShowAllColumns] = useState(false); const [isExpanded, setIsExpanded] = useState(true); const { showColumns, showDataObservability } = useMemo(() => { @@ -89,15 +90,20 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => { [children] ); + const handleShowMoreClick = (e: React.MouseEvent) => { + e.stopPropagation(); + setShowAllColumns(true); + }; + const isColumnVisible = useCallback( (record: Column) => { - if (expandAllColumns || isEditMode) { + if (expandAllColumns || isEditMode || showAllColumns) { return true; } return columnsHavingLineage.includes(record.fullyQualifiedName ?? ''); }, - [isEditMode, columnsHavingLineage, expandAllColumns] + [isEditMode, columnsHavingLineage, expandAllColumns, showAllColumns] ); useEffect(() => { @@ -126,6 +132,34 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => { return headerContent; } + const childRecords = record?.children?.map((child) => { + const { fullyQualifiedName, dataType } = child; + if (DATATYPES_HAVING_SUBFIELDS.includes(dataType)) { + return renderRecord(child); + } else { + const isColumnTraced = tracedColumns.includes( + fullyQualifiedName ?? '' + ); + + if (!isColumnVisible(child)) { + return null; + } + + return getColumnContent( + child, + isColumnTraced, + isConnectable, + onColumnClick + ); + } + }); + + const result = childRecords.filter((child) => child !== null); + + if (result.length === 0) { + return null; + } + return ( { expandIcon={() => null} key={record.fullyQualifiedName}> - {record?.children?.map((child) => { - const { fullyQualifiedName, dataType } = child; - if (DATATYPES_HAVING_SUBFIELDS.includes(dataType)) { - return renderRecord(child); - } else { - const isColumnTraced = tracedColumns.includes( - fullyQualifiedName ?? '' - ); - - if (!isColumnVisible(child)) { - return null; - } - - return getColumnContent( - child, - isColumnTraced, - isConnectable, - onColumnClick - ); - } - })} + {result} ); @@ -239,6 +253,17 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => { )} + + {!showAllColumns && ( + + )} )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/exploreV1.less b/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/exploreV1.less index 54d02be6c2ea..3fd84478679f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/exploreV1.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/exploreV1.less @@ -92,7 +92,8 @@ height: 12px; color: @grey-4; } - .ant-tree-switcher:hover { + .ant-tree-switcher_open:hover, + .ant-tree-switcher_close:hover { background-color: @grey-2; } .ant-tree-title { diff --git a/openmetadata-ui/src/main/resources/ui/src/context/LineageProvider/LineageProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/context/LineageProvider/LineageProvider.tsx index 83aae615210a..cb908a69b4a0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/context/LineageProvider/LineageProvider.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/context/LineageProvider/LineageProvider.tsx @@ -393,6 +393,7 @@ const LineageProvider = ({ children }: LineageProviderProps) => { ); setTracedColumns(connectedColumnEdges); + setTracedNodes([]); }, [nodes, edges] );