fix(ui): subworkflow port name updating (#889)

* fix subworkflow port name updating * fitView on canvas change
reearth · Feb 20, 2025 · b81f662 · b81f662
1 parent 0740888
commit b81f662
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 20 deletions.
diff --git a/ui/src/features/Editor/hooks.ts b/ui/src/features/Editor/hooks.ts
@@ -1,5 +1,5 @@
 import { useReactFlow } from "@xyflow/react";
-import { MouseEvent, useCallback, useMemo, useState } from "react";
+import { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
 import { useY } from "react-yjs";
 import { Array as YArray, UndoManager as YUndoManager } from "yjs";
 
@@ -47,6 +47,11 @@ export default ({
   const [selectedNodeIds, setSelectedNodeIds] = useState<string[]>([]);
   const [selectedEdgeIds, setSelectedEdgeIds] = useState<string[]>([]);
 
+  // TODO: If we split canvas more, or use refs, etc, this will become unnecessary @KaWaite
+  useEffect(() => {
+    fitView({ padding: 0.5 });
+  }, [currentWorkflowId, fitView]);
+
   const {
     canUndo,
     canRedo,

diff --git a/ui/src/features/PageWrapper/ProjectId.tsx b/ui/src/features/PageWrapper/ProjectId.tsx
@@ -29,8 +29,6 @@ const ProjectIdWrapper: React.FC<Props> = ({ children }) => {
     setCurrentProject(project);
   }, [project, currentProject, currentWorkspace, setCurrentProject]);
 
-  console.log("isloading", isLoading);
-
   return isLoading ? (
     <LoadingSplashscreen />
   ) : !project ? (

diff --git a/ui/src/features/PageWrapper/WorkspaceId.tsx b/ui/src/features/PageWrapper/WorkspaceId.tsx
@@ -26,8 +26,6 @@ const WorkspaceIdWrapper: React.FC<Props> = ({ children }) => {
     setCurrentWorkspace(workspace);
   }, [workspace, setCurrentWorkspace]);
 
-  console.log("isloading", isLoading);
-
   return isLoading ? (
     <LoadingSplashscreen />
   ) : !workspace ? (

diff --git a/ui/src/lib/yjs/useParentYWorkflow/removeParentYWorkflowNodePseudoPort.ts b/ui/src/lib/yjs/useParentYWorkflow/removeParentYWorkflowNodePseudoPort.ts
@@ -16,7 +16,9 @@ export function removeParentYWorkflowNodePseudoPort(
 
   const parentNodes = parentYNodes.toJSON() as Node[];
 
-  const subworkflowNode = parentNodes.find((n) => n.id === currentWorkflowId);
+  const subworkflowNode = parentNodes.find(
+    (n) => n.data.subworkflowId === currentWorkflowId,
+  );
   if (!subworkflowNode) return;
 
   const updatedSubworkflowNode: Node = { ...subworkflowNode };
@@ -33,7 +35,7 @@ export function removeParentYWorkflowNodePseudoPort(
 
     if (portToRemove) {
       removeEdgePort(
-        currentWorkflowId,
+        updatedSubworkflowNode.id,
         parentYWorkflow,
         portToRemove.portName,
         "target",
@@ -50,7 +52,7 @@ export function removeParentYWorkflowNodePseudoPort(
 
     if (portToRemove) {
       removeEdgePort(
-        currentWorkflowId,
+        updatedSubworkflowNode.id,
         parentYWorkflow,
         portToRemove.portName,
         "source",

diff --git a/ui/src/lib/yjs/useParentYWorkflow/updateParentYWorkflowEdges.ts b/ui/src/lib/yjs/useParentYWorkflow/updateParentYWorkflowEdges.ts
@@ -16,7 +16,7 @@ export function updateParentYWorkflowEdges(
 
   // Update the subworkflow node with the updated input/output
   const subworkflowParentNode = parentNodes.find(
-    (n) => n.id === currentWorkflowId,
+    (n) => n.data.subworkflowId === currentWorkflowId,
   );
   if (!subworkflowParentNode) return;
 
@@ -50,9 +50,9 @@ export function updateParentYWorkflowEdges(
     const edgeIndex = Array.from(parentYEdges).findIndex((e) => {
       const edgeObj = reassembleEdge(e as YEdge);
       return edgeType === "source"
-        ? edgeObj.source === currentWorkflowId &&
+        ? edgeObj.source === subworkflowParentNode.id &&
             edgeObj.sourceHandle === prevPseudoPort.portName
-        : edgeObj.target === currentWorkflowId &&
+        : edgeObj.target === subworkflowParentNode.id &&
             edgeObj.targetHandle === prevPseudoPort.portName;
     });
 
@@ -77,7 +77,7 @@ export function updateParentYWorkflowEdges(
 }
 
 export function removeEdgePort(
-  currentWorkflowId: string,
+  nodeId: string,
   parentYWorkflow: YWorkflow,
   portName: string,
   type: "source" | "target",
@@ -91,14 +91,10 @@ export function removeEdgePort(
     const updatedEdges = edgesArray.filter((edgeObj) => {
       if (type === "source") {
         return !(
-          edgeObj.source === currentWorkflowId &&
-          edgeObj.sourceHandle === portName
+          edgeObj.source === nodeId && edgeObj.sourceHandle === portName
         );
       }
-      return !(
-        edgeObj.target === currentWorkflowId &&
-        edgeObj.targetHandle === portName
-      );
+      return !(edgeObj.target === nodeId && edgeObj.targetHandle === portName);
     });
 
     const newYEdges = updatedEdges.map((edgeObj) => yEdgeConstructor(edgeObj));

diff --git a/ui/src/lib/yjs/useParentYWorkflow/updateParentYWorkflowNode.ts b/ui/src/lib/yjs/useParentYWorkflow/updateParentYWorkflowNode.ts
@@ -15,7 +15,7 @@ export function updateParentYWorkflowNode(
 
   // Update the subworkflow node with the updated input/output
   const parentNodeIndex = parentNodes.findIndex(
-    (n) => n.id === currentWorkflowId,
+    (n) => n.data.subworkflowId === currentWorkflowId,
   );
   const subworkflowParentNode = parentNodes[parentNodeIndex];
 

diff --git a/ui/src/lib/yjs/useYNode.ts b/ui/src/lib/yjs/useYNode.ts
@@ -196,7 +196,9 @@ export default ({
 
           const parentWorkflowIndex = rawWorkflows.findIndex((w) => {
             const nodes = w.nodes as Node[];
-            return nodes.some((n) => n.id === currentWorkflowId);
+            return nodes.some(
+              (n) => n.data.subworkflowId === currentWorkflowId,
+            );
           });
           const parentYWorkflow = yWorkflows.get(parentWorkflowIndex);