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

Code before:
      // What we are going to do??
      // Calculate a position to the right of the newly added block, allowing for some margin.
      // If adding to the right side causes the new block to collide with an existing block, attempt to place it at the bottom or left.
      // Why not the top? Because the height of the new block is unknown.
      // If it still collides, run a loop to find the best position where it does not collide.
      // Then, adjust the canvas to center on the newly added block.
      // Note: The width is known, e.g., w = 300px for a note and w = 500px for others, but the height is dynamic.

      // We could also use D3 force, Intersection for this

      let viewportCoordinates;
      // we will get all the dimension of nodes, then store
      if (nodeDimensions && Object.keys(nodeDimensions).length > 0) {
        viewportCoordinates = findNewlyAddedBlockCoordinates(
          nodeDimensions,
          (nodeSchema.uiType == BlockUIType.NOTE ? 300 : 500) / zoom,
          60 / zoom,
          zoom,
        );
      } else {
        // Calculate the center of the viewport considering zoom
        viewportCoordinates = {
          x: (window.innerWidth / 2 - x) / zoom,
          y: (window.innerHeight / 2 - y) / zoom,
        };
      }

      const newNode: CustomNode = {
        id: nodeId.toString(),
        type: "custom",
        position: viewportCoordinates, // Set the position to the calculated viewport center
        data: {
          blockType: nodeType,
          blockCosts: nodeSchema.costs,
          title: `${nodeType} ${nodeId}`,
          description: nodeSchema.description,
          categories: nodeSchema.categories,
          inputSchema: nodeSchema.inputSchema,
          outputSchema: nodeSchema.outputSchema,
          hardcodedValues: {},
          connections: [],
          isOutputOpen: false,
          block_id: blockId,
          isOutputStatic: nodeSchema.staticOutput,
          uiType: nodeSchema.uiType,
        },
      };

      addNodes(newNode);
      setNodeId((prevId) => prevId + 1);
      clearNodesStatusAndOutput(); // Clear status and output when a new node is added

Review comment (suggestion):
small nit: we can keep `viewportCoordinates` a const (since we should not modify it) by using the ternary operator.
```suggestion
      const viewportCoordinates =
        nodeDimensions && Object.keys(nodeDimensions).length > 0
          ? // we will get all the dimension of nodes, then store
            findNewlyAddedBlockCoordinates(
              nodeDimensions,
              (nodeSchema.uiType == BlockUIType.NOTE ? 300 : 500) / zoom,
              60 / zoom,
              zoom,
            )
          : // we will get all the dimension of nodes, then store
            {
              x: (window.innerWidth / 2 - x) / zoom,
              y: (window.innerHeight / 2 - y) / zoom,
            };
```

Code after:
      /*
       Calculate a position to the right of the newly added block, allowing for some margin.
       If adding to the right side causes the new block to collide with an existing block, attempt to place it at the bottom or left.
       Why not the top? Because the height of the new block is unknown.
       If it still collides, run a loop to find the best position where it does not collide.
       Then, adjust the canvas to center on the newly added block.
       Note: The width is known, e.g., w = 300px for a note and w = 500px for others, but the height is dynamic.
       */

      // Alternative: We could also use D3 force, Intersection for this (React flow Pro examples)

      const viewportCoordinates =
        nodeDimensions && Object.keys(nodeDimensions).length > 0
          ? // we will get all the dimension of nodes, then store
            findNewlyAddedBlockCoordinates(
              nodeDimensions,
              (nodeSchema.uiType == BlockUIType.NOTE ? 300 : 500) / zoom,
              60 / zoom,
              zoom,
            )
          : // we will get all the dimension of nodes, then store
            {
              x: (window.innerWidth / 2 - x) / zoom,
              y: (window.innerHeight / 2 - y) / zoom,
            };

      const newNode: CustomNode = {
        id: nodeId.toString(),
        type: "custom",
        position: viewportCoordinates, // Set the position to the calculated viewport center
        data: {
          blockType: nodeType,
          blockCosts: nodeSchema.costs,
          title: `${nodeType} ${nodeId}`,
          description: nodeSchema.description,
          categories: nodeSchema.categories,
          inputSchema: nodeSchema.inputSchema,
          outputSchema: nodeSchema.outputSchema,
          hardcodedValues: {},
          connections: [],
          isOutputOpen: false,
          block_id: blockId,
          isOutputStatic: nodeSchema.staticOutput,
          uiType: nodeSchema.uiType,
        },
      };

      addNodes(newNode);
      setNodeId((prevId) => prevId + 1);
      clearNodesStatusAndOutput(); // Clear status and output when a new node is added