StateManagement

Redux Implementation Documentation

Overview

This project uses Redux Toolkit for state management. The implementation follows a slice pattern, with each slice managing a specific domain/aspect of the application's state needed for adjusting the various visualizations.

Store Structure

Core State Slices

{
  groundTruth: GroundTruthState,
  predictions: PredictionsState,
  location: LocationState,
  filter: FilterState, //Various Settings (date, US State, season, etc.)
  nowcastTrends: NowcastTrendsState,
  stateThresholds: StateThresholdsState,
  historicalGroundTruth: HistoricalGroundTruthState
}

Data Flow Architecture

Loading Phase

Note

Currently Building Evaluations Page, expect changes here

The application implements a two-phase data loading strategy:

1. Initial Data Loading (forecasts/page.tsx)

   • Loads surveillance data
   • Processes model predictions
   • Fetches location information
   • Retrieves nowcast trends
   • Sets up threshold data
   • Prepares historical data

2. Store States Inside Redux

   • Redux managed

Slice Details

1. Filter Slice

interface FilterState {
  selectedStateName: string;
  USStateNum: string;
  forecastModel: string[];
  numOfWeeksAhead: number;
  dateStart: Date;
  dateEnd: Date;
  dateRange: string;
  yAxisScale: string;
  confidenceInterval: string[];
  historicalDataMode: boolean;
  seasonOptions: SeasonOption[];
  userSelectedRiskLevelModel: string;
  userSelectedWeek: Date;
}

Purpose: Filter Slice is for storing what user has chosen for the various options related to how Forecast Visualization Components and Nowcast Visualization Components display.

2. Ground Truth Slice

interface GroundTruthState {
  data: DataPoint[];
}

Purpose: Stores actual surveillance data

• Historical hospitalization rates
• Weekly admission data by state
• Used as baseline for model comparisons

3. Historical Ground Truth Slice

interface HistoricalGroundTruthState {
  data: HistoricalDataEntry[];
}

Purpose: Maintains historical surveillance data snapshots

• Tracks data revisions over time
• Enables historical comparison views
• Supports model evaluation features

4. Location Slice

interface LocationState {
    data: LocationData[];  // LocationData contains state information and population
}

Purpose: Stores Location Data

5. Nowcast Trends Slice

interface NowcastTrendsCollection {
    allData: NowcastTrendByModel[];  // Trend analysis by model
}

Purpose: Current trend analysis management

• Tracks trend directions (increase/decrease/stable)
• Maintains model-specific trend predictions
• Supports risk level visualizations

6. Predictions Slice

interface PredictionsState {
    data: ModelPrediction[];  // Forecast data from multiple models
}

Purpose: Model forecast data management

• Stores predictions from multiple models
• Maintains confidence intervals
• Tracks forecast horizons

4. State Thresholds Slice

interface StateThresholdsState {
    data: StateThresholds[];  // Risk level thresholds by state
}

Purpose: Risk level threshold management

• Defines risk level boundaries
• State-specific threshold values
• Supports risk assessment visualizations

State Management Patterns

1. Centralized Data Loading

The application uses centralized data loading patterns in major page components:

// Example from forecasts/page.tsx
useEffect(() => {
  fetchForecastData();
  fetchLocationData();
  fetchNowcastTrendsData();
  fetchThresholdsData();
  fetchHistoricalGroundTruthData();
}, []);

2. Type-Safe Hooks

Custom hooks ensure type safety when accessing the Redux store:

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Usage Examples

1. Accessing State

const selectedState = useAppSelector((state) => state.filter.selectedStateName);
const groundTruthData = useAppSelector((state) => state.groundTruth.data);

2. Dispatching Actions

const dispatch = useAppDispatch();
dispatch(updateSelectedState({ stateName: "California", stateNum: "06" }));
dispatch(setGroundTruthData(processedData));

Integration Points

1. Visualization Components

• Chart components subscribe to relevant state
• Filter panels dispatch state updates
• Risk level indicators react to state changes

2. Data Loading

• Page components handle initial data loading
• Error states managed through Redux
• Loading states tracked for UI feedback