Response Visualization Examples

Overview

This document provides comprehensive examples of using the Response Visualization System for different types of content and use cases.

Basic Examples

Numerical Data Visualization

from packages.rag.response_visualization import ResponseVisualizationSystem, VisualizationConfig

# Create system
config = VisualizationConfig(interactive=True, accessibility=True)
system = ResponseVisualizationSystem(config)

# Numerical data content
content = """
Sales Performance Q3 2024:
- Revenue: $2.5M (25% increase)
- Customer acquisition: 500 new customers
- Market share: 15% (up from 12%)
- Customer satisfaction: 4.8/5
"""

# Generate visualization
result = await system.process_response(content, DeviceType.DESKTOP)
print(f"Visualization type: {result.visualization_type}")  # BAR_CHART
print(f"Content: {result.content}")  # HTML with interactive bar chart

Process Workflow Visualization

# Process workflow content
content = """
Customer Onboarding Process:

1. Initial Contact
   - Customer submits inquiry
   - Sales team responds within 2 hours
   - Initial needs assessment

2. Proposal Development
   - Custom solution designed
   - Pricing proposal created
   - Technical specifications prepared

3. Implementation
   - Project kickoff meeting
   - System configuration
   - User training provided
"""

result = await system.process_response(content, DeviceType.DESKTOP)
print(f"Visualization type: {result.visualization_type}")  # FLOWCHART

Comparison Analysis

# Comparison content
content = """
Product Comparison: Option A vs Option B

Feature Comparison:
- Performance: A (95%) vs B (88%)
- Cost: A ($10K/month) vs B ($7K/month)
- Scalability: A (High) vs B (Medium)
- Support: A (24/7) vs B (Business hours)
"""

result = await system.process_response(content, DeviceType.DESKTOP)
print(f"Visualization type: {result.visualization_type}")  # COMPARISON_TABLE

Advanced Examples

Timeline Visualization

# Timeline content
content = """
Project Timeline Q4 2024:

October 2024:
- Week 1: Project kickoff
- Week 2: Requirements gathering
- Week 3: Technical architecture
- Week 4: Development setup

November 2024:
- Week 1: Core development
- Week 2: Integration testing
- Week 3: UI development
- Week 4: Security audit

December 2024:
- Week 1: User acceptance testing
- Week 2: Performance optimization
- Week 3: Production deployment
- Week 4: Go-live and monitoring
"""

result = await system.process_response(content, DeviceType.DESKTOP)
print(f"Visualization type: {result.visualization_type}")  # TIMELINE

Hierarchical Structure

# Hierarchical content
content = """
Organizational Structure:

Executive Level:
- CEO: Sarah Johnson
- CTO: Michael Chen
- CFO: Lisa Rodriguez

Department Heads:
- Engineering: 45 employees
  - Backend Team: 20 developers
  - Frontend Team: 15 developers
  - DevOps Team: 10 engineers
- Sales: 25 employees
  - Enterprise Sales: 10 reps
  - SMB Sales: 15 reps
"""

result = await system.process_response(content, DeviceType.DESKTOP)
print(f"Visualization type: {result.visualization_type}")  # HIERARCHY_TREE

Interactive Examples

Interactive Dashboard

# Interactive content with drill-down capabilities
content = """
Interactive Sales Dashboard:

Key Metrics (click to drill down):
- Revenue: $2.5M
- Customers: 500
- Growth: 25%

Regional Breakdown (hover for details):
- North America: $1.2M (48%)
- Europe: $800K (32%)
- Asia-Pacific: $500K (20%)

Monthly Trends (expand for details):
- January: $200K
- February: $220K
- March: $250K
"""

result = await system.process_response(content, DeviceType.DESKTOP)
print(f"Interactive elements: {result.accessibility_info}")

Expandable Sections

# Content with expandable sections
content = """
Technical Documentation:

## API Endpoints (expand for details)
- GET /api/users
- POST /api/users
- PUT /api/users/{id}
- DELETE /api/users/{id}

## Database Schema (expand for details)
- Users table
- Orders table
- Products table

## Configuration (expand for details)
- Environment variables
- Database settings
- Security settings
"""

result = await system.process_response(content, DeviceType.DESKTOP)
# Will include expandable sections for better organization

Responsive Design Examples

Mobile Optimization

# Test on mobile device
result = await system.process_response(content, DeviceType.MOBILE)
print(f"Responsive breakpoints: {result.responsive_breakpoints}")

# Check mobile-specific optimizations
mobile_breakpoint = result.responsive_breakpoints.get(DeviceType.MOBILE)
print(f"Mobile width: {mobile_breakpoint['width']}")
print(f"Touch target size: {mobile_breakpoint['touch_target_size']}")

Tablet Optimization

# Test on tablet device
result = await system.process_response(content, DeviceType.TABLET)
tablet_breakpoint = result.responsive_breakpoints.get(DeviceType.TABLET)
print(f"Tablet layout: {tablet_breakpoint['layout_type']}")
print(f"Grid columns: {tablet_breakpoint['grid_columns']}")

Export Examples

HTML Export

from packages.rag.export_capabilities import ExportCapabilitiesSystem, ExportFormat

export_system = ExportCapabilitiesSystem()

