feat(frontend): Center initial canvas

[majdyz]

Opening an existing graph always results in opening the graph in an awkward position, e.g.: the graph located in the bottom right of the screen.

Changes 🏗️

Points the viewport to the centroid of the nodes, on the initial loading of the nodes.

vs

Checklist 📋

For code changes:

• I have clearly listed my changes in the PR description
• I have made a test plan
• I have tested my changes according to the test plan:
  • ...

Example test plan

• Create from scratch and execute an agent with at least 3 blocks
• Import an agent from file upload, and confirm it executes correctly
• Upload agent to marketplace
• Import an agent from marketplace and confirm it executes correctly
• Edit an agent from monitor, and confirm it executes correctly

For configuration changes:

• .env.example is updated or already compatible with my changes
• docker-compose.yml is updated or already compatible with my changes
• I have included a list of my configuration changes in the PR description (under Changes)

Examples of configuration changes

• Changing ports
• Adding new services that need to communicate with each other
• Secrets or environment variable changes
• New or infrastructure changes such as databases

[qodo-merge-pro]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Edge Cases The centering logic assumes all nodes have same width/height of 100px. This may cause incorrect centering if nodes have different sizes. Performance The useEffect hook runs on every nodes change. Consider adding a debounce to prevent too frequent viewport updates.

[netlify]

✅ Deploy Preview for auto-gpt-docs ready!

Name	Link
🔨 Latest commit	aa3c5db
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs/deploys/6734e9d91b95c100082675e8
😎 Deploy Preview	https://deploy-preview-8644--auto-gpt-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for auto-gpt-docs canceled.

Name	Link
🔨 Latest commit	b57e2f5
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs/deploys/6735bcf7d850450007be1209

[Torantulino]

Thank you!