Display controls and interfaces when viewing an architecture (for pattern)

[rocketstack-matt]

Feature Proposal

Target Project:

calm-hub-ui - The web interface for CALM architectural diagrams and processing

Description of Feature:

Enhance the calm-hub visualization to visually indicate controls and interfaces specified on nodes, relationships or at the architecture level, and display detailed information about these elements when the related element is selected. This feature will make controls and interfaces more visible and accessible in the architectural visualization, improving the understanding of governance, compliance, and connectivity aspects of the architecture.

User Stories:

• As an architect, I want to visually identify which components have controls applied so that I can quickly assess the governance coverage of my architecture.
• As a compliance officer, I want to view control details when selecting a component so that I can verify compliance requirements are properly implemented.
• As a developer, I want to see interface specifications when selecting connections between components so that I can understand the technical implementation requirements.
• As a domain architect, I want to filter the visualization based on specific controls or interfaces so that I can focus on particular aspects of governance or connectivity.
• As a technical reviewer, I want to easily identify missing controls or interfaces so that I can provide feedback on architectural gaps.

Current Limitations:

Currently, the calm-hub visualization doesn't provide visual indication of controls and interfaces applied to architectural components:

1. No visual indicators showing which nodes or relationships have controls applied
2. No visual indicators for interfaces on nodes or relationships
3. Control and interface details aren't readily accessible when selecting components
4. Unable to filter or highlight components based on control or interface characteristics
5. Difficult to get a holistic view of control coverage across the architecture
6. No way to visually identify control or interface gaps

Proposed Implementation:

Technical Design:

1. Visual Indicators for Controls and Interfaces

   • Small badges or icons on nodes/relationships that have controls applied
   • Different visual indicators for different types of controls (security, compliance, performance, etc.)
   • Visual distinction for nodes with interfaces defined
   • Hover tooltips showing summary of applied controls/interfaces

2. Enhanced Detail Panel

   • When selecting a node or relationship, show controls and interfaces in the detail panel
   • Organized, collapsible sections for different control categories
   • Interactive elements to expand/view complete control details
   • Links to related control requirements and configurations

3. Filtering and Highlighting

   • Filter options to show only components with specific controls/interfaces
   • Highlighting capability to emphasize components with particular control types
   • Search functionality within controls and interfaces
   • Ability to toggle visibility of control indicators

4. Coverage Analysis View

   • Summary view showing overall control coverage statistics
   • Visual heatmap indicating control density across the architecture
   • Identification of components lacking recommended controls
   • Compliance score or metrics based on control implementation

UI Changes:

• New icon system for representing different control and interface types
• Enhanced node/relationship rendering to include control/interface indicators
• Updated detail panel with dedicated sections for controls and interfaces
• New filtering controls in the visualization toolbar
• New coverage analysis panel or view

Alternatives Considered:

1. Separate controls/interfaces view - Rejected because integrated indicators provide better context
2. Completely separate panel for controls - Rejected in favor of integrated detail panel for better user experience

Testing Strategy:

• Unit tests: Test rendering of control and interface indicators
• Integration tests: Test detail panel display of control and interface data

Implementation Checklist:

• [ ] Design visual indicator system for controls and interfaces
• [ ] Design enhancements to detail panel
• [ ] Design reviewed and approved
• [ ] Implement visual indicators on nodes and relationships
• [ ] Implement enhanced detail panel
• [ ] Implement filtering and highlighting capabilities
• [ ] Implement coverage analysis view
• [ ] Tests written and passing
• [ ] Documentation updated
• [ ] Performance optimized for complex visualizations