Refactor GraphComponent.tsx

[krisette]

User Story: Refactor GraphComponent.tsx

Description

As a developer,
Given that the GraphComponent.tsx file has grown to 702 lines of code and become challenging to maintain,
I want to break down its functionality into smaller, more manageable components,
So that the code is easier to understand, maintain, and enhance in the future.

Parent Feature

• Refactor FE #62

Acceptance Criteria

• GraphComponent.tsx is refactored, reducing its size and complexity.
• Functionality is split into smaller, well-named components, each responsible for a specific piece of functionality.
• No functionality is lost or altered as a result of the refactoring.
• Code readability is significantly improved, making it easier for developers to understand and modify the component in the future.
• All existing tests pass, ensuring that the refactoring has not introduced any regressions.
• New tests are added if existing tests do not cover all functionality.

Definition of Done

• All acceptance criteria are met.
• Code is reviewed and approved by at least one other developer.
• The application builds successfully and behaves as expected.
• Any new components created as a result of the refactoring are documented, explaining their purpose and usage.
• Manual testing is performed to ensure all functionalities related to GraphComponent work as expected.