ForecastPage

Warning

Project undergoing migration to Google Cloud Platform, content subject to frequent change

Forecasts Page Documentation

Overview

The Forecasts page (/forecasts) is a core page component of the Epistorm Dashboard, responsible for visualizing and analyzing flu-related hospitalization predictions from various models.

Child Components include Forecast Components and Nowcast Components

Component Structure

The page is structured as a client-side rendered component with the following main sections:

• Selected State & Nowcast Info Header
• Nowcast US-Map + Thermometer + Activity Level Information
• Nowcast Gauge (General Trend)
• Settings Panel
• Forecast Chart Header
• Forecast Graph (Weekly Hospitalization Forecast)

Layout and Design

The component uses a custom CSS Grid layout system with the following structure:

+------------------+-----------------+------------------+|
|             Nowcast Header         |                   |
+------------------+-----------------+                   |
| Nowcast Thermo   | Nowcast Gauge   |                   |
+------------------+-----------------+                   |
|          Forecast Header           |  Settings Panel   |
+------------------+-----------------+                   |
|           Forecast Chart           |                   |
+------------------+-----------------+------------------+|

Data Management

Data Sources

The component interfaces with several data sources:

1. Ground Truth Data: Historical hospitalization data

   • Source: /data/ground-truth/target-hospital-admissions.csv
   • Format: Weekly hospitalization rates by state

2. Prediction Data: Model forecasts from multiple teams

   • Source: /data/processed/{model_name}/predictions.csv
   • Models: *See Data Pipeline for list of models

3. Location Data: State/location information

   • Source: /data/locations.csv
   • Contains: State codes, full names, and population data

4. Nowcast Trends: Current trend analysis

   • Source: /data/processed/{model_name}/nowcast_trends.csv
   • Format: Trend indicators (increase/decrease/stable) by location

5. Thresholds Data: Risk level thresholds

   • Source: /data/thresholds.csv
   • Defines: Medium, High, and Very High risk thresholds data

6. Historical Ground Truth: Historical surveillance data

   • Source: /data/ground-truth/historical-data/
   • Format: Surveillance data of hospitalization, snapshot at given date

State Management

The component utilizes Redux for state management with the following slices:

• groundTruthSlice: Surveillance data
• predictionsSlice: Model predictions
• locationSlice: Geographic data
• nowcastTrendsSlice: Trend analysis
• filterSlice: User interface filters
• stateThresholdsSlice: Risk thresholds
• historicalGroundTruthSlice: Historical data

Key Features

1. Data Processing

Date Management

• Implements sophisticated date handling for flu seasons
• Automatically fills gaps in surveillance data (date that not yet exist in surveillance, but referred in prediction data)
• Handles UTC date comparisons

Season Options Generation

The component automatically generates season options based on available data:

• Seasons run from August 1st to July 31st
• Handles partial and ongoing seasons
• Provides clear labeling for current and historical seasons

2. Error Handling

The component implements robust error handling:

• Safe CSV fetching with fallback mechanisms
• Graceful handling of missing data files
• Loading state management for all data sources

3. Performance Optimization

Several optimizations are implemented:

• Conditional rendering based on loading states
• Efficient data processing using Map data structures
• Optimized date calculations and comparisons

Interfaces

The component uses several TypeScript interfaces (see Forecast Interfaces) including:

• DataPoint: Ground truth data structure
• PredictionDataPoint: Model prediction structure
• LocationData: Geographic information
• ModelPrediction: Model output structure
• SeasonOption: Season selection options

Related Components

• ForecastChart: Main visualization component
• SettingsPanel: User interface controls
• NowcastStateThermo: State-level risk visualization
• NowcastGauge: National risk visualization
• NowcastHeader: Contextual information
• ForecastChartHeader: Chart context and controls

Usage

To use this component:

1. Ensure all required data files are present in the correct locations
2. Set up Redux store with required slices
3. Import and mount the component in your Next.js application

import ForecastPage from './forecasts/page';

// Mount within your app
<ForecastPage />

Development Notes

• Component uses Client-Side Rendering
• Requires proper setup of data pipeline for CSV files
• Depends on specific date-fns functionality for date handling

See Also

• Data Pipeline
• Redux Based State Management