Implement stable viewBox expansion and programmatic zoom API

[fronx]

Problem

The DotVisualization component recalculates the viewBox every time new data arrives using calculateViewBox. When new nodes extend beyond the previous bounds, this causes the view to jump, disrupting the user's zoom/pan state.

Key Understanding

1. The viewBox defines the SVG coordinate system
2. The d3 zoom transform defines the current zoom/pan inside that world
3. Changing the viewBox resets the coordinate system and disrupts continuity
4. In SVG, elements outside the viewBox are clipped (not visible)

Goal

• Keep expanding the viewBox as new dots arrive, but instead of jumping, smoothly animate a zoom-out so the screen-equivalent view remains continuous before zooming to reveal the new bounds
• Add programmatic zoom functionality (API methods) so that the component can be controlled without mouse gestures

Required Work

1. Implement stable viewBox expansion logic

• When new data extends beyond current bounds, expand the viewBox
• Calculate the exact d3 transform that preserves the previous screen state at the moment before expansion
• Animate smoothly to the new zoomed-out state where all nodes are visible

2. Expose a programmatic zoom API (via useImperativeHandle)

• zoomIn(factor?, center?)
• zoomOut(factor?, center?)
• zoomTo(scale, center?)
• panTo(x, y)
• fitToData()
• getZoomState()

Constraints

• The zoom animation must start at a state that is exactly screen-equivalent to the last rendered state (no visual jump)
• The solution should work with incremental graph updates where new nodes are continually added

Technical Approach

1. Stable ViewBox Management: Track stable viewBox separately, only expand when needed
2. Transform Preservation: When viewBox expands, calculate equivalent d3 transform to maintain screen position
3. Smooth Transitions: Use d3 transitions to animate between zoom states
4. API Exposure: Use useImperativeHandle to expose programmatic zoom methods

[fronx]

Current Status - First Iteration

Implemented:

• Stable viewBox expansion logic (utils: needsViewBoxExpansion, calculateExpandedViewBox, calculateCompensatingTransform)
• Pure utility function getStableViewBoxUpdate for consistent coordinate system handling
• Extracted applyTransform function for consistent zoom/pan application

Observed Behavior:
Initial state is discontinuous with trackpad zoom gestures. On first zoom in/out, there's an immediate jump to a different zoom level. After that initial jump, zoom gestures stay in sync and follow smoothly.

Technical Implementation:

• Initial load: viewBox is set via calculateViewBox, no transform applied
• Subsequent updates: stable expansion logic with compensating transforms applied
• First user gesture causes visual discontinuity, then behavior is smooth