Task 3: Implement custom bidirectional edge rendering

[Gauhar-1]

Task 3

Problem: The initial graph rendering caused bidirectional edges between two nodes to overlap. This made their labels unreadable and the connections unclear.

Solution: This PR introduces a custom React Flow edge component that completely resolves the rendering issue. The solution is implemented as follows:

  Bidirectional Pair Detection: Implemented logic in the ReactFlowService to automatically detect pairs of edges that connect the same two nodes in opposite directions.

  Custom Edge Component (BidirectionalEdge.tsx): Created a new, dedicated component to handle the rendering for these specific edges.

  Dynamic Path Offsetting: The component uses a direction flag (1 or -1) to calculate a geometric offset, rendering two distinct, parallel Bezier curves instead of a single overlapping one.

  Precise Label Placement: The label for each edge is now positioned exactly halfway between the source node and the peak of its curve. This places the label on the first half of the edge path, ensuring it is always clearly visible and does not overlap with other elements.

All constraints from the task description have been met: the edge type remains curved, labels are always visible, and they stay perfectly aligned when nodes are moved.

Visuals:

Before:

After:

Task 4

## Task 4: Hierarchical Graph Arrangement Algorithm

This section details the implementation of a hierarchical layout algorithm to create a clear and intuitive visualization for the codebase graph.

Deliverable 1: A function/service that arranges the graph (core/graph-format.service.ts)

• Algorithm: The service uses the Dagre.js library to calculate a top-down (rankdir: 'TB') hierarchical layout.
• Custom Logic: I've enabled Dagre's compound feature and used the setParent() function. This creates a true nested structure where child nodes (like GraphNode and C2Subcategory) are mathematically positioned inside their parent containers (C1Output).
• Clarity: The layout is configured with nodesep and ranksep to ensure the graph is well-spaced and free of congestion. All manual positioning logic has been removed to let the algorithm produce the optimal arrangement.

Deliverable 2: A visualization that makes the codebase structure intuitive (core/react-flow.service.ts)

• Visual Nesting: The ReactFlowService has been updated to render C1 and C2 nodes with type: 'group'. This draws them as visible "boxes" or containers.
• Intuitive Design: The final visualization now clearly shows each C1 category in its own box, with its contents physically inside it, fulfilling the core requirement of a clean and easy-to-follow graph.