# Export as HTML
result = await export_system.export_visualization(
    visualization_content,
    ExportFormat.HTML,
    "output.html"
)
print(f"Export success: {result.success}")
print(f"File size: {result.file_size} bytes")

Multiple Format Export

# Export in multiple formats
formats = [ExportFormat.HTML, ExportFormat.PDF, ExportFormat.JSON]

for format_type in formats:
    result = await export_system.export_visualization(
        visualization_content,
        format_type,
        f"output.{format_type.value}"
    )
    print(f"{format_type.value}: {result.success}")

Batch Export

# Batch export multiple visualizations
visualizations = [
    {"content": "Visualization 1", "title": "Sales Data"},
    {"content": "Visualization 2", "title": "Customer Metrics"},
    {"content": "Visualization 3", "title": "Performance Trends"}
]

results = await export_system.batch_export_visualizations(
    visualizations,
    [ExportFormat.HTML, ExportFormat.PDF],
    "output_directory"
)

print(f"Exported {len(results)} files")

Accessibility Examples

Screen Reader Support

# Check accessibility features
result = await system.process_response(content, DeviceType.DESKTOP)

print(f"Screen reader compatible: {result.accessibility_info['screen_reader_compatible']}")
print(f"Keyboard navigable: {result.accessibility_info['keyboard_navigable']}")
print(f"Alt text: {result.accessibility_info['alt_text']}")
print(f"ARIA label: {result.accessibility_info['aria_label']}")

High Contrast Mode

# Generate high contrast version
config = VisualizationConfig(
    theme="high_contrast",
    color_scheme="high_contrast",
    accessibility=True
)

system = ResponseVisualizationSystem(config)
result = await system.process_response(content, DeviceType.DESKTOP)

# Check contrast ratio
contrast_ratio = result.accessibility_info['color_contrast_ratio']
print(f"Contrast ratio: {contrast_ratio}")
print(f"WCAG AA compliant: {contrast_ratio >= 4.5}")

Analytics Examples

Usage Analytics

# Get analytics
analytics = await system.get_analytics()

print(f"Total visualizations: {analytics['total_visualizations']}")
print(f"Visualization types: {analytics['visualization_types']}")
print(f"Accessibility usage: {analytics['accessibility_usage']}")
print(f"Export usage: {analytics['export_usage']}")

Performance Monitoring

import time

# Monitor performance
start_time = time.time()
result = await system.process_response(content, DeviceType.DESKTOP)
end_time = time.time()

processing_time = end_time - start_time
print(f"Processing time: {processing_time:.2f} seconds")
print(f"Content length: {len(result.content)} characters")

Integration Examples

With Structured Formatting

from packages.rag.structured_formatting import StructuredFormattingSystem, FormattingConfig

# Create formatting system
format_config = FormattingConfig(include_toc=True, responsive=True)
format_system = StructuredFormattingSystem(format_config)

# Format content first
formatted_response = await format_system.format_response(content)

# Then generate visualization
result = await system.process_response(content, DeviceType.DESKTOP)

# Combine results
combined_content = formatted_response.content + result.content

With Responsive Design

from packages.rag.responsive_design import ResponsiveDesignSystem

# Create responsive system
responsive_system = ResponsiveDesignSystem()

# Create responsive layout
content_components = [{"type": "text", "content": content}]
layout = await responsive_system.create_responsive_layout(
    content_components,
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
    1920, 1080
)

# Generate responsive CSS
css = await responsive_system.generate_responsive_css(layout)

Error Handling Examples

Graceful Degradation

try:
    result = await system.process_response(content, DeviceType.DESKTOP)
    if result.content:
        print("Visualization generated successfully")
    else:
        print("No visualization content generated")
except Exception as e:
    print(f"Error generating visualization: {e}")
    # Fallback to text representation
    fallback_content = f"<div class='fallback'>{content}</div>"

Content Validation

# Validate content before processing
def validate_content(content):
    if not content or len(content.strip()) == 0:
        raise ValueError("Content cannot be empty")
    
    if len(content) > 10000:  # 10KB limit
        raise ValueError("Content too large for processing")
    
    return True

# Use validation
try:
    validate_content(content)
    result = await system.process_response(content, DeviceType.DESKTOP)
except ValueError as e:
    print(f"Content validation failed: {e}")

Best Practices

Content Preparation

def prepare_content_for_visualization(content):
    """Prepare content for optimal visualization."""
    # Clean up content
    content = content.strip()
    
    # Add structure if missing
    if not content.startswith('#'):
        content = f"# {content}"
    
    # Ensure proper formatting
    content = content.replace('\n\n', '\n')
    
    return content

# Use prepared content
prepared_content = prepare_content_for_visualization(content)
result = await system.process_response(prepared_content, DeviceType.DESKTOP)

Performance Optimization

# Enable caching for better performance
config = VisualizationConfig(
    cache_enabled=True,
    cache_ttl=3600,  # 1 hour
    lazy_loading=True
)

system = ResponseVisualizationSystem(config)

# Process with caching
result = await system.process_response(content, DeviceType.DESKTOP)

These examples demonstrate the comprehensive capabilities of the Response Visualization System and provide practical guidance for implementation in various scenarios.