Update node internals on hover

Author: ugouhar

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomEdge.component.tsx

@@ -161,13 +161,15 @@ export const CustomEdge = ({
 
     const isStrokeNeeded = isColumnLineage ? isColumnHighlighted : isNodeTraced;
     let display = 'block';
-    let opacity = 1;
+
     if (isColumnLineage) {
       display = isColumnHighlighted ? 'block' : 'none';
-      opacity = isColumnHighlighted ? 1 : 0;
     } else {
       display = tracedNodes.length === 0 || isStrokeNeeded ? 'block' : 'none';
-      opacity = tracedNodes.length === 0 ? 1 : isStrokeNeeded ? 1 : 0;
+    }
+
+    if (isEditMode) {
+      display = 'block';
     }
 
     let stroke = isStrokeNeeded
@@ -183,7 +185,7 @@ export const CustomEdge = ({
     return {
       ...style,
       stroke,
-      opacity,
+      display,
     };
   }, [
     style,
@@ -194,6 +196,7 @@ export const CustomEdge = ({
     isColumnLineage,
     tracedColumns.length,
     showDqTracing,
+    isEditMode,
     theme.primaryColor,
   ]);
 

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomNode.utils.tsx

@@ -14,7 +14,13 @@ import { Dataflow01, Plus } from '@untitledui/icons';
 import { Button, Col, Row, Skeleton, Typography } from 'antd';
 import classNames from 'classnames';
 import { Fragment, useCallback, useState } from 'react';
-import { Handle, HandleProps, HandleType, Position } from 'reactflow';
+import {
+  Handle,
+  HandleProps,
+  HandleType,
+  Position,
+  UpdateNodeInternals,
+} from 'reactflow';
 import { ReactComponent as MinusIcon } from '../../../assets/svg/control-minus.svg';
 import { EntityLineageNodeType } from '../../../enums/entity.enum';
 import { LineageDirection } from '../../../generated/api/lineage/lineageDirection';
@@ -203,7 +209,9 @@ export const getColumnContent = (
   onColumnMouseOut: () => void,
   showDataObservabilitySummary: boolean,
   isLoading: boolean,
-  summary?: ColumnTestSummaryDefinition
+  summary?: ColumnTestSummaryDefinition,
+  nodeId?: string,
+  updateNodeInternals?: UpdateNodeInternals
 ) => {
   const { fullyQualifiedName } = column;
   const columnNameContentRender = getColumnNameContent(column, isLoading);
@@ -212,6 +220,11 @@ export const getColumnContent = (
     if (selectedColumn) {
       return;
     }
+
+    if (nodeId) {
+      updateNodeInternals?.(nodeId);
+    }
+
     onColumnMouseOver(fullyQualifiedName ?? '');
   };
 

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/NodeChildren/NodeChildren.component.tsx

@@ -38,17 +38,20 @@ import { EntityChildren, NodeChildrenProps } from './NodeChildren.interface';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { IconButton, Pagination, Stack, Typography } from '@mui/material';
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
+import { useUpdateNodeInternals } from 'reactflow';
 
 interface CustomPaginatedListProps {
   items: React.ReactNode[];
+  node: NodeChildrenProps['node'];
 }
 
-const CustomPaginatedList = ({ items }: CustomPaginatedListProps) => {
+const CustomPaginatedList = ({ items, node }: CustomPaginatedListProps) => {
   const ITEMS_PER_PAGE = 5;
   const [page, setPage] = useState(1);
   const { t } = useTranslation();
+  const updateNodeInternals = useUpdateNodeInternals();
 
   const count = Math.ceil(items.length / ITEMS_PER_PAGE);
   const start = (page - 1) * ITEMS_PER_PAGE;
@@ -75,10 +78,16 @@ const CustomPaginatedList = ({ items }: CustomPaginatedListProps) => {
   const handlePrev = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     setPage((p) => Math.max(p - 1, 1));
+    if (node.id) {
+      updateNodeInternals(node.id);
+    }
   };
   const handleNext = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     setPage((p) => Math.min(p + 1, count));
+    if (node.id) {
+      updateNodeInternals(node.id);
+    }
   };
 
   return (
@@ -254,6 +263,7 @@ const NodeChildren = ({
       setIsLoading(false);
     }
   };
+  const updateNodeInternals = useUpdateNodeInternals();
 
   useEffect(() => {
     const testSuite = (node as Table)?.testSuite;
@@ -282,7 +292,9 @@ const NodeChildren = ({
         onColumnMouseOut,
         showDataObservabilitySummary,
         isLoading,
-        columnSummary
+        columnSummary,
+        node.id,
+        updateNodeInternals
       );
 
       if (!record.children || record.children.length === 0) {
@@ -319,7 +331,9 @@ const NodeChildren = ({
             onColumnMouseOut,
             showDataObservabilitySummary,
             isLoading,
-            columnSummary
+            columnSummary,
+            node.id,
+            updateNodeInternals
           );
         }
       });
@@ -378,7 +392,9 @@ const NodeChildren = ({
           onColumnMouseOut,
           showDataObservabilitySummary,
           isLoading,
-          columnSummary
+          columnSummary,
+          node.id,
+          updateNodeInternals
         );
       }
     },
@@ -428,7 +444,7 @@ const NodeChildren = ({
             {isChildrenListExpanded && !isEmpty(renderedColumns) && (
               <section className="m-t-md" id="table-columns">
                 <div className="rounded-4 overflow-hidden">
-                  <CustomPaginatedList items={renderedColumns} />
+                  <CustomPaginatedList items={renderedColumns} node={node} />
                 </div>
               </section>
             )}