Bugfix/contact network visualization

[SagiEv]

🚀 Feature: Network Graph Enhancements & Interactivity

📖 Description

This Pull Request significantly upgrades the Network Edge map view, focusing on improved visualization, reliable collision handling, and deep interactivity. The changes address node rendering limitations, introduce intuitive click actions, and ensure the entire graph always scales perfectly to the user's screen.

✨ Key Features & Enhancements

1. Auto-Scaling & Layout Pre-calculation

• Fit-to-Screen: The physics simulation now silently fast-forwards through 300 ticks in the background to pre-calculate the final layout. The viewport mathematically calculates the graph's dimensions and sets an initial zoom scale, perfectly framing all nodes on the screen upon load.
• Organic Settling: After the initial zoom frame is applied, the physics engine restarts at a low alpha, keeping the organic, floating node effect and allowing interactive dragging.

2. Deep Node Interactivity

• Smart Click Detection: Implemented D3 event.defaultPrevented checks to cleanly differentiate between a user dragging a node (to play with physics) and a deliberate, short click.
• Company Navigation: Clicking a Company node automatically searches for a related careers link. If one exists, it seamlessly opens in a new tab. If missing, it displays a non-intrusive native Toast notification.
• Contact Details Modal: Clicking a Contact node opens a sleek overlay modal rendering the detailed Contact Card (mirroring the grid view). Users can edit or delete contacts directly from this modal on the map view.

3. Visual & State Refinements

• Proportional Company Sizing: Company node sizes are dynamically calculated using a normalized square root scale based on their total connection count (ranging from 32px to 80px).
• Contextual UI: Search and filtering bars are now conditionally hidden when toggled to the Map View, keeping the visual real estate focused strictly on the network layout.

🐛 Bug Fixes

• Global ID Collision: Implemented a robust ID prefixing system (contact-[id], connector-[name], company-[name]) to prevent identical names (e.g., "Mom") from merging into single, incorrectly linked nodes.
• JSDOM Test Failures: Fixed a d3-zoom crash occurring in headless test environments (which lack full SVG DOM support) by explicitly defining the .extent() parameter in the zoom configuration.
• Test Context Isolation: Updated NetworkGraph.test.jsx to correctly mock the useToast context, ensuring clean test passes.

🧪 Verification

• Verified npm run lint completes with zero warnings or errors.
• Verified npm run test passes (38/38 tests successfully passing).
• Tested scaling limits with large and small datasets.
• Tested all click/drag combinations manually.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
job-pilot	Ready	Preview	Sep 19, 2026 4:50pm UTC