Improvements to IO Node Ghosts & Quick-Place (#1440)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
IO Ghost nodes now:
- Measure their own size and position themselves correctly (instead of working with an assumed default)
- End up in the same position when placed
- Have the connection line drawn to their handle, not the top of the node
- No longer append "Input" or "Output" to the name when placed

To enable this a custom connection line component was added. This component renders for all in-progress connections, except when a GhostNode is active. This is used in conjunction with a GhostEdge to draw the line to the ghost node's handle instead of the cursor.

Additionally, Edges:
- The default drawn edge is now similar in style to our placed edges (i.e. thicker)
- Now color a slight green whilst drawn when valid (e.g. task -> task)
- Now color a slight red whilst drawn when invalid (e.g. input -> output)
- Now color a dashed blue whilst drawn when placing a ghost Input
- Now color a dashed purple whilst drawn when placing a ghost Output

Finally, some additional code improvements were made to the Ghost Node logic. e.g. consolidating refs and removing and expensive `nodes.find` statement.

Note: due to our existing connection architecture the IO Node handles cannot have ids, but for the ghost node connections they need an id. Hence, there is a ternary to separate the two cases. In future we should revise (e.g. as per node manager stack) and all handles should have ids.

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Bug fix
- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->
Confirm that edges can still be drawn as expected
Confirm that ghost nodes position and move and behave as expected
Confirm that ghost nodes place in the same location as they were when dropped
Confirm that drawing a connection goes green when valid and red when invalid

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/components/shared/ReactFlow/FlowCanvas/Edges/ConnectionLine.tsx

@@ -0,0 +1,99 @@
+import {
+  type ConnectionLineComponent,
+  type ConnectionLineComponentProps,
+  getBezierPath,
+  type Node,
+  useConnection,
+  useNodes,
+} from "@xyflow/react";
+
+import { EdgeColor } from "./utils";
+
+export const ConnectionLine: ConnectionLineComponent = ({
+  fromX,
+  fromY,
+  fromPosition,
+  toX,
+  toY,
+  toPosition,
+  connectionStatus,
+}: ConnectionLineComponentProps) => {
+  const nodes = useNodes();
+  const sourceNode = useConnection((connection) => connection.fromNode);
+  const targetNode = useConnection((connection) => connection.toNode);
+
+  const hasGhostNode = nodes.some((node) => node.type === "ghost");
+
+  if (hasGhostNode) {
+    return null;
+  }
+
+  const [path] = getBezierPath({
+    sourceX: fromX,
+    sourceY: fromY,
+    sourcePosition: fromPosition,
+    targetX: toX,
+    targetY: toY,
+    targetPosition: toPosition,
+  });
+
+  let color =
+    connectionStatus === "valid" ? EdgeColor.Valid : EdgeColor.Incomplete;
+
+  if (sourceNode && targetNode && !isValidConnection(sourceNode, targetNode)) {
+    color = EdgeColor.Invalid;
+  }
+
+  const markerId = `connection-line-arrow-${color}`;
+
+  return (
+    <g>
+      <svg style={{ height: 0 }}>
+        <defs>
+          <marker
+            id={markerId}
+            markerWidth="12"
+            markerHeight="12"
+            refX="7"
+            refY="6"
+            orient="auto"
+            markerUnits="userSpaceOnUse"
+          >
+            <path
+              d="M2,2 Q10,6 2,10 Q4,6 2,2"
+              fill={color}
+              stroke={color}
+              strokeWidth="1"
+              strokeLinejoin="round"
+            />
+          </marker>
+        </defs>
+      </svg>
+      <path
+        d={path}
+        className="react-flow__edge-path"
+        style={{
+          stroke: color,
+          strokeWidth: 4,
+        }}
+        markerEnd={`url(#${markerId})`}
+      />
+    </g>
+  );
+};
+
+const isValidConnection = (fromNode: Node, toNode: Node) => {
+  if (fromNode.id === toNode.id) {
+    return false;
+  }
+
+  // IO nodes can't connect to each other
+  const isFromIO = fromNode.type === "input" || fromNode.type === "output";
+  const isToIO = toNode.type === "input" || toNode.type === "output";
+
+  if (isFromIO && isToIO) {
+    return false;
+  }
+
+  return true;
+};

src/components/shared/ReactFlow/FlowCanvas/Edges/SmoothEdge.tsx

@@ -1,6 +1,8 @@
 import type { EdgeProps } from "@xyflow/react";
 import { getBezierPath } from "@xyflow/react";
 
+import { EdgeColor } from "./utils";
+
 const SmoothEdge = ({
   id,
   sourceX,
@@ -21,7 +23,7 @@ const SmoothEdge = ({
     targetPosition,
   });
 
-  const edgeColor = selected ? "#38bdf8" : "#6b7280";
+  const edgeColor = selected ? EdgeColor.Selected : EdgeColor.Neutral;
   const markerIdSuffix = selected ? "selected" : "default";
 
   return (

src/components/shared/ReactFlow/FlowCanvas/Edges/utils.ts

@@ -0,0 +1,9 @@
+export enum EdgeColor {
+  Incomplete = "#b1b1b7",
+  Neutral = "#6b7280",
+  Valid = "#8db88d",
+  Invalid = "#d47a7a",
+  Input = "#3b82f6",
+  Output = "#a855f7",
+  Selected = "#38bdf8",
+}

src/components/shared/ReactFlow/FlowCanvas/FlowCanvas.tsx

@@ -1,5 +1,6 @@
 import {
   type Connection,
+  type Edge,
   type FinalConnectionState,
   type Node,
   type NodeChange,
@@ -10,6 +11,7 @@ import {
   type ReactFlowProps,
   SelectionMode,
   useConnection,
+  useEdgesState,
   useNodesState,
   useStoreApi,
   type XYPosition,
@@ -35,7 +37,6 @@ import { hydrateComponentReference } from "@/services/componentService";
 import {
   type ComponentSpec,
   type InputSpec,
-  isGraphImplementation,
   isNotMaterializedComponentReference,
   type TaskSpec,
 } from "@/utils/componentSpec";
@@ -53,10 +54,14 @@ import { useNodesOverlay } from "../NodesOverlay/NodesOverlayProvider";
 import { getBulkUpdateConfirmationDetails } from "./ConfirmationDialogs/BulkUpdateConfirmationDialog";
 import { getDeleteConfirmationDetails } from "./ConfirmationDialogs/DeleteConfirmation";
 import { getReplaceConfirmationDetails } from "./ConfirmationDialogs/ReplaceConfirmation";
+import { ConnectionLine } from "./Edges/ConnectionLine";
 import SmoothEdge from "./Edges/SmoothEdge";
 import GhostNode from "./GhostNode/GhostNode";
 import type { GhostNodeData } from "./GhostNode/types";
-import { computeDropPositionFromRefs } from "./GhostNode/utils";
+import {
+  computeDropPositionFromRefs,
+  createGhostEdge,
+} from "./GhostNode/utils";
 import IONode from "./IONode/IONode";
 import SelectionToolbar from "./SelectionToolbar";
 import { handleGroupNodes } from "./Subgraphs/create/handleGroupNodes";
@@ -134,10 +139,16 @@ const FlowCanvas = ({
   const isSubgraphNavigationEnabled = useBetaFlagValue("subgraph-navigation");
   const isPartialSelectionEnabled = useBetaFlagValue("partial-selection");
 
-  const { edges, onEdgesChange } = useComponentSpecToEdges(currentSubgraphSpec);
+  const store = useStoreApi();
+  const { edges: specEdges, onEdgesChange } =
+    useComponentSpecToEdges(currentSubgraphSpec);
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges] = useEdgesState<Edge>(specEdges);
 
   const isConnecting = useConnection((connection) => connection.inProgress);
+  const connectionSourceHandle = useConnection(
+    (connection) => connection.fromHandle,
+  );
 
   const {
     handlers: confirmationHandlers,
@@ -150,8 +161,7 @@ const FlowCanvas = ({
   const notify = useToastNotification();
 
   const latestFlowPosRef = useRef<XYPosition>(null);
-  const ghostNodePositionRef = useRef<XYPosition | null>(null);
-  const ghostNodeTypeRef = useRef<GhostNodeData["ioType"] | null>(null);
+  const ghostNodeRef = useRef<Node<GhostNodeData> | null>(null);
   const shouldCreateIONodeRef = useRef(false);
 
   const [showToolbar, setShowToolbar] = useState(false);
@@ -263,11 +273,22 @@ const FlowCanvas = ({
 
   const { ghostNode, shouldCreateIONode } = useGhostNode({
     readOnly,
-    metaKeyPressed,
+    active: metaKeyPressed,
     isConnecting,
     implementation: currentSubgraphSpec.implementation,
   });
 
+  useEffect(() => {
+    if (!!ghostNode && connectionSourceHandle) {
+      const ghostEdge = createGhostEdge(connectionSourceHandle);
+      setEdges([...specEdges, ghostEdge]);
+
+      return;
+    }
+
+    setEdges(specEdges);
+  }, [ghostNode, connectionSourceHandle, specEdges, setEdges]);
+
   const nodesForRender = useMemo<Node[]>(
     () => (ghostNode ? [...nodes, ghostNode] : nodes),
     [nodes, ghostNode],
@@ -278,8 +299,7 @@ const FlowCanvas = ({
   }, [shouldCreateIONode]);
 
   useEffect(() => {
-    ghostNodePositionRef.current = ghostNode?.position ?? null;
-    ghostNodeTypeRef.current = ghostNode?.data.ioType ?? null;
+    ghostNodeRef.current = ghostNode;
   }, [ghostNode]);
 
   const selectedNodes = useMemo(
@@ -392,32 +412,26 @@ const FlowCanvas = ({
   );
 
   const handleGhostDrop = useCallback(
-    (fromHandle: FinalConnectionState["fromHandle"] | null) => {
-      if (
-        !fromHandle ||
-        !fromHandle.nodeId ||
-        !fromHandle.id ||
-        !isGraphImplementation(currentSubgraphSpec.implementation)
-      ) {
+    (finalConnectionState: FinalConnectionState | null) => {
+      const fromNode = finalConnectionState?.fromNode;
+      const fromHandle = finalConnectionState?.fromHandle;
+
+      if (!fromNode || !fromHandle?.id) {
+        return false;
+      }
+
+      if (!FAST_PLACE_NODE_TYPES.has(fromNode.type)) {
         return false;
       }
 
       const position = computeDropPositionFromRefs(
-        ghostNodePositionRef.current,
+        ghostNodeRef.current,
         latestFlowPosRef.current,
-        ghostNodeTypeRef.current,
         fromHandle.type,
+        store.getState(),
       );
-      if (!position) {
-        return false;
-      }
 
-      const fromNode = nodes.find((node) => node.id === fromHandle.nodeId);
-      if (
-        !fromNode ||
-        !fromNode.type ||
-        !FAST_PLACE_NODE_TYPES.has(fromNode.type)
-      ) {
+      if (!position) {
         return false;
       }
 
@@ -470,7 +484,7 @@ const FlowCanvas = ({
         return;
       }
 
-      handleGhostDrop(connectionState.fromHandle ?? null);
+      handleGhostDrop(connectionState);
     },
     [handleGhostDrop],
   );
@@ -948,8 +962,6 @@ const FlowCanvas = ({
     fitView,
   );
 
-  const store = useStoreApi();
-
   const onCopy = useCallback(() => {
     // Copy selected nodes to clipboard
     if (selectedNodes.length > 0) {
@@ -1083,6 +1095,7 @@ const FlowCanvas = ({
         onSelectionEnd={handleSelectionEnd}
         nodesConnectable={readOnly ? false : nodesConnectable}
         connectOnClick={!readOnly}
+        connectionLineComponent={ConnectionLine}
         proOptions={{ hideAttribution: true }}
         className={cn(
           (rest.selectionOnDrag || (shiftKeyPressed && !isConnecting)) &&

src/components/shared/ReactFlow/FlowCanvas/GhostNode/GhostNode.tsx

@@ -1,4 +1,4 @@
-import type { Node, NodeProps } from "@xyflow/react";
+import { type Node, type NodeProps, Position } from "@xyflow/react";
 import { memo, useMemo } from "react";
 
 import { cn } from "@/lib/utils";
@@ -9,11 +9,12 @@ import { GHOST_NODE_BASE_OFFSET_X, GHOST_NODE_BASE_OFFSET_Y } from "./utils";
 
 type GhostNodeProps = NodeProps<Node<GhostNodeData>>;
 
-const GhostNode = ({ data }: GhostNodeProps) => {
+const GhostNode = ({ data, id }: GhostNodeProps) => {
   const { ioType, label, dataType, value, defaultValue } = data;
 
-  const side = ioType === "input" ? "left" : "right";
-  const transformOrigin = side === "left" ? "center right" : "center left";
+  const side = ioType === "input" ? Position.Left : Position.Right;
+  const transformOrigin =
+    side === Position.Left ? "center right" : "center left";
   const offsetX = GHOST_NODE_BASE_OFFSET_X;
   const offsetY = GHOST_NODE_BASE_OFFSET_Y;
 
@@ -32,7 +33,7 @@ const GhostNode = ({ data }: GhostNodeProps) => {
     <div
       className={cn(
         "pointer-events-none select-none opacity-60",
-        side === "left" && "-translate-x-full",
+        side === Position.Left && "-translate-x-full",
       )}
       style={{
         filter: "brightness(0.9) saturate(0.7)",
@@ -42,6 +43,7 @@ const GhostNode = ({ data }: GhostNodeProps) => {
     >
       <div className="rounded-lg border-2 border-dashed border-blue-400/60 bg-white/40 p-1">
         <IONode
+          id={id}
           type={ioType}
           data={ghostNodeData}
           selected={false}