feat: Duplicate Flex Nodes

Author: camielvs

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

@@ -85,7 +85,7 @@ import { removeNode } from "./utils/removeNode";
 import { replaceTaskNode } from "./utils/replaceTaskNode";
 import { updateNodePositions } from "./utils/updateNodePosition";
 
-const SELECTABLE_NODES = new Set(["task", "input", "output"]);
+const SELECTABLE_NODES = new Set(["task", "input", "output", "flex"]);
 const UPGRADEABLE_NODES = new Set(["task"]);
 const REPLACEABLE_NODES = new Set(["task"]);
 const FAST_PLACE_NODE_TYPES = new Set<Node["type"]>(["task"]);
@@ -737,7 +737,10 @@ const FlowCanvas = ({
       updatedComponentSpec: updatedSubgraphSpec,
       newNodes,
       updatedNodes,
-    } = duplicateNodes(currentSubgraphSpec, selectedNodes, { selected: true });
+    } = duplicateNodes(currentSubgraphSpec, selectedNodes, {
+      selected: true,
+      author: currentUserDetails?.id,
+    });
 
     const updatedRootSpec = updateSubgraphSpec(
       componentSpec,
@@ -932,6 +935,7 @@ const FlowCanvas = ({
             duplicateNodes(currentSubgraphSpec, nodesToPaste, {
               position: reactFlowCenter,
               connection: "internal",
+              author: currentUserDetails?.id,
             });
 
           // Deselect all existing nodes

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

@@ -32,6 +32,7 @@ const addFlexNode = (
   position: XYPosition,
   author: string,
   componentSpec: ComponentSpec,
+  data?: Partial<FlexNodeData>,
 ): AddFlexNodeResult => {
   const nodeId = nanoid();
 
@@ -40,13 +41,15 @@ const addFlexNode = (
     createdBy: author,
   };
 
+  const { properties, size, zIndex } = data || {};
+
   const flexNode: FlexNodeData = {
     id: nodeId,
-    properties: DEFAULT_STICKY_NOTE,
+    properties: properties ?? DEFAULT_STICKY_NOTE,
     metadata,
-    size: DEFAULT_FLEX_NODE_SIZE,
+    size: size ?? DEFAULT_FLEX_NODE_SIZE,
     position: position,
-    zIndex: Z_INDEX_RANGES.flex.default,
+    zIndex: zIndex ?? Z_INDEX_RANGES.flex.default,
   };
 
   const newComponentSpec = updateFlexNodeInComponentSpec(

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

@@ -7,6 +7,8 @@ import {
   type GraphInputArgument,
   type InputSpec,
   isGraphImplementation,
+  isGraphInputArgument,
+  isTaskOutputArgument,
   type OutputSpec,
   type TaskOutputArgument,
   type TaskSpec,
@@ -28,6 +30,14 @@ import {
   getUniqueTaskName,
 } from "@/utils/unique";
 
+import {
+  getFlexNode,
+  updateFlexNodeInComponentSpec,
+} from "../FlexNode/interface";
+import type { FlexNodeData } from "../FlexNode/types";
+import { createFlexNode } from "../FlexNode/utils";
+import { isFlexNode } from "../types";
+import addFlexNode from "./addFlexNode";
 import { getNodesBounds } from "./geometry";
 
 const OFFSET = 10;
@@ -49,6 +59,7 @@ export const duplicateNodes = (
     position?: XYPosition;
     connection?: ConnectionMode;
     status?: boolean;
+    author?: string;
   },
 ) => {
   if (!isGraphImplementation(componentSpec.implementation)) {
@@ -62,10 +73,12 @@ export const duplicateNodes = (
   const newTasks: Record<string, TaskSpec> = {};
   const newInputs: Record<string, InputSpec> = {};
   const newOutputs: Record<string, OutputSpec> = {};
+  const newFlexNodes: Record<string, FlexNodeData> = {};
 
   // Default Config
   const selected = config?.selected ?? true;
   const connection = config?.connection ?? "all";
+  const author = config?.author ?? "system";
 
   /* Create new Nodes and map old Task IDs to new Task IDs */
   nodesToDuplicate.forEach((node) => {
@@ -141,6 +154,27 @@ export const duplicateNodes = (
       };
 
       newOutputs[newOutputId] = newOutputSpec;
+    } else if (isFlexNode(node)) {
+      const flexNode = getFlexNode(node.id, componentSpec);
+      const { spec: updatedComponentSpec, nodeId: newNodeId } = addFlexNode(
+        {
+          x: node.position.x + OFFSET,
+          y: node.position.y + OFFSET,
+        },
+        author,
+        componentSpec,
+        flexNode ? { ...flexNode, id: undefined } : undefined,
+      );
+
+      const newNodeData = getFlexNode(newNodeId, updatedComponentSpec);
+      if (!newNodeData) {
+        throw new Error("Failed to retrieve newly created Flex Node data.");
+      }
+
+      newFlexNodes[newNodeId] = newNodeData;
+      nodeIdMap[oldNodeId] = newNodeId;
+    } else {
+      throw new Error(`Unsupported node type: ${node.type}`);
     }
   });
 
@@ -153,11 +187,7 @@ export const duplicateNodes = (
         const newTaskSpec = newTasks[taskId];
 
         // Check if the Argument is a connection to another Task or Input Node (i.e. TaskOutput or GraphInput) or a static value
-        if (
-          typeof argument === "object" &&
-          argument !== null &&
-          ("taskOutput" in argument || "graphInput" in argument)
-        ) {
+        if (isTaskOutputArgument(argument) || isGraphInputArgument(argument)) {
           newTasks[taskId] = reconfigureConnections(
             newTaskSpec,
             argKey,
@@ -217,7 +247,7 @@ export const duplicateNodes = (
         updatedOutputValue !== null &&
         connection !== "external"
       ) {
-        if ("taskOutput" in updatedOutputValue) {
+        if (isTaskOutputArgument(updatedOutputValue)) {
           const oldTaskId = updatedOutputValue.taskOutput.taskId;
           const oldTaskNodeId = taskIdToNodeId(oldTaskId);
           if (oldTaskNodeId in nodeIdMap) {
@@ -348,6 +378,28 @@ export const duplicateNodes = (
 
         updatedNodes.push(originalNode);
 
+        return newNode;
+      } else if (isFlexNode(originalNode)) {
+        const newNodeData = newFlexNodes[newNodeId];
+
+        if (!newNodeData) {
+          return null;
+        }
+
+        const newNode = createFlexNode(newNodeData);
+
+        newNode.id = newNodeId;
+
+        // Move selection to new node by default
+        if (selected) {
+          originalNode.selected = false;
+          newNode.selected = true;
+        }
+
+        newNode.measured = originalNode.measured;
+
+        updatedNodes.push(originalNode);
+
         return newNode;
       }
     })
@@ -447,13 +499,26 @@ export const duplicateNodes = (
         if (updatedOutputIndex !== -1) {
           updatedOutputs[updatedOutputIndex] = newOutputSpec;
         }
+      } else if (isFlexNode(node)) {
+        const flexNode = getFlexNode(node.id, componentSpec);
+
+        if (!flexNode) {
+          return;
+        }
+
+        const newFlexNodeData = {
+          ...flexNode,
+          position: newPosition,
+        };
+
+        newFlexNodes[node.id] = newFlexNodeData;
       }
 
       node.position = newPosition;
     });
   }
 
-  const updatedComponentSpec = {
+  const updatedComponentSpec: ComponentSpec = {
     ...componentSpec,
     inputs: updatedInputs,
     outputs: updatedOutputs,
@@ -463,7 +528,13 @@ export const duplicateNodes = (
     updatedComponentSpec.implementation.graph = updatedGraphSpec;
   }
 
-  return { updatedComponentSpec, nodeIdMap, newNodes, updatedNodes };
+  /* Handle Flex Nodes */
+  let spec = updatedComponentSpec;
+  Object.values(newFlexNodes).forEach((newNodeData) => {
+    spec = updateFlexNodeInComponentSpec(spec, newNodeData);
+  });
+
+  return { updatedComponentSpec: spec, nodeIdMap, newNodes, updatedNodes };
 };
 
 function reconfigureConnections(
@@ -479,7 +550,7 @@ function reconfigureConnections(
   let newArgId = undefined;
   let isExternal = false;
 
-  if ("taskOutput" in argument) {
+  if (isTaskOutputArgument(argument)) {
     const oldTaskId = argument.taskOutput.taskId;
     oldNodeId = taskIdToNodeId(oldTaskId);
 
@@ -499,7 +570,7 @@ function reconfigureConnections(
     const newTaskId = nodeIdToTaskId(newNodeId);
 
     newArgId = newTaskId;
-  } else if ("graphInput" in argument) {
+  } else if (isGraphInputArgument(argument)) {
     const oldInputId = argument.graphInput.inputName;
     oldNodeId = inputNameToNodeId(oldInputId);
 
@@ -596,7 +667,7 @@ function updateTaskArgumentConnection(
   argument: TaskOutputArgument | GraphInputArgument,
   newArgId: string,
 ): TaskSpec {
-  if ("taskOutput" in argument) {
+  if (isTaskOutputArgument(argument)) {
     return {
       ...taskSpec,
       arguments: {
@@ -610,7 +681,7 @@ function updateTaskArgumentConnection(
         },
       },
     };
-  } else if ("graphInput" in argument) {
+  } else if (isGraphInputArgument(argument)) {
     return {
       ...taskSpec,
       arguments: {