update position on node

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -17,12 +17,14 @@ import ParameterComponent from "./components/parameterComponent";
 
 export default function GenericNode({
   data: olddata,
-  position,
+  xPos,
+  yPos,
   selected,
 }: {
   data: NodeDataType;
   selected: boolean;
-  position: XYPosition;
+  xPos: number;
+  yPos: number;
 }): JSX.Element {
   const [data, setData] = useState(olddata);
   const { updateFlow, flows, tabId } = useContext(TabsContext);
@@ -69,6 +71,7 @@ export default function GenericNode({
     <>
       <NodeToolbar>
         <NodeToolbarComponent
+          position={{ x: xPos, y: yPos }}
           data={data}
           setData={setData}
           deleteNode={deleteNode}

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -6,7 +6,7 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import { nodeToolbarPropsType } from "../../../../types/components";
 import { classNames } from "../../../../utils/utils";
-import { ungroupNode, updateFlowPosition } from "../../../../utils/reactflowUtils";
+import { expandGroupNode, ungroupNode, updateFlowPosition } from "../../../../utils/reactflowUtils";
 
 export default function NodeToolbarComponent({
   data,
@@ -129,9 +129,7 @@ export default function NodeToolbarComponent({
                 onClick={(event) => {
                   event.preventDefault();
                   updateFlowPosition(position,data.node?.flow!)
-                  ungroupNode(data, { edges: reactFlowInstance.getEdges(), 
-                    nodes: reactFlowInstance.getNodes(), 
-                    viewport: reactFlowInstance.getViewport() })
+                  expandGroupNode(data,reactFlowInstance)
                 }}
               >
                 <IconComponent name="Ungroup" className="h-4 w-4" />

src/frontend/src/types/flow/index.ts

@@ -49,4 +49,5 @@ export type targetHandleType = {
   type: string;
   fieldName: string;
   id: string;
+  proxy?:{field:string, id:string}
 };

src/frontend/src/utils/reactflowUtils.ts

@@ -13,6 +13,7 @@ import { specialCharsRegex } from "../constants/constants";
 import { APITemplateType, TemplateVariableType } from "../types/api";
 import {
   FlowType,
+  NodeDataType,
   NodeType,
   sourceHandleType,
   targetHandleType,
@@ -783,17 +784,18 @@ export function expandGroupNode(
   groupNode: NodeDataType,
   ReactFlowInstance: ReactFlowInstance,
 ) {
-  const {template} = groupNode.node
-  const {flow} = groupNode.node;
-  const gNodes = _.cloneDeep(flow.data.nodes);
-  const gEdges = flow.data.edges;
+  const {template} = groupNode.node!
+  const {flow} = groupNode.node!;
+  const gNodes = _.cloneDeep(flow!.data!.nodes);
+  const gEdges = flow!.data!.edges;
   //redirect edges to correct proxy node
   let updatedEdges: Edge[] = [];
   ReactFlowInstance.getEdges().forEach((edge) => {
     let newEdge = _.cloneDeep(edge);
     if (newEdge.target === groupNode.id) {
-      if (newEdge.targetHandle.split("|").length > 3) {
-        let type = newEdge.targetHandle.split("|")[0];
+      const targetHandle:targetHandleType = newEdge.data.targetHandle;
+      if (targetHandle.proxy) {
+        let type = targetHandle.type;
         let field = newEdge.targetHandle.split("|")[4];
         let proxy = newEdge.targetHandle.split("|")[3];
         let node = gNodes.find((n) => n.id === proxy);