[FEATURE] Component Optimization – Refactor & Performance Improvements

[btwshivam]

Problem or Use Case

The TreeViewComponent.tsx is currently around ~2500 lines long, which makes it difficult to maintain, test, and scale. This issue aims to break it into smaller focused components and apply key React optimizations for performance and clarity.

Proposed Solution

Tasks

1. Refactor TreeViewComponent.tsx into subcomponents:

   • TreeViewHeader
   • TreeViewFilters
   • TreeViewNodes
   • TreeViewEdges
   • NodeDetailsPanel

2. Optimize Rendering:

   • Apply React.memo() to pure, stateless components
   • Use useCallback for event handlers
   • Use useMemo for expensive computed values

3. Improve Code Patterns:

   • Convert imperative logic to declarative patterns where applicable
   • Improve readability and structure for better developer experience

---

Acceptance Criteria

• TreeViewComponent.tsx is successfully modularized into 5+ smaller components
• No regression in UI or logic after refactoring
• Memory usage is reduced during heavy interactions
• Code is easier to navigate, test, and maintain

Are you willing to contribute?

• Yes, I'd like to help implement this feature.

Additional Context

No response

[GauravDeshmukh0909]

i would like to work on this

[btwshivam]

@GauravDeshmukh0909 Go ahead!