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

Code before:
import { useCallback } from "react";
import { Node, Edge, useReactFlow, useViewport } from "@xyflow/react";

export function useCopyPaste(getNextNodeId: () => string) {
  const { setNodes, addEdges, getNodes, getEdges } = useReactFlow();
  const { x, y, zoom } = useViewport();

  const handleCopyPaste = useCallback(
    (event: KeyboardEvent) => {
      if (event.ctrlKey || event.metaKey) {
        if (event.key === "c" || event.key === "C") {
          const selectedNodes = getNodes().filter((node) => node.selected);
          const selectedNodeIds = new Set(selectedNodes.map(node => node.id));
          
          // Only copy edges where both source and target nodes are selected
          const selectedEdges = getEdges().filter((edge) => 
            edge.selected && 
            selectedNodeIds.has(edge.source) && 
            selectedNodeIds.has(edge.target)
          );

          const copiedData = {
            nodes: selectedNodes.map((node) => ({
              ...node,
              data: {
                ...node.data,
                connections: node.data.connections || [], // Preserve connections
              },
            })),
            edges: selectedEdges,
          };

          localStorage.setItem("copiedFlowData", JSON.stringify(copiedData));
        }
        if (event.key === "v" || event.key === "V") {
          const copiedDataString = localStorage.getItem("copiedFlowData");
          if (copiedDataString) {
            const copiedData = JSON.parse(copiedDataString);

Review comment (performance):
did you happen to test this with a large graph? Just wondering if we'll see any performance issues with huge graphs?

Code after:
import { useCallback } from "react";
import { Node, Edge, useReactFlow, useViewport } from "@xyflow/react";

export function useCopyPaste(getNextNodeId: () => string) {
  const { setNodes, addEdges, getNodes, getEdges } = useReactFlow();
  const { x, y, zoom } = useViewport();

  const handleCopyPaste = useCallback(
    (event: KeyboardEvent) => {
      if (event.ctrlKey || event.metaKey) {
        if (event.key === "c" || event.key === "C") {
          const selectedNodes = getNodes().filter((node) => node.selected);
          const selectedNodeIds = new Set(selectedNodes.map((node) => node.id));

          // Only copy edges where both source and target nodes are selected
          const selectedEdges = getEdges().filter(
            (edge) =>
              edge.selected &&
              selectedNodeIds.has(edge.source) &&
              selectedNodeIds.has(edge.target),
          );

          const copiedData = {
            nodes: selectedNodes.map((node) => ({
              ...node,
              data: {
                ...node.data,
                connections: node.data.connections || [], // Preserve connections
              },
            })),
            edges: selectedEdges,
          };

          localStorage.setItem("copiedFlowData", JSON.stringify(copiedData));
        }
        if (event.key === "v" || event.key === "V") {
          const copiedDataString = localStorage.getItem("copiedFlowData");
          if (copiedDataString) {