Repository: Significant-Gravitas/Auto-GPT
File: autogpt_platform/frontend/src/hooks/useAgentGraph.tsx (TypeScript)

Code before:
    if (newSavedAgent.version !== savedAgent?.version) {
      const path = new URLSearchParams(searchParams);
      path.set("flowID", newSavedAgent.id);
      path.set("flowVersion", newSavedAgent.version.toString());
      router.push(`${pathname}?${path.toString()}`);
    }

    // Update the node IDs on the frontend
    setSavedAgent(newSavedAgent);
    setXYNodes((prev) => {
      return newSavedAgent.nodes
        .map((backendNode) => {
          const key = `${backendNode.block_id}_${backendNode.metadata.position.x}_${backendNode.metadata.position.y}`;
          const frontendNodeID = blockIDToNodeIDMap[key];
          const frontendNode = prev.find((node) => node.id === frontendNodeID);

          const { position, ...metadata } = backendNode.metadata;
          return frontendNode
            ? ({
                ...frontendNode,
                position,
                data: {
                  ...frontendNode.data,
                  hardcodedValues: removeEmptyStringsAndNulls(
                    frontendNode.data.hardcodedValues,
                  ),
                  status: undefined,
                  backend_id: backendNode.id,
                  executionResults: [],
                  metadata,
                },
              } satisfies CustomNode)
            : _backendNodeToXYNode(backendNode, newSavedAgent); // fallback
        })
        .filter((node) => node !== null);
    });
    // Reset bead count
    setXYEdges((edges) => {
      return edges.map(
        (edge): CustomEdge => ({
          ...edge,
          data: {
            ...edge.data,
            edgeColor: edge.data?.edgeColor ?? "grey",
            beadUp: 0,
            beadDown: 0,
            beadData: new Map(),
          },
        }),
      );
    });

Review comment (suggestion):
Instead of *after* saving, I now do this *before* saving ([here](https://github.com/Significant-Gravitas/AutoGPT/pull/11145/files#diff-0ad1917a409dfebde02126122593f0fccab47c6ba44c7fb96336f69eceffbd70R599))

Code after:
    if (newSavedAgent.version !== savedAgent?.version) {
      const path = new URLSearchParams(searchParams);
      path.set("flowID", newSavedAgent.id);
      path.set("flowVersion", newSavedAgent.version.toString());
      router.push(`${pathname}?${path.toString()}`);
    }

    // Update the node IDs on the frontend
    setSavedAgent(newSavedAgent);

    setXYNodes((prev) =>
      newSavedAgent.nodes
        .map((backendNode) => {
          const key = `${backendNode.block_id}_${backendNode.metadata.position.x}_${backendNode.metadata.position.y}`;
          const frontendNodeID = blockIDToNodeIDMap[key];
          const frontendNode = prev.find((node) => node.id === frontendNodeID);

          const { position, ...metadata } = backendNode.metadata;
          return frontendNode
            ? ({
                ...frontendNode,
                position,
                data: {
                  ...frontendNode.data,
                  // NOTE: we don't update `node.id` because it would also require
                  //  updating many references in other places. Instead, we keep the
                  //  backend node ID in `node.data.backend_id`.
                  backend_id: backendNode.id,
                  metadata,

                  // Reset & close node output
                  isOutputOpen: false,
                  status: undefined,
                  executionResults: undefined,
                },
              } satisfies CustomNode)
            : _backendNodeToXYNode(backendNode, newSavedAgent); // fallback
        })
        .filter((node) => node !== null),
    );

    // Reset bead count
    setXYEdges((edges) =>
      edges.map(
        (edge): CustomEdge => ({
          ...edge,
          data: {
            ...edge.data,
            edgeColor: edge.data?.edgeColor ?? "grey",
            beadUp: 0,
            beadDown: 0,