Replace KHI Window System with Golden-Layout

[kyasbal]

Description

The current window/pane system in KHI is built on a custom ResizingCalculator and SidePaneComponent within AppComponent. While functional, it is limited to a fixed set of panels (Timeline, Logs, History) with restricted resizing capabilities (horizontal only) and no support for complex layouts like tabs, vertical splits, or popping windows out.

To improve the user experience and flexibility, we should replace this custom implementation with Golden-Layout, a robust window management library.

Motivation

• Flexibility: Users can arrange views (Timeline, Logs, Graph, etc.) functionality according to their workflow (e.g., side-by-side logs, vertical timelines).
• Tabs: Support multiple views of the same type or grouping different views.
• Popouts: Native support for popping windows into new browser windows (useful for multi-monitor setups).
• Maintainability: Offload complex resizing/docking logic to a maintained library instead of our custom ResizingCalculator.

Current State Analysis

• Main Controller: web/src/app/pages/main/main.component.ts (AppComponent) currently manages the layout.
• Layout Logic: web/src/app/common/resizable-pane/resizing-calculator.ts handles manual pixel calculations.
• Components:
  • TimelineComponent: Main view, fixed at the left/center.
  • LogViewComponent: Right side pane.
  • DiffViewComponent (History): Right side pane.
  • SidePaneComponent: Wrapper for collapsible panes.

Proposed Changes

1. Dependency Integration

• Add golden-layout (v2+) to the project.
• Ensure generic stylesheet definitions are imported.

2. Angular Integration (LayoutAdapter)

• Create a LayoutManagerService or LayoutComponent that initializes the Golden-Layout instance.
• Since Angular components need to be rendered inside Golden-Layout containers, we need a bridge (ComponentFactoryResolver is deprecated, so usage of ViewContainerRef and ComponentRef will be needed to inject Angular components into GL slots).
• Target Components to Register:
  • TimelineComponent
  • LogViewComponent
  • DiffViewComponent
  • ArchitectureGraphComponent (Currently a separate page, should be a dockable panel!)

3. Replace AppComponent Layout

• Remove ResizingCalculator and main-view-wrapper custom CSS.
• Replace the template of AppComponent with the Golden-Layout container.
• Implement a default layout configuration:
  • Row:
    • Column (70%): TimelineComponent
    • Stack (30%):
      • LogViewComponent
      • DiffViewComponent (History)

4. Graph View Integration

• The /session/:id/graph route could potentially be deprecated or redirected to a layout configuration where the Graph is maximized.
• Register ArchitectureGraphComponent as a panel type, allowing users to open the graph alongside the timeline.

Implementation Tasks

• Install golden-layout package.
• Create LayoutWrapperComponent (or similar) to handle GL initialization and component binding.
• Refactor TimelineComponent, LogViewComponent, etc., to handle resize events from GL (if they rely on window resize, they might need ResizeObserver or GL callbacks).
• Remove ResizingCalculator and SidePaneComponent.
• Define and implement the default JSON configuration for the initial layout.
• Verify Popout functionality works (ensure styles/scripts are loaded in popouts).

Migration

• This is a breaking change for the UI structure.
• SidePaneComponent usages will be removed.
• Tests relying on specific DOM structure of the main split panes will need updates.