Project Structure

Project Root

tree -L 1 --dirsfirst --sort=name -I 'node_modules|FluSight-forecast-hub|venv|workflow_backup'
.
├── public
├── scripts
├── src
├── README.md
├── app.yaml
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.jso

---

Inside public:

public folder stores all static assets that the website needs. Next.js bundles and parses static assets inside this folder automatically in building process and every asset will turn into chunks of resources accessed by JS engine.

.
├── data
│   ├── archive
│   │   ├── CEPH-Rtrend_fluH
│   │   ├── MIGHTE-Nsemble
│   │   └── MOBS-GLEAM_FLUH
│   ├── ground-truth
│   │   ├── historical-data
│   │   └── target-hospital-admissions.csv
│   ├── processed
│   │   ├── CEPH-Rtrend_fluH
│   │   ├── FluSight-ensemble
│   │   ├── MIGHTE-Nsemble
│   │   ├── MOBS-GLEAM_FLUH
│   │   └── NU_UCSD-GLEAM_AI_FLUH
│   ├── unprocessed
│   │   ├── CEPH-Rtrend_fluH
│   │   ├── FluSight-ensemble
│   │   ├── MIGHTE-Nsemble
│   │   ├── MOBS-GLEAM_FLUH
│   │   └── NU_UCSD-GLEAM_AI_FLUH
│   ├── locations.csv
│   └── thresholds.csv
├── about.md
├── epistorm-logo.png
├── fluforecast-logo.png
├── gz_2010_us_040_00_5m.json
└── states-10m.json

data/ground-truth:

• target-hospital-admissions.csv contains ground truth data (surveillance data) that shows actual flu-hospitalization information.
• historical-data/ contains historical csv files containing flu-hospitalization information that are redacted and corrected later (thus the data we see in current time). Format is the same as target-hospital-admissions.csv. See About Historical Ground Data for more information.

data/processed: This folder stores multiple model's forecasts in CSV format, each model in a separate file, after going through Data Transformation.

data/unprocessed: Stores multiple model's forecasts in CSV format, before transformation and handling.

locations.csv: The file with the mapping and listing of all US state code, abbreviation and full name.

thresholds.csv: Contains raw information about thresholds calculated using overall data. Is used by Nowcast Components

Locations, the shapes of surveillance data and prediction data are parsed by frontend and adhere to custom Interfaces located at Custom Interfaces.

---

scripts Directory

.
├── data_retrieval.sh
├── setup_directories.sh
├── transform_archive.py
└── transform_data.py

1 directory, 4 files

This directory contains the bash shell scripts and python scripts necessary for the data pipeline

See CI/CD Pipeline and Data Pipeline for more information.

---

src/app Directory

tree -L 3 src

src
└── app
    ├── CSS
    │   ├── EvaluationsPage.css
    │   ├── StyledDatePicker.css
    │   ├── globals.css                   # All Styles for dashboard here
    │   ├── material-tailwind-wrapper.tsx
    │   └── reset.css
    ├── Components
    │   ├── BackgroundInfoContent.tsx
    │   ├── Footer.tsx
    │   ├── Header.tsx
    │   ├── HomePageWelcome.tsx
    │   └── InfoPage.tsx
    ├── Interfaces
    │   ├── forecast-interfaces.tsx
    │   └── modelColors.ts
    ├── background
    │   ├── layout.tsx
    │   └── page.tsx
    ├── evaluations
    │   ├── layout.tsx
    │   └── page.tsx
    ├── forecasts
    │   ├── forecasts-components      # Dashboard Visualizations in here
    │   ├── layout.tsx
    │   ├── page-clone.tsx
    │   └── page.tsx
    ├── icon.png
    ├── layout.tsx
    ├── loading.tsx
    ├── not-found.tsx
    ├── page.tsx
    └── store
        ├── filterSlice.ts
        ├── groundTruthSlice.ts
        ├── historicalGroundTruthSlice.ts
        ├── hooks.ts
        ├── index.ts
        ├── locationSlice.ts
        ├── nowcastTrendsSlice.ts
        ├── predictionsSlice.ts
        └── stateThresholdsSlice.ts

10 directories, 33 file

(Taken at 2024-10-31 12:57)

Note: The project is using Next.js's new App Router. See Next.js App Router Documentation for more information.

Main Source Code reside within src/app directory.

/CSS stores

/Components stores all Static, site-wide React components. See Static Components.

/Interfaces stores all the custom interfaces used in the project. These interfaces are used to type-check the data that are being passed around the components. See CustomDataInterface.

Note

No longer serving /background and /contact page on epistorm.

/background, /contact, /evaluations, /forecasts are the folders that contain the layout and page components for each page of the website. See ForecastsPage and EvaluationsPage for detail.

/store contains the Redux store, which is used to manage the state of the application. The store is divided into slices, each slice is responsible for managing a specific part of the state. See StateManagement.

/layout.tsx is the layout component that wraps around all the pages. It contains the header and footer components.

/loading.tsx is the loading component that is displayed when the website is loading.

/not-found.tsx is the 404 page that is displayed when the user navigates to a page that does not exist.

/page.tsx is the default page, or the landing page. In our use case we do not display anything other than the child pages, which are Forecasts and Evaluations.

Project Configuration Files

app.yaml: Contains deployment instructions for Google Cloud App Engine only. For more information see [Deployment to Google Cloud](Google Cloud Deployment)

next-env.d.ts: TypeScript declaration file for Next.js.

package-lock.json: Lock file for Node.js dependencies, generated by npm.

package.json: Node.js project configuration file, contains the list of declared dependencies and scripts to run, build or test the project.

postcss.config.js: Tailwind CSS is added into postcss configurations as a plugin.

tailwind.config.js: Tailwind CSS configuration file. Configured according to Tailwind CSS with Next.js. In here, we are declaring what file to scan for Tailwind CSS classes, using regex. Theme, extension, and other plugins or other configurations should be declared here.

tsconfig.json: TypeScript configuration file for the project.