Presentation Layer ================== Overview -------- The Presentation Layer of the TMT module implements the user interface and interaction patterns for administering the Trail Making Test. It uses GetX for state management and follows a clean architecture pattern with clear separation between UI, state management, and business logic. Components ---------- Screens ^^^^^^^ **TmtTestHelpPage** Provides test instructions with contextual guidance: - Separate help content for TMT-A and TMT-B tests - Clear explanation of test objectives and procedures - Option to proceed to practice or return to previous screen - Support for different help modes (TMT_TEST_A, TMT_TEST_B, TMT_PRACTICE_A, TMT_PRACTICE_B) **TmtTestPracticePage** A training environment with simplified test parameters: - Implements practice mode with 9 circles instead of 25 - Supports three practice modes (TMT_A_ONLY, TMT_B_ONLY, TMT_A_THEN_B) - Provides interactive feedback during practice - Allows unlimited attempts to reinforce proper test execution **TmtTestPage** The formal test execution screen: - Implements full 15 or 25 circle test based on configuration - Tracks timer data and displays in app bar - Handles test state transitions between parts A and B - Manages user interactions via gesture detection - Adapts to orientation changes while preserving test state **TmtResultsScreen** Presents comprehensive test results: - Displays completion times and error counts for both test parts - Shows session count for longitudinal tracking - Adapts layout based on device orientation and screen size - Includes scrolling for compact screens with scroll indicator - Prevents navigation back to preserve test integrity **TmtSelectModePracticeOrTest** Interface for selecting test mode and configuration: - Offers choice between practice and formal test - Displays informational dialogs explaining each mode - Initiates hand selection dialog for formal tests - Uses responsive layout for different orientations Controllers ^^^^^^^^^^^ **BaseTmtTestFlowController** Abstract base controller defining the test flow interface: - Manages test state transitions (READY, TMT_A_IN_PROGRESS, TMT_A_COMPLETED, TMT_B_IN_PROGRESS, TEST_COMPLETED) - Defines abstract methods for concrete implementations - Maintains the metrics controller for performance tracking - Handles test initialization and configuration loading **TmtTestFlowStateController** Implements formal test flow management: - Controls state transitions for the complete TMT test - Preserves metrics from TMT-A for comprehensive reporting - Initializes game configuration with user preferences - Manages test metrics throughout the test execution **TmtPracticeFlowController** Specialized controller for practice mode: - Simplifies test configuration for practice sessions - Resets metrics between practice attempts - Uses practice-specific circle counts and parameters - Maintains clean state separation from formal tests **TmtResultReportController** Manages test result submission and reporting: - Processes metrics into reportable result data - Handles API communication for result submission - Manages local result storage when offline - Tracks request states (loading, success, error) Components ^^^^^^^^^^ **TmtGameBoardController** Core UI component managing the interactive test board: - Renders circles based on test configuration - Handles user touch interactions (pan start, update, end) - Validates connections and detects errors - Provides visual feedback for connections and errors - Supports "cheat mode" for debugging and demonstrations - Adapts to orientation changes and screen dimensions **TmtPainter** Custom painter for rendering the test interface: - Draws circles with correct styling based on state - Renders connection paths as user interacts - Provides visual feedback for errors - Handles start/end circle special styling - Implements proper z-ordering of visual elements - Optimizes redrawing for performance **TmtResultCard** Displays test results in a structured card format: - Shows test part title (TMT A or TMT B) - Presents duration and error count - Adapts layout based on available space - Uses responsive sizing for different devices - Implements consistent styling with app theme **TmtSelectHandDialog** Dialog for selecting which hand will be used: - Presents clear options for left or right hand - Uses intuitive hand emojis for visual clarity - Captures selection for result interpretation - Ensures hand usage is recorded for clinical validity **TmtCustomAppBar** Specialized app bar for the test interface: - Displays accurate timer during test execution - Shows contextual help button with appropriate handling - Adapts to test state changes - Provides consistent navigation across test phases Bindings ^^^^^^^^ **TmtTESTBinding** Manages dependencies for formal test mode: - Registers TmtTestFlowStateController - Ensures proper initialization of test environment **TmtTESTPracticeBinding** Handles practice mode dependencies: - Registers TmtPracticeFlowController - Sets up practice-specific configuration **TmtResultBinding** Sets up result reporting dependencies: - Registers repositories and services for result handling - Configures result reporting use cases - Establishes pending result management **TmtGameConfigBinding** Manages test configuration dependencies: - Registers configuration repositories - Sets up use cases for configuration persistence - Ensures test parameters are properly loaded UI Flows ^^^^^^^^ **Test Help Flow** 1. User views contextual help for selected test part 2. User can proceed to practice or return to selection screen 3. Navigation maintains proper context between screens **Practice Flow** 1. User selects practice mode 2. Practice test is generated with simplified parameters 3. User completes practice with unlimited attempts 4. Dialogs provide guidance and transition options **Formal Test Flow** 1. User selects test mode and hand preference 2. TMT-A is generated and timed 3. On completion, transition dialog is displayed 4. TMT-B is generated and timed 5. Results screen shows comprehensive metrics **Responsiveness** The presentation layer implements several responsive design patterns: - Adaptive layouts based on device size and orientation - Dynamic calculation of circle positions and sizes - Orientation-aware component arrangements - Screen-size dependent spacing and margins - Tablet-specific optimizations for larger displays This comprehensive presentation layer delivers a clinically valid yet user-friendly implementation of the Trail Making Test that maintains assessment integrity while providing a smooth, intuitive user experience across different devices.