Additional infomation panel

[bedwards-ibm]

📋 Add Additional Information Panel with Markdown Support

Summary

Implements a draggable, minimizable panel on the inference map screen that displays markdown-formatted content from an additional_information field in API payloads. Supports both inference-level and layer-level information with tab-based navigation.

Features Added

1. Additional Information Panel Component

New web component additional-info-panel.js with:

• Draggable positioning with boundary constraints
• Minimize/expand functionality
• Close button
• Tab navigation (Inference Info / Layer Info)
• Markdown rendering with syntax highlighting
• Secure HTML sanitization via DOMPurify
• Responsive design with Carbon Design System styling

2. Markdown Support

• Uses marked.js for markdown parsing
• Supports: headers, bold/italic, lists, links, code blocks, tables, blockquotes, images
• Syntax highlighting for code blocks
• XSS protection via DOMPurify sanitization

3. Dual Content Sources

• Inference-level info: General information about the inference/dataset
• Layer-level info: Specific information per layer with automatic tab creation

4. Persistent State

• Panel position saved to localStorage
• Minimized state persisted across sessions
• Auto-shows when additional_information exists in API response

Technical Implementation

New Files:

• app/js/components/inference/additional-info-panel.js - Main component (703 lines)
• app/js/components/inference/additional-info-panel.test.js - Unit tests
• cypress/e2e/inference-page/additional-info-panel.cy.js - E2E tests
• docs/ADDITIONAL_INFO_PANEL_README.md - User documentation
• docs/ADDITIONAL_INFO_API_EXAMPLES.md - API examples
• ADDITIONAL_INFO_PANEL_PLAN.md - Implementation plan

Modified Files:

• package.json - Added marked (^11.2.0) and dompurify (^3.0.9) dependencies
• app/js/pages/inference-page.js - Integrated panel component

API Requirements

Backend APIs should include additional_information field in responses:

Inference-level:

{
  "inference_id": "inf_001",
  "additional_information": {
    "title": "Dataset Overview",
    "content": "# Welcome\n\nThis is **markdown** content..."
  }
}

Layer-level:

{
  "layers": [
    {
      "layer_id": "layer_001",
      "display_name": "Temperature",
      "additional_information": {
        "title": "Temperature Data",
        "content": "## About\n\nTemperature measurements..."
      }
    }
  ]
}

See docs/ADDITIONAL_INFO_API_EXAMPLES.md for complete examples.

User Experience

1. Auto-display: Panel appears automatically when additional_information exists
2. Tab Navigation: Switch between inference and layer-specific information
3. Drag & Position: Drag panel anywhere within viewport, position persists
4. Minimize: Collapse to header-only view, state persists
5. Close: Hide panel completely, reopenable via menu

Security

• All markdown content sanitized via DOMPurify before rendering
• XSS protection enabled
• Safe handling of user-provided content
• CSP-compliant implementation

Testing

Unit Tests: app/test/components/inference/additional-info-panel.test.js

• Component rendering
• Markdown parsing
• Tab switching
• Minimize/expand
• Drag functionality

E2E Tests: cypress/e2e/inference-page/additional-info-panel.cy.js

• Panel visibility
• User interactions
• State persistence
• Integration with inference page

Dependencies Added

• marked (^11.2.0) - Markdown parsing
• dompurify (^3.0.9) - HTML sanitization

Documentation

• docs/ADDITIONAL_INFO_PANEL_README.md - User guide
• docs/ADDITIONAL_INFO_API_EXAMPLES.md - API integration guide
• ADDITIONAL_INFO_PANEL_PLAN.md - Technical specifications

Future Enhancements

• Resizable panel
• Multiple panel instances
• Export content functionality
• Print support
• Custom themes
• Collapsible sections within content

[cwachira]

lgtm