fix lineage expand config (open-metadata#17440)

TeddyCr · Aug 19, 2024 · ad8b271 · ad8b271
1 parent bcc0717
commit ad8b271
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 31 deletions.
diff --git a/...ata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomEdge.component.tsx b/...ata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomEdge.component.tsx
@@ -138,22 +138,33 @@ 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,
       ...{
         stroke: isStrokeNeeded ? theme.primaryColor : undefined,
         opacity,
       },
     };
-  }, [style, tracedNodes, edge, isColumnHighlighted, isColumnLineage]);
+  }, [
+    style,
+    tracedNodes,
+    edge,
+    isColumnHighlighted,
+    isColumnLineage,
+    tracedColumns,
+  ]);
 
   const isPipelineEdgeAllowed = (
     sourceType: EntityType,

diff --git a/...adata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx b/...adata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx
@@ -35,7 +35,8 @@ const EntityLabel = ({ node }: Pick<LineageNodeLabelProps, 'node'>) => {
     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/.../resources/ui/src/components/Entity/EntityLineage/NodeChildren/NodeChildren.component.tsx b/.../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<EntityChildren>([]);
+  const [showAllColumns, setShowAllColumns] = useState(false);
   const [isExpanded, setIsExpanded] = useState<boolean>(true);
 
   const { showColumns, showDataObservability } = useMemo(() => {
@@ -89,15 +90,20 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => {
     [children]
   );
 
+  const handleShowMoreClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    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 (
         <Collapse
           destroyInactivePanel
@@ -134,27 +168,7 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => {
           expandIcon={() => null}
           key={record.fullyQualifiedName}>
           <Panel header={headerContent} 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}
           </Panel>
         </Collapse>
       );
@@ -239,6 +253,17 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => {
                 )}
               </div>
             </section>
+
+            {!showAllColumns && (
+              <Button
+                className="m-t-xs text-primary"
+                type="text"
+                onClick={handleShowMoreClick}>
+                {t('label.show-more-entity', {
+                  entity: t('label.column-plural'),
+                })}
+              </Button>
+            )}
           </div>
         )}
       </div>

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
@@ -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
@@ -393,6 +393,7 @@ const LineageProvider = ({ children }: LineageProviderProps) => {
       );
 
       setTracedColumns(connectedColumnEdges);
+      setTracedNodes([]);
     },
     [nodes, edges]
   );