fix(ui): handling for invalid edges when loading workflows

Previously, reactflow appears to have handled an edge case when using its `applyChanges` utility. If a change was provided without an item, it would skip that change. For example, an "add edge" change that somehow passed `null` as the edge, instead of a valid edge.

In our workflow loading and validation logic, invalid edges were removed from the array using `delete edges[i]`. This left "holes" in the array of edges. We then asked `reactflow` to add these edges to state. When it encountered one of the "holes", it skipped over it.

In a recent release (unsure which, somewhere between the latest v11 and ~v12.4) this seems to have changed. It no longer skips over the "holes" and instead trusts the data. This can cause a couple issues:
- Error when loading the workflow if `reactflow` attempt to do anything with the nonexistent edge.
- If somehow the workflow makes it into state with "holes" in the array of edges, all sorts of other stuff breaks when our code does anything with the nonexistent edge.

Two-part fix:
- Update the invalid edge handling to not use `delete edges[i]`. Instead, as we check each edge, we add invalid ones to a set. Then, after all the checks are finished, filter out the invalid edges. The resultant edges array has no holes.
- Simplify the logic around setting nodes and edges in redux. Previously we were using `reactflow`'s `applyChanges` utils, but this does literally nothing except take extra CPU cycles. We can simply set the loaded nodes and edges directly in redux. Perhaps we were using `applyChanges` because it addressed the "holes" issue? Not sure. But we don't need it now.

Closes #7868

invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts

@@ -470,31 +470,8 @@ export const nodesSlice = createSlice({
     builder.addCase(workflowLoaded, (state, action) => {
       const { nodes, edges } = action.payload;
 
-      const changes: NodeChange<AnyNode>[] = [];
-      for (const node of nodes) {
-        if (node.type === 'notes') {
-          changes.push({
-            type: 'add',
-            item: {
-              ...SHARED_NODE_PROPERTIES,
-              ...node,
-            },
-          });
-        } else if (node.type === 'invocation') {
-          changes.push({
-            type: 'add',
-            item: {
-              ...SHARED_NODE_PROPERTIES,
-              ...node,
-            },
-          });
-        }
-      }
-      state.nodes = applyNodeChanges<AnyNode>(changes, []);
-      state.edges = applyEdgeChanges(
-        edges.map((edge) => ({ type: 'add', item: edge })),
-        []
-      );
+      state.nodes = nodes.map((node) => ({ ...SHARED_NODE_PROPERTIES, ...node }));
+      state.edges = edges;
     });
   },
 });

invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.ts

@@ -148,7 +148,11 @@ export const validateWorkflow = async (args: ValidateWorkflowArgs): Promise<Vali
       }
     }
   }
-  edges.forEach((edge, i) => {
+
+  // Stash invalid edges here to be deleted later
+  const edgesToDelete = new Set<string>();
+
+  for (const edge of edges) {
     // Validate each edge. If the edge is invalid, we must remove it to prevent runtime errors with reactflow.
     const sourceNode = nodes.find(({ id }) => id === edge.source);
     const targetNode = nodes.find(({ id }) => id === edge.target);
@@ -215,8 +219,7 @@ export const validateWorkflow = async (args: ValidateWorkflowArgs): Promise<Vali
     }
 
     if (issues.length) {
-      // This edge has some issues. Remove it.
-      delete edges[i];
+      edgesToDelete.add(edge.id);
       const source = edge.type === 'default' ? `${edge.source}.${edge.sourceHandle}` : edge.source;
       const target = edge.type === 'default' ? `${edge.source}.${edge.targetHandle}` : edge.target;
       warnings.push({
@@ -225,7 +228,10 @@ export const validateWorkflow = async (args: ValidateWorkflowArgs): Promise<Vali
         data: edge,
       });
     }
-  });
+  }
+
+  // Remove invalid edges
+  _workflow.edges = edges.filter(({ id }) => !edgesToDelete.has(id));
 
   // Migrated exposed fields to form elements if they exist and the form does not
   // Note: If the form is invalid per its zod schema, it will be reset to a default, empty form!