Skip to main content

​
Overview

The Model Controls component is your primary interface for managing model parameters, running simulations, and controlling the modeling workflow. It provides an intuitive way to interact with your system dynamics models in real-time.

​
Component Layout

The Model Controls panel is organized into several key sections:

Active Parameters

Real-time parameter controls and adjustments

Simulation Controls

Run, pause, and reset simulation functions

Scenario Management

Save, load, and manage different parameter sets

Model Settings

Configuration options and model preferences

​
Active Parameters Section

​
Parameter Activation

Parameters must be marked as “Active” to appear in the controls panel: 
// Example parameter configuration
interface Parameter {
  id: string;
  name: string;
  value: number | boolean | string;
  min?: number;
  max?: number;
  step?: number;
  type: 'number' | 'boolean' | 'string';
  active: boolean;
}

​
Parameter Controls

​
Numeric Parameters

Interactive sliders for real-time parameter adjustment with configurable min/max values and step sizes
Text input fields for precise parameter values with validation
Visual indicators showing current value within allowable range

​
Boolean Parameters

Toggle switches for on/off parameters:
  • Visual Toggle: Clear on/off state indication
  • Instant Feedback: Immediate simulation updates
  • Grouped Controls: Related boolean parameters grouped together

​
String Parameters

Text input fields for configuration values:
  • Validation: Real-time input validation
  • Autocomplete: Suggestions for common values
  • History: Recently used values

​
Parameter Header Actions

The “Active Parameters” section header includes control buttons:

Refresh All

Reset all parameters to defaults while keeping them active

Clear Active

Remove all parameters from active list

Expand/Collapse

Show/hide the parameters section

​
Simulation Controls

​
Primary Actions

1

Run Simulation

Execute the model with current parameter values
  • Instant Execution: Results appear in real-time
  • Progress Indicators: Visual feedback during execution
  • Error Handling: Clear error messages if execution fails
2

Reset Parameters

Return all parameters to their default values
  • Confirmation Dialog: Prevent accidental resets
  • Selective Reset: Option to reset individual parameters
  • Undo Capability: Restore previous parameter state
3

Compare Mode

Toggle between baseline and scenario comparison
  • Side-by-side Charts: Visual comparison of results
  • Difference Calculations: Quantify changes from baseline
  • Export Options: Download comparison data

​
Advanced Controls

Adjust the speed of animated simulations for better visualization
Configure simulation start/end times and step size
Choose between different data export formats

​
Scenario Management

​
Saving Scenarios

Preserve interesting parameter combinations for future use: 
interface Scenario {
  id: string;
  name: string;
  description?: string;
  parameters: Record<string, any>;
  timestamp: Date;
  author: string;
}

​
Scenario Features

Quick Save

Save current parameters with auto-generated name

Named Scenarios

Save with custom names and descriptions

Load Previous

Restore previously saved parameter sets

Share Scenarios

Export scenarios for team collaboration

​
Scenario Management UI

  • Scenario List: Dropdown or modal with all saved scenarios
  • Preview: Show parameter values before loading
  • Metadata: Display save date, author, and description
  • Organization: Group scenarios by project or category

​
Parameter State Management

​
State Persistence

The Model Controls component maintains parameter state across sessions:
  • Browser Storage: Local storage for parameter values
  • Cloud Sync: Optional synchronization across devices
  • Version Control: Integration with Git for parameter history
  • Backup: Automatic backup of parameter configurations

​
State Updates

Real-time synchronization with model execution:
Parameter changes trigger immediate model updates when in real-time mode
Option to accumulate changes and apply them together
Parameter values are validated before being applied to the model

​
Responsive Design

​
Layout Adaptation

The Model Controls component adapts to different screen sizes:
  • Desktop: Full sidebar layout with all controls visible
  • Tablet: Collapsible sections with touch-friendly controls
  • Mobile: Modal-based interface with simplified controls

​
Touch Interactions

Optimized for touch devices:
  • Larger Touch Targets: Bigger buttons and sliders
  • Gesture Support: Swipe gestures for navigation
  • Haptic Feedback: Vibration feedback on compatible devices

​
Integration Features

​
Event System

The component communicates with other parts of the application: 
// Example event handlers
interface ModelControlsProps {
  onParameterChange: (id: string, value: any) => void;
  onRunSimulation: () => void;
  onReset: () => void;
  onResetActiveToDefaults: () => void;
  onSaveScenario: (scenario: Scenario) => void;
  onLoadScenario: (scenarioId: string) => void;
}

​
Data Binding

Two-way data binding with the model execution engine:
  • Parameter Updates: Changes flow to simulation engine
  • Result Feedback: Simulation results update UI state
  • Error Propagation: Execution errors displayed in controls
  • Performance Metrics: Execution time and performance data

​
Accessibility Features

​
Keyboard Navigation

Full keyboard accessibility for all controls:
  • Tab Navigation: Logical tab order through all controls
  • Keyboard Shortcuts: Quick access to common functions
  • Focus Indicators: Clear visual focus states
  • Screen Reader Support: Proper ARIA labels and descriptions

​
Visual Accessibility

  • High Contrast: Support for high contrast modes
  • Font Scaling: Respect system font size preferences
  • Color Independence: Information not conveyed by color alone
  • Motion Reduction: Respect reduced motion preferences

​
Customization Options

​
Theming

Customize the appearance to match your brand:
  • Color Schemes: Custom color palettes
  • Typography: Font family and sizing options
  • Spacing: Adjust padding and margins
  • Animations: Configure transition effects

​
Layout Options

  • Panel Position: Left, right, or floating panels
  • Size Configuration: Fixed width or responsive sizing
  • Section Organization: Customize which sections are shown
  • Default States: Configure default expanded/collapsed states
Use the refresh button in the Active Parameters header to quickly reset all parameters while keeping them active - perfect for rapid experimentation

​
Best Practices

​
Parameter Organization

  1. Logical Grouping: Group related parameters together
  2. Clear Naming: Use descriptive parameter names
  3. Appropriate Ranges: Set meaningful min/max values
  4. Default Values: Choose sensible defaults for new users

​
User Experience

  1. Progressive Disclosure: Show basic controls first, advanced options on demand
  2. Immediate Feedback: Provide instant visual feedback for all actions
  3. Error Prevention: Validate inputs and prevent invalid states
  4. Help Text: Include tooltips and help text for complex parameters

​
Next Steps

Chart Components

Learn about visualization components

Stock-Flow Diagrams

Explore model structure visualization
⌘I