Extract N-1 fetch and diagram highlights into custom hooks

[marota]

Summary

Refactored the App.tsx component by extracting two major concerns into dedicated custom hooks: useN1Fetch and useDiagramHighlights. This reduces App.tsx complexity while improving code organization and testability.

Key Changes

• New hook: useN1Fetch — Encapsulates the N-1 diagram fetch logic, including:

  • Fast svgPatch DOM-recycling path (clones N-state SVG and patches only changed elements)
  • Full /api/n1-diagram fallback for session restore or when patching is unavailable
  • Contingency-change confirmation dialog routing
  • Short-circuit logic to avoid redundant fetches

• New hook: useDiagramHighlights — Owns the per-tab SVG highlighting pipeline:

  • Per-tab Flow/Impacts view-mode state (detachedViewModes)
  • applyHighlightsForTab — DOM mutation pass for overload halos, contingency highlights, action-target halos, and delta visuals
  • Proper ordering of highlight operations (clone-based highlights before delta visuals)
  • Detached tab view-mode isolation with reattach cleanup

• New components:

  • AppSidebar — Left-sidebar layout shell with sticky summary strip
  • SidebarSummary — Compact sticky strip showing selected contingency and N-1 overloads
  • StatusToasts — Fixed-position status banners for errors and info messages

• Refactored ActionFeed:

  • Added onOverviewFiltersChange callback prop for shared filter state updates
  • Improved action type filtering with ActionTypeFilterChips component
  • Better separation of concerns between filter UI and filter logic

• Updated utilities:

  • Added DEFAULT_ACTION_OVERVIEW_FILTERS constant to actionTypes.ts
  • Enhanced getActionTargetLines logic in svgUtils for better combined action handling
  • Improved SVG source handling to support both string and DOM element types

• Test improvements:

  • Updated ActionFeed tests to use overviewFilters prop instead of internal state
  • Refactored action type filter tests to match new filter architecture
  • Added mock for actionPassesOverviewFilter in ActionFeed tests

Implementation Details

• The N-1 fetch hook preserves the session-restore contract by using restoringSessionRef to force full fetches when rehydrating analysis state
• Diagram highlights hook uses a ref-based approach to avoid setState-in-effect linting issues while preserving reattach-prune behavior
• SVG source now supports both string (from API) and DOM element (from svgPatch) types for flexible diagram handling
• App.tsx reduced from ~1000 to ~1150 lines (net increase due to new prop threading, but core logic extracted)

https://claude.ai/code/session_01B6mqrab2Pqjmr5AuLTNQxe