Improve visualization UX: focus mode, zoom controls, and bug fixes

[pietrocious]

Summary

This PR enhances the network topology and IaC visualizers with improved interaction patterns, better zoom handling, and several bug fixes. The changes focus on making the visualizations more intuitive and responsive to user input.

Key Changes

Focus Mode & Visual Hierarchy

• Added "focus mode" that spotlights selected/hovered nodes and their direct neighbors by dimming everything else (80% opacity reduction)
• Applies to both network topology and IaC visualizers
• Helps users understand relationships in complex diagrams

Zoom & Pan Improvements

• Pinch zoom now zooms toward the pinch midpoint instead of canvas center, matching user expectations
• Added zoom reset functionality (keyboard shortcut 0 or click zoom display)
• Fixed canvas DPR scaling: removed persistent ctx.scale(dpr, dpr) that was causing coordinate mismatches; now applied only in render() where needed
• Zoom level display now clickable to reset to 100%

Keyboard & Input Handling

• Added Escape key to deselect current selection
• Improved keyboard shortcut detection to avoid triggering when typing in text fields
• Better distinction between typing context and canvas interaction

Network Topology Parsing

• Fixed wireless device detection: changed from simple substring match to regex pattern /(^|-)ap(\d|-|$)/ to avoid false positives (e.g., "api-server" no longer classified as wireless)
• Improved LLDP header parsing: now correctly extracts full device names from headers like # LLDP Neighbors - CORE-SW-01
• Added link deduplication: prevents duplicate links when both ends of a connection report each other
• Inferred link types from capability codes: routed (R), access (S/H), or trunk (default)
• Port labels now hidden when zoomed out (< 0.6x) to reduce clutter

IaC Visualizer Enhancements

• Added more AWS resource types to documentation (NAT gateway, route table, Lambda, DynamoDB, RDS)
• Added Kubernetes StatefulSet and DaemonSet support
• Improved hover tooltip fallback text to show resource type and name

Layout Persistence

• Live editing now preserves node/device positions across re-parses instead of scattering them
• Only new nodes/devices enter on the circle; existing ones maintain their positions
• Selection and hover state properly re-pointed to fresh objects after re-parse

HTML Escaping

• Added escapeHtml() utility function to both visualizers to prevent XSS vulnerabilities
• Applied to all user-facing text rendering

Minimap Improvements

• Minimap viewport rectangle now clipped to minimap bounds (no overflow)
• Added hit-test geometry tracking for future interaction improvements
• Minimap now properly hidden when fewer than 5 devices/nodes

Bug Fixes

• Fixed tooltip positioning to clamp inside canvas bounds and flip below node if no room above
• Fixed empty state text rendering to properly apply DPR scaling
• Improved motion preference listener lifecycle management (stored references for proper cleanup)
• Fixed device/node selection re-pointing after template loads

Testing

• Added comprehensive test suites for both visualizers
• Tests cover format detection, parsing, device classification, and link inference
• Validates deduplication, reference resolution, and error handling

Notable Implementation Details

• Focus mode uses a Set<string> to track which nodes should be highlighted, computed once per frame
• Zoom reset maintains canvas center position while resetting zoom to 1.0
• DPR scaling now handled consistently: canvas width/height set in physical pixels, render() applies scale, no persistent transform
• Motion preference listener properly stored to allow cleanup if needed in future

https://claude.ai/code/session_01PhTWYnY47DgEN3TtYgw93w

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
pietrouni-com	Ready	Preview, Comment	Jul 5, 2026 1:05pm

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 767a7ae4cf

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Preserve colon-separated LLDP headers

For LLDP dumps grouped with the previously supported comment form # LLDP Neighbors: CORE-SW-01 or # Device: CORE-SW-01, this regex no longer strips the label because it only recognizes separators that have whitespace before :/-. In that case currentLocalDevice becomes a bogus ID like LLDP-NEIGHBORS:-CORE-SW-01, so the topology gets extra local devices and reverse-link deduplication no longer matches the real neighbor IDs; please keep accepting :/- immediately after the header label.

Useful? React with 👍 / 👎.