Fix #5926 Missing downstream in pipeline task view (#5950)

* Fix #5926 Missing downstream in pipeline task view

* Addressing review comments

* Addressing comments

openmetadata-ui/src/main/resources/ui/src/components/TasksDAGView/TaskNode.tsx

@@ -13,6 +13,7 @@
 
 import React, { CSSProperties, Fragment } from 'react';
 import { Handle, HandleType, NodeProps, Position } from 'react-flow-renderer';
+import { EntityLineageNodeType } from '../../enums/entity.enum';
 
 const handleStyles = {
   width: '8px',
@@ -22,7 +23,7 @@ const handleStyles = {
   top: 10,
 };
 
-const renderHandle = (position: Position) => {
+const renderHandle = (position: Position, isConnectable: boolean) => {
   const styles = { ...handleStyles } as CSSProperties;
   let type: HandleType;
   if (position === Position.Left) {
@@ -32,32 +33,37 @@ const renderHandle = (position: Position) => {
   }
 
   return (
-    <Handle isConnectable position={position} style={styles} type={type} />
+    <Handle
+      isConnectable={isConnectable}
+      position={position}
+      style={styles}
+      type={type}
+    />
   );
 };
 
-const getHandle = (nodeType: string) => {
-  if (nodeType === 'output') {
-    return renderHandle(Position.Left);
-  } else if (nodeType === 'input') {
-    return renderHandle(Position.Right);
+const getHandle = (nodeType: string, isConnectable: boolean) => {
+  if (nodeType === EntityLineageNodeType.OUTPUT) {
+    return renderHandle(Position.Left, isConnectable);
+  } else if (nodeType === EntityLineageNodeType.INPUT) {
+    return renderHandle(Position.Right, isConnectable);
   } else {
     return (
       <Fragment>
-        {renderHandle(Position.Left)}
-        {renderHandle(Position.Right)}
+        {renderHandle(Position.Left, isConnectable)}
+        {renderHandle(Position.Right, isConnectable)}
       </Fragment>
     );
   }
 };
 
 const TaskNode = (props: NodeProps) => {
-  const { data, type } = props;
+  const { data, type, isConnectable } = props;
   const { label } = data;
 
   return (
     <div className="task-node tw-relative nowheel tw-px-2 tw-bg-primary-lite tw-border tw-border-primary-hover tw-rounded-md">
-      {getHandle(type)}
+      {getHandle(type, isConnectable)}
       {/* Node label could be simple text or reactNode */}
       <div className="tw-px-2 tw-py-3" data-testid="node-label">
         {label}

openmetadata-ui/src/main/resources/ui/src/components/TasksDAGView/TasksDAGView.tsx

@@ -19,6 +19,7 @@ import ReactFlow, {
   useEdgesState,
   useNodesState,
 } from 'react-flow-renderer';
+import { EntityLineageNodeType } from '../../enums/entity.enum';
 import { PipelineStatus, Task } from '../../generated/entity/data/pipeline';
 import { EntityReference } from '../../generated/type/entityReference';
 import { getEntityName, replaceSpaceWith_ } from '../../utils/CommonUtils';
@@ -36,12 +37,16 @@ const TasksDAGView = ({ tasks, selectedExec }: Props) => {
   const [edgesData, setEdgesData, onEdgesChange] = useEdgesState([]);
 
   const getNodeType = useCallback(
-    (index: number) => {
-      return index === 0
-        ? 'input'
-        : index === tasks.length - 1
-        ? 'output'
-        : 'default';
+    (task: Task) => {
+      const isDownStreamTask = tasks.some((taskData) =>
+        taskData.downstreamTasks?.includes(task.name)
+      );
+
+      if (isDownStreamTask) {
+        return EntityLineageNodeType.OUTPUT;
+      } else {
+        return EntityLineageNodeType.DEFAULT;
+      }
     },
     [tasks]
   );
@@ -56,7 +61,7 @@ const TasksDAGView = ({ tasks, selectedExec }: Props) => {
   );
 
   useEffect(() => {
-    const nodes = tasks.map((task, index) => {
+    const nodes = tasks.map((task) => {
       const taskStatus = getTaskExecStatus(
         task.name,
         selectedExec?.taskStatus || []
@@ -65,11 +70,12 @@ const TasksDAGView = ({ tasks, selectedExec }: Props) => {
       return {
         className: classNames('leaf-node', taskStatus),
         id: replaceSpaceWith_(task.name),
-        type: getNodeType(index),
+        type: getNodeType(task),
         data: {
           label: getEntityName(task as EntityReference),
         },
         position: { x: 0, y: 0 },
+        isConnectable: false,
       };
     });