Add interactive HTML viewer for overflow graphs

[marota]

Summary

This PR introduces a new interactive HTML viewer for visualizing overflow graphs. The viewer is self-contained (no external dependencies), embeds the Graphviz-rendered SVG directly, and provides client-side interactions including pan/zoom, node search, hover tooltips, click-to-highlight neighborhoods, and layer toggles by edge color/style.

Key Changes

• New module alphaDeesp/core/interactive_html.py: Implements the core functionality for building interactive HTML viewers

  • Parses Graphviz JSON output into a flat node/edge model with pre-computed adjacency maps for O(1) runtime lookups
  • Injects stable data-* attributes into SVG elements for JavaScript selectors and tooltips
  • Builds a layer index grouping edges by color (constrained, overflow, flow, inactive, etc.) and style (dotted, dashed, tapered)
  • Provides a self-contained HTML template with embedded CSS and ~150 lines of vanilla JavaScript
  • JavaScript features: native viewBox-based pan/zoom, hover tooltips, click-to-select with neighborhood highlighting, text search with filtering, and layer visibility toggles

• New test module alphaDeesp/tests/test_interactive_html.py: Comprehensive unit tests covering

  • Edge title parsing (directed/undirected, HTML-escaped)
  • Color-to-layer-key mapping with compound color support
  • Model extraction from Graphviz JSON (nodes, edges, adjacency)
  • Layer index generation and grouping
  • HTML output validation (self-contained, data attributes, embedded JSON model)

• Modified alphaDeesp/core/printer.py: Integrates the interactive HTML viewer into the existing graph export workflow

  • Generates an .html file alongside the existing .pdf output
  • Reuses the same Graphviz program (dot or neato) for consistency
  • Gracefully handles failures in HTML generation without breaking the PDF export

Implementation Details

• The viewer reuses Graphviz's exact SVG output (positions and bezier curves) and layers interactions on top via JavaScript
• The embedded data model is a flat structure with an adjacency map, enabling efficient neighborhood queries
• Layer definitions are semantic (e.g., "Constrained line", "Positive overflow") and map to the color/style palette used throughout the codebase
• The HTML file can be opened directly from disk without a web server or CDN
• All state is driven by CSS classes for efficient toggling and minimal JavaScript overhead

https://claude.ai/code/session_01Naz2FDUJbv9LUdvQ2EB4qE