SettingsPanel

SettingsPanel Component

Overview

The SettingsPanel component serves as the primary control interface for the visualization dashboard, allowing users to configure visualization parameters, select data sources, and customize display options.

Key Features

• State selection through dropdown menu
• Model selection with visual color indicators
• Date range and season selection
• Forecast horizon configuration
• Y-axis scale toggle (linear/logarithmic)
• Confidence interval selection with multiple options
• Responsive layout design

Component Structure

interface SettingsPanel {
    stateSelection: {
        dropdown: ReactComponent;
        stateMap: ReactComponent;
    };
    modelSelection: {
        checkboxGroup: ReactComponent;
        colorIndicators: Record<string, string>;
    };
    dateControls: {
        seasonSelector: ReactComponent;
        datePickers: {
            start: DatePicker;
            end: DatePicker;
        };
    };
    configOptions: {
        horizonSelector: RadioGroup;
        axisScale: RadioGroup;
        confidenceIntervals: CheckboxGroup;
    };
}

State Management

Redux Actions

interface PanelActions {
    updateSelectedState: (state: StateSelection) => void;
    updateForecastModel: (models: string[]) => void;
    updateDateRange: (range: string) => void;
    updateDateStart: (date: Date) => void;
    updateDateEnd: (date: Date) => void;
    updateYScale: (scale: 'linear' | 'log') => void;
    updateConfidenceInterval: (intervals: string[]) => void;
    updateNumOfWeeksAhead: (weeks: number) => void;
}

Component Functions

interface SettingsFunctions {
    onStateSelectionChange: (stateNum: string) => void;
    onModelSelectionChange: (modelName: string, checked: boolean) => void;
    onDateStartSelectionChange: (date: Date) => void;
    onDateEndSelectionChange: (date: Date) => void;
    onSeasonSelectionChange: (timeValue: string) => void;
    onYAxisScaleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onConfidenceIntervalChange: (interval: string, checked: boolean) => void;
    handleShowAllDates: () => void;
}

Event Handlers

• Handles date range validation and constraints
• Manages model selection and deselection
• Processes state selection events
• Controls confidence interval toggling
• Manages axis scale switching

Styling

• Uses Tailwind CSS for responsive layout
• Implements Material Tailwind components
• Custom styling for date pickers
• Responsive text sizing classes
• Dark theme color scheme

Usage Example

<SettingsPanel>
  <div className="bg-mobs-lab-color-filterspane text-white">
    <StateSelection />
    <ModelSelection 
      models={modelNames}
      colorMap={modelColorMap}
    />
    <DateRangeSelection 
      seasonOptions={seasonOptions}
      minDate={earliestDate}
      maxDate={latestDate}
    />
    <ConfigurationOptions 
      horizonOptions={[0, 1, 2, 3]}
      scaleOptions={['linear', 'log']}
      confidenceIntervals={['50%', '90%', '95%']}
    />
  </div>
</SettingsPanel>

Accessibility Features

• ARIA labels for interactive elements
• Keyboard navigation support
• High contrast color scheme
• Screen reader compatible markup
• Focus management for modal dialogs

Error Handling

• Date range validation
• Model selection constraints
• State selection validation
• Data availability checks
• User input sanitization

Dependencies

{
  "dependencies": {
    "@material-tailwind/react": "^2.1.9",
    "react-date-picker": "^11.0.0",
    "date-fns": "^3.6.0"
  }
}

Known Limitations

• Single date range selection
• Fixed confidence interval options
• Predefined model color scheme
• Limited undo/redo capability

Future Improvements

1. Multiple date range comparison
2. Custom confidence interval input
3. User-defined color schemes
4. Configuration presets
5. Enhanced mobile support
6. Advanced filtering options
7. Data export capabilities