Highlighting column while creating edge

Author: ugouhar

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

@@ -137,6 +137,7 @@ const NodeChildren = ({
     expandAllColumns,
     selectedColumn,
     useUpdateNodeInternals,
+    isCreatingEdge,
   } = useLineageProvider();
   const updateNodeInternals = useUpdateNodeInternals();
   const { entityType } = node;
@@ -418,7 +419,8 @@ const NodeChildren = ({
         <div
           className={classNames(
             'column-container',
-            selectedColumn && 'any-column-selected'
+            selectedColumn && 'any-column-selected',
+            isCreatingEdge && 'creating-edge'
           )}
           data-testid="column-container">
           <div className="search-box">

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less

@@ -381,6 +381,12 @@
             border-color: #5925dc;
           }
         }
+        &.creating-edge {
+          .custom-node-column-container:not(.custom-node-header-column-tracing):hover {
+            background-color: @primary-1;
+            border-color: #1570ef;
+          }
+        }
       }
     }
   }

openmetadata-ui/src/main/resources/ui/src/components/Lineage/Lineage.component.tsx

@@ -58,6 +58,8 @@ const Lineage = ({
     onEdgesChange,
     onPaneClick,
     onConnect,
+    onConnectStart,
+    onConnectEnd,
     onInitReactFlow,
     updateEntityData,
   } = useLineageProvider();
@@ -150,6 +152,8 @@ const Lineage = ({
               nodesConnectable={isEditMode}
               selectNodesOnDrag={false}
               onConnect={onConnect}
+              onConnectEnd={onConnectEnd}
+              onConnectStart={onConnectStart}
               onDragOver={onDragOver}
               onDrop={handleNodeDrop}
               onEdgeClick={handleEdgeClick}

openmetadata-ui/src/main/resources/ui/src/context/LineageProvider/LineageProvider.interface.tsx

@@ -19,6 +19,8 @@ import {
   Node,
   NodeChange,
   NodeProps,
+  OnConnectEnd,
+  OnConnectStart,
   ReactFlowInstance,
   UpdateNodeInternals,
 } from 'reactflow';
@@ -66,6 +68,7 @@ export interface LineageContextType {
   expandAllColumns: boolean;
   isPlatformLineage: boolean;
   entityFqn: string;
+  isCreatingEdge: boolean;
   exportLineageData: (_: string) => Promise<CSVExportResponse>;
   onCloseDrawer: () => void;
   toggleColumnView: () => void;
@@ -105,6 +108,8 @@ export interface LineageContextType {
   onColumnEdgeRemove: () => void;
   onAddPipelineClick: () => void;
   onConnect: (connection: Edge | Connection) => void;
+  onConnectStart: OnConnectStart;
+  onConnectEnd: OnConnectEnd;
   updateEntityData: (
     entityType: EntityType,
     entity?: SourceType,

openmetadata-ui/src/main/resources/ui/src/context/LineageProvider/LineageProvider.tsx

@@ -230,6 +230,7 @@ const LineageProvider = ({ children }: LineageProviderProps) => {
   const { showModal } = useEntityExportModalProvider();
   const [isPlatformLineage, setIsPlatformLineage] = useState(false);
   const [dqHighlightedEdges, setDqHighlightedEdges] = useState<Set<string>>();
+  const [isCreatingEdge, setIsCreatingEdge] = useState<boolean>(false);
 
   // Add state for entityFqn that can be updated independently of URL params
   const [entityFqn, setEntityFqn] = useState<string>(decodedFqn);
@@ -1289,6 +1290,14 @@ const LineageProvider = ({ children }: LineageProviderProps) => {
     [entityLineage, nodes, entityFqn]
   );
 
+  const onConnectStart = useCallback(() => {
+    setIsCreatingEdge(true);
+  }, []);
+
+  const onConnectEnd = useCallback(() => {
+    setIsCreatingEdge(false);
+  }, []);
+
   const onAddPipelineClick = useCallback(() => {
     setShowAddEdgeModal(true);
   }, []);
@@ -1755,13 +1764,16 @@ const LineageProvider = ({ children }: LineageProviderProps) => {
       platformView,
       isPlatformLineage,
       entityFqn,
+      isCreatingEdge,
       exportLineageData,
       onCloseDrawer,
       updateEntityFqn,
       toggleColumnView,
       onInitReactFlow,
       onPaneClick,
       onConnect,
+      onConnectStart,
+      onConnectEnd,
       onNodeDrop,
       onNodeCollapse,
       onColumnClick,
@@ -1814,13 +1826,16 @@ const LineageProvider = ({ children }: LineageProviderProps) => {
     expandAllColumns,
     isPlatformLineage,
     entityFqn,
+    isCreatingEdge,
     exportLineageData,
     onCloseDrawer,
     updateEntityFqn,
     toggleColumnView,
     onInitReactFlow,
     onPaneClick,
     onConnect,
+    onConnectStart,
+    onConnectEnd,
     onNodeDrop,
     onNodeCollapse,
     onColumnClick,